nsw-design-system 3.26.3 → 3.28.0

package/README.md

@@ -28,7 +28,7 @@ We recommend the following methods:
 
 4. **Using JSDelivr CDN:** If you prefer a quicker setup, you can use the JSDelivr content delivery network to directly include the design system's CSS and JavaScript files in your project.
 
-Read the [Getting started page](https://designsystem.nsw.gov.au/docs/content/develop/getting-started.html) for information on the framework contents, templates, examples, and more.
+Read the [Getting started page](https://designsystem.nsw.gov.au/get-started/for-developers.html) for information on the framework contents, templates, examples, and more.
 
 ## Installing with NPM
 
@@ -144,7 +144,7 @@ View and raise issues and bugs through our [Issues tracker on GitHub](https://gi
 
 ## Design System Figma UI Kit
 
-Access the complete set of design assets required for designing, sharing, and prototyping using our [Figma UI Kit](https://designsystem.nsw.gov.au/docs/content/design/figma-ui-kit.html).
+Access the complete set of design assets required for designing, sharing, and prototyping using our [Figma UI Kit](https://designsystem.nsw.gov.au/get-started/figma-ui-kit.html).
 
 ## Versioning
 
@@ -158,6 +158,6 @@ Our version numbers consist of MAJOR.MINOR.PATCH, where:
 
 * **PATCH** version is used for minor backward-compatible updates, new component variations, and bug fixes.
 
-See [the Releases section of our GitHub project](https://github.com/digitalnsw/nsw-design-system/releases) for release notes for each release version. Release posts on our [release notes page](https://designsystem.nsw.gov.au/docs/content/about/release-notes.html) contain summaries of the most noteworthy changes made in each release.
+See [the Releases section of our GitHub project](https://github.com/digitalnsw/nsw-design-system/releases) for release notes for each release version. Release posts on our [release notes page](https://designsystem.nsw.gov.au/release-notes/index.html) contain summaries of the most noteworthy changes made in each release.
 
 Feel free to reach out if you have any questions or need more help with integrating the NSW Design System into your projects!

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nsw-design-system",
-  "version": "3.26.3",
+  "version": "3.28.0",
   "description": "Design system for Digital NSW",
   "main": "dist/js/main.js",
   "types": "dist/js/main.d.ts",
@@ -16,15 +16,16 @@
   "files": [
     "dist/{css,js}/**/*.{css,d.ts,js,map}",
     "src/{components,patterns,styles,core}/**/*.{scss,js}",
+    "src/docs/content/methods/easy-read/_easy-read.scss",
     "src/global/{scripts,scss}/**/*.{scss,js}",
     "src/main.{scss,js}"
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/digitalnsw/nsw-design-system.git"
+    "url": "https://github.com/NSWGTP/nsw-design-system.git"
   },
   "bugs": {
-    "url": "https://github.com/digitalnsw/nsw-design-system/issues"
+    "url": "https://github.com/NSWGTP/nsw-design-system/issues"
   },
   "homepage": "https://www.digital.nsw.gov.au/digital-design-system",
   "scripts": {
@@ -46,6 +47,7 @@
     "release-local:major": "npm run bump:major && redrun starterkit:build surge changelog:build commit git-tag -s && npm publish",
     "release-local:minor": "npm run bump:minor && redrun starterkit:build surge changelog:build commit git-tag -s && npm publish",
     "release-local:patch": "npm run bump:patch && redrun starterkit:build surge changelog:build commit git-tag -s && npm publish",
+    "test:docs-ia": "node scripts/validate-docs-ia.js",
     "test:a11y": "node a11y-test.js",
     "test:a11y-local": "DISABLE_PROXY=true BASE_URL=http://localhost:3000 FULL_SWEEP=true node a11y-test.js"
   },

package/src/components/card/_card.scss

@@ -105,6 +105,21 @@
         color: var(--nsw-text-dark);
       }
     }
+
+    .nsw-link--icon {
+      > span {
+        text-decoration: none;
+      }
+
+      .nsw-material-icons,
+      svg {
+        position: static;
+        color: inherit;
+        font-size: nsw.rem(map.get(nsw.$nsw-icon-sizes, 20));
+        line-height: 1;
+        vertical-align: middle;
+      }
+    }
   }
 
   &__copy {

package/src/components/content-block/_content-block.scss

@@ -57,4 +57,18 @@
   &__icon {
     margin-bottom: nsw.rem(12px);
   }
+
+  &__pictogram {
+    width: nsw.rem(48px);
+    height: nsw.rem(48px);
+
+    > svg,
+    > img {
+      box-sizing: border-box;
+      display: block;
+      width: 100%;
+      height: 100%;
+      padding: nsw.rem(3px);
+    }
+  }
 }

package/src/components/hero-search/_hero-search.scss

@@ -23,6 +23,7 @@
     padding: nsw.rem(32px) nsw.rem(16px);
     background-color: var(--nsw-off-white);
     border-bottom: solid 4px var(--nsw-brand-accent);
+    color: var(--nsw-text-dark);
 
     @include nsw.breakpoint('md') {
       border-top-left-radius: var(--nsw-border-radius);

package/src/components/link-list/_link-list.scss

@@ -47,9 +47,11 @@
       outline-width: 3px;
     }
 
-    span {
-      text-decoration: underline;
+    &.nsw-link--icon span {
+      text-decoration: none;
+    }
 
+    span {
       span.nsw-material-icons {
         bottom: nsw.rem(-5px);
       }

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

@@ -91,6 +91,10 @@
       }
     }
 
+    > li > a:not([href]) {
+      cursor: pointer;
+    }
+
     > li > a {      
       @include nsw.breakpoint(nsw.$nsw-desktop-breakpoint) {
         .nsw-material-icons {
@@ -193,6 +197,14 @@
     a {
       font-weight: var(--nsw-font-bold);
 
+      &:not([href]) {
+        cursor: default;
+
+        &:hover {
+          background-color: transparent;
+        }
+      }
+
       .nsw-material-icons {
         display: none;
 

package/src/components/side-nav/_side-nav.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @use '../../global/scss/tools' as nsw;
 
 .nsw-side-nav {
@@ -37,6 +38,10 @@
       > a {
         font-weight: var(--nsw-font-bold);
       }
+
+      > .nsw-side-nav__group > summary {
+        font-weight: var(--nsw-font-bold);
+      }
     }
   }
 
@@ -49,7 +54,8 @@
     text-wrap: pretty;
 
     &.current {
-      background-color: var(--nsw-off-white);
+      background-color: var(--nsw-side-nav-current-bg, var(--nsw-off-white));
+      font-weight: var(--nsw-font-bold);
 
       .nsw-section--invert & {
         background-color: var(--nsw-active-light);
@@ -60,7 +66,7 @@
       @include nsw.nsw-hover;
       outline-width: 0;
 
-      .nsw-section--invert & {    
+      .nsw-section--invert & {
         @include nsw.nsw-hover-light;
         outline-width: 0;
       }
@@ -75,6 +81,78 @@
     }
   }
 
+  &__group {
+    interpolate-size: allow-keywords; /* stylelint-disable-line property-no-unknown -- experimental details animation property */
+
+    &::details-content {
+      block-size: 0;
+      overflow: hidden;
+      transition: block-size nsw.$nsw-transition-duration-smooth, content-visibility nsw.$nsw-transition-duration-smooth; /* stylelint-disable-line property-no-unknown -- experimental details animation property */
+      transition-behavior: allow-discrete; /* stylelint-disable-line property-no-unknown -- experimental details animation property */
+    }
+
+    &[open]::details-content {
+      block-size: auto;
+    }
+
+    summary {
+      position: relative;
+      font-weight: var(--nsw-font-normal);
+      display: block;
+      color: var(--nsw-text-dark);
+      padding: nsw.rem(16px) nsw.rem(48px) nsw.rem(16px) nsw.rem(16px);
+      cursor: pointer;
+      text-wrap: pretty;
+      user-select: none;
+      list-style: none;
+
+      &::-webkit-details-marker {
+        display: none;
+      }
+
+      &::after {
+        content: '\e313';
+        position: absolute;
+        transform: translateY(-50%);
+        top: 50%;
+        right: nsw.rem(8px);
+        font-size: nsw.rem(map.get(nsw.$nsw-icon-sizes, 24));
+        font-weight: var(--nsw-font-normal);
+        color: var(--nsw-brand-dark);
+        transition: transform nsw.$nsw-transition-duration-smooth, color nsw.$nsw-transition-duration-smooth;
+        pointer-events: none;
+
+        @include nsw.material-icons;
+      }
+
+      &:hover {
+        @include nsw.nsw-hover;
+        outline-width: 0;
+
+        .nsw-section--invert & {
+          @include nsw.nsw-hover-light;
+          outline-width: 0;
+        }
+      }
+
+      .nsw-section--invert &:hover::after {
+        color: var(--nsw-brand-dark);
+      }
+
+      &:focus {
+        outline-width: 3px;
+      }
+
+      .nsw-section--invert & {
+        color: var(--nsw-text-light);
+      }
+    }
+
+    &[open] summary::after {
+      transform: translateY(-50%) rotate(180deg);
+    }
+  }
+
   &__header {
     border-bottom: solid 2px var(--nsw-brand-dark);
 
@@ -82,7 +160,9 @@
       border-color: var(--nsw-brand-light);
     }
 
-    a {
+    a,
+    > span {
+      display: block;
       font-weight: var(--nsw-font-bold);
       padding: nsw.rem(8px) 0;
     }
@@ -126,6 +206,8 @@
     }
 
     .material-icons {
+      font-size: nsw.rem(map.get(nsw.$nsw-icon-sizes, 24));
+      line-height: 1;
       transition: transform 0.3s ease;
       transform: rotate(0deg);
     }

package/src/components/utility-list/_utility-list.scss

@@ -95,6 +95,32 @@
     }
   }
 
+  &__item--link {
+    padding: 0;
+  }
+
+  &__link {
+    width: 100%;
+    padding: nsw.rem(16px);
+    display: flex;
+    gap: nsw.$grid-gutters;
+    align-items: center;
+    color: inherit;
+    text-decoration: none;
+
+    &:visited {
+      color: inherit;
+    }
+
+    &:hover {
+      outline-width: 0;
+    }
+
+    &:focus {
+      @include nsw.nsw-focus;
+    }
+  }
+
   .nsw-toggletip {
     border-bottom: unset;
 

package/src/components/utility-list/utility-list.js

@@ -1,6 +1,6 @@
 import Toggletip from '../tooltip/toggletip'
 import logger from '../../global/scripts/helpers/logger'
-import { copyToClipboard as writeToClipboard } from '../../global/scripts/helpers/utilities'
+import { copyToClipboard as writeToClipboard, popupWindow } from '../../global/scripts/helpers/utilities'
 
 class UtilityList extends Toggletip {
   constructor(element, toggletip = element.querySelector('.js-share')) {
@@ -36,7 +36,7 @@ class UtilityList extends Toggletip {
         if (social === 'mail') {
           window.location.href = url
         } else {
-          window.open(url, `${social}-share-dialog`, 'width=626,height=436')
+          popupWindow(url, 626, 436)
         }
       })
     }
@@ -89,7 +89,7 @@ class UtilityList extends Toggletip {
 
     params.forEach((param) => {
       let paramValue = button.getAttribute(`data-${param}`)
-      if (param === 'hashtags') paramValue = encodeURI(paramValue.replace(/#| /g, ''))
+      if (param === 'hashtags' && paramValue) paramValue = encodeURI(paramValue.replace(/#| /g, ''))
       if (paramValue) {
         if (social === 'facebook') {
           newUrl = `${newUrl}u=${encodeURIComponent(paramValue)}&`

package/src/core/layout/heading-links.js

@@ -6,6 +6,13 @@ const hasDocument = typeof document !== 'undefined' && hasWindow
 export const copyHeadingsClass = 'js-copy-headings'
 
 const headingSelector = 'h2'
+const headingExclusionSelector = [
+  '.nsw-card__title',
+  '.nsw-carousel',
+  '.nsw-steps',
+  'dialog',
+  '[role="dialog"]',
+].join(', ')
 const headingWrapperClass = 'nsw-heading-link'
 const headingClass = 'nsw-heading-link__heading'
 const headingInitAttr = 'data-heading-link-init'
@@ -298,6 +305,7 @@ export default function headingLinks() {
   roots.forEach((root) => {
     const headings = root.querySelectorAll(headingSelector)
     headings.forEach((heading) => {
+      if (heading.closest(headingExclusionSelector)) return
       if (heading.getAttribute(headingInitAttr) === '1') return
       enhanceHeading(heading, usedIds)
     })

package/src/core/typography/_typography.scss

@@ -240,7 +240,6 @@ h6,
   line-height: var(--nsw-line-height);
 }
 
-
 a {
   @include nsw.link;