@ons/design-system 70.0.7 → 70.0.9

package/components/multiple-input-fields/_macro.njk

@@ -4,43 +4,45 @@
 {% macro onsMultipleInputFields(params) %}
     {% set fields %}
         {% if params.numberOfFields > 1 %}
-            <div class="ons-field-group">
-                {{ params.fields | safe }}
-            </div>
+            <div class="ons-field-group">{{ params.fields | safe }}</div>
         {% else %}
             {{ params.fields | safe }}
         {% endif %}
     {% endset %}
 
     {% if params.mutuallyExclusive %}
-        {% call onsMutuallyExclusive({
-            "id": params.id,
-            "legend": params.legendOrLabel,
-            "legendClasses": params.legendClasses,
-            "description": params.description,
-            "classes": params.classes,
-            "dontWrap": params.dontWrap if params.numberOfFields > 1 else true,
-            "legendIsQuestionTitle": params.legendIsQuestionTitle,
-            "exclusiveOptions": params.mutuallyExclusive.exclusiveOptions,
-            "or": params.mutuallyExclusive.or,
-            "deselectMessage": params.mutuallyExclusive.deselectMessage,
-            "deselectGroupAdjective": params.mutuallyExclusive.deselectGroupAdjective,
-            "deselectExclusiveOptionAdjective": params.mutuallyExclusive.deselectExclusiveOptionAdjective,
-            "error": params.error
-        }) %}
+        {%
+            call onsMutuallyExclusive({
+                "id": params.id,
+                "legend": params.legendOrLabel,
+                "legendClasses": params.legendClasses,
+                "description": params.description,
+                "classes": params.classes,
+                "dontWrap": params.dontWrap if params.numberOfFields > 1 else true,
+                "legendIsQuestionTitle": params.legendIsQuestionTitle,
+                "exclusiveOptions": params.mutuallyExclusive.exclusiveOptions,
+                "or": params.mutuallyExclusive.or,
+                "deselectMessage": params.mutuallyExclusive.deselectMessage,
+                "deselectGroupAdjective": params.mutuallyExclusive.deselectGroupAdjective,
+                "deselectExclusiveOptionAdjective": params.mutuallyExclusive.deselectExclusiveOptionAdjective,
+                "error": params.error
+            })
+        %}
             {{ fields | safe }}
         {% endcall %}
     {% elif params.numberOfFields > 1 %}
-        {% call onsFieldset({
-            "id": params.id,
-            "legend": params.legendOrLabel,
-            "legendClasses": params.legendClasses,
-            "description": params.description,
-            "classes": params.classes,
-            "dontWrap": params.dontWrap,
-            "legendIsQuestionTitle": params.legendIsQuestionTitle,
-            "error": params.error
-        }) %}
+        {%
+            call onsFieldset({
+                "id": params.id,
+                "legend": params.legendOrLabel,
+                "legendClasses": params.legendClasses,
+                "description": params.description,
+                "classes": params.classes,
+                "dontWrap": params.dontWrap,
+                "legendIsQuestionTitle": params.legendIsQuestionTitle,
+                "error": params.error
+            })
+        %}
             {{ fields | safe }}
         {% endcall %}
     {% else %}

package/components/mutually-exclusive/_macro.njk

@@ -1,4 +1,3 @@
-
 {% macro onsMutuallyExclusive(params) %}
     {% from "components/fieldset/_macro.njk" import onsFieldset %}
     {% from "components/checkboxes/_checkbox-macro.njk" import onsCheckbox %}
@@ -9,17 +8,19 @@
     {% set exclusiveOptionsLength = params.exclusiveOptions | length %}
     {% set or = params.or | default("Or") %}
 
-    {% call onsFieldset({
-        "id": params.id,
-        "classes": params.classes,
-        "legend": params.legend,
-        "legendClasses": params.legendClasses,
-        "description": params.description,
-        "attributes": params.attributes,
-        "dontWrap": params.dontWrap,
-        "legendIsQuestionTitle": params.legendIsQuestionTitle,
-        "error": params.error
-    }) %}
+    {%
+        call onsFieldset({
+            "id": params.id,
+            "classes": params.classes,
+            "legend": params.legend,
+            "legendClasses": params.legendClasses,
+            "description": params.description,
+            "attributes": params.attributes,
+            "dontWrap": params.dontWrap,
+            "legendIsQuestionTitle": params.legendIsQuestionTitle,
+            "error": params.error
+        })
+    %}
         <div class="ons-js-mutually-exclusive ons-mutually-exclusive">
             {{ content | safe }}
             {% if params.autosuggestResults %}
@@ -59,7 +60,13 @@
                     }}
                 </p>
             {% endif %}
-            <span class="ons-js-exclusive-alert ons-u-vh" role="alert" aria-live="polite" data-group-adjective="{{ params.deselectGroupAdjective }}" data-option-adjective="{{ params.deselectExclusiveOptionAdjective }}"></span>
+            <span
+                class="ons-js-exclusive-alert ons-u-vh"
+                role="alert"
+                aria-live="polite"
+                data-group-adjective="{{ params.deselectGroupAdjective }}"
+                data-option-adjective="{{ params.deselectExclusiveOptionAdjective }}"
+            ></span>
         </div>
     {% endcall %}
 {% endmacro %}

package/components/mutually-exclusive/_macro.spec.js

@@ -6,171 +6,171 @@ import axe from '../../tests/helpers/axe';
 import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
 
 const EXAMPLE_CHECKBOX_OPTION = {
-  id: 'example-option-id',
-  name: 'example-option-name',
-  value: 'example-option-value',
-  checked: false,
-  classes: 'extra-option-class',
-  attributes: {
-    'data-attribute': 'Example attribute',
-  },
-  label: {
-    text: 'Example option text',
-    description: 'Example option description',
-  },
+    id: 'example-option-id',
+    name: 'example-option-name',
+    value: 'example-option-value',
+    checked: false,
+    classes: 'extra-option-class',
+    attributes: {
+        'data-attribute': 'Example attribute',
+    },
+    label: {
+        text: 'Example option text',
+        description: 'Example option description',
+    },
 };
 
 const EXAMPLE_MUTUALLY_EXCLUSIVE = {
-  id: 'example-mutually-exclusive',
-  classes: 'extra-class',
-  exclusiveOptions: [EXAMPLE_CHECKBOX_OPTION],
-  or: 'Or',
-  deselectMessage: 'Selecting this will uncheck all other checkboxes',
-  deselectGroupAdjective: 'Group was unselected',
-  deselectExclusiveOptionAdjective: 'Exclusive option was unselected',
-  legend: 'Legend text',
-  legendClasses: 'extra-legend-class',
-  description: 'An example description.',
-  attributes: { a: 42 },
-  dontWrap: true,
-  legendIsQuestionTitle: true,
-  error: {
-    id: 'file-error',
-    text: 'Select a file that is an XLS, XLSX or PDF',
-  },
+    id: 'example-mutually-exclusive',
+    classes: 'extra-class',
+    exclusiveOptions: [EXAMPLE_CHECKBOX_OPTION],
+    or: 'Or',
+    deselectMessage: 'Selecting this will uncheck all other checkboxes',
+    deselectGroupAdjective: 'Group was unselected',
+    deselectExclusiveOptionAdjective: 'Exclusive option was unselected',
+    legend: 'Legend text',
+    legendClasses: 'extra-legend-class',
+    description: 'An example description.',
+    attributes: { a: 42 },
+    dontWrap: true,
+    legendIsQuestionTitle: true,
+    error: {
+        id: 'file-error',
+        text: 'Select a file that is an XLS, XLSX or PDF',
+    },
 };
 
 const EXAMPLE_MUTUALLY_EXCLUSIVE_RADIOS = {
-  ...EXAMPLE_MUTUALLY_EXCLUSIVE,
-  exclusiveOptions: [
-    {
-      id: 'house',
-      name: 'mutuallyExclusiveRadio',
-      label: {
-        text: 'House or bungalow',
-      },
-      value: 'house',
-    },
-    {
-      id: 'flat',
-      name: 'mutuallyExclusiveRadio',
-      label: {
-        text: 'Flat, maisonette or apartment',
-      },
-      value: 'flat',
-    },
-  ],
+    ...EXAMPLE_MUTUALLY_EXCLUSIVE,
+    exclusiveOptions: [
+        {
+            id: 'house',
+            name: 'mutuallyExclusiveRadio',
+            label: {
+                text: 'House or bungalow',
+            },
+            value: 'house',
+        },
+        {
+            id: 'flat',
+            name: 'mutuallyExclusiveRadio',
+            label: {
+                text: 'Flat, maisonette or apartment',
+            },
+            value: 'flat',
+        },
+    ],
 };
 
 const FAKE_FIELD = '<span id="fake-field">Fake field</span>';
 
 describe('macro: mutually-exclusive', () => {
-  it('passes jest-axe checks', async () => {
-    const $ = cheerio.load(renderComponent('mutually-exclusive', EXAMPLE_MUTUALLY_EXCLUSIVE, FAKE_FIELD));
-
-    const results = await axe($.html());
-    expect(results).toHaveNoViolations();
-  });
-
-  it('renders `fieldset` component with the expected parameters', () => {
-    const faker = templateFaker();
-    const fieldsetSpy = faker.spy('fieldset');
-
-    faker.renderComponent('mutually-exclusive', EXAMPLE_MUTUALLY_EXCLUSIVE, FAKE_FIELD);
-
-    expect(fieldsetSpy.occurrences).toContainEqual({
-      id: 'example-mutually-exclusive',
-      classes: 'extra-class',
-      legend: 'Legend text',
-      legendClasses: 'extra-legend-class',
-      description: 'An example description.',
-      attributes: EXAMPLE_MUTUALLY_EXCLUSIVE.attributes,
-      dontWrap: true,
-      legendIsQuestionTitle: true,
-      error: EXAMPLE_MUTUALLY_EXCLUSIVE.error,
-    });
-  });
-
-  it('renders inner field via `caller` mechanism', () => {
-    const $ = cheerio.load(renderComponent('mutually-exclusive', EXAMPLE_MUTUALLY_EXCLUSIVE, FAKE_FIELD));
+    it('passes jest-axe checks', async () => {
+        const $ = cheerio.load(renderComponent('mutually-exclusive', EXAMPLE_MUTUALLY_EXCLUSIVE, FAKE_FIELD));
 
-    expect($('.ons-mutually-exclusive > #fake-field').length).toBe(1);
-  });
-
-  it('renders `autosuggestResults` after the field', () => {
-    const $ = cheerio.load(
-      renderComponent(
-        'mutually-exclusive',
-        {
-          ...EXAMPLE_MUTUALLY_EXCLUSIVE,
-          autosuggestResults: '<span id="autosuggest-results"></span>',
-        },
-        FAKE_FIELD,
-      ),
-    );
-
-    expect($('#fake-field + #autosuggest-results').length).toBe(1);
-  });
+        const results = await axe($.html());
+        expect(results).toHaveNoViolations();
+    });
 
-  it('renders `deselectGroupAdjective` and `deselectExclusiveOptionAdjective` for the alert', () => {
-    const $ = cheerio.load(renderComponent('mutually-exclusive', EXAMPLE_MUTUALLY_EXCLUSIVE, FAKE_FIELD));
+    it('renders `fieldset` component with the expected parameters', () => {
+        const faker = templateFaker();
+        const fieldsetSpy = faker.spy('fieldset');
+
+        faker.renderComponent('mutually-exclusive', EXAMPLE_MUTUALLY_EXCLUSIVE, FAKE_FIELD);
+
+        expect(fieldsetSpy.occurrences).toContainEqual({
+            id: 'example-mutually-exclusive',
+            classes: 'extra-class',
+            legend: 'Legend text',
+            legendClasses: 'extra-legend-class',
+            description: 'An example description.',
+            attributes: EXAMPLE_MUTUALLY_EXCLUSIVE.attributes,
+            dontWrap: true,
+            legendIsQuestionTitle: true,
+            error: EXAMPLE_MUTUALLY_EXCLUSIVE.error,
+        });
+    });
 
-    expect($('.ons-js-exclusive-alert').attr('data-group-adjective')).toBe('Group was unselected');
-    expect($('.ons-js-exclusive-alert').attr('data-option-adjective')).toBe('Exclusive option was unselected');
-  });
+    it('renders inner field via `caller` mechanism', () => {
+        const $ = cheerio.load(renderComponent('mutually-exclusive', EXAMPLE_MUTUALLY_EXCLUSIVE, FAKE_FIELD));
 
-  describe('mode: with single checkbox', () => {
-    it('renders visually hidden "Or" label', () => {
-      const $ = cheerio.load(renderComponent('mutually-exclusive', EXAMPLE_MUTUALLY_EXCLUSIVE, FAKE_FIELD));
+        expect($('.ons-mutually-exclusive > #fake-field').length).toBe(1);
+    });
 
-      expect($('.ons-checkboxes__label').text().trim()).toBe('Or');
+    it('renders `autosuggestResults` after the field', () => {
+        const $ = cheerio.load(
+            renderComponent(
+                'mutually-exclusive',
+                {
+                    ...EXAMPLE_MUTUALLY_EXCLUSIVE,
+                    autosuggestResults: '<span id="autosuggest-results"></span>',
+                },
+                FAKE_FIELD,
+            ),
+        );
+
+        expect($('#fake-field + #autosuggest-results').length).toBe(1);
     });
 
-    it('renders a checkbox component with the expected parameters', () => {
-      const faker = templateFaker();
-      const checkboxSpy = faker.spy('checkboxes/checkbox');
+    it('renders `deselectGroupAdjective` and `deselectExclusiveOptionAdjective` for the alert', () => {
+        const $ = cheerio.load(renderComponent('mutually-exclusive', EXAMPLE_MUTUALLY_EXCLUSIVE, FAKE_FIELD));
 
-      faker.renderComponent('mutually-exclusive', EXAMPLE_MUTUALLY_EXCLUSIVE, FAKE_FIELD);
+        expect($('.ons-js-exclusive-alert').attr('data-group-adjective')).toBe('Group was unselected');
+        expect($('.ons-js-exclusive-alert').attr('data-option-adjective')).toBe('Exclusive option was unselected');
+    });
 
-      expect(checkboxSpy.occurrences).toContainEqual({
-        id: 'example-option-id',
-        name: 'example-option-name',
-        value: 'example-option-value',
-        checked: false,
-        classes: 'extra-option-class',
-        attributes: {
-          'data-attribute': 'Example attribute',
-        },
-        deselectMessage: 'Selecting this will uncheck all other checkboxes',
-        inputClasses: 'ons-js-exclusive-option',
-        label: {
-          text: '<span class="ons-u-vh">Or, </span> Example option text',
-          description: 'Example option description',
-        },
-      });
+    describe('mode: with single checkbox', () => {
+        it('renders visually hidden "Or" label', () => {
+            const $ = cheerio.load(renderComponent('mutually-exclusive', EXAMPLE_MUTUALLY_EXCLUSIVE, FAKE_FIELD));
+
+            expect($('.ons-checkboxes__label').text().trim()).toBe('Or');
+        });
+
+        it('renders a checkbox component with the expected parameters', () => {
+            const faker = templateFaker();
+            const checkboxSpy = faker.spy('checkboxes/checkbox');
+
+            faker.renderComponent('mutually-exclusive', EXAMPLE_MUTUALLY_EXCLUSIVE, FAKE_FIELD);
+
+            expect(checkboxSpy.occurrences).toContainEqual({
+                id: 'example-option-id',
+                name: 'example-option-name',
+                value: 'example-option-value',
+                checked: false,
+                classes: 'extra-option-class',
+                attributes: {
+                    'data-attribute': 'Example attribute',
+                },
+                deselectMessage: 'Selecting this will uncheck all other checkboxes',
+                inputClasses: 'ons-js-exclusive-option',
+                label: {
+                    text: '<span class="ons-u-vh">Or, </span> Example option text',
+                    description: 'Example option description',
+                },
+            });
+        });
     });
-  });
 
-  describe('mode: with multiple radio options', () => {
-    it('renders visually hidden "Or" label', () => {
-      const $ = cheerio.load(renderComponent('mutually-exclusive', EXAMPLE_MUTUALLY_EXCLUSIVE_RADIOS, FAKE_FIELD));
+    describe('mode: with multiple radio options', () => {
+        it('renders visually hidden "Or" label', () => {
+            const $ = cheerio.load(renderComponent('mutually-exclusive', EXAMPLE_MUTUALLY_EXCLUSIVE_RADIOS, FAKE_FIELD));
 
-      expect($('.ons-checkboxes__label').text().trim()).toBe('Or');
-    });
+            expect($('.ons-checkboxes__label').text().trim()).toBe('Or');
+        });
 
-    it('renders a radios component with the expected parameters', () => {
-      const faker = templateFaker();
-      const radiosSpy = faker.spy('radios');
+        it('renders a radios component with the expected parameters', () => {
+            const faker = templateFaker();
+            const radiosSpy = faker.spy('radios');
 
-      faker.renderComponent('mutually-exclusive', EXAMPLE_MUTUALLY_EXCLUSIVE_RADIOS, FAKE_FIELD);
+            faker.renderComponent('mutually-exclusive', EXAMPLE_MUTUALLY_EXCLUSIVE_RADIOS, FAKE_FIELD);
 
-      expect(radiosSpy.occurrences).toContainEqual({
-        dontWrap: true,
-        radios: EXAMPLE_MUTUALLY_EXCLUSIVE_RADIOS.exclusiveOptions,
-        inputClasses: 'ons-js-exclusive-option',
-        name: 'mutuallyExclusiveRadio',
-        deselectMessage: 'Selecting this will uncheck all other checkboxes',
-      });
+            expect(radiosSpy.occurrences).toContainEqual({
+                dontWrap: true,
+                radios: EXAMPLE_MUTUALLY_EXCLUSIVE_RADIOS.exclusiveOptions,
+                inputClasses: 'ons-js-exclusive-option',
+                name: 'mutuallyExclusiveRadio',
+                deselectMessage: 'Selecting this will uncheck all other checkboxes',
+            });
+        });
     });
-  });
 });

package/components/mutually-exclusive/example-mutually-exclusive-checkboxes.njk

@@ -1,10 +1,12 @@
 {% from "components/checkboxes/_macro.njk" import onsCheckboxes %}
 {% from "components/question/_macro.njk" import onsQuestion %}
 
-{% call onsQuestion({
-    "title": "What type of central heating do you have?",
-    "legendIsQuestionTitle": true
-}) %}
+{%
+    call onsQuestion({
+        "title": "What type of central heating do you have?",
+        "legendIsQuestionTitle": true
+    })
+%}
     {{
         onsCheckboxes({
             "id": "central-heating-answers",

package/components/mutually-exclusive/example-mutually-exclusive-date.njk

@@ -1,11 +1,13 @@
 {% from "components/date-input/_macro.njk" import onsDateInput %}
 {% from "components/question/_macro.njk" import onsQuestion %}
 
-{% call onsQuestion({
-    "title": "When did you leave your last paid job?",
-    "description": "<p>For example, 31 3 2018</p>",
-    "legendIsQuestionTitle": true
-}) %}
+{%
+    call onsQuestion({
+        "title": "When did you leave your last paid job?",
+        "description": "<p>For example, 31 3 2018</p>",
+        "legendIsQuestionTitle": true
+    })
+%}
     {{
         onsDateInput({
             "id": "date-mutually-exclusive",

package/components/mutually-exclusive/example-mutually-exclusive-duration.njk

@@ -1,45 +1,49 @@
 {% from "components/question/_macro.njk" import onsQuestion %}
 {% from "components/duration/_macro.njk" import onsDuration %}
 
-{% call onsQuestion({
-    "title": "How long have you lived at this address?",
-    "description": "<p>Enter “0” into the years field if you have lived at this address for less than a year</p>",
-    "legendIsQuestionTitle": true
-}) %}
-    {{ onsDuration({
-        "id": "address-duration",
-        "dontWrap": true,
-        "field1": {
-            "id": "address-duration-years",
-            "name": "address-duration-years",
-            "suffix": {
-                "text": "Years",
-                "id": "address-duration-years-suffix"
-            }
-        },
-        "field2": {
-            "id": "address-duration-months",
-            "name": "address-duration-months",
-            "suffix": {
-                "text": "Months",
-                "id": "address-duration-months-suffix"
-            }
-        },
-        "mutuallyExclusive": {
-            "or": "Or",
-            "deselectMessage": "Selecting this will clear the date if one has been inputted",
-            "deselectGroupAdjective": "cleared",
-            "deselectExclusiveOptionAdjective": "deselected",
-            "exclusiveOptions": [
-                {
-                    "id": "duration-exclusive-checkbox",
-                    "name": "no-duration",
-                    "value": "no-duration",
-                    "label": {
-                        "text": "I have not moved in to this address yet"
-                    }
+{%
+    call onsQuestion({
+        "title": "How long have you lived at this address?",
+        "description": "<p>Enter “0” into the years field if you have lived at this address for less than a year</p>",
+        "legendIsQuestionTitle": true
+    })
+%}
+    {{
+        onsDuration({
+            "id": "address-duration",
+            "dontWrap": true,
+            "field1": {
+                "id": "address-duration-years",
+                "name": "address-duration-years",
+                "suffix": {
+                    "text": "Years",
+                    "id": "address-duration-years-suffix"
                 }
-            ]
-        }
-    }) }}
+            },
+            "field2": {
+                "id": "address-duration-months",
+                "name": "address-duration-months",
+                "suffix": {
+                    "text": "Months",
+                    "id": "address-duration-months-suffix"
+                }
+            },
+            "mutuallyExclusive": {
+                "or": "Or",
+                "deselectMessage": "Selecting this will clear the date if one has been inputted",
+                "deselectGroupAdjective": "cleared",
+                "deselectExclusiveOptionAdjective": "deselected",
+                "exclusiveOptions": [
+                    {
+                        "id": "duration-exclusive-checkbox",
+                        "name": "no-duration",
+                        "value": "no-duration",
+                        "label": {
+                            "text": "I have not moved in to this address yet"
+                        }
+                    }
+                ]
+            }
+        })
+    }}
 {% endcall %}

package/components/mutually-exclusive/example-mutually-exclusive-email.njk

@@ -1,11 +1,13 @@
 {% from "components/input/_macro.njk" import onsInput %}
 {% from "components/question/_macro.njk" import onsQuestion %}
 
-{% call onsQuestion({
-    "title": "Get a confirmation email",
-    "description": "<p>Enter your email address if you would like to be sent confirmation that you have completed your survey</p>",
-    "legendIsQuestionTitle": true
-}) %}
+{%
+    call onsQuestion({
+        "title": "Get a confirmation email",
+        "description": "<p>Enter your email address if you would like to be sent confirmation that you have completed your survey</p>",
+        "legendIsQuestionTitle": true
+    })
+%}
     {{
         onsInput({
             "id": "email-example-mutually-exclusive",

package/components/mutually-exclusive/example-mutually-exclusive-multiple-options.njk

@@ -1,10 +1,12 @@
 {% from "components/checkboxes/_macro.njk" import onsCheckboxes %}
 {% from "components/question/_macro.njk" import onsQuestion %}
 
-{% call onsQuestion({
-    "title": "What type of central heating do you have?",
-    "legendIsQuestionTitle": true
-}) %}
+{%
+    call onsQuestion({
+        "title": "What type of central heating do you have?",
+        "legendIsQuestionTitle": true
+    })
+%}
     {{
         onsCheckboxes({
             "id": "central-heating-answers",

package/components/mutually-exclusive/example-mutually-exclusive-number.njk

@@ -1,10 +1,12 @@
 {% from "components/input/_macro.njk" import onsInput %}
 {% from "components/question/_macro.njk" import onsQuestion %}
 
-{% call onsQuestion({
-    "title": "What was your annual income before tax in 2018/19?",
-    "legendIsQuestionTitle": true
-}) %}
+{%
+    call onsQuestion({
+        "title": "What was your annual income before tax in 2018/19?",
+        "legendIsQuestionTitle": true
+    })
+%}
     {{
         onsInput({
             "id": "currency",

package/components/mutually-exclusive/example-mutually-exclusive-textarea.njk

@@ -1,10 +1,12 @@
 {% from "components/textarea/_macro.njk" import onsTextarea %}
 {% from "components/question/_macro.njk" import onsQuestion %}
 
-{% call onsQuestion({
-    "title": "What do you think of this service?",
-    "legendIsQuestionTitle": true
-}) %}
+{%
+    call onsQuestion({
+        "title": "What do you think of this service?",
+        "legendIsQuestionTitle": true
+    })
+%}
     {{
         onsTextarea({
             "id": "feedback",