@ons/design-system 70.0.7 → 70.0.9

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

@@ -1,17 +1,17 @@
 import domready from '../../js/domready';
 
 async function modals() {
-  const timeouts = [...document.querySelectorAll('.ons-js-timeout-modal')];
+    const timeouts = [...document.querySelectorAll('.ons-js-timeout-modal')];
 
-  if (timeouts.length) {
-    const TimeoutModal = (await import('./timeout-modal')).default;
+    if (timeouts.length) {
+        const TimeoutModal = (await import('./timeout-modal')).default;
 
-    timeouts.forEach((context) => {
-      let url = context.getAttribute('data-server-session-expiry-endpoint');
-      let time = context.getAttribute('data-server-session-expires-at');
-      new TimeoutModal(context, url, time);
-    });
-  }
+        timeouts.forEach((context) => {
+            let url = context.getAttribute('data-server-session-expiry-endpoint');
+            let time = context.getAttribute('data-server-session-expires-at');
+            new TimeoutModal(context, url, time);
+        });
+    }
 }
 
 domready(modals);

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

@@ -2,86 +2,86 @@ import Modal from '../modal/modal';
 import Timeout from '../../js/timeout';
 
 export default class TimeoutModal {
-  constructor(context, sessionExpiryEndpoint, initialExpiryTime) {
-    this.context = context;
-    this.sessionExpiryEndpoint = sessionExpiryEndpoint;
-    this.initialExpiryTime = initialExpiryTime;
-    this.continueButton = context.querySelector('.ons-js-modal-btn');
-    this.modalVisibleInMilliseconds = context.getAttribute('data-show-modal-time') * 1000;
-    this.expiryTime = '';
-    this.expiryTimeInMilliseconds = 0;
-    this.shouldRestartCheck = false;
+    constructor(context, sessionExpiryEndpoint, initialExpiryTime) {
+        this.context = context;
+        this.sessionExpiryEndpoint = sessionExpiryEndpoint;
+        this.initialExpiryTime = initialExpiryTime;
+        this.continueButton = context.querySelector('.ons-js-modal-btn');
+        this.modalVisibleInMilliseconds = context.getAttribute('data-show-modal-time') * 1000;
+        this.expiryTime = '';
+        this.expiryTimeInMilliseconds = 0;
+        this.shouldRestartCheck = false;
 
-    // Create modal instance
-    this.modal = new Modal(this.context);
+        // Create modal instance
+        this.modal = new Modal(this.context);
 
-    // Create timeout instance
-    this.timeout = new Timeout(this.context, this.sessionExpiryEndpoint, this.initialExpiryTime, true);
+        // Create timeout instance
+        this.timeout = new Timeout(this.context, this.sessionExpiryEndpoint, this.initialExpiryTime, true);
 
-    this.bindEventListeners();
-  }
+        this.bindEventListeners();
+    }
 
-  bindEventListeners() {
-    window.onload = this.startTimeout();
-    window.addEventListener('keydown', this.escToClose.bind(this));
-    this.continueButton.addEventListener('click', this.closeModalAndRestartTimeout.bind(this));
-  }
+    bindEventListeners() {
+        window.onload = this.startTimeout();
+        window.addEventListener('keydown', this.escToClose.bind(this));
+        this.continueButton.addEventListener('click', this.closeModalAndRestartTimeout.bind(this));
+    }
 
-  startTimeout() {
-    clearTimeout(this.showModalTimeout);
-    if (this.initialExpiryTime) {
-      this.expiryTime = this.timeout.expiryTime;
-      this.expiryTimeInMilliseconds = this.timeout.convertTimeToMilliSeconds(this.expiryTime);
-    } else {
-      // For demo purposes
-      this.expiryTimeInMilliseconds = 60000;
+    startTimeout() {
+        clearTimeout(this.showModalTimeout);
+        if (this.initialExpiryTime) {
+            this.expiryTime = this.timeout.expiryTime;
+            this.expiryTimeInMilliseconds = this.timeout.convertTimeToMilliSeconds(this.expiryTime);
+        } else {
+            // For demo purposes
+            this.expiryTimeInMilliseconds = 60000;
+        }
+        this.showModalTimeout = setTimeout(
+            this.openModalAndStartCountdown.bind(this),
+            this.expiryTimeInMilliseconds - this.modalVisibleInMilliseconds,
+        );
     }
-    this.showModalTimeout = setTimeout(
-      this.openModalAndStartCountdown.bind(this),
-      this.expiryTimeInMilliseconds - this.modalVisibleInMilliseconds,
-    );
-  }
 
-  async openModalAndStartCountdown() {
-    const modalWillOpen = await this.hasExpiryTimeResetInAnotherTab();
-    if (modalWillOpen && !this.modal.isDialogOpen()) {
-      this.modal.openDialog();
-      this.timeout.startUiCountdown();
+    async openModalAndStartCountdown() {
+        const modalWillOpen = await this.hasExpiryTimeResetInAnotherTab();
+        if (modalWillOpen && !this.modal.isDialogOpen()) {
+            this.modal.openDialog();
+            this.timeout.startUiCountdown();
 
-      this.shouldRestartCheck = setInterval(async () => {
-        await this.hasExpiryTimeResetInAnotherTab();
-      }, 20000);
+            this.shouldRestartCheck = setInterval(async () => {
+                await this.hasExpiryTimeResetInAnotherTab();
+            }, 20000);
+        }
     }
-  }
 
-  async hasExpiryTimeResetInAnotherTab() {
-    const checkExpiryTime = await this.timeout.getExpiryTime();
-    if (checkExpiryTime.substring(0, 19) != this.timeout.expiryTime.substring(0, 19)) {
-      // Substring is required as endpoint can at random return milliseconds with expiry time
-      this.expiryTime = checkExpiryTime;
-      this.expiryTimeInMilliseconds = this.timeout.convertTimeToMilliSeconds(checkExpiryTime);
-      this.closeModalAndRestartTimeout(this.expiryTimeInMilliseconds);
-    } else {
-      return true;
+    async hasExpiryTimeResetInAnotherTab() {
+        const checkExpiryTime = await this.timeout.getExpiryTime();
+        if (checkExpiryTime.substring(0, 19) != this.timeout.expiryTime.substring(0, 19)) {
+            // Substring is required as endpoint can at random return milliseconds with expiry time
+            this.expiryTime = checkExpiryTime;
+            this.expiryTimeInMilliseconds = this.timeout.convertTimeToMilliSeconds(checkExpiryTime);
+            this.closeModalAndRestartTimeout(this.expiryTimeInMilliseconds);
+        } else {
+            return true;
+        }
     }
-  }
 
-  async closeModalAndRestartTimeout(time) {
-    clearInterval(this.shouldRestartCheck);
+    async closeModalAndRestartTimeout(time) {
+        clearInterval(this.shouldRestartCheck);
 
-    if (typeof timeInMilliSeconds !== 'string') {
-      time = false;
-    }
-    if (this.modal.isDialogOpen()) {
-      this.modal.closeDialog(event);
+        if (typeof timeInMilliSeconds !== 'string') {
+            time = false;
+        }
+        if (this.modal.isDialogOpen()) {
+            this.modal.closeDialog(event);
+        }
+        await this.timeout.restartTimeout(time);
+        this.startTimeout();
     }
-    await this.timeout.restartTimeout(time);
-    this.startTimeout();
-  }
 
-  escToClose(event) {
-    if (this.modal.isDialogOpen() && event.keyCode === 27) {
-      this.closeModalAndRestartTimeout();
+    escToClose(event) {
+        if (this.modal.isDialogOpen() && event.keyCode === 27) {
+            this.closeModalAndRestartTimeout();
+        }
     }
-  }
 }

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

@@ -1,226 +1,226 @@
 import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
 
 const EXAMPLE_TIMEOUT_MODAL_BASIC = {
-  redirectUrl: '#!',
-  title: 'You will be signed out soon',
-  textFirstLine: 'It appears you have been inactive for a while.',
-  countdownText: 'To protect your information, your progress will be saved and you will be signed out in',
-  countdownExpiredText: 'You are being signed out.',
-  btnText: 'Continue survey',
-  minutesTextSingular: 'minute',
-  minutesTextPlural: 'minutes',
-  secondsTextSingular: 'second',
-  secondsTextPlural: 'seconds',
-  endWithFullStop: true,
+    redirectUrl: '#!',
+    title: 'You will be signed out soon',
+    textFirstLine: 'It appears you have been inactive for a while.',
+    countdownText: 'To protect your information, your progress will be saved and you will be signed out in',
+    countdownExpiredText: 'You are being signed out.',
+    btnText: 'Continue survey',
+    minutesTextSingular: 'minute',
+    minutesTextPlural: 'minutes',
+    secondsTextSingular: 'second',
+    secondsTextPlural: 'seconds',
+    endWithFullStop: true,
 };
 
 describe('script: timeout modal', () => {
-  describe('when the page loads', () => {
-    beforeEach(async () => {
-      const component = renderComponent('timeout-modal', { ...EXAMPLE_TIMEOUT_MODAL_BASIC, showModalTimeInSeconds: 58 });
-      const template = `
+    describe('when the page loads', () => {
+        beforeEach(async () => {
+            const component = renderComponent('timeout-modal', { ...EXAMPLE_TIMEOUT_MODAL_BASIC, showModalTimeInSeconds: 58 });
+            const template = `
         <div class="ons-page">
           ${component}
         </div>
       `;
-      await setTestPage('/test', template);
-    });
+            await setTestPage('/test', template);
+        });
 
-    it('displays the modal after the correct number of seconds', async () => {
-      await page.waitForTimeout(2000);
-      const modalIsVisible = await page.$eval('.ons-modal', (node) => node.classList.contains('ons-u-db'));
-      expect(modalIsVisible).toBe(true);
-    });
-  });
-
-  describe('when the modal first opens', () => {
-    describe('when the countdown starts', () => {
-      beforeEach(async () => {
-        const component = renderComponent('timeout-modal', {
-          ...EXAMPLE_TIMEOUT_MODAL_BASIC,
-          showModalTimeInSeconds: 60,
+        it('displays the modal after the correct number of seconds', async () => {
+            await page.waitForTimeout(2000);
+            const modalIsVisible = await page.$eval('.ons-modal', (node) => node.classList.contains('ons-u-db'));
+            expect(modalIsVisible).toBe(true);
         });
+    });
+
+    describe('when the modal first opens', () => {
+        describe('when the countdown starts', () => {
+            beforeEach(async () => {
+                const component = renderComponent('timeout-modal', {
+                    ...EXAMPLE_TIMEOUT_MODAL_BASIC,
+                    showModalTimeInSeconds: 60,
+                });
 
-        const template = `
+                const template = `
           <div class="ons-page">
             ${component}
           </div>
         `;
 
-        await setTestPage('/test', template);
-      });
+                await setTestPage('/test', template);
+            });
 
-      it('shows the time counting down', async () => {
-        const timeAtStart = await page.$eval('.ons-js-timeout-timer span', (element) => element.innerHTML);
-        await page.waitForTimeout(1000);
-        const timeAfterOneSecond = await page.$eval('.ons-js-timeout-timer span', (element) => element.innerHTML);
-        expect(timeAfterOneSecond).not.toEqual(timeAtStart);
-      });
-    });
+            it('shows the time counting down', async () => {
+                const timeAtStart = await page.$eval('.ons-js-timeout-timer span', (element) => element.innerHTML);
+                await page.waitForTimeout(1000);
+                const timeAfterOneSecond = await page.$eval('.ons-js-timeout-timer span', (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-modal', {
-          ...EXAMPLE_TIMEOUT_MODAL_BASIC,
-          showModalTimeInSeconds: 180,
-          sessionExpiresAt: expiryTimeInISOFormat,
-        });
+                const component = renderComponent('timeout-modal', {
+                    ...EXAMPLE_TIMEOUT_MODAL_BASIC,
+                    showModalTimeInSeconds: 180,
+                    sessionExpiresAt: expiryTimeInISOFormat,
+                });
 
-        const template = `
+                const template = `
           <div class="ons-page">
             ${component}
           </div>
         `;
-        await setTestPage('/test', template);
-      });
+                await setTestPage('/test', template);
+            });
 
-      it('displays the `minutes` (plural) string', async () => {
-        const timeString = await page.$eval('.ons-js-timeout-timer span', (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 span', (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-modal', {
-          ...EXAMPLE_TIMEOUT_MODAL_BASIC,
-          showModalTimeInSeconds: 60,
-          sessionExpiresAt: expiryTimeInISOFormat,
-        });
+                const component = renderComponent('timeout-modal', {
+                    ...EXAMPLE_TIMEOUT_MODAL_BASIC,
+                    showModalTimeInSeconds: 60,
+                    sessionExpiresAt: expiryTimeInISOFormat,
+                });
 
-        const template = `
+                const template = `
           <div class="ons-page">
             ${component}
           </div>
         `;
-        await setTestPage('/test', template);
-      });
+                await setTestPage('/test', template);
+            });
 
-      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-modal', {
-          ...EXAMPLE_TIMEOUT_MODAL_BASIC,
-          showModalTimeInSeconds: 90,
-          sessionExpiresAt: expiryTimeInISOFormat,
-        });
+                const component = renderComponent('timeout-modal', {
+                    ...EXAMPLE_TIMEOUT_MODAL_BASIC,
+                    showModalTimeInSeconds: 90,
+                    sessionExpiresAt: expiryTimeInISOFormat,
+                });
 
-        const template = `
+                const template = `
           <div class="ons-page">
             ${component}
           </div>
         `;
-        await setTestPage('/test', template);
-      });
+                await setTestPage('/test', template);
+            });
 
-      it('displays the `minute` (singular) string', async () => {
-        const timeString = await page.$eval('.ons-js-timeout-timer span', (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 span', (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-modal', {
-          ...EXAMPLE_TIMEOUT_MODAL_BASIC,
-          showModalTimeInSeconds: 3,
-          sessionExpiresAt: expiryTimeInISOFormat,
-        });
+                const component = renderComponent('timeout-modal', {
+                    ...EXAMPLE_TIMEOUT_MODAL_BASIC,
+                    showModalTimeInSeconds: 3,
+                    sessionExpiresAt: expiryTimeInISOFormat,
+                });
 
-        const template = `
+                const template = `
           <div class="ons-page">
             ${component}
           </div>
         `;
-        await setTestPage('/test', template);
-      });
+                await setTestPage('/test', template);
+            });
 
-      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-modal', {
-          ...EXAMPLE_TIMEOUT_MODAL_BASIC,
-          showModalTimeInSeconds: 1,
-          sessionExpiresAt: expiryTimeInISOFormat,
-        });
+                const component = renderComponent('timeout-modal', {
+                    ...EXAMPLE_TIMEOUT_MODAL_BASIC,
+                    showModalTimeInSeconds: 1,
+                    sessionExpiresAt: expiryTimeInISOFormat,
+                });
 
-        const template = `
+                const template = `
           <div class="ons-page">
             ${component}
           </div>
         `;
-        await setTestPage('/test', template);
-      });
-
-      it('displays the `countdownExpiredText` text', async () => {
-        const timeString = await page.$eval('.ons-js-timeout-timer span', (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('#!');
-      });
+                await setTestPage('/test', template);
+            });
+
+            it('displays the `countdownExpiredText` text', async () => {
+                const timeString = await page.$eval('.ons-js-timeout-timer span', (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('#!');
+            });
+        });
     });
-  });
 
-  describe('when the modal is open', () => {
-    beforeEach(async () => {
-      const component = renderComponent('timeout-modal', {
-        ...EXAMPLE_TIMEOUT_MODAL_BASIC,
-        showModalTimeInSeconds: 59,
-      });
+    describe('when the modal is open', () => {
+        beforeEach(async () => {
+            const component = renderComponent('timeout-modal', {
+                ...EXAMPLE_TIMEOUT_MODAL_BASIC,
+                showModalTimeInSeconds: 59,
+            });
 
-      const template = `
+            const template = `
         <div class="ons-page">
           ${component}
         </div>
       `;
 
-      await setTestPage('/test', template);
-    });
+            await setTestPage('/test', template);
+        });
 
-    describe('when the `esc` key is pressed', () => {
-      beforeEach(async () => {
-        await page.waitForSelector('.ons-modal');
-        await page.keyboard.press('Escape');
-      });
-
-      it('closes the modal', async () => {
-        const modalIsVisible = await page.$eval('.ons-modal', (node) => node.classList.contains('ons-u-db'));
-        expect(modalIsVisible).toBe(false);
-      });
-
-      it('restarts the timer and displays the modal after the correct number of seconds', async () => {
-        await page.waitForTimeout(2000);
-        const modalIsVisible = await page.$eval('.ons-modal', (node) => node.classList.contains('ons-u-db'));
-        expect(modalIsVisible).toBe(true);
-      });
+        describe('when the `esc` key is pressed', () => {
+            beforeEach(async () => {
+                await page.waitForSelector('.ons-modal');
+                await page.keyboard.press('Escape');
+            });
+
+            it('closes the modal', async () => {
+                const modalIsVisible = await page.$eval('.ons-modal', (node) => node.classList.contains('ons-u-db'));
+                expect(modalIsVisible).toBe(false);
+            });
+
+            it('restarts the timer and displays the modal after the correct number of seconds', async () => {
+                await page.waitForTimeout(2000);
+                const modalIsVisible = await page.$eval('.ons-modal', (node) => node.classList.contains('ons-u-db'));
+                expect(modalIsVisible).toBe(true);
+            });
+        });
     });
-  });
 });

package/components/timeout-panel/_macro.njk

@@ -1,22 +1,24 @@
 {% from "components/panel/_macro.njk" import onsPanel %}
 {% macro onsTimeoutPanel(params) %}
-    {% call onsPanel({
-        "id": params.id,
-        "classes": "ons-js-panel-with-countdown",
-        "variant": "warn",
-        "attributes": {
-            "data-redirect-url": params.redirectUrl,
-            "data-server-session-expires-at": params.sessionExpiresAt,
-            "data-countdown-text": params.countdownText,
-            "data-countdown-expired-text": params.countdownExpiredText,
-            "data-minutes-text-singular": params.minutesTextSingular,
-            "data-minutes-text-plural": params.minutesTextPlural,
-            "data-seconds-text-singular": params.secondsTextSingular,
-            "data-seconds-text-plural": params.secondsTextPlural,
-            "data-full-stop": params.endWithFullStop,
-            "aria-describedby": "timeout-time-remaining"
-        }
-    }) %}
+    {%
+        call onsPanel({
+            "id": params.id,
+            "classes": "ons-js-panel-with-countdown",
+            "variant": "warn",
+            "attributes": {
+                "data-redirect-url": params.redirectUrl,
+                "data-server-session-expires-at": params.sessionExpiresAt,
+                "data-countdown-text": params.countdownText,
+                "data-countdown-expired-text": params.countdownExpiredText,
+                "data-minutes-text-singular": params.minutesTextSingular,
+                "data-minutes-text-plural": params.minutesTextPlural,
+                "data-seconds-text-singular": params.secondsTextSingular,
+                "data-seconds-text-plural": params.secondsTextPlural,
+                "data-full-stop": params.endWithFullStop,
+                "aria-describedby": "timeout-time-remaining"
+            }
+        })
+    %}
         <noscript><p class="ons-js-nojs-text">{{ params.nojsText }}</p></noscript>
         <p class="ons-js-timeout-timer" aria-hidden="true" aria-relevant="additions"></p>
         <p class="ons-js-timeout-timer-acc ons-u-vh" role="status" id="timeout-time-remaining"></p>