@ons/design-system 70.0.6 → 70.0.8

package/components/timeout-panel/timeout-panel.dom.js

@@ -1,16 +1,16 @@
 import domready from '../../js/domready';
 
 async function timeoutPanels() {
-  const panels = [...document.querySelectorAll('.ons-js-panel-with-countdown')];
+    const panels = [...document.querySelectorAll('.ons-js-panel-with-countdown')];
 
-  if (panels.length) {
-    const Timeout = (await import('../../js/timeout')).default;
+    if (panels.length) {
+        const Timeout = (await import('../../js/timeout')).default;
 
-    panels.forEach((context) => {
-      let time = context.getAttribute('data-server-session-expires-at');
-      new Timeout(context, null, time, false, true);
-    });
-  }
+        panels.forEach((context) => {
+            let time = context.getAttribute('data-server-session-expires-at');
+            new Timeout(context, null, time, false, true);
+        });
+    }
 }
 
 domready(timeoutPanels);

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

@@ -1,161 +1,161 @@
 import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
 
 const EXAMPLE_TIMEOUT_PANEL_BASIC = {
-  id: 'countdown',
-  redirectUrl: '#!',
-  minutesTextSingular: 'minute',
-  minutesTextPlural: 'minutes',
-  secondsTextSingular: 'second',
-  secondsTextPlural: 'seconds',
-  countdownText: 'For security, your answers will only be available to view for another',
-  nojsText: 'For security, your answers will only be available to view for another 1 minute',
-  countdownExpiredText: 'You are being signed out',
-  endWithFullStop: true,
+    id: 'countdown',
+    redirectUrl: '#!',
+    minutesTextSingular: 'minute',
+    minutesTextPlural: 'minutes',
+    secondsTextSingular: 'second',
+    secondsTextPlural: 'seconds',
+    countdownText: 'For security, your answers will only be available to view for another',
+    nojsText: 'For security, your answers will only be available to view for another 1 minute',
+    countdownExpiredText: 'You are being signed out',
+    endWithFullStop: true,
 };
 
 describe('script: timeout panel', () => {
-  describe('when the page loads', () => {
-    beforeEach(async () => {
-      const expiryTime = new Date(Date.now() + 60 * 3000);
-      const expiryTimeInISOFormat = new Date(expiryTime).toISOString();
+    describe('when the page loads', () => {
+        beforeEach(async () => {
+            const expiryTime = new Date(Date.now() + 60 * 3000);
+            const expiryTimeInISOFormat = new Date(expiryTime).toISOString();
 
-      const component = renderComponent('timeout-panel', {
-        ...EXAMPLE_TIMEOUT_PANEL_BASIC,
-        sessionExpiresAt: expiryTimeInISOFormat,
-      });
+            const component = renderComponent('timeout-panel', {
+                ...EXAMPLE_TIMEOUT_PANEL_BASIC,
+                sessionExpiresAt: expiryTimeInISOFormat,
+            });
 
-      await setTestPage('/test', component);
-    });
+            await setTestPage('/test', component);
+        });
 
-    it('shows the time counting down', async () => {
-      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);
-      expect(timeAfterOneSecond).not.toEqual(timeAtStart);
+        it('shows the time counting down', async () => {
+            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);
+            expect(timeAfterOneSecond).not.toEqual(timeAtStart);
+        });
     });
-  });
 
-  describe('when there are two minutes or more remaining', () => {
-    beforeEach(async () => {
-      const expiryTime = new Date(Date.now() + 60 * 3000);
-      const expiryTimeInISOFormat = new Date(expiryTime).toISOString();
+    describe('when there are two minutes or more remaining', () => {
+        beforeEach(async () => {
+            const expiryTime = new Date(Date.now() + 60 * 3000);
+            const expiryTimeInISOFormat = new Date(expiryTime).toISOString();
 
-      const component = renderComponent('timeout-panel', {
-        ...EXAMPLE_TIMEOUT_PANEL_BASIC,
-        sessionExpiresAt: expiryTimeInISOFormat,
-      });
+            const component = renderComponent('timeout-panel', {
+                ...EXAMPLE_TIMEOUT_PANEL_BASIC,
+                sessionExpiresAt: expiryTimeInISOFormat,
+            });
 
-      await setTestPage('/test', component);
-    });
+            await setTestPage('/test', component);
+        });
 
-    it('displays the `minutes` (plural) string', async () => {
-      const timeString = await page.$eval('.ons-js-timeout-timer', (element) => element.innerHTML);
-      expect(timeString).toEqual(expect.stringContaining('minutes'));
+        it('displays the `minutes` (plural) string', async () => {
+            const timeString = await page.$eval('.ons-js-timeout-timer', (element) => element.innerHTML);
+            expect(timeString).toEqual(expect.stringContaining('minutes'));
+        });
     });
-  });
 
-  describe('when there are two seconds or more remaining', () => {
-    beforeEach(async () => {
-      const expiryTime = new Date(Date.now() + 60 * 1000);
-      const expiryTimeInISOFormat = new Date(expiryTime).toISOString();
+    describe('when there are two seconds or more remaining', () => {
+        beforeEach(async () => {
+            const expiryTime = new Date(Date.now() + 60 * 1000);
+            const expiryTimeInISOFormat = new Date(expiryTime).toISOString();
 
-      const component = renderComponent('timeout-panel', {
-        ...EXAMPLE_TIMEOUT_PANEL_BASIC,
-        sessionExpiresAt: expiryTimeInISOFormat,
-      });
+            const component = renderComponent('timeout-panel', {
+                ...EXAMPLE_TIMEOUT_PANEL_BASIC,
+                sessionExpiresAt: expiryTimeInISOFormat,
+            });
 
-      await setTestPage('/test', component);
-    });
+            await setTestPage('/test', component);
+        });
 
-    it('displays the `seconds` (plural) string', async () => {
-      const timeString = await page.$eval('.ons-js-timeout-timer span', (element) => element.innerHTML);
-      expect(timeString).toEqual(expect.stringContaining('seconds'));
+        it('displays the `seconds` (plural) string', async () => {
+            const timeString = await page.$eval('.ons-js-timeout-timer span', (element) => element.innerHTML);
+            expect(timeString).toEqual(expect.stringContaining('seconds'));
+        });
     });
-  });
 
-  describe('when there is one minute remaining', () => {
-    beforeEach(async () => {
-      const expiryTime = new Date(Date.now() + 60 * 1500);
-      const expiryTimeInISOFormat = new Date(expiryTime).toISOString();
+    describe('when there is one minute remaining', () => {
+        beforeEach(async () => {
+            const expiryTime = new Date(Date.now() + 60 * 1500);
+            const expiryTimeInISOFormat = new Date(expiryTime).toISOString();
 
-      const component = renderComponent('timeout-panel', {
-        ...EXAMPLE_TIMEOUT_PANEL_BASIC,
-        sessionExpiresAt: expiryTimeInISOFormat,
-      });
+            const component = renderComponent('timeout-panel', {
+                ...EXAMPLE_TIMEOUT_PANEL_BASIC,
+                sessionExpiresAt: expiryTimeInISOFormat,
+            });
 
-      await setTestPage('/test', component);
-    });
+            await setTestPage('/test', component);
+        });
 
-    it('displays the `minute` (singular) string', async () => {
-      const timeString = await page.$eval('.ons-js-timeout-timer', (element) => element.innerHTML);
-      expect(timeString).toEqual(expect.stringContaining('minute'));
+        it('displays the `minute` (singular) string', async () => {
+            const timeString = await page.$eval('.ons-js-timeout-timer', (element) => element.innerHTML);
+            expect(timeString).toEqual(expect.stringContaining('minute'));
+        });
     });
-  });
 
-  describe('when there is one second remaining', () => {
-    beforeEach(async () => {
-      const expiryTime = new Date(Date.now() + 3 * 1000);
-      const expiryTimeInISOFormat = new Date(expiryTime).toISOString();
+    describe('when there is one second remaining', () => {
+        beforeEach(async () => {
+            const expiryTime = new Date(Date.now() + 3 * 1000);
+            const expiryTimeInISOFormat = new Date(expiryTime).toISOString();
 
-      const component = renderComponent('timeout-panel', {
-        ...EXAMPLE_TIMEOUT_PANEL_BASIC,
-        sessionExpiresAt: expiryTimeInISOFormat,
-      });
+            const component = renderComponent('timeout-panel', {
+                ...EXAMPLE_TIMEOUT_PANEL_BASIC,
+                sessionExpiresAt: expiryTimeInISOFormat,
+            });
 
-      await setTestPage('/test', component);
-    });
+            await setTestPage('/test', component);
+        });
 
-    it('displays the `second` (singular) string', async () => {
-      const timeString = await page.$eval('.ons-js-timeout-timer span', (element) => element.innerHTML);
-      expect(timeString).toEqual(expect.stringContaining('second'));
+        it('displays the `second` (singular) string', async () => {
+            const timeString = await page.$eval('.ons-js-timeout-timer span', (element) => element.innerHTML);
+            expect(timeString).toEqual(expect.stringContaining('second'));
+        });
     });
-  });
 
-  describe('when the timer runs to zero', () => {
-    beforeEach(async () => {
-      const expiryTime = new Date(Date.now() + 1 * 1000);
-      const expiryTimeInISOFormat = new Date(expiryTime).toISOString();
+    describe('when the timer runs to zero', () => {
+        beforeEach(async () => {
+            const expiryTime = new Date(Date.now() + 1 * 1000);
+            const expiryTimeInISOFormat = new Date(expiryTime).toISOString();
 
-      const component = renderComponent('timeout-panel', {
-        ...EXAMPLE_TIMEOUT_PANEL_BASIC,
-        sessionExpiresAt: expiryTimeInISOFormat,
-      });
+            const component = renderComponent('timeout-panel', {
+                ...EXAMPLE_TIMEOUT_PANEL_BASIC,
+                sessionExpiresAt: expiryTimeInISOFormat,
+            });
 
-      await setTestPage('/test', component);
-    });
+            await setTestPage('/test', component);
+        });
 
-    it('displays the `countdownExpiredText` text', async () => {
-      const timeString = await page.$eval('.ons-js-timeout-timer', (element) => element.innerHTML);
-      expect(timeString).toEqual(expect.stringContaining('You are being signed out'));
-    });
+        it('displays the `countdownExpiredText` text', async () => {
+            const timeString = await page.$eval('.ons-js-timeout-timer', (element) => element.innerHTML);
+            expect(timeString).toEqual(expect.stringContaining('You are being signed out'));
+        });
 
-    it('then redirects to the provided `redirectUrl`', async () => {
-      await page.waitForTimeout(2000);
-      expect(page.url()).toContain('#!');
+        it('then redirects to the provided `redirectUrl`', async () => {
+            await page.waitForTimeout(2000);
+            expect(page.url()).toContain('#!');
+        });
     });
-  });
 
-  describe('when Javascript is disabled', () => {
-    beforeEach(async () => {
-      const expiryTime = new Date(Date.now() + 1 * 1000);
-      const expiryTimeInISOFormat = new Date(expiryTime).toISOString();
+    describe('when Javascript is disabled', () => {
+        beforeEach(async () => {
+            const expiryTime = new Date(Date.now() + 1 * 1000);
+            const expiryTimeInISOFormat = new Date(expiryTime).toISOString();
 
-      const component = renderComponent('timeout-panel', {
-        ...EXAMPLE_TIMEOUT_PANEL_BASIC,
-        sessionExpiresAt: expiryTimeInISOFormat,
-      });
+            const component = renderComponent('timeout-panel', {
+                ...EXAMPLE_TIMEOUT_PANEL_BASIC,
+                sessionExpiresAt: expiryTimeInISOFormat,
+            });
 
-      await page.setJavaScriptEnabled(false);
-      await setTestPage('/test', component);
-    });
+            await page.setJavaScriptEnabled(false);
+            await setTestPage('/test', component);
+        });
 
-    afterEach(async () => {
-      await page.setJavaScriptEnabled(true);
-    });
+        afterEach(async () => {
+            await page.setJavaScriptEnabled(true);
+        });
 
-    it('displays the `nojsText` text', async () => {
-      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');
+        it('displays the `nojsText` text', async () => {
+            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/upload/_macro.spec.js

@@ -6,70 +6,70 @@ import axe from '../../tests/helpers/axe';
 import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
 
 const EXAMPLE_UPLOAD = {
-  id: 'example-upload',
-  accept: '.xls,.xlsx,.pdf',
-  name: 'example-upload-name',
-  label: {
-    description: 'File types accepted are XLS and XLSX or PDF',
-    text: 'Upload a file',
-  },
-  dontWrap: true,
-  fieldId: 'example-upload-field',
-  fieldClasses: 'extra-field-class',
-  attributes: { a: 42 },
-  listeners: { test: 'console.log(42)' },
+    id: 'example-upload',
+    accept: '.xls,.xlsx,.pdf',
+    name: 'example-upload-name',
+    label: {
+        description: 'File types accepted are XLS and XLSX or PDF',
+        text: 'Upload a file',
+    },
+    dontWrap: true,
+    fieldId: 'example-upload-field',
+    fieldClasses: 'extra-field-class',
+    attributes: { a: 42 },
+    listeners: { test: 'console.log(42)' },
 };
 
 const EXAMPLE_UPLOAD_WITH_ERROR = {
-  ...EXAMPLE_UPLOAD,
-  error: {
-    id: 'file-error',
-    text: 'Select a file that is an XLS, XLSX or PDF',
-  },
+    ...EXAMPLE_UPLOAD,
+    error: {
+        id: 'file-error',
+        text: 'Select a file that is an XLS, XLSX or PDF',
+    },
 };
 
 describe('macro: upload', () => {
-  describe.each([
-    ['without error', EXAMPLE_UPLOAD, 'ons-input--upload'],
-    ['with error', EXAMPLE_UPLOAD_WITH_ERROR, 'ons-input--upload ons-input--error'],
-  ])('%s', (_, params, expectedInputClasses) => {
-    it('passes jest-axe checks', async () => {
-      const $ = cheerio.load(renderComponent('upload', params));
+    describe.each([
+        ['without error', EXAMPLE_UPLOAD, 'ons-input--upload'],
+        ['with error', EXAMPLE_UPLOAD_WITH_ERROR, 'ons-input--upload ons-input--error'],
+    ])('%s', (_, params, expectedInputClasses) => {
+        it('passes jest-axe checks', async () => {
+            const $ = cheerio.load(renderComponent('upload', params));
 
-      const results = await axe($.html());
-      expect(results).toHaveNoViolations();
-    });
+            const results = await axe($.html());
+            expect(results).toHaveNoViolations();
+        });
 
-    it('renders `field` component with the expected parameters', () => {
-      const faker = templateFaker();
-      const fieldSpy = faker.spy('field');
+        it('renders `field` component with the expected parameters', () => {
+            const faker = templateFaker();
+            const fieldSpy = faker.spy('field');
 
-      faker.renderComponent('upload', params);
+            faker.renderComponent('upload', params);
 
-      expect(fieldSpy.occurrences).toContainEqual({
-        id: 'example-upload-field',
-        classes: 'extra-field-class',
-        dontWrap: true,
-        error: params.error,
-      });
-    });
+            expect(fieldSpy.occurrences).toContainEqual({
+                id: 'example-upload-field',
+                classes: 'extra-field-class',
+                dontWrap: true,
+                error: params.error,
+            });
+        });
 
-    it('renders `input` component with the expected parameters', () => {
-      const faker = templateFaker();
-      const inputSpy = faker.spy('input');
+        it('renders `input` component with the expected parameters', () => {
+            const faker = templateFaker();
+            const inputSpy = faker.spy('input');
 
-      faker.renderComponent('upload', params);
+            faker.renderComponent('upload', params);
 
-      expect(inputSpy.occurrences).toContainEqual({
-        id: 'example-upload',
-        type: 'file',
-        label: params.label,
-        classes: expectedInputClasses,
-        accept: '.xls,.xlsx,.pdf',
-        name: 'example-upload-name',
-        attributes: { a: 42 },
-        listeners: params.listeners,
-      });
+            expect(inputSpy.occurrences).toContainEqual({
+                id: 'example-upload',
+                type: 'file',
+                label: params.label,
+                classes: expectedInputClasses,
+                accept: '.xls,.xlsx,.pdf',
+                name: 'example-upload-name',
+                attributes: { a: 42 },
+                listeners: params.listeners,
+            });
+        });
     });
-  });
 });

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.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%;
+    }
 }