@ons/design-system 44.0.2 → 44.1.1

package/components/modal/_macro.njk

@@ -0,0 +1,23 @@
+{% macro onsModal(params) %}    
+    {% set modalID = params.id | default('dialog') %}
+    <dialog class="ons-modal ons-js-modal {{ params.classes }}"
+        id="{{ modalID }}"
+        role="dialog"
+        aria-labelledby="ons-modal-title"
+        {% if params.attributes is defined and params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %} {{attribute}}="{{value}}"{% endfor %}{% endif %}
+    >
+        <h1 id="ons-modal-title" class="ons-modal__title">
+            {{ params.title }}
+        </h1>
+        <div class="ons-modal__body">
+            {{ (params.body if params else "") | safe }}{{ caller() if caller }}
+        </div>
+        {% if params.btnText %}
+            {% from "components/button/_macro.njk" import onsButton %}
+            {{ onsButton({
+                "text": params.btnText,
+                "classes": "ons-js-modal-btn ons-u-mt-s"
+            }) }}
+        {% endif %}
+    </dialog>
+{% endmacro %}

package/components/modal/_modal.scss

@@ -0,0 +1,32 @@
+$backdrop-colour: rgba(0, 0, 0, 0.8);
+
+.ons-modal {
+  border: none;
+  border-radius: 0.4rem;
+  box-shadow: 0 0 7px 0 #000;
+  display: none;
+  margin-left: 2rem;
+  margin-right: 2rem;
+  max-width: 500px;
+  padding: 2rem;
+  width: auto;
+
+  @media screen and (min-width: 600px) {
+    margin-left: auto;
+    margin-right: auto;
+    width: 100%;
+  }
+
+  &::backdrop {
+    backdrop-filter: blur(3px);
+    background: $backdrop-colour;
+  }
+
+  & + .backdrop {
+    background: $backdrop-colour;
+  }
+}
+
+.ons-modal-overlay {
+  overflow: hidden;
+}

package/components/modal/modal.dom.js

@@ -0,0 +1,14 @@
+import domready from '../../js/domready';
+
+async function modals() {
+  const modals = [...document.querySelectorAll('.ons-js-modal')];
+  const timeouts = [...document.querySelectorAll('.ons-js-timeout-modal')];
+
+  if (modals.length && !timeouts.length) {
+    const Modal = (await import('./modal')).default;
+
+    modals.forEach(component => new Modal(component));
+  }
+}
+
+domready(modals);

package/components/modal/modal.js

@@ -0,0 +1,104 @@
+import dialogPolyfill from 'dialog-polyfill';
+
+const overLayClass = 'ons-modal-overlay';
+
+export default class Modal {
+  constructor(component) {
+    this.component = component;
+    this.launcher = document.querySelector(`[data-modal-id=${component.id}]`);
+    this.closeButton = component.querySelector('.ons-js-modal-btn');
+    this.lastFocusedEl = null;
+
+    this.initialise();
+  }
+
+  initialise() {
+    if (!this.dialogSupported()) {
+      /* istanbul ignore next */
+      return;
+    }
+
+    if (this.launcher) {
+      this.launcher.addEventListener('click', this.openDialog.bind(this));
+    }
+
+    if (this.closeButton) {
+      this.closeButton.addEventListener('click', this.closeDialog.bind(this));
+    }
+  }
+
+  dialogSupported() {
+    if (typeof HTMLDialogElement === 'function') {
+      return true;
+    } else {
+      try {
+        dialogPolyfill.registerDialog(this.component);
+        return true;
+      } catch (error) {
+        /* istanbul ignore next */
+        return false;
+      }
+    }
+  }
+
+  openDialog(event) {
+    if (!this.isDialogOpen()) {
+      this.component.classList.add('ons-u-db');
+      document.querySelector('body').className += ' ' + overLayClass;
+      this.makePageContentInert();
+      this.saveLastFocusedEl();
+      if (event) {
+        const modal = document.getElementById(event.target.getAttribute('data-modal-id'));
+        modal.showModal();
+      } else {
+        this.component.showModal();
+      }
+    }
+  }
+
+  saveLastFocusedEl() {
+    this.lastFocusedEl = document.activeElement;
+    if (!this.lastFocusedEl || this.lastFocusedEl === document.body) {
+      this.lastFocusedEl = null;
+    } else if (document.querySelector) {
+      this.lastFocusedEl = document.querySelector(':focus');
+    }
+  }
+
+  setFocusOnLastFocusedEl(lastFocusedEl) {
+    if (lastFocusedEl) {
+      lastFocusedEl.focus();
+    }
+  }
+
+  makePageContentInert() {
+    if (document.querySelector('.ons-page')) {
+      document.querySelector('.ons-page').inert = true;
+      document.querySelector('.ons-page').setAttribute('aria-hidden', 'true');
+    }
+  }
+
+  removeInertFromPageContent() {
+    if (document.querySelector('.ons-page')) {
+      document.querySelector('.ons-page').inert = false;
+      document.querySelector('.ons-page').setAttribute('aria-hidden', 'false');
+    }
+  }
+
+  isDialogOpen() {
+    return this.component['open'];
+  }
+
+  closeDialog(event) {
+    if (this.isDialogOpen()) {
+      if (event) {
+        event.preventDefault();
+      }
+      this.component.classList.remove('ons-u-db');
+      document.querySelector('body').classList.remove(overLayClass);
+      this.component.close();
+      this.setFocusOnLastFocusedEl(this.lastFocusedEl);
+      this.removeInertFromPageContent();
+    }
+  }
+}

package/components/timeout-modal/_macro.njk

@@ -0,0 +1,26 @@
+{% from "components/modal/_macro.njk" import onsModal %}
+{% macro onsTimeoutModal(params) %}    
+    {% call onsModal({
+            "title": params.title,
+            "btnText": params.btnText,
+            "classes": "ons-js-timeout-modal",
+            "attributes": {
+                "data-redirect-url": params.redirectUrl,
+                "data-timeout-time": params.serverTimeoutTime,
+                "data-show-modal-time": params.showModalTimeInSeconds,
+                "data-server-session-expiry-endpoint": params.serverSessionExpiryEndpoint,
+                "data-countdown-text": params.countdownText,
+                "data-redirecting-text": params.redirectingText,
+                "data-minutes-text-singular": params.minutesTextSingular,
+                "data-minutes-text-plural": params.minutesTextPlural,
+                "data-seconds-text-singular": params.secondsTextSingular,
+                "data-seconds-text-plural": params.secondsTextPlural,
+                "aria-describedby": "timeout-time-remaining"
+            }
+        })
+    %}
+        <p>{{ params.textFirstLine }}</p>
+        <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>
+    {% endcall %}
+{% endmacro %}

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

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

package/components/timeout-modal/timeout.js

@@ -0,0 +1,289 @@
+import Modal from '../modal/modal';
+
+export default class Timeout {
+  constructor(context, url, time) {
+    this.context = context;
+    this.sessionExpiryEndpoint = url;
+    this.initialExpiryTime = time;
+    this.continueButton = context.querySelector('.ons-js-modal-btn');
+    this.countdown = context.querySelector('.ons-js-timeout-timer');
+    this.accessibleCountdown = context.querySelector('.ons-js-timeout-timer-acc');
+    this.timeOutRedirectUrl = context.getAttribute('data-redirect-url');
+    this.modalVisibleInMilliseconds = context.getAttribute('data-show-modal-time') * 1000;
+
+    // Language dependent text strings
+    this.minutesTextSingular = context.getAttribute('data-minutes-text-singular');
+    this.minutesTextPlural = context.getAttribute('data-minutes-text-plural');
+    this.secondsTextSingular = context.getAttribute('data-seconds-text-singular');
+    this.secondsTextPlural = context.getAttribute('data-seconds-text-plural');
+    this.countdownText = context.getAttribute('data-countdown-text');
+    this.redirectingText = context.getAttribute('data-redirecting-text');
+
+    // Settings
+    this.expiryTimeInMilliseconds = 0;
+    this.expiryTime = '';
+    this.showModalTimeout = null;
+    this.timers = [];
+    this.timerRunOnce = false;
+
+    // Create modal instance
+    this.modal = new Modal(this.context);
+
+    // Start module
+    this.initialise();
+  }
+
+  async initialise() {
+    this.expiryTime = await this.setNewExpiryTime();
+    this.expiryTimeInMilliseconds = this.convertTimeToMilliSeconds(this.expiryTime);
+
+    this.bindEventListeners();
+  }
+
+  bindEventListeners() {
+    window.onload = this.startTimeout();
+    window.addEventListener('focus', this.handleWindowFocus.bind(this));
+    window.addEventListener('keydown', this.escToClose.bind(this));
+    this.continueButton.addEventListener('click', this.closeModalAndRestartTimeout.bind(this));
+    this.addThrottledEvents();
+  }
+
+  startTimeout() {
+    clearTimeout(this.showModalTimeout);
+    this.showModalTimeout = setTimeout(this.openModal.bind(this), this.expiryTimeInMilliseconds - this.modalVisibleInMilliseconds);
+  }
+
+  async openModal() {
+    const modalWillOpen = await this.hasExpiryTimeResetInAnotherTab();
+    if (modalWillOpen && !this.modal.isDialogOpen()) {
+      this.modal.openDialog();
+      this.startUiCountdown();
+    }
+  }
+
+  async startUiCountdown() {
+    this.clearTimers();
+    clearInterval(this.shouldModalCloseCheck);
+
+    this.shouldModalCloseCheck = setInterval(async () => {
+      await this.hasExpiryTimeResetInAnotherTab();
+    }, 20000);
+
+    let millseconds = this.modalVisibleInMilliseconds;
+    let seconds = millseconds / 1000;
+    let timers = this.timers;
+    let $this = this;
+
+    (async function runTimer() {
+      const minutesLeft = parseInt(seconds / 60, 10);
+      const secondsLeft = parseInt(seconds % 60, 10);
+      const timerExpired = minutesLeft < 1 && secondsLeft < 1;
+
+      const minutesText =
+        minutesLeft + ' ' + (minutesLeft >= 2 ? $this.minutesTextPlural : minutesLeft === 1 ? $this.minutesTextSingular : '');
+      const secondsText =
+        secondsLeft + ' ' + (secondsLeft >= 2 ? $this.secondsTextPlural : secondsLeft === 1 ? $this.secondsTextSingular : '');
+
+      let timeLeftText =
+        $this.countdownText +
+        ' <span class="ons-u-fw-b">' +
+        (minutesLeft > 0 ? minutesText : '') +
+        (minutesLeft > 0 && secondsLeft > 0 ? ' ' : '') +
+        (secondsLeft > 0 ? secondsText : '') +
+        '</span>.';
+
+      if (timerExpired) {
+        const shouldExpire = await $this.hasExpiryTimeResetInAnotherTab();
+
+        if (shouldExpire) {
+          $this.countdown.innerHTML = '<span class="ons-u-fw-b">' + $this.redirectingText + '</span>';
+          $this.accessibleCountdown.innerHTML = $this.redirectingText;
+          setTimeout($this.redirect.bind($this), 2000);
+        }
+      } else {
+        seconds--;
+        $this.expiryTimeInMilliseconds = seconds * 1000;
+        $this.countdown.innerHTML = timeLeftText;
+
+        if (minutesLeft < 1 && secondsLeft < 20) {
+          $this.accessibleCountdown.setAttribute('aria-live', 'assertive');
+        }
+
+        if (!$this.timerRunOnce) {
+          $this.accessibleCountdown.innerHTML = timeLeftText;
+          $this.timerRunOnce = true;
+        } else if (secondsLeft % 15 === 0) {
+          $this.accessibleCountdown.innerHTML = timeLeftText;
+        }
+
+        timers.push(setTimeout(runTimer.bind($this), 1000));
+      }
+    })();
+  }
+
+  async hasExpiryTimeResetInAnotherTab() {
+    const checkExpiryTime = await this.getExpiryTime();
+
+    if (checkExpiryTime != this.expiryTime) {
+      this.expiryTime = checkExpiryTime;
+      this.expiryTimeInMilliseconds = this.convertTimeToMilliSeconds(checkExpiryTime);
+      this.closeModalAndRestartTimeout(this.expiryTimeInMilliseconds);
+    } else {
+      return true;
+    }
+  }
+
+  closeModalAndRestartTimeout(timeInMilliSeconds) {
+    if (typeof timeInMilliSeconds !== 'string') {
+      timeInMilliSeconds = false;
+    }
+    if (this.modal.isDialogOpen()) {
+      this.modal.closeDialog();
+    }
+    this.restartTimeout(timeInMilliSeconds);
+  }
+
+  async restartTimeout(timeInMilliSeconds) {
+    this.clearTimers();
+    clearInterval(this.shouldModalCloseCheck);
+
+    if (timeInMilliSeconds) {
+      this.expiryTimeInMilliseconds = timeInMilliSeconds;
+    } else {
+      const createNewExpiryTime = await this.setNewExpiryTime();
+      this.expiryTime = createNewExpiryTime;
+      this.expiryTimeInMilliseconds = this.convertTimeToMilliSeconds(createNewExpiryTime);
+    }
+
+    this.startTimeout();
+  }
+
+  async handleWindowFocus() {
+    if (this.sessionExpiryEndpoint) {
+      const canSetNewExpiry = await this.setNewExpiryTime();
+      if (!canSetNewExpiry) {
+        this.redirect();
+      } else {
+        this.closeModalAndRestartTimeout();
+      }
+    }
+  }
+
+  escToClose(event) {
+    if (this.modal.isDialogOpen() && event.keyCode === 27) {
+      this.closeModalAndRestartTimeout();
+    }
+  }
+
+  async setNewExpiryTime() {
+    let newExpiryTime;
+    if (!this.sessionExpiryEndpoint) {
+      // For demo purposes
+      const demoTime = new Date(this.initialExpiryTime ? this.initialExpiryTime : Date.now() + 60 * 1000);
+      newExpiryTime = new Date(demoTime).toISOString();
+    } else {
+      newExpiryTime = await this.fetchExpiryTime('PATCH');
+    }
+    return newExpiryTime;
+  }
+
+  async getExpiryTime() {
+    if (this.sessionExpiryEndpoint) {
+      const currentExpiryTime = await this.fetchExpiryTime('GET');
+      return currentExpiryTime;
+    } else {
+      // For demo purposes
+      return this.expiryTime;
+    }
+  }
+
+  async fetchExpiryTime(fetchMethod) {
+    let response = await fetch(this.sessionExpiryEndpoint, {
+      method: fetchMethod,
+      headers: { 'Cache-Control': 'no-cache', 'Content-type': 'application/json; charset=UTF-8' },
+    });
+    if (!response.ok) {
+      this.redirect();
+      return false;
+    }
+
+    let json = await response.json();
+
+    return json.expires_at;
+  }
+
+  convertTimeToMilliSeconds(expiryTime) {
+    const time = new Date(expiryTime);
+    const calculateTimeInMilliSeconds = Math.abs(time - new Date());
+
+    return calculateTimeInMilliSeconds;
+  }
+
+  redirect() {
+    window.location.replace(this.timeOutRedirectUrl);
+  }
+
+  clearTimers() {
+    for (let i = 0; i < this.timers.length; i++) {
+      clearTimeout(this.timers[i]);
+    }
+  }
+
+  addThrottledEvents() {
+    window.onclick = this.throttle(() => {
+      /* istanbul ignore next */
+      if (!this.modal.isDialogOpen()) {
+        this.restartTimeout();
+      }
+    }, 61000);
+
+    window.onmousemove = this.throttle(() => {
+      /* istanbul ignore next */
+      if (!this.modal.isDialogOpen()) {
+        this.restartTimeout();
+      }
+    }, 61000);
+
+    window.onmousedown = this.throttle(() => {
+      /* istanbul ignore next */
+      if (!this.modal.isDialogOpen()) {
+        this.restartTimeout();
+      }
+    }, 61000);
+
+    window.onscroll = this.throttle(() => {
+      /* istanbul ignore next */
+      if (!this.modal.isDialogOpen()) {
+        this.restartTimeout();
+      }
+    }, 61000);
+
+    window.onkeypress = this.throttle(() => {
+      /* istanbul ignore next */
+      if (!this.modal.isDialogOpen()) {
+        this.restartTimeout();
+      }
+    }, 61000);
+
+    window.onkeyup = this.throttle(() => {
+      /* istanbul ignore next */
+      if (!this.modal.isDialogOpen()) {
+        this.restartTimeout();
+      }
+    }, 61000);
+  }
+
+  throttle(func, wait) {
+    let waiting = false;
+    return function() {
+      if (waiting) {
+        return;
+      }
+      waiting = true;
+      setTimeout(async () => {
+        func.apply(this, arguments);
+        waiting = false;
+      }, wait);
+    };
+  }
+}

package/favicons/census/cy/browserconfig.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square70x70logo src="mstile-70x70.png"/>
+            <square150x150logo src="mstile-150x150.png"/>
+            <square310x310logo src="mstile-310x310.png"/>
+            <wide310x150logo src="mstile-310x150.png"/>
+            <TileColor>#902082</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

package/favicons/census/cy/manifest.json

@@ -0,0 +1,20 @@
+{
+  "name": "Cyfrifiad2021",
+  "short_name": "Cyfrifiad2021",
+  "icons": [
+    {
+      "src": "android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "content_security_policy": "script-src 'self' https://cdn.ons.gov.uk; object-src 'self' https://cdn.ons.gov.uk;",
+  "theme_color": "#902082",
+  "background_color": "#902082",
+  "display": "standalone"
+}

package/favicons/census/cy/safari-pinned-tab.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
+    <path d="M13,24C6.4,24,1,18.6,1,12C1,5.4,6.4,0,13,0c3.3,0,6.5,1.4,8.8,3.8c1,1.1,1,2.8-0.1,3.9c-1.1,1-2.8,1-3.9-0.1c-1.3-1.3-3-2.1-4.8-2.1c-3.6,0-6.5,2.9-6.5,6.5c0,3.6,2.9,6.5,6.5,6.5c1.8,0,3.5-0.7,4.8-2.1c1-1.1,2.8-1.2,3.9-0.1c1.1,1,1.2,2.8,0.1,3.9C19.5,22.6,16.3,24,13,24" fill-rule="nonzero"></path>
+</svg>

package/favicons/census/cy/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "Cyfrifiad2021",
+    "short_name": "Cyfrifiad2021",
+    "icons": [
+        {
+            "src": "android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#902082",
+    "background_color": "#902082",
+    "display": "standalone"
+}

package/favicons/census/en/browserconfig.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square70x70logo src="mstile-70x70.png"/>
+            <square150x150logo src="mstile-150x150.png"/>
+            <square310x310logo src="mstile-310x310.png"/>
+            <wide310x150logo src="mstile-310x150.png"/>
+            <TileColor>#902082</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

package/favicons/census/en/manifest.json

@@ -0,0 +1,20 @@
+{
+  "name": "Census2021",
+  "short_name": "Census2021",
+  "icons": [
+    {
+      "src": "android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "content_security_policy": "script-src 'self' https://cdn.ons.gov.uk; object-src 'self' https://cdn.ons.gov.uk;",
+  "theme_color": "#902082",
+  "background_color": "#902082",
+  "display": "standalone"
+}

package/favicons/census/en/safari-pinned-tab.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
+    <path d="M13,24C6.4,24,1,18.6,1,12C1,5.4,6.4,0,13,0c3.3,0,6.5,1.4,8.8,3.8c1,1.1,1,2.8-0.1,3.9c-1.1,1-2.8,1-3.9-0.1c-1.3-1.3-3-2.1-4.8-2.1c-3.6,0-6.5,2.9-6.5,6.5c0,3.6,2.9,6.5,6.5,6.5c1.8,0,3.5-0.7,4.8-2.1c1-1.1,2.8-1.2,3.9-0.1c1.1,1,1.2,2.8,0.1,3.9C19.5,22.6,16.3,24,13,24" fill-rule="nonzero"></path>
+</svg>