@madgex/design-system 1.34.1 → 1.35.1

package/gulpfile.js

@@ -17,7 +17,7 @@ function watchFiles() {
   gulp.watch(['src/scss/core/**/*.scss', 'src/components/**/*.scss'], { awaitWriteFinish: true }, gulp.series(css));
   gulp.watch('src/tokens/**/*.json', gulp.series(tokens, css));
   gulp.watch('src/icons/**/*.svg', gulp.series(svgsprite, fractalBuild));
-  gulp.watch(['src/js/**/*', 'src/components/**/*.js'], gulp.series(jsbundle));
+  gulp.watch(['src/js/**/*', 'src/components/**/*.js', 'src/components/**/*.vue'], gulp.series(jsbundle));
 }
 
 const watch = gulp.parallel(watchFiles);

package/jest.config.js

@@ -1,6 +1,10 @@
 module.exports = {
   collectCoverage: true,
-  collectCoverageFrom: ['src/**/*.js', '!src/**/*.config.js'],
+  collectCoverageFrom: ['src/**/*.js', 'src/**/*.vue', '!src/**/*.config.js'],
   coverageReporters: ['cobertura', 'html'],
   testMatch: ['**/__tests__/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'],
+  transform: {
+    '^.+\\.js$': 'babel-jest',
+    '^.+\\.vue$': 'vue-jest',
+  },
 };

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "@madgex/design-system",
-  "version": "1.34.1",
+  "author": "Madgex",
+  "license": "UNLICENSED",
+  "version": "1.35.1",
   "scripts": {
     "clean": "rimraf dist public tokens/build",
     "commit": "commit",
     "semantic-release": "semantic-release --prepare && semantic-release --publish",
     "tokens": "style-dictionary --config ./src/tokens/_config.js build",
-    "start": "gulp dev",
+    "start": "cross-env NODE_ENV=development gulp dev",
     "build": "gulp build",
     "build:icons": "svgo -f src/icons ./dist/assets/icons",
     "build:webpack": "NODE_ENV=production webpack",
@@ -25,6 +27,7 @@
   "dependencies": {
     "@ctrl/tinycolor": "^2.5.4",
     "css-loader": "^3.2.0",
+    "document-register-element": "^1.14.3",
     "mini-css-extract-plugin": "^0.8.0",
     "node-sass": "^4.12.0",
     "popper.js": "^1.16.0",
@@ -34,7 +37,9 @@
     "sass-loader": "^7.3.1",
     "style-dictionary": "^2.8.2",
     "style-loader": "^0.23.1",
-    "svgxuse": "^1.2.6"
+    "svgxuse": "^1.2.6",
+    "vue": "^2.6.11",
+    "vue-custom-element": "^3.2.12"
   },
   "devDependencies": {
     "@babel/core": "^7.6.4",
@@ -47,21 +52,33 @@
     "@frctl/fractal": "^1.2.0",
     "@frctl/mandelbrot": "^1.2.1",
     "@frctl/nunjucks": "^2.0.1",
-    "@madgex/eslint-config-madgex": "^1.2.0",
+    "@madgex/eslint-config-madgex": "^1.2.3",
+    "@vue/eslint-config-prettier": "^6.0.0",
+    "@vue/test-utils": "^1.0.0-beta.31",
     "autoprefixer": "^9.6.5",
     "axe-core": "^3.4.0",
+    "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^24.9.0",
     "babel-loader": "^8.0.6",
     "bubleify": "^1.2.1",
     "commitizen": "^3.1.2",
     "concurrently": "^4.1.2",
     "core-js": "^3.3.2",
+    "cross-env": "^7.0.0",
     "cssnano": "^4.1.10",
     "cypress": "^3.6.1",
     "cypress-axe": "^0.5.1",
+    "cypress-commands": "^1.0.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-plugin-promise": "^4.2.1",
+    "eslint-plugin-vue": "^6.1.2",
     "file-loader": "^4.2.0",
     "flat": "^4.1.0",
     "gulp": "^4.0.2",
@@ -72,12 +89,16 @@
     "lint-staged": "^9.4.2",
     "mini-css-extract-plugin": "^0.8.0",
     "node-sass": "^4.12.0",
+    "prettier": "^1.19.1",
     "rimraf": "^2.7.1",
     "semantic-release": "^15.13.24",
     "svg-sprite-loader": "^4.1.6",
     "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-template-compiler": "^2.6.11",
     "webpack": "^4.41.2",
     "webpack-cli": "^3.3.9",
     "webpack-dev-server": "^3.8.2",

package/src/components/button/button.scss

@@ -12,6 +12,7 @@
   text-align: center;
   color: $mds-color-button-text-base;
   @extend .mds-font-body-copy;
+  font-family: $mds-font-family-button-base;
 
   @include mq($from: md) {
     padding: ($mds-size-baseline * 2) ($mds-size-baseline * 5);

package/src/components/combobox/README.md

@@ -0,0 +1,27 @@
+## Parameters - Nunjucks
+
+- `id`:  the id of your combobox
+- `name`: the name of the input for form submission
+- `resultMessage`: to be used as a prop for the Vue component below, will not be used if Javascript is not available
+- `labelText`: the text used in the label
+- `options`: a json object of key, value pairs e.g { 45: 'Orange' }. To be used when falling back to a native select if Javascript is not available
+- `fallbackTo`: the form element to use as a fallback. Should be either 'select' or 'input'
+- `placeholder`: the placeholder for your input (defaults to 'Please select')
+
+## Props - Vue component
+
+- `comboboxid`: the id of your combobox. Populated automatically from Nunjucks parameters
+- `labeltext`: the text used in the label. Populated automatically from Nunjucks parameters
+- `placeholder`: the placeholder for your input. Populated automatically from Nunjucks parameters
+- `resultmessage`: the visually hidden message to inform screenreader users when the options in the listbox have changed. Can either be a string which will be prefixed with the number of options, or a function which takes the number of options as its parameter and which should return a string. Defaults to 'options available', populated automatically from Nunjucks parameters if passed in
+- `name`: the name of the input for form submission. Will only be populated automatically if fallbackTo is 'input'
+- `options`: an array of options, which should be objects with a `label` and a `value`. The array should be provided externally by selecting the custom `<mds-combobox>` element and setting it as an attribute
+- `filterOptions`: whether or not the Vue component should internally filter the options array according to the search input (defaults to true)
+
+## Accessibility
+
+The Vue component is a [WAI-ARIA 1.0 combobox](https://www.w3.org/TR/wai-aria-practices/#combobox).
+
+NB. The AJAX demo above currently only works in browsers, not <= IE11. Fetch will be polyfilled or replaced in due course.
+
+When Javascript is not available, either a native combobox or native input will be available as a fallback.

package/src/components/combobox/_macro.njk

@@ -0,0 +1,3 @@
+{% macro MdsCombobox(params) %}
+    {%- include "./_template.njk" -%}
+{% endmacro %}

package/src/components/combobox/_template.njk

@@ -0,0 +1,45 @@
+{% from "../icons/_macro.njk" import MdsIcon %}
+
+{%- set comboboxId %}
+  {%- if params.id -%}
+    {{ params.id }}
+  {%- else -%}
+    {# 
+      if the id is missing it will be constructed using:
+      [component name]-[item labelText]-[index] 
+      e.g. period-next-week-2
+    #}
+    {%- if params.name -%}{{ params.name | lower | trim | replace(' ', '-')}}{%- else -%}
+    {{ params.labelText | lower | trim | replace(' ', '-') }}{%- endif -%}
+  {%- endif -%}
+{% endset -%}
+
+{%- set placeholder %}
+  {%- if params.placeholder -%}
+    {{ params.placeholder }}
+  {%- else -%}
+    Please select
+  {%- endif -%}
+{% endset -%}
+
+{%- if comboboxId -%}  
+  <div class="mds-combobox js-mds-combobox" data-combobox-id="{{ comboboxId }}" data-test="combobox">
+    <label class="mds-combobox__label mds-font-pica mds-combobox--fallback" id="{{ comboboxId }}-label" for="{{ comboboxId }}">{{ params.labelText }}</label>
+    {% if params.fallbackTo === 'select' and params.options %}
+      <select class="mds-combobox__select mds-combobox--fallback" id="select-{{ comboboxId }}" name="{{ params.name }}" aria-labelledby="{{ comboboxId }}-label" value="{{ params.defaultValue|default('') }}">
+        <option>{{ placeholder }}</option>
+        {%- if params.options -%}
+          {%- for value, option in params.options -%}
+            <option value="{{ value }}">{{ option }}</option>
+          {%- endfor -%}
+        {%- endif -%}
+      </select>
+    {% elseif params.fallbackTo === 'input' %}
+      <input class="mds-combobox__input mds-border mds-border-radius mds-combobox--fallback" autocomplete="off" name="{{ params.name }}" type="text"
+        id="{{ comboboxId }}" aria-labelledby="{{ comboboxId }}-label" value="{{ params.defaultValue|default('') }}" placeholder="{{ placeholder }}">
+    {% endif %}
+    {# Leave the custom element at the bottom so it has access to the above elements on render #}
+    <mds-combobox comboboxid="{{ comboboxId }}" labeltext="{{ params.labelText }}" placeholder="{{ placeholder }}"
+      {% if params.fallbackTo === 'input' %}name="{{ params.name }}"{% endif %} {% if params.resultMessage %}resultmessage="{{ params.resultMessage }}"{% endif %}></mds-combobox>
+  </div>
+{%- endif -%}

package/src/components/combobox/combobox.config.js

@@ -0,0 +1,30 @@
+module.exports = {
+  title: 'Combobox',
+  label: 'Combobox',
+  status: 'wip',
+  variants: [
+    {
+      name: 'default',
+      context: {
+        variantTitle: 'Hidden select',
+        name: 'distance',
+        id: 'distance-selection',
+        labelText: 'How far are you willing to travel?',
+        options: { 5: 'Within 5 miles', 10: 'Within 10 miles', 15: 'Within 15 miles', 20: 'Within 20 miles' },
+        fallbackTo: 'select',
+      },
+    },
+    {
+      name: 'AJAX autocomplete',
+      context: {
+        variantTitle: 'AJAX autocomplete',
+        name: 'keywords',
+        id: 'keywords-lookup',
+        resultMessage: 'suggestions',
+        labelText: 'Keywords:',
+        placeholder: 'eg. Web developer',
+        fallbackTo: 'input',
+      },
+    },
+  ],
+};

package/src/components/combobox/combobox.js

@@ -0,0 +1,20 @@
+import 'document-register-element/build/document-register-element';
+import Vue from 'vue';
+import vueCustomElement from 'vue-custom-element';
+import Combobox from './vue-components/Combobox.vue';
+
+Vue.use(vueCustomElement);
+Vue.config.devtools = process.env.NODE_ENV === 'development';
+
+Vue.config.keyCodes.end = 35;
+Vue.config.keyCodes.home = 36;
+
+Vue.customElement('mds-combobox', Combobox, {
+  connectedCallback() {
+    // If the custom element has loaded, clear up any fallback elements that could cause ID clashes or weirdness in form submission
+    const fallbackInput = this.parentElement.querySelector('input');
+    const fallbackLabel = this.parentElement.querySelector('label');
+    if (fallbackInput) fallbackInput.remove();
+    if (fallbackLabel) fallbackLabel.remove();
+  },
+});

package/src/components/combobox/combobox.njk

@@ -0,0 +1,14 @@
+{% from "./combobox/_macro.njk" import MdsCombobox %}
+
+<h3>{{ variantTitle }}</h3>
+{{ MdsCombobox({
+  id: id,
+  name: name,
+  resultMessage: resultMessage,
+  labelText: labelText,
+  options: options,
+  fallbackTo: fallbackTo,
+  placeholder: placeholder
+}) }}
+
+<br><br>

package/src/components/combobox/combobox.scss

@@ -0,0 +1,52 @@
+.mds-combobox {
+  display: block;
+  position: relative;
+  & .mds-combobox__input, .mds-combobox__select {
+    display: block;
+    width: 100%;
+    padding: $mds-size-baseline;
+    padding-right: $mds-size-baseline * 5;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    line-height: inherit;
+  }
+  & .mds-combobox__input-wrapper {
+    position: relative;
+  }
+  & .mds-icon {
+    position: absolute;
+    right: $mds-size-baseline * 5;
+    top: 50%;
+    pointer-events: none;
+    transform: translateY(-50%);
+    transition: transform 0.1s ease-in-out;
+  }
+  &.mds-combobox--active .mds-icon {
+    transform: translateY(-50%) rotate(90deg);
+  }
+  & .mds-combobox__listbox {
+    position: absolute;
+    left: 0;
+    right: 0;
+    max-height: 250px;
+    overflow-y: scroll;
+    z-index: 1;
+    .mds-combobox__option {
+      padding: $mds-size-baseline;
+      background-color: $mds-color-neutral-white;
+      &:last-child {
+        border-bottom: 0;
+      }
+      &.mds-combobox__option--focused, &:hover {
+        cursor: pointer;
+        background-color: $mds-color-neutral-lighter;
+      }
+    }
+  }
+}
+
+.js .mds-combobox .mds-combobox--fallback {
+  display: none;
+}
+

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

@@ -0,0 +1,210 @@
+<template>
+  <div
+    class="mds-combobox js-mds-combobox"
+    :class="{ 'mds-combobox--active': !listBoxHidden }"
+    @keydown.down="hiddenGuard(onKeyDown)"
+    @keydown.up="hiddenGuard(onKeyUp)"
+    @keydown.home="hiddenGuard(onKeyHome)"
+    @keydown.end="hiddenGuard(onKeyEnd)"
+    @keydown.esc="makeInactive"
+    @keydown.enter="chooseOption"
+  >
+    <label class="mds-combobox__label mds-font-pica" :id="labelId" :for="comboboxid">{{ labeltext }}</label>
+    <ComboboxInput
+      @focus="makeActive"
+      @blur="onInputBlur"
+      :id="comboboxid"
+      :name="name"
+      :placeholder="placeholder"
+      :aria-labelledby="labelId"
+      :aria-owns="listBoxId"
+      :aria-expanded="expanded"
+      :activeDescendent="selectedOptionId"
+      v-model="inputValue"
+    />
+    <ListBox :id="listBoxId" :aria-labelledby="labelId" :hidden="listBoxHidden">
+      <template>
+        <ListBoxOption
+          v-for="(option, index) in visibleOptions"
+          :key="index"
+          :option="option"
+          :id="`${optionId}-${index}`"
+          :focused="selectedOption === option"
+          @mousedown="clickOption(option)"
+        />
+      </template>
+    </ListBox>
+    <div aria-live="polite" role="status" class="mds-visually-hidden">
+      {{ resultCount }}
+    </div>
+  </div>
+</template>
+
+<script>
+import ComboboxInput from './ComboboxInput.vue';
+import ListBox from './ListBox.vue';
+import ListBoxOption from './ListBoxOption.vue';
+
+export default {
+  name: 'Combobox',
+  components: {
+    ComboboxInput,
+    ListBox,
+    ListBoxOption,
+  },
+  props: {
+    comboboxid: {
+      type: String,
+      required: true,
+    },
+    labeltext: {
+      type: String,
+      required: true,
+    },
+    placeholder: {
+      type: String,
+      default: 'Please combobox',
+    },
+    resultmessage: {
+      type: [String, Function],
+      default: 'options available',
+    },
+    name: {
+      type: [String, Boolean],
+      default: false,
+    },
+    options: {
+      type: Array,
+      default: () => [],
+    },
+    filterOptions: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      expanded: 'false',
+      selected: null,
+      chosen: null,
+      searchValue: '',
+    };
+  },
+  computed: {
+    inputValue: {
+      get() {
+        if (this.chosenOption) {
+          return this.chosenOption.label;
+        }
+        return this.searchValue;
+      },
+      set(event) {
+        // Reset any chosen option if user is typing again
+        this.chosenOption = null;
+        this.searchValue = event.target ? event.target.value : '';
+        this.makeActive();
+        this.$emit('search', this.searchValue);
+      },
+    },
+    selectedOption: {
+      get() {
+        return this.selected;
+      },
+      set(newOption) {
+        this.selected = newOption;
+      },
+    },
+    chosenOption: {
+      get() {
+        return this.chosen;
+      },
+      set(newOption) {
+        this.chosen = newOption;
+        this.selectedOption = newOption;
+        this.$emit('select-option', this.chosen);
+      },
+    },
+    visibleOptions() {
+      if (this.filterOptions) {
+        return this.options.filter((opt) => opt.label.toLowerCase().includes(this.searchValue.toLowerCase()));
+      }
+      return this.options;
+    },
+    labelId() {
+      return `${this.comboboxid}-label`;
+    },
+    listBoxId() {
+      return `${this.comboboxid}-listbox`;
+    },
+    optionId() {
+      return `${this.comboboxid}-option`;
+    },
+    selectedOptionId() {
+      const index = this.visibleOptions.indexOf(this.selectedOption);
+      if (index > -1) {
+        return `${this.optionId}-${index}`;
+      }
+      return false;
+    },
+    listBoxHidden() {
+      return this.expanded === 'false';
+    },
+    lastOptionIndex() {
+      return this.visibleOptions.length - 1;
+    },
+    resultCount() {
+      if (typeof this.resultmessage === 'function') {
+        return this.resultmessage(this.visibleOptions.length);
+      }
+      return `${this.visibleOptions.length} ${this.resultmessage}`;
+    },
+  },
+  methods: {
+    makeActive() {
+      this.expanded = 'true';
+    },
+    makeInactive() {
+      this.expanded = 'false';
+    },
+    clickOption(option = this.selectedOption) {
+      this.chosenOption = option;
+      this.makeInactive();
+    },
+    chooseOption() {
+      this.chosenOption = this.selectedOption;
+      this.makeInactive();
+    },
+    hiddenGuard(fn) {
+      if (this.listBoxHidden) return;
+      fn.call(this);
+    },
+    onInputBlur() {
+      this.makeInactive();
+    },
+    onKeyDown() {
+      if (this.selectedOption) {
+        const currentIndex = this.visibleOptions.indexOf(this.selectedOption);
+        const nextIndex = currentIndex === this.lastOptionIndex ? 0 : currentIndex + 1;
+        this.selectedOption = this.visibleOptions[nextIndex];
+      } else {
+        [this.selectedOption] = this.visibleOptions;
+      }
+    },
+    onKeyUp() {
+      if (this.selectedOption) {
+        const currentIndex = this.visibleOptions.indexOf(this.selectedOption);
+        const nextIndex = currentIndex === 0 ? this.lastOptionIndex : currentIndex - 1;
+        this.selectedOption = this.visibleOptions[nextIndex];
+      } else {
+        this.selectedOption = this.visibleOptions[this.lastOptionIndex];
+      }
+    },
+    onKeyHome() {
+      [this.selectedOption] = this.visibleOptions;
+    },
+    onKeyEnd() {
+      this.selectedOption = this.visibleOptions[this.lastOptionIndex];
+    },
+  },
+};
+</script>

package/src/components/combobox/vue-components/ComboboxInput.vue

@@ -0,0 +1,39 @@
+<template>
+  <div role="presentation" class="mds-combobox__input-wrapper">
+    <input
+      v-bind="$attrs"
+      class="mds-combobox__input mds-border mds-border-radius"
+      autocomplete="off"
+      type="text"
+      :value="value"
+      @input="$emit('input', $event)"
+      @focus="$emit('focus', $event)"
+      @blur="$emit('blur', $event)"
+      role="combobox"
+      aria-autocomplete="list"
+      :aria-activedescendant="activeDescendent"
+    />
+    <!-- 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 -->
+    <svg aria-hidden="true" focusable="false" class="mds-icon mds-icon--chevron-right mds-icon--after mds-icon--sm">
+      <use href="/assets/icons.svg#chevron-right" />
+    </svg>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ComboboxInput',
+  props: {
+    value: {
+      type: String,
+      default: '',
+    },
+    activeDescendent: {
+      type: [String, Boolean],
+      default: false,
+    },
+  },
+  inheritAttrs: false,
+};
+</script>

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

@@ -0,0 +1,17 @@
+<template>
+  <ul class="mds-combobox__listbox mds-border mds-border-top-none" role="listbox" :hidden="hidden">
+    <slot></slot>
+  </ul>
+</template>
+
+<script>
+export default {
+  name: 'ListBox',
+  props: {
+    hidden: {
+      type: Boolean,
+      default: true,
+    },
+  },
+};
+</script>

package/src/components/combobox/vue-components/ListBoxOption.vue

@@ -0,0 +1,27 @@
+<template>
+  <li
+    class="mds-combobox__option mds-border-bottom mds-font-pica"
+    role="option"
+    :class="{ 'mds-combobox__option--focused': focused }"
+    :aria-selected="focused.toString()"
+    @mousedown="$emit('mousedown', $event)"
+  >
+    {{ option.label }}
+  </li>
+</template>
+
+<script>
+export default {
+  name: 'ListBoxOption',
+  props: {
+    option: {
+      type: Object,
+      required: true,
+    },
+    focused: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>

package/src/js/fractal-scripts/combobox.js

@@ -0,0 +1,50 @@
+const containerClass = 'js-mds-combobox';
+const elementName = 'mds-combobox';
+
+function bindToSelect() {
+  const el = document.querySelector(`.${containerClass}[data-combobox-id="distance-selection"]`);
+  if (el) {
+    const selectInput = document.getElementById('select-distance-selection');
+    const options = Array.from(selectInput.querySelectorAll('option'));
+    const vueSelect = el.querySelector(elementName);
+    vueSelect.options = options.slice(1).map((opt) => ({ value: opt.value, label: opt.textContent }));
+    vueSelect.addEventListener('select-option', (event) => {
+      const [option] = event.detail;
+      if (!option) return;
+      selectInput.value = option.value;
+      selectInput.querySelector(`option[value="${option.value}"]`).setAttribute('selected', true);
+    });
+  }
+}
+
+function bindToApi() {
+  const el = document.querySelector(`.${containerClass}[data-combobox-id="keywords-lookup"]`);
+  if (el) {
+    const vueSelect = el.querySelector(elementName);
+    vueSelect.filterOptions = false;
+    vueSelect.addEventListener('search', (event) => {
+      const [searchValue] = event.detail;
+      if (searchValue) {
+        fetch(`https://api.datamuse.com/sug?s=${searchValue}`)
+          .then((res) => res.json())
+          .then((data) => {
+            const options = data.map(({ word }) => ({ value: word, label: word }));
+            vueSelect.options = options;
+            return options;
+          })
+          .catch(console.log);
+      } else {
+        vueSelect.options = [];
+      }
+    });
+  }
+}
+
+const combobox = {
+  init: () => {
+    bindToSelect();
+    bindToApi();
+  },
+};
+
+export default combobox;

package/src/js/index-fractal.js

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

package/src/js/index-polyfills.js

@@ -1,2 +1,3 @@
 import 'svgxuse';
 import './polyfills/closest';
+import './polyfills/remove';