@madgex/design-system 1.54.2 → 1.55.0

package/fractal.js

@@ -100,3 +100,15 @@ fractal.web.theme(madgexTheme);
  */
 fractal.web.set('server.port', 4000);
 fractal.web.set('server.sync', true);
+
+/**
+ * Prevent warnings "a promise was created in a handler but was not returned from it"
+ * caused by Nunjucks from polluting the console
+ * (https://github.com/frctl/fractal/issues/235)
+ */
+// eslint-disable-next-line import/no-extraneous-dependencies
+const bluebird = require('bluebird');
+
+bluebird.config({
+  warnings: false,
+});

package/package.json

@@ -2,7 +2,7 @@
   "name": "@madgex/design-system",
   "author": "Madgex",
   "license": "UNLICENSED",
-  "version": "1.54.2",
+  "version": "1.55.0",
   "scripts": {
     "clean": "rimraf dist public tokens/build",
     "commit": "commit",
@@ -25,60 +25,59 @@
     "url": "https://github.com/madgex/madgex-design-system"
   },
   "dependencies": {
-    "@ctrl/tinycolor": "^2.5.4",
-    "css-loader": "^3.2.0",
+    "@ctrl/tinycolor": "^2.6.1",
+    "css-loader": "^3.6.0",
     "document-register-element": "^1.14.3",
     "mini-css-extract-plugin": "^0.8.0",
-    "node-sass": "^4.12.0",
     "popper.js": "^1.16.0",
-    "postcss": "^7.0.18",
+    "postcss": "^7.0.32",
     "postcss-cli": "^6.1.3",
     "postcss-loader": "^3.0.0",
     "sass-loader": "^7.3.1",
-    "style-dictionary": "^2.8.2",
+    "style-dictionary": "^2.10.1",
     "style-loader": "^0.23.1",
     "svgxuse": "^1.2.6",
     "vue": "^2.6.11",
-    "vue-custom-element": "^3.2.12"
+    "vue-custom-element": "^3.2.14"
   },
   "devDependencies": {
-    "@babel/core": "^7.6.4",
-    "@babel/plugin-transform-runtime": "^7.6.2",
-    "@babel/preset-env": "^7.6.3",
-    "@babel/runtime": "^7.6.3",
+    "@babel/core": "^7.10.5",
+    "@babel/plugin-transform-runtime": "^7.10.5",
+    "@babel/preset-env": "^7.10.4",
+    "@babel/runtime": "^7.10.5",
     "@commitlint/cli": "^8.2.0",
     "@commitlint/config-conventional": "^8.2.0",
     "@commitlint/prompt-cli": "^8.2.0",
-    "@frctl/fractal": "^1.2.0",
-    "@frctl/mandelbrot": "^1.2.1",
-    "@frctl/nunjucks": "^2.0.1",
-    "@madgex/eslint-config-madgex": "^1.2.3",
+    "@frctl/fractal": "^1.3.0",
+    "@frctl/mandelbrot": "^1.4.0",
+    "@frctl/nunjucks": "^2.0.2",
+    "@madgex/eslint-config-madgex": "^1.2.4",
     "@vue/eslint-config-prettier": "^6.0.0",
-    "@vue/test-utils": "^1.0.0-beta.31",
-    "autoprefixer": "^9.6.5",
-    "axe-core": "^3.4.0",
+    "@vue/test-utils": "^1.0.3",
+    "autoprefixer": "^9.8.5",
+    "axe-core": "^3.5.5",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^24.9.0",
-    "babel-loader": "^8.0.6",
+    "babel-loader": "^8.1.0",
     "bubleify": "^1.2.1",
     "commitizen": "^3.1.2",
     "concurrently": "^4.1.2",
-    "core-js": "^3.3.2",
-    "cross-env": "^7.0.0",
+    "core-js": "^3.6.5",
+    "cross-env": "^7.0.2",
     "cssnano": "^4.1.10",
     "cypress": "^3.6.1",
     "cypress-axe": "^0.5.1",
-    "cypress-commands": "^1.0.0",
+    "cypress-commands": "^1.1.0",
     "cz-conventional-changelog": "^2.1.0",
     "del": "^5.1.0",
     "eslint": "^6.8.0",
-    "eslint-config-airbnb-base": "^14.0.0",
-    "eslint-config-prettier": "^6.10.0",
-    "eslint-plugin-cypress": "^2.7.0",
-    "eslint-plugin-import": "^2.20.0",
-    "eslint-plugin-prettier": "^3.1.2",
+    "eslint-config-airbnb-base": "^14.2.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-plugin-cypress": "^2.11.1",
+    "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-vue": "^6.1.2",
+    "eslint-plugin-vue": "^6.2.2",
     "file-loader": "^4.2.0",
     "flat": "^4.1.0",
     "gulp": "^4.0.2",
@@ -88,20 +87,20 @@
     "link-module-alias": "^1.2.0",
     "lint-staged": "^9.4.2",
     "mini-css-extract-plugin": "^0.8.0",
-    "node-sass": "^4.12.0",
+    "node-sass": "^4.14.1",
     "prettier": "^1.19.1",
     "rimraf": "^2.7.1",
     "semantic-release": "^15.13.24",
-    "svg-sprite-loader": "^4.1.6",
+    "svg-sprite-loader": "^4.3.0",
     "svgo": "^1.3.0",
     "svgo-loader": "^2.2.1",
     "svgstore": "^3.0.0-2",
-    "vue-jest": "^3.0.5",
-    "vue-loader": "^15.8.3",
+    "vue-jest": "^3.0.6",
+    "vue-loader": "^15.9.3",
     "vue-template-compiler": "^2.6.11",
     "webpack": "^4.41.2",
-    "webpack-cli": "^3.3.9",
-    "webpack-dev-server": "^3.8.2",
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.11.0",
     "webpack-stream": "^5.2.1"
   },
   "config": {

package/src/components/icons/README.md

@@ -4,6 +4,8 @@
 - `classes`: add extra CSS classes to the icon
 - `path`: if you need to use a different path than the default (*/assets/icons.svg*)
 - `visuallyHiddenLabel`: add a visually hidden label (see Accessibility notes below)
+- `hasContainer`: `true/false` - used to add a container arount the icon *optional*
+- `containerClasses`: classes for the container (see Container notes below)
 
 **Note regarding the default path of the icons file**:
 If you would like to change the default path, you can use the `defaultIconPath` variable in Nunjucks. You can set it as global variable like this:
@@ -33,6 +35,21 @@ If using an icon next to some text, use classes `mds-icon--before` or `mds-icon-
 
 To make sure that the icons have the same baseline as the text, we are adding `top: 0.125em` on them which corresponds to the icon offset divided by the size of the icon. Please see https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4 to see how it is calculated.
 
+## Container
+
+You can use the attributes `hasContainer` and `containerClasses` to add an icon within an container. 
+We currently only have a circle. 
+Add `mds-icon-container--circle` in `containerClasses`.
+
+To add a colour to the container, add one of the following classes: 
+- `mds-icon-container--error` = `$mds-color-status-error-dark`
+- `mds-icon-container--success` = `$mds-color-status-success-dark`
+- `mds-icon-container--success` = `$mds-color-status-info-dark` 
+
+Reference: [Colours tokens](/docs/tokens/colour)
+
+If the icon is next to some text, you can also add `mds-icon-container--before` or `mds-icon-container--before` to add `margin-right` or `margin-left` to the icon (It will be the same value as `mds-icon--before` or `mds-icon--after`).
+
 ## IE support
 
 Internet Explorer doesn't support `<use href="url" />` if we use a URL in the href. We are using https://github.com/Keyamoon/svgxuse as a polyfill.

package/src/components/icons/icons.njk

@@ -72,8 +72,9 @@
 
 <h2>Has container</h2>
 {{- MdsIcon({
-  iconName: 'doc-pdf',
+  iconName: 'cross',
   visuallyHiddenLabel: 'Error',
+  classes: 'mds-icon--md',
   hasContainer: true,
-  containerClasses: 'mds-icon-container--circle'
+  containerClasses: 'mds-icon-container--circle mds-icon-container--error'
 }) -}}

package/src/components/icons/icons.scss

@@ -8,7 +8,6 @@
   top: 0.125em;
 }
 
-
 .mds-icon-container {
   display: inline-flex;
   &--circle {
@@ -19,25 +18,34 @@
   & .mds-icon {
     top: 0;
   }
-  
-  &--error, &--success, &--info {
+
+  &--error,
+  &--success,
+  &--info {
     & .mds-icon {
       fill: #fff;
     }
   }
-  
+
   &--error {
     background-color: $mds-color-status-error-dark;
   }
-  
+
   &--success {
     background-color: $mds-color-status-success-dark;
   }
-  
+
   &--info {
     background-color: $mds-color-status-info-dark;
   }
-  
+}
+.mds-icon-container--before,
+.mds-icon--before {
+  margin-right: 0.5em;
+}
+.mds-icon-container--after,
+.mds-icon--after {
+  margin-left: 0.5em;
 }
 
 .mds-icon--sm {
@@ -55,13 +63,6 @@
   height: $mds-size-icon-lg;
 }
 
-.mds-icon--before {
-  margin-right: 0.5em;
-}
-.mds-icon--after {
-  margin-left: 0.5em;
-}
-
 .mds-icon--spinner {
   animation: spin 900ms cubic-bezier(0.21, 0, 1, 1) infinite;
 }

package/src/components/inputs/_form-elements.scss

@@ -36,10 +36,6 @@
     display: flex;
     align-items: center;
     color: $mds-color-status-error-dark;
-
-    & .mds-icon-container {
-      margin-right: $mds-size-baseline;
-    }
   }
 }
 
@@ -47,7 +43,7 @@
   width: 100%;
   padding: $mds-size-baseline * 3;
   border-radius: $mds-size-border-radius;
-  border: $mds-size-border-width solid $mds-color-border;
+  border: $mds-size-border-width solid $mds-color-input-border;
   @extend .mds-font-body-copy;
 
   &:focus {
@@ -83,7 +79,7 @@
     display: inline-block;
     margin-right: $mds-size-baseline * 2;
     margin-bottom: 0;
-    
+
     &:last-child {
       margin-right: 0;
     }
@@ -98,7 +94,7 @@
   height: $mds-size-baseline * 5;
   width: $mds-size-baseline * 5;
   padding: $mds-size-baseline;
-  border: $mds-color-input-border;
+  border: $mds-size-border-width solid $mds-color-input-border;
   background-color: $mds-color-neutral-white;
   outline: 0;
   margin-right: $mds-size-baseline * 2;

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

@@ -16,7 +16,7 @@
         iconName: 'cross',
         classes: 'mds-icon--sm',
         hasContainer: true,
-        containerClasses: 'mds-icon-container--circle mds-icon-container--error' 
+        containerClasses: 'mds-icon-container--circle mds-icon-container--error mds-icon-container--before' 
         }) 
       -}}
       {{- params.validationError -}}

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

@@ -3,7 +3,7 @@
   position: relative;
 }
 .mds-combobox__listbox {
-  border: $mds-size-border-width solid $mds-color-border;
+  border: $mds-size-border-width solid $mds-color-input-border;
   border-top: none;
   border-radius: 0 0 $mds-size-border-radius $mds-size-border-radius;
   position: absolute;

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

@@ -3,6 +3,7 @@
 - `labelText`: The label for the input **required**,
 - `buttonText`: The text for the secondary label acting as the file upload button, uses labelText unless specified **optional**,
 - `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)**
 - `name`: The name of the input field, uses ID unless specified **optional**,
@@ -32,4 +33,4 @@ The styling falls back completely to a native file input with default design sys
 
 ## Note
 
-The Javascript associated with this component is **NOT** currently included in the generic design system JS bundle.
+When a file is selected, the drag & drop/file selection area is disabled. When using cloud services such as Dropbox or Google Drive, the buttons to access those services will disappear as well. The user will need to click on the "remove file" button to be able to select a file again, either using the file input or the cloud services.

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

@@ -1,6 +1,7 @@
 {% from "../label/_macro.njk" import MdsInputLabel %}
 {% from "../_message/_macro.njk" import MdsInputMessages %}
 {% from "../../icons/_macro.njk" import MdsIcon %}
+{% from "../../button/_macro.njk" import MdsButton %}
 
 {% if params.name %}
   {% set name = params.name %}
@@ -14,6 +15,16 @@
   {% set buttonText = params.labelText %}
 {% endif %}
 
+{% set removeButtonText -%}
+  {{- params.removeButtonText -}}
+  {{-
+    MdsIcon({
+      iconName: 'cross',
+      classes: 'mds-icon--after'
+    })
+  -}}
+{%- 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">
     {{ MdsInputLabel({
       labelText: params.labelText,
@@ -48,21 +59,43 @@
           {% endif %}
         />
         <div class="mds-file-upload__input-controls" aria-hidden="true">
-          <div class="mds-file-upload__prompt">
-            {{
-              MdsIcon({
-                iconName: 'doc',
-                classes: 'mds-icon--lg mds-icon--before'
-              })
-            }}
-            <p class="mds-file-upload__file-name">
-              {{ params.defaultFileText }}
-            </p>
+          <div class="mds-file-upload__selection-state">
+            <div class="mds-file-upload__prompt">
+              {{
+                MdsIcon({
+                  iconName: 'upload',
+                  classes: 'mds-icon--md mds-icon--before'
+                })
+              }}
+              <span>
+                {{ params.defaultFileText }}
+              </span>
+            </div>
+            {# The "button" is actually a label referencing the input but it looks like a button so using this for the name of the class #}
+            <div class="mds-file-upload__browse-button">
+              {{ MdsInputLabel({
+                labelText: buttonText,
+                id: params.id
+              }) }}
+            </div>
           </div>
-          {{ MdsInputLabel({
-            labelText: buttonText,
-            id: params.id
-          }) }}
+          <div class="mds-file-upload__selected-state">
+            <div class="mds-file-upload__file-name-container">
+              {{- MdsIcon({ 
+                iconName: 'check',
+                classes: 'mds-icon--md',
+                hasContainer: true,
+                containerClasses: 'mds-icon-container--circle mds-icon-container--success mds-icon-container--before' 
+                }) 
+              -}}
+              <span class="mds-file-upload__file-name"></span>
+            </div>
+            {{ MdsButton({
+                html: removeButtonText,
+                classes: 'mds-button--plain mds-file-upload__remove-button',
+                type: 'button'
+            }) }}
+            </div>
         </div>
     </div>  
   </div>

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

@@ -1,11 +1,12 @@
 module.exports = {
   title: 'File Upload',
-  status: 'prototype',
+  status: 'wip',
   context: {
     labelText: 'Upload a file',
     helpText: 'Your file must be a .doc, .pdf, .docx, or .rtf. No larger than 1MB',
     defaultFileText: 'Drag and drop',
-    buttonText: 'Browse',
+    buttonText: 'Choose a file',
+    removeButtonText: 'Remove file',
     name: 'file',
     id: 'file',
     fileTypes: '.doc,.docx,.pdf,.rtf',

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

@@ -1,5 +1,7 @@
 const fileUploadClass = '.mds-form-element--file';
+const selectedFileClass = 'mds-form-element--selected-file';
 const fileNameContainerClass = '.mds-file-upload__file-name';
+const removeButtonClass = '.mds-file-upload__remove-button';
 
 const fileUpload = {
   init: () => {
@@ -7,11 +9,19 @@ const fileUpload = {
     fileUploads.forEach((uploader) => {
       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);
         }
       });
+      removeButton.addEventListener('click', (elem) => {
+        elem.preventDefault();
+        input.value = '';
+        fileNameContainer.textContent = '';
+        uploader.classList.remove(selectedFileClass);
+      });
     });
   },
 };

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

@@ -7,6 +7,7 @@
         labelText: labelText,
         buttonText: buttonText,
         defaultFileText: defaultFileText,
+        removeButtonText: removeButtonText,
         hideLabel: hideLabel,
         name: name,
         id: id,

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

@@ -1,4 +1,4 @@
-.mds-file-upload__input .mds-file-upload__input-controls  {
+.mds-file-upload__input .mds-file-upload__input-controls {
   display: none;
 }
 
@@ -22,10 +22,6 @@
   align-items: center;
   justify-content: center;
 
-  @include mq($from: $mds-size-breakpoint-md) {
-    width: 50%;
-  }
-
   & .mds-form-label {
     @include z-index;
     display: block;
@@ -44,14 +40,14 @@
     top: 0;
     opacity: 0;
   }
-  
+
   & .mds-file-upload__input-controls {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
   }
-  
+
   & .mds-form-control:focus ~ .mds-file-upload__input-controls {
     // Apply some focus styling to the 'button' when the input has focus and can be keyboard-activated
     label {
@@ -65,15 +61,44 @@
 .js .mds-file-upload__prompt {
   display: flex;
   align-items: center;
-  margin-bottom: $mds-size-baseline * 3;
+  margin-bottom: $mds-size-baseline * 5;
 
   & .mds-icon {
-    display: inline-block;
     fill: $mds-color-button-bg-base;
   }
 }
 
-.js .mds-file-upload__file-name {
-  display: inline-block;
-  margin-bottom: 0;
-}
+.mds-file-upload__selected-state {
+  display: none;
+}
+.mds-file-upload__file-name-container {
+  display: flex;
+  align-items: center;
+}
+.mds-file-upload__remove-button {
+  @include z-index;
+}
+
+.js .mds-form-element--selected-file {
+  /* When a file is selected, we reduce the input size to 0 (.mds-form-control)
+  * so the user can't click or drag and drop in the grey area anymore.
+  * Will mostly be useful when used with the cloud services buttons
+  * as the user will need to clear the input to see the buttons again.
+  * We also remove the dotted border to indicate the change
+  */
+  & .mds-file-upload__input {
+    border: 0;
+  }
+  & .mds-form-control {
+    width: 0;
+    height: 0;
+    padding: 0;
+    border: 0;
+  }
+  & .mds-file-upload__selection-state {
+    display: none;
+  }
+  & .mds-file-upload__selected-state {
+    display: block;
+  }
+}

package/src/components/inputs/multi-select/multi-select.scss

@@ -1,6 +1,6 @@
 .mds-multiselect {
   border-radius: $mds-size-border-radius;
-  border: $mds-size-border-width solid $mds-color-border;
+  border: $mds-size-border-width solid $mds-color-input-border;
   max-height: 200px;
   min-height: 200px;
   overflow-y: auto;

package/src/icons/upload.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="31px" viewBox="0 0 32 31" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Combined Shape</title>
+    <g id="-------Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Icon/-32/-Upload" transform="translate(0.000000, -1.000000)" fill="#000000">
+            <path d="M0.796205338,22.6627686 C1.30386191,22.3605456 1.93422258,22.3605456 2.44187915,22.6627686 C2.94953573,22.9649916 3.25426091,23.521676 3.23742093,24.1160966 L3.23742093,24.1160966 L3.23742093,26.6147633 C3.23887729,27.7820523 4.17650775,28.7279607 5.33358148,28.72943 L5.33358148,28.72943 L26.3877035,28.72943 C27.5447772,28.7279607 28.4824077,27.7820523 28.4838641,26.6147633 L28.4838641,26.6147633 L28.4838641,24.1160966 C28.4670241,23.521676 28.7717493,22.9649916 29.2794058,22.6627686 C29.7870624,22.3605456 30.4174231,22.3605456 30.9250797,22.6627686 C31.4327362,22.9649916 31.7374614,23.521676 31.7206214,24.1160966 L31.7206214,24.1160966 L31.7206214,26.6147633 C31.7177072,29.5848366 29.3317848,31.9918233 26.3877035,31.9947633 L26.3877035,31.9947633 L5.33358148,31.9947633 C2.38950019,31.9918233 0.00357777491,29.5848366 0.000663562144,26.6147633 L0.000663562144,26.6147633 L0.000663562144,24.1160966 C-0.0161764136,23.521676 0.288548762,22.9649916 0.796205338,22.6627686 Z M15.8606425,1 C16.2309482,1 16.5846485,1.15502847 16.8373529,1.42809662 L16.8373529,1.42809662 L23.3135109,8.93209662 C23.6467354,9.31805283 23.7256211,9.86486335 23.5152704,10.3306293 C23.3049198,10.7963952 22.8441513,11.095163 22.3368006,11.0947633 L22.3368006,11.0947633 L18.7802003,11.0947633 C18.5977164,11.0947633 18.4497841,11.2440017 18.4497841,11.4280966 L18.4497841,11.4280966 L18.4497841,23.64543 C18.4497841,25.0879977 17.2905859,26.25743 15.8606425,26.25743 C14.4306991,26.25743 13.2715009,25.0879977 13.2715009,23.64543 L13.2715009,23.64543 L13.2715009,11.42943 C13.2715009,11.245335 13.1235686,11.0960966 12.9410847,11.0960966 L12.9410847,11.0960966 L9.38448443,11.0960966 C8.87922881,11.0946921 8.42100228,10.7967213 8.21109093,10.3330744 C8.00117958,9.86942749 8.07798709,9.32492956 8.40777406,8.93876329 L8.40777406,8.93876329 L14.8839321,1.42809662 C15.1366365,1.15502847 15.4903368,1 15.8606425,1 Z" id="Combined-Shape"></path>
+        </g>
+    </g>
+</svg>

package/src/js/index-fractal.js

@@ -1,11 +1,9 @@
 import switchStateScript from './fractal-scripts/switch-state';
 import notificationScript from './fractal-scripts/notification';
 import comboboxScript from './fractal-scripts/combobox';
-import fileUpload from '../components/inputs/file-upload/file-upload';
 
 document.addEventListener('DOMContentLoaded', () => {
   switchStateScript.init();
   notificationScript.init();
   comboboxScript.init();
-  fileUpload.init();
 });

package/src/js/index.js

@@ -12,10 +12,12 @@ import tabs from '../components/tabs/tabs';
 import accordion from '../components/accordion/accordion';
 import popovers from '../components/popover/popover';
 import modals from '../components/modal/modal';
+import fileUpload from '../components/inputs/file-upload/file-upload';
 
 document.addEventListener('DOMContentLoaded', () => {
   tabs.init();
   accordion.init();
   popovers.init();
   modals.init();
+  fileUpload.init();
 });

package/src/tokens/color.json

@@ -215,10 +215,7 @@
         "value" : "{color.neutral.black.value}"
       },
       "border": {
-        "color": {
-          "value" : "#5C5C5C"
-        },
-        "value" : "1px solid {color.input.border.color.value}"
+        "value" : "#949494"
       },
       "focus": {
         "value" : "#5092fd"