@ons/design-system 67.2.0 → 68.0.1

package/components/radios/radios.spec.js

@@ -64,14 +64,14 @@ describe('script: radios', () => {
     });
 
     it('radios with other options should be given aria-expanded attributes', async () => {
-      const ariaExpandedOption1 = await page.$eval('#email', node => node.getAttribute('aria-expanded'));
+      const ariaExpandedOption1 = await page.$eval('#email', (node) => node.getAttribute('aria-expanded'));
       expect(ariaExpandedOption1).toBe('false');
-      const ariaExpandedOption2 = await page.$eval('#phone', node => node.getAttribute('aria-expanded'));
+      const ariaExpandedOption2 = await page.$eval('#phone', (node) => node.getAttribute('aria-expanded'));
       expect(ariaExpandedOption2).toBe('false');
     });
 
     it('radios with "open" other options should not be given aria-expanded attributes', async () => {
-      const hasAriaExpandedOption3 = await page.$eval('#text', node => node.hasAttribute('aria-expanded'));
+      const hasAriaExpandedOption3 = await page.$eval('#text', (node) => node.hasAttribute('aria-expanded'));
       expect(hasAriaExpandedOption3).toBe(false);
     });
 
@@ -81,27 +81,27 @@ describe('script: radios', () => {
       });
 
       it('then the checked radio aria-expanded attribute should be set to true', async () => {
-        const ariaExpandedOption1 = await page.$eval('#email', node => node.getAttribute('aria-expanded'));
+        const ariaExpandedOption1 = await page.$eval('#email', (node) => node.getAttribute('aria-expanded'));
         expect(ariaExpandedOption1).toBe('true');
       });
 
       it('then the unchecked radio aria-expanded attribute should be set to false', async () => {
-        const ariaExpandedOption2 = await page.$eval('#phone', node => node.getAttribute('aria-expanded'));
+        const ariaExpandedOption2 = await page.$eval('#phone', (node) => node.getAttribute('aria-expanded'));
         expect(ariaExpandedOption2).toBe('false');
       });
 
       it('then the unchecked radio aria-expanded attribute of "open" radio should not be set', async () => {
-        const hasAriaExpanded = await page.$eval('#text', node => node.hasAttribute('aria-expanded'));
+        const hasAriaExpanded = await page.$eval('#text', (node) => node.hasAttribute('aria-expanded'));
         expect(hasAriaExpanded).toBe(false);
       });
 
       it('then the clear button should be visible', async () => {
-        const isHidden = await page.$eval('.ons-js-clear-btn', node => node.classList.contains('ons-u-db-no-js_enabled'));
+        const isHidden = await page.$eval('.ons-js-clear-btn', (node) => node.classList.contains('ons-u-db-no-js_enabled'));
         expect(isHidden).toBe(false);
       });
 
       it('then the aria live message should announce that the answer can be cleared', async () => {
-        const alertText = await page.$eval('.ons-js-clear-radio-alert', node => node.innerHTML);
+        const alertText = await page.$eval('.ons-js-clear-radio-alert', (node) => node.innerHTML);
         expect(alertText).toBe('You can clear your answer by clicking the clear selection button under the radio buttons');
       });
 
@@ -111,17 +111,17 @@ describe('script: radios', () => {
         });
 
         it('then the checked radio aria-expanded attribute should be set to true', async () => {
-          const ariaExpandedOption2 = await page.$eval('#phone', node => node.getAttribute('aria-expanded'));
+          const ariaExpandedOption2 = await page.$eval('#phone', (node) => node.getAttribute('aria-expanded'));
           expect(ariaExpandedOption2).toBe('true');
         });
 
         it('then the unchecked radio aria-expanded attribute should be set to false', async () => {
-          const ariaExpandedOption1 = await page.$eval('#email', node => node.getAttribute('aria-expanded'));
+          const ariaExpandedOption1 = await page.$eval('#email', (node) => node.getAttribute('aria-expanded'));
           expect(ariaExpandedOption1).toBe('false');
         });
 
         it('then the unchecked radio aria-expanded attribute of "open" radio should not be set', async () => {
-          const hasAriaExpanded = await page.$eval('#text', node => node.hasAttribute('aria-expanded'));
+          const hasAriaExpanded = await page.$eval('#text', (node) => node.hasAttribute('aria-expanded'));
           expect(hasAriaExpanded).toBe(false);
         });
       });
@@ -129,30 +129,30 @@ describe('script: radios', () => {
 
     describe('the clear button is clicked', () => {
       beforeEach(async () => {
-        await page.$eval('.ons-js-clear-btn', node => node.click());
+        await page.$eval('.ons-js-clear-btn', (node) => node.click());
       });
 
       it('then the clear button should not be visible', async () => {
-        const isHidden = await page.$eval('.ons-js-clear-btn', node => node.classList.contains('ons-u-db-no-js_enabled'));
+        const isHidden = await page.$eval('.ons-js-clear-btn', (node) => node.classList.contains('ons-u-db-no-js_enabled'));
         expect(isHidden).toBe(true);
       });
 
       it('then the aria live message should announce that the answer has been cleared', async () => {
-        const alertText = await page.$eval('.ons-js-clear-radio-alert', node => node.innerHTML);
+        const alertText = await page.$eval('.ons-js-clear-radio-alert', (node) => node.innerHTML);
         expect(alertText).toBe('You have cleared your answer');
       });
 
       it('then all radios should not be checked', async () => {
-        const checkedRadios = await page.$$eval('.ons-js-radio', nodes => nodes.map(node => node.checked));
+        const checkedRadios = await page.$$eval('.ons-js-radio', (nodes) => nodes.map((node) => node.checked));
         expect(checkedRadios).not.toContain(true);
       });
 
       it('then all other input fields should be empty', async () => {
-        const emailOtherValue = await page.$eval('#email-other', node => node.value);
+        const emailOtherValue = await page.$eval('#email-other', (node) => node.value);
         expect(emailOtherValue).toBe('');
-        const telOtherValue = await page.$eval('#tel-other', node => node.value);
+        const telOtherValue = await page.$eval('#tel-other', (node) => node.value);
         expect(telOtherValue).toBe('');
-        const textOtherValue = await page.$eval('#text-other', node => node.value);
+        const textOtherValue = await page.$eval('#text-other', (node) => node.value);
         expect(textOtherValue).toBe('');
       });
     });
@@ -163,7 +163,7 @@ describe('script: radios', () => {
       });
 
       it('then the radio button should be checked', async () => {
-        const isRadioChecked = await page.$eval('#text', node => node.checked);
+        const isRadioChecked = await page.$eval('#text', (node) => node.checked);
         expect(isRadioChecked).toBe(true);
       });
     });
@@ -174,13 +174,13 @@ describe('script: radios', () => {
       });
 
       it('then the input should have a tab index of 0', async () => {
-        const tabIndex = await page.$eval('#text-other', node => node.getAttribute('tabindex'));
+        const tabIndex = await page.$eval('#text-other', (node) => node.getAttribute('tabindex'));
         expect(tabIndex).toBe('0');
       });
     });
   });
 
-  describe('reveal and fieldset', function() {
+  describe('reveal and fieldset', function () {
     const params = {
       legend: 'What are your favourite pizza toppings?',
       name: 'food-other',
@@ -237,7 +237,7 @@ describe('script: radios', () => {
     });
 
     it('radios with other options should be given aria-expanded attributes', async () => {
-      const ariaExpanded = await page.$eval('#other-radio', node => node.getAttribute('aria-expanded'));
+      const ariaExpanded = await page.$eval('#other-radio', (node) => node.getAttribute('aria-expanded'));
       expect(ariaExpanded).toBe('false');
     });
 
@@ -247,7 +247,7 @@ describe('script: radios', () => {
       });
 
       it('has aria-expanded attribute should be set to true', async () => {
-        const ariaExpanded = await page.$eval('#other-radio', node => node.getAttribute('aria-expanded'));
+        const ariaExpanded = await page.$eval('#other-radio', (node) => node.getAttribute('aria-expanded'));
         expect(ariaExpanded).toBe('true');
       });
 
@@ -257,7 +257,7 @@ describe('script: radios', () => {
         });
 
         it('the radio with an other input aria-expanded attribute changes', async () => {
-          const ariaExpanded = await page.$eval('#other-radio', node => node.getAttribute('aria-expanded'));
+          const ariaExpanded = await page.$eval('#other-radio', (node) => node.getAttribute('aria-expanded'));
           expect(ariaExpanded).toBe('false');
         });
       });
@@ -273,12 +273,12 @@ describe('script: radios', () => {
           });
 
           it('the other radio aria-expanded attribute should be set to false', async () => {
-            const ariaExpanded = await page.$eval('#other-radio', node => node.getAttribute('aria-expanded'));
+            const ariaExpanded = await page.$eval('#other-radio', (node) => node.getAttribute('aria-expanded'));
             expect(ariaExpanded).toBe('false');
           });
 
           it('the child of other checkbox should be unchecked', async () => {
-            const innerInputChecked = await page.$eval('#inner-bacon-other', node => node.checked);
+            const innerInputChecked = await page.$eval('#inner-bacon-other', (node) => node.checked);
             expect(innerInputChecked).toBe(false);
           });
         });

package/components/related-content/_macro.spec.js

@@ -82,9 +82,7 @@ describe('macro: related-content', () => {
     it('calls with content', () => {
       const $ = cheerio.load(renderComponent('related-content', { EXAMPLE_RELATED_CONTENT_GENERAL }, 'Example content...'));
 
-      const content = $('.ons-related-content')
-        .text()
-        .trim();
+      const content = $('.ons-related-content').text().trim();
       expect(content).toEqual(expect.stringContaining('Example content...'));
     });
   });
@@ -105,7 +103,7 @@ describe('macro: related-content', () => {
     it('has the `aria-labelledby` attribute for each section of links', () => {
       const $ = cheerio.load(renderComponent('related-content', EXAMPLE_RELATED_CONTENT_LINKS));
 
-      const values = mapAll($('.ons-related-content__navigation'), node => node.attr('aria-labelledby'));
+      const values = mapAll($('.ons-related-content__navigation'), (node) => node.attr('aria-labelledby'));
       expect(values).toEqual(['related-articles', 'related-links']);
     });
 

package/components/related-content/_section-macro.spec.js

@@ -20,11 +20,7 @@ describe('macro: related-content/section', () => {
 
   it('has the provided `title` text', () => {
     const $ = cheerio.load(renderComponent('related-content/section', EXAMPLE_RELATED_SECTION_CONTENT));
-    expect(
-      $('.ons-related-content__title')
-        .text()
-        .trim(),
-    ).toEqual('Related information');
+    expect($('.ons-related-content__title').text().trim()).toEqual('Related information');
   });
 
   it('has the `id` attribute for the title', () => {
@@ -35,9 +31,7 @@ describe('macro: related-content/section', () => {
   it('has the provided content', () => {
     const $ = cheerio.load(renderComponent('related-content/section', { EXAMPLE_RELATED_SECTION_CONTENT }, 'Example content...'));
 
-    const content = $('.ons-related-content__content')
-      .text()
-      .trim();
+    const content = $('.ons-related-content__content').text().trim();
     expect(content).toEqual(expect.stringContaining('Example content...'));
   });
 });

package/components/relationships/example-relationships-error.njk

@@ -25,24 +25,22 @@ layout: ~
 
 {% block main %}
 
-    {% call
-        onsPanel({
-            title: "There is a problem with your answer",
-            type: "error"
-        })
-    %}
-    {{
-        onsList({
-            "element": "ol",
-            "itemsList": [
-                {
-                    "text": "Select a relationship",
-                    "url": "#relationship-error",
-                    "variants": "inPageLink"
-                }
-            ]
-        })
-    }}
+    {% call onsPanel({
+        "title": "There is a problem with your answer",
+        "variant": "error"
+    }) %}
+        {{
+            onsList({
+                "element": "ol",
+                "itemsList": [
+                    {
+                        "text": "Select a relationship",
+                        "url": "#relationship-error",
+                        "variants": "inPageLink"
+                    }
+                ]
+            })
+        }}
     {% endcall %}
     {% call onsQuestion({
         "title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>…</strong>",

package/components/relationships/relationships.dom.js

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

package/components/relationships/relationships.js

@@ -7,7 +7,7 @@ export default class Relationships {
     this.radios = [...context.querySelectorAll('input[type=radio]')];
     this.playback = context.querySelector('.ons-js-relationships-playback');
 
-    this.radios.forEach(radio => radio.addEventListener('change', this.setPlayback.bind(this)));
+    this.radios.forEach((radio) => radio.addEventListener('change', this.setPlayback.bind(this)));
 
     this.setPlayback();
 
@@ -15,7 +15,7 @@ export default class Relationships {
   }
 
   setPlayback() {
-    const radio = this.radios.find(radio => radio.checked);
+    const radio = this.radios.find((radio) => radio.checked);
 
     if (radio) {
       const title = radio.getAttribute('data-title');

package/components/reply/_macro.spec.js

@@ -13,9 +13,9 @@ const EXAMPLE_TEXTAREA = {
     description: 'Reply description',
   },
   charCheckLimit: {
-      limit: 300,
-      charCountSingular: '{x} more character needed',
-      charCountPlural: '{x} more characters needed',
+    limit: 300,
+    charCountSingular: '{x} more character needed',
+    charCountPlural: '{x} more characters needed',
   },
   rows: 5,
 };

package/components/reply/reply.dom.js

@@ -6,7 +6,7 @@ async function initialise() {
   if (replyInputs.length) {
     const ReplyInput = (await import('./reply-input')).default;
 
-    replyInputs.forEach(input => new ReplyInput(input));
+    replyInputs.forEach((input) => new ReplyInput(input));
   }
 }
 

package/components/reply/reply.spec.js

@@ -29,7 +29,7 @@ describe('script: reply', () => {
 
     it('the button has classes applied', async () => {
       await setTestPage('/test', renderComponent('reply', EXAMPLE_REPLY));
-      const disabledButton = await page.$eval('#reply-button', element => element.classList.contains('ons-btn--disabled'));
+      const disabledButton = await page.$eval('#reply-button', (element) => element.classList.contains('ons-btn--disabled'));
       expect(disabledButton).toBe(true);
     });
   });
@@ -49,7 +49,7 @@ describe('script: reply', () => {
       await page.focus('#reply-textarea');
       await page.keyboard.type('Sausages');
 
-      const disabledButton = await page.$eval('#reply-button', element => element.classList.contains('ons-btn--disabled'));
+      const disabledButton = await page.$eval('#reply-button', (element) => element.classList.contains('ons-btn--disabled'));
       expect(disabledButton).toBe(false);
     });
   });
@@ -71,7 +71,7 @@ describe('script: reply', () => {
       await page.keyboard.type('s');
       await page.keyboard.press('Backspace');
 
-      const disabledButton = await page.$eval('#reply-button', element => element.classList.contains('ons-btn--disabled'));
+      const disabledButton = await page.$eval('#reply-button', (element) => element.classList.contains('ons-btn--disabled'));
       expect(disabledButton).toBe(true);
     });
   });

package/components/section-navigation/_macro.njk

@@ -1,11 +1,11 @@
 {% macro onsSectionNavigation(params) %}
-    {% set headingLevel = params.headingLevel | int | default(2) %}
-    {% set sectionTitleHeadingLevel =  headingLevel + 1 %}
+    {% set headingLevel = params.headingLevel | default(2) %}
+    {% set sectionTitleHeadingLevel = headingLevel + 1 %}
     <nav class="ons-section-nav{% if params.variants == 'vertical' %} ons-section-nav--vertical{% endif %} {% if params.classes %} {{ params.classes }} {% endif %}"{% if params.id %} id="{{ params.id }}"{% endif %} aria-labelledby="{{ params.hiddenTitleId | default("section-menu-nav-title")}}">
-    <h{{ headingLevel }} class="ons-u-vh" id="{{ params.hiddenTitleId | default("section-menu-nav-title") }}">{{ params.hiddenTitle | default("Pages in this section") }}</h{{ headingLevel }}>
+        <h{{ headingLevel }} class="ons-u-vh" id="{{ params.hiddenTitleId | default("section-menu-nav-title") }}">{{ params.hiddenTitle | default("Pages in this section") }}</h{{ headingLevel }}>
         {% if params.sections %}
             {% for section in params.sections %}
-                {% set sectionItemHeadingLevel =  headingLevel + 2 if section.title else headingLevel + 1 %}
+                {% set sectionItemHeadingLevel = headingLevel + 2 if section.title else headingLevel + 1 %}
                 <div class="ons-section-nav__sub">
                     {% if section.title %}
                         <h{{ sectionTitleHeadingLevel }} class="ons-u-fs-r--b ons-u-mb-s">{{ section.title }}</h{{ sectionTitleHeadingLevel }}>
@@ -18,12 +18,12 @@
                                 {% set isCurrent = false %}
                             {% endif %}
                             <li class="ons-section-nav__item{% if item.classes %}{{ ' ' + item.classes }}{% endif %}{% if isCurrent == true %} ons-section-nav__item--active{% endif %}">
-                              {% if isCurrent == true %} 
-                                  <h{{ sectionItemHeadingLevel }} class="ons-section-nav__link ons-section-nav__item-header" href="{{ item.url }}" aria-current="location">{{ item.title }}</h{{ sectionItemHeadingLevel }}>
-                              {% else %}
-                                  <a class="ons-section-nav__link" href="{{ item.url }}">{{ item.title }}</a>
-                              {% endif %}
-                            {% if item.anchors and isCurrent == true %}
+                                {% if isCurrent == true %}
+                                    <h{{ sectionItemHeadingLevel }} class="ons-section-nav__link ons-section-nav__item-header" href="{{ item.url }}" aria-current="location">{{ item.title }}</h{{ sectionItemHeadingLevel }}>
+                                {% else %}
+                                    <a class="ons-section-nav__link" href="{{ item.url }}">{{ item.title }}</a>
+                                {% endif %}
+                                {% if item.anchors and isCurrent == true %}
                                     <ul class="ons-section-nav__sub-items ons-list ons-list--dashed ons-u-mt-xs ons-u-mb-xs">
                                         {% for anchor in item.anchors %}
                                             <li class="ons-section-nav__item ons-list__item">
@@ -43,7 +43,7 @@
             {% endif %}
             <ul class="ons-section-nav__list">
                 {% for item in params.itemsList %}
-                    {% set sectionItemHeadingLevel =  headingLevel + 2 if params.title else headingLevel + 1 %}
+                    {% set sectionItemHeadingLevel = headingLevel + 2 if params.title else headingLevel + 1 %}
                     {% if (params.currentPath and item.url == params.currentPath) or (params.tabQuery and params.tabQuery == item.title|lower) %}
                         {% set isCurrent = true %}
                     {% else %}
@@ -51,7 +51,7 @@
                     {% endif %}
                     <li class="ons-section-nav__item{% if item.classes %}{{ ' ' + item.classes }}{% endif %}{% if isCurrent == true %} ons-section-nav__item--active{% endif %}">
                         {% if isCurrent == true %} 
-                            <h{{ sectionItemHeadingLevel}} class="ons-section-nav__link ons-section-nav__item-header" href="{{ item.url }}" aria-current="location">{{ item.title }}</h{{ headingLevel + 2 if section.title else headingLevel + 1 }}>
+                            <h{{ sectionItemHeadingLevel }} class="ons-section-nav__link ons-section-nav__item-header" href="{{ item.url }}" aria-current="location">{{ item.title }}</h{{ headingLevel + 2 if section.title else headingLevel + 1 }}>
                         {% else %}
                             <a class="ons-section-nav__link" href="{{ item.url }}">{{ item.title }}</a>
                         {% endif %}

package/components/section-navigation/_macro.spec.js

@@ -145,10 +145,10 @@ describe('macro: section-navigation', () => {
     it('renders top level navigation items', () => {
       const $ = cheerio.load(renderComponent('section-navigation', EXAMPLE_SECTION_NAVIGATION));
 
-      const itemLabels = mapAll($('.ons-section-nav__item .ons-section-nav__link'), node => node.text().trim());
+      const itemLabels = mapAll($('.ons-section-nav__item .ons-section-nav__link'), (node) => node.text().trim());
       expect(itemLabels).toEqual(['Results', 'Dashboard']);
 
-      const itemLinks = mapAll($('.ons-section-nav__item .ons-section-nav__link'), node => node.attr('href'));
+      const itemLinks = mapAll($('.ons-section-nav__item .ons-section-nav__link'), (node) => node.attr('href'));
       expect(itemLinks).toEqual(['/results', '/results/dashboard']);
     });
 
@@ -173,11 +173,7 @@ describe('macro: section-navigation', () => {
     it('marks the current item with a class when `currentPath` is provided', () => {
       const $ = cheerio.load(renderComponent('section-navigation', EXAMPLE_SECTION_NAVIGATION));
 
-      expect(
-        $('.ons-section-nav__item--active')
-          .text()
-          .trim(),
-      ).toBe('Results');
+      expect($('.ons-section-nav__item--active').text().trim()).toBe('Results');
     });
 
     it('marks the current item with a class when `tabQuery` is provided', () => {
@@ -189,11 +185,7 @@ describe('macro: section-navigation', () => {
         }),
       );
 
-      expect(
-        $('.ons-section-nav__item--active')
-          .text()
-          .trim(),
-      ).toBe('Dashboard');
+      expect($('.ons-section-nav__item--active').text().trim()).toBe('Dashboard');
     });
 
     it('marks the current item with `aria-current` when `currentPath` is provided', () => {
@@ -226,12 +218,14 @@ describe('macro: section-navigation', () => {
       it('renders the expected anchor navigation items', () => {
         const $ = cheerio.load(renderComponent('section-navigation', EXAMPLE_SECTION_NAVIGATION_VERTICAL));
 
-        const itemLabels = mapAll($('.ons-section-nav__sub-items .ons-section-nav__item .ons-section-nav__link'), node =>
+        const itemLabels = mapAll($('.ons-section-nav__sub-items .ons-section-nav__item .ons-section-nav__link'), (node) =>
           node.text().trim(),
         );
         expect(itemLabels).toEqual(['Sub section 1', 'Sub section 2', 'Sub section 3']);
 
-        const itemLinks = mapAll($('.ons-section-nav__sub-items .ons-section-nav__item .ons-section-nav__link'), node => node.attr('href'));
+        const itemLinks = mapAll($('.ons-section-nav__sub-items .ons-section-nav__item .ons-section-nav__link'), (node) =>
+          node.attr('href'),
+        );
         expect(itemLinks).toEqual(['#sub-section-1', '#sub-section-2', '#sub-section-3']);
       });
     });
@@ -247,17 +241,15 @@ describe('macro: section-navigation', () => {
       it('renders itemsLists, anchors and heading for each section', () => {
         const $ = cheerio.load(renderComponent('section-navigation', EXAMPLE_SECTION_NAVIGATION_VERTICAL_WITH_SECTIONS));
 
-        const anchors = mapAll($('.ons-section-nav__sub-items .ons-section-nav__item .ons-section-nav__link'), node => node.text().trim());
+        const anchors = mapAll($('.ons-section-nav__sub-items .ons-section-nav__item .ons-section-nav__link'), (node) =>
+          node.text().trim(),
+        );
         expect(anchors).toEqual(['Sub section 1', 'Sub section 2', 'Sub section 3']);
 
-        const itemLists = mapAll($('.ons-section-nav__item .ons-section-nav__link'), node => node.text().trim());
+        const itemLists = mapAll($('.ons-section-nav__item .ons-section-nav__link'), (node) => node.text().trim());
         expect(itemLists).toEqual(['Section 1', 'Section 2', 'Sub section 1', 'Sub section 2', 'Sub section 3', 'Section 3']);
 
-        const headings = mapAll($('h3'), node =>
-          $(node)
-            .text()
-            .trim(),
-        );
+        const headings = mapAll($('h3'), (node) => $(node).text().trim());
         expect(headings).toEqual(['Section Title']);
       });
     });

package/components/select/_macro.spec.js

@@ -155,35 +155,35 @@ describe('macro: select', () => {
       it('has expected text', () => {
         const $ = cheerio.load(renderComponent('select', EXAMPLE_SELECT));
 
-        const values = mapAll($('select > option'), node => node.text().trim());
+        const values = mapAll($('select > option'), (node) => node.text().trim());
         expect(values).toEqual(['First option', 'Second option', 'Disabled option']);
       });
 
       it('has a provided `id` attribute', () => {
         const $ = cheerio.load(renderComponent('select', EXAMPLE_SELECT));
 
-        const values = mapAll($('select > option'), node => node.attr('id'));
+        const values = mapAll($('select > option'), (node) => node.attr('id'));
         expect(values).toEqual([undefined, 'second-option', undefined]);
       });
 
       it('marks the correct option as selected', () => {
         const $ = cheerio.load(renderComponent('select', EXAMPLE_SELECT));
 
-        const values = mapAll($('select > option'), node => node.attr('selected'));
+        const values = mapAll($('select > option'), (node) => node.attr('selected'));
         expect(values).toEqual([undefined, 'selected', undefined]);
       });
 
       it('marks the correct option as disabled', () => {
         const $ = cheerio.load(renderComponent('select', EXAMPLE_SELECT));
 
-        const values = mapAll($('select > option'), node => node.attr('disabled'));
+        const values = mapAll($('select > option'), (node) => node.attr('disabled'));
         expect(values).toEqual([undefined, undefined, 'disabled']);
       });
 
       it('has a provided `value` attribute', () => {
         const $ = cheerio.load(renderComponent('select', EXAMPLE_SELECT));
 
-        const values = mapAll($('select > option'), node => node.attr('value'));
+        const values = mapAll($('select > option'), (node) => node.attr('value'));
         expect(values).toEqual(['1', '2', '3']);
       });
 
@@ -195,7 +195,7 @@ describe('macro: select', () => {
           }),
         );
 
-        const values = mapAll($('select > option'), node => node.attr('value'));
+        const values = mapAll($('select > option'), (node) => node.attr('value'));
         expect(values).toEqual(['First option', 'Second option']);
       });
     });

package/components/share-page/_macro.spec.js

@@ -24,11 +24,7 @@ describe('macro: share-page', () => {
   it('wraps title in <h2> element by default', () => {
     const $ = cheerio.load(renderComponent('share-page', EXAMPLE_SHARE_PAGE));
 
-    expect(
-      $('h2')
-        .text()
-        .trim(),
-    ).toBe('Share page');
+    expect($('h2').text().trim()).toBe('Share page');
   });
 
   it('wraps title in custom element when `titleTag` is provided', () => {
@@ -39,11 +35,7 @@ describe('macro: share-page', () => {
       }),
     );
 
-    expect(
-      $('h4')
-        .text()
-        .trim(),
-    ).toBe('Share page');
+    expect($('h4').text().trim()).toBe('Share page');
   });
 
   it('uses the provided icon size', () => {
@@ -65,7 +57,7 @@ describe('macro: share-page', () => {
 
       faker.renderComponent('share-page', EXAMPLE_SHARE_PAGE);
 
-      const twitterItem = listsSpy.occurrences[0].itemsList.find(item => item.text === 'Twitter');
+      const twitterItem = listsSpy.occurrences[0].itemsList.find((item) => item.text === 'Twitter');
       expect(twitterItem.url).toBe(
         'https://twitter.com/intent/tweet?original_referer&text=An%20example%20page&url=https%3A%2F%2Fexample.com%2Fan-example-page',
       );
@@ -77,7 +69,7 @@ describe('macro: share-page', () => {
 
       faker.renderComponent('share-page', EXAMPLE_SHARE_PAGE);
 
-      const twitterItem = listsSpy.occurrences[0].itemsList.find(item => item.text === 'Twitter');
+      const twitterItem = listsSpy.occurrences[0].itemsList.find((item) => item.text === 'Twitter');
       expect(twitterItem.rel).toContain('noreferrer');
       expect(twitterItem.rel).toContain('external');
       expect(twitterItem.target).toBe('_blank');
@@ -91,7 +83,7 @@ describe('macro: share-page', () => {
 
       faker.renderComponent('share-page', EXAMPLE_SHARE_PAGE);
 
-      const facebookItem = listsSpy.occurrences[0].itemsList.find(item => item.text === 'Facebook');
+      const facebookItem = listsSpy.occurrences[0].itemsList.find((item) => item.text === 'Facebook');
       expect(facebookItem.url).toBe('https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2Fan-example-page');
     });
 
@@ -101,7 +93,7 @@ describe('macro: share-page', () => {
 
       faker.renderComponent('share-page', EXAMPLE_SHARE_PAGE);
 
-      const facebookItem = listsSpy.occurrences[0].itemsList.find(item => item.text === 'Facebook');
+      const facebookItem = listsSpy.occurrences[0].itemsList.find((item) => item.text === 'Facebook');
       expect(facebookItem.rel).toContain('noreferrer');
       expect(facebookItem.rel).toContain('external');
       expect(facebookItem.target).toBe('_blank');

package/components/skip-to-content/_macro.spec.js

@@ -3,7 +3,7 @@
 import * as cheerio from 'cheerio';
 
 import axe from '../../tests/helpers/axe';
-import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
+import { renderComponent } from '../../tests/helpers/rendering';
 
 describe('macro: skip-to-content', () => {
   it('passes jest-axe checks', async () => {
@@ -48,11 +48,7 @@ describe('macro: skip-to-content', () => {
       }),
     );
 
-    expect(
-      $('.ons-skip-to-content')
-        .text()
-        .trim(),
-    ).toBe('Skip to the content');
+    expect($('.ons-skip-to-content').text().trim()).toBe('Skip to the content');
   });
 
   it('has skip link with the default text if no text provided`', async () => {
@@ -62,10 +58,6 @@ describe('macro: skip-to-content', () => {
       }),
     );
 
-    expect(
-      $('.ons-skip-to-content')
-        .text()
-        .trim(),
-    ).toBe('Skip to content');
+    expect($('.ons-skip-to-content').text().trim()).toBe('Skip to content');
   });
 });

package/components/skip-to-content/skip-to-content.dom.js

@@ -4,7 +4,7 @@ import skipToMain from './skip-to-content';
 async function initaliseSkipToLink() {
   const links = [...document.querySelectorAll('.ons-skip-to-content')];
   if (links.length) {
-    links.forEach(link => {
+    links.forEach((link) => {
       skipToMain(link);
     });
   }

package/components/skip-to-content/skip-to-content.js

@@ -1,6 +1,6 @@
 export default function skipToMain(link) {
   const id = link.getAttribute('href').replace('#', '');
-  link.addEventListener('click', event => {
+  link.addEventListener('click', (event) => {
     event.preventDefault();
     document.getElementById(id).tabIndex = -1;
     document.getElementById(id).style.outline = 'none';