@ons/design-system 70.0.6 → 70.0.8

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