nsw-design-system 3.5.0 → 3.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nsw-design-system",
-  "version": "3.5.0",
+  "version": "3.5.2",
   "description": "Design system for Digital NSW",
   "main": "dist/main.js",
   "style": "dist/main.css",
@@ -43,38 +43,40 @@
   "author": "Digital NSW",
   "license": "ISC",
   "devDependencies": {
-    "@babel/core": "^7.9.0",
-    "@babel/preset-env": "^7.9.0",
-    "auto-changelog": "^2.2.1",
+    "@babel/core": "^7.21.4",
+    "@babel/preset-env": "^7.21.4",
+    "@rollup/plugin-babel": "^6.0.3",
+    "auto-changelog": "^2.4.0",
     "autoprefixer": "^9.7.5",
-    "browser-sync": "^2.26.13",
-    "cssnano": "^4.1.10",
+    "browser-sync": "^2.29.1",
+    "cssnano": "^6.0.0",
     "del": "^5.1.0",
-    "eslint": "^6.8.0",
-    "eslint-config-airbnb-base": "^14.1.0",
-    "eslint-plugin-import": "^2.20.1",
+    "eslint": "^8.38.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-plugin-import": "^2.27.5",
     "gulp": "^4.0.2",
     "gulp-better-rollup": "^4.0.1",
-    "gulp-bump": "^3.1.3",
-    "gulp-changed": "^4.0.2",
-    "gulp-eslint": "^6.0.0",
+    "gulp-bump": "^3.2.0",
+    "gulp-changed": "^4.0.3",
+    "gulp-eslint-new": "^1.7.2",
     "gulp-inject-string": "^1.1.2",
     "gulp-plumber": "^1.2.1",
-    "gulp-postcss": "^8.0.0",
-    "gulp-replace": "^1.0.0",
-    "gulp-sass": "^4.0.2",
+    "gulp-postcss": "^9.0.1",
+    "gulp-replace": "^1.1.4",
+    "gulp-sass": "^5.1.0",
     "gulp-sass-glob": "^1.1.0",
     "gulp-sitemap": "^8.0.0",
     "gulp-sourcemaps": "^2.6.5",
     "gulp-stylelint": "^13.0.0",
     "gulp-surge": "^0.1.4",
-    "gulp-zip": "^5.0.1",
-    "handlebars": "^4.7.6",
+    "gulp-zip": "^5.1.0",
+    "handlebars": "^4.7.7",
+    "handlebars-helpers": "^0.10.0",
     "inquirer": "^7.1.0",
-    "jstransformer-handlebars": "^1.1.0",
-    "metalsmith": "^2.3.0",
+    "jstransformer-handlebars": "^1.2.0",
+    "metalsmith": "^2.5.1",
     "metalsmith-collections": "^0.9.0",
-    "metalsmith-data-loader": "^1.1.4",
+    "metalsmith-data-loader": "^1.3.0",
     "metalsmith-debug-ui": "^0.3.2",
     "metalsmith-discover-helpers": "^0.1.1",
     "metalsmith-discover-partials": "^0.1.2",
@@ -83,17 +85,20 @@
     "metalsmith-in-place": "^4.4.1",
     "metalsmith-layouts": "^2.3.1",
     "metalsmith-register-helpers": "^0.4.1",
-    "node-sass": "^4.13.1",
-    "postcss-normalize": "^8.0.1",
-    "redrun": "^7.1.20",
-    "rollup": "^2.2.0",
-    "rollup-plugin-babel": "^4.4.0",
+    "postcss-normalize": "^10.0.1",
+    "redrun": "^10.0.2",
+    "rollup": "^3.20.6",
+    "sass": "^1.62.0",
     "stylelint": "^13.2.1",
     "stylelint-config-sass-guidelines": "^7.0.0",
-    "stylelint-declaration-use-variable": "^1.7.2",
+    "stylelint-declaration-use-variable": "^1.7.3",
     "stylelint-order": "^4.0.0",
     "stylelint-scss": "^3.16.0",
     "yargs": "^15.3.1"
   },
-  "dependencies": {}
+  "overrides": {
+    "gulp-better-rollup": {
+      "rollup": "^1||^2||^3"
+    }
+  }
 }

package/src/components/header/_header.scss

@@ -28,7 +28,8 @@
 
   &__menu,
   &__search {
-    button {      
+    button,
+    a {      
       @include font-size('xxs');
       font-weight: var(--nsw-font-bold);
       border-radius: var(--nsw-border-radius);

package/src/components/media/_media.scss

@@ -71,7 +71,8 @@
       padding-top: 56.25%;
     }
 
-    iframe {
+    iframe,
+    video {
       position: absolute;
       top: 0;
       left: 0;

package/src/components/pagination/_pagination.scss

@@ -57,6 +57,12 @@
       .nsw-section--invert & {    
         color: var(--nsw-text-light);
       }
-    }    
+    }
+    
+    &.disabled,
+    .disabled > & {
+      pointer-events: none;
+      opacity: 0.4;
+    }
   }
 }

package/src/components/select/select.js

@@ -353,7 +353,6 @@ class Select {
     const focusableContent = element.querySelectorAll(focusableElements)
     const lastFocusableElement = focusableContent[focusableContent.length - 1]
 
-
     document.addEventListener('keydown', (event) => {
       const isTabPressed = event.key === 'Tab' || event.code === 9
 

package/src/core/grid/_grid.scss

@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 .nsw-container {
   @include container;
 
@@ -81,8 +83,8 @@
 
   @for $i from 1 through 12 {
     &-#{$i} {
-      width: percentage($i / 12);
-      max-width: percentage($i / 12);
+      width: percentage(math.div($i, 12));
+      max-width: percentage(math.div($i, 12));
     }
   }
 
@@ -90,8 +92,8 @@
     @include breakpoint($breakpoint) {
       @for $i from 1 through 12 {
         &-#{$breakpoint}-#{$i} {
-          width: percentage($i / 12);
-          max-width: percentage($i / 12);
+          width: percentage(math.div($i, 12));
+          max-width: percentage(math.div($i, 12));
         }
       }
     }
@@ -101,7 +103,7 @@
 .nsw-offset {
   @for $i from 1 through 12 {
     &-#{$i} {
-      margin-left: percentage($i / 12);
+      margin-left: percentage(math.div($i, 12));
     }
   }
 
@@ -109,7 +111,7 @@
     @include breakpoint($breakpoint) {
       @for $i from 1 through 12 {
         &-#{$breakpoint}-#{$i} {
-          margin-left: percentage($i / 12);
+          margin-left: percentage(math.div($i, 12));
         }
       }
     }

package/src/core/section/_section.scss

@@ -87,7 +87,7 @@ $nsw-sections: (
   }
 
   @each $name, $variant in $nsw-sections {
-    &--#{$name} {
+    &--#{"" + $name} {
       background-color: map-get($variant, background);
       color: map-get($variant, color);
     }

package/src/global/scss/base/_functions.scss

@@ -1,9 +1,11 @@
+@use 'sass:math';
+
 @function rem($value) {
   @if (unitless($value)) {
     $value: $value * 1px;
   }
 
-  @return $value / $nsw-base-font-size * 1rem;
+  @return math.div($value, $nsw-base-font-size) * 1rem;
 }
 
 @function svg-url($svg) {
@@ -14,7 +16,7 @@
   $encoded: '';
   $slice: 2000;
   $index: 0;
-  $loops: ceil(str-length($svg)/$slice);
+  $loops: ceil(math.div(str-length($svg), $slice));
 
   @for $i from 1 through $loops {
     $chunk: str-slice($svg, $index, $index + $slice - 1);

package/src/global/scss/base/_mixins.scss

@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 @mixin breakpoint( $size, $width-type: min-width) {
   @if type-of( $size ) != 'string' {
     @error 'NSW-DS Breakpoint mixin accepts only strings';
@@ -227,20 +229,20 @@
 @mixin column($size, $breakpoint: null, $offset: null) {
   @if ($breakpoint) {
     @include breakpoint($breakpoint) {
-      width: percentage($size / 12);
-      max-width: percentage($size / 12);
+      width: percentage(math.div($size, 12));
+      max-width: percentage(math.div($size, 12));
 
       @if ($offset) {
-        margin-left: percentage($offset / 12);
+        margin-left: percentage(math.div($offset, 12));
       }
     }
 
   } @else {
-    width: percentage($size / 12);
-    max-width: percentage($size / 12);
+    width: percentage(math.div($size, 12));
+    max-width: percentage(math.div($size, 12));
 
     @if ($offset) {
-      margin-left: percentage($offset / 12);
+      margin-left: percentage(math.div($offset, 12));
     }
   }
 }

package/src/global/scss/helpers/_list.scss

@@ -11,10 +11,10 @@ $nsw-helper-list-sizes: (8, 16, 32);
 
   @each $size in $nsw-helper-list-sizes {
     &--#{"" + $size} {
-      margin: rem(-$size / 2);
+      margin: rem(-$size * 0.5);
 
       > * {
-        margin: rem($size / 2);
+        margin: rem($size * 0.5);
       }
     }
   }

package/src/global/scss/settings/_palette.scss

@@ -49,15 +49,15 @@
   --nsw-palette-purple-03-rgb: 206, 191, 255;
   --nsw-palette-purple-04-rgb: 230, 225, 253;
 
-  --nsw-palette-pink-01: #65004d;
-  --nsw-palette-pink-02: #d912ae;
-  --nsw-palette-pink-03: #f4b5e6;
-  --nsw-palette-pink-04: #fddef2;
-
-  --nsw-palette-pink-01-rgb: 101, 0, 77;
-  --nsw-palette-pink-02-rgb: 217, 18, 174;
-  --nsw-palette-pink-03-rgb: 244, 181, 230;
-  --nsw-palette-pink-04-rgb: 253, 222, 242;
+  --nsw-palette-fuschia-01: #65004d;
+  --nsw-palette-fuschia-02: #d912ae;
+  --nsw-palette-fuschia-03: #f4b5e6;
+  --nsw-palette-fuschia-04: #fddef2;
+
+  --nsw-palette-fuschia-01-rgb: 101, 0, 77;
+  --nsw-palette-fuschia-02-rgb: 217, 18, 174;
+  --nsw-palette-fuschia-03-rgb: 244, 181, 230;
+  --nsw-palette-fuschia-04-rgb: 253, 222, 242;
 
   --nsw-palette-red-01: #630019;
   --nsw-palette-red-02: #d7153a;