From 60142db547eac65d9d1c10f0f0b22d0b7cf0e909 Mon Sep 17 00:00:00 2001 From: Sean Elliott <> Date: Fri, 28 Feb 2020 09:51:44 +1100 Subject: [PATCH 1/6] fix: changes made when auditing design system - removed blockquote from components folder as its part of typoography - changed values in `settings.scss`, mapping for breakpoints was wrong breakpoints were breaking later then it should have - moved all media queries up one breakpoint to match what was designed but better match the screen size, including settings related to grid and typography breakpoints - added check for `xl` sized in `breakpoint` mixin - updated footer font sizes - removed theme from `card-new.json` and `card-media.json` - consolidated `card.scss` and removed variants for `.nsw-card__media` and `.nsw-card__news` - added if around copy in card component hbs - added new callout json file, fixed up css issue with margins when there is no icon, removed if around heading in callout as we determined this is always required --- src/components/blockquote/_blockquote.hbs | 7 --- src/components/blockquote/_blockquote.scss | 0 src/components/blockquote/blockquote.js | 0 src/components/blockquote/blockquote.json | 0 src/components/blockquote/index.hbs | 4 -- src/components/breadcrumbs/_breadcrumbs.scss | 4 +- src/components/callout/_callout.hbs | 2 +- src/components/callout/_callout.scss | 15 +++-- src/components/callout/callout-all.json | 9 +++ src/components/callout/callout.json | 7 +-- src/components/callout/index.hbs | 10 +++- src/components/card/_card.hbs | 2 +- src/components/card/_card.scss | 58 ++++++------------- src/components/card/card-media.json | 1 - src/components/card/card-news.json | 1 - src/components/hero-banner/_hero-banner.scss | 12 ++-- .../main-navigation/_main-navigation.scss | 32 +++++----- .../notification/_notification.scss | 4 +- .../site-wide-message/_site-wide-message.scss | 2 +- src/global/scss/settings/_settings.scss | 20 ++++--- src/global/scss/tools/_breakpoint.scss | 2 +- src/patterns/footer/_footer.scss | 14 +++-- src/patterns/header/_header.scss | 22 +++---- src/styles/forms/_forms.scss | 2 +- src/styles/tables/_tables.scss | 2 +- src/styles/typography/_typography.scss | 2 +- 26 files changed, 111 insertions(+), 123 deletions(-) delete mode 100644 src/components/blockquote/_blockquote.hbs delete mode 100644 src/components/blockquote/_blockquote.scss delete mode 100644 src/components/blockquote/blockquote.js delete mode 100644 src/components/blockquote/blockquote.json delete mode 100644 src/components/blockquote/index.hbs create mode 100644 src/components/callout/callout-all.json 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.js b/src/components/blockquote/blockquote.js 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/main-navigation/_main-navigation.scss b/src/components/main-navigation/_main-navigation.scss index 1aaf9c8a..a0982e3e 100644 --- a/src/components/main-navigation/_main-navigation.scss +++ b/src/components/main-navigation/_main-navigation.scss @@ -21,7 +21,7 @@ transform: translateX(-100%); } - @include breakpoint('sm') { + @include breakpoint('md') { @include font-stack('heading'); position: relative; transform: none; @@ -55,7 +55,7 @@ width: rem(20px); } - @include breakpoint('sm') { + @include breakpoint('md') { display: none; } } @@ -86,7 +86,7 @@ height: rem(16px); } - @include breakpoint('sm') { + @include breakpoint('md') { display: none; } } @@ -100,7 +100,7 @@ margin-top: 0; margin-bottom: 0; - @include breakpoint('sm') { + @include breakpoint('md') { @include container(0); display: flex; flex-direction: row; @@ -111,7 +111,7 @@ } .nsw-subnavigation__list { - @include breakpoint('sm') { + @include breakpoint('md') { @include nsw-spacing(margin-top, xl); display: flex; justify-content: space-between; @@ -126,14 +126,14 @@ align-items: stretch; flex-wrap: nowrap; - @include breakpoint('sm') { + @include breakpoint('md') { border-bottom: 0; } } .nsw-subnavigation__list-item { - @include breakpoint('sm') { + @include breakpoint('md') { width: 32%; border-top: solid 1px $light40; @@ -154,7 +154,7 @@ align-items: stretch; flex-wrap: nowrap; - @include breakpoint('sm') { + @include breakpoint('md') { position: relative; z-index: 2; } @@ -181,7 +181,7 @@ margin-left: rem(10px); display: none; - @include breakpoint('sm') { + @include breakpoint('md') { display: block; } @@ -207,7 +207,7 @@ visibility: visible; } - @include breakpoint('sm') { + @include breakpoint('md') { @include container; @include nsw-spacing(padding-top, lg); @include nsw-spacing(padding-bottom, lg); @@ -223,7 +223,7 @@ } } - @include breakpoint('md') { + @include breakpoint('lg') { @include nsw-spacing(padding-top, xxl); @include nsw-spacing(padding-bottom, xxl); } @@ -250,7 +250,7 @@ } .nsw-navigation__header { - @include breakpoint('sm') { + @include breakpoint('md') { display: none; } } @@ -258,7 +258,7 @@ .nsw-subnavigation__header { justify-content: space-between; - @include breakpoint('sm') { + @include breakpoint('md') { @include font-stack; @include font-size('sm'); border-bottom: 0; @@ -289,7 +289,7 @@ margin-right: rem(6px); } - @include breakpoint('sm') { + @include breakpoint('md') { display: none; } } @@ -299,7 +299,7 @@ @include font-size('lg'); display: none; - @include breakpoint('sm') { + @include breakpoint('md') { display: inline-block; } } @@ -333,7 +333,7 @@ @include nsw-spacing(margin-top, sm); display: none; - @include breakpoint('sm') { + @include breakpoint('md') { display: block; } } 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/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/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.scss b/src/patterns/header/_header.scss index 39e49c5d..bf3bcd8b 100644 --- a/src/patterns/header/_header.scss +++ b/src/patterns/header/_header.scss @@ -29,7 +29,7 @@ } } - @include breakpoint('sm') { + @include breakpoint('md') { text-align: left; } } @@ -65,7 +65,7 @@ align-items: center; height: rem(72px); - @include breakpoint('sm') { + @include breakpoint('md') { justify-content: unset; height: rem(94px); } @@ -74,7 +74,7 @@ &__center { order: 2; - @include breakpoint('sm') { + @include breakpoint('md') { order: 0; } } @@ -88,7 +88,7 @@ order: 3; margin-right: rem(-4px); - @include breakpoint('sm') { + @include breakpoint('md') { margin-left: auto; margin-right: 0; } @@ -107,7 +107,7 @@ width: rem(141px); height: rem(46px); - @include breakpoint('sm') { + @include breakpoint('md') { width: rem(168px); height: rem(55px); } @@ -144,13 +144,13 @@ } .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; } @@ -168,7 +168,7 @@ background: $light10; top: 0; - @include breakpoint('sm') { + @include breakpoint('md') { @include break-out-reset; position: absolute; width: rem(394px); @@ -193,7 +193,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,7 +210,7 @@ height: rem(24px); display: none; - @include breakpoint('sm') { + @include breakpoint('md') { display: inline-block; } } @@ -235,7 +235,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 1ae72270..a015df5c 100644 --- a/src/styles/forms/_forms.scss +++ b/src/styles/forms/_forms.scss @@ -240,7 +240,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%; From 0299f4fdf83f21661ac5c5c3805051a2f711f41a Mon Sep 17 00:00:00 2001 From: Sean Elliott <> Date: Tue, 3 Mar 2020 12:14:38 +1100 Subject: [PATCH 2/6] - updated checkbox styles to have correct margin between checkbox and label and correct border radius - minor adjustments to header search icon, added `.nsw-masthead` as an additional class for `.nsw-infobar` this will be deprecated eventually - updated colors of tab navigation styles - updated border colors for main-navigation mega menu to match sketch - removed headings from list-list and direction-links index.hbs file, cleaned up indenting - updated in-page navigation border color to use highlight color --- src/components/direction-links/_direction-links.hbs | 2 -- .../in-page-navigation/_in-page-navigation.scss | 2 +- src/components/link-list/_link-list.hbs | 4 ++-- src/components/link-list/index.hbs | 1 - src/components/main-navigation/_main-navigation.scss | 4 ++-- src/components/tab-navigation/_tab-navigation.scss | 5 +++-- src/patterns/header/_header.hbs | 2 +- src/patterns/header/_header.scss | 11 +++++++---- src/styles/forms/_forms.scss | 8 ++------ 9 files changed, 18 insertions(+), 21 deletions(-) diff --git a/src/components/direction-links/_direction-links.hbs b/src/components/direction-links/_direction-links.hbs index 81289057..6b29bb1c 100644 --- a/src/components/direction-links/_direction-links.hbs +++ b/src/components/direction-links/_direction-links.hbs @@ -1,6 +1,4 @@
-

Direction Links

-
  • {{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.scss b/src/components/main-navigation/_main-navigation.scss index a0982e3e..16033f1f 100644 --- a/src/components/main-navigation/_main-navigation.scss +++ b/src/components/main-navigation/_main-navigation.scss @@ -135,10 +135,10 @@ @include breakpoint('md') { width: 32%; - border-top: solid 1px $light40; + border-top: solid 1px $light20; &:nth-last-child(-n+3) { - border-bottom: solid 1px $light40; + border-bottom: solid 1px $light20; } } } diff --git a/src/components/tab-navigation/_tab-navigation.scss b/src/components/tab-navigation/_tab-navigation.scss index 38ee356d..f8ebf99f 100644 --- a/src/components/tab-navigation/_tab-navigation.scss +++ b/src/components/tab-navigation/_tab-navigation.scss @@ -30,7 +30,7 @@ display: block; position: relative; text-decoration: none; - color: $dark80; + color: $nsw-primary-blue; z-index: 2; &:hover { @@ -43,6 +43,7 @@ .is-selected & { @include font-stack(heading); + color: $dark80; &::after { content: ''; @@ -51,7 +52,7 @@ left: 0; width: 100%; height: 4px; - background-color: $nsw-primary-blue; + background-color: $nsw-primary-highlight; } } } 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 bf3bcd8b..043403a7 100644 --- a/src/patterns/header/_header.scss +++ b/src/patterns/header/_header.scss @@ -35,7 +35,8 @@ } } -.nsw-infobar { +.nsw-infobar, +.nsw-masthead { @include font-stack; @include nsw-spacing(padding, sm none); background-color: $nsw-primary-blue; @@ -135,6 +136,8 @@ &__icon { height: rem(16px); width: rem(16px); + position: relative; + top: 1px; } &__sub { @@ -156,8 +159,8 @@ } .nsw-header-btn__icon { - width: rem(32px); - height: rem(32px); + width: rem(24px); + height: rem(24px); } } } @@ -205,7 +208,7 @@ position: absolute; top: 50%; transform: translateY(-50%); - right: rem(16px); + right: rem(12px); width: rem(24px); height: rem(24px); display: none; diff --git a/src/styles/forms/_forms.scss b/src/styles/forms/_forms.scss index a015df5c..0964ac3f 100644 --- a/src/styles/forms/_forms.scss +++ b/src/styles/forms/_forms.scss @@ -142,7 +142,7 @@ position: relative; &::before { - @include nsw-spacing(margin-right, md); + @include nsw-spacing(margin-right, sm); left: 0; content: ''; width: rem(32px); @@ -173,11 +173,7 @@ .nsw-form-checkbox__label { &::before { - border-radius: 2px; - } - - &::after { - border-radius: 1px; + border-radius: rem($border-radius); } } From b097c3cbf8f63f2c699bbf3541dd4b8d7289cee3 Mon Sep 17 00:00:00 2001 From: Sean Elliott <> Date: Fri, 6 Mar 2020 16:08:28 +1100 Subject: [PATCH 3/6] - removed reference to blockquote from scss import --- src/main.scss | 1 - 1 file changed, 1 deletion(-) 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'; From 3b01ff7cebca8d03a74d3bd861506f3aa910b407 Mon Sep 17 00:00:00 2001 From: Sean Elliott <> Date: Mon, 9 Mar 2020 14:24:30 +1100 Subject: [PATCH 4/6] - changed breakpoint from sm to md for header border-bottom styles --- src/patterns/header/_header.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/patterns/header/_header.scss b/src/patterns/header/_header.scss index a9a787b2..7c012810 100644 --- a/src/patterns/header/_header.scss +++ b/src/patterns/header/_header.scss @@ -53,7 +53,7 @@ position: relative; border-bottom: solid 1px $light20; - @include breakpoint('sm') { + @include breakpoint('md') { border-bottom: 0; } From 6babbb8b312122e0ae1e0611288ee31bc227da78 Mon Sep 17 00:00:00 2001 From: Sean Elliott <> Date: Thu, 12 Mar 2020 10:42:18 +1100 Subject: [PATCH 5/6] - updated main nav structure to be inline with new design and UX - updated css according to new design - updated js to be inline with the new UX --- .../main-navigation/_main-navigation.hbs | 45 +---- .../main-navigation/_main-navigation.scss | 130 ++++++------ src/components/main-navigation/_sub-nav.hbs | 34 ++++ .../main-navigation/_subnav-header.hbs | 21 ++ .../main-navigation/_subnav-list.hbs | 9 + .../main-navigation/main-navigation.js | 190 ++++++++---------- .../main-navigation/mega-navigation.json | 104 ++++++---- src/global/scripts/helpers/utilities.js | 45 +++-- src/pages/full-width-test/index.hbs | 2 +- 9 files changed, 312 insertions(+), 268 deletions(-) create mode 100644 src/components/main-navigation/_sub-nav.hbs create mode 100644 src/components/main-navigation/_subnav-header.hbs create mode 100644 src/components/main-navigation/_subnav-list.hbs 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 16033f1f..9472a88b 100644 --- a/src/components/main-navigation/_main-navigation.scss +++ b/src/components/main-navigation/_main-navigation.scss @@ -1,15 +1,23 @@ +body { + background-color: $error-red; + overflow: hidden; + height: 100vh; +} + .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 { @@ -39,6 +47,9 @@ background: none; border: 0; padding: 0; + position: relative; + right: rem(-10px); + top: 0; text-align: center; border-radius: rem($border-radius); @@ -119,7 +130,8 @@ } .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; @@ -144,7 +156,8 @@ } .nsw-navigation__link, -.nsw-subnavigation__link { +.nsw-subnavigation__link, +.nsw-subnavigation__title-link { flex: 1 1 auto; padding: 16px; color: $dark80; @@ -164,7 +177,7 @@ } &:focus { - @include nsw-focus; + @include nsw-focus($offset: false); } &.is-open { @@ -175,17 +188,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('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,6 +216,8 @@ visibility: hidden; z-index: 1; left: 0; + height: 100%; + overflow-y: auto; &.is-open { transform: translateX(0); @@ -216,6 +233,8 @@ box-shadow: map-get($shadows, menu); transition: none; transform: none; + height: auto; + overflow: auto; &.is-open { left: 50%; @@ -231,49 +250,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('md') { display: none; } } -.nsw-subnavigation__header { - justify-content: space-between; - - @include breakpoint('md') { - @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,6 +296,7 @@ width: rem(16px); height: rem(16px); margin-right: rem(6px); + align-self: center; } @include breakpoint('md') { @@ -296,38 +306,38 @@ .nsw-subnavigation__title { @include font-stack('heading'); - @include font-size('lg'); - display: none; + @include font-size('md'); + @include nsw-spacing(margin, none); @include breakpoint('md') { 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); - } -} +// .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); +// } +// } .nsw-subnavigation__description { @include nsw-spacing(margin-top, sm); diff --git a/src/components/main-navigation/_sub-nav.hbs b/src/components/main-navigation/_sub-nav.hbs new file mode 100644 index 00000000..d6b22060 --- /dev/null +++ b/src/components/main-navigation/_sub-nav.hbs @@ -0,0 +1,34 @@ +
    + {{>_subnav-header}} + +
    diff --git a/src/components/main-navigation/_subnav-header.hbs b/src/components/main-navigation/_subnav-header.hbs new file mode 100644 index 00000000..6939c7aa --- /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..57434498 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 { + getFocusableElement, trapTabKey, whichTransitionEvent, getFocusableElementImmediate, +} from '../../global/scripts/helpers/utilities' class Navigation { constructor() { @@ -10,40 +12,40 @@ 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.showSubNavTransitionEndEvent = (e) => this.showSubNav(e) this.mobileTrapTabKeyEvent = (e) => trapTabKey(e, this.mainNavElement) - this.mobileSubNavTrapTabKeyEvent = (e) => trapTabKey(e, this.subNavControls.subNavElement) + 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)') } init() { if (this.mainNavElement) { - this.responsiveCheck(this.breakpoint) - this.breakpoint.addListener((e) => this.responsiveCheck(e)) + this.setUpNavControls() + this.setUpMobileControls() + // this.responsiveCheck(this.breakpoint) + // this.breakpoint.addListener((e) => this.responsiveCheck(e)) } } - responsiveCheck({ matches }) { - if (matches) { - this.teardownMobileNav() - this.setUpDesktopNav() - } else { - this.setUpMobileNav() - this.teardownDesktopNav() - } - } + // responsiveCheck({ matches }) { + // if (matches) { + // // this.teardownMobileNav() + // // this.setUpDesktopNav() + // } else { + // this.setUpMobileNav() + // // this.teardownDesktopNav() + // } + // } - setUpMobileNav() { + setUpMobileControls() { this.openNavButton.addEventListener('click', this.mobileToggleMainNavEvent, false) this.closeNavButtons.forEach((element) => { @@ -52,39 +54,17 @@ class Navigation { 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) - }) - } - - setUpDesktopNav() { + setUpNavControls() { if (this.isMegaMenuElement) { - const tempListItems = this.mainNavElement.getElementsByTagName('ul')[0].children - this.megaMenuListItems = Array.prototype.slice.call(tempListItems) + const tempListItems = this.mainNavElement.querySelectorAll('li') + const megaMenuListItems = Array.prototype.slice.call(tempListItems) - this.megaMenuListItems.forEach((item) => { + megaMenuListItems.forEach((item) => { const submenu = item.querySelector('[id$=-subnav]') const link = item.querySelector('a') if (submenu) { @@ -99,25 +79,9 @@ 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 + console.log(getFocusableElementImmediate(this.mainNavElement)) getFocusableElement(this.mainNavElement).all[1].focus() this.mainNavElement.classList.add('is-open') this.mainNavElement.classList.remove('is-opening') @@ -126,13 +90,15 @@ class Navigation { 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) } @@ -150,39 +116,6 @@ class Navigation { } } - 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() @@ -198,47 +131,86 @@ class Navigation { } escapeClose(e) { - const { isExpanded } = this.openSubNavElements + const { isExpanded, link } = this.whichSubNavLatest() if (e.key === 'Escape' && isExpanded) { this.toggleSubnavDesktop(true) e.preventDefault() - this.openSubNavElements.link.focus() + 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 + getFocusableElement(submenu).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 { isExpanded } = this.whichSubNavLatest() + 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() + trapTabKey(e, submenu) + } } export default Navigation diff --git a/src/components/main-navigation/mega-navigation.json b/src/components/main-navigation/mega-navigation.json index 08f53727..f4645633 100644 --- a/src/components/main-navigation/mega-navigation.json +++ b/src/components/main-navigation/mega-navigation.json @@ -7,7 +7,22 @@ "subnav": [ { "text": "Level 2", - "url": "#" + "url": "#", + "id": "1138", + "subnav": [ + { + "text": "Level 3", + "url": "#" + }, + { + "text": "Level 3", + "url": "#" + }, + { + "text": "Level 3", + "url": "#" + } + ] }, { "text": "Level 2", @@ -175,45 +190,54 @@ { "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" + }, + { + "text": "Updates", + "url": "#" + }, + { + "text": "Publications", + "url": "#" + }, + { + "text": "Tools & Resources", + "url": "#" + }, + { + "text": "Contact us", + "url": "#" + },{ + "text": "Updates", + "url": "#" + }, + { + "text": "Publications", + "url": "#" + }, + { + "text": "Tools & Resources", + "url": "#" + }, + { + "text": "Contact us", + "url": "#" + }, + { + "text": "Updates", + "url": "#" + }, + { + "text": "Publications", + "url": "#" + }, + { + "text": "2nd last", + "url": "#" + }, + { + "text": "Last", + "url": "#" } ], "mega-menu": true diff --git a/src/global/scripts/helpers/utilities.js b/src/global/scripts/helpers/utilities.js index ab35429b..4bf826f8 100644 --- a/src/global/scripts/helpers/utilities.js +++ b/src/global/scripts/helpers/utilities.js @@ -1,11 +1,20 @@ +export const focusObjectGenerator = (arr) => { + const focusableElement = { + all: arr, + first: arr[0], + last: arr[arr.length - 1], + length: arr.length, + } + + return focusableElement +} + 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 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 = [] @@ -13,16 +22,24 @@ export const getFocusableElement = (el) => { if (slicedFocusable[i].offsetHeight !== 0) focusableArray.push(slicedFocusable[i]) } - const focusableElement = { - all: focusableArray, - first: focusableArray[0], - last: focusableArray[focusableArray.length - 1], - length: focusableArray.length, - } + return focusObjectGenerator(focusableArray) +} - return focusableElement +export const getFocusableElementImmediate = (el) => { + // const focusableStrings = `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.filter.call(el.children, (child) => child.matches('a[href],button:not([disabled])')) + console.log('#main-navigation * > a') + console.log(el.querySelectorAll('> ul > li > a')) + + return focusObjectGenerator(slicedFocusable) } +export const childrenMatches = (elem, selector) => Array.prototype.filter.call(elem.children, (child) => child.matches(selector)) + export const trapTabKey = (event, container) => { const { activeElement } = document const focusableElement = getFocusableElement(container) 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}}
    From d1845b3c4932cd27ff09ba3a2d139c6f1a073944 Mon Sep 17 00:00:00 2001 From: Sean Elliott <> Date: Wed, 18 Mar 2020 17:58:15 +1100 Subject: [PATCH 6/6] BREAKING CHANGE: main nav mega menu update - created new utility function `getFocusableElementBySelector` this helps restrict our range to the areas of the menu we are in, not all the menu items - separated out reusable parts of the `getFocusableElement` function - updated `mega-navigation.json` to be multi level - updated JS for main nav, not its robust enough to handle unlimited number of sub menus - updated handlebars and created new files to reflect changes based off new mark up for multilevel nav - updated css for main nav styling --- .../main-navigation/_main-navigation.scss | 68 ++++++++------ src/components/main-navigation/_sub-nav.hbs | 4 +- .../main-navigation/_subnav-header.hbs | 4 +- .../main-navigation/main-navigation.js | 94 ++++++++++++------- .../main-navigation/mega-navigation.json | 64 +------------ src/global/scripts/helpers/utilities.js | 40 +++----- 6 files changed, 117 insertions(+), 157 deletions(-) diff --git a/src/components/main-navigation/_main-navigation.scss b/src/components/main-navigation/_main-navigation.scss index 9472a88b..6193110b 100644 --- a/src/components/main-navigation/_main-navigation.scss +++ b/src/components/main-navigation/_main-navigation.scss @@ -1,11 +1,8 @@ -body { - background-color: $error-red; +.navigation-open { overflow: hidden; - height: 100vh; } .nsw-navigation { - @include font-stack; width: 100%; position: absolute; left: 0; @@ -30,7 +27,6 @@ body { } @include breakpoint('md') { - @include font-stack('heading'); position: relative; transform: none; background-color: $light10; @@ -39,6 +35,8 @@ body { transition: none; visibility: visible; border-top: solid 1px $light40; + overflow-y: initial; + height: auto; } &__close { @@ -125,7 +123,6 @@ body { @include breakpoint('md') { @include nsw-spacing(margin-top, xl); display: flex; - justify-content: space-between; } } @@ -143,12 +140,27 @@ body { } } +.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('md') { width: 32%; border-top: solid 1px $light20; + &:nth-child(3n+2) { + margin-left: 2%; + margin-right: 2%; + } + &:nth-last-child(-n+3) { border-bottom: solid 1px $light20; } @@ -310,40 +322,34 @@ body { @include nsw-spacing(margin, none); @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); -// } -// } +.nsw-subnavigation__title-link { + @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('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 index d6b22060..8038c7a9 100644 --- a/src/components/main-navigation/_sub-nav.hbs +++ b/src/components/main-navigation/_sub-nav.hbs @@ -1,4 +1,4 @@ -
    +