@ons/design-system 70.0.7 → 70.0.9

package/components/upload/_upload.scss

@@ -1,35 +1,35 @@
 .ons-input--upload {
-  background: var(--ons-color-white);
-  border: 1px solid var(--ons-color-input-border);
-  border-radius: $input-radius;
-  font-size: 1rem;
-  padding: 0;
-  width: 100%;
-  &::-webkit-file-upload-button {
-    background: var(--ons-color-button-secondary);
-    border: 0;
-    border-bottom-right-radius: 0;
-    border-right: 1px solid var(--ons-color-input-border);
-    border-top-right-radius: 0;
-    color: var(--ons-color-text);
+    background: var(--ons-color-white);
+    border: 1px solid var(--ons-color-input-border);
+    border-radius: $input-radius;
     font-size: 1rem;
-    outline: none;
-    padding: 0.5rem 1rem;
-    transition: border-color 200ms ease-in;
-  }
-  &:hover {
-    cursor: pointer;
+    padding: 0;
+    width: 100%;
     &::-webkit-file-upload-button {
-      border-right-color: var(--ons-color-text-link-hover);
-      cursor: pointer;
+        background: var(--ons-color-button-secondary);
+        border: 0;
+        border-bottom-right-radius: 0;
+        border-right: 1px solid var(--ons-color-input-border);
+        border-top-right-radius: 0;
+        color: var(--ons-color-text);
+        font-size: 1rem;
+        outline: none;
+        padding: 0.5rem 1rem;
+        transition: border-color 200ms ease-in;
+    }
+    &:hover {
+        cursor: pointer;
+        &::-webkit-file-upload-button {
+            border-right-color: var(--ons-color-text-link-hover);
+            cursor: pointer;
+        }
     }
-  }
 
-  @include mq(m) {
-    width: 80%;
-  }
+    @include mq(m) {
+        width: 80%;
+    }
 
-  @include mq(l) {
-    width: 70%;
-  }
+    @include mq(l) {
+        width: 70%;
+    }
 }

package/components/video/_macro.njk

@@ -3,7 +3,13 @@
 
     {% 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">
+            <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 %}
@@ -16,6 +22,14 @@
                 "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>
+        <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

@@ -6,64 +6,64 @@ import axe from '../../tests/helpers/axe';
 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',
-  linkText: 'Example link text',
-  image: {
-    smallSrc: 'example-small.png',
-    largeSrc: 'example-large.png',
-    alt: 'Example alt text',
-  },
+    videoEmbedUrl: 'https://www.youtube.com/embed/_EGJlvkgbPo',
+    videoLinkURL: 'https://www.youtube.com/watch?v=_EGJlvkgbPo',
+    title: 'Census 2021 promotional TV advert',
+    linkText: 'Example link text',
+    image: {
+        smallSrc: 'example-small.png',
+        largeSrc: 'example-large.png',
+        alt: 'Example alt text',
+    },
 };
 
 describe('macro: video', () => {
-  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();
-  });
+        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));
+    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');
-  });
+        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));
+    it('outputs an `img` element with the expected `src`', () => {
+        const $ = cheerio.load(renderComponent('video', EXAMPLE_VIDEO_YOUTUBE));
 
-    expect($('.ons-video__img').attr('src')).toBe('example-small.png');
-  });
+        expect($('.ons-video__img').attr('src')).toBe('example-small.png');
+    });
 
-  it('outputs an `img` element with the expected alt text', () => {
-    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($('.ons-video__img').attr('alt')).toBe('Example alt text');
-  });
+        expect($('.ons-video__img').attr('alt')).toBe('Example alt text');
+    });
 
-  it('outputs the provided link text', () => {
-    const $ = cheerio.load(renderComponent('video', EXAMPLE_VIDEO_YOUTUBE));
+    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`', () => {
-    const $ = cheerio.load(renderComponent('video', EXAMPLE_VIDEO_YOUTUBE));
+    it('outputs a hyperlink with the provided `url`', () => {
+        const $ = cheerio.load(renderComponent('video', EXAMPLE_VIDEO_YOUTUBE));
 
-    expect($('.ons-video__link').attr('href')).toBe('https://www.youtube.com/watch?v=_EGJlvkgbPo');
-  });
+        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_YOUTUBE));
+    it('outputs an <iframe> element with the provided `title`', () => {
+        const $ = cheerio.load(renderComponent('video', EXAMPLE_VIDEO_YOUTUBE));
 
-    expect($('iframe').attr('title')).toBe('Census 2021 promotional TV advert');
-  });
+        expect($('iframe').attr('title')).toBe('Census 2021 promotional TV advert');
+    });
 
-  it('outputs an <iframe> element with the provided `videoEmbedUrl` data attribute', () => {
-    const $ = cheerio.load(renderComponent('video', EXAMPLE_VIDEO_YOUTUBE));
+    it('outputs an <iframe> element with the provided `videoEmbedUrl` data attribute', () => {
+        const $ = cheerio.load(renderComponent('video', EXAMPLE_VIDEO_YOUTUBE));
 
-    expect($('iframe').attr('data-src')).toBe('https://www.youtube.com/embed/_EGJlvkgbPo');
-  });
+        expect($('iframe').attr('data-src')).toBe('https://www.youtube.com/embed/_EGJlvkgbPo');
+    });
 });

package/components/video/_video.scss

@@ -1,21 +1,21 @@
 .ons-video {
-  @extend .ons-u-mb-m;
+    @extend .ons-u-mb-m;
 
-  &--hasIframe {
-    height: 0;
-    padding-bottom: 56.25%; /* 16:9 */
-    position: relative;
-  }
+    &--hasIframe {
+        height: 0;
+        padding-bottom: 56.25%; /* 16:9 */
+        position: relative;
+    }
 
-  &__iframe {
-    height: 100%;
-    left: 0;
-    position: absolute;
-    top: 0;
-    width: 100%;
-  }
+    &__iframe {
+        height: 100%;
+        left: 0;
+        position: absolute;
+        top: 0;
+        width: 100%;
+    }
 
-  &__img {
-    width: 100%;
-  }
+    &__img {
+        width: 100%;
+    }
 }

package/components/video/example-video.njk

@@ -4,8 +4,8 @@
         "videoEmbedUrl": 'https://www.youtube.com/embed/OwYVwPPxPj4',
         "videoLinkURL": 'https://www.youtube.com/watch?v=OwYVwPPxPj4',
         "image": {
-            "largeSrc": '/patternlib-img/youtube-example-cover.png',
-            "smallSrc": '/patternlib-img/youtube-example-cover.png',
+            "largeSrc": '/ds-img/youtube-example-cover.png',
+            "smallSrc": '/ds-img/youtube-example-cover.png',
             "alt": "Youtube video"
         },
         "title": 'Transforming the way we produce statistics | Explaining the Dynamic Population Model | BSL',

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