@madgex/design-system 1.45.0 → 1.46.1

package/src/components/inputs/input/input.njk

@@ -2,21 +2,23 @@
 
 <div class="mds-grid-row">
   <div class="mds-grid-col-6">
-    {{ MdsInput({
-      labelText: labelText,
-      hideLabel: hideLabel,
-      name: name,
-      id: id,
-      type: type,
-      value:value,
-      optional: optional,
-      disabled: disabled,
-      placeholder: placeholder,
-      helpText: helpText,
-      validationError: validationError,
-      state: state,
-      classes: classes,
-      tooltipMessage: tooltipMessage
-    }) }}
+    <div class="mds-form-field">
+      {{ MdsInput({
+        labelText: labelText,
+        hideLabel: hideLabel,
+        name: name,
+        id: id,
+        type: type,
+        value:value,
+        optional: optional,
+        disabled: disabled,
+        placeholder: placeholder,
+        helpText: helpText,
+        validationError: validationError,
+        state: state,
+        classes: classes,
+        tooltipMessage: tooltipMessage
+      }) }}
+    </div>
   </div>
 </div>

package/src/components/inputs/multi-select/README.md

@@ -8,6 +8,10 @@
   - `selected`: whether the checkbox is pre-selected **optional**,
   - `terms`: an array of child terms of this term **optional**
 - `optional`: Is the multi-select optional, otherwise required **optional**,
+- `helpText`: Helper text to display under the label **optional**,
+- `tooltipMessage`: Toggles a tooltip with this message to appear on the input **optional**
+- `validationError`: The error message provided by validation **optional**,
+- `state`: The current state of the input, currently the only allowed value is `error` **optional**
 
 ## Accessibility
 

package/src/components/inputs/multi-select/_template.njk

@@ -1,3 +1,6 @@
+{% from "../_label/_macro.njk" import MdsInputLabel %}
+{% from "../_message/_macro.njk" import MdsInputMessages %}
+
 {% macro MdsMultiSelectCheckboxGroup(terms, name, nested = false) %}
   {% if terms and terms.length %}
     <div class="mds-multiselect__checkbox-group{% if nested %} mds-multiselect__checkbox-group--nested{% endif %}">
@@ -13,19 +16,28 @@
   {% endif %}
 {% endmacro %}
 
-<div class="mds-multiselect js-mds-multiselect" data-test="multiselect" data-multiselect-id="{{params.name|replace(" ", "_")|lower}}-combobox-id">
-  <fieldset class="mds-combobox--fallback">
-    <legend class="mds-multiselect__label">
-      {{ params.labelText }}
-      {% if params.optional %}
-        <span class="mds-multiselect__label-optional"> (optional)</span>
-      {% endif %}
-    </legend>
-    <div class="mds-multiselect__scrollable mds-multiselect__scrollable-parent-{{params.name|lower}}">
-      {{ MdsMultiSelectCheckboxGroup(params.terms, params.name) }}
+<div class="mds-form-element mds-form-element--multiselect js-mds-multiselect{% if params.state %} mds-form-element--{{params.state}}{% endif %}" data-test="multiselect">
+  <fieldset>
+    {{ MdsInputLabel({
+        element: 'legend',
+        labelText: params.labelText,
+        hideLabel: params.hideLabel,
+        id: params.id,
+        optional: params.optional,
+        tooltipMessage: params.tooltipMessage
+    }) }}
+    {{ MdsInputMessages({
+      id: params.name,
+      helpText: params.helpText,
+      validationError: params.validationError
+    }) }}
+
+    <div class="mds-form-element__fallback mds-multiselect">
+        {{ MdsMultiSelectCheckboxGroup(params.terms, params.name) }}
     </div>
+  
+    {# Leave the custom element at the bottom so it has access to the above elements on render #}
+    <mds-multiselect name="{{params.name}}" labeltext="{{ params.labelText }}" optional="{{params.optional}}"></mds-multiselect>
   </fieldset>
-  {# Leave the custom element at the bottom so it has access to the above elements on render #}
-  <mds-multiselect name="{{params.name}}" labeltext="{{ params.labelText }}" optional="{{params.optional}}"></mds-multiselect>
 </div>
 

package/src/components/inputs/multi-select/multi-select.config.js

@@ -119,5 +119,33 @@ module.exports = {
         ],
       },
     },
+    {
+      name: 'With error',
+      context: {
+        labelText: 'Role',
+        name: 'role-with-error',
+        optional: true,
+        state: 'error',
+        validationError: 'Please select a maximum of 2 terms',
+        terms: [
+          { id: 7, label: 'Academic Pharmacist', terms: [] },
+          { id: 1, label: 'Community Pharmacist', terms: [] },
+          { id: 10, label: 'Dispensing Assistant', terms: [] },
+          { id: 4, label: 'Hospital Pharmacist', selected: true, terms: [] },
+          { id: 6, label: 'Industrial Pharmacist', selected: true, terms: [] },
+          { id: 3, label: 'Locum Pharmacist', terms: [] },
+          { id: 11, label: 'Medicines Counter Assistant', terms: [] },
+          { id: 2, label: 'Pharmacy Manager', terms: [] },
+          { id: 12, label: 'Pharmacy Student', terms: [] },
+          { id: 9, label: 'Pharmacy Technician', terms: [] },
+          { id: 8, label: 'Pre-reg Pharmacist', selected: true, terms: [] },
+          { id: 513016, label: 'Primary Care Pharmacist', terms: [] },
+          { id: 513015, label: 'Region/Area Manager', terms: [] },
+          { id: 5, label: 'Senior Management', terms: [] },
+          { id: 513014, label: 'Superintendent Pharmacist', terms: [] },
+          { id: 13, label: 'Other Pharmacy roles', terms: [] },
+        ],
+      },
+    },
   ],
 };

package/src/components/inputs/multi-select/multi-select.njk

@@ -2,11 +2,15 @@
 
 <div class="mds-grid-row">
   <div class="mds-grid-col-6">
-    {{ MdsMultiSelect({
-      labelText: labelText,
-      name: name,
-      optional: optional,
-      terms: terms
-    }) }}
+    <div class="mds-form-field">
+      {{ MdsMultiSelect({
+        labelText: labelText,
+        name: name,
+        optional: optional,
+        terms: terms,
+        state: state,
+        validationError: validationError
+      }) }}
+    </div>
   </div>
 </div>

package/src/components/inputs/multi-select/multi-select.scss

@@ -1,33 +1,15 @@
 .mds-multiselect {
-  margin-bottom: $mds-size-baseline * 4;
-  &__label {
-    @extend .mds-font-pica;
-    flex: 1;
-    font-weight: bold;
-    margin-bottom: $mds-size-baseline * 4;
-    display: block;
-    &-optional {
-      @extend .mds-font-minion;
-      font-weight: normal;
-    }
-  }
-  & fieldset {
-    padding: 0;
-  }
-  &__scrollable {
-    border-radius: $mds-size-border-radius;
-    border: $mds-size-border-width solid $mds-color-border;
-    max-height: 200px;
-    min-height: 200px;
-    overflow-y: auto;
-    padding: $mds-size-baseline * 2;
-  }
+  border-radius: $mds-size-border-radius;
+  border: $mds-size-border-width solid $mds-color-border;
+  max-height: 200px;
+  min-height: 200px;
+  overflow-y: auto;
+  padding: $mds-size-baseline * 2;
+
   &__checkbox {
     margin-bottom: $mds-size-baseline;
     & input {
       margin-right: $mds-size-baseline * 2;
-    }
-    & input,  .mds-icon, label {
       cursor: pointer;
     }
   }
@@ -39,6 +21,8 @@
   }
 }
 
-.js .mds-multiselect .mds-combobox--fallback {
-  display: none;
-}
+.mds-form-element--error .mds-multiselect {
+  border-color: $mds-color-status-error-dark;
+  background-color: $mds-color-status-error-lightest;
+  border-left-width: $mds-size-baseline;
+}

package/src/components/inputs/multi-select/vue-components/MultiSelect.vue

@@ -1,14 +1,6 @@
 <template>
-  <div class="mds-multiselect js-mds-multiselect" :data-multiselect-id="name">
-    <fieldset>
-      <legend class="mds-multiselect__label">
-        {{ labeltext }}
-        <span v-if="optional" class="mds-multiselect__label-optional"> (optional)</span>
-      </legend>
-      <div class="mds-multiselect__scrollable">
-        <MultiSelectCheckboxGroup :name="name" :options="availableOptions" :testId="`${name}-group`" />
-      </div>
-    </fieldset>
+  <div class="mds-multiselect" :data-multiselect-id="name">
+    <MultiSelectCheckboxGroup :name="name" :options="availableOptions" :testId="`${name}-group`" />
   </div>
 </template>
 
@@ -21,10 +13,6 @@ export default {
     MultiSelectCheckboxGroup,
   },
   props: {
-    labeltext: {
-      type: String,
-      required: true,
-    },
     name: {
       type: [String, Boolean],
       default: false,

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

@@ -4,6 +4,10 @@
 - `name`: The name of the input field, uses ID unless specified **optional**,
 - `id`: The id attribute of the field, **required**
 - `disabled`: Should the input be disabled **optional**,
+- `helpText`: Helper text to display under the label **optional**,
+- `tooltipMessage`: Toggles a tooltip with this message to appear on the input **optional**
+- `validationError`: The error message provided by validation **optional**,
+- `state`: The current state of the input, currently the only allowed value is `error` **optional**
 - `classes`: add extra classes to the fieldgroup - **optional**
 - `options`: This is an object of all options, See an example option below
 ```

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

@@ -1,3 +1,6 @@
+{% from "../_label/_macro.njk" import MdsInputLabel %}
+{% from "../_message/_macro.njk" import MdsInputMessages %}
+
 {%- if params.name -%}
   {%- set name = params.name -%}
 {%- else -%}
@@ -5,22 +8,37 @@
 {%- endif -%}
 
 
-<div class="mds-radio__group{% if params.classes %} {{params.classes}}{% endif %}" id="{{params.id}}" data-test="radio">
-  <legend>{{params.labelText}}</legend>
-  {%- for radio in params.options -%}
-    <div class="mds-radio{% if radio.classes %} {{radio.classes}}{% endif %}">
-      <input 
-        type="radio" 
-        class="mds-radio__input" 
-        name="{{name}}" 
-        id="{{radio.id}}" 
-        {% if params.disabled %}disabled="disabled"{% endif %} 
-        {% if radio.selected %}checked="checked"{% endif %}
-         value="{{radio.value}}" 
-      />
-      <label class="mds-radio__label" for="{{radio.id}}">
-        {{radio.labelText}}
-      </label>
-    </div>
-  {% endfor %}
+<div class="mds-form-element mds-form-element--radio{% if params.classes %} {{params.classes}}{% endif %}" id="{{params.id}}" data-test="radio">
+  <fieldset>
+    {{ MdsInputLabel({
+        element: 'legend',
+        labelText: params.labelText,
+        hideLabel: params.hideLabel,
+        id: params.id,
+        optional: params.optional,
+        tooltipMessage: params.tooltipMessage
+    }) }}
+    {{ MdsInputMessages({
+      id: params.id,
+      helpText: params.helpText,
+      validationError: params.validationError
+    }) }}
+    {%- for radio in params.options -%}
+      <div class="mds-form-check{% if radio.classes %} {{radio.classes}}{% endif %}">
+        <input 
+          type="radio" 
+          class="mds-form-check__input" 
+          name="{{name}}" 
+          id="{{radio.id}}" 
+          {% if params.disabled %}disabled="disabled"{% endif %} 
+          {% if radio.selected %}checked="checked"{% endif %}
+          value="{{radio.value}}" 
+        />{#
+        # Avoid extra space created by line breaks #
+        #}<label class="mds-form-check__label" for="{{radio.id}}">{#
+          #}{{radio.labelText}}{#
+        ´#}</label>
+      </div>
+    {% endfor %}
+  </fieldset>
 </div>

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

@@ -3,7 +3,7 @@ module.exports = {
   status: 'wip',
   context: {
     id: 'radio-input',
-    labelText: 'Standard Radio Group',
+    labelText: 'Standard Radio group',
     options: [
       {
         labelText: 'Radio Input 1',
@@ -21,47 +21,28 @@ module.exports = {
     {
       name: 'Inline Radio using class',
       context: {
-        id: 'inline-radio-input-defined',
-        labelText: 'Inline Radio by Defined',
+        id: 'inline-radio-input',
+        labelText: 'Inline Radio using class',
         options: [
           {
             labelText: 'Radio Input 1',
             value: '2-1',
             id: 'radio-2-1',
-            classes: 'mds-display-inline-block',
+            classes: 'mds-display-inline-block mds-margin-right-b2',
           },
           {
             labelText: 'Radio Input 2',
             value: '2-2',
             id: 'radio-2-2',
             selected: true,
-            classes: 'mds-display-inline-block',
-          },
-        ],
-      },
-    },
-    {
-      name: 'Stacked Radio disabled',
-      context: {
-        id: 'stacked-radio-input-disabled',
-        labelText: 'Stacked Radio disabled',
-        disabled: true,
-        options: [
-          {
-            labelText: 'Radio Input 1',
-            value: '4-1',
-            id: 'radio-4-1',
-          },
-          {
-            labelText: 'Radio Input 2',
-            value: '4-2',
-            id: 'radio-4-2',
+            classes: 'mds-display-inline-block mds-margin-right-b2',
           },
           {
             labelText: 'Radio Input 3',
             value: '4-3',
             id: 'radio-4-3',
             selected: true,
+            classes: 'mds-display-inline-block',
           },
         ],
       },
@@ -71,25 +52,23 @@ module.exports = {
       context: {
         id: 'stacked-radio-input-disabled',
         labelText: 'Stacked Radio disabled',
+        disabled: true,
         options: [
           {
             labelText: 'Radio Input 1',
             value: '4-1',
             id: 'radio-4-1',
-            classes: 'mds-display-inline-block',
           },
           {
             labelText: 'Radio Input 2',
             value: '4-2',
             id: 'radio-4-2',
-            classes: 'mds-display-inline-block',
           },
           {
             labelText: 'Radio Input 3',
             value: '4-3',
             id: 'radio-4-3',
             selected: true,
-            classes: 'mds-display-inline-block',
           },
         ],
       },

package/src/components/inputs/radio/radio.njk

@@ -1,10 +1,12 @@
 {% from "./inputs/radio/_macro.njk" import MdsRadio %}
 
-{{ MdsRadio({
-  labelText: labelText,
-  name: name,
-  id: id,
-  disabled: disabled,
-  options: options,
-  classes: classes
-}) }}
+<div class="mds-form-field">
+  {{ MdsRadio({
+    labelText: labelText,
+    name: name,
+    id: id,
+    disabled: disabled,
+    options: options,
+    classes: classes
+  }) }}
+</div>

package/src/components/pagination/pagination.scss

@@ -7,8 +7,7 @@
 
 .mds-pagination__link {
   display: inline-block;
-  padding: $mds-size-baseline * 3;
-
+  padding: $mds-size-baseline * 3 $mds-size-baseline * 2;
   &--back {
     @include mq($from: $mds-size-breakpoint-sm) {
       border-right: $mds-size-border-width solid $mds-color-border;
@@ -26,9 +25,10 @@
     }
   }
 
-  &--hidden {
-    visibility: hidden;
-    pointer-events: none;
+  &--disabled {
+    cursor: not-allowed;
+    background-color: $mds-color-neutral-lightest;
+    color: $mds-color-neutral-lighter;
   }
 }
 .mds-pagination--numbers .mds-pagination__extra-label {
@@ -53,6 +53,10 @@
     flex-grow: 1;
   }
   .mds-pagination__link--active {
-    background-color: $mds-color-neutral-lightest;
+    color: $mds-color-text-base;
+    &:hover,
+    &:focus {
+      color: $mds-color-link-hover;
+    }
   }
 }

package/src/components/pagination-numbers/README.md

@@ -2,11 +2,11 @@
 
 - `name`: name of the component, used for accessibility purpose, should be descriptive (i.e. numbers pagination)
 - `classes`: add extra CSS classes to the component
+- `hideIcons`: hide caret icons
 - `pageUrlTemplate`:(_required_) url template which will have a page number inserted .e.g. `/article/{pageNo}/seo-stuff`
 - `pageNo`: (_required_) current page the list is on
 - `pageSize`: (_required_) how many items per page
 - `totalItemCount`: (_required_) total items count
-- `hideIcons`: hide caret icons
 - `prevLabel`: label of the previous link
 - `prevVisHiddenLabel`: hidden label for accessibility purpose
 - `nextLabel`: label of the next link

package/src/components/pagination-numbers/_pagination-numbers-number-macro.njk

@@ -8,11 +8,11 @@
 
       <span class="mds-visually-hidden">{{- params.pageVisHiddenLabel or 'Page' -}}</span>
       {%- if params.showLastEllipses -%}
-        …
+        <span class="mds-display-none mds-display-md-inline">&hellip;</span>
       {%- endif -%}
       {{params.number}}
       {%- if params.showFirstEllipses -%}
-        …
+        <span class="mds-display-none mds-display-md-inline">&hellip;</span>
       {%- endif -%}
     </a>
 

package/src/components/pagination-numbers/_template.njk

@@ -62,25 +62,30 @@ Otherwise, show an extra page in front of the current page to make up the displa
     <ul class="mds-pagination mds-pagination--numbers mds-text-align-center {% if params.classes %} {{params.classes}}{% endif %}">
       {% if params.prevLabel -%}
         <li class="mds-pagination__item">
+
           {%- if disabledButtonPrev -%}
-            <div class="mds-pagination__link mds-pagination__link--hidden">
+            <div class="mds-pagination__link mds-pagination__link--disabled">
             {%- else -%}
               <a href="{{params.pageUrlTemplate | replace('{pageNo}', pageNo - 1) }}" class="mds-pagination__link mds-pagination__link--background" aria-label="{{ params.prevLabel }} {{ params.prevVisHiddenLabel }}">
               {%- endif -%}
+
               {% if not params.hideIcons -%}
                 {{ MdsIcon({
-                    iconName: 'chevron-left',
-                    classes: 'mds-icon--before'
+                    iconName: 'chevron-left'
                   }) }}
               {%- endif -%}
-              <span>{{- params.prevLabel -}}</span>
-              {%- if params.prevVisHiddenLabel -%}
-                <span class="mds-visually-hidden">{{- params.prevVisHiddenLabel -}}</span>{%- endif -%}
+              <span class="mds-display-none mds-display-md-inline mds-margin-left-b2">
+                {{- params.prevLabel -}}
+                {%- if params.prevVisHiddenLabel -%}
+                  <span class="mds-visually-hidden">{{- params.prevVisHiddenLabel -}}</span>{%- endif -%}
+              </span>
+
               {%- if disabledButtonPrev -%}
               </div>
             {%- else -%}
             </a>
           {%- endif -%}
+
         </li>
       {%- endif %}
       <li class="mds-pagination__item mds-border-left">
@@ -122,25 +127,31 @@ Otherwise, show an extra page in front of the current page to make up the displa
       {%- endif -%}
       {% if params.nextLabel -%}
         <li class="mds-pagination__item mds-border-left">
+
           {%- if disabledButtonNext -%}
-            <div class="mds-pagination__link mds-pagination__link--hidden">
+            <div class="mds-pagination__link mds-pagination__link--disabled">
             {%- else -%}
               <a href="{{params.pageUrlTemplate | replace('{pageNo}', pageNo + 1)}}" class="mds-pagination__link mds-pagination__link--background" aria-label="{{ params.nextLabel }} {{ params.nextVisHiddenLabel }}">
               {%- endif -%}
-              <span>{{- params.nextLabel -}}</span>
-              {%- if params.nextVisHiddenLabel -%}
-                <span class="mds-visually-hidden">{{- params.nextVisHiddenLabel -}}</span>{%- endif -%}
+
+              <span class="mds-display-none mds-display-md-inline mds-margin-right-b2">
+                {{- params.nextLabel -}}
+                {%- if params.nextVisHiddenLabel -%}
+                  <span class="mds-visually-hidden">{{- params.nextVisHiddenLabel -}}</span>{%- endif -%}
+              </span>
+
               {% if not params.hideIcons -%}
                 {{ MdsIcon({
-                iconName: 'chevron-right',
-                classes: 'mds-icon--after'
+                iconName: 'chevron-right'
               }) }}
               {%- endif %}
+
               {%- if disabledButtonNext -%}
               </div>
             {%- else -%}
             </a>
           {%- endif -%}
+
         </li>
       {%- endif %}
     </ul>

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

@@ -1,8 +1,7 @@
-const containerClass = 'js-mds-combobox';
 const elementName = 'mds-combobox';
 
 function bindToSelect() {
-  const el = document.querySelector(`.${containerClass}[data-combobox-id="distance-selection"]`);
+  const el = document.querySelector(`[data-combobox-id="distance-selection"]`);
   if (el) {
     const selectInput = document.getElementById('select-distance-selection');
     const options = Array.from(selectInput.querySelectorAll('option'));
@@ -18,7 +17,7 @@ function bindToSelect() {
 }
 
 function bindToApi() {
-  const el = document.querySelector(`.${containerClass}[data-combobox-id="keywords-lookup"]`);
+  const el = document.querySelector(`[data-combobox-id="keywords-lookup"]`);
   if (el) {
     const vueSelect = el.querySelector(elementName);
     vueSelect.filterOptions = false;

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

@@ -1,6 +1,3 @@
-const containerClass = 'js-mds-multiselect';
-const elementName = 'mds-multiselect';
-
 function constructNode(rootNode) {
   const localObj = [];
   const parentNodes = rootNode.querySelectorAll(':scope > .mds-multiselect__checkbox');
@@ -23,34 +20,17 @@ function constructNode(rootNode) {
   return localObj;
 }
 
-function bindRoleData() {
-  const el = document.querySelector(`.${containerClass}[data-multiselect-id="role-combobox-id"]`);
-  if (el) {
-    const vueMultiselect = el.querySelector(`${elementName}`);
-    vueMultiselect.options = constructNode(
-      document.querySelector(
-        `.${elementName} .mds-combobox--fallback .mds-multiselect__scrollable-parent-role > .mds-multiselect__checkbox-group`
-      )
-    );
-  }
-}
-
-function bindIndustryData() {
-  const el = document.querySelector(`.${containerClass}[data-multiselect-id="industry-combobox-id"]`);
-  if (el) {
-    const vueMultiselect = el.querySelector(`${elementName}`);
-    vueMultiselect.options = constructNode(
-      document.querySelector(
-        `.${elementName} .mds-combobox--fallback .mds-multiselect__scrollable-parent-industry > .mds-multiselect__checkbox-group`
-      )
-    );
-  }
+function bindData() {
+  const elements = Array.from(document.querySelectorAll('.js-mds-multiselect'));
+  elements.forEach((element) => {
+    const vueMultiselect = element.querySelector('mds-multiselect');
+    vueMultiselect.options = constructNode(element.querySelector('.mds-multiselect__checkbox-group'));
+  });
 }
 
 const multiselect = {
   init: () => {
-    bindRoleData();
-    bindIndustryData();
+    bindData();
   },
 };
 

package/src/js/index-vue.js

@@ -15,9 +15,8 @@ Vue.customElement('mds-combobox', Combobox, {
   connectedCallback() {
     // If the custom element has loaded, clear up any fallback elements that could cause ID clashes or weirdness in form submission
     const fallbackInput = this.parentElement.querySelector('input');
-    const fallbackLabel = this.parentElement.querySelector('label');
+
     if (fallbackInput) fallbackInput.remove();
-    if (fallbackLabel) fallbackLabel.remove();
   },
 });
 

package/src/layout/containers/04-highlighted-containers.njk

@@ -0,0 +1,3 @@
+<div class="mds-highlighted-container mds-padding-b4">
+  test
+</div>

package/src/layout/containers/highlighted-containers.config.json

@@ -0,0 +1,3 @@
+{
+  "notes": "## Highlighted Containers\n\nUse `mds-highlighted-container` to get a container with token `neutral lightest` as the background colour and the standard border radius."
+}

package/src/layout/forms/README.md

@@ -0,0 +1 @@
+Use `mds-form-field` to wrap each of the form elements to get the correct spacing between them.