nsw-design-system 2.13.0 → 3.0.2

package/src/components/main-nav/_main-nav.scss

@@ -0,0 +1,272 @@
+.main-nav-active {
+  overflow: hidden;
+}
+
+.nsw-main-nav {
+  @include z-index('middle');
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--nsw-white);
+  transition: all 0.25s ease-in-out;
+  transform: translateX(-100%);
+  visibility: hidden;
+  overflow-y: auto;
+
+  &.activating,
+  &.active {
+    transform: translateX(0);
+    visibility: visible;
+  }
+
+  &.closing {
+    transform: translateX(-100%);
+  }
+
+  @include breakpoint($nsw-desktop-breakpoint) {
+    position: relative;
+    transform: none;
+    background-color: var(--nsw-off-white);
+    top: auto;
+    left: auto;
+    transition: none;
+    visibility: visible;
+    overflow-y: visible;
+    height: auto;
+  }
+
+  &__header {
+    padding: rem(8px) rem(16px);
+    border-bottom: solid 2px var(--nsw-brand-dark);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    @include breakpoint($nsw-desktop-breakpoint) {
+      display: none;
+    }
+
+    .nsw-icon-button {
+      &:first-child {
+        margin-left: rem(-16px);
+      }
+
+      &:last-child {
+        margin-right: rem(-16px);
+      }
+    }
+  }
+
+  &__list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+
+    @include breakpoint($nsw-desktop-breakpoint) {
+      @include container(0);
+      display: flex;
+      flex-direction: row;
+      align-items: stretch;
+      flex-wrap: wrap;
+      position: relative;
+    }
+
+    > li > a {      
+      @include breakpoint($nsw-desktop-breakpoint) {
+        .nsw-material-icons {
+          transform: rotate(90deg);
+          margin-left: rem(6px);
+        }
+
+        &.active {
+          background-color: var(--nsw-white);
+        }
+
+        &.active .nsw-material-icons {
+          transform: rotate(270deg);
+        }
+      }
+    }
+  }
+
+  &__sub-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  li {    
+    margin: 0;
+    border-bottom: solid 1px var(--nsw-grey-04);
+
+    @include breakpoint($nsw-desktop-breakpoint) {
+      border: 0;
+    }
+
+    a {
+      padding: rem(16px);
+      color: var(--nsw-text-dark);
+      text-decoration: none;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      flex-wrap: nowrap;
+
+      .nsw-material-icons {
+        color: var(--nsw-brand-dark);
+        margin-right: rem(-8px);
+      }
+
+      @include breakpoint($nsw-desktop-breakpoint) {
+        font-weight: var(--nsw-font-bold);
+      }
+    }
+  }
+
+  a {
+    font-weight: var(--nsw-font-normal);
+
+    @include breakpoint($nsw-desktop-breakpoint) {
+      @include z-index('middle');
+      position: relative;
+    }
+
+    &:hover {
+      outline-width: 0;
+    }
+
+    &:focus {
+      outline-width: 3px;
+    }
+  }
+
+  &__title {
+    font-weight: var(--nsw-font-bold);
+
+    @include breakpoint($nsw-desktop-breakpoint) {
+      @include font-size('md');
+      display: inline-flex;
+    }      
+
+    .nsw-main-nav__sub-nav & {
+      border-bottom: solid 1px var(--nsw-grey-04);
+
+      @include breakpoint($nsw-desktop-breakpoint) {
+        border-bottom: 0;
+      }      
+    }
+
+    a {
+      font-weight: var(--nsw-font-bold);
+
+      .nsw-material-icons {
+        display: none;
+
+        @include breakpoint($nsw-desktop-breakpoint) {
+          display: block;
+        }  
+      }
+    }
+  }
+
+  &__description {
+    @include font-size('xs');
+    margin-top: rem(16px);
+    display: none;
+
+    @include breakpoint($nsw-desktop-breakpoint) {
+      display: block;
+    }
+  }
+
+  &__sub-nav {    
+    @include z-index;
+    background-color: var(--nsw-white);
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    transition: all 0.25s ease-in-out;
+    transform: translateX(-100%);
+    visibility: hidden;
+    overflow-y: auto;
+
+    &.active {
+      transform: translateX(0);
+      visibility: visible;
+    }
+
+    @include breakpoint($nsw-desktop-breakpoint) {
+      @include container;
+      padding: rem(48) rem(40);
+      top: 100%;
+      background-color: var(--nsw-white);
+      box-shadow: 0 4px 9px -5px rgba(var(--nsw-black-rgb), 0.4);
+      transition: none;
+      transform: none;
+      height: auto;
+      overflow: auto;
+
+      &.active {
+        left: 50%;
+        transform: translateX(-50%);
+      }
+    }
+
+    ul {      
+      @include breakpoint($nsw-desktop-breakpoint) {
+        margin-top: rem(32px);
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+
+        .nsw-material-icons {
+          display: none;
+        }
+      }
+    }
+
+    li {      
+      @include breakpoint($nsw-desktop-breakpoint) {
+        width: 32%;
+        border-top: solid 1px var(--nsw-grey-04);
+
+        &:nth-child(3n+2) {
+          margin-left: 2%;
+          margin-right: 2%;
+        }
+
+        &:nth-last-child(-n+3) {
+          border-bottom: solid 1px var(--nsw-grey-04);
+        }
+
+        a {
+          color: var(--nsw-brand-dark);
+        }
+      }
+    }
+
+    .nsw-main-nav__title {
+      @include breakpoint($nsw-desktop-breakpoint) {
+        a {      
+          padding: 0;
+          color: var(--nsw-brand-dark);
+        }
+
+        .nsw-material-icons {
+          margin: 0 0 0 rem(12px);
+        }
+      }
+    }
+
+    .nsw-main-nav__sub-nav {
+      @include breakpoint($nsw-desktop-breakpoint) {
+        display: none;
+      }
+    }
+  }
+}

package/src/components/{main-navigation/main-navigation.js → main-nav/main-nav.js}

@@ -4,15 +4,15 @@ import {
 
 class Navigation {
   constructor() {
-    this.openNavButton = document.querySelector('.js-open-navigation')
-    this.closeNavButtons = document.querySelectorAll('.js-close-navigation')
-    this.openSubnavButtons = document.querySelectorAll('.js-open-subnav')
-    this.closeSubnavButtons = document.querySelectorAll('.js-close-subnav')
-    this.mainNavElement = document.getElementById('main-navigation')
+    this.openNavButton = document.querySelector('.js-open-nav')
+    this.closeNavButtons = document.querySelectorAll('.js-close-nav')
+    this.openSubNavButtons = document.querySelectorAll('.js-open-sub-nav')
+    this.closeSubNavButtons = document.querySelectorAll('.js-close-sub-nav')
+    this.mainNavElement = document.getElementById('main-nav')
     this.isMegaMenuElement = !!document.querySelector('.js-mega-menu')
     this.transitionEvent = whichTransitionEvent()
     this.mobileToggleMainNavEvent = (e) => this.mobileToggleMainNav(e)
-    this.mobileToggleSubnavEvent = () => this.closeSubnav()
+    this.mobileToggleSubNavEvent = () => this.closeSubNav()
     this.mobileShowMainTransitionEndEvent = (e) => this.mobileShowMainNav(e)
     this.mobileHideMainTransitionEndEvent = (e) => this.mobileHideMainNav(e)
     this.showSubNavTransitionEndEvent = (e) => this.showSubNav(e)
@@ -38,8 +38,8 @@ class Navigation {
   responsiveCheck(e) {
     let megaMenuListItems = []
     if (e.matches) {
-      megaMenuListItems = [].slice.call(this.mainNavElement.querySelectorAll('.nsw-navigation__list > li'))
-      this.body.classList.remove('navigation-open')
+      megaMenuListItems = [].slice.call(this.mainNavElement.querySelectorAll('ul > li'))
+      this.body.classList.remove('main-nav-active')
     } else {
       megaMenuListItems = [].slice.call(this.mainNavElement.querySelectorAll('li'))
     }
@@ -51,7 +51,7 @@ class Navigation {
     if (this.isMegaMenuElement) {
       const listItems = [].slice.call(this.mainNavElement.querySelectorAll('li'))
       listItems.forEach((item) => {
-        const submenu = item.querySelector('[id^=subnav-]')
+        const submenu = item.querySelector('[id^=sub-nav-]')
         const link = item.querySelector('a')
         if (submenu) {
           link.removeAttribute('role')
@@ -71,8 +71,8 @@ class Navigation {
       element.addEventListener('click', this.mobileToggleMainNavEvent, false)
     })
 
-    this.closeSubnavButtons.forEach((element) => {
-      element.addEventListener('click', this.mobileToggleSubnavEvent, false)
+    this.closeSubNavButtons.forEach((element) => {
+      element.addEventListener('click', this.mobileToggleSubNavEvent, false)
     })
   }
 
@@ -84,7 +84,7 @@ class Navigation {
   setUpNavControls(listItems) {
     if (this.isMegaMenuElement) {
       listItems.forEach((item) => {
-        const submenu = item.querySelector('[id^=subnav-]')
+        const submenu = item.querySelector('[id^=sub-nav-]')
         const link = item.querySelector('a')
         if (submenu) {
           link.setAttribute('role', 'button')
@@ -101,8 +101,8 @@ class Navigation {
   mobileShowMainNav({ propertyName }) {
     if (!propertyName === 'transform') return
     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.classList.add('active')
+    this.mainNavElement.classList.remove('activating')
     this.mainNavElement.removeEventListener(this.transitionEvent, this.mobileShowMainTransitionEndEvent, false)
     this.mainNavElement.addEventListener('keydown', this.mobileTrapTabKeyEvent, false)
   }
@@ -110,13 +110,13 @@ class Navigation {
   mobileHideMainNav({ propertyName }) {
     if (!propertyName === 'transform') return
 
-    this.mainNavElement.classList.remove('is-open')
-    this.mainNavElement.classList.remove('is-closing')
+    this.mainNavElement.classList.remove('active')
+    this.mainNavElement.classList.remove('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')
+      submenu.classList.remove('active')
+      submenu.classList.remove('closing')
       this.openSubNavElements.pop()
     }
     this.mainNavElement.removeEventListener(this.transitionEvent, this.mobileHideMainTransitionEndEvent, false)
@@ -127,27 +127,27 @@ class Navigation {
     const { currentTarget } = e
     const isExpanded = currentTarget.getAttribute('aria-expanded') === 'true'
     if (isExpanded) {
-      this.body.classList.remove('navigation-open')
+      this.body.classList.remove('main-nav-active')
       this.openNavButton.focus()
-      this.mainNavElement.classList.add('is-closing')
+      this.mainNavElement.classList.add('closing')
       this.mainNavElement.addEventListener(this.transitionEvent, this.mobileHideMainTransitionEndEvent, false)
     } else {
-      this.body.classList.add('navigation-open')
-      this.mainNavElement.classList.add('is-opening')
+      this.body.classList.add('main-nav-active')
+      this.mainNavElement.classList.add('activating')
       this.mainNavElement.addEventListener(this.transitionEvent, this.mobileShowMainTransitionEndEvent, false)
     }
   }
 
   buttonClickDesktop(e) {
     this.saveElements(e)
-    this.toggleSubnavDesktop()
+    this.toggleSubNavDesktop()
     e.preventDefault()
   }
 
   buttonKeydownDesktop(e) {
     if (e.key === ' ' || e.key === 'Enter' || e.key === 'Spacebar') {
       this.saveElements(e)
-      this.toggleSubnavDesktop()
+      this.toggleSubNavDesktop()
       e.preventDefault()
     }
   }
@@ -157,7 +157,7 @@ class Navigation {
       const { link } = this.whichSubNavLatest()
       const isExpanded = link.getAttribute('aria-expanded') === 'true'
       if (isExpanded) {
-        this.toggleSubnavDesktop(true)
+        this.toggleSubNavDesktop(true)
         e.preventDefault()
         link.focus()
       }
@@ -178,56 +178,57 @@ class Navigation {
   showSubNav({ propertyName }) {
     const { submenu } = this.whichSubNavLatest()
     if (!propertyName === 'transform') return
-    getFocusableElementBySelector(submenu.id, ['> div button', '> h2 a', '> ul > li > a']).all[2].focus()
+    getFocusableElementBySelector(submenu.id, ['> div button', '> .nsw-main-nav__title a', '> ul > li > a']).all[2].focus()
     submenu.removeEventListener(this.transitionEvent, this.showSubNavTransitionEndEvent, false)
   }
 
-  closeSubnav() {
+  closeSubNav() {
     const { submenu, link } = this.whichSubNavLatest()
     if (this.breakpoint.matches) {
       link.setAttribute('aria-expanded', false)
-      link.classList.remove('is-open')
+      link.classList.remove('active')
       this.mainNavElement.removeEventListener('focus', this.checkFocusEvent, true)
       // fix: workaround for safari because it doesn't support focus event
-      this.mainNavElement.removeEventListener('mousedown', this.checkFocusEvent, true)
+      this.mainNavElement.removeEventListener('click', this.checkFocusEvent, true)
     } else {
       link.focus()
       submenu.removeEventListener('keydown', this.mobileSubNavTrapTabKeyEvent, false)
     }
-    submenu.classList.remove('is-open')
+    submenu.classList.remove('active')
     this.openSubNavElements.pop()
   }
 
-  opensubnav() {
+  openSubNav() {
     const { submenu, link } = this.whichSubNavLatest()
     if (this.breakpoint.matches) {
       link.setAttribute('aria-expanded', true)
-      link.classList.add('is-open')
+      link.classList.add('active')
       this.mainNavElement.addEventListener('focus', this.checkFocusEvent, true)
       // fix: workaround for safari because it doesn't support focus event
-      this.mainNavElement.addEventListener('mousedown', this.checkFocusEvent, true)
+      this.mainNavElement.addEventListener('click', this.checkFocusEvent, true)
     } else {
       submenu.addEventListener('keydown', this.mobileSubNavTrapTabKeyEvent, false)
       submenu.addEventListener(this.transitionEvent, this.showSubNavTransitionEndEvent, false)
     }
-    submenu.classList.add('is-open')
+    submenu.classList.add('active')
   }
 
-  toggleSubnavDesktop() {
+  toggleSubNavDesktop() {
     const { link } = this.whichSubNavLatest()
     const isExpanded = link.getAttribute('aria-expanded') === 'true'
     if (isExpanded) {
-      this.closeSubnav()
+      this.closeSubNav()
     } else {
-      this.opensubnav()
+      this.openSubNav()
     }
   }
 
   checkIfContainsFocus(e) {
     const { linkParent } = this.whichSubNavLatest()
     const focusWithin = linkParent.contains(e.target)
-    if (!focusWithin) {
-      this.toggleSubnavDesktop()
+    const isButton = e.target.getAttribute('role')
+    if (!focusWithin && isButton) {
+      this.toggleSubNavDesktop()
     }
   }
 

package/src/components/masthead/_masthead.scss

@@ -0,0 +1,61 @@
+$masthead-brand-dark: #002664;
+$masthead-off-white: #f2f2f2;
+$masthead-text-dark: #22272b;
+$masthead-text-light: #ffffff;
+
+.nsw-skip {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+
+  a {
+    @include font-size('xxs');
+    @include z-index('middle');
+    background-color: $masthead-brand-dark;
+    color: $masthead-text-light;
+    width: 100%;
+    text-decoration: none;
+    padding: rem(8px) rem(16px);
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: translateY(-101%);
+
+    &:focus {
+      transform: translateY(0);
+      outline: none;
+
+      span {
+        @include nsw-focus($color: $masthead-text-light);
+      }
+    }
+
+    @include breakpoint('lg') {
+      text-align: left;
+    }
+  }
+
+  &--light {
+    a {
+      background-color: $masthead-off-white;
+      color: $masthead-text-dark;
+
+      &:focus span {
+        @include nsw-focus();
+      }
+    }
+  }
+}
+
+.nsw-masthead {
+  @include font-size('xxs');
+  padding: rem(8px) 0;
+  background-color: $masthead-brand-dark;
+  color: $masthead-text-light;
+
+  &--light {
+    background-color: $masthead-off-white;
+    color: $masthead-text-dark;
+  }
+}

package/src/components/media/_media.scss

@@ -1,4 +1,3 @@
-
 .nsw-media {
   width: 100%;
   margin: rem(16px) auto;
@@ -85,10 +84,23 @@
 
   figcaption {
     @include font-size('xs');
-    background-color: $light10;
+    background-color: var(--nsw-off-white);
     padding: rem(16px);
   }
 
+  &--light {
+    figcaption {
+      background-color: var(--nsw-brand-light);
+    }
+  }
+
+  &--dark {
+    figcaption {
+      background-color: var(--nsw-brand-dark);
+      color: var(--nsw-text-light);
+    }
+  }
+
   &--transparent {
     figcaption {
       background-color: transparent;

package/src/components/pagination/_pagination.scss

@@ -1,60 +1,56 @@
 .nsw-pagination {
-  @include font-stack('heading');
   @include component-spacing();
-  @include nsw-spacing(padding-left, none);
-  display: flex;
-  align-items: flex-start;
-  flex-wrap: wrap;
-  justify-content: center;
-  list-style: none;
-
-  &__item {
-    @include nsw-spacing(margin, none none none xs);
-
-    &--next-page {
-      @include nsw-spacing(margin, none none none md);
-    }
 
-    &--prev-page {
-      @include nsw-spacing(margin, none md none none);
+  ul {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    list-style: none;
+    padding: 0;
+  }
 
-      + .nsw-pagination__item {
-        @include nsw-spacing(margin-left, none);
-      }
+  li {
+    margin: 0;
+
+    > span {
+      padding: rem(4px);
     }
   }
 
-  &__link {
-    position: relative;
-    display: inline-flex;
+  a {
+    display: block;
     text-decoration: none;
-    vertical-align: middle;
-    padding: rem(4px) rem(8px);
-    color: $dark80;
     text-align: center;
-    min-width: rem(24px);
+    padding: rem(4px);
+    min-width: rem(30px);
+    border-radius: var(--nsw-border-radius);
 
     &:hover {
-      @include nsw-hover;
+      outline-width: 0;
     }
 
     &:focus {
-      @include nsw-focus($offset: false);
+      outline-width: 3px;
     }
 
-    &.is-current::after {
-      position: absolute;
-      content: '';
-      bottom: 0;
-      width: 80%;
-      left: 50%;
-      transform: translateX(-50%);
-      height: 2px;
-      background-color: $nsw-primary-blue;
-    }
-  }
+    &.active {
+      position: relative;
+      color: var(--nsw-text-dark);
+
+      &:hover {
+        background-color: transparent;
+      }
 
-  &__text {
-    vertical-align: middle;
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: rem(4px);
+        right: rem(4px);
+        height: 2px;
+        background-color: var(--nsw-brand-accent);        
+      }
+    }    
   }
 }

package/src/components/progress-indicator/_progress-indicator.scss

@@ -7,20 +7,20 @@
 
   &__bar {
     display: flex;
+    padding-top: rem(8px);
 
-    @include nsw-spacing(margin-top, xs);
-  }
-
-  &__step {
-    border-top: 4px solid $light20;
-    width: 100%;
+    div {
+      height: rem(4px);
+      width: 100%;
+      background-color: var(--nsw-grey-04);
 
-    &--active {
-      border-top: 4px solid $nsw-primary-highlight;
-    }
+      &:not(:first-child) {
+        margin-left: rem(4px);
+      }
 
-    &:not(:first-child) {
-      margin-left: rem(4px);
+      &.active {
+        background-color: var(--nsw-brand-accent);
+      }
     }
   }
 }