nsw-design-system 3.1.0 → 3.2.2

package/dist/js/main.js

@@ -383,9 +383,13 @@
     }, {
       key: "buttonClickDesktop",
       value: function buttonClickDesktop(e) {
-        this.saveElements(e);
-        this.toggleSubNavDesktop();
-        e.preventDefault();
+        var isDesktop = this.breakpoint.matches;
+
+        if (!isDesktop || !e.target.closest('.nsw-main-nav__sub-nav')) {
+          this.saveElements(e);
+          this.toggleSubNavDesktop();
+          e.preventDefault();
+        }
       }
     }, {
       key: "buttonKeydownDesktop",
@@ -686,6 +690,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 +1092,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 +1107,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.1.0",
+  "version": "3.2.2",
   "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';

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

package/src/components/footer/_footer.scss

@@ -104,6 +104,30 @@
     }
   }
 
+  &__links {
+    @include breakpoint('md') {
+      display: flex;
+      justify-content: space-between;
+      margin-top: rem(-16px);
+    }
+  }
+
+  &__social {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    margin: 0 rem(-12px);
+    padding: rem(8px) 0 rem(12px) 0;
+
+    @include breakpoint('md') {
+      padding-bottom: rem(8px);
+    }
+
+    a {
+      margin: 0 rem(4px);
+    }
+  }
+
   &__info {
     @include breakpoint('md') {
       display: flex;
@@ -124,4 +148,25 @@
       text-align: right;
     }
   }
+
+  &--dark {
+    .nsw-footer__lower {
+      background-color: var(--nsw-brand-dark);
+    }
+  }
+
+  &--light {
+    hr {
+      background-color: var(--nsw-grey-02);
+    }
+
+    .nsw-footer__lower {
+      background-color: var(--nsw-brand-light);
+      color: var(--nsw-text-dark);
+
+      a {
+        @include link-dark;
+      }
+    }
+  }
 }

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

@@ -134,7 +134,7 @@
 
     @include breakpoint('xl') {
       width: 50%;
-      padding-left: calc(var(--nsw-container-width)/12+#{rem($grid-gutters)}*2);
+      padding-left: calc(var(--nsw-container-width)/12 + #{rem($grid-gutters)}*2);
     }
   }
 
@@ -174,6 +174,10 @@
     }
   }
 
+  &--off-white {
+    background-color: var(--nsw-off-white);
+  }
+
   &--dark {
     background-color: var(--nsw-brand-dark);
 
@@ -226,7 +230,7 @@
 
       @include breakpoint('xl') {
         width: 50%;
-        padding-left: calc(var(--nsw-container-width)/4+#{rem($grid-gutters)}*2);
+        padding-left: calc(var(--nsw-container-width)/4 + #{rem($grid-gutters)}*2);
       }
     }
   }

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

@@ -139,9 +139,12 @@ class Navigation {
   }
 
   buttonClickDesktop(e) {
-    this.saveElements(e)
-    this.toggleSubNavDesktop()
-    e.preventDefault()
+    const isDesktop = this.breakpoint.matches
+    if (!isDesktop || !e.target.closest('.nsw-main-nav__sub-nav')) {
+      this.saveElements(e)
+      this.toggleSubNavDesktop()
+      e.preventDefault()
+    }
   }
 
   buttonKeydownDesktop(e) {

package/src/main.js

@@ -1,6 +1,7 @@
 import SiteSearch from './components/header/header'
 import Navigation from './components/main-nav/main-nav'
 import Accordion from './components/accordion/accordion'
+import Dialog from './components/dialog/dialog'
 import Filters from './components/filters/filters'
 import Tabs from './components/tabs/tabs'
 import GlobalAlert from './components/global-alert/global-alert'
@@ -30,6 +31,7 @@ function initSite() {
   const openSearchButton = document.querySelectorAll('.js-open-search')
   const closeSearchButton = document.querySelectorAll('.js-close-search')
   const accordions = document.querySelectorAll('.js-accordion')
+  const dialogs = document.querySelectorAll('.js-dialog')
   const filters = document.querySelectorAll('.js-filters')
   const tabs = document.querySelectorAll('.js-tabs')
   const globalAlert = document.querySelectorAll('.js-global-alert')
@@ -49,6 +51,10 @@ function initSite() {
     new Accordion(element).init()
   })
 
+  dialogs.forEach((element) => {
+    new Dialog(element).init()
+  })
+
   if (filters) {
     filters.forEach((element) => {
       new Filters(element).init()

package/src/main.scss

@@ -8,6 +8,7 @@
 @import 'core/all';
 
 @import 'components/accordion/accordion';
+@import 'components/dialog/dialog';
 @import 'components/breadcrumbs/breadcrumbs';
 @import 'components/button/button';
 @import 'components/callout/callout';