@madgex/design-system 3.6.2 → 3.7.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@madgex/design-system",
   "author": "Madgex",
   "license": "UNLICENSED",
-  "version": "3.6.2",
+  "version": "3.7.0",
   "scripts": {
     "clean": "rimraf dist public tokens/build",
     "commit": "commit",
@@ -49,9 +49,9 @@
     "@commitlint/cli": "^12.1.4",
     "@commitlint/config-conventional": "^12.1.4",
     "@commitlint/prompt-cli": "^12.1.4",
-    "@frctl/fractal": "^1.5.8",
-    "@frctl/mandelbrot": "^1.9.2",
-    "@frctl/nunjucks": "^2.0.11",
+    "@frctl/fractal": "^1.5.13",
+    "@frctl/mandelbrot": "^1.10.1",
+    "@frctl/nunjucks": "^2.0.14",
     "@madgex/eslint-config-madgex": "^1.4.1",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/test-utils": "^1.2.1",

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

@@ -22,6 +22,7 @@ i18n: {
     'When autocomplete results are available, use up and down arrows to review and enter to select.', // help text for screen readers users to explain how to use the combobox
   resultsMessage: '{count} result available.', // announce number of results - note the use of `{count}` to get the number of results
   resultsMessage_plural: '{count} results available.', // announce number of results (plural) - note the use of `{count}` to get the number of results
+  clearInput: 'clear input', // text for screen readers explaining what the clear control in combobox does
 }
 ```
 
@@ -36,6 +37,12 @@ i18n: {
 - `filterOptions`: whether or not the Vue component should internally filter the options array according to the search input (defaults to true)
 - `i18n`: Text to translate/customise. Populated automatically from Nunjucks parameters
 
+## Events
+The following events are emiited.
+- `select-option`
+- `search`
+- `clear-all`
+
 ## Accessibility
 
 The Vue component is a [WAI-ARIA 1.0 combobox](https://www.w3.org/TR/wai-aria-practices/#combobox).

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

@@ -15,6 +15,19 @@ module.exports = {
         classes: 'im-a-custom-class',
       },
     },
+    {
+      name: 'Clears hidden field(s)',
+      context: {
+        variantTitle: 'Clear hidden',
+        name: 'Salary',
+        id: 'salary-selection',
+        optional: 'true',
+        labelText: 'Salary expectations?',
+        options: { 1: 'Up to £20k', 2: 'Up to £30k', 3: 'Up to £40k', 4: 'Up to £50k' },
+        value: 'Up to',
+        fallbackTo: 'select',
+      },
+    },
     {
       name: 'AJAX autocomplete',
       context: {
@@ -31,6 +44,7 @@ module.exports = {
             'When autocomplete results are available, use up and down arrows to review and enter to select. (test i18n)',
           resultsMessage: '{count} result available  (test i18n)',
           resultsMessage_plural: '{count} results available  (test i18n)',
+          clearInput: 'clear input (test i18n)',
         },
       },
     },

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

@@ -16,6 +16,15 @@
       type: type,
       i18n: i18n
     }) }}
+    {# 
+      The below only applies to one combobox example.
+      Demonstrates how the clear-all event (fired when combobox is cleared),
+      can be used to clear hidden form fields. 
+     #}
+    {% if id === 'salary-selection' %}
+      <p class="mds-margin-top-b3">A hidden input is cleared when clear-all event fires. Check <em>#salary-selection-hidden-input</em> in dev tools.</p>
+      <input type="hidden" id="salary-selection-hidden-input" />
+    {% endif %}
     <br><br>
   </div>
-</div>
+</div>

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

@@ -2,6 +2,18 @@
   display: block;
   position: relative;
 }
+.mds-combobox__clear {
+  position: absolute;
+  top: 0;
+  right: 0;
+  cursor: pointer;
+  &:focus {
+    @include inputFocusStyle();
+  }
+  & .mds-icon {
+    color: $mds-color-neutral-base;
+  }
+}
 .mds-combobox__listbox {
   border: $mds-size-border-width-base solid $mds-color-input-border;
   border-top: none;

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

@@ -10,6 +10,7 @@
     @keydown.enter.stop.prevent="chooseOption"
   >
     <ComboboxInput
+      ref="comboInput"
       @change="handleChange"
       @blur="onInputBlur"
       @focus="handleFocus"
@@ -23,6 +24,7 @@
       :aria-describedby="describedBy"
       v-model="inputValue"
     />
+    <ComboboxClear v-if="searchValue.length > 0" @clear="handleClear" />
     <ListBox :id="listBoxId" :hidden="listBoxHidden" :isLoading="isLoading" :comboboxid="comboboxid">
       <template>
         <ListBoxOption
@@ -43,6 +45,7 @@
 
 <script>
 import ComboboxInput from './ComboboxInput.vue';
+import ComboboxClear from './ComboboxClear.vue';
 import ListBox from './ListBox.vue';
 import ListBoxOption from './ListBoxOption.vue';
 
@@ -50,6 +53,7 @@ export default {
   name: 'Combobox',
   components: {
     ComboboxInput,
+    ComboboxClear,
     ListBox,
     ListBoxOption,
   },
@@ -104,6 +108,7 @@ export default {
     return {
       iconPath: this.iconpath,
       loadingText: this.i18nText.loadingText,
+      clearInput: this.i18nText.clearInput,
     };
   },
   computed: {
@@ -194,6 +199,7 @@ export default {
               'When autocomplete results are available, use up and down arrows to review and enter to select.',
             resultsMessage: '{count} result available',
             resultsMessage_plural: '{count} results available',
+            clearInput: 'clear input',
           };
     },
   },
@@ -205,6 +211,7 @@ export default {
       this.expanded = false;
     },
     handleChange() {
+      if (this.searchValue.length === 0) this.clearField();
       if (this.searchValue.length > 1) {
         this.makeActive();
         this.updateCount();
@@ -218,6 +225,15 @@ export default {
         this.updateCount();
       }
     },
+    handleClear() {
+      this.clearField();
+      this.$refs.comboInput.focusInput();
+    },
+    clearField() {
+      this.searchValue = '';
+      this.chosenOption = null;
+      this.$emit('clear-all');
+    },
     clickOption(option = this.selectedOption) {
       this.chosenOption = option;
       this.makeInactive();

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

@@ -0,0 +1,21 @@
+<template>
+  <button
+    class="mds-combobox__clear mds-button mds-button--plain"
+    type="button"
+    @click="$emit('clear', $event)"
+    @keydown.enter="$emit('clear', $event)"
+    :aria-label="clearInput"
+    :title="clearInput"
+  >
+    <svg aria-hidden="true" focusable="false" class="mds-icon mds-icon--close mds-icon--sm">
+      <use href="/assets/icons.svg#icon-close" />
+    </svg>
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'ComboboxClear',
+  inject: ['clearInput'],
+};
+</script>

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

@@ -1,6 +1,7 @@
 <template>
   <div role="presentation">
     <input
+      ref="inputEl"
       v-bind="$attrs"
       class="mds-form-control"
       autocomplete="off"
@@ -34,6 +35,11 @@ export default {
       default: 'false',
     },
   },
+  methods: {
+    focusInput() {
+      this.$refs.inputEl.focus();
+    },
+  },
   inheritAttrs: false,
 };
 </script>

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

@@ -1,6 +1,6 @@
 const elementName = 'mds-combobox';
 
-function bindToSelect() {
+function bindToLocationSelect() {
   const el = document.querySelector(`[data-combobox-id="distance-selection"]`);
 
   if (el) {
@@ -9,16 +9,41 @@ function bindToSelect() {
     const vueSelect = el.querySelector(elementName);
 
     vueSelect.options = options.slice(1).map((opt) => ({ value: opt.value, label: opt.textContent }));
-    // not sure it's needed ?
-    // 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 bindToSalarySelect() {
+  const el = document.querySelector(`[data-combobox-id="salary-selection"]`);
+
+  if (el) {
+    const selectInput = el.querySelector('select');
+    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 }));
+  }
+}
+
+function setSalaryHiddenField() {
+  const comboBoxEl = document.querySelector(`[data-combobox-id="salary-selection"] mds-combobox`);
+  const hiddenInputEl = document.querySelector('#salary-selection-hidden-input');
+
+  comboBoxEl.addEventListener('select-option', () => {
+    console.log('Setting #salary-selection-hidden-input..');
+    hiddenInputEl.value = hiddenInputEl.value === 'flip' ? 'flop' : 'flip';
+  });
+}
+
+function clearSalaryHiddenField() {
+  const comboBoxEl = document.querySelector(`[data-combobox-id="salary-selection"] mds-combobox`);
+  const hiddenInputEl = document.querySelector('#salary-selection-hidden-input');
+
+  comboBoxEl.addEventListener('clear-all', () => {
+    console.log('Clearing #salary-selection-hidden-input..');
+    hiddenInputEl.value = '';
+  });
+}
+
 function bindToApi() {
   const el = document.querySelector(`[data-combobox-id="keywords-lookup"]`);
 
@@ -48,7 +73,10 @@ function bindToApi() {
 
 const combobox = {
   init: () => {
-    bindToSelect();
+    bindToLocationSelect();
+    bindToSalarySelect();
+    setSalaryHiddenField();
+    clearSalaryHiddenField()
     bindToApi();
   },
 };