@ons/design-system 68.0.0 → 68.0.2

package/components/table-of-contents/toc.spec.js

@@ -1,9 +1,10 @@
-import { renderBaseTemplate, renderComponent, setTestPage } from '../../tests/helpers/rendering';
+import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
 
 describe('script: table-of-contents', () => {
   beforeEach(async () => {
     await setTestPage(
       '/test',
+      /* eslint-disable indent */
       `
       <div class="ons-page__container ons-container">
         <div class="ons-grid ons-js-toc-container">
@@ -44,6 +45,7 @@ describe('script: table-of-contents', () => {
         </div>
       </div>
       `,
+      /* eslint-enable indent */
     );
   });
 
@@ -64,37 +66,38 @@ describe('script: table-of-contents-fixed-position', () => {
   beforeEach(async () => {
     await setTestPage(
       '/test',
+      /* eslint-disable indent */
       `
         <div class="ons-page__container ons-container">
-            <div class="ons-grid ons-js-toc-container">
-                <div id="sticky-container" class="ons-grid__col ons-grid__col--sticky@m ons-col-4@m">
-                ${renderComponent('table-of-contents', {
-                  title: 'Contents',
-                  ariaLabel: 'Sections in this page',
-                  itemsList: [
-                    {
-                      url: '#section1',
-                      text: 'What is the census?',
-                    },
-                    {
-                      url: '#section2',
-                      text: 'The online census has now closed',
-                    },
-                    {
-                      url: '#section3',
-                      text: 'What happens after Census Day',
-                    },
-                    {
-                      url: '#section4',
-                      text: 'The census in Northern Ireland and Scotland',
-                    },
-                    {
-                      url: '#section5',
-                      text: 'The last census',
-                    },
-                  ],
-                })}
-        </div>
+          <div class="ons-grid ons-js-toc-container">
+            <div id="sticky-container" class="ons-grid__col ons-grid__col--sticky@m ons-col-4@m">
+              ${renderComponent('table-of-contents', {
+                title: 'Contents',
+                ariaLabel: 'Sections in this page',
+                itemsList: [
+                  {
+                    url: '#section1',
+                    text: 'What is the census?',
+                  },
+                  {
+                    url: '#section2',
+                    text: 'The online census has now closed',
+                  },
+                  {
+                    url: '#section3',
+                    text: 'What happens after Census Day',
+                  },
+                  {
+                    url: '#section4',
+                    text: 'The census in Northern Ireland and Scotland',
+                  },
+                  {
+                    url: '#section5',
+                    text: 'The last census',
+                  },
+                ],
+              })}
+            </div>
             <div class="ons-grid__col ons-col-7@m ons-push-1@m">
                 <section id="section1">
                     <h2>What is the census?</h2>
@@ -138,9 +141,10 @@ describe('script: table-of-contents-fixed-position', () => {
                     <p>The CCS has now closed.</p>
                 </section>
             </div>
+          </div>
         </div>
-    </div>
-    `,
+      `,
+      /* eslint-enable indent */
       'main',
     );
   });

package/components/tabs/example-tabs-details.njk

@@ -23,7 +23,7 @@
     {% from "components/tabs/_macro.njk" import onsTabs %}
     {{
         onsTabs({
-            "variants": [ 'details' ],
+            "variants": ['details'],
             "noInitialActiveTab": true,
             "title": 'Contents',
             "tabs": [

package/components/tabs/tabs.dom.js

@@ -6,7 +6,7 @@ async function tabs() {
   if (tabs.length) {
     const Tabs = (await import('./tabs')).default;
 
-    tabs.forEach(component => new Tabs(component));
+    tabs.forEach((component) => new Tabs(component));
   }
 }
 

package/components/tabs/tabs.js

@@ -45,7 +45,7 @@ export default class Tabs {
   setupViewportChecks() {
     const breakpoint = () => {
       let finalBreakpoint = 0;
-      this.tabListItems.forEach(tab => {
+      this.tabListItems.forEach((tab) => {
         finalBreakpoint += tab.offsetWidth;
       });
       if (finalBreakpoint < 450) {
@@ -73,19 +73,19 @@ export default class Tabs {
 
     this.tabsTitle.classList.add('ons-u-vh');
     this.tabListContainer.classList.add('ons-tabs__container');
-    this.tabPanels.forEach(panel => {
+    this.tabPanels.forEach((panel) => {
       panel.setAttribute('tabindex', '0');
       if (panel.querySelector('[id*="content-title"]')) {
         panel.firstElementChild.classList.add('ons-u-vh');
       }
     });
 
-    this.tabListItems.forEach(item => {
+    this.tabListItems.forEach((item) => {
       item.setAttribute('role', 'presentation');
       item.classList.add(this.jsTabItemAsRowClass);
     });
 
-    this.tabs.forEach(tab => {
+    this.tabs.forEach((tab) => {
       this.setAttributes(tab);
       tab.classList.add(this.jsTabAsListClass);
 
@@ -112,19 +112,19 @@ export default class Tabs {
     this.tabListContainer.classList.remove('ons-tabs__container');
     this.tabsTitle.classList.remove('ons-u-vh');
 
-    this.tabPanels.forEach(panel => {
+    this.tabPanels.forEach((panel) => {
       panel.removeAttribute('tabindex', '0');
       if (panel.firstElementChild.classList.contains('ons-u-vh')) {
         panel.firstElementChild.classList.remove('ons-u-vh');
       }
     });
 
-    this.tabListItems.forEach(item => {
+    this.tabListItems.forEach((item) => {
       item.removeAttribute('role', 'presentation');
       item.classList.remove(this.jsTabItemAsRowClass);
     });
 
-    this.tabs.forEach(tab => {
+    this.tabs.forEach((tab) => {
       tab.removeEventListener('click', this.boundTabClick, true);
       tab.removeEventListener('keydown', this.boundTabKeydown, true);
       tab.classList.remove(this.jsTabAsListClass);
@@ -216,7 +216,7 @@ export default class Tabs {
 
   ensureTabIndexExists() {
     // Ensure that at least the first tab has a tab index when all tabs are hidden.
-    if (!this.tabs.find(tab => tab.getAttribute('tabindex') === '0')) {
+    if (!this.tabs.find((tab) => tab.getAttribute('tabindex') === '0')) {
       this.tabs[0].setAttribute('tabindex', '0');
     }
   }

package/components/text-indent/_macro.spec.js

@@ -25,9 +25,7 @@ describe('macro: text-indent', () => {
         }),
       );
 
-      const content = $('.ons-text-indent')
-        .text()
-        .trim();
+      const content = $('.ons-text-indent').text().trim();
       expect(content).toBe('Example text...');
     });
   });
@@ -43,9 +41,7 @@ describe('macro: text-indent', () => {
     it('has expected text', async () => {
       const $ = cheerio.load(renderComponent('text-indent', {}, 'Example content...'));
 
-      const content = $('.ons-text-indent')
-        .text()
-        .trim();
+      const content = $('.ons-text-indent').text().trim();
       expect(content).toBe('Example content...');
     });
   });

package/components/textarea/textarea.dom.js

@@ -5,7 +5,7 @@ async function initialise() {
   if (limitedInputs.length) {
     const CharLimit = (await import('../char-check-limit/character-limit')).default;
 
-    limitedInputs.forEach(input => new CharLimit(input));
+    limitedInputs.forEach((input) => new CharLimit(input));
   }
 }
 

package/components/textarea/textarea.spec.js

@@ -24,7 +24,7 @@ describe('script: textarea', () => {
 
     describe('Given that the char limit helper has initialised correctly', () => {
       it('the char limit readout should be visible', async () => {
-        const hasClass = await page.$eval('#example-textarea-lim', node => node.classList.contains('ons-u-d-no'));
+        const hasClass = await page.$eval('#example-textarea-lim', (node) => node.classList.contains('ons-u-d-no'));
         expect(hasClass).toBe(false);
       });
     });
@@ -36,7 +36,7 @@ describe('script: textarea', () => {
         });
 
         it('then the characters remaining readout reflect the number of characters remaining', async () => {
-          const readout = await page.$eval('#example-textarea-lim', node => node.textContent);
+          const readout = await page.$eval('#example-textarea-lim', (node) => node.textContent);
           expect(readout).toBe('You have 12 characters remaining');
         });
       });
@@ -47,17 +47,17 @@ describe('script: textarea', () => {
         });
 
         it('then the characters remaining readout reflect the number of characters remaining', async () => {
-          const readout = await page.$eval('#example-textarea-lim', node => node.textContent);
+          const readout = await page.$eval('#example-textarea-lim', (node) => node.textContent);
           expect(readout).toBe('You have 0 characters remaining');
         });
 
         it('then the textarea should be given limit reached classes', async () => {
-          const hasClass = await page.$eval('#example-textarea', node => node.classList.contains('ons-input--limit-reached'));
+          const hasClass = await page.$eval('#example-textarea', (node) => node.classList.contains('ons-input--limit-reached'));
           expect(hasClass).toBe(true);
         });
 
         it('then the readout should be given limit reached classes', async () => {
-          const hasClass = await page.$eval('#example-textarea-lim', node => node.classList.contains('ons-input__limit--reached'));
+          const hasClass = await page.$eval('#example-textarea-lim', (node) => node.classList.contains('ons-input__limit--reached'));
           expect(hasClass).toBe(true);
         });
       });
@@ -75,17 +75,17 @@ describe('script: textarea', () => {
         });
 
         it('then the characters remaining readout reflect the number of characters remaining', async () => {
-          const readout = await page.$eval('#example-textarea-lim', node => node.textContent);
+          const readout = await page.$eval('#example-textarea-lim', (node) => node.textContent);
           expect(readout).toBe('You have 1 character remaining');
         });
 
         it('then the textarea should not be given limit reached classes', async () => {
-          const hasClass = await page.$eval('#example-textarea', node => node.classList.contains('ons-input--limit-reached'));
+          const hasClass = await page.$eval('#example-textarea', (node) => node.classList.contains('ons-input--limit-reached'));
           expect(hasClass).toBe(false);
         });
 
         it('then the readout should not be given limit reached classes', async () => {
-          const hasClass = await page.$eval('#example-textarea-lim', node => node.classList.contains('ons-input__limit--reached'));
+          const hasClass = await page.$eval('#example-textarea-lim', (node) => node.classList.contains('ons-input__limit--reached'));
           expect(hasClass).toBe(false);
         });
       });

package/components/timeout-modal/_macro.spec.js

@@ -60,9 +60,7 @@ describe('macro: timeout modal', () => {
   it('has expected `textFirstLine`', () => {
     const $ = cheerio.load(renderComponent('timeout-modal', EXAMPLE_TIMEOUT_MODAL_BASIC));
 
-    const title = $('.ons-modal__body > p')
-      .html()
-      .trim();
+    const title = $('.ons-modal__body > p').html().trim();
     expect(title).toBe('It appears you have been inactive for a while.');
   });
 });

package/components/timeout-modal/timeout-modal.dom.js

@@ -6,7 +6,7 @@ async function modals() {
   if (timeouts.length) {
     const TimeoutModal = (await import('./timeout-modal')).default;
 
-    timeouts.forEach(context => {
+    timeouts.forEach((context) => {
       let url = context.getAttribute('data-server-session-expiry-endpoint');
       let time = context.getAttribute('data-server-session-expires-at');
       new TimeoutModal(context, url, time);

package/components/timeout-modal/timeout-modal.spec.js

@@ -28,7 +28,7 @@ describe('script: timeout modal', () => {
 
     it('displays the modal after the correct number of seconds', async () => {
       await page.waitForTimeout(2000);
-      const modalIsVisible = await page.$eval('.ons-modal', node => node.classList.contains('ons-u-db'));
+      const modalIsVisible = await page.$eval('.ons-modal', (node) => node.classList.contains('ons-u-db'));
       expect(modalIsVisible).toBe(true);
     });
   });
@@ -51,9 +51,9 @@ describe('script: timeout modal', () => {
       });
 
       it('shows the time counting down', async () => {
-        const timeAtStart = await page.$eval('.ons-js-timeout-timer span', element => element.innerHTML);
+        const timeAtStart = await page.$eval('.ons-js-timeout-timer span', (element) => element.innerHTML);
         await page.waitForTimeout(1000);
-        const timeAfterOneSecond = await page.$eval('.ons-js-timeout-timer span', element => element.innerHTML);
+        const timeAfterOneSecond = await page.$eval('.ons-js-timeout-timer span', (element) => element.innerHTML);
         expect(timeAfterOneSecond).not.toEqual(timeAtStart);
       });
     });
@@ -78,7 +78,7 @@ describe('script: timeout modal', () => {
       });
 
       it('displays the `minutes` (plural) string', async () => {
-        const timeString = await page.$eval('.ons-js-timeout-timer span', element => element.innerHTML);
+        const timeString = await page.$eval('.ons-js-timeout-timer span', (element) => element.innerHTML);
         expect(timeString).toEqual(expect.stringContaining('minutes'));
       });
     });
@@ -103,7 +103,7 @@ describe('script: timeout modal', () => {
       });
 
       it('displays the `seconds` (plural) string', async () => {
-        const timeString = await page.$eval('.ons-js-timeout-timer span', element => element.innerHTML);
+        const timeString = await page.$eval('.ons-js-timeout-timer span', (element) => element.innerHTML);
         expect(timeString).toEqual(expect.stringContaining('seconds'));
       });
     });
@@ -128,7 +128,7 @@ describe('script: timeout modal', () => {
       });
 
       it('displays the `minute` (singular) string', async () => {
-        const timeString = await page.$eval('.ons-js-timeout-timer span', element => element.innerHTML);
+        const timeString = await page.$eval('.ons-js-timeout-timer span', (element) => element.innerHTML);
         expect(timeString).toEqual(expect.stringContaining('minute'));
       });
     });
@@ -153,7 +153,7 @@ describe('script: timeout modal', () => {
       });
 
       it('displays the `second` (singular) string', async () => {
-        const timeString = await page.$eval('.ons-js-timeout-timer span', element => element.innerHTML);
+        const timeString = await page.$eval('.ons-js-timeout-timer span', (element) => element.innerHTML);
         expect(timeString).toEqual(expect.stringContaining('second'));
       });
     });
@@ -178,7 +178,7 @@ describe('script: timeout modal', () => {
       });
 
       it('displays the `countdownExpiredText` text', async () => {
-        const timeString = await page.$eval('.ons-js-timeout-timer span', element => element.innerHTML);
+        const timeString = await page.$eval('.ons-js-timeout-timer span', (element) => element.innerHTML);
         expect(timeString).toEqual(expect.stringContaining('You are being signed out'));
       });
 
@@ -212,13 +212,13 @@ describe('script: timeout modal', () => {
       });
 
       it('closes the modal', async () => {
-        const modalIsVisible = await page.$eval('.ons-modal', node => node.classList.contains('ons-u-db'));
+        const modalIsVisible = await page.$eval('.ons-modal', (node) => node.classList.contains('ons-u-db'));
         expect(modalIsVisible).toBe(false);
       });
 
       it('restarts the timer and displays the modal after the correct number of seconds', async () => {
         await page.waitForTimeout(2000);
-        const modalIsVisible = await page.$eval('.ons-modal', node => node.classList.contains('ons-u-db'));
+        const modalIsVisible = await page.$eval('.ons-modal', (node) => node.classList.contains('ons-u-db'));
         expect(modalIsVisible).toBe(true);
       });
     });

package/components/timeout-panel/_macro.njk

@@ -1,23 +1,22 @@
 {% from "components/panel/_macro.njk" import onsPanel %}
 {% macro onsTimeoutPanel(params) %}
     {% call onsPanel({
-            "id": params.id,
-            "classes": "ons-js-panel-with-countdown",
-            "type": "warn",
-            "attributes": {
-                "data-redirect-url": params.redirectUrl,
-                "data-server-session-expires-at": params.sessionExpiresAt,
-                "data-countdown-text": params.countdownText,
-                "data-countdown-expired-text": params.countdownExpiredText,
-                "data-minutes-text-singular": params.minutesTextSingular,
-                "data-minutes-text-plural": params.minutesTextPlural,
-                "data-seconds-text-singular": params.secondsTextSingular,
-                "data-seconds-text-plural": params.secondsTextPlural,
-                "data-full-stop": params.endWithFullStop,
-                "aria-describedby": "timeout-time-remaining"
-            }
-        })
-    %}
+        "id": params.id,
+        "classes": "ons-js-panel-with-countdown",
+        "variant": "warn",
+        "attributes": {
+            "data-redirect-url": params.redirectUrl,
+            "data-server-session-expires-at": params.sessionExpiresAt,
+            "data-countdown-text": params.countdownText,
+            "data-countdown-expired-text": params.countdownExpiredText,
+            "data-minutes-text-singular": params.minutesTextSingular,
+            "data-minutes-text-plural": params.minutesTextPlural,
+            "data-seconds-text-singular": params.secondsTextSingular,
+            "data-seconds-text-plural": params.secondsTextPlural,
+            "data-full-stop": params.endWithFullStop,
+            "aria-describedby": "timeout-time-remaining"
+        }
+    }) %}
         <noscript><p class="ons-js-nojs-text">{{ params.nojsText }}</p></noscript>
         <p class="ons-js-timeout-timer" aria-hidden="true" aria-relevant="additions"></p>
         <p class="ons-js-timeout-timer-acc ons-u-vh" role="status" id="timeout-time-remaining"></p>

package/components/timeout-panel/_macro.spec.js

@@ -36,7 +36,7 @@ describe('macro: timeout panel', () => {
     expect(panelSpy.occurrences[0]).toEqual({
       id: 'countdown',
       classes: 'ons-js-panel-with-countdown',
-      type: 'warn',
+      variant: 'warn',
       attributes: {
         'data-redirect-url': '#!',
         'data-server-session-expires-at': '000-000-000',

package/components/timeout-panel/timeout-panel.dom.js

@@ -6,7 +6,7 @@ async function timeoutPanels() {
   if (panels.length) {
     const Timeout = (await import('../../js/timeout')).default;
 
-    panels.forEach(context => {
+    panels.forEach((context) => {
       let time = context.getAttribute('data-server-session-expires-at');
       new Timeout(context, null, time, false, true);
     });

package/components/timeout-panel/timeout-panel.spec.js

@@ -28,9 +28,9 @@ describe('script: timeout panel', () => {
     });
 
     it('shows the time counting down', async () => {
-      const timeAtStart = await page.$eval('.ons-js-timeout-timer', element => element.innerHTML);
+      const timeAtStart = await page.$eval('.ons-js-timeout-timer', (element) => element.innerHTML);
       await page.waitForTimeout(1000);
-      const timeAfterOneSecond = await page.$eval('.ons-js-timeout-timer', element => element.innerHTML);
+      const timeAfterOneSecond = await page.$eval('.ons-js-timeout-timer', (element) => element.innerHTML);
       expect(timeAfterOneSecond).not.toEqual(timeAtStart);
     });
   });
@@ -49,7 +49,7 @@ describe('script: timeout panel', () => {
     });
 
     it('displays the `minutes` (plural) string', async () => {
-      const timeString = await page.$eval('.ons-js-timeout-timer', element => element.innerHTML);
+      const timeString = await page.$eval('.ons-js-timeout-timer', (element) => element.innerHTML);
       expect(timeString).toEqual(expect.stringContaining('minutes'));
     });
   });
@@ -68,7 +68,7 @@ describe('script: timeout panel', () => {
     });
 
     it('displays the `seconds` (plural) string', async () => {
-      const timeString = await page.$eval('.ons-js-timeout-timer span', element => element.innerHTML);
+      const timeString = await page.$eval('.ons-js-timeout-timer span', (element) => element.innerHTML);
       expect(timeString).toEqual(expect.stringContaining('seconds'));
     });
   });
@@ -87,7 +87,7 @@ describe('script: timeout panel', () => {
     });
 
     it('displays the `minute` (singular) string', async () => {
-      const timeString = await page.$eval('.ons-js-timeout-timer', element => element.innerHTML);
+      const timeString = await page.$eval('.ons-js-timeout-timer', (element) => element.innerHTML);
       expect(timeString).toEqual(expect.stringContaining('minute'));
     });
   });
@@ -106,7 +106,7 @@ describe('script: timeout panel', () => {
     });
 
     it('displays the `second` (singular) string', async () => {
-      const timeString = await page.$eval('.ons-js-timeout-timer span', element => element.innerHTML);
+      const timeString = await page.$eval('.ons-js-timeout-timer span', (element) => element.innerHTML);
       expect(timeString).toEqual(expect.stringContaining('second'));
     });
   });
@@ -125,7 +125,7 @@ describe('script: timeout panel', () => {
     });
 
     it('displays the `countdownExpiredText` text', async () => {
-      const timeString = await page.$eval('.ons-js-timeout-timer', element => element.innerHTML);
+      const timeString = await page.$eval('.ons-js-timeout-timer', (element) => element.innerHTML);
       expect(timeString).toEqual(expect.stringContaining('You are being signed out'));
     });
 
@@ -154,7 +154,7 @@ describe('script: timeout panel', () => {
     });
 
     it('displays the `nojsText` text', async () => {
-      const nojsText = await page.$eval('.ons-js-nojs-text', element => element.innerHTML);
+      const nojsText = await page.$eval('.ons-js-nojs-text', (element) => element.innerHTML);
       expect(nojsText.trim()).toBe('For security, your answers will only be available to view for another 1 minute');
     });
   });

package/components/video/_macro.spec.js

@@ -46,11 +46,7 @@ describe('macro: video', () => {
   it('outputs the provided link text', () => {
     const $ = cheerio.load(renderComponent('video', EXAMPLE_VIDEO_YOUTUBE));
 
-    expect(
-      $('.ons-video__link-text')
-        .text()
-        .trim(),
-    ).toBe('Example link text');
+    expect($('.ons-video__link-text').text().trim()).toBe('Example link text');
   });
 
   it('outputs a hyperlink with the provided `url`', () => {

package/components/video/video.dom.js

@@ -6,7 +6,7 @@ async function video() {
   if (videos.length) {
     const Video = (await import('./video')).default;
 
-    videos.forEach(component => new Video(component));
+    videos.forEach((component) => new Video(component));
   }
 }
 

package/components/video/video.spec.js

@@ -22,14 +22,14 @@ describe('script: video', () => {
   it('should show the placeholder content', async () => {
     await setTestPage('/test', renderComponent('video', EXAMPLE_VIDEO_YOUTUBE));
 
-    const displayStyle = await page.$eval('.ons-js-video-placeholder', node => window.getComputedStyle(node).getPropertyValue('display'));
+    const displayStyle = await page.$eval('.ons-js-video-placeholder', (node) => window.getComputedStyle(node).getPropertyValue('display'));
     expect(displayStyle).toBe('block');
   });
 
   it('should not show the iframe', async () => {
     await setTestPage('/test', renderComponent('video', EXAMPLE_VIDEO_YOUTUBE));
 
-    const displayStyle = await page.$eval('.ons-js-video-iframe', node => window.getComputedStyle(node).getPropertyValue('display'));
+    const displayStyle = await page.$eval('.ons-js-video-iframe', (node) => window.getComputedStyle(node).getPropertyValue('display'));
     expect(displayStyle).toBe('none');
   });
 
@@ -44,29 +44,31 @@ describe('script: video', () => {
     });
 
     it('should hide the placeholder content', async () => {
-      const displayStyle = await page.$eval('.ons-js-video-placeholder', node => window.getComputedStyle(node).getPropertyValue('display'));
+      const displayStyle = await page.$eval('.ons-js-video-placeholder', (node) =>
+        window.getComputedStyle(node).getPropertyValue('display'),
+      );
       expect(displayStyle).toBe('none');
     }, 10000);
 
     it('should show the iframe', async () => {
-      const displayStyle = await page.$eval('.ons-js-video-iframe', node => window.getComputedStyle(node).getPropertyValue('display'));
+      const displayStyle = await page.$eval('.ons-js-video-iframe', (node) => window.getComputedStyle(node).getPropertyValue('display'));
       expect(displayStyle).toBe('block');
     }, 10000);
 
     it('should add the correct modifier class', async () => {
-      const hasClass = await page.$eval('.ons-js-video', node => node.classList.contains('ons-video--hasIframe'));
+      const hasClass = await page.$eval('.ons-js-video', (node) => node.classList.contains('ons-video--hasIframe'));
       expect(hasClass).toBe(true);
     }, 10000);
 
     it('should not add dnt to YouTube videos', async () => {
-      const src = await page.$eval('.ons-js-video-iframe', node => node.getAttribute('src'));
+      const src = await page.$eval('.ons-js-video-iframe', (node) => node.getAttribute('src'));
       expect(src.includes('?dnt=1')).toBe(false);
     }, 10000);
 
     it('should add dnt to Vimeo videos', async () => {
       await setTestPage('/test', renderComponent('video', EXAMPLE_VIDEO_VIMEO));
 
-      const src = await page.$eval('.ons-js-video-iframe', node => node.getAttribute('src'));
+      const src = await page.$eval('.ons-js-video-iframe', (node) => node.getAttribute('src'));
       expect(src.includes('?dnt=1')).toBe(true);
     }, 10000);
   });
@@ -82,21 +84,23 @@ describe('script: video', () => {
     });
 
     it('should hide the placeholder content', async () => {
-      const displayStyle = await page.$eval('.ons-js-video-placeholder', node => window.getComputedStyle(node).getPropertyValue('display'));
+      const displayStyle = await page.$eval('.ons-js-video-placeholder', (node) =>
+        window.getComputedStyle(node).getPropertyValue('display'),
+      );
       expect(displayStyle).toBe('none');
     });
 
     it('should show the iframe', async () => {
-      const displayStyle = await page.$eval('.ons-js-video-iframe', node => window.getComputedStyle(node).getPropertyValue('display'));
+      const displayStyle = await page.$eval('.ons-js-video-iframe', (node) => window.getComputedStyle(node).getPropertyValue('display'));
       expect(displayStyle).toBe('block');
     });
 
     it('should add the correct modifier class', async () => {
-      const hasClass = await page.$eval('.ons-js-video', node => node.classList.contains('ons-video--hasIframe'));
+      const hasClass = await page.$eval('.ons-js-video', (node) => node.classList.contains('ons-video--hasIframe'));
       expect(hasClass).toBe(true);
     }, 10000);
     it('should not add dnt to YouTube videos', async () => {
-      const src = await page.$eval('.ons-js-video-iframe', node => node.getAttribute('src'));
+      const src = await page.$eval('.ons-js-video-iframe', (node) => node.getAttribute('src'));
       expect(src.includes('?dnt=1')).toBe(false);
     }, 10000);
 
@@ -108,7 +112,7 @@ describe('script: video', () => {
       );
       await page.click('.ons-js-accept-cookies');
 
-      const src = await page.$eval('.ons-js-video-iframe', node => node.getAttribute('src'));
+      const src = await page.$eval('.ons-js-video-iframe', (node) => node.getAttribute('src'));
       expect(src.includes('?dnt=1')).toBe(true);
     }, 10000);
   });