@ons/design-system 70.0.7 → 70.0.9

package/components/accordion/accordion.js

@@ -1,64 +1,64 @@
 export default class Accordion {
-  constructor(button, detailsEls) {
-    this.openDetailsEls = 0;
+    constructor(button, detailsEls) {
+        this.openDetailsEls = 0;
 
-    this.button = button;
-    this.buttonInner = button.querySelector('.ons-accordion__toggle-all-inner');
-    this.group = button.getAttribute('data-group');
-    this.detailsEls = detailsEls.filter((details) => details.group === this.group);
-    this.totalDetailsEls = this.detailsEls.length;
-    this.buttonOpenEl = this.buttonInner.querySelector('.ons-btn__text');
-    this.buttonOpen = this.buttonOpenEl.innerHTML.trim();
-    this.closeButton = button.getAttribute('data-close-all');
-    this.open = this.detailsEls.find((details) => details.open === true);
+        this.button = button;
+        this.buttonInner = button.querySelector('.ons-accordion__toggle-all-inner');
+        this.group = button.getAttribute('data-group');
+        this.detailsEls = detailsEls.filter((details) => details.group === this.group);
+        this.totalDetailsEls = this.detailsEls.length;
+        this.buttonOpenEl = this.buttonInner.querySelector('.ons-btn__text');
+        this.buttonOpen = this.buttonOpenEl.innerHTML.trim();
+        this.closeButton = button.getAttribute('data-close-all');
+        this.open = this.detailsEls.find((details) => details.open === true);
 
-    this.detailsEls.forEach((details) => {
-      details.onOpen = this.onOpen.bind(this);
-      details.onClose = this.onClose.bind(this);
-    });
+        this.detailsEls.forEach((details) => {
+            details.onOpen = this.onOpen.bind(this);
+            details.onClose = this.onClose.bind(this);
+        });
 
-    if (this.open) {
-      this.openDetailsEls = this.totalDetailsEls;
-    }
+        if (this.open) {
+            this.openDetailsEls = this.totalDetailsEls;
+        }
 
-    this.button.addEventListener('click', this.handleButtonClick.bind(this));
-    this.setButton();
-    this.button.classList.remove('ons-u-d-no');
-  }
+        this.button.addEventListener('click', this.handleButtonClick.bind(this));
+        this.setButton();
+        this.button.classList.remove('ons-u-d-no');
+    }
 
-  handleButtonClick(event) {
-    event.preventDefault();
+    handleButtonClick(event) {
+        event.preventDefault();
 
-    const open = !this.canClose();
+        const open = !this.canClose();
 
-    this.detailsEls.forEach((details) => {
-      details.setOpen(open);
-    });
-  }
+        this.detailsEls.forEach((details) => {
+            details.setOpen(open);
+        });
+    }
 
-  onOpen() {
-    this.openDetailsEls++;
-    this.setButton();
-  }
+    onOpen() {
+        this.openDetailsEls++;
+        this.setButton();
+    }
 
-  onClose() {
-    this.openDetailsEls--;
-    this.setButton();
-  }
+    onClose() {
+        this.openDetailsEls--;
+        this.setButton();
+    }
 
-  canClose() {
-    return this.openDetailsEls === this.totalDetailsEls;
-  }
+    canClose() {
+        return this.openDetailsEls === this.totalDetailsEls;
+    }
 
-  setButton() {
-    if (this.canClose()) {
-      this.buttonInner.innerHTML = this.closeButton;
-      this.button.setAttribute('data-ga-label', this.buttonOpen);
-      this.button.setAttribute('aria-expanded', 'true');
-    } else {
-      this.buttonInner.innerHTML = this.buttonOpen;
-      this.button.setAttribute('data-ga-label', this.closeButton);
-      this.button.setAttribute('aria-expanded', 'false');
+    setButton() {
+        if (this.canClose()) {
+            this.buttonInner.innerHTML = this.closeButton;
+            this.button.setAttribute('data-ga-label', this.buttonOpen);
+            this.button.setAttribute('aria-expanded', 'true');
+        } else {
+            this.buttonInner.innerHTML = this.buttonOpen;
+            this.button.setAttribute('data-ga-label', this.closeButton);
+            this.button.setAttribute('aria-expanded', 'false');
+        }
     }
-  }
 }

package/components/accordion/accordion.spec.js

@@ -1,142 +1,142 @@
 import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
 
 const EXAMPLE_ACCORDION_WITH_THREE_ITEMS = {
-  id: 'example-accordion',
-  itemsList: [
-    {
-      title: 'Title for item 1',
-      content: 'Content for item 1',
-    },
-    {
-      title: 'Title for item 2',
-      content: 'Content for item 2',
-    },
-    {
-      title: 'Title for item 3',
-      content: 'Content for item 3',
-    },
-  ],
+    id: 'example-accordion',
+    itemsList: [
+        {
+            title: 'Title for item 1',
+            content: 'Content for item 1',
+        },
+        {
+            title: 'Title for item 2',
+            content: 'Content for item 2',
+        },
+        {
+            title: 'Title for item 3',
+            content: 'Content for item 3',
+        },
+    ],
 };
 
 const EXAMPLE_ACCORDION_WITH_ALL_BUTTON = {
-  ...EXAMPLE_ACCORDION_WITH_THREE_ITEMS,
-  allButton: {
-    open: 'Open all',
-    close: 'Close all',
-    attributes: {
-      'data-test-trigger': true,
+    ...EXAMPLE_ACCORDION_WITH_THREE_ITEMS,
+    allButton: {
+        open: 'Open all',
+        close: 'Close all',
+        attributes: {
+            'data-test-trigger': true,
+        },
     },
-  },
 };
 
 describe('script: accordion', () => {
-  it('begins with all items open when specified', async () => {
-    await setTestPage(
-      '/test',
-      renderComponent('accordion', {
-        ...EXAMPLE_ACCORDION_WITH_THREE_ITEMS,
-        open: true,
-      }),
-    );
+    it('begins with all items open when specified', async () => {
+        await setTestPage(
+            '/test',
+            renderComponent('accordion', {
+                ...EXAMPLE_ACCORDION_WITH_THREE_ITEMS,
+                open: true,
+            }),
+        );
 
-    const detailsElementStates = await page.$$eval('.ons-js-details', (nodes) =>
-      nodes.map((node) => node.classList.contains('ons-details--open')),
-    );
+        const detailsElementStates = await page.$$eval('.ons-js-details', (nodes) =>
+            nodes.map((node) => node.classList.contains('ons-details--open')),
+        );
 
-    expect(detailsElementStates).toEqual([true, true, true]);
-  });
+        expect(detailsElementStates).toEqual([true, true, true]);
+    });
 
-  it('sets toggle all button label to "Hide all" when open is specified', async () => {
-    await setTestPage(
-      '/test',
-      renderComponent('accordion', {
-        ...EXAMPLE_ACCORDION_WITH_ALL_BUTTON,
-        open: true,
-      }),
-    );
+    it('sets toggle all button label to "Hide all" when open is specified', async () => {
+        await setTestPage(
+            '/test',
+            renderComponent('accordion', {
+                ...EXAMPLE_ACCORDION_WITH_ALL_BUTTON,
+                open: true,
+            }),
+        );
 
-    const buttonText = await page.$eval('button[data-test-trigger]', (element) => element.innerText);
-    expect(buttonText.trim()).toBe('Close all');
-  });
+        const buttonText = await page.$eval('button[data-test-trigger]', (element) => element.innerText);
+        expect(buttonText.trim()).toBe('Close all');
+    });
 
-  it('sets toggle all button aria-expanded set to true when open is specified', async () => {
-    await setTestPage(
-      '/test',
-      renderComponent('accordion', {
-        ...EXAMPLE_ACCORDION_WITH_ALL_BUTTON,
-        open: true,
-      }),
-    );
+    it('sets toggle all button aria-expanded set to true when open is specified', async () => {
+        await setTestPage(
+            '/test',
+            renderComponent('accordion', {
+                ...EXAMPLE_ACCORDION_WITH_ALL_BUTTON,
+                open: true,
+            }),
+        );
 
-    const ariaExpanded = await page.$eval('button[data-test-trigger]', (element) => element.getAttribute('aria-expanded'));
-    expect(ariaExpanded).toBe('true');
-  });
+        const ariaExpanded = await page.$eval('button[data-test-trigger]', (element) => element.getAttribute('aria-expanded'));
+        expect(ariaExpanded).toBe('true');
+    });
 
-  it('opens all items when accordion `allbutton` is clicked', async () => {
-    await setTestPage('/test', renderComponent('accordion', EXAMPLE_ACCORDION_WITH_ALL_BUTTON));
+    it('opens all items when accordion `allbutton` is clicked', async () => {
+        await setTestPage('/test', renderComponent('accordion', EXAMPLE_ACCORDION_WITH_ALL_BUTTON));
 
-    await page.click('button[data-test-trigger]');
+        await page.click('button[data-test-trigger]');
 
-    const detailsElementStates = await page.$$eval('.ons-js-details', (nodes) =>
-      nodes.map((node) => node.classList.contains('ons-details--open')),
-    );
+        const detailsElementStates = await page.$$eval('.ons-js-details', (nodes) =>
+            nodes.map((node) => node.classList.contains('ons-details--open')),
+        );
 
-    expect(detailsElementStates).toEqual([true, true, true]);
-  });
+        expect(detailsElementStates).toEqual([true, true, true]);
+    });
 
-  it('closes all items when accordion `allbutton` is clicked twice', async () => {
-    await setTestPage('/test', renderComponent('accordion', EXAMPLE_ACCORDION_WITH_ALL_BUTTON));
+    it('closes all items when accordion `allbutton` is clicked twice', async () => {
+        await setTestPage('/test', renderComponent('accordion', EXAMPLE_ACCORDION_WITH_ALL_BUTTON));
 
-    await page.click('button[data-test-trigger]');
-    await page.click('button[data-test-trigger]');
+        await page.click('button[data-test-trigger]');
+        await page.click('button[data-test-trigger]');
 
-    const detailsElementStates = await page.$$eval('.ons-js-details', (nodes) =>
-      nodes.map((node) => node.classList.contains('ons-details--open')),
-    );
+        const detailsElementStates = await page.$$eval('.ons-js-details', (nodes) =>
+            nodes.map((node) => node.classList.contains('ons-details--open')),
+        );
 
-    expect(detailsElementStates).toEqual([false, false, false]);
-  });
+        expect(detailsElementStates).toEqual([false, false, false]);
+    });
 
-  it('starts with the toggle all button labelled as "Open all"', async () => {
-    await setTestPage('/test', renderComponent('accordion', EXAMPLE_ACCORDION_WITH_ALL_BUTTON));
+    it('starts with the toggle all button labelled as "Open all"', async () => {
+        await setTestPage('/test', renderComponent('accordion', EXAMPLE_ACCORDION_WITH_ALL_BUTTON));
 
-    const buttonText = await page.$eval('button[data-test-trigger]', (element) => element.innerText);
-    expect(buttonText.trim()).toBe('Open all');
-  });
+        const buttonText = await page.$eval('button[data-test-trigger]', (element) => element.innerText);
+        expect(buttonText.trim()).toBe('Open all');
+    });
 
-  it('starts with the toggle all button aria-expanded set to false', async () => {
-    await setTestPage('/test', renderComponent('accordion', EXAMPLE_ACCORDION_WITH_ALL_BUTTON));
+    it('starts with the toggle all button aria-expanded set to false', async () => {
+        await setTestPage('/test', renderComponent('accordion', EXAMPLE_ACCORDION_WITH_ALL_BUTTON));
 
-    const ariaExpanded = await page.$eval('button[data-test-trigger]', (element) => element.getAttribute('aria-expanded'));
-    expect(ariaExpanded).toBe('false');
-  });
+        const ariaExpanded = await page.$eval('button[data-test-trigger]', (element) => element.getAttribute('aria-expanded'));
+        expect(ariaExpanded).toBe('false');
+    });
 
-  it('sets toggle all button label to "Hide all" when clicked', async () => {
-    await setTestPage('/test', renderComponent('accordion', EXAMPLE_ACCORDION_WITH_ALL_BUTTON));
+    it('sets toggle all button label to "Hide all" when clicked', async () => {
+        await setTestPage('/test', renderComponent('accordion', EXAMPLE_ACCORDION_WITH_ALL_BUTTON));
 
-    await page.click('button[data-test-trigger]');
+        await page.click('button[data-test-trigger]');
 
-    const buttonText = await page.$eval('button[data-test-trigger]', (element) => element.innerText);
-    expect(buttonText.trim()).toBe('Close all');
-  });
+        const buttonText = await page.$eval('button[data-test-trigger]', (element) => element.innerText);
+        expect(buttonText.trim()).toBe('Close all');
+    });
 
-  it('sets toggle all button aria-expanded set to true when clicked', async () => {
-    await setTestPage('/test', renderComponent('accordion', EXAMPLE_ACCORDION_WITH_ALL_BUTTON));
+    it('sets toggle all button aria-expanded set to true when clicked', async () => {
+        await setTestPage('/test', renderComponent('accordion', EXAMPLE_ACCORDION_WITH_ALL_BUTTON));
 
-    await page.click('button[data-test-trigger]');
+        await page.click('button[data-test-trigger]');
 
-    const ariaExpanded = await page.$eval('button[data-test-trigger]', (element) => element.getAttribute('aria-expanded'));
-    expect(ariaExpanded).toBe('true');
-  });
+        const ariaExpanded = await page.$eval('button[data-test-trigger]', (element) => element.getAttribute('aria-expanded'));
+        expect(ariaExpanded).toBe('true');
+    });
 
-  it('sets toggle all button label to "Hide all" when all items are shown', async () => {
-    await setTestPage('/test', renderComponent('accordion', EXAMPLE_ACCORDION_WITH_ALL_BUTTON));
+    it('sets toggle all button label to "Hide all" when all items are shown', async () => {
+        await setTestPage('/test', renderComponent('accordion', EXAMPLE_ACCORDION_WITH_ALL_BUTTON));
 
-    await page.click('#example-accordion-1 .ons-details__heading');
-    await page.click('#example-accordion-2 .ons-details__heading');
-    await page.click('#example-accordion-3 .ons-details__heading');
+        await page.click('#example-accordion-1 .ons-details__heading');
+        await page.click('#example-accordion-2 .ons-details__heading');
+        await page.click('#example-accordion-3 .ons-details__heading');
 
-    const buttonText = await page.$eval('button[data-test-trigger]', (element) => element.innerText);
-    expect(buttonText.trim()).toBe('Close all');
-  });
+        const buttonText = await page.$eval('button[data-test-trigger]', (element) => element.innerText);
+        expect(buttonText.trim()).toBe('Close all');
+    });
 });

package/components/accordion/example-accordion-open.njk

@@ -1,7 +1,6 @@
 {% from "components/accordion/_macro.njk" import onsAccordion %}
 {% from "components/checkboxes/_macro.njk" import onsCheckboxes %}
 
-
 {% set content1 %}
     {{
         onsCheckboxes({

package/components/address-input/_macro.njk

@@ -3,10 +3,13 @@
 {% from "components/input/_macro.njk" import onsInput %}
 
 {% macro onsAddressInput(params) %}
-   {% set fields %}
-        <div id="address" class="ons-field ons-address-input {% if not params.manualEntry %}ons-address-input--search ons-js-address-autosuggest{% endif %}">
+    {% set fields %}
+        <div
+            id="address"
+            class="ons-field ons-address-input{{ ' ons-address-input--search ons-js-address-autosuggest' if not params.manualEntry }}"
+        >
             {% if params.isEditable == true or params.manualEntry %}
-                {% if not params.manualEntry %}<div class="ons-js-address-input__manual ons-u-db-no-js_enabled">{% endif %}
+                {% set addressInputs %}
                     {% if params.organisation %}
                         {{
                             onsInput({
@@ -81,11 +84,16 @@
                             })
                         }}
                     {% endif %}
+                {% endset %}
                 {% if not params.manualEntry %}
+                    <div class="ons-js-address-input__manual ons-u-db-no-js_enabled">
+                        {{ addressInputs | safe }}
                         <div class="ons-u-mt-s">
                             <a href="#0" class="ons-js-address-search-btn ons-u-db-no-js_disabled">{{ params.searchButton }}</a>
                         </div>
                     </div>
+                {% else %}
+                    {{ addressInputs | safe }}
                 {% endif %}
             {% endif %}
 
@@ -105,7 +113,7 @@
                 })
             }}
             {% if not params.manualEntry %}
-                <div class="ons-js-address-input__search{% if params.isEditable == true %} ons-u-db-no-js_disabled{% endif %}">
+                <div class="ons-js-address-input__search{{ ' ons-u-db-no-js_disabled' if params.isEditable == true }}">
                     {{
                         onsAutosuggest({
                             "id": params.id + "-autosuggest",
@@ -157,7 +165,9 @@
                         })
                     }}
                     {% if params.manualLinkText %}
-                        <a href="{{ params.manualLink | default('#0') }}" class="ons-js-address-manual-btn ons-u-mt-s ons-u-dib">{{ params.manualLinkText }}</a>
+                        <a href="{{ params.manualLink | default('#0') }}" class="ons-js-address-manual-btn ons-u-mt-s ons-u-dib"
+                            >{{ params.manualLinkText }}</a
+                        >
                     {% endif %}
                 </div>
             {% endif %}
@@ -167,12 +177,14 @@
     {% if params.dontWrap %}
         {{ fields | safe }}
     {% else %}
-        {% call onsFieldset({
-            "id": params.id,
-            "classes": params.classes,
-            "legend": params.legend,
-            "legendClasses": params.legendClasses
-        }) %}
+        {%
+            call onsFieldset({
+                "id": params.id,
+                "classes": params.classes,
+                "legend": params.legend,
+                "legendClasses": params.legendClasses
+            })
+        %}
             {{ fields | safe }}
         {% endcall %}
     {% endif %}