@madgex/design-system 1.60.7 → 1.60.8

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

@@ -1,5 +1,7 @@
 {% from "../label/_macro.njk" import MdsInputLabel %}
 {% from "../_message/_macro.njk" import MdsInputMessages %}
+{% from "../../accordion/_macro.njk" import MdsAccordion %}
+{% from "../../icons/_macro.njk" import MdsIcon %}
 
 {%- if params.name -%}
   {%- set name = params.name -%}
@@ -7,7 +9,75 @@
   {%- set name = params.id -%}
 {%- endif -%}
 
+{% macro createCheckboxes(checkboxParams) %}
+  {% if checkboxParams.options and checkboxParams.options.length %}
+    {% for option in checkboxParams.options %}
+      {%- set optionId -%}
+        {%- if option.id -%}{#
+          #}{{ option.id }}{#
+        #}{% else %}{#
+        #}{{ checkboxParams.name }}-{{ option.value }}{#
+        #}{% endif -%}
+      {%- endset -%}
+        <div class="mds-form-check{% if option.classes %} {{option.classes}}{% endif %}">
+          <input 
+            type="checkbox" 
+            class="mds-form-check__input" 
+            name="{{ checkboxParams.name }}" 
+            id="{{ optionId }}" 
+            {% if checkboxParams.disabled %}disabled="disabled"{% endif %} 
+            {% if option.selected %}checked="checked"{% endif %}
+            value="{{ option.value }}" 
+          />{#
+          # Avoid extra space created by line breaks #
+          #}<label class="mds-form-check__label" for="{{ optionId }}">{#
+            #}{{ option.labelText }}{#
+          #}</label>
+          {% if option.options and option.options.length %}
+            {%- set triggerLabel %}Select options under {{ option.labelText | safe }}{% endset -%}
+            {%- set accordionContent %}
+              <div class="mds-form-check__nested-container">
+                {{ createCheckboxes({
+                  options: option.options, 
+                  name: checkboxParams.name, 
+                  disabled: checkboxParams.disabled
+                }) }}
+              </div>
+            {% endset -%}
+            {{ MdsAccordion({
+              id: optionId,
+              triggerHtmlTag: 'div',
+              triggerLabel: triggerLabel,
+              triggerNoJsHidden: true,
+              hideTriggerLabel: true,
+              content: accordionContent,
+              expandIcon: 'chevron-right',
+              collapseIcon: 'chevron-down',
+              useFieldset: true
+            }) }}
+          {% endif %}
+        </div>
+      {% endfor %}
+  {% endif %}
+{% endmacro %}
+
+{# if there are more than 6 options or if there are nested options then we add a border and fixed height on the container  #}
+{% if params.options %}
+  {% set hasChildren = false %}
+  {% set hasBorder = false %}
+  {% for option in params.options %}
+    {% if option.options.length %}
+      {% set hasChildren = true %}
+    {% endif %}
+  {% endfor %}
+  {% if hasChildren or params.options.length > 6 %}
+    {% set hasBorder = true %}
+  {% endif %}
+{% endif %}
+
 <div class="mds-form-element mds-form-element--checkbox{% if params.classes %} {{params.classes}}{% endif %}" id="{{params.id}}"  data-test="checkbox">
+  {# no need for fieldset and legend if there is only one checkbox #}
+  {% if params.options.length > 1 %}
   <fieldset>
     {{ MdsInputLabel({
       element: 'legend',
@@ -17,27 +87,20 @@
       optional: params.optional,
       tooltipMessage: params.tooltipMessage
     }) }}
+  {% endif %}
     {{ MdsInputMessages({
       id: params.id,
       helpText: params.helpText,
       validationError: params.validationError
     }) }}
-    {%- for checkbox in params.options -%}
-      <div class="mds-form-check{% if checkbox.classes %} {{checkbox.classes}}{% endif %}">
-        <input 
-          type="checkbox" 
-          class="mds-form-check__input" 
-          name="{{name}}" 
-          id="{{checkbox.id}}" 
-          {% if params.disabled %}disabled="disabled"{% endif %} 
-          {% if checkbox.selected %}checked="checked"{% endif %}
-          value="{{checkbox.value}}" 
-        />{#
-        # Avoid extra space created by line breaks #
-        #}<label class="mds-form-check__label" for="{{checkbox.id}}">{#
-          #}{{checkbox.labelText}}{#
-        #}</label>
-      </div>
-    {% endfor %}
+    <div class="mds-form-check-container{% if hasBorder %} mds-form-check-container--border{% endif %}">
+      {{ createCheckboxes({
+        options: params.options, 
+        name: name, 
+        disabled: params.disabled
+      }) }}
+    </div>
+  {% if params.options.length > 1 %}
   </fieldset>
+  {% endif %}
 </div>

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

@@ -1,6 +1,5 @@
 module.exports = {
   title: 'Checkbox',
-  status: 'wip',
   context: {
     id: 'checkbox-input',
     labelText: 'Standard checkbox group',
@@ -23,6 +22,8 @@ module.exports = {
       context: {
         id: 'inline-checkbox-using-class',
         labelText: 'Inline checkbox using class',
+        tooltipMessage: 'This is a tool tip message to help describe a bit better what you should do with this field.',
+        optional: true,
         classes: 'mds-form-element--inline',
         options: [
           {
@@ -65,5 +66,113 @@ module.exports = {
         ],
       },
     },
+    {
+      name: 'Nested checkboxes',
+      context: {
+        id: 'nested-checkboxes',
+        labelText: 'Industry',
+        tooltipMessage: 'Select some options',
+        options: [
+          {
+            value: 101,
+            labelText: 'Arts & heritage',
+            options: [
+              { value: 600102, labelText: 'Artist agency & management', selected: true, options: [] },
+              { value: 600104, labelText: 'Arts education & training', options: [] },
+              { value: 104, labelText: 'Dance', options: [] },
+              { value: 600105, labelText: 'Events', options: [] },
+              { value: 600106, labelText: 'Festival', selected: true, options: [] },
+              { value: 600107, labelText: 'Funding body', options: [] },
+              { value: 107, labelText: 'Heritage', options: [] },
+              { value: 600109, labelText: 'Librarian & archivist', options: [] },
+              { value: 108, labelText: 'Museums & galleries', selected: true, options: [] },
+              { value: 109, labelText: 'Music', options: [] },
+              { value: 600110, labelText: 'Press, publicity & PR', options: [] },
+              { value: 600111, labelText: 'Promoter', options: [] },
+              { value: 110, labelText: 'Theatre', options: [] },
+              { value: 600113, labelText: 'Venue', options: [] },
+              { value: 106, labelText: 'Visual arts', options: [] },
+              { value: 600114, labelText: 'Writing & literature', options: [] },
+            ],
+          },
+          {
+            value: 111,
+            labelText: 'Charities',
+            options: [
+              { value: 112, labelText: 'Advice', options: [] },
+              { value: 113, labelText: 'Advocacy', options: [] },
+              { value: 114, labelText: 'Animal', options: [] },
+              { value: 600116, labelText: 'Arts & culture', options: [] },
+              { value: 600117, labelText: 'Charity & volunteering support', options: [] },
+              { value: 115, labelText: 'Children', options: [] },
+              { value: 600118, labelText: 'Community development', options: [] },
+              { value: 600119, labelText: 'Crime', options: [] },
+              { value: 116, labelText: 'Disability', options: [] },
+              { value: 117, labelText: 'Environment', options: [] },
+              { value: 118, labelText: 'Equality', options: [] },
+              { value: 600120, labelText: 'Faith-based', options: [] },
+              { value: 119, labelText: 'Fundraising', options: [] },
+              { value: 121, labelText: 'Health', options: [] },
+              { value: 600122, labelText: 'Housing & homelessness', options: [] },
+              { value: 348, labelText: 'Human rights', options: [] },
+              { value: 122, labelText: 'International', options: [] },
+              { value: 300, labelText: 'Mental health', options: [] },
+              { value: 600123, labelText: 'Policy & research', options: [] },
+              { value: 600124, labelText: 'Poverty relief', options: [] },
+              { value: 600125, labelText: 'Social welfare', options: [] },
+              { value: 349, labelText: 'Trustee', options: [] },
+              { value: 600126, labelText: 'Volunteer management', options: [] },
+            ],
+          },
+          { value: 124, labelText: 'Construction', options: [] },
+          { value: 142, labelText: 'Design', options: [] },
+          {
+            value: 137,
+            labelText: 'Engineering',
+            options: [
+              { value: 138, labelText: 'General', options: [] },
+              { value: 139, labelText: 'Manufacturing', options: [] },
+              { value: 140, labelText: 'Utility', options: [] },
+            ],
+          },
+          {
+            value: 141,
+            labelText: 'Environment',
+            options: [
+              { value: 600131, labelText: 'Agriculture & land management', options: [] },
+              { value: 600132, labelText: 'Auditing', options: [] },
+              { value: 147, labelText: 'Built environment', options: [] },
+              { value: 600136, labelText: 'Climate change', options: [] },
+              { value: 600137, labelText: 'Corporate social responsibility', options: [] },
+              { value: 600138, labelText: 'Ecology & conservation', options: [] },
+              { value: 600139, labelText: 'Energy efficiency & renewable energy', options: [] },
+              { value: 600140, labelText: 'Energy management', options: [] },
+              { value: 143, labelText: 'Environmental education', options: [] },
+              { value: 600141, labelText: 'Environmental management', options: [] },
+              { value: 145, labelText: 'Green & clean technology', options: [] },
+              { value: 600143, labelText: 'International development', options: [] },
+              { value: 146, labelText: 'Policy, legislation & strategy', options: [] },
+              { value: 148, labelText: 'Recycling & waste management', options: [] },
+              { value: 600145, labelText: 'Supply chain', options: [] },
+              { value: 600146, labelText: 'Sustainability', options: [] },
+              { value: 600147, labelText: 'Water & wastewater', options: [] },
+            ],
+          },
+        ],
+      },
+    },
+    {
+      name: 'Single checkbox',
+      context: {
+        id: 'single-checkbox',
+        options: [
+          {
+            labelText: 'I agree to the terms and conditions',
+            value: 'agree-terms',
+            id: 'terms-and-conditions',
+          },
+        ],
+      },
+    },
   ],
 };

package/src/components/inputs/checkbox/checkbox.njk

@@ -7,6 +7,8 @@
     id: id,
     disabled: disabled,
     options: options,
-    classes: classes
+    classes: classes,
+    tooltipMessage: tooltipMessage,
+    optional: optional
   }) }}
 </div>

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

@@ -5,33 +5,42 @@
 #}mds-form-label__label
 {%- endset -%}
 
-<div class="mds-form-label{% if params.hideLabel %} mds-visually-hidden{% endif -%}">
-    {%- if params.element == 'legend' -%}
-      <legend class="{{ classes }}">
-    {%- else -%}
-      <label class="{{ classes }}" for="{{ params.id }}">
-    {%- endif -%}
-      {{ params.labelText }}
-      {%- if params.optional -%}
-        <span class="mds-form-label__optional"> (optional)</span>
-      {%- endif -%}
-    {%- if params.element == 'legend' -%}
-      </legend>
-    {%- else -%}
-      </label>
-    {%- endif -%}
+{%- if params.element == 'legend' -%}
+{# <legend> must the immediate child of <fieldset> #}
+  <legend class="mds-form-label{% if params.tooltipMessage %} mds-form-label--legend-with-tooltip{% endif %}{% if params.hideLabel %} mds-visually-hidden{% endif -%}">
+    <span class="{{ classes }}">
+{%- else -%}
+  <div class="mds-form-label{% if params.hideLabel %} mds-visually-hidden{% endif -%}">
+    <label class="{{ classes }}" for="{{ params.id }}">
+{%- endif -%}
+  {{ params.labelText }}
+  {%- if params.optional -%}
+    <span class="mds-form-label__optional"> (optional)</span>
+  {%- endif -%}
+{%- if params.element == 'legend' -%}
+    </span>
+  </legend>
+{%- else -%}
+    </label>
+{%- endif -%}
 
-    {%- if params.tooltipMessage -%}
-      {{- MdsPopover({
-        id: params.id + '-tooltip',
-        text: MdsIcon({
-          iconName: 'question-mark',
-          classes: 'mds-icon--info',
-          visuallyHiddenLabel: 'More info'
-        }),
-        placement: 'right',
-        classes: 'mds-button mds-button--plain mds-form-label__tooltip',
-        content: params.tooltipMessage
-      }) -}}
-    {%- endif -%}
-</div>
+{%- if params.tooltipMessage -%}
+  {{- MdsPopover({
+    id: params.id + '-tooltip',
+    text: MdsIcon({
+      iconName: 'question-mark',
+      classes: 'mds-icon--info',
+      visuallyHiddenLabel: 'More info'
+    }),
+    placement: 'right',
+    classes: 'mds-button mds-button--plain mds-form-label__tooltip',
+    content: params.tooltipMessage
+  }) -}}
+{%- endif -%}
+{%- if params.element == 'legend' -%}
+  {# <legend> is using a float:left to get the tooltip icon to line up next to it #}
+  {# Sorry I couldn't find antyhing else to target #}
+  <span class="mds-clearfix"></span>
+{% else %}
+  </div>
+{%- endif -%}

package/src/components/popover/popover.scss

@@ -16,6 +16,7 @@ $arrow-size: 10px;
   box-shadow: $mds-color-box-shadow-base;
   text-align: left;
   max-width: 250px;
+  @include z-index(popup);
 }
 
 .mds-popover__arrow {

package/src/js/index-vue.js

@@ -2,7 +2,6 @@ import 'document-register-element/build/document-register-element';
 import Vue from 'vue';
 import vueCustomElement from 'vue-custom-element';
 import MdsCombobox from '../components/inputs/combobox/combobox';
-import MdsMultiSelect from '../components/inputs/multi-select/multi-select';
 
 Vue.use(vueCustomElement);
 Vue.config.devtools = process.env.NODE_ENV === 'development';
@@ -10,6 +9,6 @@ Vue.config.devtools = process.env.NODE_ENV === 'development';
 Vue.config.keyCodes.end = 35;
 Vue.config.keyCodes.home = 36;
 
-[MdsCombobox, MdsMultiSelect].forEach(({ name, component, hooks }) => {
+[MdsCombobox].forEach(({ name, component, hooks }) => {
   Vue.customElement(name, component, hooks);
 });

package/src/layout/forms/forms.config.js

@@ -7,26 +7,26 @@ module.exports = {
       id: 'email',
       type: 'email',
     },
-    multiselect: {
+    checkbox1: {
       labelText: 'Role',
-      name: 'Role',
-      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', 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: [] },
+      id: 'role',
+      options: [
+        { value: 7, labelText: 'Academic Pharmacist', options: [] },
+        { value: 1, labelText: 'Community Pharmacist', options: [] },
+        { value: 10, labelText: 'Dispensing Assistant', options: [] },
+        { value: 4, labelText: 'Hospital Pharmacist', selected: true, options: [] },
+        { value: 6, labelText: 'Industrial Pharmacist', options: [] },
+        { value: 3, labelText: 'Locum Pharmacist', options: [] },
+        { value: 11, labelText: 'Medicines Counter Assistant', options: [] },
+        { value: 2, labelText: 'Pharmacy Manager', options: [] },
+        { value: 12, labelText: 'Pharmacy Student', options: [] },
+        { value: 9, labelText: 'Pharmacy Technician', options: [] },
+        { value: 8, labelText: 'Pre-reg Pharmacist', selected: true, options: [] },
+        { value: 513016, labelText: 'Primary Care Pharmacist', options: [] },
+        { value: 513015, labelText: 'Region/Area Manager', options: [] },
+        { value: 5, labelText: 'Senior Management', options: [] },
+        { value: 513014, labelText: 'Superintendent Pharmacist', options: [] },
+        { value: 13, labelText: 'Other Pharmacy roles', options: [] },
       ],
     },
     combobox: {
@@ -36,7 +36,7 @@ module.exports = {
       fallbackTo: 'select',
       optional: true,
     },
-    checkbox: {
+    checkbox2: {
       id: 'checkbox-input',
       labelText: 'Hours',
       optional: true,

package/src/layout/forms/forms.njk

@@ -1,7 +1,6 @@
 {% from "../components/inputs/checkbox/_macro.njk" import MdsCheckbox %}
 {% from "../components/inputs/combobox/_macro.njk" import MdsCombobox %}
 {% from "../components/inputs/input/_macro.njk" import MdsInput %}
-{% from "../components/inputs/multi-select/_macro.njk" import MdsMultiSelect %}
 {% from "../components/inputs/radio/_macro.njk" import MdsRadio %}
 {% from "../components/inputs/select/_macro.njk" import MdsSelect %}
 {% from "../components/inputs/label/_macro.njk" import MdsInputLabel %}
@@ -21,12 +20,12 @@
         }) }}
       </div>
       <div class="mds-form-field">
-        {{ MdsMultiSelect({
-          labelText: multiselect.labelText,
-          name: multiselect.name,
-          terms: multiselect.terms,
-          optional: multiselect.optional,
-          tooltipMessage: multiselect.tooltipMessage
+        {{ MdsCheckbox({
+          labelText: checkbox1.labelText,
+          id: checkbox1.id,
+          options: checkbox1.options,
+          optional: checkbox1.optional,
+          tooltipMessage: checkbox1.tooltipMessage
         }) }}
       </div>
       <div class="mds-form-field">
@@ -53,11 +52,11 @@
       </div>
       <div class="mds-form-field">
         {{ MdsCheckbox({
-          labelText: checkbox.labelText,
-          id: checkbox.id,
-          options: checkbox.options,
-          optional: checkbox.optional,
-          tooltipMessage: checkbox.tooltipMessage
+          labelText: checkbox2.labelText,
+          id: checkbox2.id,
+          options: checkbox2.options,
+          optional: checkbox2.optional,
+          tooltipMessage: checkbox2.tooltipMessage
         }) }}
       </div>
       <fieldset class="mds-form-field">

package/src/scss/components/__index.scss

@@ -10,7 +10,6 @@
 @import '../../components/notification/notification';
 @import '../../components/inputs/form-elements';
 @import '../../components/inputs/combobox/combobox';
-@import '../../components/inputs/multi-select/multi-select';
 @import '../../components/inputs/file-upload/file-upload';
 @import '../../components/inputs/textarea/textarea';
 @import '../../components/modal/modal';

package/tasks/createMacroIndex.js

@@ -40,7 +40,7 @@ async function createMacroIndex(cb) {
     )
     .join('\n');
 
-  fs.writeFileSync(`${componentRootDir}/macro-index.njk`, template);
+  fs.writeFileSync(`${componentRootDir}/_macro-index.njk`, template);
 
   cb();
 }

package/__tests__/unit/src/components/multiselect.spec.js

@@ -1,91 +0,0 @@
-/* eslint-disable prettier/prettier */
-import Vue from 'vue';
-import { mount } from '@vue/test-utils';
-import MultiSelect from '../../../../src/components/inputs/multi-select/vue-components/MultiSelect.vue';
-import MultiSelectCheckbox from '../../../../src/components/inputs/multi-select/vue-components/MultiSelectCheckbox.vue';
-import MultiSelectCheckboxGroup from '../../../../src/components/inputs/multi-select/vue-components/MultiSelectCheckboxGroup.vue';
-
-describe('Multiselect', () => {
-  let wrapper;
-  let childGroups;
-
-  beforeEach(() => {
-    wrapper = mount(MultiSelect, {
-      propsData: {
-        labeltext: "Choose your test",
-        name: "test-chooser",
-        options: [
-          {
-            "id": "test-1",
-            "name": "tests",
-            "value": "test-group-1",
-            "label": "Test group one",
-            "checked": false,
-            "children": [
-              {
-                "id": "test-1-01",
-                "name": "tests",
-                "value": "test-1-1",
-                "label": "Test one one",
-                "children": null,
-                "checked": false
-              },
-              {
-                "id": "test-1-02",
-                "name": "tests",
-                "value": "test-1-2",
-                "label": "Test one two",
-                "children": null,
-                "checked": true
-              }
-            ]
-          },
-          {
-            "id": "test-2",
-            "name": "tests",
-            "value": "test-group-2",
-            "label": "Test group two",
-            "checked": false,
-            "children": null
-          },
-          {
-            "id": "test-3",
-            "name": "tests",
-            "value": "test-group-3",
-            "label": "Test group three",
-            "checked": false,
-            "children": null
-          }
-        ]
-      },
-    });
-  });
-
-  it('is a vue instance', () => {
-    expect.assertions(1);
-    expect(wrapper.isVueInstance()).toBe(true);
-  });
-
-  describe('Checkbox list', () => {
-    it('renders the parent checkboxes', () => {
-      const parents = wrapper.find(MultiSelectCheckboxGroup);
-      expect.assertions(1);
-      expect(parents.vm.$children).toHaveLength(3);
-    });
-
-    it('has children where applicable', () => {
-      expect.assertions(1);
-      const parent = wrapper.find('[data-multiselect-id="tests-checkbox"]');
-      expect(parent.vm.$children[0].$children.length).toBe(2);
-    });
-
-    it('expands when clicked', () => {
-      const triggerButton = wrapper.find('[data-multiselect-id="tests-checkbox"] > .mds-button');
-      const childGroup = wrapper.find('[data-multiselect-id="test-chooser-test-1-group"]');
-      expect(childGroup.isVisible()).toBe(false);
-      triggerButton.trigger('click');
-      expect(wrapper.isVisible()).toBe(true);
-      expect.assertions(2);
-    });
-  });
-});