nsw-design-system 3.5.2 → 3.6.0

package/dist/js/main.js

@@ -788,38 +788,43 @@
       }
     }
     selectedItems() {
-      this.filtersItems.forEach(filter => {
-        const button = filter.querySelector('.nsw-filters__item-name');
-        const content = filter.querySelector('.nsw-filters__item-content');
-        const text = content ? content.querySelectorAll('input[type="text"]') : null;
-        const selects = content ? content.querySelectorAll('select') : null;
-        const checkboxes = content ? content.querySelectorAll('input[type="checkbox"]') : null;
-        if (!content) return;
-        this.updateCount({
-          array: text,
-          title: button
-        });
-        this.updateCount({
-          array: selects,
-          title: button
-        });
-        this.updateCount({
-          array: checkboxes,
-          title: button
-        });
-        this.updateStatus({
-          array: text,
-          title: button
-        });
-        this.updateStatus({
-          array: selects,
-          title: button
-        });
-        this.updateStatus({
-          array: checkboxes,
-          title: button
-        });
-      });
+      const stateCheck = setInterval(() => {
+        if (document.readyState === 'complete') {
+          clearInterval(stateCheck);
+          this.filtersItems.forEach(filter => {
+            const button = filter.querySelector('.nsw-filters__item-name');
+            const content = filter.querySelector('.nsw-filters__item-content');
+            const text = content ? content.querySelectorAll('input[type="text"]') : null;
+            const selects = content ? content.querySelectorAll('select') : null;
+            const checkboxes = content ? content.querySelectorAll('input[type="checkbox"]:not([id$="-all"])') : null;
+            if (!content) return;
+            this.updateCount({
+              array: text,
+              title: button
+            });
+            this.updateCount({
+              array: selects,
+              title: button
+            });
+            this.updateCount({
+              array: checkboxes,
+              title: button
+            });
+            this.updateStatus({
+              array: text,
+              title: button
+            });
+            this.updateStatus({
+              array: selects,
+              title: button
+            });
+            this.updateStatus({
+              array: checkboxes,
+              title: button
+            });
+          });
+        }
+      }, 100);
     }
     clearAllFilters(e) {
       e.preventDefault();
@@ -829,7 +834,7 @@
         const content = filter.querySelector('.nsw-filters__item-content');
         const text = content.querySelectorAll('input[type="text"]');
         const selects = content.querySelectorAll('select');
-        const checkboxes = content.querySelectorAll('input[type="checkbox"]');
+        const checkboxes = content.querySelectorAll('input[type="checkbox"]:not([id$="-all"])');
         const allFields = [...text, ...selects, ...checkboxes];
         if (!content) return;
         if (allFields.length > 0) {
@@ -838,6 +843,7 @@
             if (this.constructor.getCondition(field) && (field.type === 'text' || field.type === 'select-one')) {
               field.value = '';
             } else {
+              field.click();
               field.checked = false;
             }
           });
@@ -1205,11 +1211,13 @@
       this.customOptions.forEach(check => {
         const input = check.querySelector('.nsw-form__checkbox-input');
         if (count === this.options.length) {
+          input.click();
           input.checked = false;
           input.removeAttribute('checked');
           check.setAttribute('aria-selected', 'false');
           this.updateNativeSelect(check.getAttribute('data-index'), false);
         } else {
+          input.click();
           input.checked = true;
           input.setAttribute('checked', '');
           check.setAttribute('aria-selected', 'true');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nsw-design-system",
-  "version": "3.5.2",
+  "version": "3.6.0",
   "description": "Design system for Digital NSW",
   "main": "dist/main.js",
   "style": "dist/main.css",

package/src/components/filters/filters.js

@@ -231,6 +231,7 @@ class Filters {
   updateCount(options) {
     const id = uniqueId()
     const GroupArray = []
+
     if (options.array.length > 0) {
       options.array.forEach((element, index) => {
         const getEventType = this.constructor.getEventType(element.type)
@@ -307,22 +308,27 @@ class Filters {
   }
 
   selectedItems() {
-    this.filtersItems.forEach((filter) => {
-      const button = filter.querySelector('.nsw-filters__item-name')
-      const content = filter.querySelector('.nsw-filters__item-content')
-      const text = content ? content.querySelectorAll('input[type="text"]') : null
-      const selects = content ? content.querySelectorAll('select') : null
-      const checkboxes = content ? content.querySelectorAll('input[type="checkbox"]') : null
-
-      if (!content) return
-
-      this.updateCount({ array: text, title: button })
-      this.updateCount({ array: selects, title: button })
-      this.updateCount({ array: checkboxes, title: button })
-      this.updateStatus({ array: text, title: button })
-      this.updateStatus({ array: selects, title: button })
-      this.updateStatus({ array: checkboxes, title: button })
-    })
+    const stateCheck = setInterval(() => {
+      if (document.readyState === 'complete') {
+        clearInterval(stateCheck)
+        this.filtersItems.forEach((filter) => {
+          const button = filter.querySelector('.nsw-filters__item-name')
+          const content = filter.querySelector('.nsw-filters__item-content')
+          const text = content ? content.querySelectorAll('input[type="text"]') : null
+          const selects = content ? content.querySelectorAll('select') : null
+          const checkboxes = content ? content.querySelectorAll('input[type="checkbox"]:not([id$="-all"])') : null
+
+          if (!content) return
+
+          this.updateCount({ array: text, title: button })
+          this.updateCount({ array: selects, title: button })
+          this.updateCount({ array: checkboxes, title: button })
+          this.updateStatus({ array: text, title: button })
+          this.updateStatus({ array: selects, title: button })
+          this.updateStatus({ array: checkboxes, title: button })
+        })
+      }
+    }, 100)
   }
 
   clearAllFilters(e) {
@@ -333,7 +339,7 @@ class Filters {
       const content = filter.querySelector('.nsw-filters__item-content')
       const text = content.querySelectorAll('input[type="text"]')
       const selects = content.querySelectorAll('select')
-      const checkboxes = content.querySelectorAll('input[type="checkbox"]')
+      const checkboxes = content.querySelectorAll('input[type="checkbox"]:not([id$="-all"])')
       const allFields = [...text, ...selects, ...checkboxes]
 
       if (!content) return
@@ -344,6 +350,7 @@ class Filters {
           if (this.constructor.getCondition(field) && (field.type === 'text' || field.type === 'select-one')) {
             field.value = ''
           } else {
+            field.click()
             field.checked = false
           }
         })

package/src/components/select/select.js

@@ -160,12 +160,14 @@ class Select {
       const input = check.querySelector('.nsw-form__checkbox-input')
 
       if (count === this.options.length) {
+        input.click()
         input.checked = false
         input.removeAttribute('checked')
         check.setAttribute('aria-selected', 'false')
 
         this.updateNativeSelect(check.getAttribute('data-index'), false)
       } else {
+        input.click()
         input.checked = true
         input.setAttribute('checked', '')
         check.setAttribute('aria-selected', 'true')

package/src/core/spacing/_spacing.scss

@@ -1,8 +1,14 @@
+/* stylelint-disable declaration-no-important */
+
 .nsw-block {
   @include component-spacing();  
 }
 
 $spacers: (
+  0: (
+    mobile: 0,
+    desktop: 0
+  ),
   xs: (
     mobile: 4px,
     desktop: 8px
@@ -35,64 +41,64 @@ $spacers: (
     $length-desktop: rem(map-get($lengths, desktop));
 
     .#{$abbrev}-#{$size} {
-      #{$prop}: $length-mobile;
+      #{$prop}: $length-mobile !important;
     }
 
     .#{$abbrev}-top-#{$size} {
-      #{$prop}-top: $length-mobile;
+      #{$prop}-top: $length-mobile !important;
     }
 
     .#{$abbrev}-right-#{$size} {
-      #{$prop}-right: $length-mobile;
+      #{$prop}-right: $length-mobile !important;
     }
 
     .#{$abbrev}-bottom-#{$size} {
-      #{$prop}-bottom: $length-mobile;
+      #{$prop}-bottom: $length-mobile !important;
     }
 
     .#{$abbrev}-left-#{$size} {
-      #{$prop}-left: $length-mobile;
+      #{$prop}-left: $length-mobile !important;
     }
 
     .#{$abbrev}-x-#{$size} {
-      #{$prop}-left: $length-mobile;
-      #{$prop}-right: $length-mobile;
+      #{$prop}-left: $length-mobile !important;
+      #{$prop}-right: $length-mobile !important;
     }
 
     .#{$abbrev}-y-#{$size} {
-      #{$prop}-top: $length-mobile;
-      #{$prop}-bottom: $length-mobile;
+      #{$prop}-top: $length-mobile !important;
+      #{$prop}-bottom: $length-mobile !important;
     }
 
     @include breakpoint('lg') {
       .#{$abbrev}-#{$size} {
-        #{$prop}: $length-desktop;
+        #{$prop}: $length-desktop !important;
       }
 
       .#{$abbrev}-top-#{$size} {
-        #{$prop}-top: $length-desktop;
+        #{$prop}-top: $length-desktop !important;
       }
 
       .#{$abbrev}-right-#{$size} {
-        #{$prop}-right: $length-desktop;
+        #{$prop}-right: $length-desktop !important;
       }
 
       .#{$abbrev}-bottom-#{$size} {
-        #{$prop}-bottom: $length-desktop;
+        #{$prop}-bottom: $length-desktop !important;
       }
 
       .#{$abbrev}-left-#{$size} {
-        #{$prop}-left: $length-desktop;
+        #{$prop}-left: $length-desktop !important;
       }
 
       .#{$abbrev}-x-#{$size} {
-        #{$prop}-left: $length-desktop;
-        #{$prop}-right: $length-desktop;
+        #{$prop}-left: $length-desktop !important;
+        #{$prop}-right: $length-desktop !important;
       }
 
       .#{$abbrev}-y-#{$size} {
-        #{$prop}-top: $length-desktop;
-        #{$prop}-bottom: $length-desktop;
+        #{$prop}-top: $length-desktop !important;
+        #{$prop}-bottom: $length-desktop !important;
       }
     }
   }

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

@@ -1,5 +1,6 @@
 @use 'sass:math';
 
+/* stylelint-disable declaration-no-important, string-quotes, number-leading-zero */
 @function rem($value) {
   @if (unitless($value)) {
     $value: $value * 1px;
@@ -44,3 +45,19 @@
 
   @return $string;
 }
+
+@function breakpoint-min($name, $breakpoints: $nsw-breakpoints) {
+  $min: map-get($breakpoints, $name);
+
+  @return if($min != 0, $min, null);
+}
+
+@function breakpoint-max($name, $breakpoints: $nsw-breakpoints) {
+  $max: map-get($breakpoints, $name);
+
+  @return if($max and $max > 0, $max - .02, null);
+}
+
+@function breakpoint-infix($name, $breakpoints: $nsw-breakpoints) {
+  @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
+}

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

@@ -246,3 +246,119 @@
     }
   }
 }
+
+@mixin media-breakpoint-up($name, $breakpoints: $nsw-breakpoints) {
+  $min: breakpoint-min($name, $breakpoints);
+  @if $min {
+    @media (min-width: $min) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+@mixin text-truncate() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// Utility generator
+// Used to generate utilities & print utilities
+/* stylelint-disable string-quotes, number-leading-zero */
+@mixin generate-utility($utility, $infix: "", $is-rfs-media-query: false) {
+  $values: map-get($utility, values);
+
+  // If the values are a list or string, convert it into a map
+  @if type-of($values) == "string" or type-of(nth($values, 1)) != "list" {
+    $values: zip($values, $values);
+  }
+
+  @each $key, $value in $values {
+    $properties: map-get($utility, property);
+
+    // Multiple properties are possible, for example with vertical or horizontal margins or paddings
+    @if type-of($properties) == "string" {
+      $properties: append((), $properties);
+    }
+
+    // Use custom class if present
+    $property-class: if(map-has-key($utility, class), map-get($utility, class), nth($properties, 1));
+    $property-class: if($property-class == null, "", $property-class);
+
+    // Use custom CSS variable name if present, otherwise default to `class`
+    $css-variable-name: if(map-has-key($utility, css-variable-name), map-get($utility, css-variable-name), map-get($utility, class));
+
+    // State params to generate pseudo-classes
+    $state: if(map-has-key($utility, state), map-get($utility, state), ());
+
+    $infix: if($property-class == "" and str-slice($infix, 1, 1) == "-", str-slice($infix, 2), $infix);
+
+    // Don't prefix if value key is null (e.g. with shadow class)
+    $property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, "");
+
+    @if map-get($utility, rfs) {
+      // Inside the media query
+      @if $is-rfs-media-query {
+        $val: rfs-value($value);
+
+        // Do not render anything if fluid and non fluid values are the same
+        $value: if($val == rfs-fluid-value($value), null, $val);
+      }
+      @else {
+        $value: rfs-fluid-value($value);
+      }
+    }
+
+    $is-css-var: map-get($utility, css-var);
+    $is-local-vars: map-get($utility, local-vars);
+    $is-rtl: map-get($utility, rtl);
+
+    @if $value != null {
+      @if $is-rtl == false {
+        /* rtl:begin:remove */
+      }
+
+      @if $is-css-var {
+        .#{$property-class + $infix + $property-class-modifier} {
+          --#{$prefix}#{$css-variable-name}: #{$value};
+        }
+
+        @each $pseudo in $state {
+          .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
+            --#{$prefix}#{$css-variable-name}: #{$value};
+          }
+        }
+      } @else {
+        .#{$property-class + $infix + $property-class-modifier} {
+          @each $property in $properties {
+            @if $is-local-vars {
+              @each $local-var, $variable in $is-local-vars {
+                --#{$prefix}#{$local-var}: #{$variable};
+              }
+            }
+            #{$property}: $value if($enable-important-utilities, !important, null);
+          }
+        }
+
+        @each $pseudo in $state {
+          .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
+            @each $property in $properties {
+              @if $is-local-vars {
+                @each $local-var, $variable in $is-local-vars {
+                  --#{$prefix}#{$local-var}: #{$variable};
+                }
+              }
+              #{$property}: $value if($enable-important-utilities, !important, null);
+            }
+          }
+        }
+      }
+
+      @if $is-rtl == false {
+        /* rtl:end:remove */
+      }
+    }
+  }
+}

package/src/global/scss/helpers/_all.scss

@@ -1,6 +1,8 @@
-@import 'border';
+
 @import 'colour';
+@import 'border';
 @import 'list';
-@import 'shadow';
 @import 'text';
+@import 'utilities';
 @import 'visibility';
+@import 'api';

package/src/global/scss/helpers/_api.scss

@@ -0,0 +1,18 @@
+// Loop over each breakpoint
+/* stylelint-disable string-quotes */
+@each $breakpoint in map-keys($nsw-breakpoints) {
+
+  // Generate media query if needed
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $nsw-breakpoints);
+
+    // Loop over each utility property
+    @each $key, $utility in $utilities {
+      // The utility can be disabled with `false`, thus check if the utility is a map first
+      // Only proceed if responsive media queries are enabled or if it's the base media query
+      @if type-of($utility) == "map" and (map-get($utility, responsive) or $infix == "") {
+        @include generate-utility($utility, $infix);
+      }
+    }
+  }
+}

package/src/global/scss/helpers/_text.scss

@@ -7,3 +7,7 @@
     }
   }
 }
+
+.nsw-text-truncate {
+  @include text-truncate();
+}