@ons/design-system 67.2.0 → 68.0.1

package/README.md

@@ -153,3 +153,9 @@ yarn build
 - [Sass](https://marketplace.visualstudio.com/items?itemName=robinbentley.sass-indented)
 - [Stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint)
 - [vscode-remark-lint](https://marketplace.visualstudio.com/items?itemName=drewbourne.vscode-remark-lint)
+
+## Recommended Visual Studio Code settings for this project
+
+- "render whitespace" set to "all"
+- "insert spaces when pressing tab" checked
+- "trim trailing whitespace" checked

package/components/access-code/_macro.njk

@@ -38,7 +38,7 @@
 
     {% if params.securityMessage %}
         {% call onsPanel({
-            "type": "bare",
+            "variant": "bare",
             "iconType": "lock",
             "classes": "ons-u-mb-s"
         }) %}

package/components/access-code/_macro.spec.js

@@ -124,11 +124,7 @@ describe('macro: access-code', () => {
       }),
     );
 
-    expect(
-      $('.ons-panel__body')
-        .text()
-        .trim(),
-    ).toBe('Example security message.');
+    expect($('.ons-panel__body').text().trim()).toBe('Example security message.');
   });
 
   it('has provided `postTextBoxLinkText` and `postTextBoxLinkUrl`', () => {
@@ -139,11 +135,7 @@ describe('macro: access-code', () => {
       }),
     );
 
-    expect(
-      $('a[href="#3"]')
-        .text()
-        .trim(),
-    ).toBe('Example link text');
+    expect($('a[href="#3"]').text().trim()).toBe('Example link text');
   });
 
   it('has provided `error` output', () => {

package/components/access-code/access-code.dom.js

@@ -6,6 +6,6 @@ domready(async () => {
   if (accessCodeInputs.length) {
     const accessCode = (await import('./access-code')).default;
 
-    accessCodeInputs.forEach(element => new accessCode(element));
+    accessCodeInputs.forEach((element) => new accessCode(element));
   }
 });

package/components/access-code/access-code.spec.js

@@ -14,12 +14,12 @@ describe('script: access-code', () => {
       await page.focus('#test-access-code');
       await page.keyboard.type('1234');
 
-      const valueSample1 = await page.$eval('#test-access-code', element => element.value);
+      const valueSample1 = await page.$eval('#test-access-code', (element) => element.value);
       expect(valueSample1).toBe('1234');
 
       await page.keyboard.type('5678');
 
-      const valueSample2 = await page.$eval('#test-access-code', element => element.value);
+      const valueSample2 = await page.$eval('#test-access-code', (element) => element.value);
       expect(valueSample2).toBe('12345 678');
     });
   });

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

@@ -9,17 +9,14 @@ layout: ~
 {% from "components/details/_macro.njk" import onsDetails %}
 
 {% set pageConfig = {
-  "title": "Study title"
+    "title": "Study title"
 } %}
 
 {% block main %}
-    {% call
-        onsPanel({
-            title: "There is a problem with this page",
-            type: "error"
-        })
-    %}
-
+    {% call onsPanel({
+        "title": "There is a problem with this page",
+        "variant": "error"
+    }) %}
         {% from "components/list/_macro.njk" import onsList %}
         {{
             onsList({
@@ -67,18 +64,16 @@ layout: ~
     {% 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({
-                "type": "warn"
-            })
-        %}
+            "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",
+        "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

@@ -43,9 +43,8 @@ layout: ~
     {% 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({
-                type: "warn"
-            })
-        %}
+            "variant": "warn"
+        }) %}
             Someone in your household must still complete a study using this household access code
         {% endcall %}
     {% endset %}
@@ -53,8 +52,7 @@ layout: ~
     {% call onsDetails({
         "id": "details",
         "title": "Need to answer separately from your household?"
-        })
-    %}
+    }) %}
         {{ content | safe }}
     {% endcall %}
 {% endblock %}

package/components/accordion/accordion.js

@@ -5,14 +5,14 @@ export default class Accordion {
     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.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.open = this.detailsEls.find((details) => details.open === true);
 
-    this.detailsEls.forEach(details => {
+    this.detailsEls.forEach((details) => {
       details.onOpen = this.onOpen.bind(this);
       details.onClose = this.onClose.bind(this);
     });
@@ -31,7 +31,7 @@ export default class Accordion {
 
     const open = !this.canClose();
 
-    this.detailsEls.forEach(details => {
+    this.detailsEls.forEach((details) => {
       details.setOpen(open);
     });
   }

package/components/address-input/_macro.spec.js

@@ -240,11 +240,7 @@ describe('macro: address-input', () => {
         }),
       );
 
-      expect(
-        $('.ons-js-address-search-btn')
-          .text()
-          .trim(),
-      ).toBe('Search for address');
+      expect($('.ons-js-address-search-btn').text().trim()).toBe('Search for address');
     });
   });
 
@@ -408,11 +404,7 @@ describe('macro: address-input', () => {
       );
 
       expect($('.ons-js-address-manual-btn').attr('href')).toBe('#0');
-      expect(
-        $('.ons-js-address-manual-btn')
-          .text()
-          .trim(),
-      ).toBe('Manually enter address');
+      expect($('.ons-js-address-manual-btn').text().trim()).toBe('Manually enter address');
     });
 
     it('renders `manualLinkText` with `manualLink` when provided', () => {
@@ -425,11 +417,7 @@ describe('macro: address-input', () => {
       );
 
       expect($('.ons-js-address-manual-btn').attr('href')).toBe('https://example.com/edit-address');
-      expect(
-        $('.ons-js-address-manual-btn')
-          .text()
-          .trim(),
-      ).toBe('Manually enter address');
+      expect($('.ons-js-address-manual-btn').text().trim()).toBe('Manually enter address');
     });
   });
 

package/components/address-input/autosuggest.address.dom.js

@@ -6,7 +6,7 @@ async function initialiseAddressAutosuggests() {
   if (addressAutosuggests.length) {
     const AutosuggestAddress = (await import('./autosuggest.address')).default;
 
-    addressAutosuggests.forEach(addressAutosuggest => new AutosuggestAddress(addressAutosuggest));
+    addressAutosuggests.forEach((addressAutosuggest) => new AutosuggestAddress(addressAutosuggest));
   }
 }
 

package/components/address-input/autosuggest.address.js

@@ -224,7 +224,7 @@ export default class AutosuggestAddress {
     for (const item of items) {
       if (item.addressCount === 1 && item.firstUprn !== 0) {
         let result = await this.createAddressObject(item.firstUprn);
-        const matchingItem = items.findIndex(x => x.firstUprn == result.uprn);
+        const matchingItem = items.findIndex((x) => x.firstUprn == result.uprn);
         items[matchingItem] = result;
       }
     }
@@ -244,7 +244,8 @@ export default class AutosuggestAddress {
   }
 
   testFullPostcodeQuery(input) {
-    const fullPostcodeRegex = /\b((?:(?:gir)|(?:[a-pr-uwyz])(?:(?:[0-9](?:[a-hjkpstuw]|[0-9])?)|(?:[a-hk-y][0-9](?:[0-9]|[abehmnprv-y])?)))) ?([0-9][abd-hjlnp-uw-z]{2})\b/i;
+    const fullPostcodeRegex =
+      /\b((?:(?:gir)|(?:[a-pr-uwyz])(?:(?:[0-9](?:[a-hjkpstuw]|[0-9])?)|(?:[a-hk-y][0-9](?:[0-9]|[abehmnprv-y])?)))) ?([0-9][abd-hjlnp-uw-z]{2})\b/i;
     const testFullPostcode = fullPostcodeRegex.test(input);
     if (testFullPostcode) {
       return true;

package/components/address-input/autosuggest.address.setter.js

@@ -103,7 +103,7 @@ export default class AddressSetter {
   }
 
   clearManualInputs() {
-    this.manualInputs.forEach(input => {
+    this.manualInputs.forEach((input) => {
       if (input) {
         input.value = '';
       }
@@ -112,13 +112,13 @@ export default class AddressSetter {
 
   checkManualInputsValues(onLoad) {
     if (onLoad) {
-      this.originalValues = this.manualInputs.map(input => {
+      this.originalValues = this.manualInputs.map((input) => {
         if (input) {
           return input.value;
         }
       });
     } else if (this.uprn.value !== '' && this.originalValues.length) {
-      this.newValues = this.manualInputs.map(input => {
+      this.newValues = this.manualInputs.map((input) => {
         return input.value;
       });
       if (this.originalValues.toString() !== this.newValues.toString()) {

package/components/address-input/autosuggest.address.spec.js

@@ -196,11 +196,11 @@ describe('script: address-input', () => {
       });
 
       it('does not switch to manual input', async () => {
-        const isManualElementHidden = await page.$eval('.ons-js-address-input__manual', node =>
+        const isManualElementHidden = await page.$eval('.ons-js-address-input__manual', (node) =>
           node.classList.contains('ons-u-db-no-js_enabled'),
         );
         expect(isManualElementHidden).toBe(true);
-        const isSearchElementHidden = await page.$eval('.ons-js-address-input__search', node => node.classList.contains('ons-u-d-no'));
+        const isSearchElementHidden = await page.$eval('.ons-js-address-input__search', (node) => node.classList.contains('ons-u-d-no'));
         expect(isSearchElementHidden).toBe(false);
       });
     });
@@ -218,16 +218,16 @@ describe('script: address-input', () => {
       });
 
       it('switches to manual input', async () => {
-        const isManualElementHidden = await page.$eval('.ons-js-address-input__manual', node =>
+        const isManualElementHidden = await page.$eval('.ons-js-address-input__manual', (node) =>
           node.classList.contains('ons-u-db-no-js_enabled'),
         );
         expect(isManualElementHidden).toBe(false);
-        const isSearchElementHidden = await page.$eval('.ons-js-address-input__search', node => node.classList.contains('ons-u-d-no'));
+        const isSearchElementHidden = await page.$eval('.ons-js-address-input__search', (node) => node.classList.contains('ons-u-d-no'));
         expect(isSearchElementHidden).toBe(true);
       });
 
       it('hides the search button', async () => {
-        const hassClass = await page.$eval('.ons-js-address-search-btn', node => node.classList.contains('ons-u-d-no'));
+        const hassClass = await page.$eval('.ons-js-address-search-btn', (node) => node.classList.contains('ons-u-d-no'));
         expect(hassClass).toBe(true);
       });
     });
@@ -237,18 +237,18 @@ describe('script: address-input', () => {
     it('navigates to the first suggestion with the "Down" arrow key', async () => {
       await setTestPage('/test', renderComponent('address-input', EXAMPLE_ADDRESS_INPUT_WITH_API));
 
-      await page.$eval('.ons-js-autosuggest-input', node => (node.value = 'CF14'));
+      await page.$eval('.ons-js-autosuggest-input', (node) => (node.value = 'CF14'));
       await page.type('.ons-js-autosuggest-input', '2', { delay: 20 });
       await page.keyboard.press('ArrowDown');
 
-      const selectedOption = await page.$eval('.ons-autosuggest__option--focused', node => node.textContent);
+      const selectedOption = await page.$eval('.ons-autosuggest__option--focused', (node) => node.textContent);
       expect(selectedOption.trim()).toBe('196 College Road, Birmingham, B44 8HF');
     });
 
     it('provides expected parameters to the address API', async () => {
       await setTestPage('/test', renderComponent('address-input', EXAMPLE_ADDRESS_INPUT_WITH_API));
 
-      await page.$eval('.ons-js-autosuggest-input', node => (node.value = '196 coll'));
+      await page.$eval('.ons-js-autosuggest-input', (node) => (node.value = '196 coll'));
       await page.type('.ons-js-autosuggest-input', 'e');
 
       expect(apiFaker.getRequestCount('/addresses/eq?input=196%20colle&limit=10')).toBe(1);
@@ -258,7 +258,7 @@ describe('script: address-input', () => {
       beforeEach(async () => {
         await setTestPage('/test', renderComponent('address-input', EXAMPLE_ADDRESS_INPUT_WITH_API));
 
-        await page.$eval('.ons-js-autosuggest-input', node => (node.value = 'CF14 2N'));
+        await page.$eval('.ons-js-autosuggest-input', (node) => (node.value = 'CF14 2N'));
         await page.type('.ons-js-autosuggest-input', 'T');
       });
 
@@ -267,7 +267,7 @@ describe('script: address-input', () => {
       });
 
       it('has expected suggestion entries', async () => {
-        const suggestions = await page.$$eval('.ons-autosuggest__option', nodes => nodes.map(node => node.textContent.trim()));
+        const suggestions = await page.$$eval('.ons-autosuggest__option', (nodes) => nodes.map((node) => node.textContent.trim()));
         expect(suggestions).toEqual(['196 College Road, Birmingham, B44 8HF', '196 College Road, Whitchurch, Cardiff, CF14 2NZ']);
       });
     });
@@ -299,7 +299,7 @@ describe('script: address-input', () => {
 
         await setTestPage('/test', renderComponent('address-input', EXAMPLE_ADDRESS_INPUT_WITH_API));
 
-        await page.$eval('.ons-js-autosuggest-input', node => (node.value = 'Penlline Road, Whitchurch, Cardiff, CF14 2N'));
+        await page.$eval('.ons-js-autosuggest-input', (node) => (node.value = 'Penlline Road, Whitchurch, Cardiff, CF14 2N'));
         await page.type('.ons-js-autosuggest-input', 'Z');
         await page.waitForTimeout(100);
       });
@@ -313,7 +313,7 @@ describe('script: address-input', () => {
       });
 
       it('has expected suggestion entries', async () => {
-        const suggestions = await page.$$eval('.ons-autosuggest__option', nodes => nodes.map(node => node.textContent.trim()));
+        const suggestions = await page.$$eval('.ons-autosuggest__option', (nodes) => nodes.map((node) => node.textContent.trim()));
         expect(suggestions).toEqual(['1 Penlline Road, Whitchurch, Cardiff, CF14 2NZ', '2 Penlline Road, Whitchurch, Cardiff, CF14 2NZ']);
       });
 
@@ -329,12 +329,12 @@ describe('script: address-input', () => {
         });
 
         it('populates manual input fields with address from selection', async () => {
-          expect(await page.$eval('.ons-js-address-organisation', node => node.value)).toBe('');
-          expect(await page.$eval('.ons-js-address-line1', node => node.value)).toBe('196 College Road');
-          expect(await page.$eval('.ons-js-address-line2', node => node.value)).toBe('Whitchurch');
-          expect(await page.$eval('.ons-js-address-town', node => node.value)).toBe('Cardiff');
-          expect(await page.$eval('.ons-js-address-postcode', node => node.value)).toBe('CF14 2NT');
-          expect(await page.$eval('.ons-js-hidden-uprn', node => node.value)).toBe('100070332099');
+          expect(await page.$eval('.ons-js-address-organisation', (node) => node.value)).toBe('');
+          expect(await page.$eval('.ons-js-address-line1', (node) => node.value)).toBe('196 College Road');
+          expect(await page.$eval('.ons-js-address-line2', (node) => node.value)).toBe('Whitchurch');
+          expect(await page.$eval('.ons-js-address-town', (node) => node.value)).toBe('Cardiff');
+          expect(await page.$eval('.ons-js-address-postcode', (node) => node.value)).toBe('CF14 2NT');
+          expect(await page.$eval('.ons-js-hidden-uprn', (node) => node.value)).toBe('100070332099');
         });
       });
     });
@@ -343,7 +343,7 @@ describe('script: address-input', () => {
       beforeEach(async () => {
         await setTestPage('/test', renderComponent('address-input', EXAMPLE_ADDRESS_INPUT_WITH_API));
 
-        await page.$eval('.ons-js-autosuggest-input', node => (node.value = 'CF14 '));
+        await page.$eval('.ons-js-autosuggest-input', (node) => (node.value = 'CF14 '));
         await page.type('.ons-js-autosuggest-input', '2');
         await page.waitForTimeout(200);
       });
@@ -353,7 +353,7 @@ describe('script: address-input', () => {
       });
 
       it('has expected suggestion entries', async () => {
-        const suggestions = await page.$$eval('.ons-autosuggest__option', nodes => nodes.map(node => node.textContent.trim()));
+        const suggestions = await page.$$eval('.ons-autosuggest__option', (nodes) => nodes.map((node) => node.textContent.trim()));
         expect(suggestions).toEqual([
           'Penlline Road, Whitchurch, Cardiff, CF14 2AA (41 addresses)',
           '197 College Road, Whitchurch, Cardiff, CF14 2AB',
@@ -376,7 +376,7 @@ describe('script: address-input', () => {
         });
 
         it('has expected suggestion entries', async () => {
-          const suggestions = await page.$$eval('.ons-autosuggest__option', nodes => nodes.map(node => node.textContent.trim()));
+          const suggestions = await page.$$eval('.ons-autosuggest__option', (nodes) => nodes.map((node) => node.textContent.trim()));
           expect(suggestions).toEqual(['197 College Road, Whitchurch, Cardiff, CF14 2AB']);
         });
 
@@ -388,12 +388,12 @@ describe('script: address-input', () => {
           });
 
           it('populates manual input fields with address from selection', async () => {
-            expect(await page.$eval('.ons-js-address-organisation', node => node.value)).toBe('');
-            expect(await page.$eval('.ons-js-address-line1', node => node.value)).toBe('197 College Road');
-            expect(await page.$eval('.ons-js-address-line2', node => node.value)).toBe('Whitchurch');
-            expect(await page.$eval('.ons-js-address-town', node => node.value)).toBe('Cardiff');
-            expect(await page.$eval('.ons-js-address-postcode', node => node.value)).toBe('CF14 2AB');
-            expect(await page.$eval('.ons-js-hidden-uprn', node => node.value)).toBe('10002511038');
+            expect(await page.$eval('.ons-js-address-organisation', (node) => node.value)).toBe('');
+            expect(await page.$eval('.ons-js-address-line1', (node) => node.value)).toBe('197 College Road');
+            expect(await page.$eval('.ons-js-address-line2', (node) => node.value)).toBe('Whitchurch');
+            expect(await page.$eval('.ons-js-address-town', (node) => node.value)).toBe('Cardiff');
+            expect(await page.$eval('.ons-js-address-postcode', (node) => node.value)).toBe('CF14 2AB');
+            expect(await page.$eval('.ons-js-hidden-uprn', (node) => node.value)).toBe('10002511038');
           });
         });
       });
@@ -424,21 +424,21 @@ describe('script: address-input', () => {
 
         await setTestPage('/test', renderComponent('address-input', EXAMPLE_ADDRESS_INPUT_WITH_API));
 
-        await page.$eval('.ons-js-autosuggest-input', node => (node.value = 'cf14'));
+        await page.$eval('.ons-js-autosuggest-input', (node) => (node.value = 'cf14'));
         await page.type('.ons-js-autosuggest-input', '2', { delay: 20 });
         await page.keyboard.press('ArrowDown');
         await page.keyboard.press('Enter');
         await page.waitForTimeout(100);
 
-        const isManualElementHidden = await page.$eval('.ons-js-address-input__manual', node =>
+        const isManualElementHidden = await page.$eval('.ons-js-address-input__manual', (node) =>
           node.classList.contains('ons-u-db-no-js_enabled'),
         );
         expect(isManualElementHidden).toBe(false);
 
-        const isSearchElementHidden = await page.$eval('.ons-js-address-input__search', node => node.classList.contains('ons-u-d-no'));
+        const isSearchElementHidden = await page.$eval('.ons-js-address-input__search', (node) => node.classList.contains('ons-u-d-no'));
         expect(isSearchElementHidden).toBe(true);
 
-        const isSearchButtonElementHidden = await page.$eval('.ons-js-address-search-btn', node => node.classList.contains('ons-u-d-no'));
+        const isSearchButtonElementHidden = await page.$eval('.ons-js-address-search-btn', (node) => node.classList.contains('ons-u-d-no'));
         expect(isSearchButtonElementHidden).toBe(true);
       });
     });
@@ -456,26 +456,26 @@ describe('script: address-input', () => {
             `,
           );
 
-          await page.$eval('form', node =>
-            node.addEventListener('submit', event => {
+          await page.$eval('form', (node) =>
+            node.addEventListener('submit', (event) => {
               event.preventDefault();
               return false;
             }),
           );
 
-          await page.$eval('.ons-js-autosuggest-input', node => (node.value = 'CF14 2N'));
+          await page.$eval('.ons-js-autosuggest-input', (node) => (node.value = 'CF14 2N'));
           await page.type('.ons-js-autosuggest-input', 'T', { delay: 20 });
           await page.keyboard.press('ArrowDown');
           await page.keyboard.press('Enter');
           await page.waitForTimeout(100);
 
-          const urpnValueBefore = await page.$eval('.ons-js-hidden-uprn', node => node.value);
+          const urpnValueBefore = await page.$eval('.ons-js-hidden-uprn', (node) => node.value);
           expect(urpnValueBefore).toBe('100070332099');
 
-          await page.$eval('.ons-js-address-line1', node => (node.value = 'Something else'));
+          await page.$eval('.ons-js-address-line1', (node) => (node.value = 'Something else'));
           await page.click('button[type=submit]');
 
-          const urpnValueAfter = await page.$eval('.ons-js-hidden-uprn', node => node.value);
+          const urpnValueAfter = await page.$eval('.ons-js-hidden-uprn', (node) => node.value);
           expect(urpnValueAfter).toBe('');
         });
       });
@@ -494,8 +494,8 @@ describe('script: address-input', () => {
             `,
           );
 
-          await page.$eval('form', node =>
-            node.addEventListener('submit', event => {
+          await page.$eval('form', (node) =>
+            node.addEventListener('submit', (event) => {
               event.preventDefault();
               return false;
             }),
@@ -505,12 +505,12 @@ describe('script: address-input', () => {
         });
 
         it('then an error summary panel should be added to the DOM', async () => {
-          const panelExists = await page.$$eval('.ons-js-autosuggest-error-panel', nodes => nodes.length === 1);
+          const panelExists = await page.$$eval('.ons-js-autosuggest-error-panel', (nodes) => nodes.length === 1);
           expect(panelExists).toBe(true);
         });
 
         it('then input should be wrapped in an error', async () => {
-          const inputIsError = await page.$$eval('#autosuggest-input-error', nodes => nodes.length === 1);
+          const inputIsError = await page.$$eval('#autosuggest-input-error', (nodes) => nodes.length === 1);
           expect(inputIsError).toBe(true);
         });
 
@@ -518,7 +518,7 @@ describe('script: address-input', () => {
           it('then the error summary should be removed', async () => {
             await page.click('.ons-js-address-manual-btn');
 
-            const panelExists = await page.$$eval('.ons-js-autosuggest-error-panel', nodes => nodes.length === 1);
+            const panelExists = await page.$$eval('.ons-js-autosuggest-error-panel', (nodes) => nodes.length === 1);
             expect(panelExists).toBe(false);
           });
         });
@@ -533,47 +533,47 @@ describe('script: address-input', () => {
     });
 
     it('shows manual input fields', async () => {
-      const isManualElementHidden = await page.$eval('.ons-js-address-input__manual', node =>
+      const isManualElementHidden = await page.$eval('.ons-js-address-input__manual', (node) =>
         node.classList.contains('ons-u-db-no-js_enabled'),
       );
       expect(isManualElementHidden).toBe(false);
-      const isSearchElementHidden = await page.$eval('.ons-js-address-input__search', node => node.classList.contains('ons-u-d-no'));
+      const isSearchElementHidden = await page.$eval('.ons-js-address-input__search', (node) => node.classList.contains('ons-u-d-no'));
       expect(isSearchElementHidden).toBe(true);
     });
 
     it('clears autosuggest input', async () => {
-      const value = await page.$eval('.ons-js-autosuggest-input', node => node.value);
+      const value = await page.$eval('.ons-js-autosuggest-input', (node) => node.value);
       expect(value).toBe('');
     });
 
     describe('and then the search link is clicked', () => {
       beforeEach(async () => {
-        await page.$eval('.ons-js-address-organisation', node => (node.value = 'Test organisation'));
-        await page.$eval('.ons-js-address-line1', node => (node.value = 'Test address line 1'));
-        await page.$eval('.ons-js-address-line2', node => (node.value = 'Test address line 2'));
-        await page.$eval('.ons-js-address-town', node => (node.value = 'Test town'));
-        await page.$eval('.ons-js-address-postcode', node => (node.value = 'PO37 60DE'));
-        await page.$eval('.ons-js-hidden-uprn', node => (node.value = '100070332099'));
+        await page.$eval('.ons-js-address-organisation', (node) => (node.value = 'Test organisation'));
+        await page.$eval('.ons-js-address-line1', (node) => (node.value = 'Test address line 1'));
+        await page.$eval('.ons-js-address-line2', (node) => (node.value = 'Test address line 2'));
+        await page.$eval('.ons-js-address-town', (node) => (node.value = 'Test town'));
+        await page.$eval('.ons-js-address-postcode', (node) => (node.value = 'PO37 60DE'));
+        await page.$eval('.ons-js-hidden-uprn', (node) => (node.value = '100070332099'));
 
         await page.click('.ons-js-address-search-btn');
       });
 
       it('hides manual input fields', async () => {
-        const isManualElementHidden = await page.$eval('.ons-js-address-input__manual', node =>
+        const isManualElementHidden = await page.$eval('.ons-js-address-input__manual', (node) =>
           node.classList.contains('ons-u-db-no-js_enabled'),
         );
         expect(isManualElementHidden).toBe(true);
-        const isSearchElementHidden = await page.$eval('.ons-js-address-input__search', node => node.classList.contains('ons-u-d-no'));
+        const isSearchElementHidden = await page.$eval('.ons-js-address-input__search', (node) => node.classList.contains('ons-u-d-no'));
         expect(isSearchElementHidden).toBe(false);
       });
 
       it('clears manual input fields', async () => {
-        expect(await page.$eval('.ons-js-address-organisation', node => node.value)).toBe('');
-        expect(await page.$eval('.ons-js-address-line1', node => node.value)).toBe('');
-        expect(await page.$eval('.ons-js-address-line2', node => node.value)).toBe('');
-        expect(await page.$eval('.ons-js-address-town', node => node.value)).toBe('');
-        expect(await page.$eval('.ons-js-address-postcode', node => node.value)).toBe('');
-        expect(await page.$eval('.ons-js-hidden-uprn', node => node.value)).toBe('');
+        expect(await page.$eval('.ons-js-address-organisation', (node) => node.value)).toBe('');
+        expect(await page.$eval('.ons-js-address-line1', (node) => node.value)).toBe('');
+        expect(await page.$eval('.ons-js-address-line2', (node) => node.value)).toBe('');
+        expect(await page.$eval('.ons-js-address-town', (node) => node.value)).toBe('');
+        expect(await page.$eval('.ons-js-address-postcode', (node) => node.value)).toBe('');
+        expect(await page.$eval('.ons-js-hidden-uprn', (node) => node.value)).toBe('');
       });
     });
   });
@@ -585,7 +585,7 @@ describe('script: address-input', () => {
     });
 
     it('then the fetch url should contain the favour Welsh parameter', async () => {
-      await page.$eval('.ons-js-autosuggest-input', node => (node.value = '196 coll'));
+      await page.$eval('.ons-js-autosuggest-input', (node) => (node.value = '196 coll'));
       await page.type('.ons-js-autosuggest-input', 'e');
 
       expect(apiFaker.getRequestCount('/addresses/eq?input=196%20colle&limit=10&favourwelsh=true')).toBe(1);
@@ -597,7 +597,7 @@ describe('script: address-input', () => {
       beforeEach(async () => {
         await setTestPage('/test', renderComponent('address-input', EXAMPLE_ADDRESS_INPUT_WITH_API));
 
-        await page.$eval('.ons-js-autosuggest-input', node => (node.value = 'CF14'));
+        await page.$eval('.ons-js-autosuggest-input', (node) => (node.value = 'CF14'));
         await page.type('.ons-js-autosuggest-input', '2', { delay: 20 });
         await page.keyboard.press('ArrowDown');
         await page.keyboard.press('Enter');
@@ -618,10 +618,7 @@ describe('script: address-input', () => {
             `
               <div class="ons-question">
                 <form action="/test/fake/form-handler" method="post">
-                  ${renderComponent('address-input', {
-                    ...EXAMPLE_ADDRESS_INPUT_WITH_API,
-                    isEditable: false,
-                  })}
+                  ${renderComponent('address-input', { ...EXAMPLE_ADDRESS_INPUT_WITH_API, isEditable: false })}
                   <button type="submit">Submit</button>
                 </form>
               </div>
@@ -632,7 +629,7 @@ describe('script: address-input', () => {
         });
 
         it('sets aria status message', async () => {
-          const statusMessage = await page.$eval('.ons-js-autosuggest-aria-status', node => node.textContent);
+          const statusMessage = await page.$eval('.ons-js-autosuggest-aria-status', (node) => node.textContent);
           expect(statusMessage).toBe('Enter 3 or more characters for suggestions.');
         });
       });
@@ -708,19 +705,19 @@ describe('script: address-input', () => {
         }),
       );
 
-      const setLangAttribute = lang => document.documentElement.setAttribute('lang', lang);
+      const setLangAttribute = (lang) => document.documentElement.setAttribute('lang', lang);
       await page.evaluate(setLangAttribute, lang);
     });
 
     it('provides expected parameters to the address API', async () => {
-      await page.$eval('.ons-js-autosuggest-input', node => (node.value = '196 coll'));
+      await page.$eval('.ons-js-autosuggest-input', (node) => (node.value = '196 coll'));
       await page.type('.ons-js-autosuggest-input', 'e');
 
       expect(apiFaker.getRequestCount(searchEndpoint)).toBe(1);
     });
 
     it('requests further information for the selected address from the API with the expected parameters', async () => {
-      await page.$eval('.ons-js-autosuggest-input', node => (node.value = '196 coll'));
+      await page.$eval('.ons-js-autosuggest-input', (node) => (node.value = '196 coll'));
       await page.type('.ons-js-autosuggest-input', 'e', { delay: 20 });
       await page.keyboard.press('ArrowDown');
       await page.keyboard.press('Enter');