@ons/design-system 60.0.3 → 61.0.1

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

@@ -167,6 +167,7 @@ describe('script: timeout modal', () => {
           ...EXAMPLE_TIMEOUT_MODAL_BASIC,
           showModalTimeInSeconds: 1,
           sessionExpiresAt: expiryTimeInISOFormat,
+          enableGA: true,
         });
 
         const template = `
@@ -186,6 +187,15 @@ describe('script: timeout modal', () => {
         await page.waitForTimeout(2000);
         expect(page.url()).toContain('#!');
       });
+
+      it('and GA tracking is enabled it has the correct attributes set on the modal', async () => {
+        const gaLabel = await page.$eval('.ons-modal', node => node.getAttribute('data-ga-label'));
+        const gaAction = await page.$eval('.ons-modal', node => node.getAttribute('data-ga-action'));
+        const gaCategory = await page.$eval('.ons-modal', node => node.getAttribute('data-ga-category'));
+        expect(gaLabel).toBe('Timeout modal closed');
+        expect(gaAction).toBe('Modal closed by timed event');
+        expect(gaCategory).toBe('Timeout modal');
+      });
     });
   });
 
@@ -233,23 +243,17 @@ describe('script: timeout modal', () => {
       });
 
       const template = `
-          <div class="ons-page">
-            ${component}
-          </div>
-        `;
+        <div class="ons-page">
+          ${component}
+        </div>
+      `;
 
       await setTestPage('/test', template);
     });
 
-    describe('when the page has been loaded but the modal has not been opened yet', () => {
-      it('has the correct attributes set on the modal', async () => {
-        const gaLabel = await page.$eval('.ons-modal', node => node.getAttribute('data-ga-label'));
-        const gaAction = await page.$eval('.ons-modal', node => node.getAttribute('data-ga-action'));
-        const gaCategory = await page.$eval('.ons-modal', node => node.getAttribute('data-ga-category'));
-        expect(gaLabel).toBe('Timeout modal initialised');
-        expect(gaAction).toBe('Modal initialised');
-        expect(gaCategory).toBe('Timeout modal');
-      });
+    it('has ga initialise attribute set', async () => {
+      const gaInitialise = await page.$eval('.ons-modal', node => node.getAttribute('data-ga'));
+      expect(gaInitialise).toBe('visible');
     });
 
     describe('when the modal is open', () => {

package/components/video/_macro.njk

@@ -1,7 +1,21 @@
+{% from "components/external-link/_macro.njk" import onsExternalLink %}
 {%- macro onsVideo(params) -%}
-    <div class="ons-video">
-        {% if params.videoEmbedUrl %}
-            <iframe title="{{ params.title }}" class="ons-video__iframe" src="{{ params.videoEmbedUrl }}" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-        {% endif %}
+
+    {% set linkContents %}
+      {% if params.image.smallSrc %}
+        <img class="ons-video__img ons-u-mb-xs" {% if params.image.largeSrc %} srcset="{{ params.image.smallSrc }} 1x, {{ params.image.largeSrc }} 2x"{% endif %} src="{{ params.image.smallSrc }}" alt="{{ params.image.alt }}" loading="lazy">
+      {% endif %}            
+      <span class="ons-video__link-text ons-u-mt-xs">{{ params.linkText }}</span>
+    {% endset %}
+
+    <div class="ons-video ons-js-video">
+      {{
+          onsExternalLink({
+              "url": params.videoLinkURL,
+              "classes": "ons-video__link ons-js-video-placeholder ons-u-db",
+              "linkText": linkContents
+          })
+      }}
+        <iframe data-src="{{ params.videoEmbedUrl }}" title="{{ params.title }}" class="ons-video__iframe ons-js-video-iframe ons-u-d-no" src="about:blank" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
     </div>
 {%- endmacro -%}

package/components/video/_macro.spec.js

@@ -7,54 +7,67 @@ import { renderComponent } from '../../tests/helpers/rendering';
 
 const EXAMPLE_VIDEO_YOUTUBE = {
   videoEmbedUrl: 'https://www.youtube.com/embed/_EGJlvkgbPo',
+  videoLinkURL: 'https://www.youtube.com/watch?v=_EGJlvkgbPo',
   title: 'Census 2021 promotional TV advert',
-};
-
-const EXAMPLE_VIDEO_VIMEO = {
-  videoEmbedUrl: 'https://player.vimeo.com/video/508878572',
-  title: 'A message from National Statistician Ian Diamond for National Apprenticeship Week 2021',
+  linkText: 'Example link text',
+  image: {
+    smallSrc: 'example-small.png',
+    largeSrc: 'example-large.png',
+    alt: 'Example alt text',
+  },
 };
 
 describe('macro: video', () => {
-  describe('mode: YouTube', () => {
-    it('passes jest-axe checks', async () => {
-      const $ = cheerio.load(renderComponent('video', EXAMPLE_VIDEO_YOUTUBE));
+  it('passes jest-axe checks', async () => {
+    const $ = cheerio.load(renderComponent('video', EXAMPLE_VIDEO_YOUTUBE));
+
+    const results = await axe($.html());
+    expect(results).toHaveNoViolations();
+  });
+
+  it('outputs an `img` element with the expected `srcset`', () => {
+    const $ = cheerio.load(renderComponent('video', EXAMPLE_VIDEO_YOUTUBE));
+
+    expect($('.ons-video__img').attr('srcset')).toBe('example-small.png 1x, example-large.png 2x');
+  });
+
+  it('outputs an `img` element with the expected `src`', () => {
+    const $ = cheerio.load(renderComponent('video', EXAMPLE_VIDEO_YOUTUBE));
 
-      const results = await axe($.html());
-      expect(results).toHaveNoViolations();
-    });
+    expect($('.ons-video__img').attr('src')).toBe('example-small.png');
+  });
 
-    it('outputs an <iframe> element with the provided `title`', () => {
-      const $ = cheerio.load(renderComponent('video', EXAMPLE_VIDEO_YOUTUBE));
+  it('outputs an `img` element with the expected alt text', () => {
+    const $ = cheerio.load(renderComponent('video', EXAMPLE_VIDEO_YOUTUBE));
 
-      expect($('iframe').attr('title')).toBe('Census 2021 promotional TV advert');
-    });
+    expect($('.ons-video__img').attr('alt')).toBe('Example alt text');
+  });
 
-    it('outputs an <iframe> element with the provided `videoEmbedUrl`', () => {
-      const $ = cheerio.load(renderComponent('video', EXAMPLE_VIDEO_YOUTUBE));
+  it('outputs the provided link text', () => {
+    const $ = cheerio.load(renderComponent('video', EXAMPLE_VIDEO_YOUTUBE));
 
-      expect($('iframe').attr('src')).toBe('https://www.youtube.com/embed/_EGJlvkgbPo');
-    });
+    expect(
+      $('.ons-video__link-text')
+        .text()
+        .trim(),
+    ).toBe('Example link text');
   });
 
-  describe('mode: Vimeo', () => {
-    it('passes jest-axe checks', async () => {
-      const $ = cheerio.load(renderComponent('video', EXAMPLE_VIDEO_VIMEO));
+  it('outputs a hyperlink with the provided `url`', () => {
+    const $ = cheerio.load(renderComponent('video', EXAMPLE_VIDEO_YOUTUBE));
 
-      const results = await axe($.html());
-      expect(results).toHaveNoViolations();
-    });
+    expect($('.ons-video__link').attr('href')).toBe('https://www.youtube.com/watch?v=_EGJlvkgbPo');
+  });
 
-    it('outputs an <iframe> element with the provided `title`', () => {
-      const $ = cheerio.load(renderComponent('video', EXAMPLE_VIDEO_VIMEO));
+  it('outputs an <iframe> element with the provided `title`', () => {
+    const $ = cheerio.load(renderComponent('video', EXAMPLE_VIDEO_YOUTUBE));
 
-      expect($('iframe').attr('title')).toBe('A message from National Statistician Ian Diamond for National Apprenticeship Week 2021');
-    });
+    expect($('iframe').attr('title')).toBe('Census 2021 promotional TV advert');
+  });
 
-    it('outputs an <iframe> element with the provided `videoEmbedUrl`', () => {
-      const $ = cheerio.load(renderComponent('video', EXAMPLE_VIDEO_VIMEO));
+  it('outputs an <iframe> element with the provided `videoEmbedUrl` data attribute', () => {
+    const $ = cheerio.load(renderComponent('video', EXAMPLE_VIDEO_YOUTUBE));
 
-      expect($('iframe').attr('src')).toBe('https://player.vimeo.com/video/508878572');
-    });
+    expect($('iframe').attr('data-src')).toBe('https://www.youtube.com/embed/_EGJlvkgbPo');
   });
 });

package/components/video/_video.scss

@@ -12,4 +12,8 @@
     top: 0;
     width: 100%;
   }
+
+  &__img {
+    width: 100%;
+  }
 }

package/components/video/video.dom.js

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

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