nsw-design-system 3.26.0 → 3.26.2

package/dist/js/components/main-nav/main-nav.d.ts

@@ -35,6 +35,7 @@ declare class Navigation {
     mobileToggleMainNav(e: any): void;
     buttonClickDesktop(event: any): void;
     buttonKeydownDesktop(event: any): void;
+    ensureSingleDesktopSubNav(currentTarget: any): void;
     escapeClose(e: any): void;
     saveElements(e: any): void;
     showSubNav({ propertyName }: {

package/dist/js/main.js

@@ -1,4 +1,4 @@
-/*! NSW Design System v3.26.0 | MIT License */
+/*! NSW Design System v3.26.2 | MIT License */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
     typeof define === 'function' && define.amd ? define('NSW', ['exports'], factory) :
@@ -3328,6 +3328,7 @@
         this.closeButton.addEventListener('click', () => {
           this.closeMessage();
         });
+        this.closeButton.hidden = false;
       }
       closeMessage() {
         this.element.hidden = true;
@@ -3499,6 +3500,7 @@
       buttonClickDesktop(event) {
         const isDesktop = this.breakpoint.matches;
         if (!isDesktop || !event.target.closest('.nsw-main-nav__sub-nav')) {
+          this.ensureSingleDesktopSubNav(event.currentTarget);
           this.saveElements(event);
           this.toggleSubNavDesktop();
           event.preventDefault();
@@ -3506,11 +3508,28 @@
       }
       buttonKeydownDesktop(event) {
         if (event.key === ' ' || event.key === 'Enter' || event.key === 'Spacebar') {
+          this.ensureSingleDesktopSubNav(event.currentTarget);
           this.saveElements(event);
           this.toggleSubNavDesktop();
           event.preventDefault();
         }
       }
+      ensureSingleDesktopSubNav(currentTarget) {
+        if (!this.breakpoint.matches) return;
+        while (this.openSubNavElements.length > 0) {
+          const {
+            link
+          } = this.whichSubNavLatest();
+          const isExpanded = link.getAttribute('aria-expanded') === 'true';
+          if (!isExpanded) {
+            this.openSubNavElements.pop();
+          } else if (link === currentTarget) {
+            return;
+          } else {
+            this.closeSubNav();
+          }
+        }
+      }
       escapeClose(e) {
         if (e.key === 'Escape') {
           // removes handleOutsideClick functionality from docs site
@@ -3535,6 +3554,11 @@
           link: currentTarget,
           linkParent: currentTarget.parentNode
         };
+        if (this.breakpoint.matches) {
+          this.openSubNavElements = this.openSubNavElements.filter(({
+            link
+          }) => link !== currentTarget);
+        }
         this.openSubNavElements.push(temp);
       }
       showSubNav({
@@ -7570,4 +7594,4 @@
 
 }));
 
-;(function(g){try{g.NSW=g.NSW||{};g.NSW.VERSION="3.26.0";}catch(e){} }(typeof globalThis!=='undefined'?globalThis:(typeof window!=='undefined'?window:self)));
+;(function(g){try{g.NSW=g.NSW||{};g.NSW.VERSION="3.26.2";}catch(e){} }(typeof globalThis!=='undefined'?globalThis:(typeof window!=='undefined'?window:self)));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nsw-design-system",
-  "version": "3.26.0",
+  "version": "3.26.2",
   "description": "Design system for Digital NSW",
   "main": "dist/js/main.js",
   "types": "dist/js/main.d.ts",

package/src/components/footer/_footer.scss

@@ -164,7 +164,9 @@
     margin: nsw.rem(12px) 0;
 
     @include nsw.breakpoint('md') {
+      flex: 0 0 auto;
       text-align: right;
+      white-space: nowrap;
     }
   }
 

package/src/components/global-alert/_global-alert.scss

@@ -11,6 +11,10 @@
     right: nsw.rem(4px);
     color: var(--nsw-text-light);
 
+    &[hidden] {
+      display: none;
+    }
+
     &:hover {
       @include nsw.nsw-hover;
       background-color: var(--nsw-hover-light);

package/src/components/global-alert/global-alert.js

@@ -19,6 +19,7 @@ class GlobalAlert {
     this.closeButton.addEventListener('click', () => {
       this.closeMessage()
     })
+    this.closeButton.hidden = false
   }
 
   closeMessage() {

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

@@ -96,7 +96,7 @@
         .nsw-material-icons {
           transform: rotate(90deg);
           margin-left: nsw.rem(6px);
-          transition: transform nsw.$nsw-transition-duration, color nsw.$nsw-transition-duration;
+          transition: transform nsw.$nsw-transition-duration-smooth, color nsw.$nsw-transition-duration-smooth;
         }
 
         &.active {
@@ -111,6 +111,12 @@
     }
   }
 
+  @include nsw.prefers-reduced-motion() {
+    &__list > li > a .nsw-material-icons {
+      transition: none;
+    }
+  }
+
   &__sub-list {
     list-style: none;
     padding: 0;

package/src/components/main-nav/main-nav.js

@@ -160,6 +160,7 @@ class Navigation {
   buttonClickDesktop(event) {
     const isDesktop = this.breakpoint.matches
     if (!isDesktop || !event.target.closest('.nsw-main-nav__sub-nav')) {
+      this.ensureSingleDesktopSubNav(event.currentTarget)
       this.saveElements(event)
       this.toggleSubNavDesktop()
       event.preventDefault()
@@ -168,12 +169,30 @@ class Navigation {
 
   buttonKeydownDesktop(event) {
     if (event.key === ' ' || event.key === 'Enter' || event.key === 'Spacebar') {
+      this.ensureSingleDesktopSubNav(event.currentTarget)
       this.saveElements(event)
       this.toggleSubNavDesktop()
       event.preventDefault()
     }
   }
 
+  ensureSingleDesktopSubNav(currentTarget) {
+    if (!this.breakpoint.matches) return
+
+    while (this.openSubNavElements.length > 0) {
+      const { link } = this.whichSubNavLatest()
+      const isExpanded = link.getAttribute('aria-expanded') === 'true'
+
+      if (!isExpanded) {
+        this.openSubNavElements.pop()
+      } else if (link === currentTarget) {
+        return
+      } else {
+        this.closeSubNav()
+      }
+    }
+  }
+
   escapeClose(e) {
     if (e.key === 'Escape') {
     // removes handleOutsideClick functionality from docs site
@@ -197,6 +216,10 @@ class Navigation {
       linkParent: currentTarget.parentNode,
     }
 
+    if (this.breakpoint.matches) {
+      this.openSubNavElements = this.openSubNavElements.filter(({ link }) => link !== currentTarget)
+    }
+
     this.openSubNavElements.push(temp)
   }
 

package/src/core/iconography/_icon.scss

@@ -57,7 +57,12 @@
   color: var(--nsw-brand-dark);
   font-weight: var(--nsw-font-bold);
   border-radius: var(--nsw-border-radius);
-  
+  cursor: pointer;
+
+  &:disabled {
+    cursor: default;
+  }
+
   @include nsw.font-size('sm');
 
   &:hover {
@@ -74,11 +79,6 @@
     display: block;
   }
 
-  @at-root {
-    a#{&} {
-      cursor: pointer;
-    }
-  }
 
   &--flex {
     display: flex;

package/src/core/typography/_typography.scss

@@ -236,6 +236,8 @@ h6,
   margin: nsw.rem(16px) 0 0 0;
   
   @include nsw.font-size('md');
+
+  line-height: var(--nsw-line-height);
 }