@ons/design-system 70.0.7 → 70.0.9

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

@@ -6,49 +6,49 @@ import axe from '../../tests/helpers/axe';
 import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
 
 const EXAMPLE_TIMEOUT_PANEL_BASIC = {
-  id: 'countdown',
-  sessionExpiresAt: '000-000-000',
-  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',
+    sessionExpiresAt: '000-000-000',
+    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('macro: timeout panel', () => {
-  it('passes jest-axe checks with', async () => {
-    const $ = cheerio.load(renderComponent('timeout-panel', EXAMPLE_TIMEOUT_PANEL_BASIC));
-
-    const results = await axe($.html());
-    expect(results).toHaveNoViolations();
-  });
-
-  it('provides expected parameters to the inner `panel` component', () => {
-    const faker = templateFaker();
-    const panelSpy = faker.spy('panel');
-
-    cheerio.load(faker.renderComponent('timeout-panel', EXAMPLE_TIMEOUT_PANEL_BASIC));
-
-    expect(panelSpy.occurrences[0]).toEqual({
-      id: 'countdown',
-      classes: 'ons-js-panel-with-countdown',
-      variant: 'warn',
-      attributes: {
-        'data-redirect-url': '#!',
-        'data-server-session-expires-at': '000-000-000',
-        'data-countdown-text': 'For security, your answers will only be available to view for another',
-        'data-countdown-expired-text': 'You are being signed out',
-        'data-minutes-text-singular': 'minute',
-        'data-minutes-text-plural': 'minutes',
-        'data-seconds-text-singular': 'second',
-        'data-seconds-text-plural': 'seconds',
-        'aria-describedby': 'timeout-time-remaining',
-        'data-full-stop': true,
-      },
+    it('passes jest-axe checks with', async () => {
+        const $ = cheerio.load(renderComponent('timeout-panel', EXAMPLE_TIMEOUT_PANEL_BASIC));
+
+        const results = await axe($.html());
+        expect(results).toHaveNoViolations();
+    });
+
+    it('provides expected parameters to the inner `panel` component', () => {
+        const faker = templateFaker();
+        const panelSpy = faker.spy('panel');
+
+        cheerio.load(faker.renderComponent('timeout-panel', EXAMPLE_TIMEOUT_PANEL_BASIC));
+
+        expect(panelSpy.occurrences[0]).toEqual({
+            id: 'countdown',
+            classes: 'ons-js-panel-with-countdown',
+            variant: 'warn',
+            attributes: {
+                'data-redirect-url': '#!',
+                'data-server-session-expires-at': '000-000-000',
+                'data-countdown-text': 'For security, your answers will only be available to view for another',
+                'data-countdown-expired-text': 'You are being signed out',
+                'data-minutes-text-singular': 'minute',
+                'data-minutes-text-plural': 'minutes',
+                'data-seconds-text-singular': 'second',
+                'data-seconds-text-plural': 'seconds',
+                'aria-describedby': 'timeout-time-remaining',
+                'data-full-stop': true,
+            },
+        });
     });
-  });
 });

package/components/timeout-panel/example-panel-with-timeout-warning.njk

@@ -1,13 +1,15 @@
 {% from "components/timeout-panel/_macro.njk" import onsTimeoutPanel %}
 
-{{ onsTimeoutPanel ({
-    "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"
-}) }}
+{{
+    onsTimeoutPanel ({
+        "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"
+    })
+}}

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.njk

@@ -3,24 +3,28 @@
     {% from "components/field/_macro.njk" import onsField %}
 
     {% set field %}
-        {{ onsInput({
-            "id": params.id,
-            "type": "file",
-            "label": params.label,
-            "classes": "ons-input--upload" + (" ons-input--error" if params.error else ""),
-            "accept": params.accept,
-            "name": params.name,
-            "attributes": params.attributes,
-            "listeners": params.listeners
-        }) }}
+        {{
+            onsInput({
+                "id": params.id,
+                "type": "file",
+                "label": params.label,
+                "classes": "ons-input--upload" + (" ons-input--error" if params.error else ""),
+                "accept": params.accept,
+                "name": params.name,
+                "attributes": params.attributes,
+                "listeners": params.listeners
+            })
+        }}
     {% endset %}
 
-    {% call onsField({
-        "id": params.fieldId,
-        "classes": params.fieldClasses,
-        "dontWrap": params.dontWrap,
-        "error": params.error
-    }) %}
+    {%
+        call onsField({
+            "id": params.fieldId,
+            "classes": params.fieldClasses,
+            "dontWrap": params.dontWrap,
+            "error": params.error
+        })
+    %}
         {{ field | safe }}
     {% endcall %}
 {% endmacro %}

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