@madgex/design-system 1.59.1 → 1.59.3

package/package.json

@@ -2,7 +2,7 @@
   "name": "@madgex/design-system",
   "author": "Madgex",
   "license": "UNLICENSED",
-  "version": "1.59.1",
+  "version": "1.59.3",
   "scripts": {
     "clean": "rimraf dist public tokens/build",
     "commit": "commit",

package/src/components/inputs/combobox/README.md

@@ -13,6 +13,7 @@
 - `tooltipMessage`: Toggles a tooltip with this message to appear on the input _optional_
 - `validationError`: The error message provided by validation _optional_,
 - `state`: The current state of the input, currently the only allowed value is `error` _optional_
+- `type`: name of the options api e.g "location-lookup"
 
 ## Props - Vue component
 

package/src/components/inputs/combobox/_template.njk

@@ -5,9 +5,9 @@
   {%- if params.id -%}
     {{ params.id }}
   {%- else -%}
-    {# 
+    {#
       if the id is missing it will be constructed using:
-      [component name]-[item labelText]-[index] 
+      [component name]-[item labelText]-[index]
       e.g. period-next-week-2
     #}
     {%- if params.name -%}{{ params.name | lower | trim | replace(' ', '-')}}{%- else -%}
@@ -29,8 +29,8 @@
   {%- endif -%}
 {% endset -%}
 
-{%- if comboboxId -%}  
-  <div class="mds-form-element mds-form-element--combobox js-mds-combobox{% if params.classes %} {{params.classes}}{% endif %}{% if params.state %} mds-form-element--{{params.state}}{% endif %}" data-combobox-id="{{ comboboxId }}" data-test="combobox">
+{%- if comboboxId -%}
+  <div class="mds-form-element mds-form-element--combobox js-mds-combobox{% if params.classes %} {{params.classes}}{% endif %}{% if params.state %} mds-form-element--{{params.state}}{% endif %}" data-combobox-id="{{ comboboxId }}" data-test="combobox" data-type="{{ params.type }}">
     {{ MdsInputLabel({
       labelText: params.labelText,
       hideLabel: params.hideLabel,

package/src/components/inputs/combobox/combobox.njk

@@ -12,7 +12,8 @@
       value: value,
       fallbackTo: fallbackTo,
       classes: classes,
-      placeholder: placeholder
+      placeholder: placeholder,
+      type: type
     }) }}
     <br><br>
   </div>

package/src/components/inputs/combobox/combobox.scss

@@ -15,6 +15,7 @@
 
   & .mds-combobox-loading {
     padding: $mds-size-baseline * 2 0;
+    background-color: $mds-color-background-body;
     & .mds-icon--spinner {
       display: block;
       margin: 0 auto;

package/src/components/inputs/combobox/vue-components/Combobox.vue

@@ -10,7 +10,7 @@
     @keydown.enter.stop.prevent="chooseOption"
   >
     <ComboboxInput
-      @focus="makeActive"
+      @change="handleChange"
       @blur="onInputBlur"
       :id="comboboxid"
       :name="name"
@@ -21,7 +21,12 @@
       :activeDescendent="selectedOptionId"
       v-model="inputValue"
     />
-    <ListBox :id="listBoxId" :aria-labelledby="labelId" :hidden="listBoxHidden" :isLoading="isLoading">
+    <ListBox
+      :id="listBoxId"
+      :aria-labelledby="labelId"
+      :hidden="listBoxHidden"
+      :isLoading="isLoading"
+    >
       <template>
         <ListBoxOption
           v-for="(option, index) in visibleOptions"
@@ -34,9 +39,7 @@
         />
       </template>
     </ListBox>
-    <div aria-live="polite" role="status" class="mds-visually-hidden">
-      {{ resultCount }}
-    </div>
+    <div aria-live="polite" role="status" class="mds-visually-hidden">{{ resultCount }}</div>
   </div>
 </template>
 
@@ -111,7 +114,7 @@ export default {
         // Reset any chosen option if user is typing again
         this.chosenOption = null;
         this.searchValue = event.target ? event.target.value : '';
-        this.makeActive();
+        this.handleChange();
         this.$emit('search', this.searchValue);
       },
     },
@@ -182,6 +185,13 @@ export default {
     makeInactive() {
       this.expanded = false;
     },
+    handleChange() {
+      if (this.searchValue.length > 1) {
+        this.makeActive();
+      } else {
+        this.makeInactive();
+      }
+    },
     clickOption(option = this.selectedOption) {
       this.chosenOption = option;
       this.makeInactive();

package/src/components/inputs/file-upload/README.md

@@ -5,7 +5,7 @@
 - `defaultFileText`: The default text to show in place of a file name when a user has not selected a file yet **required**,
 - `removeButtonText`: The text to show on the button that clears the input when a file has been selected **required**,
 - `hideLabel`: true/false - Add this parameter if you need to visually hide the label **optional**
-**(please see accessibility notes below regarding the use of this parameter)**
+  **(please see accessibility notes below regarding the use of this parameter)**
 - `name`: The name of the input field, uses ID unless specified **optional**,
 - `id`: The id attribute of the field, **required**
 - `optional`: Is the input optional, otherwise required **optional**,
@@ -15,14 +15,14 @@
 - `state`: The current state of the input, currently the only allowed value is `error` **optional**,
 - `tooltipMessage`: Toggles a tooltip with this message to appear on the input **optional**
 - `classes`: add extra classes to the trigger - **optional**
-- `fileTypes`: comma separated list of the different types of file you want to allow. It will add the `accept` attribute on the input - **optional ** (see notes on validation) 
+- `fileTypes`: comma separated list of the different types of file you want to allow. It will add the `accept` attribute on the input - **optional ** (see notes on validation)
 
 ## Accessibility
 
 This input relies on the browser standard input and its built-in facilities for keyboard and screen reader users.
 Additional accessibility aria attributes are applied to the label `aria-live=polite` to inform users of help text or error messages attributed to a form
 
-Avoid using `hideLabel` if you can. Only hide the label when there can be no mistake as to what the input is for,  probably when there is only one input in the form.
+Avoid using `hideLabel` if you can. Only hide the label when there can be no mistake as to what the input is for, probably when there is only one input in the form.
 
 Useful article: https://www.nngroup.com/articles/form-design-placeholders/
 
@@ -32,6 +32,8 @@ For keyboard users as the file input itself remains visually hidden, when it rec
 
 The styling falls back completely to a native file input with default design system form field styling if Javascript is not available.
 
+The styling falls back to native file input in IE as drag and drop from OS is not working in IE.
+
 ## Validation
 
 The `accept` attribute doesn't validate the types of the selected files; it simply provides hints for browsers to guide users towards selecting the correct file types. It is possible (in most cases) for users to toggle an option in the file chooser that makes it possible to override this and select any file they wish, which could have the incorrect type.

package/src/components/inputs/file-upload/_template.njk

@@ -25,7 +25,7 @@
   -}}
 {%- endset %}
 
-<div class="mds-form-element mds-form-element--file{% if params.state %} mds-form-element--{{params.state}}{% endif %}{% if params.classes %} {{params.classes}}{% endif %}" id="{{ params.id }}-container" data-test="input">
+<div class="mds-form-element mds-form-element--file mds-form-element--file-supported{% if params.state %} mds-form-element--{{params.state}}{% endif %}{% if params.classes %} {{params.classes}}{% endif %}" id="{{ params.id }}-container" data-test="input">
     {{ MdsInputLabel({
       labelText: params.labelText,
       hideLabel: params.hideLabel,

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

@@ -3,65 +3,48 @@ const selectedFileClass = 'mds-form-element--selected-file';
 const dragOverClass = 'mds-form-element--dragover';
 const fileNameContainerClass = '.mds-file-upload__file-name';
 const removeButtonClass = '.mds-file-upload__remove-button';
+const supportedClass = 'mds-form-element--file-supported';
 
 const fileUpload = {
   init: () => {
     const fileUploads = Array.from(document.querySelectorAll(fileUploadClass));
     fileUploads.forEach((uploader) => {
-      const fileNameContainer = uploader.querySelector(fileNameContainerClass);
-      const input = uploader.querySelector('input[type=file]');
-      const removeButton = uploader.querySelector(removeButtonClass);
-      let droppedFiles = null;
-
-      function showFiles(file) {
-        fileNameContainer.textContent = file[0].name;
-        uploader.classList.add(selectedFileClass);
-      }
-
-      input.addEventListener('change', () => {
-        if (input.files && input.files.length) {
-          showFiles(input.files);
-        }
-      });
-
-      removeButton.addEventListener('click', (elem) => {
-        elem.preventDefault();
-        input.value = '';
-        fileNameContainer.textContent = '';
-        uploader.classList.remove(selectedFileClass);
-      });
-
-      ['dragover', 'dragenter'].forEach((event) => {
-        input.addEventListener(event, (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-
-          uploader.classList.add(dragOverClass);
+      // fallback for IE
+      if (window.document.documentMode) {
+        uploader.classList.remove(supportedClass);
+      } else {
+        const fileNameContainer = uploader.querySelector(fileNameContainerClass);
+        const input = uploader.querySelector('input[type=file]');
+        const removeButton = uploader.querySelector(removeButtonClass);
+
+        input.addEventListener('change', () => {
+          if (input.files && input.files.length) {
+            fileNameContainer.textContent = input.files[0].name;
+            uploader.classList.add(selectedFileClass);
+          }
         });
-      });
 
-      ['dragleave', 'dragend'].forEach((event) => {
-        input.addEventListener(event, (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-
-          uploader.classList.remove(dragOverClass);
+        removeButton.addEventListener('click', (elem) => {
+          elem.preventDefault();
+          input.value = '';
+          fileNameContainer.textContent = '';
+          uploader.classList.remove(selectedFileClass);
         });
-      });
-
-      input.addEventListener('drop', (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-
-        uploader.classList.remove(dragOverClass);
 
-        droppedFiles = e.dataTransfer.files;
+        ['dragover', 'dragenter'].forEach((event) => {
+          input.addEventListener(event, (e) => {
+            e.stopPropagation();
+            uploader.classList.add(dragOverClass);
+          });
+        });
 
-        if (droppedFiles) {
-          input.files = droppedFiles;
-          showFiles(droppedFiles);
-        }
-      });
+        ['dragleave', 'dragend', 'drop'].forEach((event) => {
+          input.addEventListener(event, (e) => {
+            e.stopPropagation();
+            uploader.classList.remove(dragOverClass);
+          });
+        });
+      }
     });
   },
 };

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

@@ -2,7 +2,7 @@
   display: none;
 }
 
-.js .mds-file-upload {
+.js .mds-form-element--file-supported .mds-file-upload {
   display: flex;
   flex-direction: column;
   background-color: $mds-color-neutral-lightest;
@@ -13,7 +13,7 @@
   }
 }
 
-.js .mds-file-upload__input {
+.js .mds-form-element--file-supported .mds-file-upload__input {
   position: relative;
   border: $mds-size-border-width dashed $mds-color-border;
   width: 100%;
@@ -62,7 +62,7 @@
   }
 }
 
-.js .mds-file-upload__prompt {
+.js .mds-form-element--file-supported .mds-file-upload__prompt {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -86,7 +86,7 @@
   @include z-index;
 }
 
-.js .mds-form-element--selected-file {
+.js .mds-form-element--file-supported .mds-form-element--selected-file {
   @include mq($from: $mds-size-breakpoint-md) {
     width: 50%;
   }
@@ -123,7 +123,7 @@
   }
 }
 
-.js .mds-form-element--dragover {
+.js .mds-form-element--file-supported .mds-form-element--dragover {
   & .mds-file-upload__input {
     background-color: $mds-color-neutral-white;
   }

package/src/js/index-polyfills.js

@@ -1,3 +1,5 @@
 import 'svgxuse';
 import './polyfills/closest';
 import './polyfills/remove';
+import './polyfills/objectAssign';
+import './polyfills/arrayPrototypeFind';

package/src/js/index.js

@@ -18,8 +18,8 @@ import characterCount from '../components/inputs/textarea/character-count';
 document.addEventListener('DOMContentLoaded', () => {
   tabs.init();
   accordion.init();
-  popovers.init();
   modals.init();
   fileUpload.init();
   characterCount.init();
+  popovers.init();
 });

package/src/js/polyfills/arrayPrototypeFind.js

@@ -0,0 +1,46 @@
+// https://tc39.github.io/ecma262/#sec-array.prototype.find
+if (!Array.prototype.find) {
+  Object.defineProperty(Array.prototype, 'find', {
+    value: function(predicate) {
+      // 1. Let O be ? ToObject(this value).
+      if (this == null) {
+        throw TypeError('"this" is null or not defined');
+      }
+
+      var o = Object(this);
+
+      // 2. Let len be ? ToLength(? Get(O, "length")).
+      var len = o.length >>> 0;
+
+      // 3. If IsCallable(predicate) is false, throw a TypeError exception.
+      if (typeof predicate !== 'function') {
+        throw TypeError('predicate must be a function');
+      }
+
+      // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
+      var thisArg = arguments[1];
+
+      // 5. Let k be 0.
+      var k = 0;
+
+      // 6. Repeat, while k < len
+      while (k < len) {
+        // a. Let Pk be ! ToString(k).
+        // b. Let kValue be ? Get(O, Pk).
+        // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
+        // d. If testResult is true, return kValue.
+        var kValue = o[k];
+        if (predicate.call(thisArg, kValue, k, o)) {
+          return kValue;
+        }
+        // e. Increase k by 1.
+        k++;
+      }
+
+      // 7. Return undefined.
+      return undefined;
+    },
+    configurable: true,
+    writable: true,
+  });
+}

package/src/js/polyfills/objectAssign.js

@@ -0,0 +1,30 @@
+if (typeof Object.assign !== 'function') {
+  // Must be writable: true, enumerable: false, configurable: true
+  Object.defineProperty(Object, 'assign', {
+    value: function assign(target, varArgs) {
+      // .length of function is 2
+      'use strict';
+      if (target === null || target === undefined) {
+        throw new TypeError('Cannot convert undefined or null to object');
+      }
+
+      var to = Object(target);
+
+      for (var index = 1; index < arguments.length; index++) {
+        var nextSource = arguments[index];
+
+        if (nextSource !== null && nextSource !== undefined) {
+          for (var nextKey in nextSource) {
+            // Avoid bugs when hasOwnProperty is shadowed
+            if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
+              to[nextKey] = nextSource[nextKey];
+            }
+          }
+        }
+      }
+      return to;
+    },
+    writable: true,
+    configurable: true,
+  });
+}