nsw-design-system 2.13.0 → 3.0.2

package/src/components/accordion/_accordion.scss

@@ -3,60 +3,98 @@
 
   &__title,
   &__button {
-    @include font-stack('heading');
-    @include font-size('sm');
-    @include nsw-spacing(margin, xs none none);
-    @include nsw-spacing(padding, md xxl md md);
-    border-left: solid 4px $nsw-primary-blue;
-    background-color: $light10;
+    @include font-size('md');
+    font-weight: var(--nsw-font-bold);
+    padding: rem(16px) rem(48px) rem(16px) rem(16px);
+    margin-top: rem(8px);
+    background-color: var(--nsw-off-white);
     display: block;
     width: 100%;
     text-align: left;
     position: relative;
+    transition: background $nsw-transition-duration, color $nsw-transition-duration;
+
+    .active,
+    &:hover & {
+      background-color: var(--nsw-brand-dark);
+      color: var(--nsw-text-light);
+
+      .nsw-material-icons {
+        color: var(--nsw-text-light);
+      }
+    }
+  }
+
+  &__toggle {
+    display: flex;
+    justify-content: flex-end;
+    margin-bottom: rem(16px);
+
+    button {
+      @include font-size('sm');
+      color: var(--nsw-brand-dark);
+      text-decoration: underline;
+      text-decoration-skip-ink: auto;
+      font-weight: var(--nsw-font-bold);
+      border: 0;
+      padding: 0;
+      background: none;
+
+      &:hover:enabled {
+        @include nsw-hover;
+        outline: 2px solid var(--nsw-text-hover);
+      }
+
+      &:focus {
+        @include nsw-focus($offset: false);
+      }
+
+      &:first-child {
+        margin-right: rem(24px);
+      }
+
+      &:disabled {
+        opacity: 0.4;
+        cursor: not-allowed;
+      }
+    }
   }
 
   &__title {
-    .is-ready & {
-      border-left: 0;
+    .ready & {
       padding: 0;
       margin-top: 0;
     }
+
+    .nsw-material-icons {
+      font-size: rem(map-get($nsw-icon-sizes, 30));
+      color: var(--nsw-brand-dark);
+      transform: translateY(-50%);
+      position: absolute;
+      top: 50%;
+      right: rem(8px);
+      transition: transform $nsw-transition-duration, color $nsw-transition-duration;
+    }
   }
 
   &__button {
     border: 0;
-    border-left: solid 4px $nsw-primary-blue;
-
-    &:hover {
-      @include nsw-hover;
-    }
+    color: var(--nsw-text-dark);
 
     &:focus {
       @include nsw-focus;
       @include z-index;
       position: relative;
     }
-  }
-
-  &__icon {
-    transform: translateY(-50%) rotate(90deg);
-    position: absolute;
-    top: 50%;
-    right: rem(9px);
-
-    .is-open & {
-      transform: translateY(-50%) rotate(270deg);
-    }
 
-    &.nsw-icon {
-      height: rem(16px);
-      width: rem(16px);
-      right: rem(16px);     
+    &.active {
+      .nsw-material-icons {
+        transform: translateY(-50%) rotate(180deg);
+      }
     }
   }
 
   &__content {
-    @include nsw-spacing(padding, md);
-    border-left: solid 4px $nsw-primary-blue;
+    padding: rem(16px);
   }
 }

package/src/components/accordion/accordion.js

@@ -10,7 +10,7 @@ function createButtons({ textContent }) {
   button.setAttribute('aria-controls', uID)
   button.classList.add('nsw-accordion__button')
   button.insertAdjacentHTML('beforeend', `
-  <i class="material-icons nsw-material-icons nsw-accordion__icon" focusable="false" aria-hidden="true">keyboard_arrow_right</i>
+  <span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">keyboard_arrow_down</span>
   `)
 
   fragment.appendChild(button)
@@ -20,12 +20,17 @@ function createButtons({ textContent }) {
 
 class Accordion {
   constructor(element) {
+    const [expandAll, collapseAll] = Array.from(element.querySelectorAll('.nsw-accordion__toggle button'))
     this.accordionHeadingClass = '.nsw-accordion__title'
     this.accordion = element
     this.headings = element.querySelectorAll(this.accordionHeadingClass)
+    this.expandAllBtn = expandAll
+    this.collapseAllBtn = collapseAll
     this.buttons = []
     this.content = []
-    this.showHideEvent = (e) => this.showHide(e)
+    this.toggleEvent = (e) => this.toggle(e)
+    this.expandAllEvent = (e) => this.expandAll(e)
+    this.collapseAllEvent = (e) => this.collapseAll(e)
   }
 
   init() {
@@ -34,7 +39,10 @@ class Accordion {
   }
 
   setUpDom() {
-    this.accordion.classList.add('is-ready')
+    this.accordion.classList.add('ready')
+    if (this.collapseAllBtn) {
+      this.collapseAllBtn.disabled = true
+    }
     this.headings.forEach((heading) => {
       const headingElem = heading
       const contentElem = heading.nextElementSibling
@@ -54,26 +62,65 @@ class Accordion {
 
   controls() {
     this.buttons.forEach((element) => {
-      element.addEventListener('click', this.showHideEvent, false)
+      element.addEventListener('click', this.toggleEvent, false)
     })
+    if (this.expandAllBtn && this.collapseAllBtn) {
+      this.expandAllBtn.addEventListener('click', this.expandAllEvent, false)
+      this.collapseAllBtn.addEventListener('click', this.collapseAllEvent, false)
+    }
+  }
+
+  getTargetContent(element) {
+    const currentIndex = this.buttons.indexOf(element)
+    return this.content[currentIndex]
   }
 
-  showHide(e) {
+  setAccordionState(element, state) {
+    const targetContent = this.getTargetContent(element)
+
+    if (state === 'open') {
+      element.classList.add('active')
+      element.setAttribute('aria-expanded', 'true')
+      targetContent.hidden = false
+    } else if (state === 'close') {
+      element.classList.remove('active')
+      element.setAttribute('aria-expanded', 'false')
+      targetContent.hidden = true
+    }
+  }
+
+  toggle(e) {
     const { currentTarget } = e
-    const currentIndex = this.buttons.indexOf(currentTarget)
-    const targetContent = this.content[currentIndex]
+    const targetContent = this.getTargetContent(currentTarget)
     const isHidden = targetContent.hidden
 
-    if (isHidden) {
-      currentTarget.classList.add('is-open')
-      currentTarget.setAttribute('aria-expanded', 'true')
-      targetContent.hidden = false
+    if ((isHidden)) {
+      this.setAccordionState(currentTarget, 'open')
     } else {
-      currentTarget.classList.remove('is-open')
-      currentTarget.setAttribute('aria-expanded', 'false')
-      targetContent.hidden = true
+      this.setAccordionState(currentTarget, 'close')
+    }
+
+    if (this.expandAllBtn && this.collapseAllBtn) {
+      this.expandAllBtn.disabled = this.content.every((item) => item.hidden === false)
+      this.collapseAllBtn.disabled = this.content.every((item) => item.hidden === true)
     }
   }
+
+  expandAll() {
+    this.buttons.forEach((element) => {
+      this.setAccordionState(element, 'open')
+    })
+    this.expandAllBtn.disabled = true
+    this.collapseAllBtn.disabled = false
+  }
+
+  collapseAll() {
+    this.buttons.forEach((element) => {
+      this.setAccordionState(element, 'close')
+    })
+    this.expandAllBtn.disabled = false
+    this.collapseAllBtn.disabled = true
+  }
 }
 
 export default Accordion

package/src/components/breadcrumbs/_breadcrumbs.scss

@@ -1,72 +1,63 @@
-.nsw-breadcrumb {
-  @include font-stack;
+.nsw-breadcrumbs {
   @include font-size('xs');
-  @include nsw-spacing(margin-top, lg);
+  margin-top: rem(24px);
 
-  &__list {
+  ol {
     margin: 0;
     padding-left: 0;
     list-style: none;
   }
 
-  &__item {
+  li {
     display: none;
 
-    & + &::before {
-      content: '';
+    &::before {
+      @include material-icons;
+      content: 'keyboard_arrow_right';
+      font-size: rem(map-get($nsw-icon-sizes, 20));
+      line-height: rem(8px);
       display: inline-block;
-      border-right: 2px solid currentColor;
-      border-bottom: 2px solid currentColor;
-      width: rem(6px);
-      height: rem(6px);
-      transform: rotate(-45deg);
-      margin-right: rem(6px);
-      margin-left: rem(6px);
-      top: -1px;
       position: relative;
+      top: rem(6px);
     }
 
     @include breakpoint('md') {
       display: inline;
     }
-  }
 
-  &__item:nth-last-child(2),
-  &__item:last-child {
-    display: inline;
-  }
+    &:nth-last-child(2),
+    &:last-child {
+      display: inline;
+    }
 
-  &__item:nth-last-child(2) {
-    &::before {
-      display: none;
+    &:nth-last-child(2) {
+      &::before {
+        display: none;
 
-      @include breakpoint('md') {
-        display: inline-block;
+        @include breakpoint('md') {
+          display: inline-block;
+        }
       }
     }
-  }
 
-  &__link {
-    color: $nsw-primary-blue;
-    text-decoration: underline;
-    text-decoration-skip-ink: auto;
+    &:first-child {
+      &::before {
+        display: none;
 
-    &:hover {
-      @include nsw-hover;
+        @include breakpoint('md') {
+          display: none;
+        }
+      }
     }
+  }
 
-    &:focus {
-      @include nsw-focus($offset: false);
-    }
+  a {
+    font-weight: var(--nsw-font-normal);
 
-    &:active {
-      @include nsw-active;
+    &.current {
+      text-decoration: none;
+      pointer-events: none;
+      color: var(--nsw-text-dark);
     }
   }
-
-  &--current {
-    text-decoration: none;
-    pointer-events: none;
-    color: $dark80;
-  }
 }

package/src/components/button/_button.scss

@@ -1,12 +1,81 @@
+$nsw-buttons: (
+  dark: (
+    text-color: var(--nsw-text-light),
+    text-color-hover: var(--nsw-text-light),
+    background: var(--nsw-brand-dark),
+    background-hover: var(--nsw-brand-dark),
+    border: transparent,
+    border-hover: transparent,
+    focus: var(--nsw-focus),
+    hover: white
+  ),
+  dark-outline: (
+    text-color: var(--nsw-brand-dark),
+    text-color-hover: var(--nsw-text-light),
+    background: transparent,
+    background-hover: var(--nsw-brand-dark),
+    border: var(--nsw-brand-dark),
+    focus: var(--nsw-focus),
+    border-hover: transparent
+  ),
+  dark-outline-solid: (
+    text-color: var(--nsw-brand-dark),
+    text-color-hover: var(--nsw-text-light),
+    background: var(--nsw-white),
+    background-hover: var(--nsw-brand-dark),
+    border: var(--nsw-brand-dark),
+    focus: var(--nsw-focus),
+    border-hover: transparent
+  ),
+  light: (
+    text-color: var(--nsw-text-dark),
+    text-color-hover: var(--nsw-text-dark),
+    background: var(--nsw-brand-light),
+    background-hover: var(--nsw-brand-light),
+    border: transparent,
+    border-hover: transparent,
+    focus: var(--nsw-focus),
+    hover: black
+  ),
+  light-outline: (
+    text-color: var(--nsw-brand-light),
+    text-color-hover: var(--nsw-text-dark),
+    background: transparent,
+    background-hover: var(--nsw-brand-light),
+    border: var(--nsw-brand-light),
+    focus: var(--nsw-focus),
+    border-hover: transparent
+  ),
+  white: (
+    text-color: var(--nsw-text-dark),
+    text-color-hover: var(--nsw-text-dark),
+    background: var(--nsw-white),
+    background-hover: var(--nsw-white),
+    border: transparent,
+    border-hover: transparent,
+    focus: var(--nsw-white),
+    hover: black
+  ),
+  danger: (
+    text-color: var(--nsw-text-light),
+    text-color-hover: var(--nsw-text-light),
+    background: var(--nsw-status-error),
+    background-hover: var(--nsw-status-error),
+    border: transparent,
+    border-hover: transparent,
+    focus: var(--nsw-focus),
+    hover: white
+  )
+);
+
 .nsw-button {
-  @include font-stack('heading');
   @include font-size('sm');
-  @include nsw-spacing(margin, lg md none none);
-  @include border-radius;
+  border-radius: var(--nsw-border-radius);
+  font-weight: var(--nsw-font-bold);
   border: solid 2px transparent;
   white-space: normal;
   text-decoration: none;
-  padding: rem(12px) rem(24px);
+  padding: rem(10px) rem(22px);
   cursor: pointer;
   -webkit-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */
   text-decoration: none;
@@ -20,45 +89,120 @@
     min-width: rem(124px);
   }
 
+  &:hover {
+    outline: none;
+  }
+
   &:focus {
     @include nsw-focus;
   }
 
-  @each $color, $value in $button-variations {
+  @each $color, $property-map in $nsw-buttons {
     &--#{"" + $color} {
-      @include button-variant($value);
-    }
-  }
+      color: map-get($property-map, text-color);
+      background-color: map-get($property-map, background);
+      border-color: map-get($property-map, border);
+
+      &:visited {
+        color: map-get($property-map, text-color);
+      }
+
+      &:focus {
+        outline-color: map-get($property-map, focus);
+      }
+
+      &:hover {
+        color: map-get($property-map, text-color-hover);
+        background-color: map-get($property-map, background-hover);
+        border-color: map-get($property-map, border-hover);
+        @if map-get($property-map, hover) == white {
+          background-image: linear-gradient(rgba(var(--nsw-white-rgb), 0.15), rgba(var(--nsw-white-rgb), 0.15));
+        }
+        @if map-get($property-map, hover) == black {
+          background-image: linear-gradient(rgba(var(--nsw-black-rgb), 0.07), rgba(var(--nsw-black-rgb), 0.07));
+        }
 
-  &:active {
-    @include nsw-active;
-    border-color: $focus-color;
+        .nsw-material-icons {
+          color: map-get($property-map, text-color-hover);
+        }
+      }
+
+      &:disabled,
+      &.disabled {
+        color: map-get($property-map, text-color);
+        background-color: map-get($property-map, background);
+        border-color: map-get($property-map, border);
+      }
+
+      .nsw-material-icons {
+        color: map-get($property-map, text-color);
+      }
+    }
   }
 
   &:disabled,
   &.disabled {
-    background-color: $light10;
-    color: $light40;
-    border-color: $light10;
+    opacity: 0.4;
     cursor: not-allowed;
   }
-}
 
-.nsw-button--block {
-  display: block;
-  width: 100%;
+  .nsw-material-icons {
+    font-size: rem(map-get($nsw-icon-sizes, 24));
+    line-height: rem(10px);
+    position: relative;
+    bottom: rem(-7px);
+
+    &:first-child {
+      margin-right: rem(8px);
+    }
+
+    &:last-child {
+      margin-left: rem(8px);
+    }
 
-  + .nsw-button--block {
-    margin-bottom: 0;
+    &:only-child {
+      margin: 0;
+    }
   }
-}
 
-.nsw-button--full-width {
-  display: block;
-  width: 100%;
+  &--small {
+    @include font-size('xs');
+    padding: rem(5px);
+
+    .nsw-material-icons {
+      font-size: rem(map-get($nsw-icon-sizes, 20));
 
-  @include breakpoint($desktop-breakpoint) {
-    display: inline-block;
-    width: auto;
+      &:first-child {
+        margin-right: rem(4px);
+      }
+
+      &:last-child {
+        margin-left: rem(4px);
+      }
+
+      &:only-child {
+        margin: 0;
+      }    
+    }
+  }
+
+  &--flex {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .nsw-material-icons {
+      position: static;
+    }
+  }
+
+  &--full-width {
+    display: block;
+    width: 100%;
+
+    @include breakpoint($nsw-desktop-breakpoint) {
+      display: inline-block;
+      width: auto;
+    }
   }
 }

package/src/components/callout/_callout.scss

@@ -1,83 +1,39 @@
 .nsw-callout {
-  @include nsw-spacing(padding, md);
   @include component-spacing();
-  background: $light10;
+  padding: rem(16px);
+  background: var(--nsw-off-white);
   position: relative;
-  border-left: solid 6px $nsw-primary-blue;
+  border-left: solid 6px var(--nsw-brand-dark);
 
   @include breakpoint('md') {
-    @include nsw-spacing(padding, lg lg lg md);
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
+    padding: rem(24px) rem(24px) rem(24px) rem(16px);
   }
 
-  &__icon {
+  .nsw-material-icons {
+    font-size: rem(map-get($nsw-icon-sizes, 30));
+    color: var(--nsw-brand-dark);
+    display: block;
+
     + .nsw-callout__content {
-      margin-top: 10px;
+      margin-top: rem(12px);
     }
 
     @include breakpoint('md') {
-      margin-right: 10px;
+      margin-right: rem(16px);
       flex: 0 0 auto;
 
       + .nsw-callout__content {
         margin-top: 0;
       }
-
-      &.nsw-icon {
-        width: rem(32px);
-        height: rem(32px);     
-      }
-    }
-
-    &.nsw-material-icons {
-      position: relative;
-      top: -3px;
-      left: -3px;
-    }
-
-    &.nsw-icon {
-      width: rem(24px);
-      height: rem(24px);
-
-      + .nsw-callout__content {
-        @include nsw-spacing(margin-top, md);
-      }
-
-      @include breakpoint('md') {
-        @include nsw-spacing(margin-right, md);
-
-        + .nsw-callout__content {
-          @include nsw-spacing(margin-top, none);
-        }
-      }
     }
   }
 
   &__content {
-    @include font-stack;
-
-    @include breakpoint('md') {
-      @include nsw-spacing(margin-top, none);
+    *+p {
+      margin-top: rem(12px);
     }
-
-    p:not([class]) {
-      @include nsw-spacing(margin, sm none none none);
-    }
-
-    a:not([class]) {
-      @include text-link;
-    }
-
-    .nsw-text-link {
-      @include nsw-spacing(margin-top, sm);
-    }
-  }
-
-  &__title {
-    @include font-stack('heading');
-    @include font-size('md');
-    margin: 0;
   }
 }