@ons/design-system 65.2.1 → 65.2.3

package/components/breadcrumbs/_macro.njk

@@ -5,7 +5,7 @@
         <ol class="ons-breadcrumbs__items ons-u-fs-s">
             {% for item in params.itemsList %}
                 <li class="ons-breadcrumbs__item{{ ' ' + item.itemClasses if item.itemClasses else '' }}" id="breadcrumb-{{ loop.index }}">
-                    <a class="ons-breadcrumbs__link{{ ' ' + item.linkClasses if item.linkClasses else '' }}" href="{{ item.url }}"{% if item.id %} id="{{ item.id }}"{% endif %}
+                    <a class="ons-breadcrumbs__link{{ ' ' + item.linkClasses if item.linkClasses else '' }}" href={% if not isDesignSystemExample %}"{{ item.url }}"{% else %}"#0"{% endif %}{% if item.id %} id="{{ item.id }}"{% endif %}
                     {% if item.attributes %}{% for attribute, value in (item.attributes.items() if item.attributes is mapping and item.attributes.items else item.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}
                     >{{ item.text }}</a>
                     {{

package/components/breadcrumbs/_macro.spec.js

@@ -97,23 +97,23 @@ describe('macro: breadcrumbs', () => {
   it('has provided `url` on `link` elements', () => {
     const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
 
-    const urls = mapAll($('.ons-breadcrumbs__link'), node => node.attr('href'));
+    const urls = mapAll($('.ons-breadcrumbs__link'), (node) => node.attr('href'));
     expect(urls).toEqual(['https://example.com/', 'https://example.com/guide/']);
   });
 
   it('has provided `text` on `link` elements', () => {
     const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
 
-    const labels = mapAll($('.ons-breadcrumbs__link'), node => node.text().trim());
+    const labels = mapAll($('.ons-breadcrumbs__link'), (node) => node.text().trim());
     expect(labels).toEqual(['Home', 'Guide']);
   });
 
   it('has provided `attributes` on `link` elements', () => {
     const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
 
-    const testValuesA = mapAll($('.ons-breadcrumbs__link'), node => node.attr('data-a'));
+    const testValuesA = mapAll($('.ons-breadcrumbs__link'), (node) => node.attr('data-a'));
     expect(testValuesA).toEqual(['123', '789']);
-    const testValuesB = mapAll($('.ons-breadcrumbs__link'), node => node.attr('data-b'));
+    const testValuesB = mapAll($('.ons-breadcrumbs__link'), (node) => node.attr('data-b'));
     expect(testValuesB).toEqual(['456', 'ABC']);
   });
 
@@ -123,7 +123,7 @@ describe('macro: breadcrumbs', () => {
 
     faker.renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_MINIMAL);
 
-    const iconTypes = iconsSpy.occurrences.map(occurrence => occurrence.iconType);
+    const iconTypes = iconsSpy.occurrences.map((occurrence) => occurrence.iconType);
     expect(iconTypes).toEqual(['chevron', 'chevron']);
   });
 });

package/components/card/example-card-set-with-lists.njk

@@ -13,11 +13,11 @@
                 "itemsList": [
                     {
                         "url": '#0',
-                        "text": 'List item 1'
+                        "text": 'List item 1 about the census'
                     },
                     {
                         "url": '#0',
-                        "text": 'List item 2'
+                        "text": 'List item 2 about the census'
                     }
                 ]
             }) }}
@@ -33,11 +33,11 @@
                 "itemsList": [
                     {
                         "url": '#0',
-                        "text": 'List item 1'
+                        "text": 'List item 1 about working on the census'
                     },
                     {
                         "url": '#0',
-                        "text": 'List item 2'
+                        "text": 'List item 2 about working on the census'
                     }
                 ]
             }) }}
@@ -53,11 +53,11 @@
                 "itemsList": [
                     {
                         "url": '#0',
-                        "text": 'List item 1'
+                        "text": 'List item 1 about your data and security'
                     },
                     {
                         "url": '#0',
-                        "text": 'List item 2'
+                        "text": 'List item 2 about your data and security'
                     }
                 ]
             }) }}

package/components/cookies-banner/_macro.njk

@@ -1,35 +1,50 @@
 {% macro onsCookiesBanner(params) %}
+    {% from "components/button/_macro.njk" import onsButton %}
+
     {% if params.lang == 'cy' %}
         {% set ariaLabel = 'Cwcis' %}
         {% set serviceName = 'ons.gov.uk' %}
+        {% set defaultCookiesLink = '/cwics' %}
         {% set statementTitle = 'Cwcis ar' %}
         {% set settingsLinkText = 'Gweld cwcis' %}
-        {% set settingsLinkURL = params.settingsLinkTextURL | default('/cwics') %}
-        {% set statementText = '<p>Ffeiliau bach a gaiff eu storio ar eich dyfais pan fyddwch yn mynd ar wefan yw cwcis. Rydym ni’n defnyddio rhai cwcis hanfodol i wneud i’r wefan hon weithio.</p><p>Hoffem osod <a href="' + settingsLinkURL + '">cwcis ychwanegol</a> er mwyn cofio eich gosodiadau a deall sut rydych chi’n defnyddio’r wefan. Mae hyn yn ein helpu ni i wella ein gwasanaethau.</p>' %}
         {% set acceptButtonText = 'Derbyn cwcis ychwanegol' %}
         {% set rejectButtonText = 'Gwrthod cwcis ychwanegol' %}
         {% set acceptedText = 'Rydych chi wedi derbyn yr holl gwcis ychwanegol.' %}
-        {% set rejectedText =  'Rydych chi wedi gwrthod yr holl gwcis ychwanegol. ' %}
-        {% set preferencesText =  'Gallwch chi <a href="' + settingsLinkURL + '">newid eich dewisiadau o ran cwcis</a> ar unrhyw adeg.' %}
+        {% set rejectedText = 'Rydych chi wedi gwrthod yr holl gwcis ychwanegol.' %}
         {% set confirmationButtonText = 'Cuddio' %}
-        {% set confirmationButtonTextAria = 'neges hon' %}
+        {% set contextSuffix = 'neges hon' %}
+        {% set beforeLinkPreferencesURL = 'Gallwch chi' %}
+        {% set afterLinkPreferencesURL = '"newid eich dewisiadau o ran cwcis</a> ar unrhyw adeg.' %}
+        {% set beforeLinkStatementText = '<p>Ffeiliau bach a gaiff eu storio ar eich dyfais pan fyddwch yn mynd ar wefan yw cwcis. Rydym ni’n defnyddio rhai cwcis hanfodol i wneud i’r wefan hon weithio.</p><p>Hoffem osod' %}
+        {% set afterLinkStatementText = 'cwcis ychwanegol</a> er mwyn cofio eich gosodiadau a deall sut rydych chi’n defnyddio’r wefan. Mae hyn yn ein helpu ni i wella ein gwasanaethau.</p>' %}
     {% else %}
         {% set ariaLabel = 'Cookies banner' %}
         {% set serviceName = 'ons.gov.uk' %}
+        {% set defaultCookiesLink = '/cookies' %}
         {% set statementTitle = 'Cookies on' %}
         {% set settingsLinkText = 'View cookies' %}
-        {% set settingsLinkURL = params.settingsLinkTextURL | default('/cookies') %}
-        {% set statementText = '<p>Cookies are small files stored on your device when you visit a website. We use some essential cookies to make this website work.</p><p>We would like to set <a href="' + settingsLinkURL + '">additional cookies</a> to remember your settings and understand how you use the site. This helps us to improve our services. </p>' %}
         {% set acceptButtonText = 'Accept additional cookies' %}
         {% set rejectButtonText = 'Reject additional cookies' %}
         {% set acceptedText = 'You have accepted all additional cookies.' %}
-        {% set rejectedText =  'You have rejected all additional cookies.' %}
-        {% set preferencesText =  'You can <a href="' + settingsLinkURL + '">change your cookie preferences</a> at any time.' %}
+        {% set rejectedText = 'You have rejected all additional cookies.' %}
         {% set confirmationButtonText = 'Hide' %}
         {% set contextSuffix = 'this message' %}
+        {% set beforeLinkPreferencesURL = 'You can' %}
+        {% set afterLinkPreferencesURL = 'change your cookie preferences</a> at any time.' %}
+        {% set beforeLinkStatementText = '<p>Cookies are small files stored on your device when you visit a website. We use some essential cookies to make this website work.</p><p>We would like to set' %}
+        {% set afterLinkStatementText = 'additional cookies</a> to remember your settings and understand how you use the site. This helps us to improve our services. </p>' %}
     {% endif %}
 
-    <div class="ons-cookies-banner" role="region" aria-label="{{ params.ariaLabel | default(ariaLabel)}}">
+    {% if not isDesignSystemExample %}
+        {% set settingsLinkURL = params.settingsLinkTextURL | default(defaultCookiesLink) %}
+    {% else %}
+        {% set settingsLinkURL = '#0' %}
+    {% endif %}
+
+    {% set statementText = beforeLinkStatementText + ' <a href="' + settingsLinkURL + '">' + afterLinkStatementText %}
+    {% set preferencesText = beforeLinkPreferencesURL + ' <a href="' + settingsLinkURL + '">' + afterLinkPreferencesURL %}
+
+    <div class="ons-cookies-banner" role="region" aria-label="{{ params.ariaLabel | default(ariaLabel) }}">
         <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }} ons-cookies-banner__primary">
             <div class="ons-grid">
                 <div class="ons-grid__col ons-col-8@m">
@@ -39,50 +54,49 @@
             </div>
             <div class="ons-grid ons-grid--flex ons-u-mt-s">
                 <div class="ons-grid__col">
-                    {% from "components/button/_macro.njk" import onsButton %}
                     {{
-                            onsButton({
-                                "type": 'button',
-                                "attributes": {
-                                    "data-button": 'accept'
-                                },
-                                "text": params.acceptButtonText | default(acceptButtonText),
-                                "classes": 'ons-btn--small ons-js-accept-cookies ons-cookies-banner__btn'
-                            })
+                        onsButton({
+                            "type": 'button',
+                            "attributes": {
+                                "data-button": 'accept'
+                            },
+                            "text": params.acceptButtonText | default(acceptButtonText),
+                            "classes": 'ons-btn--small ons-js-accept-cookies ons-cookies-banner__btn'
+                        })
                     }}
                 </div>
                 <div class="ons-grid__col">
                     {{
-                            onsButton({
-                                "type": 'button',
-                                "attributes": {
-                                    "data-button": 'reject'
-                                },
-                                "text": params.rejectButtonText | default(rejectButtonText),
-                                "classes": 'ons-btn--small ons-js-reject-cookies ons-cookies-banner__btn'
-                            })
+                        onsButton({
+                            "type": 'button',
+                            "attributes": {
+                                "data-button": 'reject'
+                            },
+                            "text": params.rejectButtonText | default(rejectButtonText),
+                            "classes": 'ons-btn--small ons-js-reject-cookies ons-cookies-banner__btn'
+                        })
                     }}
                 </div>
                 <div class="ons-grid__col">
-                    <a class="ons-cookies-banner__link" href="{{ params.settingsLinkURL | default(settingsLinkURL) }}">{{ params.settingsLinkText | default(settingsLinkText) }}</a>
+                    <a class="ons-cookies-banner__link" href="{{ settingsLinkURL }}">{{ params.settingsLinkText | default(settingsLinkText) }}</a>
                 </div>
             </div>
         </div>
         <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }} ons-cookies-banner__confirmation ons-u-d-no">
             <div class="ons-grid ons-grid--flex ons-grid--between ons-grid--gutterless ons-grid--no-wrap@s ons-grid--vertical-center">
-              <div class="ons-grid__col ons-grid__col--flex ons-col-auto ons-u-flex-shrink@s">
-                <p class="ons-cookies-banner__desc ons-u-mb-no@s ons-u-mr-s@s"><span class="ons-js-accepted-text ons-u-d-no">{{ params.acceptedText | default(acceptedText) | safe }} </span><span class="ons-js-rejected-text ons-u-d-no">{{ params.rejectedText | default(rejectedText) | safe }} </span><span class="ons-cookies-banner__preferences-text">{{ params.preferencesText | default(preferencesText) | safe }}</span></p>
-              </div>
-              <div class="ons-grid__col">
-                {{
-                    onsButton({
-                        "type": 'button',
-                        "text": params.confirmationButtonText | default(confirmationButtonText),
-                        "buttonContext": params.contextSuffix | default(contextSuffix),
-                        "classes": 'ons-btn--secondary ons-btn--small ons-js-hide-button'
-                    })
-                }}
-              </div>
+                <div class="ons-grid__col ons-grid__col--flex ons-col-auto ons-u-flex-shrink@s">
+                    <p class="ons-cookies-banner__desc ons-u-mb-no@s ons-u-mr-s@s"><span class="ons-js-accepted-text ons-u-d-no">{{ params.acceptedText | default(acceptedText) | safe }} </span><span class="ons-js-rejected-text ons-u-d-no">{{ params.rejectedText | default(rejectedText) | safe }} </span><span class="ons-cookies-banner__preferences-text">{{ params.preferencesText | default(preferencesText) | safe }}</span></p>
+                </div>
+                <div class="ons-grid__col">
+                    {{
+                        onsButton({
+                            "type": 'button',
+                            "text": params.confirmationButtonText | default(confirmationButtonText),
+                            "buttonContext": params.contextSuffix | default(contextSuffix),
+                            "classes": 'ons-btn--secondary ons-btn--small ons-js-hide-button'
+                        })
+                    }}
+                </div>
             </div>
         </div>
     </div>

package/components/cookies-banner/_macro.spec.js

@@ -43,18 +43,14 @@ describe('macro: cookies-banner', () => {
       it('has `statementTitle` title text', () => {
         const $ = cheerio.load(renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER_PARAMS));
 
-        const statementTitle = $('.ons-cookies-banner__title')
-          .text()
-          .trim();
+        const statementTitle = $('.ons-cookies-banner__title').text().trim();
         expect(statementTitle).toBe('Cookies on override ons.gov.uk override');
       });
 
       it('has `statementText` text', () => {
         const $ = cheerio.load(renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER_PARAMS));
 
-        const statementText = $('.ons-cookies-banner__primary .ons-cookies-banner__statement')
-          .html()
-          .trim();
+        const statementText = $('.ons-cookies-banner__primary .ons-cookies-banner__statement').html().trim();
         expect(statementText).toBe('Statement override');
       });
 
@@ -79,9 +75,7 @@ describe('macro: cookies-banner', () => {
       it('Renders a link with text', () => {
         const $ = cheerio.load(renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER_PARAMS));
 
-        const linkText = $('.ons-cookies-banner__link')
-          .text()
-          .trim();
+        const linkText = $('.ons-cookies-banner__link').text().trim();
         expect(linkText).toBe('Cookie settings override');
       });
 
@@ -97,9 +91,7 @@ describe('macro: cookies-banner', () => {
       it('has `preferencesText` text', () => {
         const $ = cheerio.load(renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER_PARAMS));
 
-        const preferencesText = $('.ons-cookies-banner__confirmation .ons-cookies-banner__preferences-text')
-          .html()
-          .trim();
+        const preferencesText = $('.ons-cookies-banner__confirmation .ons-cookies-banner__preferences-text').html().trim();
         expect(preferencesText).toBe('Text override');
       });
 
@@ -134,18 +126,14 @@ describe('macro: cookies-banner', () => {
       it('has `statementTitle` title text', () => {
         const $ = cheerio.load(renderComponent('cookies-banner', {}));
 
-        const statementTitle = $('.ons-cookies-banner__title')
-          .text()
-          .trim();
+        const statementTitle = $('.ons-cookies-banner__title').text().trim();
         expect(statementTitle).toBe('Cookies on ons.gov.uk');
       });
 
       it('has `statementText` text', () => {
         const $ = cheerio.load(renderComponent('cookies-banner', {}));
 
-        const statementText = $('.ons-cookies-banner__primary .ons-cookies-banner__statement')
-          .html()
-          .trim();
+        const statementText = $('.ons-cookies-banner__primary .ons-cookies-banner__statement').html().trim();
         expect(statementText).toBe(
           '<p>Cookies are small files stored on your device when you visit a website. We use some essential cookies to make this website work.</p><p>We would like to set <a href="/cookies">additional cookies</a> to remember your settings and understand how you use the site. This helps us to improve our services. </p>',
         );
@@ -172,9 +160,7 @@ describe('macro: cookies-banner', () => {
       it('Renders a link with text', () => {
         const $ = cheerio.load(renderComponent('cookies-banner', {}));
 
-        const linkText = $('.ons-cookies-banner__link')
-          .text()
-          .trim();
+        const linkText = $('.ons-cookies-banner__link').text().trim();
         expect(linkText).toBe('View cookies');
       });
 
@@ -210,9 +196,7 @@ describe('macro: cookies-banner', () => {
       it('has `preferencesText` text', () => {
         const $ = cheerio.load(renderComponent('cookies-banner', {}));
 
-        const preferencesText = $('.ons-cookies-banner__confirmation .ons-cookies-banner__preferences-text')
-          .html()
-          .trim();
+        const preferencesText = $('.ons-cookies-banner__confirmation .ons-cookies-banner__preferences-text').html().trim();
         expect(preferencesText).toBe('You can <a href="/cookies">change your cookie preferences</a> at any time.');
       });
 
@@ -260,9 +244,7 @@ describe('macro: cookies-banner', () => {
     it('has the welsh version of default values', () => {
       const $ = cheerio.load(renderComponent('cookies-banner', { lang: 'cy' }));
 
-      const statementTitle = $('.ons-cookies-banner__title')
-        .text()
-        .trim();
+      const statementTitle = $('.ons-cookies-banner__title').text().trim();
       expect(statementTitle).toBe('Cwcis ar ons.gov.uk');
     });
   });

package/components/download-resources/download-resources.spec.js

@@ -1,8 +1,9 @@
-import puppeteer from 'puppeteer';
-
+import { KnownDevices } from 'puppeteer';
 import { setViewport } from '../../tests/helpers/puppeteer';
 import { renderComponent, renderTemplate, setTestPage } from '../../tests/helpers/rendering';
 
+const iPhoneX = KnownDevices['iPhone X'];
+
 const EXAMPLE_PAGE = `
   <div class="ons-page">
     <div class="ons-js-adv-filter">
@@ -199,12 +200,12 @@ describe('script: download-resources', () => {
     });
 
     it('updates result count text', async () => {
-      const resultsCount = await page.$eval('.ons-js-adv-filter__results-count', node => node.textContent.trim());
+      const resultsCount = await page.$eval('.ons-js-adv-filter__results-count', (node) => node.textContent.trim());
       expect(resultsCount).toBe('3');
     });
 
     it('hides the "No results" content', async () => {
-      const isHidden = await page.$eval('.ons-adv-filter__no-results', node => node.classList.contains('ons-u-hidden'));
+      const isHidden = await page.$eval('.ons-adv-filter__no-results', (node) => node.classList.contains('ons-u-hidden'));
       expect(isHidden).toBe(true);
     });
   });
@@ -226,12 +227,12 @@ describe('script: download-resources', () => {
     });
 
     it('updates result count text', async () => {
-      const resultsCount = await page.$eval('.ons-js-adv-filter__results-count', node => node.textContent.trim());
+      const resultsCount = await page.$eval('.ons-js-adv-filter__results-count', (node) => node.textContent.trim());
       expect(resultsCount).toBe('0');
     });
 
     it('shows the "No results" content', async () => {
-      const isHidden = await page.$eval('.ons-adv-filter__no-results', node => node.classList.contains('ons-u-hidden'));
+      const isHidden = await page.$eval('.ons-adv-filter__no-results', (node) => node.classList.contains('ons-u-hidden'));
       expect(isHidden).toBe(false);
     });
   });
@@ -253,12 +254,12 @@ describe('script: download-resources', () => {
     });
 
     it('updates result count text', async () => {
-      const resultsCount = await page.$eval('.ons-js-adv-filter__results-count', node => node.textContent.trim());
+      const resultsCount = await page.$eval('.ons-js-adv-filter__results-count', (node) => node.textContent.trim());
       expect(resultsCount).toBe('2');
     });
 
     it('hides the "No results" content', async () => {
-      const isHidden = await page.$eval('.ons-adv-filter__no-results', node => node.classList.contains('ons-u-hidden'));
+      const isHidden = await page.$eval('.ons-adv-filter__no-results', (node) => node.classList.contains('ons-u-hidden'));
       expect(isHidden).toBe(true);
     });
   });
@@ -281,12 +282,12 @@ describe('script: download-resources', () => {
     });
 
     it('updates result count text', async () => {
-      const resultsCount = await page.$eval('.ons-js-adv-filter__results-count', node => node.textContent.trim());
+      const resultsCount = await page.$eval('.ons-js-adv-filter__results-count', (node) => node.textContent.trim());
       expect(resultsCount).toBe('3');
     });
 
     it('hides the "No results" content', async () => {
-      const isHidden = await page.$eval('.ons-adv-filter__no-results', node => node.classList.contains('ons-u-hidden'));
+      const isHidden = await page.$eval('.ons-adv-filter__no-results', (node) => node.classList.contains('ons-u-hidden'));
       expect(isHidden).toBe(true);
     });
   });
@@ -309,12 +310,12 @@ describe('script: download-resources', () => {
     });
 
     it('updates result count text', async () => {
-      const resultsCount = await page.$eval('.ons-js-adv-filter__results-count', node => node.textContent.trim());
+      const resultsCount = await page.$eval('.ons-js-adv-filter__results-count', (node) => node.textContent.trim());
       expect(resultsCount).toBe('0');
     });
 
     it('shows the "No results" content', async () => {
-      const isHidden = await page.$eval('.ons-adv-filter__no-results', node => node.classList.contains('ons-u-hidden'));
+      const isHidden = await page.$eval('.ons-adv-filter__no-results', (node) => node.classList.contains('ons-u-hidden'));
       expect(isHidden).toBe(false);
     });
   });
@@ -337,12 +338,12 @@ describe('script: download-resources', () => {
     });
 
     it('updates result count text', async () => {
-      const resultsCount = await page.$eval('.ons-js-adv-filter__results-count', node => node.textContent.trim());
+      const resultsCount = await page.$eval('.ons-js-adv-filter__results-count', (node) => node.textContent.trim());
       expect(resultsCount).toBe('2');
     });
 
     it('hides the "No results" content', async () => {
-      const isHidden = await page.$eval('.ons-adv-filter__no-results', node => node.classList.contains('ons-u-hidden'));
+      const isHidden = await page.$eval('.ons-adv-filter__no-results', (node) => node.classList.contains('ons-u-hidden'));
       expect(isHidden).toBe(true);
     });
   });
@@ -365,12 +366,12 @@ describe('script: download-resources', () => {
     });
 
     it('updates result count text', async () => {
-      const resultsCount = await page.$eval('.ons-js-adv-filter__results-count', node => node.textContent.trim());
+      const resultsCount = await page.$eval('.ons-js-adv-filter__results-count', (node) => node.textContent.trim());
       expect(resultsCount).toBe('1');
     });
 
     it('hides the "No results" content', async () => {
-      const isHidden = await page.$eval('.ons-adv-filter__no-results', node => node.classList.contains('ons-u-hidden'));
+      const isHidden = await page.$eval('.ons-adv-filter__no-results', (node) => node.classList.contains('ons-u-hidden'));
       expect(isHidden).toBe(true);
     });
   });
@@ -394,12 +395,12 @@ describe('script: download-resources', () => {
     });
 
     it('updates result count text', async () => {
-      const resultsCount = await page.$eval('.ons-js-adv-filter__results-count', node => node.textContent.trim());
+      const resultsCount = await page.$eval('.ons-js-adv-filter__results-count', (node) => node.textContent.trim());
       expect(resultsCount).toBe('2');
     });
 
     it('hides the "No results" content', async () => {
-      const isHidden = await page.$eval('.ons-adv-filter__no-results', node => node.classList.contains('ons-u-hidden'));
+      const isHidden = await page.$eval('.ons-adv-filter__no-results', (node) => node.classList.contains('ons-u-hidden'));
       expect(isHidden).toBe(true);
     });
   });
@@ -432,7 +433,7 @@ describe('script: download-resources', () => {
 
     it('resets state of all filter checkboxes ', async () => {
       const selector = '.ons-js-adv-filter__item .ons-js-checkbox';
-      const checkboxStates = await page.$$eval(selector, nodes => nodes.map(node => `${node.id}: ${node.checked}`));
+      const checkboxStates = await page.$$eval(selector, (nodes) => nodes.map((node) => `${node.id}: ${node.checked}`));
 
       expect(checkboxStates).toEqual(['community-groups: false', 'general-public: false', 'booklet: false', 'logo: false']);
     });
@@ -448,12 +449,12 @@ describe('script: download-resources', () => {
     });
 
     it('updates result count text', async () => {
-      const resultsCount = await page.$eval('.ons-js-adv-filter__results-count', node => node.textContent.trim());
+      const resultsCount = await page.$eval('.ons-js-adv-filter__results-count', (node) => node.textContent.trim());
       expect(resultsCount).toBe('3');
     });
 
     it('hides the "No results" content', async () => {
-      const isHidden = await page.$eval('.ons-adv-filter__no-results', node => node.classList.contains('ons-u-hidden'));
+      const isHidden = await page.$eval('.ons-adv-filter__no-results', (node) => node.classList.contains('ons-u-hidden'));
       expect(isHidden).toBe(true);
     });
   });
@@ -470,19 +471,19 @@ describe('script: download-resources', () => {
     });
 
     it('hides elements that are only needed for mobile', async () => {
-      const displayStyle = await page.$eval('.ons-adv-filter__trigger', node => getComputedStyle(node).display);
+      const displayStyle = await page.$eval('.ons-adv-filter__trigger', (node) => getComputedStyle(node).display);
       expect(displayStyle).toBe('none');
     });
 
     it('shows filter elements', async () => {
-      const displayStyle = await page.$eval('.ons-adv-filter__panel', node => getComputedStyle(node).display);
+      const displayStyle = await page.$eval('.ons-adv-filter__panel', (node) => getComputedStyle(node).display);
       expect(displayStyle).not.toBe('none');
     });
   });
 
   describe('when the viewport is small', () => {
     beforeEach(async () => {
-      await page.emulate(puppeteer.devices['iPhone X']);
+      await page.emulate(iPhoneX);
       await setTestPage('/test', RENDERED_EXAMPLE_PAGE);
     });
 
@@ -492,27 +493,27 @@ describe('script: download-resources', () => {
     });
 
     it('shows elements that are only needed for mobile', async () => {
-      const displayStyle = await page.$eval('.ons-adv-filter__trigger', node => getComputedStyle(node).display);
+      const displayStyle = await page.$eval('.ons-adv-filter__trigger', (node) => getComputedStyle(node).display);
       expect(displayStyle).not.toBe('none');
     });
 
     it('hides filter elements', async () => {
-      const displayStyle = await page.$eval('.ons-adv-filter__panel', node => getComputedStyle(node).display);
+      const displayStyle = await page.$eval('.ons-adv-filter__panel', (node) => getComputedStyle(node).display);
       expect(displayStyle).toBe('none');
     });
 
     it('shows filter elements when the "Show filters" button is pressed', async () => {
       await page.click('.ons-js-adv-filter__trigger');
 
-      const displayStyle = await page.$eval('.ons-adv-filter__panel', node => getComputedStyle(node).display);
+      const displayStyle = await page.$eval('.ons-adv-filter__panel', (node) => getComputedStyle(node).display);
       expect(displayStyle).not.toBe('none');
     });
 
     it('hides the underlying page elements when the "Show filters" button is pressed', async () => {
       await page.click('.ons-js-adv-filter__trigger');
 
-      const pageIsHidden = await page.$eval('.ons-page', node => node.classList.contains('ons-u-d-no'));
-      const pageIsAriaHidden = await page.$eval('.ons-page', node => node.getAttribute('aria-hidden'));
+      const pageIsHidden = await page.$eval('.ons-page', (node) => node.classList.contains('ons-u-d-no'));
+      const pageIsAriaHidden = await page.$eval('.ons-page', (node) => node.getAttribute('aria-hidden'));
 
       expect(pageIsHidden).toBe(true);
       expect(pageIsAriaHidden).toBe('true');
@@ -522,7 +523,7 @@ describe('script: download-resources', () => {
       await page.click('.ons-js-adv-filter__trigger');
       await page.click('.ons-js-adv-filter__show');
 
-      const displayStyle = await page.$eval('.ons-adv-filter__panel', node => getComputedStyle(node).display);
+      const displayStyle = await page.$eval('.ons-adv-filter__panel', (node) => getComputedStyle(node).display);
       expect(displayStyle).toBe('none');
     });
 
@@ -530,8 +531,8 @@ describe('script: download-resources', () => {
       await page.click('.ons-js-adv-filter__trigger');
       await page.click('.ons-js-adv-filter__show');
 
-      const pageIsHidden = await page.$eval('.ons-page', node => node.classList.contains('ons-u-d-no'));
-      const pageIsAriaHidden = await page.$eval('.ons-page', node => node.getAttribute('aria-hidden'));
+      const pageIsHidden = await page.$eval('.ons-page', (node) => node.classList.contains('ons-u-d-no'));
+      const pageIsAriaHidden = await page.$eval('.ons-page', (node) => node.getAttribute('aria-hidden'));
 
       expect(pageIsHidden).toBe(false);
       expect(pageIsAriaHidden).toBe('false');
@@ -541,7 +542,7 @@ describe('script: download-resources', () => {
       await page.click('.ons-js-adv-filter__trigger');
       await page.click('.ons-js-adv-filter__close');
 
-      const displayStyle = await page.$eval('.ons-adv-filter__panel', node => getComputedStyle(node).display);
+      const displayStyle = await page.$eval('.ons-adv-filter__panel', (node) => getComputedStyle(node).display);
       expect(displayStyle).toBe('none');
     });
 
@@ -549,8 +550,8 @@ describe('script: download-resources', () => {
       await page.click('.ons-js-adv-filter__trigger');
       await page.click('.ons-js-adv-filter__close');
 
-      const pageIsHidden = await page.$eval('.ons-page', node => node.classList.contains('ons-u-d-no'));
-      const pageIsAriaHidden = await page.$eval('.ons-page', node => node.getAttribute('aria-hidden'));
+      const pageIsHidden = await page.$eval('.ons-page', (node) => node.classList.contains('ons-u-d-no'));
+      const pageIsAriaHidden = await page.$eval('.ons-page', (node) => node.getAttribute('aria-hidden'));
 
       expect(pageIsHidden).toBe(false);
       expect(pageIsAriaHidden).toBe('false');
@@ -559,7 +560,7 @@ describe('script: download-resources', () => {
 });
 
 async function getTextContent(page, selector) {
-  return await page.$$eval(selector, nodes => nodes.map(node => node.textContent.trim()));
+  return await page.$$eval(selector, (nodes) => nodes.map((node) => node.textContent.trim()));
 }
 
 async function getFilterSelectionLabels(page) {