@madgex/design-system 11.0.0 → 12.0.0

package/README.md

@@ -137,3 +137,6 @@ await styleDictionary.buildPlatform('json-variables');
 
 await cleanTempFiles();
 ```
+
+\_
+\_

package/dist/js/index-fractal.js

@@ -1 +1 @@
-(()=>{"use strict";const e=e=>{e.classList.remove("mds-switch-state--default"),e.classList.add("mds-switch-state--inverse")},t=e=>{e.classList.remove("mds-switch-state--inverse"),e.classList.add("mds-switch-state--default")},o=()=>{Array.from(document.querySelectorAll(".js-mds-switch-state")).forEach(o=>{o.addEventListener("click",o=>{o.preventDefault(),o.stopPropagation();const s=o.currentTarget;s.classList.contains("mds-switch-state--default")?e(s):(s.classList.contains("mds-switch-state--inverse"),t(s))})})},s="mds-notification",n={init:(e,t,o=3e3)=>{const{body:c}=document;n.hide(c);const a=document.createElement("div");a.setAttribute("role","alert"),a.classList.add(s,"mds-message",`mds-message--${t}`),a.innerText=e,n.show(c,a),setTimeout(n.hide,o,c)},show:(e,t)=>{e.appendChild(t)},hide:e=>{Array.from(e.querySelectorAll(`.${s}`)).forEach(e=>{e.parentNode.removeChild(e)})}},c=n,a=()=>{Array.from(document.querySelectorAll(".js-notification-example")).forEach(e=>{e.addEventListener("click",e=>{e.preventDefault(),e.stopPropagation();const t=e.currentTarget,o=t.innerText,{messageType:s}=t.dataset;c.init(o,s)})})},i="mds-combobox",l=()=>{!function(){const e=document.querySelector('[data-combobox-id="distance-selection"]');if(e){const t=e.querySelector("select"),o=Array.from(t.querySelectorAll("option"));e.querySelector(i).options=o.slice(1).map(e=>({value:e.value,label:e.textContent}))}}(),function(){const e=document.querySelector('[data-combobox-id="salary-selection"]');if(e){const t=e.querySelector("select"),o=Array.from(t.querySelectorAll("option"));e.querySelector(i).options=o.slice(1).map(e=>({value:e.value,label:e.textContent}))}}(),function(){const e=document.querySelector('[data-combobox-id="salary-selection"] mds-combobox'),t=document.querySelector("#salary-selection-hidden-input");e&&t&&e.addEventListener("select-option",()=>{console.log("Setting #salary-selection-hidden-input.."),t.value="flip"===t.value?"flop":"flip"})}(),function(){const e=document.querySelector('[data-combobox-id="salary-selection"] mds-combobox'),t=document.querySelector("#salary-selection-hidden-input");e&&t&&e.addEventListener("clear-all",()=>{console.log("Clearing #salary-selection-hidden-input.."),t.value=""})}(),function(){const e=document.querySelector('[data-combobox-id="keywords-lookup"]');if(e){const t=e.querySelector(i);t.filterOptions=!1,t.addEventListener("search",e=>{const[o]=e.detail;o&&o.length>2?fetch(`https://api.datamuse.com/sug?s=${o}`).then(e=>e.json()).then(e=>{const o=e.map(({word:e})=>({value:e,label:e}));return t.options=o,o}).catch(console.log):t.options=[]})}}()};document.addEventListener("DOMContentLoaded",()=>{o(),a(),setTimeout(()=>{l()},1e3)})})();
+(()=>{"use strict";const e=e=>{e.classList.remove("mds-switch-state--default"),e.classList.add("mds-switch-state--inverse")},t=e=>{e.classList.remove("mds-switch-state--inverse"),e.classList.add("mds-switch-state--default")},s=()=>{Array.from(document.querySelectorAll(".js-mds-switch-state")).forEach(s=>{s.addEventListener("click",s=>{s.preventDefault(),s.stopPropagation();const a=s.currentTarget;a.classList.contains("mds-switch-state--default")?e(a):(a.classList.contains("mds-switch-state--inverse"),t(a))})})},a="mds-notification",i={init:(e,t,s=3e3)=>{const{body:r}=document;i.hide(r);const n=document.createElement("div");n.setAttribute("role","alert"),n.classList.add(a,"mds-message",`mds-message--${t}`),n.innerText=e,i.show(r,n),setTimeout(i.hide,s,r)},show:(e,t)=>{e.appendChild(t)},hide:e=>{Array.from(e.querySelectorAll(`.${a}`)).forEach(e=>{e.parentNode.removeChild(e)})}},r=i,n=()=>{Array.from(document.querySelectorAll(".js-notification-example")).forEach(e=>{e.addEventListener("click",e=>{e.preventDefault(),e.stopPropagation();const t=e.currentTarget,s=t.innerText,{messageType:a}=t.dataset;r.init(s,a)})})};document.addEventListener("DOMContentLoaded",()=>{s(),n()})})();

package/package.json

@@ -2,7 +2,7 @@
   "name": "@madgex/design-system",
   "author": "Madgex",
   "license": "UNLICENSED",
-  "version": "11.0.0",
+  "version": "12.0.0",
   "main": "dist/js/index.js",
   "exports": {
     ".": "./dist/js/index.js",

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

@@ -3,7 +3,11 @@
 - `id`: the id of your combobox
 - `name`: the name of the input for form submission. Uses ID unless specified - _optional_
 - `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
+- `options`: a JSON array, e.g `[{ label: 'Orange', value: 45 }]`. Populates both mds-combobox, and fallback select options
+- `apiUrl`: when populated, `options` is ignored and data is fetching from an API URL instead
+- `apiQueryKey`: the query paramter name added to `apiUrl` - _optional_ (defaults to 'searchText')
+- `apiOptionsPath`: where to grab an array of options on api response, e.g. `data.options` would be an array of options. _optional_ . leave undefined to use root api response as array
+- `optionLabelPath`: where to grab the visual label propertly from the option object e.g. 'label' or 'title' or 'nested.object.label' _optional_ (defaults to `label`)
 - `value`: a default selected value for the input - _optional_
 - `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')
@@ -29,13 +33,31 @@ i18n: {
 }
 ```
 
-## Events
+## Updating hidden input values
 
-The following events are emiited.
+When a user selects an option, any inputs passed inside MdsCombobox with the data attribute `data-key` will be populated with values from that chosen option.
 
-- `select-option`
-- `search`
-- `clear-all`
+### Example 1
+
+Populate the hidden input with the `value` property from the selected option `{label:"my label", value: 56}`.
+
+```njk
+{\% call MdsCombobox({...}) \%}
+<input type="hidden" data-key="value" /> <!-- value will be 56 -->
+{\% endcall \%}
+```
+
+### Example 2
+
+Populate the hidden input with the `nested.thing` property from the selected option `{label:"my label", nested: {thing: 989 }, lat: "56.202", lon: '0.142'}`.
+
+```njk
+{\% call MdsCombobox({...}) \%}
+<input type="hidden" data-key="nested.thing" /> <!-- value will be 989 -->
+<input type="hidden" data-key="lat" /> <!-- value will be 56.202 -->
+<input type="hidden" data-key="lon" /> <!-- value will be 0.142 -->
+{\% endcall \%}
+```
 
 ## Accessibility
 

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

@@ -52,47 +52,58 @@
       validationErrorId: validationErrorId,
       validationError: params.validationError
     }) }}
-    <div class="mds-form-element__fallback">
-      {% if params.fallbackTo === 'select' and params.options %}
-        <select
-          class="mds-form-control"
-          id="{{ comboboxId }}"
-          name="{{ comboboxName }}"
-          value="{{ params.defaultValue|default('') }}"
-          {% if ariaDescribedBy %}aria-describedby="{{ariaDescribedBy}}"{% endif %}
-        >
-          <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-form-control"
-          type="text"
-          name="{{ comboboxName }}"
-          autocomplete="off"
-          id="{{ comboboxId }}"
-          value="{{ params.value|default('') }}"
-          placeholder="{{ placeholder }}"
-          {% if params.validationError %}aria-invalid="true"{% endif %}
-          {% if ariaDescribedBy %}aria-describedby="{{ariaDescribedBy}}"{% endif %}
-          />
-      {% endif %}
-    </div>
     {# Leave the custom element at the bottom so it has access to the above elements on render #}
     <mds-combobox
       comboboxid="{{ comboboxId }}"
       placeholder="{{ params.placeholder }}"
       iconpath="{{ defaultIconPath }}"
+      {% if params.options.length %}options="{{params.options | dump}}"{% endif %}
+      {% if params.apiUrl %}api-url="{{params.apiUrl}}"{% endif%}
+      {% if params.apiQueryKey %}api-query-key="{{params.apiQueryKey}}"{% endif%}
+      {% if params.apiOptionsPath %}api-options-path="{{params.apiOptionsPath}}"{% endif%}
+      {% if params.optionLabelPath %}option-label-path="{{params.optionLabelPath}}"{% endif%}
       i18n="{{ params.i18n | dump }}"
       data-aria-invalid="{{ params.validationError }}"
       {% if params.minSearchCharacters %}min-search-characters="{{ params.minSearchCharacters }}"{% endif %}
       {% if params.fallbackTo === 'input' %}name="{{ comboboxName }}"{% endif %}
       {% if params.value %}value="{{ params.value }}"{% endif %}
       {% if ariaDescribedBy %} describedby-id="{{ariaDescribedBy}}"{% endif -%}
-      ></mds-combobox>
+      >
+        <div class="mds-form-element__fallback">
+          {% if params.fallbackTo === 'select' and params.options %}
+            <select
+              class="mds-form-control"
+              id="{{ comboboxId }}"
+              name="{{ comboboxName }}"
+              value="{{ params.defaultValue|default('') }}"
+              {% if ariaDescribedBy %}aria-describedby="{{ariaDescribedBy}}"{% endif %}
+            >
+              <option>{{ placeholder }}</option>
+              {%- if params.options -%}
+                {%- for option in params.options -%}
+                  <option value="{{ option.value }}">{{ option.label }}</option>
+                {%- endfor -%}
+              {%- endif -%}
+            </select>
+          {% elseif params.fallbackTo === 'input' %}
+            <input
+              class="mds-form-control"
+              type="text"
+              name="{{ comboboxName }}"
+              autocomplete="off"
+              id="{{ comboboxId }}"
+              value="{{ params.value|default('') }}"
+              placeholder="{{ placeholder }}"
+              {% if params.validationError %}aria-invalid="true"{% endif %}
+              {% if ariaDescribedBy %}aria-describedby="{{ariaDescribedBy}}"{% endif %}
+              />
+          {% endif %}
+        </div>
+        {% if caller %}
+          <span slot="target-inputs">
+             {{- caller() -}}
+          </span>
+        {% endif %}
+      </mds-combobox>
   </div>
 {%- endif -%}

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

@@ -1,5 +1,9 @@
-const optionsSalary = { ...new Array(20).fill().map((_, index) => `Up to £${10 + index * 10}k`) };
-const optionsDistance = { ...new Array(20).fill().map((_, index) => `Within ${5 * (1 + index)} miles`) };
+const optionsSalary = new Array(20)
+  .fill()
+  .map((_, index) => ({ label: `Up to £${10 + index * 10}k`, value: 10 + index * 10 }));
+const optionsDistance = new Array(20)
+  .fill()
+  .map((_, index) => ({ label: `Within ${5 * (1 + index)} miles`, value: 5 * (1 + index) }));
 
 module.exports = {
   title: 'Combobox',
@@ -58,6 +62,10 @@ module.exports = {
         placeholder: 'eg. Web developer',
         fallbackTo: 'input',
         minSearchCharacters: 3,
+        apiUrl: 'https://api.datamuse.com/sug',
+        apiQueryKey: 's',
+        apiOptionsPath: undefined,
+        optionLabelPath: 'word',
         i18n: {
           requiredIcon: 'Required (test i18n)',
           loadingText: 'Loading  (test i18n)',
@@ -82,6 +90,10 @@ module.exports = {
         vModel: 'Initial Value',
         fallbackTo: 'input',
         minSearchCharacters: 3,
+        apiUrl: 'https://api.datamuse.com/sug',
+        apiQueryKey: 's',
+        apiOptionsPath: undefined,
+        optionLabelPath: 'word',
       },
     },
     {

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

@@ -1,11 +1,11 @@
 {% from "./inputs/combobox/_macro.njk" import MdsCombobox %}
 
 {% if not multiple %}
-
 <div class="mds-grid-row">
   <div class="mds-grid-col-6">
     <h3>{{ variantTitle }}</h3>
-    {{ MdsCombobox({
+
+    {% call MdsCombobox({
       id: id,
       name: name,
       labelText: labelText,
@@ -19,17 +19,27 @@
       validationError: validationError,
       helpText: helpText,
       i18n: i18n,
-      minSearchCharacters: minSearchCharacters
-    }) }}
-    {# 
-      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. 
-     #}
+      minSearchCharacters: minSearchCharacters,
+      apiUrl: apiUrl,
+      apiQueryKey: apiQueryKey,
+      apiOptionsPath: apiOptionsPath,
+      optionLabelPath: optionLabelPath
+    }) %}
+      {# 
+        The below demonstrates how a target input value can be set on option selection, or on clear of combobox
+      #}
+      {% if id === 'salary-selection' %}
+        <input disabled data-key="value" placeholder="normally hidden target" style="position:absolute; left: 100%; top: 0;" />
+      {% endif %}
+      {% if id === 'keywords-lookup' or id === 'keywords-lookup-prefilled' %}
+        <input disabled data-key="word" placeholder="normally hidden target" style="position:absolute; left: 100%; top: 0;" />
+      {% endif %}
+    {% endcall %}
+
     {% 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" />
+      <p class="mds-margin-top-b3">A hidden input is cleared when combobox is cleared.
     {% endif %}
+
     <br><br>
   </div>
 </div>

package/src/js/index-fractal.js

@@ -1,11 +1,7 @@
 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();
-  setTimeout(() => {
-    comboboxScript.init();
-  }, 1000);
 });

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

@@ -1,88 +0,0 @@
-const elementName = 'mds-combobox';
-
-function bindToLocationSelect() {
-  const el = document.querySelector(`[data-combobox-id="distance-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 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');
-
-  if (comboBoxEl && hiddenInputEl) {
-    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');
-
-  if (comboBoxEl && hiddenInputEl) {
-    comboBoxEl.addEventListener('clear-all', () => {
-      console.log('Clearing #salary-selection-hidden-input..');
-      hiddenInputEl.value = '';
-    });
-  }
-}
-
-function bindToApi() {
-  const el = document.querySelector(`[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 && searchValue.length > 2) {
-        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: () => {
-    bindToLocationSelect();
-    bindToSalarySelect();
-    setSalaryHiddenField();
-    clearSalaryHiddenField();
-    bindToApi();
-  },
-};
-
-export default combobox;