@madgex/design-system 14.3.1 → 14.4.1

package/src/components/icons/icons.njk

@@ -1,161 +1 @@
-{# NUNJUCKS VERSION #}
-
-{% from "./icons/_macro.njk" import MdsIcon %}
-
-<h2>Different sizes</h2>
-
-<p>{{ MdsIcon({
-  iconName: 'star-fill',
-  classes: 'mds-icon--sm',
-  visuallyHiddenLabel: 'Shortlisted'
-}) }} : small (16px)</p>
-<p>{{ MdsIcon({
-  iconName: 'star-fill',
-  classes: 'mds-icon--md'
-}) }} : medium (24px)</p>
-<p>{{ MdsIcon({
-  iconName: 'star-fill',
-  classes: 'mds-icon--lg'
-}) }} : large (32px)</p>
-<p>{{ MdsIcon({
-  iconName: 'star-fill',
-  classes: 'mds-icon--xl'
-}) }} : extra large (48px)</p>
-<p>{{ MdsIcon({
-  iconName: 'star-fill',
-  classes: 'mds-icon--xxl'
-}) }} : extra extra large (72px)</p>
-
-<br><hr><br>
-
-<h2>Icon with text</h2>
-
-<p>{{- MdsIcon({
-  iconName: 'email',
-  classes: 'mds-icon--before'
-}) -}}Email me</p>
-
-<p><a href="#">Apply{{- MdsIcon({
-  iconName: 'chevron-right',
-  classes: 'mds-icon--after'
-}) -}}</a></p>
-
-<div>
-  <span>Share this job</span>
-  <ul class="mds-list mds-list--inline mds-display-inline-block">
-    <li class="mds-list__item">
-      <a href="#">
-      {{- MdsIcon({
-        iconName: 'social-facebook',
-        visuallyHiddenLabel: 'Facebook'
-      }) -}}
-      </a>
-    </li>
-    <li class="mds-list__item">
-      <a href="#">
-      {{- MdsIcon({
-        iconName: 'social-twitter',
-        visuallyHiddenLabel: 'Twitter'
-      }) -}}
-      </a>
-    </li>
-    <li class="mds-list__item">
-      <a href="#">
-      {{- MdsIcon({
-        iconName: 'social-linkedin',
-        visuallyHiddenLabel: 'LinkedIn'
-      }) -}}
-      </a>
-    </li>
-    <li class="mds-list__item">
-      <a href="#">
-      {{- MdsIcon({
-        iconName: 'social-pinterest',
-        visuallyHiddenLabel: 'Pinterest'
-      }) -}}
-      </a>
-    </li>
-    <li class="mds-list__item">
-      <a href="#">
-      {{- MdsIcon({
-        iconName: 'social-reddit',
-        visuallyHiddenLabel: 'Reddit'
-      }) -}}
-      </a>
-    </li>
-  </ul>
-</div>
-
-<br><hr><br>
-
-<h2>Spinner</h2>
-{{- MdsIcon({
-  iconName: 'spinner',
-  visuallyHiddenLabel: 'Loading...'
-}) -}}
-
-<br><hr><br>
-
-<h2>Has container</h2>
-{{- MdsIcon({
-  iconName: 'cross',
-  visuallyHiddenLabel: 'Error',
-  classes: 'mds-icon--md',
-  hasContainer: true,
-  containerClasses: 'mds-icon-container--circle mds-icon-container--error'
-}) -}}
-
-<br><hr><br>
-
-<h2>Icons using inline SVG</h2>
-
-<div>
-  <span>Share this job</span>
-  <ul class="mds-list mds-list--inline mds-display-inline-block">
-    <li class="mds-list__item">
-      <a href="#">
-      {{- MdsIcon({
-        iconName: 'social-facebook',
-        visuallyHiddenLabel: 'Facebook',
-        path: ''
-      }) -}}
-      </a>
-    </li>
-    <li class="mds-list__item">
-      <a href="#">
-      {{- MdsIcon({
-        iconName: 'social-twitter',
-        visuallyHiddenLabel: 'Twitter',
-        path: ''
-      }) -}}
-      </a>
-    </li>
-    <li class="mds-list__item">
-      <a href="#">
-      {{- MdsIcon({
-        iconName: 'social-linkedin',
-        visuallyHiddenLabel: 'LinkedIn',
-        path: ''
-      }) -}}
-      </a>
-    </li>
-    <li class="mds-list__item">
-      <a href="#">
-      {{- MdsIcon({
-        iconName: 'social-pinterest',
-        visuallyHiddenLabel: 'Pinterest',
-        path: ''
-      }) -}}
-      </a>
-    </li>
-    <li class="mds-list__item">
-      <a href="#">
-      {{- MdsIcon({
-        iconName: 'social-reddit',
-        visuallyHiddenLabel: 'Reddit',
-        path: ''
-      }) -}}
-      </a>
-    </li>
-  </ul>
-</div>
+<a href="/storybook/" target="_top">Moved to Storybook</a>

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

@@ -4,6 +4,8 @@ This component provides autocomplete search functionality to select an option fr
 
 Options can be provided via `<option value="value">label</option>` children, or obtained from an API using the `apiUrl` parameter.
 
+MdsCombobox reports its values to a parent `<form>` wrapping it.
+
 ## Parameters - Nunjucks
 
 - `id`: the id of your combobox **required**
@@ -50,6 +52,12 @@ i18n: {
 
 MdsCombobox usage revolves around options provided by `<option value="">label</option>` child elements as available options and the initial value comes from `<option selected>` children, and optionally an API (`apiUrl` in use), and being in `multiple` mode via `params.multiple`.
 
+### What is reported to parent `<form>` element?
+
+- Selected value(s) will be reported to the parent `<form>` using the `name` given to MdsCombobox. Multiple may exist.
+- Search text (**not** the label of the selected option) will be reported to the parent `<form>` using the `name` given to MdsCombobox with `_search` as the suffix, e.g. `${name}_search`. Only a single instance will exist
+- Fallback will be reported to the parent `<form>` using the `name` given to MdsCombobox with `_fallback` as the suffix, e.g. `${name}_fallback`. Only a single instance will exist
+
 ## Fallback
 
 When JavaScript is unavailable, the combobox will gracefully degrade to a native form element. Use the `fallbackTo` parameter to specify which fallback element to use: either a native `select` dropdown or a text `input`.
@@ -65,6 +73,7 @@ Both fallback elements share the same `id` as the combobox to ensure the label r
 ### Example - Single mode - no API - no option selected
 
 ```njk
+<form>
 {\% call MdsCombobox({
   id:'my-id',
   name: 'my-combo',
@@ -73,12 +82,13 @@ Both fallback elements share the same `id` as the combobox to ensure the label r
   <option value="value-1">My label 1</option>
   <option value="value-2">My label 2</option>
 {\% endcall \%}
-
+</form>
 ```
 
 #### with pre-selected value
 
 ```njk
+<form>
 {\% call MdsCombobox({
   id:'my-id',
   name: 'my-combo',
@@ -89,12 +99,14 @@ Both fallback elements share the same `id` as the combobox to ensure the label r
   <option value="value-1">My label 1</option>
   <option value="value-2" selected>My label 2</option>
 {\% endcall \%}
+</form>
 
 ```
 
 ### Example - Multiple mode - no API
 
 ```njk
+<form>
 {\% call MdsCombobox({
   id:'my-id',
   name: 'my-combo',
@@ -104,6 +116,7 @@ Both fallback elements share the same `id` as the combobox to ensure the label r
   <option value="value-1">My label 1</option>
   <option value="value-2">My label 2</option>
 {\% endcall \%}
+</form>
 
 ```
 
@@ -113,6 +126,7 @@ API response options have a custom shape with `word` and `score` properties,
 like so `[{word: 'something', score: 12},...]`. It also used `?keyword` for the query param on the request.
 
 ```njk
+<form>
 {\% call MdsCombobox({
   id:'my-id',
   name: 'my-combo',
@@ -123,12 +137,14 @@ like so `[{word: 'something', score: 12},...]`. It also used `?keyword` for the
   apiOptionValuePath: 'score'
 }) \%}
 {\% endcall \%}
+</form>
 
 ```
 
 #### with prefilled value
 
 ```njk
+<form>
 {\% call MdsCombobox({
   id:'my-id',
   name: 'my-combo',
@@ -141,6 +157,7 @@ like so `[{word: 'something', score: 12},...]`. It also used `?keyword` for the
 {# we can render selected options on the server even when using API #}
   <option value="value-2" selected>My label 2</option>
 {\% endcall \%}
+</form>
 
 ```
 
@@ -149,6 +166,7 @@ like so `[{word: 'something', score: 12},...]`. It also used `?keyword` for the
 API response had a root object property called `data`, like so `{data:[{label: 'something', value: 12},...]}`.
 
 ```njk
+<form>
 {\% call MdsCombobox({
   id:'my-id',
   name: 'my-combo',
@@ -158,6 +176,7 @@ API response had a root object property called `data`, like so `{data:[{label: '
   multiple: true
 }) \%}
 {\% endcall \%}
+</form>
 
 ```
 
@@ -166,6 +185,7 @@ options:
 #### with prefilled value
 
 ```njk
+<form>
 {\% call MdsCombobox({
   id:'my-id',
   name: 'my-combo',
@@ -178,6 +198,7 @@ options:
   <option value="value-1" selected>My label 1</option>
   <option value="value-2" selected>My label 2</option>
 {\% endcall \%}
+</form>
 
 ```
 

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

@@ -1,8 +1,8 @@
 {% from "./inputs/combobox/_macro.njk" import MdsCombobox %}
 
-<form class="mds-grid-row">
-  <div class="mds-grid-col-6 mds-margin-bottom-b10">
     <h3>{{ variantTitle }}</h3>
+<form class="mds-grid-row mds-border-bottom mds-margin-bottom-b10 mds-padding-bottom-b10" id="{{name}}_demo-form">
+  <div class="mds-grid-col-6 ">
 
     {% call MdsCombobox({
       id: id,
@@ -29,6 +29,30 @@
     {# this will be `<option>` elements #}
     {{ content | safe }}
     {% endcall %}
+
+  </div>
+  <div class="mds-grid-col-6 mds-font-s-1 mds-highlighted-container mds-padding-b1">
+      <span>Visualised &lt;form&gt; FormData</span>
+      <br><ul class="mds-list mds-list--bullet" id="{{name}}_demo-form__visual"></ul>
   </div>
 </form>
 
+{# Cheeky visualise FormData #}
+<script type="module">
+  const form = document.querySelector('#{{name}}_demo-form');
+  
+  setTimeout(() => {
+  const combobox = document.querySelector('[name={{name}}]');
+  combobox.addEventListener('change', updateFormDataVisual);
+    const comboboxSearch = document.querySelector('[name={{name}}_search]');
+    comboboxSearch.addEventListener('input', updateFormDataVisual);
+  }, 500)
+  updateFormDataVisual();
+  function updateFormDataVisual() {
+    setTimeout(()=> {
+    const formVisual = document.querySelector('#{{name}}_demo-form__visual');
+    const text = Array.from(new FormData(form).entries()).map(([key,val]) => `<li class="mds-list__item"><strong>${key}</strong>=${val}</li>`).join('');
+    formVisual.innerHTML = text;
+    }, 500)
+  }
+</script>

package/src/js/index.js

@@ -1,6 +1,5 @@
 import './common';
 import tabs from '../components/tabs/tabs';
-import accordion from '../components/accordion/accordion';
 import subnavigation from '../components/subnavigation/subnavigation';
 import checkboxList from '../components/inputs/checkbox-list/checkbox-list';
 import popovers from '../components/popover/popover';
@@ -9,6 +8,7 @@ import { MdsFileUpload } from '../components/inputs/file-upload/file-upload';
 import characterCount from '../components/inputs/character-count/character-count';
 import button from '../components/button/button';
 import prose from '../helpers/prose/prose';
+import { MdsAccordion } from '../components/accordion/accordion';
 import { MdsDropdownNav } from '../components/dropdown-nav/dropdown-nav';
 import { MdsTimeoutDialog } from '../components/timeout-dialog/timeout-dialog';
 import { MdsCardLink } from '../components/card/card-link';
@@ -19,6 +19,10 @@ import { MdsScrollSpy } from '../components/scroll-spy/scroll-spy';
 import { MdsConsentGate } from '../components/consent-gate/consent-gate.js';
 export { setConsentAdapter } from '../components/consent-gate/consent-gate.js';
 
+if (!window.customElements.get('mds-accordion')) {
+  window.customElements.define('mds-accordion', MdsAccordion);
+}
+
 if (!window.customElements.get('mds-dropdown-nav')) {
   window.customElements.define('mds-dropdown-nav', MdsDropdownNav);
 }
@@ -49,7 +53,6 @@ if (!window.customElements.get('mds-consent-gate')) {
 
 const initAll = () => {
   tabs.init();
-  accordion.init();
   subnavigation.init();
   checkboxList.init();
   modals.init();

package/src/layout/containers/index.njk

@@ -0,0 +1 @@
+<a href="/storybook/" target="_top">Moved to Storybook</a>

package/src/typography/index.njk

@@ -0,0 +1 @@
+<a href="/storybook/" target="_top">Moved to Storybook</a>

package/tasks/svgsprite.js

@@ -1,10 +1,10 @@
 const path = require('path');
 const fs = require('fs');
+const { createHash } = require('node:crypto');
 const { optimize } = require('svgo');
 const svgstore = require('svgstore');
 
-const filepath = path.resolve(__dirname, '../src/icons/');
-const prefix = path.basename(filepath, path.extname(filepath));
+const iconsDir = path.resolve(__dirname, '../src/icons/');
 
 const svgoOptions = {
   plugins: [
@@ -12,11 +12,9 @@ const svgoOptions = {
       name: 'preset-default',
       params: {
         overrides: {
-          cleanupIDs: {
-            prefix: `${prefix}-`,
+          cleanupIds: {
             minify: true,
           },
-          removeViewBox: false,
         },
       },
     },
@@ -26,57 +24,72 @@ const svgoOptions = {
         attrs: 'fill',
       },
     },
+    // ensure `id` attributes of different .svg files are different
+    // so that when a spritesheet is created they wont clash (many same named ids, sprites using the wrong reference!)
+    {
+      name: 'prefixIds',
+      params: {
+        delim: '',
+        // base the unique id prefix on the svg file path, this way it will be consistent inside the file, but unique to that file
+        prefix: (_, opt) => createHash('md5').update(opt.path).digest('hex').substring(0, 6) + '-',
+      },
+    },
   ],
 };
 
-let files = [];
-const icons = [];
-const sprites = svgstore();
-const inlineSprites = svgstore({
-  inline: true,
-  svgAttrs: {
-    id: 'spritesheet',
-    style: 'display: none',
-  },
-});
+/**
+ * load all icons data into a map, keyed by file path
+ *
+ * @returns {Map<string,string>} Map<iconFilePath, svgString>
+ */
+async function getIcons() {
+  const iconFilePaths = await Array.fromAsync(fs.promises.glob(path.join(iconsDir, '*.svg')));
+  const icons = new Map();
+  for (const iconFilePath of iconFilePaths) {
+    const svgString = await fs.promises.readFile(iconFilePath, 'utf8');
+    icons.set(iconFilePath, svgString);
+  }
+  return icons;
+}
+exports.getIcons = getIcons;
 
-async function createSvgStack() {
-  return new Promise((resolve, reject) => {
-    files = fs.readdirSync(filepath);
-    files.forEach((file) => {
-      // eslint-disable-next-line promise/param-names
-      new Promise((res) => {
-        const svgdata = fs.readFileSync(`${path.resolve(__dirname, filepath, file)}`, { encoding: 'utf8' });
-        const result = optimize(svgdata, {
-          path: `${path.resolve(__dirname, filepath, file)}`,
-          ...svgoOptions,
-        });
+/**
+ * @param  {Map<string,string>} icons
+ * @returns {{spritesheet:object, inlineSpritesheet:object, jsonSpritesheet:object}}
+ */
+async function generateSpritesheets(icons) {
+  // load all icon data
+  const spritesheet = svgstore();
+  const inlineSpritesheet = svgstore({ inline: true, svgAttrs: { id: 'spritesheet', style: 'display: none' } });
+  const jsonSpritesheet = {};
+  for (const [iconFilePath, svgString] of icons.entries()) {
+    // optimize icons - overwrite svgString data in icons map
+    const optimizedIcon = optimize(svgString, { path: iconFilePath, ...svgoOptions }).data;
+
+    // add icons to spritesheets
+    const nameFromFilename = path.basename(iconFilePath).replace(/.svg/i, '');
+    const prefixedName = `icon-${nameFromFilename}`;
 
-        res(result);
-      })
-        .then((icon) => {
-          const fileName = path.parse(file).name;
-          const prefixedName = `icon-${fileName}`;
+    spritesheet.add(prefixedName, optimizedIcon);
+    inlineSpritesheet.add(prefixedName, optimizedIcon);
+    jsonSpritesheet[prefixedName] = optimizedIcon;
+  }
+  return { spritesheet, inlineSpritesheet, jsonSpritesheet };
+}
+exports.generateSpritesheets = generateSpritesheets;
 
-          sprites.add(prefixedName, icon.data);
-          inlineSprites.add(prefixedName, icon.data);
+/**
+ * generate spritesheets, and write to disk
+ */
+async function createSvgStack() {
+  const icons = await getIcons();
+  const { spritesheet, inlineSpritesheet, jsonSpritesheet } = await generateSpritesheets(icons);
+  const ourDir = path.resolve(__dirname, '../dist/assets');
 
-          return fs.mkdir(path.resolve(__dirname, '../dist/assets'), { recursive: true }, async () => {
-            icons.push({ name: fileName });
-            fs.writeFileSync(`${path.resolve(__dirname, '../dist/assets', 'icons.svg')}`, sprites.toString());
-            fs.writeFileSync(
-              `${path.resolve(__dirname, '../dist/assets', 'icons-inline.svg')}`,
-              inlineSprites.toString()
-            );
-            fs.writeFileSync(`${path.resolve(__dirname, '../dist/assets', 'icons.json')}`, JSON.stringify(icons));
-          });
-        })
-        .catch((err) => {
-          reject(err);
-        });
-      resolve('SVG Stack compiled');
-    });
-  });
+  await fs.promises.mkdir(ourDir, { recursive: true });
+  await fs.promises.writeFile(path.join(ourDir, 'icons.svg'), spritesheet.toString(), 'utf-8');
+  await fs.promises.writeFile(path.join(ourDir, 'icons-inline.svg'), inlineSpritesheet.toString(), 'utf-8');
+  await fs.promises.writeFile(path.join(ourDir, 'icons.json'), JSON.stringify(jsonSpritesheet), 'utf-8');
 }
 
 async function svgsprite() {

package/src/components/accordion/README.md

@@ -1,46 +0,0 @@
-## Callable
-
-Use the [callable](https://mozilla.github.io/nunjucks/templating.html#call) syntax to populate the main content
-
-## Parameters
-
-- `label`: The text inside the trigger button. Be as descriptive as you can as it will help for a11y. **required**
-- `labelOpen`: The text inside of the trigger button when accordion is expanded
-- `labelClasses`: class will be added to the trigger (useful to change the font size)
-- `icon`: override the default icon for the closed state
-- `iconOpen`: override the default icon for the open state
-- `noIcon`: Boolean, removes the icon from the accordion completely
-- `startsOpen`: if `true`, the accordion will be expanded by default. This will be overridden in JS when used as part of a checkbox list with pills, but is still recommended
-  as it will auto open the component for people not using JS surfacing the categories.
-- `nonClosing`: boolean to visually hide (for accessibility) the trigger and keep the accordion expanded
-- `breakpoint`: if a value (in px, em, rem) is passed, the accordion will be enabled only when screen size is smaller than the breakpoint
-- `leftAligned`: This will determine if the icon should sit on the left or the right of the trigger (default: false) - See design usage guidelines
-- `contentFirst`: Boolean, places the content above the trigger, pushing the trigger down below the content when open
-
-**Note:** Checkbox list with pills is a dependent component and should be checked and updated if any changes to this component are made.
-
-## Accessibility
-
-When using the non closing accordion, the trigger will be disabled and hidden from view so screenreaders can inform that the content has been expanded. The trigger is also removed from the navigation flow to make sure that it can't be tabbed into when using a keyboard.
-
-## Design usage guidelines
-
-Where possible, the defaults should remain as they are to ensure we remain consistent across the platform, though there are a few areas where you may need to step
-outside these guidelines, this offers an insight into the design decisions to best ensure you understand context and usage.
-
-- `icon`: Where possible, we should ensure that this remains unchanged as the triangles are a universal indicator of collapsable content. However, there are scenarios where this may not work for you. In these scenarios, it is suggested you use one of the following icons: `minus`
-- `iconOpen`: Where possible, we should ensure that this remains unchanged as the triangles are a universal indicator of expandable content. However, there are scenarios where this may not work for you. In these scenarios, it is suggested you use one of the following icons: `plus-small` (Plus is a little too big to align nicely with the content of the trigger)
-- `leftAligned`: Usage for this parameter depends largely on the content surrounding it. There are some cases where we have a list where some items are expandable while others are not so to avoid a misalignment due to the presence of icons or not, we've decided that when in a list the accordions would have the icons on the right. When used as a single component on the page, the icon is on the left instead.
-
-## Notes
-
-- 15/08/24 - Move to `details` broswer native accordion type component.
-
-- 09/12/20 - Non closing accordion - Moved `mds-visually-hidden` to trigger's parent. We noticed an issue on NVDA in Chrome, where the changes on the button like `aria-expanded` or `aria-disabled` were not announced when the button itself was visually hidden.
-
-- 02/11/20 - `aria-controls` attribute has been removed from the accordion as it is poorly supported and doesn't work as expected.
-
-References:
-
-- https://heydonworks.com/article/aria-controls-is-poop/ (that article's title says it all)
-- https://a11ysupport.io/tech/aria/aria-controls_attribute

package/src/components/button/README.md

@@ -1,27 +0,0 @@
-## Callable
-
-Use the [callable](https://mozilla.github.io/nunjucks/templating.html#call) syntax to populate the main content
-
-
-## Parameters
-
-- `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`)
-- `attributes`: you can add extra attributes by passing an object to the parameter. Example: `attributes: { attribute-name: 'attribute-value' }`
-
-## Full width button
-
-We have 2 helpers classes that can help you achieve full width buttons at different sizes.
-`.mds-width-full` and `.mds-width-auto`.
-
-For example, if you would like your button to be full width at mobile size and have `width: auto` at any wider size, add the following classes on the button (using the `classes` parameter): `mds-width-full mds-width-md-auto`.
-
-`mds-button--icon` can be used to adjust the padding to better fit around an icon button.
-
-Both helper classes are set with breakpoints. Just add the name of the class followed by the breakpoint name (`sm`, `md`, `lg`, `xl`) and the value (`full` or `auto`).
-
-## Prevent Double Submit
-
-Helper class `.js-mds-button-double-submit`
-
-If you click the form button twice in a row (slower than dobule click but faster than submitting), the browser can submit the form twice. Adding this class will disable the button for 1 second to prevent a double submission.