@madgex/design-system 2.6.0 → 2.7.0

package/src/components/inputs/{checkbox → checkbox-list}/_template.njk

@@ -2,7 +2,7 @@
 {% from "../_message/_macro.njk" import MdsInputMessages %}
 {% from "../../accordion/_macro.njk" import MdsAccordion %}
 {% from "../../icons/_macro.njk" import MdsIcon %}
-
+{% from "../_checkbox-elem/_macro.njk" import MdsCheckboxElem %}
 {%- if params.name -%}
   {%- set name = params.name -%}
 {%- else -%}
@@ -23,11 +23,6 @@
       {%- set accordionIsExpanded = false -%}
       {% if checkboxParams.selectedOptions %}
         {% set selectedOptions = checkboxParams.selectedOptions %}
-        {# check if `selectedOptions` is an array or not - if it isn't, change it into one #}
-        {# didn't find any other way than to check the first character of the JSON.stringify version of the parameter #}
-        {% if selectedOptions | dump | first != '[' %}
-          {% set selectedOptions = [selectedOptions] %}
-        {% endif %}
         {% for selectedOption in selectedOptions %}
           {% if selectedOption == option.value %}
             {%- set isSelected = true -%}
@@ -40,20 +35,14 @@
         {% endfor %}
       {% endif %}
       <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 checkboxParams.describedBy %}aria-describedby="{{checkboxParams.describedBy}}"{% endif %}
-            {% if isSelected == true %}checked="checked"{% endif %}
-            value="{{ option.value }}"
-        />{#
-          # Avoid extra space created by line breaks #
-          #}<label class="mds-form-check__label" for="{{ optionId }}">{#
-            #}{{ option.labelText | safe }}{#
-          #}</label>
+        {{ MdsCheckboxElem({
+          disabled: checkboxParams.disabled,
+          isSelected: isSelected,
+          labelText: option.labelText,
+          name: checkboxParams.name,
+          id: optionId,
+          value: option.value
+        }) }}
         {% if option.options and option.options.length %}
           {%- set triggerLabel %}Select options under {{ option.labelText | safe }}{% endset -%}
           {%- set accordionContent %}
@@ -97,19 +86,10 @@
     {% set hasBorder = true %}
   {% endif %}
 {% endif %}
-{% if params.describedBy %}
-  {% if params.options.length > 1 %}
-    {% set describeByFieldset = params.describedBy %}
-  {% else %}
-    {% set describeByCheckbox = params.describedBy %}
-  {% endif %}
-{% endif %}
 
 <div class="mds-form-element mds-form-element--checkbox{% if params.state %} mds-form-element--{{params.state}}{% endif %}{% if params.classes %} {{params.classes}}{% endif %}" id="{{params.id}}" data-test="checkbox{% if params.id %}-{{params.id}}{% endif %}">
-  {# no need for fieldset and legend if there is only one checkbox #}
-  {% if params.options.length > 1 %}
-    <fieldset {%- if describeByFieldset %} aria-describedby="{{describeByFieldset}}"{% endif %}>
-      {{ MdsInputLabel({
+  <fieldset {%- if params.describedBy %} aria-describedby="{{params.describedBy}}"{% endif %}>
+    {{ MdsInputLabel({
       element: 'legend',
       labelText: params.labelText,
       hideLabel: params.hideLabel,
@@ -117,7 +97,6 @@
       optional: params.optional,
       tooltipMessage: params.tooltipMessage
     }) }}
-    {% endif %}
     {{ MdsInputMessages({
       id: params.id,
       helpText: params.helpText,
@@ -128,11 +107,8 @@
         options: params.options,
         selectedOptions: params.selectedOptions,
         name: name,
-        disabled: params.disabled,
-        describedBy: describeByCheckbox
+        disabled: params.disabled
       }) }}
     </div>
-    {% if params.options.length > 1 %}
-    </fieldset>
-  {% endif %}
+  </fieldset>
 </div>

package/src/components/inputs/{checkbox/checkbox.config.js → checkbox-list/checkbox-list.config.js}

@@ -1,5 +1,5 @@
 module.exports = {
-  title: 'Checkbox',
+  title: 'Checkbox List',
   context: {
     id: 'checkbox-input',
     labelText: 'Standard checkbox group',
@@ -263,12 +263,13 @@ module.exports = {
       name: 'Single checkbox',
       context: {
         id: 'single-checkbox',
-        describedBy: 'terms-description',
+        optional: true,
+        labelText: 'Job level',
         options: [
           {
-            labelText: 'I agree to the terms and conditions',
-            value: 'agree-terms',
-            id: 'terms-and-conditions',
+            labelText: 'Graduate',
+            value: 'is-graduate',
+            id: 'graduate',
           },
         ],
       },

package/src/components/inputs/{checkbox/checkbox.njk → checkbox-list/checkbox-list.njk}

@@ -1,7 +1,7 @@
-{% from "./inputs/checkbox/_macro.njk" import MdsCheckbox %}
+{% from "./inputs/checkbox-list/_macro.njk" import MdsCheckboxList %}
 
 <div class="mds-form-field">
-  {{ MdsCheckbox({
+  {{ MdsCheckboxList({
     labelText: labelText,
     name: name,
     id: id,

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

@@ -0,0 +1,34 @@
+## Parameters
+
+- `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**,
+- `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**
+- `describedBy`: adding aria-describeby to the input field - **optional**
+- `selectedOptions`: Preselected checkboxes - Array or comma-separed string
+- `options`: array of options for a checkbox inside. **required**: `labelText`, `value`, `id`, `classes`
+
+**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: [
+  {
+    labelText: "Checkbox Input 1",
+    value: "2-1",
+    id: "checkbox-2-1",
+  },
+]
+```
+which is the same as
+```
+  labelText: "Checkbox Input 1",
+  value: "2-1",
+  id: "checkbox-2-1",
+```
+
+## Accessibility
+This input relies entirely on the browser standard checkbox input and applies the accessibility provided by that.

package/src/components/inputs/single-checkbox/_macro.njk

@@ -0,0 +1,3 @@
+{% macro MdsSingleCheckbox(params) %}
+    {%- include "./_template.njk" -%}
+{% endmacro %}

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

@@ -0,0 +1,49 @@
+{% from "../_message/_macro.njk" import MdsInputMessages %}
+{% from "../_checkbox-elem/_macro.njk" import MdsCheckboxElem %}
+{%- if params.name -%}
+  {%- set name = params.name -%}
+{%- else -%}
+  {%- set name = params.id -%}
+{%- endif -%}
+
+{%- set name -%}
+  {%- if params.name -%}
+    {{- params.name -}}
+  {%- else -%}
+    {{- params.id -}}
+  {%- endif -%}
+{%- endset -%}
+
+{%- set id -%}
+  {%- if params.options[0].id -%}
+    {{- params.options[0].id -}}
+  {% else %}
+    {{- name -}}-{{- params.options[0].value -}}
+  {% endif -%}
+{%- endset -%}
+
+{%- if params.selectedOptions === params.options[0].id -%}
+  {%- set isSelected = true -%}
+{%- endif -%}
+
+<div class="mds-form-element mds-form-element--checkbox{% if params.state %} mds-form-element--{{params.state}}{% endif %}{% if params.classes %} {{params.classes}}{% endif %}" data-test="checkbox{% if params.id %}-{{params.id}}{% endif %}">
+  {{ MdsInputMessages({
+    id: params.id,
+    helpText: params.helpText,
+    validationError: params.validationError
+  }) }}
+  <div class="mds-form-check-container">
+    <div class="mds-form-check{% if option.classes %} {{option.classes}}{% endif %}">
+    {{ MdsCheckboxElem({
+      disabled: params.disabled,
+      isSelected: isSelected,
+      labelText: params.options[0].labelText,
+      describedBy: params.describedBy,
+      optional: params.optional,
+      name: name,
+      id: id,
+      value: params.options[0].value
+    }) }}
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,46 @@
+module.exports = {
+  title: 'Single checkbox',
+  name: 'Single checkbox',
+  context: {
+    id: 'terms-and-conditions',
+    options: [
+      {
+        labelText: 'You need to agree to our terms of service',
+        value: 'tos',
+        id: 'tos-checkbox',
+      },
+    ],
+  },
+  variants: [
+    {
+      name: 'Preselected checkbox',
+      context: {
+        id: 'preselected',
+        optional: true,
+        options: [
+          {
+            labelText: 'I want to opt out of third party emails',
+            value: 'out-out',
+            id: 'out-out-checkbox',
+          },
+        ],
+        selectedOptions: 'out-out-checkbox',
+      },
+    },
+    {
+      name: 'Optional checkbox with help text',
+      context: {
+        id: 'data',
+        optional: true,
+        helpText: 'We will never sell your data.',
+        options: [
+          {
+            labelText: 'I agree to provide my data for analyzing purposes only.',
+            value: 'data-yes',
+            id: 'data-provide',
+          },
+        ],
+      },
+    },
+  ],
+};

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

@@ -0,0 +1,18 @@
+{% from "./inputs/single-checkbox/_macro.njk" import MdsSingleCheckbox %}
+
+<div class="mds-form-field">
+  {{ MdsSingleCheckbox({
+    name: name,
+    id: id,
+    disabled: disabled,
+    selectedOptions: selectedOptions,
+    describedBy: describedBy,
+    classes: classes,
+    optional: optional,
+    state: state,
+    validationError: validationError,
+    helpText: helpText,
+    value: value,
+    options: options
+  }) }}
+</div>

package/cypress/integration/components/checkbox.spec.js

@@ -1,9 +0,0 @@
-context('checkbox', () => {
-  beforeEach(() => {
-    cy.visitComponent('checkbox');
-  });
-
-  it('has no detectable a11y violations on load', () => {
-    cy.checkA11y('[data-test="checkbox"]');
-  });
-});

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

@@ -1,3 +0,0 @@
-{% macro MdsCheckbox(params) %}
-    {%- include "./_template.njk" -%}
-{% endmacro %}