@ons/design-system 60.0.3 → 61.0.0

package/components/video/video.js

@@ -0,0 +1,30 @@
+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');
+
+    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();
+    }
+  }
+
+  checkCookie() {
+    const campaignsCookieRegex = /^(.*)?\s*'campaigns':true\s*[^;]+(.*)?$/;
+    const cookieMatch = document.cookie.match(campaignsCookieRegex);
+    return !!cookieMatch;
+  }
+
+  showIframe() {
+    const src = this.iframe.getAttribute('data-src');
+    this.iframe.src = src;
+    this.iframe.classList.remove('ons-u-d-no');
+    this.placeholder.classList.add('ons-u-d-no');
+  }
+}

package/components/video/video.spec.js

@@ -0,0 +1,72 @@
+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',
+};
+
+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));
+    });
+
+    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);
+  });
+
+  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');
+    });
+  });
+});