@ons/design-system 67.2.0 → 69.0.0

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);
   });