@ons/design-system 70.0.7 → 70.0.9

package/components/access-code/example-access-code-error.njk

@@ -1,22 +1,26 @@
 ---
-title: "Example: Access code error"
+title: 'Example: Access code error'
 layout: ~
 ---
+
 {% extends "layout/_template.njk" %}
 {% from "components/access-code/_macro.njk" import onsAccessCode %}
 {% from "components/button/_macro.njk" import onsButton %}
 {% from "components/panel/_macro.njk" import onsPanel %}
 {% from "components/details/_macro.njk" import onsDetails %}
-
-{% set pageConfig = {
-    "title": "Study title"
-} %}
+{%
+    set pageConfig = {
+        "title": "Study title"
+    }
+%}
 
 {% block main %}
-    {% call onsPanel({
-        "title": "There is a problem with this page",
-        "variant": "error"
-    }) %}
+    {%
+        call onsPanel({
+            "title": "There is a problem with this page",
+            "variant": "error"
+        })
+    %}
         {% from "components/list/_macro.njk" import onsList %}
         {{
             onsList({
@@ -34,46 +38,54 @@ layout: ~
 
     <h1 class="ons-u-mt-l">Start study</h1>
 
-    {{ onsAccessCode({
-        "id": "access-code",
-        "name": "access-code",
-        "postTextboxLinkText": "Where to find your access code",
-        "postTextboxLinkUrl": "#0",
-        "label": {
-            "text": "Enter your 16-character access code",
-            "description": "Keep this code safe. You will need to enter it every time you access your survey"
-        },
-        "securityMessage": "Your personal information is protected by law and will be kept confidential",
-        "error": {
-            "id": "access-code-error",
-            "text": "Enter an access code"
-        }
-    }) }}
+    {{
+        onsAccessCode({
+            "id": "access-code",
+            "name": "access-code",
+            "postTextboxLinkText": "Where to find your access code",
+            "postTextboxLinkUrl": "#0",
+            "label": {
+                "text": "Enter your 16-character access code",
+                "description": "Keep this code safe. You will need to enter it every time you access your survey"
+            },
+            "securityMessage": "Your personal information is protected by law and will be kept confidential",
+            "error": {
+                "id": "access-code-error",
+                "text": "Enter an access code"
+            }
+        })
+    }}
 
-    {{ onsButton({
-        "text": "Access study",
-        "classes": "ons-u-mb-xl"
-    }) }}
+    {{
+        onsButton({
+            "text": "Access study",
+            "classes": "ons-u-mb-xl"
+        })
+    }}
 
     <h2>If you do not have an access code</h2>
     <p>
-        If you have lost or not received an access code, you can <a href="#0">request a new access code</a>.
-        This can be sent to you by text or post.
+        If you have lost or not received an access code, you can <a href="#0">request a new access code</a>. This can be sent to you by text
+        or post.
     </p>
 
     {% set content %}
         <p>If you need to answer separately from the people you live with, you can <a href="#0">request an individual access code</a>.</p>
-        {% call onsPanel({
-            "variant": "warn"
-        }) %}
+        {%
+            call onsPanel({
+                "variant": "warn"
+            })
+        %}
             Someone in your household must still complete a study using this household access code
         {% endcall %}
     {% endset %}
 
-    {% call onsDetails({
-        "id": "details-access-code-error",
-        "title": "Need to answer separately from your household?"
-    }) %}
+    {%
+        call onsDetails({
+            "id": "details-access-code-error",
+            "title": "Need to answer separately from your household?"
+        })
+    %}
         {{ content | safe }}
     {% endcall %}
 {% endblock %}

package/components/access-code/example-access-code.njk

@@ -1,58 +1,68 @@
 ---
-title: "Example: Access code"
+title: 'Example: Access code'
 layout: ~
 ---
+
 {% extends "layout/_template.njk" %}
 {% from "components/access-code/_macro.njk" import onsAccessCode %}
 {% from "components/button/_macro.njk" import onsButton %}
 {% from "components/panel/_macro.njk" import onsPanel %}
 {% from "components/details/_macro.njk" import onsDetails %}
-
-{% set pageConfig = {
-    "header": {
-        "title": "Study title"
+{%
+    set pageConfig = {
+        "header": {
+            "title": "Study title"
+        }
     }
-} %}
+%}
 
 {% block main %}
     <h1 class="ons-u-mt-l">Start study</h1>
 
-    {{ onsAccessCode({
-        "id": "access-code-example",
-        "name": "access-code",
-        "postTextboxLinkText": "Where to find your access code",
-        "postTextboxLinkUrl": "#0",
-        "label": {
-            "text": "Enter your 16-character access code",
-            "description": "Keep this code safe. You will need to enter it every time you access your study"
-        },
-        "securityMessage": "Your personal information is protected by law and will be kept confidential"
-    }) }}
+    {{
+        onsAccessCode({
+            "id": "access-code-example",
+            "name": "access-code",
+            "postTextboxLinkText": "Where to find your access code",
+            "postTextboxLinkUrl": "#0",
+            "label": {
+                "text": "Enter your 16-character access code",
+                "description": "Keep this code safe. You will need to enter it every time you access your study"
+            },
+            "securityMessage": "Your personal information is protected by law and will be kept confidential"
+        })
+    }}
 
-    {{ onsButton({
-        "text": "Access study",
-        "classes": "ons-u-mb-xl"
-    }) }}
+    {{
+        onsButton({
+            "text": "Access study",
+            "classes": "ons-u-mb-xl"
+        })
+    }}
 
     <h2>If you do not have an access code</h2>
     <p>
-        If you have lost or not received an access code, you can <a href="#0">request a new access code</a>.
-        This can be sent to you by text or post.
+        If you have lost or not received an access code, you can <a href="#0">request a new access code</a>. This can be sent to you by text
+        or post.
     </p>
 
     {% set content %}
         <p>If you need to answer separately from the people you live with, you can <a href="#0">request an individual access code</a>.</p>
-        {% call onsPanel({
-            "variant": "warn"
-        }) %}
+        {%
+            call onsPanel({
+                "variant": "warn"
+            })
+        %}
             Someone in your household must still complete a study using this household access code
         {% endcall %}
     {% endset %}
 
-    {% call onsDetails({
-        "id": "details",
-        "title": "Need to answer separately from your household?"
-    }) %}
+    {%
+        call onsDetails({
+            "id": "details",
+            "title": "Need to answer separately from your household?"
+        })
+    %}
         {{ content | safe }}
     {% endcall %}
 {% endblock %}

package/components/accordion/_macro.njk

@@ -1,15 +1,16 @@
 {% macro onsAccordion(params) %}
     {% from "components/details/_macro.njk" import onsDetails %}
 
-    <div id="{{params.id}}" class="ons-accordion{{ ' ' + params.classes if params.classes }}">
+    <div id="{{ params.id }}" class="ons-accordion{{ ' ' + params.classes if params.classes else '' }}">
         {% if params.allButton %}
             {% from "components/button/_macro.njk" import onsButton %}
             {% set attributes = params.allButton.attributes | default({}) %}
-
-            {% set attributes = attributes | setAttributes({
-                "data-close-all": params.allButton.close,
-                "data-group": params.id
-            }) %}
+            {%
+                set attributes = attributes | setAttributes({
+                    "data-close-all": params.allButton.close,
+                    "data-group": params.id
+                })
+            %}
 
             {{
                 onsButton({

package/components/accordion/_macro.spec.js

@@ -6,176 +6,176 @@ import axe from '../../tests/helpers/axe';
 import { renderComponent } from '../../tests/helpers/rendering';
 
 const EXAMPLE_ACCORDION_WITH_TWO_ITEMS = {
-  id: 'accordion-identifier',
-  itemsList: [
-    {
-      title: 'Title for item 1',
-      content: 'Content for item 1',
-    },
-    {
-      title: 'Title for item 2',
-      content: 'Content for item 2',
-    },
-  ],
+    id: 'accordion-identifier',
+    itemsList: [
+        {
+            title: 'Title for item 1',
+            content: 'Content for item 1',
+        },
+        {
+            title: 'Title for item 2',
+            content: 'Content for item 2',
+        },
+    ],
 };
 
 const EXAMPLE_ACCORDION = {
-  ...EXAMPLE_ACCORDION_WITH_TWO_ITEMS,
-  allButton: {
-    open: 'Open label',
-    close: 'Close label',
-  },
+    ...EXAMPLE_ACCORDION_WITH_TWO_ITEMS,
+    allButton: {
+        open: 'Open label',
+        close: 'Close label',
+    },
 };
 
 describe('macro: accordion', () => {
-  it('passes jest-axe checks', async () => {
-    const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION));
-
-    const results = await axe($.html());
-    expect(results).toHaveNoViolations();
-  });
-
-  it('has the provided `id` attribute', () => {
-    const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION_WITH_TWO_ITEMS));
-
-    expect($('.ons-accordion').attr('id')).toBe('accordion-identifier');
-  });
-
-  it('has additionally provided style classes', () => {
-    const $ = cheerio.load(
-      renderComponent('accordion', {
-        ...EXAMPLE_ACCORDION_WITH_TWO_ITEMS,
-        classes: 'extra-class another-extra-class',
-      }),
-    );
+    it('passes jest-axe checks', async () => {
+        const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION));
 
-    expect($('.ons-accordion').hasClass('extra-class')).toBe(true);
-    expect($('.ons-accordion').hasClass('another-extra-class')).toBe(true);
-  });
-
-  describe('item', () => {
-    it('has provided title text', () => {
-      const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION_WITH_TWO_ITEMS));
-
-      const titleText = $('.ons-details__title').first().text().trim();
-      expect(titleText).toBe('Title for item 1');
-    });
-
-    it('has title with provided tag override', () => {
-      const $ = cheerio.load(
-        renderComponent('accordion', {
-          itemsList: [
-            {
-              title: 'Title for item 1',
-              titleTag: 'h5',
-              content: 'Content for item 1',
-            },
-          ],
-        }),
-      );
-
-      const titleTag = $('.ons-details__title')[0].tagName;
-      expect(titleTag).toBe('h5');
+        const results = await axe($.html());
+        expect(results).toHaveNoViolations();
     });
 
-    it('has provided content text', () => {
-      const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION_WITH_TWO_ITEMS));
+    it('has the provided `id` attribute', () => {
+        const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION_WITH_TWO_ITEMS));
 
-      const titleText = $('.ons-details__content').first().text().trim();
-      expect(titleText).toBe('Content for item 1');
+        expect($('.ons-accordion').attr('id')).toBe('accordion-identifier');
     });
 
-    it('has additionally provided `attributes`', () => {
-      const $ = cheerio.load(
-        renderComponent('accordion', {
-          itemsList: [
-            {
-              title: 'Title for item 1',
-              attributes: {
-                a: 123,
-                b: 456,
-              },
-            },
-          ],
-        }),
-      );
-
-      expect($('.ons-details').attr('a')).toBe('123');
-      expect($('.ons-details').attr('b')).toBe('456');
-    });
+    it('has additionally provided style classes', () => {
+        const $ = cheerio.load(
+            renderComponent('accordion', {
+                ...EXAMPLE_ACCORDION_WITH_TWO_ITEMS,
+                classes: 'extra-class another-extra-class',
+            }),
+        );
 
-    it('has additionally provided `headingAttributes`', () => {
-      const $ = cheerio.load(
-        renderComponent('accordion', {
-          itemsList: [
-            {
-              title: 'Title for item 1',
-              headingAttributes: {
-                a: 123,
-                b: 456,
-              },
-            },
-          ],
-        }),
-      );
-
-      expect($('.ons-details__heading').attr('a')).toBe('123');
-      expect($('.ons-details__heading').attr('b')).toBe('456');
+        expect($('.ons-accordion').hasClass('extra-class')).toBe(true);
+        expect($('.ons-accordion').hasClass('another-extra-class')).toBe(true);
     });
 
-    it('has additionally provided `contentAttributes`', () => {
-      const $ = cheerio.load(
-        renderComponent('accordion', {
-          itemsList: [
-            {
-              title: 'Title for item 1',
-              content: 'Content for item 1',
-              contentAttributes: {
-                a: 123,
-                b: 456,
-              },
-            },
-          ],
-        }),
-      );
-
-      expect($('.ons-details__content').attr('a')).toBe('123');
-      expect($('.ons-details__content').attr('b')).toBe('456');
-    });
-  });
-
-  describe('toggle all button', () => {
-    it('outputs a button with the expected class', () => {
-      const $ = cheerio.load(
-        renderComponent('accordion', {
-          ...EXAMPLE_ACCORDION_WITH_TWO_ITEMS,
-          allButton: {
-            open: 'Open label',
-            close: 'Close label',
-          },
-        }),
-      );
-
-      expect($('button.ons-accordion__toggle-all').length).toBe(1);
+    describe('item', () => {
+        it('has provided title text', () => {
+            const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION_WITH_TWO_ITEMS));
+
+            const titleText = $('.ons-details__title').first().text().trim();
+            expect(titleText).toBe('Title for item 1');
+        });
+
+        it('has title with provided tag override', () => {
+            const $ = cheerio.load(
+                renderComponent('accordion', {
+                    itemsList: [
+                        {
+                            title: 'Title for item 1',
+                            titleTag: 'h5',
+                            content: 'Content for item 1',
+                        },
+                    ],
+                }),
+            );
+
+            const titleTag = $('.ons-details__title')[0].tagName;
+            expect(titleTag).toBe('h5');
+        });
+
+        it('has provided content text', () => {
+            const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION_WITH_TWO_ITEMS));
+
+            const titleText = $('.ons-details__content').first().text().trim();
+            expect(titleText).toBe('Content for item 1');
+        });
+
+        it('has additionally provided `attributes`', () => {
+            const $ = cheerio.load(
+                renderComponent('accordion', {
+                    itemsList: [
+                        {
+                            title: 'Title for item 1',
+                            attributes: {
+                                a: 123,
+                                b: 456,
+                            },
+                        },
+                    ],
+                }),
+            );
+
+            expect($('.ons-details').attr('a')).toBe('123');
+            expect($('.ons-details').attr('b')).toBe('456');
+        });
+
+        it('has additionally provided `headingAttributes`', () => {
+            const $ = cheerio.load(
+                renderComponent('accordion', {
+                    itemsList: [
+                        {
+                            title: 'Title for item 1',
+                            headingAttributes: {
+                                a: 123,
+                                b: 456,
+                            },
+                        },
+                    ],
+                }),
+            );
+
+            expect($('.ons-details__heading').attr('a')).toBe('123');
+            expect($('.ons-details__heading').attr('b')).toBe('456');
+        });
+
+        it('has additionally provided `contentAttributes`', () => {
+            const $ = cheerio.load(
+                renderComponent('accordion', {
+                    itemsList: [
+                        {
+                            title: 'Title for item 1',
+                            content: 'Content for item 1',
+                            contentAttributes: {
+                                a: 123,
+                                b: 456,
+                            },
+                        },
+                    ],
+                }),
+            );
+
+            expect($('.ons-details__content').attr('a')).toBe('123');
+            expect($('.ons-details__content').attr('b')).toBe('456');
+        });
     });
 
-    it('has additionally provided `attributes`', () => {
-      const $ = cheerio.load(
-        renderComponent('accordion', {
-          ...EXAMPLE_ACCORDION_WITH_TWO_ITEMS,
-          allButton: {
-            open: 'Open label',
-            close: 'Close label',
-            attributes: {
-              a: 123,
-              b: 456,
-            },
-          },
-        }),
-      );
-
-      expect($('button.ons-accordion__toggle-all').attr('a')).toBe('123');
-      expect($('button.ons-accordion__toggle-all').attr('b')).toBe('456');
+    describe('toggle all button', () => {
+        it('outputs a button with the expected class', () => {
+            const $ = cheerio.load(
+                renderComponent('accordion', {
+                    ...EXAMPLE_ACCORDION_WITH_TWO_ITEMS,
+                    allButton: {
+                        open: 'Open label',
+                        close: 'Close label',
+                    },
+                }),
+            );
+
+            expect($('button.ons-accordion__toggle-all').length).toBe(1);
+        });
+
+        it('has additionally provided `attributes`', () => {
+            const $ = cheerio.load(
+                renderComponent('accordion', {
+                    ...EXAMPLE_ACCORDION_WITH_TWO_ITEMS,
+                    allButton: {
+                        open: 'Open label',
+                        close: 'Close label',
+                        attributes: {
+                            a: 123,
+                            b: 456,
+                        },
+                    },
+                }),
+            );
+
+            expect($('button.ons-accordion__toggle-all').attr('a')).toBe('123');
+            expect($('button.ons-accordion__toggle-all').attr('b')).toBe('456');
+        });
     });
-  });
 });

package/components/accordion/accordion.dom.js

@@ -1,19 +1,19 @@
 import domready from '../../js/domready';
 
 async function initialiseAccordions() {
-  const toggleAllButtons = [...document.querySelectorAll('.ons-accordion__toggle-all')];
+    const toggleAllButtons = [...document.querySelectorAll('.ons-accordion__toggle-all')];
 
-  if (toggleAllButtons.length) {
-    const detailsComponents = [...document.querySelectorAll('.ons-js-details')];
+    if (toggleAllButtons.length) {
+        const detailsComponents = [...document.querySelectorAll('.ons-js-details')];
 
-    const Details = (await import('../details/details')).default;
-    const Accordion = (await import('./accordion')).default;
-    const detailsEls = detailsComponents.map((element) => new Details(element));
+        const Details = (await import('../details/details')).default;
+        const Accordion = (await import('./accordion')).default;
+        const detailsEls = detailsComponents.map((element) => new Details(element));
 
-    toggleAllButtons.forEach((button) => {
-      new Accordion(button, detailsEls);
-    });
-  }
+        toggleAllButtons.forEach((button) => {
+            new Accordion(button, detailsEls);
+        });
+    }
 }
 
 domready(initialiseAccordions);