nsw-design-system 3.1.0 → 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.1.0",
+  "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';

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/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';