@madgex/design-system 10.1.3 → 12.0.0

package/README.md

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

package/dist/assets/icons.json

@@ -1 +1 @@
-[{"name":"asterisk"},{"name":"calendar"},{"name":"cart"},{"name":"chevron-down"},{"name":"check"},{"name":"chevron-left"},{"name":"chevron-right"},{"name":"chevron-up"},{"name":"close"},{"name":"cross"},{"name":"doc-pdf"},{"name":"doc"},{"name":"email"},{"name":"external"},{"name":"flag"},{"name":"information"},{"name":"job"},{"name":"list-bullets"},{"name":"list-numbers"},{"name":"location-pin"},{"name":"menu"},{"name":"minus"},{"name":"plus-small"},{"name":"plus"},{"name":"question-mark"},{"name":"redo"},{"name":"search"},{"name":"settings"},{"name":"share"},{"name":"social-facebook"},{"name":"social-linkedin"},{"name":"social-pinterest"},{"name":"social-reddit"},{"name":"social-twitter"},{"name":"spinner"},{"name":"star-fill"},{"name":"star-outline"},{"name":"text-bold"},{"name":"text-italic"},{"name":"text-link"},{"name":"text-strike-through"},{"name":"text-underline"},{"name":"triangle-down"},{"name":"triangle-right"},{"name":"triangle-up"},{"name":"undo"},{"name":"upload"},{"name":"user"}]
+[{"name":"asterisk"},{"name":"calendar"},{"name":"cart"},{"name":"check"},{"name":"chevron-down"},{"name":"chevron-left"},{"name":"chevron-right"},{"name":"chevron-up"},{"name":"close"},{"name":"cross"},{"name":"doc-pdf"},{"name":"doc"},{"name":"email"},{"name":"external"},{"name":"flag"},{"name":"information"},{"name":"job"},{"name":"list-bullets"},{"name":"list-numbers"},{"name":"location-pin"},{"name":"menu"},{"name":"minus"},{"name":"plus-small"},{"name":"plus"},{"name":"question-mark"},{"name":"redo"},{"name":"search"},{"name":"settings"},{"name":"share"},{"name":"social-facebook"},{"name":"social-linkedin"},{"name":"social-pinterest"},{"name":"social-reddit"},{"name":"social-twitter"},{"name":"spinner"},{"name":"star-fill"},{"name":"star-outline"},{"name":"text-bold"},{"name":"text-italic"},{"name":"text-link"},{"name":"text-strike-through"},{"name":"text-underline"},{"name":"triangle-down"},{"name":"triangle-right"},{"name":"triangle-up"},{"name":"undo"},{"name":"upload"},{"name":"user"}]

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": "10.1.3",
+  "version": "12.0.0",
   "main": "dist/js/index.js",
   "exports": {
     ".": "./dist/js/index.js",

package/src/components/button/README.md

@@ -5,14 +5,9 @@ Use the [callable](https://mozilla.github.io/nunjucks/templating.html#call) synt
 
 ## Parameters
 
-- `value`: Value attribute on the button or input 
-- `name`: add `name` attribute
-- `element`: we're using `<button>` by default but you can change to be a link or an input
-- `href`: if `element` is a link then add the url using `href`
+- `href`: this sets the href and changes the button to an anchor element
 - `classes`: css classes to add on the button (for example `mds-width-full`)
-- `disabled`: disable button
 - `attributes`: you can add extra attributes by passing an object to the parameter. Example: `attributes: { attribute-name: 'attribute-value' }`
-- `type`: by default it will be `submit`
 
 ## Full width button
 

package/src/components/button/_template.njk

@@ -1,40 +1,11 @@
-{# Determine type of element to use, if not explicitly set -#}
+{% from "../../sub-components/attributes/macro.njk" import MdsAttributes %}
 
-{%- if params.element -%}
-  {% set element = params.element | lower %}
-{%- else -%}
-  {% if params.href %}
-    {% set element = 'a' %}
-  {% else %}
-    {% set element = 'button' %}
-  {% endif %}
-{%- endif -%}
-
-{#- Define common attributes that we can use across all element types #}
-
-{%- set commonAttributes %} class="mds-button
-{%- if params.classes %} {{ params.classes }}{% endif -%}
-{%- if params.disabled %} mds-button--disabled{% endif %}"
-{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %} data-test="button{% if params.id %}-{{params.id}}{% endif %}"
-{%- endset -%}
-
-{#- Define common attributes we can use for both button and input types #}
-
-{%- set buttonAttributes %}
-{% if params.name %} name="{{ params.name }}"{% endif %} type="{{ params.type if params.type else 'submit' }}"{% if params.disabled %} disabled="disabled" aria-disabled="true"{% endif %}{% endset %}
-
-{#- Actually create a button... or a link! #}
-
-{%- if element == 'a' %}
-  <a href="{{ params.href if params.href else '#' }}" draggable="false" {{- commonAttributes | safe }}>
-    {{ caller() }}
+{%- if params.href -%}
+  <a href="{{ params.href }}" class="mds-button {{ params.classes }}" {{- MdsAttributes(params.attributes) -}}>
+    {{- caller() -}}
   </a>
-
-{%- elseif element == 'button' %}
-  <button {%- if params.value %} value="{{ params.value }}"{% endif %} {{- buttonAttributes | safe }} {{- commonAttributes | safe }}>
-    {{ caller() }}
+{%- else -%}
+  <button class="mds-button {{ params.classes }}" {{- MdsAttributes(params.attributes) -}}>
+    {{- caller() -}}
   </button>
-
-{%- elseif element == 'input' %}
-  <input value="{{ params.value }}" {{- buttonAttributes | safe }} {{- commonAttributes | safe }}>
-{%- endif %}
+{%- endif -%}

package/src/components/button/button.config.js

@@ -3,62 +3,43 @@ module.exports = {
   status: 'wip',
   context: {
     items: [
-      { name: 'link-buttons', href: 'http://madgex.com', text: 'Link button 1', id: 'link-1' },
       {
-        name: 'link-buttons',
         href: 'http://madgex.com',
-        text: 'Link Plain button 2',
-        id: 'link-2',
-        classes: 'mds-button--plain',
+        text: 'Link button 1',
       },
       {
-        name: 'input-buttons',
-        element: 'input',
-        value: 'Input button 3',
-        id: 'link-3',
+        href: 'http://madgex.com',
+        text: 'Link Plain button 2',
+        classes: 'mds-button--plain',
       },
       {
-        name: 'plain-buttons',
         text: 'Plain button',
         classes: 'mds-button--plain',
-        id: 'plain',
       },
       {
-        name: 'small-buttons',
         text: 'Small button',
         classes: 'mds-button--small',
-        id: 'small',
       },
       {
-        name: 'large-buttons',
         text: 'Large button',
         classes: 'mds-button--large',
-        id: 'large',
       },
       {
-        name: 'icon-buttons',
-        useIcon: true,
-        classes: 'mds-button--icon',
-        id: 'icon',
-      },
-      {
-        name: 'full-width-example',
         text: 'Full width example',
         classes: 'mds-width-full mds-width-md-auto',
-        id: 'full',
       },
       {
-        name: 'neutral',
         text: 'Neutral',
         classes: 'mds-button--neutral',
-        id: 'neutral',
       },
       {
-        name: 'prevent double submit',
         text: 'Prevent double submit',
-        id: 'double-submit',
         classes: 'js-mds-button-double-submit',
       },
+      {
+        text: 'With attributes',
+        attributes: { attributed: 'yes', 'other-thing': 'also' },
+      },
     ],
   },
 };

package/src/components/button/button.njk

@@ -1,41 +1,14 @@
 
 {% from "./button/_macro.njk" import MdsButton %}
-{% from "./icons/_macro.njk" import MdsIcon %}
 
 {% for item in items %}
-
-{% if item.useIcon %}  
-  {%- set html -%}
-    {{ MdsIcon({
-      iconName: 'search',
-      classes: 'mds-icon--md',
-      visuallyHiddenLabel: 'Search icon'
-    }) }} 
-  {%- endset -%}
-  {% call MdsButton({
-    element: item.element,
-    id: item.id,
-    value: item.value,
-    href: item.href,
-    classes: item.classes,
-    attributes: item.attributes
-  }) -%}
-    <!-- example - in normal use `safe` is discouraged as it is dangerous, and not needed -->
-    {{ html | safe }}
-  {%- endcall %}
-{% else %}
   {% call MdsButton({
-    element: item.element,
-    id: item.id,
-    value: item.value,
     href: item.href,
     classes: item.classes,
     attributes: item.attributes
   }) -%}
     {{ item.text }}
   {%- endcall %}
-{% endif %}
-
 {% endfor %}
 
 

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/components/inputs/file-upload/_template.njk

@@ -80,19 +80,19 @@
         <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'
-                })
-              -}}
+              iconName: 'check',
+              classes: 'mds-icon--md',
+              hasContainer: true,
+              containerClasses: 'mds-icon-container--circle mds-icon-container--success mds-icon-container--before'
+              })
+            -}}
             <span class="mds-visually-hidden">{{ params.i18n.selectedFileText | default('Selected file:') }} </span>
             <span class="mds-file-upload__file-name">{% if params.value %}{{ params.value }}{% endif %}</span>
           </div>
           {% call MdsButton({
-                classes: 'mds-button--plain mds-button--small mds-file-upload__remove-button',
-                type: 'button'
-            }) -%}
+            classes: 'mds-button--plain mds-button--small mds-file-upload__remove-button',
+            attributes: { type: 'button' }
+          }) -%}
           {{- params.i18n.removeButtonText | default('Remove file') -}}
           {{-
               MdsIcon({

package/src/components/modal/_template.njk

@@ -9,7 +9,7 @@
 
       {% call MdsButton({
         classes: 'mds-button--plain js-mds-modal-close mds-modal-default-close-button',
-        type: 'button'
+        attributes: { type: 'button' }
       }) -%}
         {{ closeText }}
         {{ MdsIcon({

package/src/components/modal/long-modal-content.njk

@@ -13,7 +13,7 @@ Donec dapibus consectetur fermentum. Proin vel lacus elit. Nunc eu massa magna.
 Nullam faucibus pulvinar felis. Sed et tortor enim. Nulla luctus maximus mi aliquam tempor. Vivamus dignissim condimentum augue sed commodo. Donec a elementum risus, id interdum sem. Morbi malesuada tempor dapibus. Nam varius augue augue, vel pellentesque felis venenatis nec. Vivamus eget vulputate risus. Curabitur mollis, neque id tempus laoreet, nibh lectus aliquam felis, euismod varius mi turpis a sapien. Etiam ut mi a nisi faucibus egestas at eget ante.</p>
 <p>{% call MdsButton({
   classes: 'mds-button--neutral js-mds-modal-close',
-  type: 'button'
+  attributes: { type: 'button' }
 }) -%}
   Close
 {%- endcall %}

package/src/components/modal/modal-content.njk

@@ -5,7 +5,7 @@
 <p id="modal-description">I'm a modal window with <a href="#">a link</a>.</p>
 <p>{% call MdsButton({
   classes: 'mds-button--neutral js-mds-modal-close',
-  type: 'button'
+  attributes: { type: 'button' }
 }) -%}
   Close
 {%- endcall %}

package/src/components/section-title/02-title-with-action.njk

@@ -5,6 +5,5 @@
   headingTag: headingTag,
   actionText: actionText,
   actionHref: actionHref,
-  actionElement: actionElement,
   classes: classes
 }) }}

package/src/components/section-title/_template.njk

@@ -6,7 +6,6 @@
     <div class="mds-section-title__action">
       {%- if params.actionHref -%}
         {% call MdsButton({
-          element: params.actionElement,
           href: params.actionHref,
           classes: params.classes
         }) -%}

package/src/components/tabs/README.md

@@ -4,7 +4,9 @@
 - `classes`: add extra CSS classes to the component
 - `allHeadersTag`: the html tag to use for the panel header (h2 as default)
 - `allHeadersDisplay`: wheter the panel header should be always visible or not (default false)
-- `content`: is an array of objects containing [label, selected, id, content, headerText, linkCustomAttr] for each tab, the content for the panel can also be a custom component, headerText is text used for each panel header
+- `content`: is an array of objects containing [label, selected, id, content, headerText, linkCustomAttr] for each tab, the content for the panel can also be a custom component, headerText is 
+text used for each panel header
+- `content[{linkCustomAttr}]`: you can add extra attributes by passing an object to the parameter. Example: `attributes: { attribute-name: 'attribute-value' }`
 
 ## Variations
 Tabs have different style depending on the amount of items to display, if 2 tabs then it will always display tabs (except when js is disabled), if more than 2 then it will display a list of links for small devices and tabs for desktop

package/src/components/tabs/_template.njk

@@ -1,4 +1,5 @@
 {% from "./tab-id.njk" import TabId %}
+{% from "../../sub-components/attributes/macro.njk" import MdsAttributes %}
 
 {% if params.content %}
   {% set kebabName -%}
@@ -11,12 +12,12 @@
       mds-tabs--full-tabbed js-full-tabbed
     {%- endif -%}
   {%- endset %}
-  <div class="mds-tabs {{ tabVariation }}{%- if params.name %} mds-tabs--{{ kebabName }}{%- endif -%}{% if params.classes %} {{ params.classes }}{% endif %}" data-test="tabs-{{kebabName}}">
+  <div class="mds-tabs {{ tabVariation }}{%- if params.name %} mds-tabs--{{ kebabName }}{%- endif -%}{% if params.classes %} {{ params.classes }}{% endif %}">
     <ul class="mds-tabs__list">
       {%- for item in params.content -%}
         {%- set tabId = TabId(item, params, loop.index) -%}
         <li class="mds-tabs__list-item">
-          <a href="#{{ tabId }}" id="label-{{tabId}}" class="mds-tabs__tab{%- if item.selected %} mds-tabs__tab--selected{%- endif %} js-tabs-item" data-test="tabs-trigger{% if tabId %}-{{tabId}}{% endif %}" {% if item.linkCustomAttr %} {{item.linkCustomAttr | safe}}{% endif %}>
+          <a href="#{{ tabId }}" id="label-{{ tabId }}" class="mds-tabs__tab{%- if item.selected %} mds-tabs__tab--selected{%- endif %} js-tabs-item" {{ MdsAttributes(item.linkCustomAttr) }}>
             {{- item.label -}}
           </a>
         </li>
@@ -42,7 +43,7 @@
         {%- endif -%}
       {%- endset -%}
 
-      <section class="mds-tabs__panel{%- if not item.selected %} mds-tabs__panel--hidden {%- endif -%}{% if item.contentClasses %} {{ item.contentClasses }}{% endif %}" id="{{ tabId }}" data-test="tab-panel{% if tabId %}-{{tabId}}{% endif %}">
+      <section class="mds-tabs__panel{%- if not item.selected %} mds-tabs__panel--hidden {%- endif -%}{% if item.contentClasses %} {{ item.contentClasses }}{% endif %}" id="{{ tabId }}">
         {# id is used in js to apply aria-labelledby, don't forget to update both if needed #}
         <{{allHeadersTag}} class="mds-tabs__panel-header{{allHeadersDisplay}}">{{- headerText | safe -}}</{{allHeadersTag}}>
         <div class="mds-tabs__panel__content">

package/src/components/tabs/tabs.config.js

@@ -117,14 +117,14 @@ module.exports = {
             label: 'Plane',
             selected: true,
             headerText: 'Flying craft',
-            linkCustomAttr: 'data-metric="wings"',
+            linkCustomAttr: { 'data-metric': 'wings' },
             content:
               '<p>Inspect the anchor tags inside each tab to see the custom attributes that are added. One use case of this is allowing us to add click metrics.</p>',
           },
           {
             label: 'Helicopter',
             headerText: 'Flying craft',
-            linkCustomAttr: 'data-metric="rotor-blades"',
+            linkCustomAttr: { 'data-metric': 'rotor-blades' },
             content:
               '<p>Inspect the anchor tags inside each tab to see the custom attributes that are added. One use case of this is allowing us to add click metrics.</p>',
           },

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/layout/containers/02-branded-containers.njk

@@ -6,7 +6,6 @@
   <h3>Get job alerts</h3>
   <p>Create a job alert and receive personalised <a href="/some-link">job recommendations</a> straight to your inbox</p>
   {% call MdsButton({
-    element: 'a',
     href: '/somewhere'
   }) -%}
   Create alert

package/src/sub-components/attributes/macro.njk

@@ -0,0 +1,94 @@
+{#
+  Renders component attributes as string
+
+  * By default or using `optional: false`, attributes render as ` name="value"`
+  * Using `optional: true`, attributes with empty (`null`, `undefined` or `false`) values are omitted
+  * Using `optional: true`, attributes with `true` (boolean) values render `name` only without value
+
+  {@link https://developer.mozilla.org/en-US/docs/Glossary/Boolean/HTML}
+
+  @example
+  Output attribute ` aria-hidden="true"` when `true` (boolean) or `"true"` (string)
+
+  ```njk
+  MdsAttributes({
+    "aria-hidden": true
+  })
+  ```
+
+  @example
+  Output attribute ` aria-hidden="false"` when `false` (boolean) or `"false"` (string)
+
+  ```njk
+  MdsAttributes({
+    "aria-hidden": false
+  })
+  ```
+
+  @example
+  Output attribute ` hidden=""` when `null`, `undefined` or empty `""` (string)
+
+  ```njk
+  MdsAttributes({
+    "hidden": undefined
+  })
+  ```
+
+  @example
+  Output attribute ` hidden` as boolean attribute when optional and `true`
+
+  ```njk
+  MdsAttributes({
+    hidden: {
+      value: true,
+      optional: true
+    },
+  })
+  ```
+
+  @example
+  Output empty string when optional and `null`, `undefined` or `false`
+
+  ```njk
+  MdsAttributes({
+    hidden: {
+      value: undefined,
+      optional: true
+    },
+  })
+  ```
+
+  @private
+  @param {{ [attribute: string]: string | { value: string, optional?: boolean } } | string} attributes - Component attributes param
+#}
+{% macro MdsAttributes(attributes) -%}
+  {#- Default attributes output -#}
+  {% set attributesHtml = attributes if attributes is string else "" %}
+
+  {#- Append attribute name/value pairs -#}
+  {%- if attributes is mapping %}
+    {% for name, value in attributes %}
+      {#- Detect if this is a `safe` filtered value. Just pass the value through if so. -#}
+      {#- https://github.com/alphagov/govuk-frontend/issues/4937 -#}
+      {% if value is mapping and not [undefined, null].includes(value.val) and value.length %}
+        {% set value = value.val %}
+      {% endif %}
+
+      {#- Set default attribute options -#}
+      {% set options = value if value is mapping else {
+        value: value,
+        optional: false
+      } %}
+
+      {#- Output ` name` only (no value) for boolean attributes -#}
+      {% if options.optional === true and options.value === true %}
+        {% set attributesHtml = attributesHtml + " " + name | escape %}
+      {#- Skip optional empty attributes or output ` name="value"` pair by default -#}
+      {% elif (options.optional === true and not [undefined, null, false].includes(options.value)) or options.optional !== true %}
+        {% set attributesHtml = attributesHtml + " " + name | escape + '="' + options.value | escape + '"' %}
+      {% endif %}
+    {% endfor %}
+  {% endif -%}
+
+  {{- attributesHtml | safe -}}
+{%- endmacro %}

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;