@madgex/design-system 1.60.7 → 1.60.8

package/package.json

@@ -2,7 +2,7 @@
   "name": "@madgex/design-system",
   "author": "Madgex",
   "license": "UNLICENSED",
-  "version": "1.60.7",
+  "version": "1.60.8",
   "scripts": {
     "clean": "rimraf dist public tokens/build",
     "commit": "commit",

package/src/components/{macro-index.njk → _macro-index.njk}

@@ -10,7 +10,6 @@
 {% from 'src/components/inputs/file-upload/_macro.njk' import MdsFileUpload %}
 {% from 'src/components/inputs/input/_macro.njk' import MdsInput %}
 {% from 'src/components/inputs/label/_macro.njk' import MdsInputLabel %}
-{% from 'src/components/inputs/multi-select/_macro.njk' import MdsMultiSelect %}
 {% from 'src/components/inputs/radio/_macro.njk' import MdsRadio %}
 {% from 'src/components/inputs/select/_macro.njk' import MdsSelect %}
 {% from 'src/components/inputs/textarea/_macro.njk' import MdsTextarea %}

package/src/components/accordion/README.md

@@ -1,13 +1,14 @@
 ## Parameters
 
-- `name`: the name you want to use to differentiate the component (will go to the id)
-- `triggerLabel`: label of the trigger button
+- `id`: it will be used to create the id on the trigger and the content **required**
+- `triggerLabel`: label of the trigger button. Be as descriptive as you can as it will help for a11y. **required**
 - `triggerLabelActive`: label of the trigger button when accordion is expanded
 - `triggerNoJsHidden`: trigger button to show/hide when js is disabled
-- `triggerIsHeader`: trigger is p tag by default, you can pass an html tag if needed (h2, h3)
-- `headerClass`: class will be added to the trigger (useful to change the font size)
+- `triggerHtmlTag`: trigger is `p` tag by default, you can pass an html tag if needed (`h2`, `h3`, `div`)
+Note: Don't use `span` as it creates a bug with VoiceOver where you can't access the expanded content when the trigger is within an inline, inline block or floated element.
+- `triggerClasses`: class will be added to the trigger (useful to change the font size)
 - `breakpoint`: if a value (in px, em, rem) is passed, the accordion will be enabled only when screen size is smaller than the breakpoint
-- `content`: this can also be a custom component or html
+- `content`: this can also be a custom component or html **required**
 - `expandIcon`: This allows you to override the iconography for the expand icon (default: chevron-down) - See design usage guidelines
 - `collapseIcon`: This allows you to override the iconography for the collapse icon (default: chevron-up) - See design usage guidelines
 - `leftAligned`: This will determine if the icon should sit on the left or the right of the label (default: false) - See design usage guidelines
@@ -15,7 +16,8 @@
 
 ## Accessibility
 
-when javascript is enabled, accordion will contains aria-labelledby, aria-expanded and aria-controls for screen readers.
+When javascript is enabled, accordion will contains `aria-label` and `aria-expanded` for screen readers.
+Use a descriptive label for the trigger.
 
 ## 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
@@ -23,4 +25,13 @@ outside these guidelines, this offers an insight into the design decisions to be
 
 - `expandIcon`: Where possible, we should ensure that this remains unchanged as the chevrons 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 label)
 - `collapseIcon`: Where possible, we should ensure that this remains unchanged as the chevrons 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`
-- `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.
+- `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
+
+- 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/accordion/_template.njk

@@ -1,56 +1,50 @@
 {% from "../icons/_macro.njk" import MdsIcon %}
 
 {% if params.content %}
-    {%- set accordionId %}
-      {%- if item.id -%}
-          {{ item.id }}
-      {%- else -%}
-          {# 
-          if the id is missing it will be constructed using:
-          [component name]-[item triggerLabel]-[index] 
-          e.g. period-next-week-2
-          #}
-          {%- if params.name -%}{{ params.name | lower | trim | replace(' ', '-')}}{%- else -%}
-          {{ item.triggerLabel | lower | trim | replace(' ', '-') }}{%- endif -%}
-      {%- endif -%}
-    {% endset -%}
-    {%- set headerTag %}
-      {%- if params.triggerIsHeader -%}
-          {{params.triggerIsHeader}}
-      {%- else -%}
-          p
-      {%- endif -%}
-    {% endset -%}
-    {%- set collapseIcon -%}
-      {%- if params.collapseIcon -%}
-        {{params.collapseIcon}}
-      {%- else -%}
-        chevron-up
-      {%- endif -%}
-    {% endset -%}
-    {%- set expandIcon %}
-      {%- if params.expandIcon -%}
-        {{params.expandIcon}}
-      {%- else -%}
-        chevron-down
-      {% endif -%}
-    {% endset -%}
-    <div class="mds-accordion" id="{{accordionId}}" {% if params.breakpoint %}data-bp="{{params.breakpoint}}"{% endif %} data-test="accordion">
-        <{{headerTag}} class="mds-accordion__trigger{%if params.triggerNoJsHidden %} mds-display-none{% endif %}" data-test="accordion-trigger">
-          <span {% if params.headerClass %}class="{{params.headerClass}}"{% endif %}>
-            {% if params.leftAligned %}
-              {{- MdsIcon({ iconName: collapseIcon, classes: 'mds-icon--before mds-accordion__icon-collapse'}) -}}
-              {{- MdsIcon({ iconName: expandIcon, classes: 'mds-icon--before mds-accordion__icon-expand'}) -}}
-            {% endif %}
-            <span class="mds-accordion__trigger-label" {%- if params.triggerLabelActive %} data-labelinverse="{{params.triggerLabelActive}}"{% endif %}>
-              {{- params.triggerLabel -}}
-            </span>
-            {% if not params.leftAligned %}
-              {{- MdsIcon({ iconName: collapseIcon, classes: 'mds-icon--after mds-accordion__icon-collapse'}) -}}
-              {{- MdsIcon({ iconName: expandIcon, classes: 'mds-icon--after mds-accordion__icon-expand'}) -}}
-            {% endif %}
-          </span>
-        </{{headerTag}}>
-        <div id="accordion-content-{{accordionId}}" class="mds-accordion__content" {%if not params.triggerNoJsHidden %}aria-labelledby="accordion-trigger-{{accordionId}}" {% endif %}data-test="accordion-content">{{params.content | safe}}</div>
-    </div>
+  {%- set triggerHtmlTag %}
+    {%- if params.triggerHtmlTag -%}
+        {{params.triggerHtmlTag}}
+    {%- else -%}
+        p
+    {%- endif -%}
+  {% endset -%}
+  {%- set collapseIcon -%}
+    {%- if params.collapseIcon -%}
+      {{params.collapseIcon}}
+    {%- else -%}
+      chevron-up
+    {%- endif -%}
+  {% endset -%}
+  {%- set expandIcon %}
+    {%- if params.expandIcon -%}
+      {{params.expandIcon}}
+    {%- else -%}
+      chevron-down
+    {% endif -%}
+  {% endset -%}
+  <{{triggerHtmlTag}} id="accordion-trigger-{{params.id}}" class="mds-accordion-trigger{%if params.triggerNoJsHidden %} mds-display-none{% endif %}" {% if params.breakpoint %}data-bp="{{params.breakpoint}}"{% endif %} data-test="accordion-trigger">
+    <span {% if params.triggerClasses %}class="{{params.triggerClasses}}"{% endif %}>
+      {% if params.leftAligned %}
+        {{- MdsIcon({ iconName: collapseIcon, classes: 'mds-icon--before mds-accordion-trigger__icon-collapse'}) -}}
+        {{- MdsIcon({ iconName: expandIcon, classes: 'mds-icon--before mds-accordion-trigger__icon-expand'}) -}}
+      {% endif %}
+      <span class="mds-accordion-trigger__label{% if params.hideTriggerLabel %} mds-visually-hidden{% endif %}" {%- if params.triggerLabelActive %} data-labelinverse="{{params.triggerLabelActive}}"{% endif %}>
+        {{- params.triggerLabel | safe -}}
+      </span>
+      {% if not params.leftAligned %}
+        {{- MdsIcon({ iconName: collapseIcon, classes: 'mds-icon--after mds-accordion-trigger__icon-collapse'}) -}}
+        {{- MdsIcon({ iconName: expandIcon, classes: 'mds-icon--after mds-accordion-trigger__icon-expand'}) -}}
+      {% endif %}
+    </span>
+  </{{triggerHtmlTag}}>
+  {% if params.useFieldset %}
+    {# used in nested checkboxes #}
+    <fieldset class="mds-accordion-content" data-test="accordion-content">
+      <legend class="mds-visually-hidden">{{params.triggerLabel}}</legend>
+      {{params.content | safe}}
+    </fieldset>
+  {% else %}
+    {# using aria-label instead of aria-labelledby to avoid getting `triggerLabelActive` as label for the content #}
+    <div class="mds-accordion-content" {% if not params.triggerNoJsHidden %}aria-label="{{ params.triggerLabel }}" {% endif %}data-test="accordion-content">{{params.content | safe}}</div>
+  {% endif %}
 {% endif %}

package/src/components/accordion/accordion.config.js

@@ -8,8 +8,8 @@ module.exports = {
       name: 'Taxonomy',
       context: {
         name: 'Taxonomy',
-        triggerLabel: 'View more',
-        triggerLabelActive: 'View less',
+        triggerLabel: 'View more categories',
+        triggerLabelActive: 'View less categories',
         triggerNoJsHidden: true,
         content:
           '<dl class="mds-list mds-list--definition mds-list--border"><dt class="mds-list__key">Hours</dt><dd class="mds-list__value">Full time</dd><dt class="mds-list__key">Contract</dt><dd class="mds-list__value">Permanent</dd><dt class="mds-list__key">Industry</dt><dd class="mds-list__value">Accountant, Manager</dd></dl>',
@@ -19,14 +19,14 @@ module.exports = {
       name: 'Alternative icons',
       context: {
         name: 'Alt Icons',
-        triggerLabel: 'View more',
-        triggerLabelActive: 'View less',
+        triggerLabel: 'View more options',
+        triggerLabelActive: 'View less options',
         triggerNoJsHidden: true,
         collapseIcon: 'minus',
         expandIcon: 'plus-small',
         leftAligned: true,
         content:
-          '<div class="mds-grid-row"><div class="mds-grid-col-6"><div class="mds-form-field"><div class="mds-form-element mds-form-element--multiselect js-mds-multiselect" data-test="multiselect"><fieldset><div class="mds-form-label"><legend class="mds-form-label__label">Role</legend></div><div class="mds-multiselect"><div class="mds-multiselect__checkbox-group"><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-7" value="7"><label for="Role-7">Academic Pharmacist</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-1" value="1"><label for="Role-1">Community Pharmacist</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-10" value="10"><label for="Role-10">Dispensing Assistant</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-4" value="4" checked=""><label for="Role-4">Hospital Pharmacist</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-6" value="6"><label for="Role-6">Industrial Pharmacist</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-3" value="3"><label for="Role-3">Locum Pharmacist</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-11" value="11"><label for="Role-11">Medicines Counter Assistant</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-2" value="2"><label for="Role-2">Pharmacy Manager</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-12" value="12"><label for="Role-12">Pharmacy Student</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-9" value="9"><label for="Role-9">Pharmacy Technician</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-8" value="8" checked=""><label for="Role-8">Pre-reg Pharmacist</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-513016" value="513016"><label for="Role-513016">Primary Care Pharmacist</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-513015" value="513015"><label for="Role-513015">Region/Area Manager</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-5" value="5"><label for="Role-5">Senior Management</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-513014" value="513014"><label for="Role-513014">Superintendent Pharmacist</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-13" value="13"><label for="Role-13">Other Pharmacy roles</label></div></div></div></fieldset><fieldset><div class="mds-form-label"><legend class="mds-form-label__label">Industry</legend></div><div class="mds-multiselect"><div class="mds-multiselect__checkbox-group"><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-7" value="7"><label for="Role-7">Academic Pharmacist</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-1" value="1"><label for="Role-1">Community Pharmacist</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-10" value="10"><label for="Role-10">Dispensing Assistant</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-4" value="4" checked=""><label for="Role-4">Hospital Pharmacist</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-6" value="6"><label for="Role-6">Industrial Pharmacist</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-3" value="3"><label for="Role-3">Locum Pharmacist</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-11" value="11"><label for="Role-11">Medicines Counter Assistant</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-2" value="2"><label for="Role-2">Pharmacy Manager</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-12" value="12"><label for="Role-12">Pharmacy Student</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-9" value="9"><label for="Role-9">Pharmacy Technician</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-8" value="8" checked=""><label for="Role-8">Pre-reg Pharmacist</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-513016" value="513016"><label for="Role-513016">Primary Care Pharmacist</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-513015" value="513015"><label for="Role-513015">Region/Area Manager</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-5" value="5"><label for="Role-5">Senior Management</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-513014" value="513014"><label for="Role-513014">Superintendent Pharmacist</label></div><div class="mds-multiselect__checkbox"><input type="checkbox" name="Role" id="Role-13" value="13"><label for="Role-13">Other Pharmacy roles</label></div></div></div></fieldset></div></div></div></div>',
+          '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ligula erat, dignissim non sollicitudin ut, sagittis a sapien. Quisque eget arcu sed nulla tincidunt eleifend. Maecenas sit amet velit elit. Maecenas elementum venenatis sapien sit amet elementum. Pellentesque id mauris quis tortor suscipit posuere. Donec eu consectetur tortor. Mauris id scelerisque quam. Sed scelerisque ut est quis sollicitudin. Etiam semper tempor erat, sed rhoncus ex malesuada non. Donec eu pellentesque odio. Vestibulum et suscipit risus, luctus semper nunc. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam eu est ac libero blandit egestas ac id tellus. Suspendisse pulvinar viverra ex, a varius ligula commodo at. Vivamus dignissim neque vitae est ultrices lobortis. Cras vel pulvinar erat.</p>',
       },
     },
     {
@@ -36,7 +36,7 @@ module.exports = {
         triggerLabel: 'Lorem ipsum',
         triggerNoJsHidden: false,
         triggerIsHeader: 'h3',
-        headerClass: 'mds-font-great-primer',
+        triggerClasses: 'mds-font-great-primer',
         content:
           '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ligula erat, dignissim non sollicitudin ut, sagittis a sapien. Quisque eget arcu sed nulla tincidunt eleifend. Maecenas sit amet velit elit. Maecenas elementum venenatis sapien sit amet elementum. Pellentesque id mauris quis tortor suscipit posuere. Donec eu consectetur tortor. Mauris id scelerisque quam. Sed scelerisque ut est quis sollicitudin. Etiam semper tempor erat, sed rhoncus ex malesuada non. Donec eu pellentesque odio. Vestibulum et suscipit risus, luctus semper nunc. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam eu est ac libero blandit egestas ac id tellus. Suspendisse pulvinar viverra ex, a varius ligula commodo at. Vivamus dignissim neque vitae est ultrices lobortis. Cras vel pulvinar erat.</p>',
       },
@@ -45,8 +45,8 @@ module.exports = {
       name: 'Mobile Only',
       context: {
         name: 'Mobile Only',
-        triggerLabel: 'View more',
-        triggerLabelActive: 'View less',
+        triggerLabel: 'View more categories',
+        triggerLabelActive: 'View less categories',
         triggerNoJsHidden: true,
         breakpoint: tokens.size.breakpoint.md.original.value,
         content:

package/src/components/accordion/accordion.js

@@ -1,22 +1,23 @@
-const accordionClass = 'mds-accordion';
-const accordionTriggerClass = 'mds-accordion__trigger';
-const accordionTriggerButtonClass = 'mds-accordion__trigger-button';
-const accordionContentClass = 'mds-accordion__content';
-const accordionExpandedClass = 'mds-accordion--expanded';
+const accordionTriggerClass = 'mds-accordion-trigger';
+const accordionTriggerButtonClass = 'mds-accordion-trigger__button';
+const accordionTriggerLabelClass = 'mds-accordion-trigger__label';
+const accordionTriggerExpandedClass = 'mds-accordion-trigger--expanded';
+const accordionContentExpandedClass = 'mds-accordion-content--expanded';
 const accordionLabelInverseData = 'data-labelinverse';
-const accordionTriggerLabelClass = 'mds-accordion__trigger-label';
 
 const accordion = {
   init: () => {
-    const accordionList = Array.from(document.querySelectorAll(`.${accordionClass}`));
+    const accordionTriggerList = Array.from(document.querySelectorAll(`.${accordionTriggerClass}`));
     const screenWidth = window.innerWidth;
 
-    accordionList.forEach((element) => {
-      const isAccordion = accordion.checkBreakpoint(element, screenWidth);
+    accordionTriggerList.forEach((trigger) => {
+      const accordionContent = trigger.nextElementSibling;
+      const isAccordion = accordion.checkBreakpoint(trigger, screenWidth);
       if (isAccordion) {
-        accordion.setAccordion(element);
+        accordion.setAccordion(trigger, accordionContent);
       } else {
-        element.classList.add(accordionExpandedClass);
+        trigger.classList.add(accordionTriggerExpandedClass);
+        accordionContent.classList.add(accordionContentExpandedClass);
       }
     });
   },
@@ -55,29 +56,34 @@ const accordion = {
     }
     return true;
   },
-  setAccordion: (element) => {
-    const accordionId = element.id;
-    const accordionTrigger = element.querySelector(`.${accordionTriggerClass}`);
-    const accordionContent = element.querySelector(`.${accordionContentClass}`);
-    const accordionTriggerButton = accordion.createButton(accordionId, element);
-    accordionTrigger.classList.remove('mds-display-none');
-    accordionContent.setAttribute('aria-labelledby', `accordion-trigger-${accordionId}`);
-    accordionTrigger.innerHTML = '';
-    accordionTrigger.appendChild(accordionTriggerButton);
+  setAccordion: (accordionTrigger, accordionContent) => {
+    const triggerContainer = accordionTrigger;
+    const accordionTriggerId = triggerContainer.id;
+    const label = triggerContainer.querySelector('.mds-accordion-trigger__label');
+    const labelText = label.innerText;
+    const triggerButton = accordion.createButton(accordionTriggerId, triggerContainer);
+    triggerContainer.classList.remove('mds-display-none');
+    if (accordionContent.nodeName.toLowerCase() !== 'fieldset') {
+      accordionContent.setAttribute('aria-label', labelText);
+    }
+    triggerContainer.innerHTML = '';
+    triggerContainer.appendChild(triggerButton);
 
-    accordionTriggerButton.addEventListener('click', (elem) => {
+    triggerButton.addEventListener('click', (elem) => {
       elem.preventDefault();
-      accordion.toggleExpand(accordionTriggerButton);
+      accordion.toggleExpand(triggerButton, triggerContainer, accordionContent);
     });
   },
-  createButton: (accordionId, element) => {
+  createButton: (accordionTriggerId, element) => {
     const accordionTriggerSpan = element.querySelector(`.${accordionTriggerClass} > span`);
     const accordionTriggerButton = document.createElement('button');
     accordionTriggerButton.className = accordionTriggerButtonClass;
-    accordionTriggerButton.classList.add('mds-button', 'mds-button--plain', 'mds-padding-b0');
-    accordionTriggerButton.setAttribute('id', `accordion-trigger-${accordionId}`);
+    // can't use multiple arguments in classList.add() due to IE
+    accordionTriggerButton.classList.add('mds-button');
+    accordionTriggerButton.classList.add('mds-button--plain');
+    accordionTriggerButton.classList.add('mds-padding-b0');
+    accordionTriggerButton.setAttribute('id', accordionTriggerId);
     accordionTriggerButton.setAttribute('aria-expanded', false);
-    accordionTriggerButton.setAttribute('aria-controls', `accordion-content-${accordionId}`);
     if (accordionTriggerSpan) {
       accordionTriggerButton.appendChild(accordionTriggerSpan);
     }
@@ -94,17 +100,18 @@ const accordion = {
     }
     return element;
   },
-  toggleExpand: (e) => {
-    const accordionTriggerButton = e;
-    const accordionTriggerButtonLabel = e.querySelector(`.${accordionTriggerLabelClass}`);
-    const accordionParent = accordionTriggerButton.closest(`.${accordionClass}`);
+  toggleExpand: (triggerButton, triggerContainer, accordionContent) => {
+    const accordionTriggerButton = triggerButton;
+    const accordionTriggerButtonLabel = triggerButton.querySelector(`.${accordionTriggerLabelClass}`);
 
     if (accordionTriggerButton.getAttribute('aria-expanded') === 'false') {
       accordionTriggerButton.setAttribute('aria-expanded', true);
-      accordionParent.classList.add(accordionExpandedClass);
+      triggerContainer.classList.add(accordionTriggerExpandedClass);
+      accordionContent.classList.add(accordionContentExpandedClass);
     } else {
       accordionTriggerButton.setAttribute('aria-expanded', false);
-      accordionParent.classList.remove(accordionExpandedClass);
+      triggerContainer.classList.remove(accordionTriggerExpandedClass);
+      accordionContent.classList.remove(accordionContentExpandedClass);
     }
     accordion.switchLabel(accordionTriggerButtonLabel);
   },

package/src/components/accordion/accordion.njk

@@ -8,7 +8,8 @@
   triggerLabelActive: triggerLabelActive,
   triggerNoJsHidden: triggerNoJsHidden,
   triggerIsHeader: triggerIsHeader,
-  headerClass: headerClass,
+  triggerClasses: triggerClasses,
+  hideTriggerLabel: hideTriggerLabel,
   breakpoint: breakpoint,
   content: content,
   leftAligned: leftAligned,

package/src/components/accordion/accordion.scss

@@ -1,32 +1,32 @@
-.js .mds-accordion .mds-accordion__content{
+.js .mds-accordion-content {
   display: none;
 }
 
-.js .mds-accordion.mds-accordion--expanded .mds-accordion__content{
+.js .mds-accordion-content--expanded {
   display: block;
 }
 
-.mds-accordion {
-  & .mds-icon.mds-accordion__icon {
+.mds-accordion-trigger {
+  & .mds-icon.mds-accordion-trigger__icon {
     &-expand {
       display: inline-block;
-     }
-     &-collapse {
-       display: none;
-     }
+    }
+    &-collapse {
+      display: none;
+    }
   }
   &--expanded {
-    & .mds-icon.mds-accordion__icon {
+    & .mds-icon.mds-accordion-trigger__icon {
       &-expand {
         display: none;
-       }
-       &-collapse {
-         display: inline-block;
-       }
+      }
+      &-collapse {
+        display: inline-block;
+      }
     }
   }
 }
 
-html:not(.js) .mds-accordion .mds-accordion__trigger .mds-icon{
+html:not(.js) .mds-accordion .mds-accordion-trigger .mds-icon {
   display: none;
-}
+}

package/src/components/inputs/_form-elements.scss

@@ -1,13 +1,24 @@
+@mixin inputFocusStyle($focusColour: $mds-color-input-focus) {
+  border-color: $focusColour;
+  outline-color: $focusColour;
+  box-shadow: 0 0 3px 2px $focusColour;
+}
+
 .mds-form-field {
   margin-bottom: $mds-size-baseline * 7;
 }
 .mds-form-label {
   display: flex;
   margin-bottom: $mds-size-baseline * 3;
+
+  &--legend-with-tooltip {
+    // display: inline/inline-block doesn't work on <legend>
+    float: left;
+  }
 }
 .mds-form-label__label {
   font-weight: bold;
-  flex: 1;
+  flex: 0 1 auto;
 }
 .mds-form-label__optional {
   @extend .mds-font-brevier;
@@ -65,9 +76,7 @@
   @extend .mds-font-body-copy;
 
   &:focus {
-    border: 1px solid $mds-color-input-focus;
-    outline-color: $mds-color-input-focus;
-    box-shadow: 0 0 4px 2px $mds-color-input-focus;
+    @include inputFocusStyle();
   }
 
   .mds-form-element--error & {
@@ -76,22 +85,12 @@
     border-left-width: $mds-size-baseline;
     padding-left: $mds-size-baseline * 2;
     &:focus {
-      outline-color: $mds-color-status-error-dark;
-      box-shadow: 0 0 4px 2px $mds-color-status-error-dark;
-      border-color: $mds-color-status-error-dark;
+      @include inputFocusStyle($mds-color-status-error-dark);
       border-left-width: $mds-size-baseline;
     }
   }
 }
 
-.mds-form-check {
-  margin-bottom: $mds-size-baseline * 2;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-}
-
 .mds-form-element--inline {
   & .mds-form-check {
     display: inline-block;
@@ -104,13 +103,44 @@
   }
 }
 
+.mds-form-check-container--border {
+  border-radius: $mds-size-border-radius;
+  border: $mds-size-border-width solid $mds-color-input-border;
+  max-height: 200px;
+  min-height: 200px;
+  overflow-y: auto;
+  padding: $mds-size-baseline * 2;
+}
+
+.mds-form-check {
+  margin-bottom: $mds-size-baseline * 2;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.js .mds-form-check-container--border .mds-form-check {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+
+  & .mds-accordion-trigger__button {
+    border: none; // helps with vertical alignment
+  }
+
+  & .mds-accordion-content {
+    width: 100%;
+  }
+}
+
 .mds-form-check__input {
   display: inline-block;
   position: relative;
-  vertical-align: text-bottom;
+  vertical-align: text-top;
   appearance: none;
-  height: $mds-size-baseline * 5;
-  width: $mds-size-baseline * 5;
+  height: $mds-size-baseline * 4;
+  width: $mds-size-baseline * 4;
   padding: $mds-size-baseline;
   border: $mds-size-border-width solid $mds-color-input-border;
   background-color: $mds-color-neutral-white;
@@ -120,7 +150,7 @@
 
   &:hover,
   &:focus {
-    box-shadow: $mds-color-input-shadow-focus;
+    @include inputFocusStyle();
   }
 
   &:disabled {
@@ -161,6 +191,11 @@
   }
 }
 
+.mds-form-check__nested-container {
+  margin-top: $mds-size-baseline * 2;
+  padding-left: $mds-size-baseline * 5;
+}
+
 .js .mds-form-element__fallback {
   display: none;
 }

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

@@ -1,6 +1,6 @@
 ## Parameters
 
-- `labelText`: The label for the input **required**,
+- `labelText`: The label for the input **required**, unless there is only one checkbox,
 - `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**,
@@ -11,6 +11,8 @@
 - `classes`: add extra classes to the fieldgroup - **optional**
 - `options`: This is an array of objects containing the parameters for each option: `labelText`, `value`, `id`, `classes`, `selected`
 
+**Note:** `id` in `options` is optional. If you don't specify one, an id will be created for you using the name/id of the field and the value of the option.
+
 See an example option below
 ```
 options: [