nsw-design-system 3.0.4 → 3.2.0

package/dist/js/main.js

@@ -686,6 +686,93 @@
     return Accordion;
   }();
 
+  var Dialog = /*#__PURE__*/function () {
+    function Dialog(element) {
+      var _this = this;
+
+      _classCallCheck(this, Dialog);
+
+      this.dialog = element;
+      this.dialogWrapper = element.querySelector('.nsw-dialog__wrapper');
+      this.openBtn = document.querySelectorAll('.js-open-dialog-'.concat(element.getAttribute('id')));
+      this.closeBtn = element.querySelectorAll('.js-close-dialog'); // eslint-disable-next-line max-len
+
+      this.focusableEls = element.querySelectorAll('a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])');
+      this.body = document.body;
+
+      this.openEvent = function (e) {
+        return _this.openDialog(e);
+      };
+
+      this.closeEvent = function (e) {
+        return _this.closeDialog(e);
+      };
+
+      this.clickEvent = function (e) {
+        return _this.clickDialog(e);
+      };
+
+      this.trapEvent = function (e) {
+        return _this.trapFocus(e);
+      };
+    }
+
+    _createClass(Dialog, [{
+      key: "init",
+      value: function init() {
+        this.controls();
+      }
+    }, {
+      key: "controls",
+      value: function controls() {
+        var _this2 = this;
+
+        this.openBtn.forEach(function (btn) {
+          btn.addEventListener('click', _this2.openEvent, false);
+        });
+        this.closeBtn.forEach(function (btn) {
+          btn.addEventListener('click', _this2.closeEvent, false);
+        });
+
+        if (this.dialog.classList.contains('js-dialog-dismiss')) {
+          this.dialog.addEventListener('click', this.clickEvent, false);
+        }
+
+        this.focusableEls[this.focusableEls.length - 1].addEventListener('blur', this.trapEvent, false);
+      }
+    }, {
+      key: "openDialog",
+      value: function openDialog() {
+        this.dialog.setAttribute('aria-expanded', 'true');
+        this.dialog.classList.add('active');
+        this.body.classList.add('dialog-active');
+        this.focusableEls[0].focus();
+      }
+    }, {
+      key: "closeDialog",
+      value: function closeDialog() {
+        this.dialog.setAttribute('aria-expanded', 'false');
+        this.dialog.classList.remove('active');
+        this.body.classList.remove('dialog-active');
+      }
+    }, {
+      key: "clickDialog",
+      value: function clickDialog(e) {
+        if (!this.dialogWrapper.contains(e.target)) {
+          this.closeDialog();
+        }
+      }
+    }, {
+      key: "trapFocus",
+      value: function trapFocus(e) {
+        e.preventDefault();
+        this.focusableEls[0].focus();
+      }
+    }]);
+
+    return Dialog;
+  }();
+
   var Filters = /*#__PURE__*/function () {
     function Filters(element) {
       var _this = this;
@@ -1001,6 +1088,7 @@
     var openSearchButton = document.querySelectorAll('.js-open-search');
     var closeSearchButton = document.querySelectorAll('.js-close-search');
     var accordions = document.querySelectorAll('.js-accordion');
+    var dialogs = document.querySelectorAll('.js-dialog');
     var filters = document.querySelectorAll('.js-filters');
     var tabs = document.querySelectorAll('.js-tabs');
     var globalAlert = document.querySelectorAll('.js-global-alert');
@@ -1015,6 +1103,9 @@
     accordions.forEach(function (element) {
       new Accordion(element).init();
     });
+    dialogs.forEach(function (element) {
+      new Dialog(element).init();
+    });
 
     if (filters) {
       filters.forEach(function (element) {

package/package.json

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

package/src/components/_all.scss

@@ -1,4 +1,5 @@
 @import 'accordion/accordion';
+@import 'dialog/dialog';
 @import 'breadcrumbs/breadcrumbs';
 @import 'button/button';
 @import 'callout/callout';
@@ -22,6 +23,7 @@
 @import 'progress-indicator/progress-indicator';
 @import 'results-bar/results-bar';
 @import 'side-nav/side-nav';
+@import 'steps/steps';
 @import 'table/table';
 @import 'tabs/tabs';
 @import 'tag/tag';

package/src/components/accordion/_accordion.scss

@@ -19,6 +19,15 @@
       background-color: var(--nsw-brand-dark);
       color: var(--nsw-text-light);
 
+      .nsw-section--invert & {    
+        background-color: var(--nsw-brand-light);
+        color: var(--nsw-text-dark);
+        
+        .nsw-material-icons {
+          color: var(--nsw-brand-dark);
+        }
+      }
+
       .nsw-material-icons {
         color: var(--nsw-text-light);
       }
@@ -43,6 +52,11 @@
       &:hover:enabled {
         @include nsw-hover;
         outline: 2px solid var(--nsw-text-hover);
+
+        .nsw-section--invert & {    
+          background-color: var(--nsw-text-hover-light);
+          outline-color: var(--nsw-text-hover-light);
+        }
       }
 
       &:focus {
@@ -56,6 +70,14 @@
       &:disabled {
         opacity: 0.4;
         cursor: not-allowed;
+      }      
+
+      .nsw-section--invert & {    
+        color: var(--nsw-text-light);
+
+        &:focus {
+          outline-color: var(--nsw-white);
+        }
       }
     }
   }

package/src/components/breadcrumbs/_breadcrumbs.scss

@@ -58,6 +58,10 @@
       text-decoration: none;
       pointer-events: none;
       color: var(--nsw-text-dark);
+
+      .nsw-section--invert & {    
+        color: var(--nsw-text-light);
+      }
     }
   }
 }

package/src/components/button/_button.scss

@@ -107,49 +107,6 @@ $nsw-buttons: (
     @include nsw-focus;
   }
 
-  @each $color, $property-map in $nsw-buttons {
-    &--#{"" + $color} {
-      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));
-        }
-
-        .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 {
     opacity: 0.4;
@@ -216,3 +173,49 @@ $nsw-buttons: (
     }
   }
 }
+
+.nsw-section--invert .nsw-button,
+.nsw-button {
+  @each $color, $property-map in $nsw-buttons {
+    &--#{"" + $color} {
+      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));
+        }
+
+        .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);
+      }
+    }
+  }
+}

package/src/components/callout/_callout.scss

@@ -2,4 +2,8 @@
   @include component-spacing();
   padding: rem(16px);
   border-left: solid 4px var(--nsw-brand-dark);
+      
+  .nsw-section--invert & {    
+    border-color: var(--nsw-brand-light);
+  }
 }

package/src/components/card/_card.scss

@@ -32,6 +32,18 @@
     .nsw-material-icons {
       color: var(--nsw-text-light);
     }
+
+    .nsw-section--invert & {
+      color: var(--nsw-text-dark);
+
+      .nsw-card__content {
+        background-color: var(--nsw-brand-light);
+
+        &::after {
+          background-color: transparent;
+        }
+      }
+    }
   }
 
   &:focus-within {
@@ -56,6 +68,10 @@
     @include breakpoint('lg') {
       padding: rem(32px) rem(32px) rem(94px) rem(32px);
     }
+      
+    .nsw-section--invert & {    
+      border-color: transparent;
+    }
   }
 
   &__title {
@@ -76,6 +92,10 @@
         background-color: transparent;
         outline: none;
       }
+      
+      .nsw-section--invert & {    
+        color: var(--nsw-text-dark);
+      }
     }
   }
 
@@ -111,6 +131,10 @@
       bottom: rem(32px);
       left: rem(32px);
     }
+
+    .nsw-section--invert & {    
+      color: var(--nsw-brand-dark);
+    }
   }
 
   &__image {
@@ -136,6 +160,14 @@
   }
 
   &--light {
+    &:hover {      
+      .nsw-section--invert & {  
+        .nsw-card__content {  
+          background-color: var(--nsw-white);
+        }
+      }
+    }
+
     .nsw-card__content {
       background-color: var(--nsw-brand-light);
       border-color: transparent;
@@ -171,6 +203,16 @@
       .nsw-material-icons {
         color: var(--nsw-brand-dark);
       }
+
+      .nsw-section--invert & {  
+        .nsw-card__content {  
+          background-color: var(--nsw-white);
+        }
+
+        .nsw-material-icons {
+          color: var(--nsw-brand-dark);
+        }
+      }
     }
 
     .nsw-card__content {
@@ -181,6 +223,10 @@
       &::after {
         display: none;
       }
+      
+      .nsw-section--invert & {    
+        border-color: var(--nsw-white);
+      }
     }
 
     .nsw-card__image {
@@ -195,6 +241,10 @@
 
     .nsw-material-icons {
       color: var(--nsw-text-light);
+
+      .nsw-section--invert & {  
+        color: var(--nsw-text-light);
+      }
     }
   }
 

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

@@ -22,6 +22,10 @@
         background-color: var(--nsw-text-dark);
         top: rem(18px);
         left: 0;
+      
+        .nsw-section--invert & {    
+          background-color: var(--nsw-text-light);
+        }
       }
     }
   }

package/src/components/dialog/_dialog.scss

@@ -0,0 +1,156 @@
+.dialog-active {
+  overflow: hidden;
+}
+
+.nsw-dialog {
+  @include z-index('upper');
+  display: none;
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background-color: rgba(var(--nsw-black-rgb), 0.7);
+  justify-content: center;
+  align-items: flex-end;
+
+  @include breakpoint('sm') {
+    align-items: center;
+    padding: 0 rem(16px);
+  }
+
+  &.active {
+    display: flex;
+  }
+
+  &__wrapper {
+    background-color: var(--nsw-white);
+    width: 100%;
+    max-width: rem(736px);
+    position: relative;
+    padding-bottom: rem(145px);
+
+    @include breakpoint('sm') {
+      border-radius: var(--nsw-border-radius);
+      align-items: center;
+      max-height: 90%;
+    }
+
+    @include breakpoint('md') {
+      padding-bottom: rem(81px);
+    }
+
+    @include breakpoint('lg') {
+      padding-bottom: rem(113px);
+    }
+
+    .nsw-dialog--single-action & {
+      padding-bottom: rem(81px);
+
+      @include breakpoint('lg') {
+        padding-bottom: rem(113px);
+      }
+    }
+  }
+
+  &__container {
+    height: 100%;
+    max-height: calc(100vh - #{rem(145px)});
+    overflow-y: auto;
+
+    @include breakpoint('sm') {
+      max-height: calc(90vh - #{rem(145px)});
+    }
+
+    @include breakpoint('md') {
+      max-height: calc(90vh - #{rem(81px)});
+    }
+
+    @include breakpoint('lg') {
+      max-height: calc(90vh - #{rem(113px)});
+    }
+
+    .nsw-dialog--single-action & {
+      max-height: calc(100vh - #{rem(81px)});
+
+      @include breakpoint('sm') {
+        max-height: calc(90vh - #{rem(81px)});
+      }
+
+      @include breakpoint('lg') {
+        max-height: calc(90vh - #{rem(113px)});
+      }
+    }
+  }
+
+  &__top {
+    border-bottom: 1px solid var(--nsw-grey-04);
+    display: flex;
+  }
+
+  &__title {
+    padding: rem(16px);
+    width: 100%;
+
+    @include breakpoint('lg') {
+      padding: rem(32px);
+    }
+  }
+
+  &__close {
+    min-width: rem(48px);
+    max-width: rem(48px);
+    padding: rem(8px) rem(8px) rem(8px) 0;
+
+    @include breakpoint('lg') {
+      min-width: rem(64px);
+      max-width: rem(64px);
+      padding: rem(24px) rem(24px) rem(24px) 0;
+    }
+  }
+
+  &__content {
+    padding: rem(16px);
+
+    @include breakpoint('lg') {
+      padding: rem(32px);
+    }
+  }
+
+  &__bottom {
+    border-top: 1px solid var(--nsw-grey-04);
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    flex-direction: column;
+    padding: rem(16px);
+
+    @include breakpoint('md') {
+      flex-direction: row-reverse;
+      justify-content: flex-start;
+    }
+
+    @include breakpoint('lg') {
+      padding: rem(32px);
+    }
+
+    button {
+      margin-bottom: rem(16px);
+
+      @include breakpoint('md') {
+        margin-left: rem(16px);
+        margin-bottom: 0;
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+
+        @include breakpoint('md') {
+          margin-left: 0;
+        }
+      }
+    }
+  }
+}

package/src/components/dialog/dialog.js

@@ -0,0 +1,60 @@
+class Dialog {
+  constructor(element) {
+    this.dialog = element
+    this.dialogWrapper = element.querySelector('.nsw-dialog__wrapper')
+    this.openBtn = document.querySelectorAll('.js-open-dialog-'.concat(element.getAttribute('id')))
+    this.closeBtn = element.querySelectorAll('.js-close-dialog')
+    // eslint-disable-next-line max-len
+    this.focusableEls = element.querySelectorAll('a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])')
+    this.body = document.body
+    this.openEvent = (e) => this.openDialog(e)
+    this.closeEvent = (e) => this.closeDialog(e)
+    this.clickEvent = (e) => this.clickDialog(e)
+    this.trapEvent = (e) => this.trapFocus(e)
+  }
+
+  init() {
+    this.controls()
+  }
+
+  controls() {
+    this.openBtn.forEach((btn) => {
+      btn.addEventListener('click', this.openEvent, false)
+    })
+    this.closeBtn.forEach((btn) => {
+      btn.addEventListener('click', this.closeEvent, false)
+    })
+
+    if (this.dialog.classList.contains('js-dialog-dismiss')) {
+      this.dialog.addEventListener('click', this.clickEvent, false)
+    }
+
+    this.focusableEls[this.focusableEls.length - 1].addEventListener('blur', this.trapEvent, false)
+  }
+
+  openDialog() {
+    this.dialog.setAttribute('aria-expanded', 'true')
+    this.dialog.classList.add('active')
+    this.body.classList.add('dialog-active')
+    this.focusableEls[0].focus()
+  }
+
+  closeDialog() {
+    this.dialog.setAttribute('aria-expanded', 'false')
+    this.dialog.classList.remove('active')
+    this.body.classList.remove('dialog-active')
+  }
+
+  clickDialog(e) {
+    if (!this.dialogWrapper.contains(e.target)) {
+      this.closeDialog()
+    }
+  }
+
+  trapFocus(e) {
+    e.preventDefault()
+    this.focusableEls[0].focus()
+  }
+}
+
+export default Dialog