@ons/design-system 70.0.6 → 70.0.8

package/components/video/video.dom.js

@@ -1,13 +1,13 @@
 import domready from '../../js/domready';
 
 async function video() {
-  const videos = [...document.querySelectorAll('.ons-js-video')];
+    const videos = [...document.querySelectorAll('.ons-js-video')];
 
-  if (videos.length) {
-    const Video = (await import('./video')).default;
+    if (videos.length) {
+        const Video = (await import('./video')).default;
 
-    videos.forEach((component) => new Video(component));
-  }
+        videos.forEach((component) => new Video(component));
+    }
 }
 
 domready(video);

package/components/video/video.js

@@ -1,40 +1,40 @@
 export default class Video {
-  constructor(component) {
-    this.component = component;
-    this.placeholder = component.querySelector('.ons-js-video-placeholder');
-    this.iframe = component.querySelector('.ons-js-video-iframe');
+    constructor(component) {
+        this.component = component;
+        this.placeholder = component.querySelector('.ons-js-video-placeholder');
+        this.iframe = component.querySelector('.ons-js-video-iframe');
 
-    this.acceptCookiesButton = document.querySelector('.ons-js-accept-cookies');
-    if (this.acceptCookiesButton) {
-      this.acceptCookiesButton.addEventListener('click', this.showIframe.bind(this));
-    }
+        this.acceptCookiesButton = document.querySelector('.ons-js-accept-cookies');
+        if (this.acceptCookiesButton) {
+            this.acceptCookiesButton.addEventListener('click', this.showIframe.bind(this));
+        }
 
-    const allowsVideoEmbed = this.checkCookie();
-    if (allowsVideoEmbed) {
-      this.showIframe();
+        const allowsVideoEmbed = this.checkCookie();
+        if (allowsVideoEmbed) {
+            this.showIframe();
+        }
     }
-  }
 
-  checkCookie() {
-    const campaignsCookieRegex = /^(.*)?\s*'campaigns':true\s*[^;]+(.*)?$/;
-    const cookieMatch = document.cookie.match(campaignsCookieRegex);
-    return !!cookieMatch;
-  }
+    checkCookie() {
+        const campaignsCookieRegex = /^(.*)?\s*'campaigns':true\s*[^;]+(.*)?$/;
+        const cookieMatch = document.cookie.match(campaignsCookieRegex);
+        return !!cookieMatch;
+    }
 
-  showIframe() {
-    const src = this.addDNTtoVimeoVideos();
-    this.iframe.src = src;
-    this.iframe.classList.remove('ons-u-d-no');
-    this.component.classList.add('ons-video--hasIframe');
-    this.placeholder.classList.add('ons-u-d-no');
-  }
-  addDNTtoVimeoVideos() {
-    let src = this.iframe.getAttribute('data-src');
-    if (src.includes('player.vimeo.com/video') && src.includes('?dnt=1') === false) {
-      src += '?dnt=1';
-      return src;
-    } else {
-      return src;
+    showIframe() {
+        const src = this.addDNTtoVimeoVideos();
+        this.iframe.src = src;
+        this.iframe.classList.remove('ons-u-d-no');
+        this.component.classList.add('ons-video--hasIframe');
+        this.placeholder.classList.add('ons-u-d-no');
+    }
+    addDNTtoVimeoVideos() {
+        let src = this.iframe.getAttribute('data-src');
+        if (src.includes('player.vimeo.com/video') && src.includes('?dnt=1') === false) {
+            src += '?dnt=1';
+            return src;
+        } else {
+            return src;
+        }
     }
-  }
 }

package/components/video/video.spec.js

@@ -1,119 +1,125 @@
 import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
 
 const EXAMPLE_VIDEO_YOUTUBE = {
-  videoEmbedUrl: 'https://www.youtube.com/embed/_EGJlvkgbPo',
-  title: 'Census 2021 promotional TV advert',
-  linkText: 'Example link text',
+    videoEmbedUrl: 'https://www.youtube.com/embed/_EGJlvkgbPo',
+    title: 'Census 2021 promotional TV advert',
+    linkText: 'Example link text',
 };
 const EXAMPLE_VIDEO_VIMEO = {
-  videoEmbedUrl: 'https://player.vimeo.com/video/838454524?h=24551a3754',
-  title: 'Vimeo Video',
-  linkText: 'Example link text',
+    videoEmbedUrl: 'https://player.vimeo.com/video/838454524?h=24551a3754',
+    title: 'Vimeo Video',
+    linkText: 'Example link text',
 };
 
 const EXAMPLE_APPROVED_COOKIE = JSON.stringify({ campaigns: true }).replace(/"/g, "'");
 
 describe('script: video', () => {
-  beforeEach(async () => {
-    const client = await page.target().createCDPSession();
-    await client.send('Network.clearBrowserCookies');
-  });
-
-  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'));
-    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'));
-    expect(displayStyle).toBe('none');
-  });
-
-  describe('when cookies are accepted on page load', () => {
     beforeEach(async () => {
-      await page.setCookie({
-        name: 'ons_cookie_policy',
-        value: EXAMPLE_APPROVED_COOKIE,
-      });
-
-      await setTestPage('/test', renderComponent('video', EXAMPLE_VIDEO_YOUTUBE));
+        const client = await page.target().createCDPSession();
+        await client.send('Network.clearBrowserCookies');
     });
 
-    it('should hide the placeholder content', async () => {
-      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'));
-      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'));
-      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'));
-      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'));
-      expect(src.includes('?dnt=1')).toBe(true);
-    }, 10000);
-  });
-
-  describe('when cookies are accepted via banner', () => {
-    beforeEach(async () => {
-      await setTestPage(
-        '/test',
-        `${renderComponent('video', EXAMPLE_VIDEO_YOUTUBE)}
-        <div class="ons-cookies-banner ons-u-db"><button class="ons-js-accept-cookies">Accept</button></div>`,
-      );
-      await page.click('.ons-js-accept-cookies');
+    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'),
+        );
+        expect(displayStyle).toBe('block');
     });
 
-    it('should hide the placeholder content', async () => {
-      const displayStyle = await page.$eval('.ons-js-video-placeholder', (node) =>
-        window.getComputedStyle(node).getPropertyValue('display'),
-      );
-      expect(displayStyle).toBe('none');
+    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'));
+        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'));
-      expect(displayStyle).toBe('block');
+    describe('when cookies are accepted on page load', () => {
+        beforeEach(async () => {
+            await page.setCookie({
+                name: 'ons_cookie_policy',
+                value: EXAMPLE_APPROVED_COOKIE,
+            });
+
+            await setTestPage('/test', renderComponent('video', EXAMPLE_VIDEO_YOUTUBE));
+        });
+
+        it('should hide the placeholder content', async () => {
+            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'),
+            );
+            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'));
+            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'));
+            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'));
+            expect(src.includes('?dnt=1')).toBe(true);
+        }, 10000);
     });
 
-    it('should add the correct modifier class', async () => {
-      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'));
-      expect(src.includes('?dnt=1')).toBe(false);
-    }, 10000);
-
-    it('should add dnt to Vimeo videos', async () => {
-      await setTestPage(
-        '/test',
-        `${renderComponent('video', EXAMPLE_VIDEO_VIMEO)}
+    describe('when cookies are accepted via banner', () => {
+        beforeEach(async () => {
+            await setTestPage(
+                '/test',
+                `${renderComponent('video', EXAMPLE_VIDEO_YOUTUBE)}
+        <div class="ons-cookies-banner ons-u-db"><button class="ons-js-accept-cookies">Accept</button></div>`,
+            );
+            await page.click('.ons-js-accept-cookies');
+        });
+
+        it('should hide the placeholder content', async () => {
+            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'),
+            );
+            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'));
+            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'));
+            expect(src.includes('?dnt=1')).toBe(false);
+        }, 10000);
+
+        it('should add dnt to Vimeo videos', async () => {
+            await setTestPage(
+                '/test',
+                `${renderComponent('video', EXAMPLE_VIDEO_VIMEO)}
         <div class="ons-cookies-banner ons-u-db"><button class="ons-js-accept-cookies">Accept</button></div>`,
-      );
-      await page.click('.ons-js-accept-cookies');
+            );
+            await page.click('.ons-js-accept-cookies');
 
-      const src = await page.$eval('.ons-js-video-iframe', (node) => node.getAttribute('src'));
-      expect(src.includes('?dnt=1')).toBe(true);
-    }, 10000);
-  });
+            const src = await page.$eval('.ons-js-video-iframe', (node) => node.getAttribute('src'));
+            expect(src.includes('?dnt=1')).toBe(true);
+        }, 10000);
+    });
 });