@madgex/design-system 10.1.2 → 11.0.0

package/package.json

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

package/src/components/accordion/_template.njk

@@ -25,6 +25,7 @@
 
   {%- if params.contentFirst -%}
     <button
+      type="button"
       class="mds-accordion__label mds-button mds-button--plain mds-padding-x-b0 {{ params.labelClasses }}"
       aria-expanded="true"
     >

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/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/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 %}