nsw-design-system 3.3.0 → 3.4.0

package/dist/js/main.js

@@ -1270,6 +1270,102 @@
     return Filters;
   }();
 
+  /* eslint-disable max-len */
+  var FileUpload = /*#__PURE__*/function () {
+    function FileUpload(element) {
+      _classCallCheck(this, FileUpload);
+
+      this.element = element;
+      this.input = this.element.querySelector('.nsw-file-upload__input');
+      this.label = this.element.querySelector('.nsw-file-upload__label');
+      this.multipleUpload = this.input.hasAttribute('multiple');
+      this.replaceFiles = this.element.hasAttribute('data-replace-files');
+      this.filesList = false;
+    }
+
+    _createClass(FileUpload, [{
+      key: "init",
+      value: function init() {
+        var _this = this;
+
+        if (!this.input) return;
+        this.input.addEventListener('change', function () {
+          if (_this.input.value === '') return;
+
+          _this.updateFileList();
+        });
+      }
+    }, {
+      key: "createFileList",
+      value: function createFileList() {
+        var ul = document.createElement('ul');
+        ul.classList.add('nsw-file-upload__list');
+        this.label.insertAdjacentElement('afterend', ul);
+        this.filesList = this.element.querySelector('.nsw-file-upload__list');
+      }
+    }, {
+      key: "createFileItem",
+      value: function createFileItem(file) {
+        var li = document.createElement('li');
+        li.classList.add('nsw-file-upload__item');
+        var html = "\n    <span class=\"nsw-file-upload__item-filename\"></span>\n    <button type=\"button\" class=\"nsw-icon-button\">\n        <span class=\"sr-only\">Remove file</span>\n        <span class=\"material-icons nsw-material-icons\" focusable=\"false\" aria-hidden=\"true\">cancel</span>\n    </button>";
+        li.insertAdjacentHTML('afterbegin', html);
+        li.querySelector('.nsw-file-upload__item-filename').textContent = this.constructor.truncateString(file.name, 50);
+        return li.outerHTML;
+      }
+    }, {
+      key: "updateFileList",
+      value: function updateFileList() {
+        if (!this.filesList) {
+          this.createFileList();
+        }
+
+        this.filesList.classList.add('active');
+        var string = '';
+
+        for (var i = 0; i < this.input.files.length; i += 1) {
+          var file = this.input.files[i];
+          string = this.createFileItem(file) + string;
+        }
+
+        if (this.replaceFiles) {
+          this.filesList.innerHTML = string;
+        } else {
+          this.filesList.insertAdjacentHTML('beforeend', string);
+        }
+
+        this.removeFile();
+      }
+    }, {
+      key: "removeFile",
+      value: function removeFile() {
+        var _this2 = this;
+
+        this.filesList.addEventListener('click', function (event) {
+          if (!event.target.closest('.nsw-icon-button')) return;
+          event.preventDefault();
+          var item = event.target.closest('.nsw-file-upload__item');
+          item.remove();
+
+          if (event.currentTarget.children.length === 0) {
+            _this2.filesList.classList.remove('active');
+          }
+        });
+      }
+    }], [{
+      key: "truncateString",
+      value: function truncateString(str, num) {
+        if (str.length <= num) {
+          return str;
+        }
+
+        return "".concat(str.slice(0, num), "...");
+      }
+    }]);
+
+    return FileUpload;
+  }();
+
   var Tabs = /*#__PURE__*/function () {
     function Tabs(element, showTab) {
       var _this = this;
@@ -1514,6 +1610,7 @@
     var closeSearchButton = document.querySelectorAll('.js-close-search');
     var accordions = document.querySelectorAll('.js-accordion');
     var dialogs = document.querySelectorAll('.js-dialog');
+    var fileUpload = document.querySelectorAll('.js-file-upload');
     var filters = document.querySelectorAll('.js-filters');
     var tabs = document.querySelectorAll('.js-tabs');
     var globalAlert = document.querySelectorAll('.js-global-alert');
@@ -1532,6 +1629,12 @@
       new Dialog(element).init();
     });
 
+    if (fileUpload) {
+      fileUpload.forEach(function (element) {
+        new FileUpload(element).init();
+      });
+    }
+
     if (filters) {
       filters.forEach(function (element) {
         new Filters(element).init();
@@ -1552,6 +1655,9 @@
   }
 
   exports.Accordion = Accordion;
+  exports.Dialog = Dialog;
+  exports.FileUpload = FileUpload;
+  exports.Filters = Filters;
   exports.GlobalAlert = GlobalAlert;
   exports.Navigation = Navigation;
   exports.SiteSearch = SiteSearch;

package/package.json

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

package/src/components/_all.scss

@@ -5,6 +5,7 @@
 @import 'callout/callout';
 @import 'card/card';
 @import 'content-block/content-block';
+@import 'file-upload/file-upload';
 @import 'filters/filters';
 @import 'footer/footer';
 @import 'form/form';
@@ -16,6 +17,7 @@
 @import 'in-page-nav/in-page-nav';
 @import 'link-list/link-list';
 @import 'list-item/list-item';
+@import 'loader/loader';
 @import 'main-nav/main-nav';
 @import 'masthead/masthead';
 @import 'media/media';
@@ -23,6 +25,7 @@
 @import 'progress-indicator/progress-indicator';
 @import 'results-bar/results-bar';
 @import 'side-nav/side-nav';
+@import 'status-labels/status-labels';
 @import 'steps/steps';
 @import 'table/table';
 @import 'tabs/tabs';

package/src/components/file-upload/_file-upload.scss

@@ -0,0 +1,56 @@
+.nsw-file-upload {
+  margin-top: rem(8px);
+  display: block;
+
+  &__label {
+    margin: 0;
+  }
+
+  &__input {
+    position: absolute;
+    opacity: 0;
+
+    &:disabled {
+      + .nsw-file-upload__label {
+        opacity: 0.4;
+        cursor: not-allowed;
+      }
+    }
+    
+    &:focus + .nsw-file-upload__label {
+      @include nsw-focus;
+    }
+  }
+
+  &__list {
+    display: none;
+    margin: 0;
+    padding: 0;
+    border: 0;
+
+    &.active {
+      display: block;
+    }
+  }
+
+  &__item {
+    display: flex;
+    max-width: rem(500px);
+    align-items: center;
+    justify-content: space-between;
+    background-color: var(--nsw-off-white);
+    border-radius: var(--nsw-border-radius);
+    padding: rem(8px);
+
+    &:not(:last-child) {
+      margin-bottom: rem(8px);
+    }
+  }
+
+  &__item-filename {
+    margin-left: rem(8px);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}

package/src/components/file-upload/file-upload.js

@@ -0,0 +1,87 @@
+/* eslint-disable max-len */
+class FileUpload {
+  constructor(element) {
+    this.element = element
+    this.input = this.element.querySelector('.nsw-file-upload__input')
+    this.label = this.element.querySelector('.nsw-file-upload__label')
+    this.multipleUpload = this.input.hasAttribute('multiple')
+    this.replaceFiles = this.element.hasAttribute('data-replace-files')
+    this.filesList = false
+  }
+
+  init() {
+    if (!this.input) return
+
+    this.input.addEventListener('change', () => {
+      if (this.input.value === '') return
+      this.updateFileList()
+    })
+  }
+
+  createFileList() {
+    const ul = document.createElement('ul')
+    ul.classList.add('nsw-file-upload__list')
+    this.label.insertAdjacentElement('afterend', ul)
+    this.filesList = this.element.querySelector('.nsw-file-upload__list')
+  }
+
+  createFileItem(file) {
+    const li = document.createElement('li')
+    li.classList.add('nsw-file-upload__item')
+    const html = `
+    <span class="nsw-file-upload__item-filename"></span>
+    <button type="button" class="nsw-icon-button">
+        <span class="sr-only">Remove file</span>
+        <span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">cancel</span>
+    </button>`
+
+    li.insertAdjacentHTML('afterbegin', html)
+    li.querySelector('.nsw-file-upload__item-filename').textContent = this.constructor.truncateString(file.name, 50)
+    return li.outerHTML
+  }
+
+  updateFileList() {
+    if (!this.filesList) {
+      this.createFileList()
+    }
+
+    this.filesList.classList.add('active')
+
+    let string = ''
+    for (let i = 0; i < this.input.files.length; i += 1) {
+      const file = this.input.files[i]
+      string = this.createFileItem(file) + string
+    }
+
+    if (this.replaceFiles) {
+      this.filesList.innerHTML = string
+    } else {
+      this.filesList.insertAdjacentHTML('beforeend', string)
+    }
+
+    this.removeFile()
+  }
+
+  removeFile() {
+    this.filesList.addEventListener('click', (event) => {
+      if (!event.target.closest('.nsw-icon-button')) return
+      event.preventDefault()
+      const item = event.target.closest('.nsw-file-upload__item')
+
+      item.remove()
+
+      if (event.currentTarget.children.length === 0) {
+        this.filesList.classList.remove('active')
+      }
+    })
+  }
+
+  static truncateString(str, num) {
+    if (str.length <= num) {
+      return str
+    }
+    return `${str.slice(0, num)}...`
+  }
+}
+
+export default FileUpload

package/src/components/loader/_loader.scss

@@ -0,0 +1,62 @@
+//Variations
+$nsw-loaders: (
+  sm: (
+    size: rem(24px),
+    border: 3px,
+  ),
+  md: (
+    size: rem(32px),
+    border: 3px,
+  ),
+  lg: (
+    size: rem(48px),
+    border: 4px,
+  )
+);
+
+.nsw-loader {
+  text-align: center;
+  width: fit-content;
+
+  &__circle {
+    position: relative;
+    display: inline-flex;
+    border-radius: 50%;
+    border-style: solid;
+    animation-name: nsw-loader-animation-rotate;
+    animation-duration: 1.4s;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+    width: rem(64px);
+    height: rem(64px);
+    border-width: 4px;
+    transform-origin: 50% 50% calc((4rem / 2) + 4px);
+    border-color: var(--nsw-grey-03);
+    border-top-color: var(--nsw-brand-accent);
+    
+    @each $size, $variant in $nsw-loaders {
+      &--#{"" + $size} {
+        width: map-get($variant, size);
+        height: map-get($variant, size);
+        transform-origin: 50% 50% calc((#{map-get($variant, size)} / 2) + #{map-get($variant, border)});
+        @if map-get($variant, border) == 3px {
+          border-width: map-get($variant, border);
+        }
+      }
+    }
+  }
+
+  &__label {
+    display: block;    
+  }
+}
+
+@keyframes nsw-loader-animation-rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/src/components/status-labels/_status-labels.scss

@@ -0,0 +1,19 @@
+$nsw-status-labels: ( info, success, warning, error );
+
+.nsw-status-label {
+  @include font-size('xs');
+  padding: rem(2px) rem(16px);
+  border: solid 1px var(--nsw-off-white);
+  background-color: var(--nsw-off-white);
+  border-radius: rem(24px);
+  color: var(--nsw-text-dark);
+  display: inline-block;
+
+  @each $color, $variant in $nsw-status-labels {
+    &--#{"" + $color} {
+      border-color: var(--nsw-status-#{$color});
+      background-color: var(--nsw-status-#{$color});
+      color: var(--nsw-white);
+    }
+  }
+}

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

@@ -118,18 +118,18 @@
 
   --nsw-palette-info-blue: #2e5299;
   --nsw-palette-info-blue-bg: #eaedf4;
-  --nsw-palette-success-green: #00a908;
+  --nsw-palette-success-green: #008a07;
   --nsw-palette-success-green-bg: #e5f6e6;
-  --nsw-palette-warning-orange: #dc5800;
+  --nsw-palette-warning-orange: #c95000;
   --nsw-palette-warning-orange-bg: #fbeee5;
   --nsw-palette-error-red: #b81237;
   --nsw-palette-error-red-bg: #f7e7eb;
 
   --nsw-palette-info-blue-rgb: 46, 82, 153;
   --nsw-palette-info-blue-bg-rgb: 234, 237, 244;
-  --nsw-palette-success-green-rgb: 0, 169, 8;
+  --nsw-palette-success-green-rgb: 0, 138, 7;
   --nsw-palette-success-green-bg-rgb: 229, 246, 230;
-  --nsw-palette-warning-orange-rgb: 220, 88, 0;
+  --nsw-palette-warning-orange-rgb: 201, 80, 0;
   --nsw-palette-warning-orange-bg-rgb: 251, 238, 229;
   --nsw-palette-error-red-rgb: 184, 18, 55;
   --nsw-palette-error-red-bg-rgb: 247, 231, 235;

package/src/main.js

@@ -3,6 +3,7 @@ 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 FileUpload from './components/file-upload/file-upload'
 import Tabs from './components/tabs/tabs'
 import GlobalAlert from './components/global-alert/global-alert'
 
@@ -32,6 +33,7 @@ function initSite() {
   const closeSearchButton = document.querySelectorAll('.js-close-search')
   const accordions = document.querySelectorAll('.js-accordion')
   const dialogs = document.querySelectorAll('.js-dialog')
+  const fileUpload = document.querySelectorAll('.js-file-upload')
   const filters = document.querySelectorAll('.js-filters')
   const tabs = document.querySelectorAll('.js-tabs')
   const globalAlert = document.querySelectorAll('.js-global-alert')
@@ -55,6 +57,12 @@ function initSite() {
     new Dialog(element).init()
   })
 
+  if (fileUpload) {
+    fileUpload.forEach((element) => {
+      new FileUpload(element).init()
+    })
+  }
+
   if (filters) {
     filters.forEach((element) => {
       new Filters(element).init()
@@ -75,5 +83,5 @@ function initSite() {
 }
 
 export {
-  initSite, SiteSearch, Navigation, Accordion, Tabs, GlobalAlert,
+  initSite, SiteSearch, Navigation, Accordion, Tabs, GlobalAlert, Dialog, Filters, FileUpload,
 }

package/src/main.scss

@@ -14,6 +14,7 @@
 @import 'components/callout/callout';
 @import 'components/card/card';
 @import 'components/content-block/content-block';
+@import 'components/file-upload/file-upload';
 @import 'components/filters/filters';
 @import 'components/footer/footer';
 @import 'components/form/form';
@@ -25,6 +26,7 @@
 @import 'components/in-page-nav/in-page-nav';
 @import 'components/link-list/link-list';
 @import 'components/list-item/list-item';
+@import 'components/loader/loader';
 @import 'components/main-nav/main-nav';
 @import 'components/masthead/masthead';
 @import 'components/media/media';
@@ -32,6 +34,7 @@
 @import 'components/progress-indicator/progress-indicator';
 @import 'components/results-bar/results-bar';
 @import 'components/side-nav/side-nav';
+@import 'components/status-labels/status-labels';
 @import 'components/steps/steps';
 @import 'components/table/table';
 @import 'components/tabs/tabs';