@madgex/design-system 2.7.2 → 3.0.2

package/dist/js/index.js.LICENSE.txt

@@ -0,0 +1,14 @@
+/*!
+ * @copyright Copyright (c) 2017 IcoMoon.io
+ * @license   Licensed under MIT license
+ *            See https://github.com/Keyamoon/svgxuse
+ * @version   1.2.6
+ */
+
+/*! (C) Andrea Giammarchi - @WebReflection - ISC Style License */
+
+/**
+  * vue-custom-element v3.3.0
+  * (c) 2021 Karol Fabjańczuk
+  * @license MIT
+  */

package/package.json

@@ -2,15 +2,15 @@
   "name": "@madgex/design-system",
   "author": "Madgex",
   "license": "UNLICENSED",
-  "version": "2.7.2",
+  "version": "3.0.2",
   "scripts": {
     "clean": "rimraf dist public tokens/build",
     "commit": "commit",
-    "semantic-release": "semantic-release --prepare && semantic-release --publish",
+    "semantic-release": "semantic-release",
     "tokens": "style-dictionary --config ./src/tokens/_config.js build",
     "dev": "cross-env NODE_ENV=development gulp dev",
     "debug": "node --inspect ./node_modules/.bin/gulp dev",
-    "build": "gulp build",
+    "build": "cross-env NODE_ENV=production gulp build",
     "build:icons": "svgo -f src/icons ./dist/assets/icons",
     "build:webpack": "NODE_ENV=production webpack",
     "build:fractal": "NODE_ENV=production fractal build",
@@ -30,9 +30,9 @@
     "@popperjs/core": "2.4.4",
     "css-loader": "^3.6.0",
     "document-register-element": "^1.14.3",
-    "postcss": "^7.0.32",
-    "postcss-cli": "^6.1.3",
-    "postcss-loader": "^3.0.0",
+    "postcss": "^8.3.5",
+    "postcss-cli": "^8.3.1",
+    "postcss-loader": "^6.1.0",
     "sass-loader": "^10.1.0",
     "style-dictionary": "^2.10.1",
     "style-loader": "^0.23.1",
@@ -48,37 +48,37 @@
     "@commitlint/cli": "^12.0.1",
     "@commitlint/config-conventional": "^12.0.1",
     "@commitlint/prompt-cli": "^12.0.1",
-    "@frctl/fractal": "^1.3.0",
-    "@frctl/mandelbrot": "^1.4.0",
-    "@frctl/nunjucks": "^2.0.2",
-    "@madgex/eslint-config-madgex": "^1.2.4",
+    "@frctl/fractal": "^1.5.8",
+    "@frctl/mandelbrot": "^1.9.2",
+    "@frctl/nunjucks": "^2.0.11",
+    "@madgex/eslint-config-madgex": "^1.4.1",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/test-utils": "^1.0.3",
-    "autoprefixer": "^9.8.5",
+    "autoprefixer": "^10.2.6",
     "axe-core": "^3.5.5",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^24.9.0",
     "babel-loader": "^8.1.0",
     "bubleify": "^1.2.1",
-    "commitizen": "^3.1.2",
-    "concurrently": "^4.1.2",
+    "commitizen": "^4.2.4",
+    "concurrently": "^6.2.0",
     "core-js": "^3.6.5",
     "cross-env": "^7.0.3",
-    "cssnano": "^4.1.10",
-    "cypress": "^3.6.1",
-    "cypress-axe": "^0.5.1",
+    "cssnano": "^5.0.6",
+    "cypress": "^6.9.1",
+    "cypress-axe": "^0.12.2",
     "cypress-commands": "^1.1.0",
     "cz-conventional-changelog": "^2.1.0",
     "del": "^5.1.0",
-    "eslint": "^6.8.0",
+    "eslint": "^7.29.0",
     "eslint-config-airbnb-base": "^14.2.0",
-    "eslint-config-prettier": "^6.11.0",
+    "eslint-config-prettier": "^7.2.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.2.2",
-    "file-loader": "^4.2.0",
+    "eslint-plugin-vue": "^7.12.1",
+    "file-loader": "^6.2.0",
     "flat": "^4.1.0",
     "globby": "^11.0.1",
     "gulp": "^4.0.2",
@@ -87,23 +87,23 @@
     "jsdom": "^15.2.0",
     "link-module-alias": "^1.2.0",
     "lint-staged": "^9.4.2",
-    "mini-css-extract-plugin": "^1.3.1",
-    "node-sass": "^5.0.0",
+    "mini-css-extract-plugin": "^1.6.2",
+    "node-sass": "^4.14.1",
     "nunjucks": "^3.2.2",
-    "prettier": "^1.19.1",
+    "prettier": "^2.2.1",
     "rimraf": "^2.7.1",
-    "semantic-release": "^15.13.24",
+    "semantic-release": "^17.4.4",
     "svg-sprite-loader": "^4.3.0",
-    "svgo": "^1.3.0",
-    "svgo-loader": "^2.2.1",
+    "svgo": "^1.3.2",
+    "svgo-loader": "^3.0.0",
     "svgstore": "^3.0.0-2",
     "vue-jest": "^3.0.6",
     "vue-loader": "^15.9.3",
     "vue-template-compiler": "^2.6.11",
-    "webpack": "^4.41.2",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.0",
-    "webpack-stream": "^5.2.1"
+    "webpack": "^5.0.0",
+    "webpack-cli": "^4.7.2",
+    "webpack-dev-server": "^3.11.2",
+    "webpack-stream": "^6.1.2"
   },
   "config": {
     "commitizen": {

package/src/components/inputs/_checkbox-elem/_template.njk

@@ -1,5 +1,4 @@
 {% from "../../icons/_macro.njk" import MdsIcon %}
-
 <input
   type="checkbox"
   class="mds-form-check__input"
@@ -19,5 +18,4 @@
         visuallyHiddenLabel: 'required'
       }) -}}
   {%- endif -%}{#
-#}</label>
-
+#}</label>

package/src/components/inputs/checkbox-list/_template.njk

@@ -95,7 +95,7 @@
       element: 'legend',
       labelText: params.labelText,
       hideLabel: params.hideLabel,
-      id: params.id,
+      inputId: params.id,
       optional: params.optional,
       tooltipMessage: params.tooltipMessage
     }) }}

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

@@ -28,12 +28,15 @@
   {%- endif -%}
 {% endset -%}
 
+{%- set labelId %}{{comboboxId}}-label{% 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 %}-{{comboboxId}}{% endif %}" data-type="{{ params.type }}">
     {{ MdsInputLabel({
       labelText: params.labelText,
       hideLabel: params.hideLabel,
-      id: comboboxId,
+      inputId: comboboxId,
+      id: labelId,
       optional: params.optional,
       tooltipMessage: params.tooltipMessage
     }) }}

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

@@ -21,7 +21,7 @@
       :ariaInvalid="ariaInvalid"
       v-model="inputValue"
     />
-    <ListBox :id="listBoxId" :hidden="listBoxHidden" :isLoading="isLoading">
+    <ListBox :id="listBoxId" :hidden="listBoxHidden" :isLoading="isLoading" :comboboxid="comboboxid">
       <template>
         <ListBoxOption
           v-for="(option, index) in visibleOptions"

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

@@ -1,5 +1,5 @@
 <template>
-  <ul class="mds-combobox__listbox" role="listbox" :hidden="hidden">
+  <ul class="mds-combobox__listbox" role="listbox" :aria-labelledby="`${comboboxid}-label`" :hidden="hidden">
     <li v-if="isLoading" class="mds-combobox-loading">
       <!-- Ideally we would pass this in as a slot in the custom element with MdsIcon, but something is borked
       with passing slots in Chrome https://github.com/karol-f/vue-custom-element/issues/162 -->
@@ -24,6 +24,10 @@ export default {
       type: Boolean,
       default: true,
     },
+    comboboxid: {
+      type: String,
+      required: true,
+    },
   },
   inject: ['iconPath'],
 };

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

@@ -29,7 +29,7 @@
   {{ MdsInputLabel({
       labelText: params.labelText,
       hideLabel: params.hideLabel,
-      id: params.id,
+      inputId: params.id,
       optional: params.optional,
       tooltipMessage: params.tooltipMessage
     }) }}

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

@@ -11,7 +11,7 @@
   {{ MdsInputLabel({
     labelText: params.labelText,
     hideLabel: params.hideLabel,
-    id: params.id,
+    inputId: params.id,
     optional: params.optional,
     tooltipMessage: params.tooltipMessage
   }) }}

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

@@ -1,4 +1,6 @@
 ## Parameters
+- `id`: The id for this component **optional**
+- `inputId`: The id for the component this is a label for **required**
 - `labelText`: The text for this label **required**,
 - `tooltipMessage`: Toggles a tooltip with this message to appear alongside the label **optional**
 - `optional`: Is the input optional, otherwise required **optional**,

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

@@ -11,7 +11,7 @@
     <span class="{{ classes }}">
 {%- else -%}
   <div class="mds-form-label{% if params.hideLabel %} mds-visually-hidden{% endif -%}">
-    <label class="{{ classes }}" for="{{ params.id }}">
+    <label class="{{ classes }}"{% if params.id %}id="{{ params.id }}"{% endif %} for="{{ params.inputId }}">
 {%- endif -%}
   {{ params.labelText | safe }}
   {%- if not params.optional -%}
@@ -30,7 +30,7 @@
 
 {%- if params.tooltipMessage -%}
   {{- MdsPopover({
-    id: params.id + '-tooltip',
+    id: params.inputId + '-tooltip',
     text: MdsIcon({
       iconName: 'question-mark',
       classes: 'mds-icon--info',

package/src/components/inputs/label/label.njk

@@ -6,6 +6,8 @@
     tooltipMessage: tooltipMessage,
     optional: optional,
     element: element,
-    hideLabel: hideLabel
+    hideLabel: hideLabel,
+    inputId: inputId,
+    id: id
   }) }}
 </div>

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

@@ -13,7 +13,7 @@
         element: 'legend',
         labelText: params.labelText,
         hideLabel: params.hideLabel,
-        id: params.id,
+        inputId: params.id,
         optional: params.optional,
         tooltipMessage: params.tooltipMessage
     }) }}

package/src/components/inputs/radio/radio.config.js

@@ -36,8 +36,8 @@ module.exports = {
           },
           {
             labelText: 'Radio Input 3',
-            value: '4-3',
-            id: 'radio-4-3',
+            value: '2-3',
+            id: 'radio-2-3',
           },
         ],
       },

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

@@ -17,7 +17,7 @@
   {{ MdsInputLabel({
     labelText: params.labelText,
     hideLabel: params.hideLabel,
-    id: params.id,
+    inputId: params.id,
     optional: params.optional,
     tooltipMessage: params.tooltipMessage
   }) }}

package/src/components/inputs/single-checkbox/_template.njk

@@ -17,19 +17,19 @@
   {% endif -%}
 {%- endset -%}
 
-{%- if params.selectedOptions === params.options[0].id -%}
+{%- if params.selectedOptions == params.options[0].value -%}
   {%- set isSelected = true -%}
 {%- endif -%}
 
 <div class="mds-form-element mds-form-element--checkbox{% if params.state %} mds-form-element--{{params.state}}{% endif %}{% if params.classes %} {{params.classes}}{% endif %}" data-test="checkbox{% if params.id %}-{{params.id}}{% endif %}">
-  {{ MdsInputMessages({
+{{- MdsInputMessages({
     id: params.id,
     helpText: params.helpText,
     validationError: params.validationError
-  }) }}
+  }) -}}
   <div class="mds-form-check-container">
     <div class="mds-form-check{% if option.classes %} {{option.classes}}{% endif %}">
-    {{ MdsCheckboxElem({
+    {{- MdsCheckboxElem({
       disabled: params.disabled,
       isSelected: isSelected,
       labelText: params.options[0].labelText,
@@ -38,7 +38,7 @@
       name: name,
       id: id,
       value: params.options[0].value
-    }) }}
+    }) -}}
     </div>
   </div>
-</div>
+</div>

package/src/components/inputs/single-checkbox/single-checkbox.config.js

@@ -24,7 +24,7 @@ module.exports = {
             id: 'out-out-checkbox',
           },
         ],
-        selectedOptions: 'out-out-checkbox',
+        selectedOptions: 'out-out',
       },
     },
     {

package/src/components/inputs/single-checkbox/single-checkbox.njk

@@ -1,7 +1,7 @@
 {% from "./inputs/single-checkbox/_macro.njk" import MdsSingleCheckbox %}
 
 <div class="mds-form-field">
-  {{ MdsSingleCheckbox({
+  {{- MdsSingleCheckbox({
     name: name,
     id: id,
     disabled: disabled,
@@ -14,5 +14,5 @@
     helpText: helpText,
     value: value,
     options: options
-  }) }}
+  }) -}}
 </div>

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

@@ -12,7 +12,7 @@
   {{ MdsInputLabel({
     labelText: params.labelText,
     hideLabel: params.hideLabel,
-    id: params.id,
+    inputId: params.id,
     optional: params.optional,
     tooltipMessage: params.tooltipMessage
   }) }}

package/src/tokens/color.json

@@ -20,19 +20,19 @@
       },
       "2": {
         "light": {
-          "value" : "#fb9950"
+          "value" : "#f9007b"
         },
         "lightest": {
-          "value" : "#fef0e6"
+          "value" : "#ffe5f2"
         },
         "dark": {
-          "value" : "#e06305"
+          "value" : "#930049"
         },
         "darkest": {
-          "value" : "#3c1a01"
+          "value" : "#3d001e"
         },
         "base": {
-          "value" : "#FA7C1E"
+          "value" : "#C60062"
         }
       },
       "3": {

package/tasks/css.js

@@ -44,7 +44,9 @@ async function cssWebpack(srcFilePath, distFilePath, hashFilePath = false, filen
                 {
                   loader: 'postcss-loader',
                   options: {
-                    plugins: [autoprefixer(), cssnano()],
+                    postcssOptions: {
+                      plugins: [autoprefixer(), cssnano()],
+                    },
                   },
                 },
                 {