diff --git a/src/components/blockquote/_blockquote.hbs b/src/components/blockquote/_blockquote.hbs deleted file mode 100644 index 642333f0..00000000 --- a/src/components/blockquote/_blockquote.hbs +++ /dev/null @@ -1,7 +0,0 @@ -
-

Blockquotes

-
- “These new requirements will promote responsible cat and dog breeding and selling by allowing relevant agencies to identify and deal with problem breeders,” - Mr Marshall -
-
\ No newline at end of file diff --git a/src/components/blockquote/_blockquote.scss b/src/components/blockquote/_blockquote.scss deleted file mode 100644 index e69de29b..00000000 diff --git a/src/components/blockquote/blockquote.json b/src/components/blockquote/blockquote.json deleted file mode 100644 index e69de29b..00000000 diff --git a/src/components/blockquote/index.hbs b/src/components/blockquote/index.hbs deleted file mode 100644 index 7ea93ce8..00000000 --- a/src/components/blockquote/index.hbs +++ /dev/null @@ -1,4 +0,0 @@ ---- -title: Blockquote ---- -{{>_blockquote}} \ No newline at end of file diff --git a/src/components/breadcrumbs/_breadcrumbs.scss b/src/components/breadcrumbs/_breadcrumbs.scss index 69e0f459..fea740b2 100644 --- a/src/components/breadcrumbs/_breadcrumbs.scss +++ b/src/components/breadcrumbs/_breadcrumbs.scss @@ -26,7 +26,7 @@ position: relative; } - @include breakpoint('sm') { + @include breakpoint('md') { display: inline; } } @@ -40,7 +40,7 @@ &::before { display: none; - @include breakpoint('sm') { + @include breakpoint('md') { display: inline-block; } } diff --git a/src/components/callout/_callout.hbs b/src/components/callout/_callout.hbs index 30a7b6ef..a07ff25a 100644 --- a/src/components/callout/_callout.hbs +++ b/src/components/callout/_callout.hbs @@ -4,7 +4,7 @@ {{/if}}
- {{#if heading}}

{{heading}}

{{/if}} +

{{heading}}

{{copy}}

{{#if link}}{{link.text}}{{/if}}
diff --git a/src/components/callout/_callout.scss b/src/components/callout/_callout.scss index f3a39302..ba3112dd 100644 --- a/src/components/callout/_callout.scss +++ b/src/components/callout/_callout.scss @@ -5,7 +5,7 @@ position: relative; border-left: solid 6px $nsw-primary-blue; - @include breakpoint('sm') { + @include breakpoint('md') { @include nsw-spacing(padding, lg lg lg md); display: flex; flex-direction: row; @@ -16,19 +16,26 @@ width: rem(24px); height: rem(24px); - @include breakpoint('sm') { + + .nsw-callout__content { + @include nsw-spacing(margin-top, md); + } + + @include breakpoint('md') { @include nsw-spacing(margin-right, md); flex: 0 0 auto; width: rem(30px); height: rem(30px); + + + .nsw-callout__content { + @include nsw-spacing(margin-top, none); + } } } &__content { @include font-stack; - @include nsw-spacing(margin-top, md); - @include breakpoint('sm') { + @include breakpoint('md') { @include nsw-spacing(margin-top, none); } diff --git a/src/components/callout/callout-all.json b/src/components/callout/callout-all.json new file mode 100644 index 00000000..c1424d9b --- /dev/null +++ b/src/components/callout/callout-all.json @@ -0,0 +1,9 @@ +{ + "heading": "Callout Heading", + "icon": "search", + "copy": "Filium morte multavit si sine causa, nollem me tamen laudandis maioribus meis corrupisti nec voluptas sit, amet, consectetur, adipisci velit.", + "link": { + "text": "Text link", + "href": "#" + } +} diff --git a/src/components/callout/callout.json b/src/components/callout/callout.json index c1424d9b..f843646a 100644 --- a/src/components/callout/callout.json +++ b/src/components/callout/callout.json @@ -1,9 +1,4 @@ { "heading": "Callout Heading", - "icon": "search", - "copy": "Filium morte multavit si sine causa, nollem me tamen laudandis maioribus meis corrupisti nec voluptas sit, amet, consectetur, adipisci velit.", - "link": { - "text": "Text link", - "href": "#" - } + "copy": "Filium morte multavit si sine causa, nollem me tamen laudandis maioribus meis corrupisti nec voluptas sit, amet, consectetur, adipisci velit." } diff --git a/src/components/callout/index.hbs b/src/components/callout/index.hbs index f78a8b18..71d37793 100644 --- a/src/components/callout/index.hbs +++ b/src/components/callout/index.hbs @@ -1,7 +1,13 @@ --- title: Callout -model: callout.json +model: + default: callout.json + all: callout-all.json ---
- {{>_callout model}} + {{>_callout model.default}} +
+ +
+ {{>_callout model.all}}
diff --git a/src/components/card/_card.hbs b/src/components/card/_card.hbs index b333cb78..f0c606b0 100644 --- a/src/components/card/_card.hbs +++ b/src/components/card/_card.hbs @@ -11,7 +11,7 @@

{{/if}} -

{{copy}}

+ {{#if copy}}

{{copy}}

{{/if}} diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss index f9772598..7cadf6d9 100644 --- a/src/components/card/_card.scss +++ b/src/components/card/_card.scss @@ -34,9 +34,12 @@ @include font-size('sm'); @include nsw-spacing(padding, md md xxxl md); border-top: solid 6px $nsw-primary-highlight; + display: flex; + flex-direction: column; + order: 2; - @include breakpoint('md') { + @include breakpoint('lg') { @include nsw-spacing(padding, md xl xxxl xl); } @@ -47,6 +50,11 @@ &__tag { @include font-stack('heading'); + order: 1; + } + + &__date { + order: 2; } &__tag, @@ -54,17 +62,18 @@ @include font-size('xs'); } + &__title, + &__copy, + &__icon { + order: 3; + } + &__icon { @include nsw-spacing(margin, md none none none); @include nsw-spacing(bottom, md); position: absolute; - width: rem(16px); - height: rem(16px); - - @include breakpoint('sm') { - width: rem(20px); - height: rem(20px); - } + width: rem(20px); + height: rem(20px); } &__link { @@ -81,48 +90,19 @@ text-decoration: underline; } } -} -.nsw-card--media { - .nsw-card__image-area { + &__image-area { order: 1; height: rem(200px); } - .nsw-card__content { - order: 2; - } - - .nsw-card__image { + &__image { width: 100%; height: 100%; object-fit: cover; } - } -.nsw-card--news { - .nsw-card__content { - display: flex; - flex-direction: column; - } - - .nsw-card__tag { - order: 1; - } - - .nsw-card__date { - order: 2; - } - - .nsw-card__title, - .nsw-card__copy, - .nsw-card__icon { - order: 3; - } -} - - .nsw-card--headline { .nsw-card__title { @include font-size('xl'); diff --git a/src/components/card/card-media.json b/src/components/card/card-media.json index e82d1132..3fd10433 100644 --- a/src/components/card/card-media.json +++ b/src/components/card/card-media.json @@ -1,5 +1,4 @@ { - "theme": "media", "heading": "Ut placet inquam tum dicere exorsus est laborum et inter", "copy": "Sunt autem quibusdam et voluptatem ut ita ruant itaque earum motus et expe", "img": "https://picsum.photos/id/421/400/200" diff --git a/src/components/card/card-news.json b/src/components/card/card-news.json index 206bdf12..21dd5d92 100644 --- a/src/components/card/card-news.json +++ b/src/components/card/card-news.json @@ -1,5 +1,4 @@ { - "theme": "news", "heading": "Ut placet inquam tum dicere exorsus est laborum et inter", "copy": "Sunt autem quibusdam et voluptatem ut ita ruant itaque earum motus et expe", "tag": "Service NSW", diff --git a/src/components/hero-banner/_hero-banner.scss b/src/components/hero-banner/_hero-banner.scss index 29141de0..9a8a3ac2 100644 --- a/src/components/hero-banner/_hero-banner.scss +++ b/src/components/hero-banner/_hero-banner.scss @@ -2,14 +2,14 @@ $parent: &; position: relative; - @include breakpoint('sm') { + @include breakpoint('md') { height: rem(380px); overflow: hidden; } &__image-area { - @include breakpoint('sm') { + @include breakpoint('md') { position: absolute; top: 0; left: 0; @@ -23,7 +23,7 @@ height: auto; display: block; - @include breakpoint('sm') { + @include breakpoint('md') { position: absolute; top: 50%; transform: translateY(-50%); @@ -34,7 +34,7 @@ &__content-area { @include break-out; - @include breakpoint('sm') { + @include breakpoint('md') { @include break-out-reset; height: rem(380px); background-color: transparent; @@ -49,7 +49,7 @@ background-color: $light20; border-top: solid 6px $nsw-primary-highlight; - @include breakpoint('sm') { + @include breakpoint('md') { @include nsw-spacing(padding, md lg); position: relative; top: 50%; @@ -106,7 +106,7 @@ color: $white; background-color: $dark80; - @include breakpoint('sm') { + @include breakpoint('md') { background-color: map-get($overlays, dark);; } } diff --git a/src/components/in-page-navigation/_in-page-navigation.scss b/src/components/in-page-navigation/_in-page-navigation.scss index 91ce5fac..591e2063 100644 --- a/src/components/in-page-navigation/_in-page-navigation.scss +++ b/src/components/in-page-navigation/_in-page-navigation.scss @@ -1,6 +1,6 @@ .nsw-page-nav { @include nsw-spacing(padding, md); - border-left: solid 4px $nsw-primary-blue; + border-left: solid 4px $nsw-primary-highlight; &__title { @include nsw-spacing(margin, none); diff --git a/src/components/link-list/_link-list.hbs b/src/components/link-list/_link-list.hbs index 770723b9..c24a4277 100644 --- a/src/components/link-list/_link-list.hbs +++ b/src/components/link-list/_link-list.hbs @@ -5,8 +5,8 @@
  • {{text}} + +
    • {{/each}} diff --git a/src/components/link-list/index.hbs b/src/components/link-list/index.hbs index 27535019..2543d049 100644 --- a/src/components/link-list/index.hbs +++ b/src/components/link-list/index.hbs @@ -3,5 +3,4 @@ title: Link list model: link-list.json --- -

    Link list

    {{>_link-list model}} diff --git a/src/components/main-navigation/_main-navigation.hbs b/src/components/main-navigation/_main-navigation.hbs index a6b635ac..81847a30 100644 --- a/src/components/main-navigation/_main-navigation.hbs +++ b/src/components/main-navigation/_main-navigation.hbs @@ -20,50 +20,7 @@ {{/if}} {{#if subnav}} - - {{/if}} - {{#if subnav}} -
    -
    - - -

    - - {{text}} - - -

    -

    {{description}}

    - - -
    - -
    + {{>_sub-nav}} {{/if}} {{/each}} diff --git a/src/components/main-navigation/_main-navigation.scss b/src/components/main-navigation/_main-navigation.scss index 1aaf9c8a..6193110b 100644 --- a/src/components/main-navigation/_main-navigation.scss +++ b/src/components/main-navigation/_main-navigation.scss @@ -1,15 +1,20 @@ +.navigation-open { + overflow: hidden; +} + .nsw-navigation { - @include font-stack; width: 100%; position: absolute; left: 0; - top: rem(39px); + top: 0; background: $white; transition: map-get($transitions, base); transform: translateX(-100%); visibility: hidden; outline: none; z-index: map-get($z-index, middle); + height: 100%; + overflow-y: auto; &.is-opening, &.is-open { @@ -21,8 +26,7 @@ transform: translateX(-100%); } - @include breakpoint('sm') { - @include font-stack('heading'); + @include breakpoint('md') { position: relative; transform: none; background-color: $light10; @@ -31,6 +35,8 @@ transition: none; visibility: visible; border-top: solid 1px $light40; + overflow-y: initial; + height: auto; } &__close { @@ -39,6 +45,9 @@ background: none; border: 0; padding: 0; + position: relative; + right: rem(-10px); + top: 0; text-align: center; border-radius: rem($border-radius); @@ -55,7 +64,7 @@ width: rem(20px); } - @include breakpoint('sm') { + @include breakpoint('md') { display: none; } } @@ -86,7 +95,7 @@ height: rem(16px); } - @include breakpoint('sm') { + @include breakpoint('md') { display: none; } } @@ -100,7 +109,7 @@ margin-top: 0; margin-bottom: 0; - @include breakpoint('sm') { + @include breakpoint('md') { @include container(0); display: flex; flex-direction: row; @@ -111,40 +120,56 @@ } .nsw-subnavigation__list { - @include breakpoint('sm') { + @include breakpoint('md') { @include nsw-spacing(margin-top, xl); display: flex; - justify-content: space-between; } } .nsw-navigation__list-item, -.nsw-subnavigation__list-item { +.nsw-subnavigation__list-item, +.nsw-subnavigation__title { border-bottom: solid 1px $light20; display: flex; flex-direction: row; align-items: stretch; flex-wrap: nowrap; - @include breakpoint('sm') { + @include breakpoint('md') { + border-bottom: 0; + } +} + +.nsw-navigation__list-item, +.nsw-subnavigation__list-item { + @include font-stack; + + @include breakpoint('md') { + @include font-stack('heading'); border-bottom: 0; } } .nsw-subnavigation__list-item { - @include breakpoint('sm') { + @include breakpoint('md') { width: 32%; - border-top: solid 1px $light40; + border-top: solid 1px $light20; + + &:nth-child(3n+2) { + margin-left: 2%; + margin-right: 2%; + } &:nth-last-child(-n+3) { - border-bottom: solid 1px $light40; + border-bottom: solid 1px $light20; } } } .nsw-navigation__link, -.nsw-subnavigation__link { +.nsw-subnavigation__link, +.nsw-subnavigation__title-link { flex: 1 1 auto; padding: 16px; color: $dark80; @@ -154,7 +179,7 @@ align-items: stretch; flex-wrap: nowrap; - @include breakpoint('sm') { + @include breakpoint('md') { position: relative; z-index: 2; } @@ -164,7 +189,7 @@ } &:focus { - @include nsw-focus; + @include nsw-focus($offset: false); } &.is-open { @@ -175,17 +200,19 @@ .nsw-navigation__link-icon { position: relative; top: 50%; - transform: translateY(-50%) rotate(90deg); - height: rem(12px); - width: rem(12px); - margin-left: rem(10px); - display: none; + transform: translateY(-50%); + height: rem(16px); + width: rem(16px); - @include breakpoint('sm') { + @include breakpoint('md') { display: block; + height: rem(12px); + width: rem(12px); + margin-left: rem(10px); + transform: translateY(-50%) rotate(90deg); } - .is-open & { + .nsw-navigation__link.is-open & { transform: translateY(-50%) rotate(270deg); } } @@ -201,13 +228,15 @@ visibility: hidden; z-index: 1; left: 0; + height: 100%; + overflow-y: auto; &.is-open { transform: translateX(0); visibility: visible; } - @include breakpoint('sm') { + @include breakpoint('md') { @include container; @include nsw-spacing(padding-top, lg); @include nsw-spacing(padding-bottom, lg); @@ -216,6 +245,8 @@ box-shadow: map-get($shadows, menu); transition: none; transform: none; + height: auto; + overflow: auto; &.is-open { left: 50%; @@ -223,7 +254,7 @@ } } - @include breakpoint('md') { + @include breakpoint('lg') { @include nsw-spacing(padding-top, xxl); @include nsw-spacing(padding-bottom, xxl); } @@ -231,49 +262,39 @@ .nsw-navigation__header, .nsw-subnavigation__header { - @include font-stack('heading'); - @include font-size('md'); + @include nsw-spacing(padding-top, xs); + @include nsw-spacing(padding-bottom, xs); @include container; border-bottom: solid 2px $nsw-primary-blue; display: flex; - flex-direction: row; align-items: stretch; - flex-wrap: nowrap; - padding-top: rem(10px); - padding-bottom: rem(10px); - position: relative; + justify-content: space-between; h2 { - margin: 0; + @include font-stack('heading'); + @include nsw-spacing(margin, none); + @include font-size('md'); flex: 1 1 auto; + align-self: center; } -} -.nsw-navigation__header { - @include breakpoint('sm') { + @include breakpoint('md') { display: none; } } -.nsw-subnavigation__header { - justify-content: space-between; - - @include breakpoint('sm') { - @include font-stack; - @include font-size('sm'); - border-bottom: 0; - display: block; - padding: 0; - } -} - .nsw-subnavigation__back-btn { @include font-stack('heading'); - @include font-size('md', nospace); + @include font-size('md'); + @include nsw-spacing(padding, none xs); background: none; border: 0; border-radius: rem($border-radius); - padding: rem(4px) 0; + display: inline-flex; + text-decoration: none; + vertical-align: middle; + position: relative; + left: -8px; &:hover { @include nsw-hover; @@ -287,53 +308,48 @@ width: rem(16px); height: rem(16px); margin-right: rem(6px); + align-self: center; } - @include breakpoint('sm') { + @include breakpoint('md') { display: none; } } .nsw-subnavigation__title { @include font-stack('heading'); - @include font-size('lg'); - display: none; + @include font-size('md'); + @include nsw-spacing(margin, none); - @include breakpoint('sm') { + @include breakpoint('md') { + @include font-size('lg'); display: inline-block; } } .nsw-subnavigation__title-link { - color: $nsw-primary-blue; - text-decoration: none; - display: inline-flex; - display: flex; - flex-direction: row; - align-items: stretch; - flex-wrap: nowrap; - - &:hover { - @include nsw-hover; - } - - &:focus { - @include nsw-focus; - } - - .nsw-icon { - @include nsw-spacing(margin-left, sm); - margin-top: rem(4px); - width: rem(24px); - height: rem(24px); + @include breakpoint('md') { + @include nsw-spacing(padding, none); + color: $nsw-primary-blue; } } .nsw-subnavigation__description { - @include nsw-spacing(margin-top, sm); + @include font-stack; + @include nsw-spacing(margin-top, md); + @include font-size('xs'); display: none; - @include breakpoint('sm') { + @include breakpoint('md') { display: block; } } + +.nsw-subnavigation .nsw-subnavigation, +.nsw-subnavigation .nsw-navigation__link-icon { + + @include breakpoint('md') { + display: none; + } + +} diff --git a/src/components/main-navigation/_sub-nav.hbs b/src/components/main-navigation/_sub-nav.hbs new file mode 100644 index 00000000..8038c7a9 --- /dev/null +++ b/src/components/main-navigation/_sub-nav.hbs @@ -0,0 +1,34 @@ + diff --git a/src/components/main-navigation/_subnav-header.hbs b/src/components/main-navigation/_subnav-header.hbs new file mode 100644 index 00000000..5fe5470b --- /dev/null +++ b/src/components/main-navigation/_subnav-header.hbs @@ -0,0 +1,21 @@ +
    + + + +
    +

    + + {{text}} + +

    +

    {{description}}

    diff --git a/src/components/main-navigation/_subnav-list.hbs b/src/components/main-navigation/_subnav-list.hbs new file mode 100644 index 00000000..f1c8e1b0 --- /dev/null +++ b/src/components/main-navigation/_subnav-list.hbs @@ -0,0 +1,9 @@ + diff --git a/src/components/main-navigation/main-navigation.js b/src/components/main-navigation/main-navigation.js index c3a4b931..8cffaa51 100644 --- a/src/components/main-navigation/main-navigation.js +++ b/src/components/main-navigation/main-navigation.js @@ -1,4 +1,6 @@ -import { getFocusableElement, trapTabKey, whichTransitionEvent } from '../../global/scripts/helpers/utilities' +import { + trapTabKey, whichTransitionEvent, getFocusableElementBySelector, +} from '../../global/scripts/helpers/utilities' class Navigation { constructor() { @@ -10,82 +12,79 @@ class Navigation { this.isMegaMenuElement = !!document.querySelector('.js-mega-menu') this.transitionEvent = whichTransitionEvent() this.mobileToggleMainNavEvent = (e) => this.mobileToggleMainNav(e) - this.mobileToggleSubnavEvent = (e) => this.mobileToggleSubnav(e) + this.mobileToggleSubnavEvent = () => this.closeSubnav() this.mobileShowMainTransitionEndEvent = (e) => this.mobileShowMainNav(e) this.mobileHideMainTransitionEndEvent = (e) => this.mobileHideMainNav(e) - this.mobileShowSubNavTransitionEndEvent = (e) => this.mobileShowSubNav(e) - this.mobileTrapTabKeyEvent = (e) => trapTabKey(e, this.mainNavElement) - this.mobileSubNavTrapTabKeyEvent = (e) => trapTabKey(e, this.subNavControls.subNavElement) + this.showSubNavTransitionEndEvent = (e) => this.showSubNav(e) + this.mobileTrapTabKeyEvent = (e) => this.mobileMainNavTrapTabs(e) + this.mobileSubNavTrapTabKeyEvent = (e) => this.trapkeyEventStuff(e) this.desktopButtonClickEvent = (e) => this.buttonClickDesktop(e) this.desktopButtonKeydownEvent = (e) => this.buttonKeydownDesktop(e) this.checkFocusEvent = (e) => this.checkIfContainsFocus(e) this.escapeCloseEvent = (e) => this.escapeClose(e) - this.subNavControls = {} - this.openSubNavElements = {} - this.megaMenuListItems = [] + this.openSubNavElements = [] this.breakpoint = window.matchMedia('(min-width: 48em)') + this.body = document.body } init() { if (this.mainNavElement) { + this.setUpMobileControls() this.responsiveCheck(this.breakpoint) this.breakpoint.addListener((e) => this.responsiveCheck(e)) } } - responsiveCheck({ matches }) { - if (matches) { - this.teardownMobileNav() - this.setUpDesktopNav() + responsiveCheck(e) { + let megaMenuListItems = [] + if (e.matches) { + megaMenuListItems = [].slice.call(this.mainNavElement.querySelectorAll('.nsw-navigation__list > li')) + this.body.classList.remove('navigation-open') } else { - this.setUpMobileNav() - this.teardownDesktopNav() + megaMenuListItems = [].slice.call(this.mainNavElement.querySelectorAll('li')) } + this.tearDownNavControls() + this.setUpNavControls(megaMenuListItems) } - setUpMobileNav() { + tearDownNavControls() { + if (this.isMegaMenuElement) { + const listItems = [].slice.call(this.mainNavElement.querySelectorAll('li')) + listItems.forEach((item) => { + const submenu = item.querySelector('[id^=subnav-]') + const link = item.querySelector('a') + if (submenu) { + link.removeAttribute('role') + link.removeAttribute('aria-expanded') + link.removeAttribute('aria-controls') + link.removeEventListener('click', this.desktopButtonClickEvent, false) + link.removeEventListener('keydown', this.desktopButtonKeydownEvent, false) + } + }) + } + } + + setUpMobileControls() { this.openNavButton.addEventListener('click', this.mobileToggleMainNavEvent, false) this.closeNavButtons.forEach((element) => { element.addEventListener('click', this.mobileToggleMainNavEvent, false) }) - this.mainNavElement.addEventListener('keydown', this.mobileTrapTabKeyEvent, false) - - this.openSubnavButtons.forEach((element) => { - element.addEventListener('click', this.mobileToggleSubnavEvent, false) - }) - this.closeSubnavButtons.forEach((element) => { element.addEventListener('click', this.mobileToggleSubnavEvent, false) }) } - teardownMobileNav() { - this.openNavButton.removeEventListener('click', this.mobileToggleMainNavEvent, false) - - this.closeNavButtons.forEach((element) => { - element.removeEventListener('click', this.mobileToggleMainNavEvent, false) - }) - - this.mainNavElement.removeEventListener('keydown', this.mobileTrapTabKeyEvent, false) - - this.openSubnavButtons.forEach((element) => { - element.removeEventListener('click', this.mobileToggleSubnavEvent, false) - }) - - this.closeSubnavButtons.forEach((element) => { - element.removeEventListener('click', this.mobileToggleSubnavEvent, false) - }) + mobileMainNavTrapTabs(e) { + const elemObj = getFocusableElementBySelector(this.mainNavElement.id, ['> div button', '> ul > li > a']) + trapTabKey(e, elemObj) } - setUpDesktopNav() { + setUpNavControls(listItems) { if (this.isMegaMenuElement) { - const tempListItems = this.mainNavElement.getElementsByTagName('ul')[0].children - this.megaMenuListItems = Array.prototype.slice.call(tempListItems) - - this.megaMenuListItems.forEach((item) => { - const submenu = item.querySelector('[id$=-subnav]') + listItems.forEach((item) => { + const submenu = item.querySelector('[id^=subnav-]') const link = item.querySelector('a') if (submenu) { link.setAttribute('role', 'button') @@ -99,90 +98,46 @@ class Navigation { } } - teardownDesktopNav() { - if (this.isMegaMenuElement) { - this.megaMenuListItems.forEach((item) => { - const submenu = item.querySelector('[id$=-subnav]') - const link = item.querySelector('a') - if (submenu) { - link.removeAttribute('role') - link.removeAttribute('aria-expanded') - link.removeAttribute('aria-controls') - link.removeEventListener('click', this.desktopButtonClickEvent, false) - link.removeEventListener('keydown', this.desktopButtonKeydownEvent, false) - document.removeEventListener('keydown', this.escapeCloseEvent, false) - } - }) - } - } - mobileShowMainNav({ propertyName }) { if (!propertyName === 'transform') return - getFocusableElement(this.mainNavElement).all[1].focus() + getFocusableElementBySelector(this.mainNavElement.id, ['> div button', '> ul > li > a']).all[1].focus() this.mainNavElement.classList.add('is-open') this.mainNavElement.classList.remove('is-opening') this.mainNavElement.removeEventListener(this.transitionEvent, this.mobileShowMainTransitionEndEvent, false) + this.mainNavElement.addEventListener('keydown', this.mobileTrapTabKeyEvent, false) } mobileHideMainNav({ propertyName }) { if (!propertyName === 'transform') return - const { subNavElement } = this.subNavControls + this.mainNavElement.classList.remove('is-open') this.mainNavElement.classList.remove('is-closing') - if (subNavElement) { - subNavElement.removeEventListener('keydown', this.mobileSubNavTrapTabKeyEvent, false) - subNavElement.classList.remove('is-open') - subNavElement.classList.remove('is-closing') + while (this.openSubNavElements.length > 0) { + const { submenu } = this.whichSubNavLatest() + submenu.removeEventListener('keydown', this.mobileSubNavTrapTabKeyEvent, false) + submenu.classList.remove('is-open') + submenu.classList.remove('is-closing') + this.openSubNavElements.pop() } this.mainNavElement.removeEventListener(this.transitionEvent, this.mobileHideMainTransitionEndEvent, false) + this.mainNavElement.removeEventListener('keydown', this.mobileTrapTabKeyEvent, false) } mobileToggleMainNav(e) { const { currentTarget } = e const isExpanded = currentTarget.getAttribute('aria-expanded') === 'true' if (isExpanded) { + this.body.classList.remove('navigation-open') this.openNavButton.focus() this.mainNavElement.classList.add('is-closing') this.mainNavElement.addEventListener(this.transitionEvent, this.mobileHideMainTransitionEndEvent, false) } else { + this.body.classList.add('navigation-open') this.mainNavElement.classList.add('is-opening') this.mainNavElement.addEventListener(this.transitionEvent, this.mobileShowMainTransitionEndEvent, false) } } - mobileToggleSubnav(e) { - const { currentTarget } = e - const isExpanded = currentTarget.getAttribute('aria-expanded') === 'true' - this.mobileSaveSubnavElements(currentTarget) - const { subNavElement, openButton } = this.subNavControls - - if (isExpanded) { - subNavElement.classList.remove('is-open') - openButton.focus() - subNavElement.removeEventListener('keydown', this.mobileSubNavTrapTabKeyEvent, false) - } else { - subNavElement.classList.add('is-open') - subNavElement.addEventListener('keydown', this.mobileSubNavTrapTabKeyEvent, false) - subNavElement.addEventListener(this.transitionEvent, this.mobileShowSubNavTransitionEndEvent, false) - } - } - - mobileSaveSubnavElements(element) { - const parentElement = element.closest('li') - - this.subNavControls = { - subNavElement: document.getElementById(element.getAttribute('aria-controls')), - openButton: parentElement.querySelector('.js-open-subnav'), - } - } - - mobileShowSubNav({ propertyName }) { - const { subNavElement } = this.subNavControls - if (!propertyName === 'transform') return - getFocusableElement(subNavElement).all[2].focus() - subNavElement.removeEventListener(this.transitionEvent, this.mobileShowSubNavTransitionEndEvent, false) - } - buttonClickDesktop(e) { this.saveElements(e) this.toggleSubnavDesktop() @@ -190,55 +145,98 @@ class Navigation { } buttonKeydownDesktop(e) { - this.saveElements(e) if (e.key === ' ' || e.key === 'Enter' || e.key === 'Spacebar') { + this.saveElements(e) this.toggleSubnavDesktop() e.preventDefault() } } escapeClose(e) { - const { isExpanded } = this.openSubNavElements - if (e.key === 'Escape' && isExpanded) { - this.toggleSubnavDesktop(true) - e.preventDefault() - this.openSubNavElements.link.focus() + if (e.key === 'Escape') { + const { link } = this.whichSubNavLatest() + const isExpanded = link.getAttribute('aria-expanded') === 'true' + if (isExpanded) { + this.toggleSubnavDesktop(true) + e.preventDefault() + link.focus() + } } } saveElements(e) { const { currentTarget } = e - this.openSubNavElements = { + const temp = { submenu: document.getElementById(currentTarget.getAttribute('aria-controls')), link: currentTarget, - isExpanded: currentTarget.getAttribute('aria-expanded') === 'true', linkParent: currentTarget.parentNode, } + + this.openSubNavElements.push(temp) } - toggleSubnavDesktop(close) { - const { submenu, link, isExpanded } = this.openSubNavElements + showSubNav({ propertyName }) { + const { submenu } = this.whichSubNavLatest() + if (!propertyName === 'transform') return + getFocusableElementBySelector(submenu.id, ['> div button', '> h2 a', '> ul > li > a']).all[2].focus() + submenu.removeEventListener(this.transitionEvent, this.showSubNavTransitionEndEvent, false) + } - if (isExpanded || close) { + closeSubnav() { + const { submenu, link } = this.whichSubNavLatest() + if (this.breakpoint.matches) { link.setAttribute('aria-expanded', false) link.classList.remove('is-open') - submenu.classList.remove('is-open') this.mainNavElement.removeEventListener('focus', this.checkFocusEvent, true) } else { + link.focus() + submenu.removeEventListener('keydown', this.mobileSubNavTrapTabKeyEvent, false) + } + submenu.classList.remove('is-open') + this.openSubNavElements.pop() + } + + opensubnav() { + const { submenu, link } = this.whichSubNavLatest() + if (this.breakpoint.matches) { link.setAttribute('aria-expanded', true) link.classList.add('is-open') - submenu.classList.add('is-open') this.mainNavElement.addEventListener('focus', this.checkFocusEvent, true) + } else { + submenu.addEventListener('keydown', this.mobileSubNavTrapTabKeyEvent, false) + submenu.addEventListener(this.transitionEvent, this.showSubNavTransitionEndEvent, false) + } + submenu.classList.add('is-open') + } + + toggleSubnavDesktop() { + const { link } = this.whichSubNavLatest() + const isExpanded = link.getAttribute('aria-expanded') === 'true' + if (isExpanded) { + this.closeSubnav() + } else { + this.opensubnav() } } checkIfContainsFocus() { - const { linkParent } = this.openSubNavElements + const { linkParent } = this.whichSubNavLatest() const focusWithin = linkParent.contains(document.activeElement) if (!focusWithin) { this.toggleSubnavDesktop(true) } } + + whichSubNavLatest() { + const lastSubNav = this.openSubNavElements.length - 1 + return this.openSubNavElements[lastSubNav] + } + + trapkeyEventStuff(e) { + const { submenu } = this.whichSubNavLatest() + const elemObj = getFocusableElementBySelector(submenu.id, ['> div button', '> ul > li > a']) + trapTabKey(e, elemObj) + } } export default Navigation diff --git a/src/components/main-navigation/mega-navigation.json b/src/components/main-navigation/mega-navigation.json index 08f53727..9adcd631 100644 --- a/src/components/main-navigation/mega-navigation.json +++ b/src/components/main-navigation/mega-navigation.json @@ -4,10 +4,26 @@ "text": "About DPC", "url": "#", "id": "914d7e2", + "description": "Filium morte multavit si sine causa? quae fuerit causa, nollem.", "subnav": [ { "text": "Level 2", - "url": "#" + "url": "#", + "id": "1138", + "subnav": [ + { + "text": "Level 3", + "url": "#" + }, + { + "text": "Level 3", + "url": "#" + }, + { + "text": "Level 3", + "url": "#" + } + ] }, { "text": "Level 2", @@ -64,22 +80,6 @@ "text": "Level 2", "url": "#" }, - { - "text": "Level 2", - "url": "#" - }, - { - "text": "Level 2", - "url": "#" - }, - { - "text": "Level 2", - "url": "#" - }, - { - "text": "Level 2", - "url": "#" - }, { "text": "Level 2", "url": "#" @@ -175,45 +175,7 @@ { "text": "Contact us", "url": "#", - "id": "017200ca", - "subnav": [ - { - "text": "Level 2", - "url": "#" - }, - { - "text": "Level 2", - "url": "#" - }, - { - "text": "Level 2", - "url": "#" - }, - { - "text": "Level 2", - "url": "#" - }, - { - "text": "Level 2", - "url": "#" - }, - { - "text": "Level 2", - "url": "#" - }, - { - "text": "Level 2", - "url": "#" - }, - { - "text": "Level 2", - "url": "#" - }, - { - "text": "Level 2", - "url": "#" - } - ] + "id": "017200ca" } ], "mega-menu": true diff --git a/src/components/notification/_notification.scss b/src/components/notification/_notification.scss index 9aaa7609..0c590fa7 100644 --- a/src/components/notification/_notification.scss +++ b/src/components/notification/_notification.scss @@ -7,7 +7,7 @@ flex-direction: row; flex-wrap: nowrap; - @include breakpoint('sm') { + @include breakpoint('md') { @include nsw-spacing(padding, lg lg lg md); } @@ -17,7 +17,7 @@ width: rem(24px); height: rem(24px); - @include breakpoint('sm') { + @include breakpoint('md') { width: rem(30px); height: rem(30px); } diff --git a/src/components/site-wide-message/_site-wide-message.scss b/src/components/site-wide-message/_site-wide-message.scss index 97898bda..c3d8256f 100644 --- a/src/components/site-wide-message/_site-wide-message.scss +++ b/src/components/site-wide-message/_site-wide-message.scss @@ -71,7 +71,7 @@ @include nsw-focus($color: $white); } - @include breakpoint('sm') { + @include breakpoint('md') { display: inline-block; } } diff --git a/src/global/scripts/helpers/utilities.js b/src/global/scripts/helpers/utilities.js index ab35429b..f79bc253 100644 --- a/src/global/scripts/helpers/utilities.js +++ b/src/global/scripts/helpers/utilities.js @@ -1,31 +1,38 @@ +export const focusObjectGenerator = (arr) => { + const focusableElements = { + all: arr, + first: arr[0], + last: arr[arr.length - 1], + length: arr.length, + } + + return focusableElements +} + export const getFocusableElement = (el) => { - const focusable = el.querySelectorAll( - `a[href],button:not([disabled]), - area[href],input:not([disabled]):not([type=hidden]), - select:not([disabled]),textarea:not([disabled]), - iframe,object,embed,*:not(.is-draggabe)[tabindex], - *[contenteditable]`, - ) - const slicedFocusable = Array.prototype.slice.call(focusable) - const focusableArray = [] + const elementArr = [].slice.call(el.querySelectorAll(`a[href],button:not([disabled]), + area[href],input:not([disabled]):not([type=hidden]), + select:not([disabled]),textarea:not([disabled]), + iframe,object,embed,*:not(.is-draggabe)[tabindex], + *[contenteditable]`)) - for (let i = 0; i < slicedFocusable.length; i += 1) { - if (slicedFocusable[i].offsetHeight !== 0) focusableArray.push(slicedFocusable[i]) - } + return focusObjectGenerator(elementArr) +} - const focusableElement = { - all: focusableArray, - first: focusableArray[0], - last: focusableArray[focusableArray.length - 1], - length: focusableArray.length, +export const getFocusableElementBySelector = (id, selectorArr) => { + const elements = [] + for (let i = 0; i < selectorArr.length; i += 1) { + elements.push([].slice.call(document.querySelectorAll(`#${id} ${selectorArr[i]}`))) } - return focusableElement + const mergedElementArr = [].concat(...elements) + + return focusObjectGenerator(mergedElementArr) } -export const trapTabKey = (event, container) => { +export const trapTabKey = (event, focusObject) => { const { activeElement } = document - const focusableElement = getFocusableElement(container) + const focusableElement = focusObject if (event.keyCode !== 9) return false diff --git a/src/global/scss/settings/_settings.scss b/src/global/scss/settings/_settings.scss index 3323b109..e5662d00 100644 --- a/src/global/scss/settings/_settings.scss +++ b/src/global/scss/settings/_settings.scss @@ -21,7 +21,7 @@ $font-sizes: ( xxxl: (36px, 48px) ) !default; -$font-size-reponsive-breakpoint: 'md'; +$font-size-reponsive-breakpoint: 'lg'; // Lineheight mapping $line-height: ( @@ -69,7 +69,7 @@ $light10: #f4f4f7 !default; $white: #ffffff !default; // Notifications -$info-blue: $nsw-secondary-blue !default; +$info-blue: #2e5299 !default; $info-blue-light10: #eaedf4 !default; $success-green: #00a908 !default; $success-green-light10: #e5f6e6 !default; @@ -101,10 +101,11 @@ $link-visited: #551a8b; // Breakpoints $breakpoints: ( - xs: 576px, - sm: 768px, - md: 992px, - lg: 1200px, + xs: 0, + sm: 576px, + md: 768px, + lg: 992px, + xl: 1200px, ) !default; // z-index @@ -130,19 +131,20 @@ $grid-margins: ( sm: 8px, md: 8px, lg: 32px, + xl: 32px, ); $grid-margin-top: 16px; $grid-col-sizes: ( - xs: ( + sm: ( half: 50%, ), - sm: ( + md: ( third: 33.3%, two-thirds: 66.6%, quarter: 50%, three-quarters: 50% ), - md: ( + lg: ( quarter: 25%, three-quarters: 75% ) diff --git a/src/global/scss/tools/_breakpoint.scss b/src/global/scss/tools/_breakpoint.scss index 294791db..0e1d6382 100644 --- a/src/global/scss/tools/_breakpoint.scss +++ b/src/global/scss/tools/_breakpoint.scss @@ -3,7 +3,7 @@ @error 'NSW-DS Breakpoint mixin accepts only strings'; } - @if $size != 'xs' and $size != 'sm' and $size != 'md' and $size != 'lg' { + @if $size != 'xs' and $size != 'sm' and $size != 'md' and $size != 'lg' and $size != 'xl' { @error 'NSW-DS Breakpoint mixin allows the following breakpoint sizes xs, sm, md, lg'; } @else { $px-size: map-get($breakpoints, $size); diff --git a/src/main.scss b/src/main.scss index ddfce1ef..1996a3b7 100644 --- a/src/main.scss +++ b/src/main.scss @@ -4,7 +4,6 @@ @import 'global/scss/style/_all'; @import 'components/accordion/accordion'; -@import 'components/blockquote/blockquote'; @import 'components/breadcrumbs/breadcrumbs'; @import 'components/button/button'; @import 'components/callout/callout'; diff --git a/src/pages/full-width-test/index.hbs b/src/pages/full-width-test/index.hbs index 947dd40f..bb9d60ae 100644 --- a/src/pages/full-width-test/index.hbs +++ b/src/pages/full-width-test/index.hbs @@ -11,7 +11,7 @@ model: --- {{>_header}} -{{>_main-navigation model.nav-basic}} +{{>_main-navigation model.nav-mega}} {{>_hero-banner model.hero-banner}}
    diff --git a/src/patterns/footer/_footer.scss b/src/patterns/footer/_footer.scss index 46a46d04..80c4753c 100644 --- a/src/patterns/footer/_footer.scss +++ b/src/patterns/footer/_footer.scss @@ -32,7 +32,7 @@ &__info { - @include breakpoint('sm') { + @include breakpoint('md') { display: flex; flex-wrap: nowrap; } @@ -50,7 +50,7 @@ text-decoration: none; } - @include breakpoint('sm') { + @include breakpoint('md') { text-align: right; } } @@ -70,7 +70,7 @@ flex: 1 0 50%; max-width: 50%; - @include breakpoint('sm') { + @include breakpoint('md') { @include nsw-spacing(margin-right, lg); flex: 0 0 auto; max-width: none; @@ -95,7 +95,7 @@ flex-direction: row; flex-wrap: wrap; - @include breakpoint('sm') { + @include breakpoint('md') { display: flex; flex-direction: row; flex-wrap: wrap; @@ -125,12 +125,12 @@ min-width: rem(256px); max-width: 50%; - @include breakpoint('sm') { + @include breakpoint('md') { flex-basis: 50%; min-width: auto; } - @include breakpoint('md') { + @include breakpoint('lg') { flex-basis: 25%; } } @@ -138,11 +138,13 @@ &__heading { @include nsw-spacing(margin, none); @include font-stack('heading'); + @include font-size('sm'); } &__list { @include nsw-spacing(margin, none); @include nsw-spacing(padding, none); + @include font-size('xs'); list-style: none; margin-top: rem(4px); } diff --git a/src/patterns/header/_header.hbs b/src/patterns/header/_header.hbs index 137e1cba..1008773b 100644 --- a/src/patterns/header/_header.hbs +++ b/src/patterns/header/_header.hbs @@ -2,7 +2,7 @@ Skip to navigation Skip to content -
    +

    A NSW Government website

    diff --git a/src/patterns/header/_header.scss b/src/patterns/header/_header.scss index 9ddf7685..7c012810 100644 --- a/src/patterns/header/_header.scss +++ b/src/patterns/header/_header.scss @@ -29,13 +29,14 @@ } } - @include breakpoint('sm') { + @include breakpoint('md') { text-align: left; } } } -.nsw-infobar { +.nsw-infobar, +.nsw-masthead { @include font-stack; @include nsw-spacing(padding, sm none); background-color: $nsw-primary-blue; @@ -52,7 +53,7 @@ position: relative; border-bottom: solid 1px $light20; - @include breakpoint('sm') { + @include breakpoint('md') { border-bottom: 0; } @@ -70,7 +71,7 @@ align-items: center; height: rem(72px); - @include breakpoint('sm') { + @include breakpoint('md') { justify-content: unset; height: rem(94px); } @@ -79,7 +80,7 @@ &__center { order: 2; - @include breakpoint('sm') { + @include breakpoint('md') { order: 0; } } @@ -93,7 +94,7 @@ order: 3; margin-right: rem(-4px); - @include breakpoint('sm') { + @include breakpoint('md') { margin-left: auto; margin-right: 0; } @@ -112,7 +113,7 @@ width: rem(141px); height: rem(46px); - @include breakpoint('sm') { + @include breakpoint('md') { width: rem(168px); height: rem(55px); } @@ -140,6 +141,8 @@ &__icon { height: rem(16px); width: rem(16px); + position: relative; + top: 1px; } &__sub { @@ -149,20 +152,20 @@ } .nsw-header-btn--menu { - @include breakpoint('sm') { + @include breakpoint('md') { display: none; } } .nsw-header-btn--search { - @include breakpoint('sm') { + @include breakpoint('md') { .nsw-header-btn__sub { @include sr-only; } .nsw-header-btn__icon { - width: rem(32px); - height: rem(32px); + width: rem(24px); + height: rem(24px); } } } @@ -173,7 +176,7 @@ background: $light10; top: 0; - @include breakpoint('sm') { + @include breakpoint('md') { @include break-out-reset; position: absolute; width: rem(394px); @@ -198,7 +201,7 @@ @include nsw-focus($offset: false); } - @include breakpoint('sm') { + @include breakpoint('md') { @include nsw-spacing(padding, none md); height: rem(50px); padding: 0 rem(16px); @@ -210,12 +213,12 @@ position: absolute; top: 50%; transform: translateY(-50%); - right: rem(16px); + right: rem(12px); width: rem(24px); height: rem(24px); display: none; - @include breakpoint('sm') { + @include breakpoint('md') { display: inline-block; } } @@ -240,7 +243,7 @@ @include nsw-focus; } - @include breakpoint('sm') { + @include breakpoint('md') { display: none; } } diff --git a/src/styles/forms/_forms.scss b/src/styles/forms/_forms.scss index e67712ed..cfedb392 100644 --- a/src/styles/forms/_forms.scss +++ b/src/styles/forms/_forms.scss @@ -176,11 +176,7 @@ .nsw-form-checkbox__label { &::before { - border-radius: 2px; - } - - &::after { - border-radius: 1px; + border-radius: rem($border-radius); } } @@ -243,7 +239,7 @@ } } - @include breakpoint('sm') { + @include breakpoint('md') { &[aria-invalid='true'], &.has-error { @include nsw-spacing(padding, md); diff --git a/src/styles/tables/_tables.scss b/src/styles/tables/_tables.scss index f63ab33f..cfe21b06 100644 --- a/src/styles/tables/_tables.scss +++ b/src/styles/tables/_tables.scss @@ -70,7 +70,7 @@ display: none; } - @include breakpoint('sm', max-width) { + @include breakpoint('lg', max-width) { border-top: solid 2px $dark80; thead { diff --git a/src/styles/typography/_typography.scss b/src/styles/typography/_typography.scss index 61286784..c52d9d27 100644 --- a/src/styles/typography/_typography.scss +++ b/src/styles/typography/_typography.scss @@ -51,7 +51,7 @@ border-left: solid 6px $nsw-primary-highlight; padding: rem(20px) rem(24px); - @include breakpoint('sm') { + @include breakpoint('md') { margin-left: auto; margin-right: auto; max-width: 75%;