@ons/design-system 70.0.6 → 70.0.8

package/js/timeout.js

@@ -1,234 +1,234 @@
 export default class Timeout {
-  constructor(context, sessionExpiryEndpoint, initialExpiryTime, enableTimeoutReset, startOnLoad) {
-    this.context = context;
-    this.sessionExpiryEndpoint = sessionExpiryEndpoint;
-    this.initialExpiryTime = initialExpiryTime;
-    this.enableTimeoutReset = enableTimeoutReset || false;
-    this.startOnLoad = startOnLoad || false;
-    this.countdown = context.querySelector('.ons-js-timeout-timer');
-    this.accessibleCountdown = context.querySelector('.ons-js-timeout-timer-acc');
-    this.timeOutRedirectUrl = context.getAttribute('data-redirect-url');
-
-    // 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.countdownExpiredText = context.getAttribute('data-countdown-expired-text');
-    this.endWithFullStop = context.getAttribute('data-full-stop');
-
-    // Settings
-    this.expiryTime = '';
-    this.expiryTimeInMilliseconds = 0;
-    this.timers = [];
-    this.timerRunOnce = false;
-    this.countdownStarted = false;
-
-    // Start module
-    this.initialise();
-  }
-
-  async initialise() {
-    if (this.initialExpiryTime) {
-      this.expiryTime = this.initialExpiryTime;
-    } else {
-      this.expiryTime = await this.setNewExpiryTime();
+    constructor(context, sessionExpiryEndpoint, initialExpiryTime, enableTimeoutReset, startOnLoad) {
+        this.context = context;
+        this.sessionExpiryEndpoint = sessionExpiryEndpoint;
+        this.initialExpiryTime = initialExpiryTime;
+        this.enableTimeoutReset = enableTimeoutReset || false;
+        this.startOnLoad = startOnLoad || false;
+        this.countdown = context.querySelector('.ons-js-timeout-timer');
+        this.accessibleCountdown = context.querySelector('.ons-js-timeout-timer-acc');
+        this.timeOutRedirectUrl = context.getAttribute('data-redirect-url');
+
+        // 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.countdownExpiredText = context.getAttribute('data-countdown-expired-text');
+        this.endWithFullStop = context.getAttribute('data-full-stop');
+
+        // Settings
+        this.expiryTime = '';
+        this.expiryTimeInMilliseconds = 0;
+        this.timers = [];
+        this.timerRunOnce = false;
+        this.countdownStarted = false;
+
+        // Start module
+        this.initialise();
     }
-    this.expiryTimeInMilliseconds = this.convertTimeToMilliSeconds(this.expiryTime);
 
-    if (this.enableTimeoutReset) {
-      this.addThrottledResetEvents();
+    async initialise() {
+        if (this.initialExpiryTime) {
+            this.expiryTime = this.initialExpiryTime;
+        } else {
+            this.expiryTime = await this.setNewExpiryTime();
+        }
+        this.expiryTimeInMilliseconds = this.convertTimeToMilliSeconds(this.expiryTime);
+
+        if (this.enableTimeoutReset) {
+            this.addThrottledResetEvents();
+        }
+
+        if (this.startOnLoad) {
+            this.startUiCountdown();
+        }
+
+        window.addEventListener('focus', this.handleWindowFocus.bind(this));
     }
 
-    if (this.startOnLoad) {
-      this.startUiCountdown();
+    async startUiCountdown() {
+        this.clearTimers();
+        this.countdownStarted = true;
+        let milliseconds = this.convertTimeToMilliSeconds(this.expiryTime);
+
+        let seconds = milliseconds / 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>' +
+                ($this.endWithFullStop ? '.' : '');
+
+            if (timerExpired) {
+                $this.countdown.innerHTML = '<span class="ons-u-fw-b">' + $this.countdownExpiredText + '</span>';
+                $this.accessibleCountdown.innerHTML = $this.countdownExpiredText;
+                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));
+            }
+        })();
     }
 
-    window.addEventListener('focus', this.handleWindowFocus.bind(this));
-  }
-
-  async startUiCountdown() {
-    this.clearTimers();
-    this.countdownStarted = true;
-    let milliseconds = this.convertTimeToMilliSeconds(this.expiryTime);
-
-    let seconds = milliseconds / 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>' +
-        ($this.endWithFullStop ? '.' : '');
-
-      if (timerExpired) {
-        $this.countdown.innerHTML = '<span class="ons-u-fw-b">' + $this.countdownExpiredText + '</span>';
-        $this.accessibleCountdown.innerHTML = $this.countdownExpiredText;
-        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');
+    async restartTimeout(timeInMilliSeconds) {
+        this.clearTimers();
+        this.countdownStarted = false;
+        if (timeInMilliSeconds !== false) {
+            this.expiryTimeInMilliseconds = timeInMilliSeconds;
+        } else {
+            const createNewExpiryTime = await this.setNewExpiryTime();
+            this.expiryTime = createNewExpiryTime;
+            this.expiryTimeInMilliseconds = this.convertTimeToMilliSeconds(createNewExpiryTime);
         }
+    }
 
-        if (!$this.timerRunOnce) {
-          $this.accessibleCountdown.innerHTML = timeLeftText;
-          $this.timerRunOnce = true;
-        } else if (secondsLeft % 15 === 0) {
-          $this.accessibleCountdown.innerHTML = timeLeftText;
+    async handleWindowFocus() {
+        this.clearTimers();
+        if (this.countdownStarted) {
+            this.startUiCountdown();
         }
-
-        timers.push(setTimeout(runTimer.bind($this), 1000));
-      }
-    })();
-  }
-
-  async restartTimeout(timeInMilliSeconds) {
-    this.clearTimers();
-    this.countdownStarted = false;
-    if (timeInMilliSeconds !== false) {
-      this.expiryTimeInMilliseconds = timeInMilliSeconds;
-    } else {
-      const createNewExpiryTime = await this.setNewExpiryTime();
-      this.expiryTime = createNewExpiryTime;
-      this.expiryTimeInMilliseconds = this.convertTimeToMilliSeconds(createNewExpiryTime);
     }
-  }
 
-  async handleWindowFocus() {
-    this.clearTimers();
-    if (this.countdownStarted) {
-      this.startUiCountdown();
-    }
-  }
-
-  async setNewExpiryTime() {
-    let newExpiryTime;
-    if (!this.sessionExpiryEndpoint) {
-      // For demo purposes
-      const demoTime = new Date(Date.now() + 60 * 1000);
-      newExpiryTime = new Date(demoTime).toISOString();
-    } else {
-      newExpiryTime = await this.fetchExpiryTime('PATCH');
+    async setNewExpiryTime() {
+        let newExpiryTime;
+        if (!this.sessionExpiryEndpoint) {
+            // For demo purposes
+            const demoTime = new Date(Date.now() + 60 * 1000);
+            newExpiryTime = new Date(demoTime).toISOString();
+        } else {
+            newExpiryTime = await this.fetchExpiryTime('PATCH');
+        }
+        return newExpiryTime;
     }
-    return newExpiryTime;
-  }
-
-  async getExpiryTime() {
-    if (this.sessionExpiryEndpoint) {
-      const currentExpiryTime = await this.fetchExpiryTime('GET');
-      return currentExpiryTime;
-    } else {
-      // For demo purposes
-      return this.expiryTime;
+
+    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.status === 401) {
-      this.redirect();
-      return false;
+
+    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.status === 401) {
+            this.redirect();
+            return false;
+        }
+
+        let json = await response.json();
+
+        return json.expires_at;
     }
 
-    let json = await response.json();
+    convertTimeToMilliSeconds(expiryTime) {
+        const time = new Date(expiryTime);
+        const calculateTimeInMilliSeconds = Math.abs(time - new Date());
 
-    return json.expires_at;
-  }
+        return calculateTimeInMilliSeconds;
+    }
 
-  convertTimeToMilliSeconds(expiryTime) {
-    const time = new Date(expiryTime);
-    const calculateTimeInMilliSeconds = Math.abs(time - new Date());
+    redirect() {
+        window.location.replace(this.timeOutRedirectUrl);
+    }
 
-    return calculateTimeInMilliSeconds;
-  }
+    clearTimers() {
+        for (let i = 0; i < this.timers.length; i++) {
+            clearTimeout(this.timers[i]);
+        }
+    }
 
-  redirect() {
-    window.location.replace(this.timeOutRedirectUrl);
-  }
+    addThrottledResetEvents() {
+        window.onclick = this.throttle(() => {
+            /* istanbul ignore next */
+            if (!this.countdownStarted) {
+                this.restartTimeout();
+            }
+        }, 61000);
+
+        window.onmousemove = this.throttle(() => {
+            /* istanbul ignore next */
+            if (!this.countdownStarted) {
+                this.restartTimeout();
+            }
+        }, 61000);
+
+        window.onmousedown = this.throttle(() => {
+            /* istanbul ignore next */
+            if (!this.countdownStarted) {
+                this.restartTimeout();
+            }
+        }, 61000);
+
+        window.onscroll = this.throttle(() => {
+            /* istanbul ignore next */
+            if (!this.countdownStarted) {
+                this.restartTimeout();
+            }
+        }, 61000);
+
+        window.onkeypress = this.throttle(() => {
+            /* istanbul ignore next */
+            if (!this.countdownStarted) {
+                this.restartTimeout();
+            }
+        }, 61000);
+
+        window.onkeyup = this.throttle(() => {
+            /* istanbul ignore next */
+            if (!this.countdownStarted) {
+                this.restartTimeout();
+            }
+        }, 61000);
+    }
 
-  clearTimers() {
-    for (let i = 0; i < this.timers.length; i++) {
-      clearTimeout(this.timers[i]);
+    throttle(func, wait) {
+        let waiting = false;
+        return function () {
+            if (waiting) {
+                return;
+            }
+            waiting = true;
+            setTimeout(async () => {
+                func.apply(this, arguments);
+                waiting = false;
+            }, wait);
+        };
     }
-  }
-
-  addThrottledResetEvents() {
-    window.onclick = this.throttle(() => {
-      /* istanbul ignore next */
-      if (!this.countdownStarted) {
-        this.restartTimeout();
-      }
-    }, 61000);
-
-    window.onmousemove = this.throttle(() => {
-      /* istanbul ignore next */
-      if (!this.countdownStarted) {
-        this.restartTimeout();
-      }
-    }, 61000);
-
-    window.onmousedown = this.throttle(() => {
-      /* istanbul ignore next */
-      if (!this.countdownStarted) {
-        this.restartTimeout();
-      }
-    }, 61000);
-
-    window.onscroll = this.throttle(() => {
-      /* istanbul ignore next */
-      if (!this.countdownStarted) {
-        this.restartTimeout();
-      }
-    }, 61000);
-
-    window.onkeypress = this.throttle(() => {
-      /* istanbul ignore next */
-      if (!this.countdownStarted) {
-        this.restartTimeout();
-      }
-    }, 61000);
-
-    window.onkeyup = this.throttle(() => {
-      /* istanbul ignore next */
-      if (!this.countdownStarted) {
-        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/layout/_template.njk

@@ -14,7 +14,7 @@
 {% if pageConfig.cdn or release_version or designSystemVersion %}
     {# Production #}
     {% set cdn_url = (pageConfig.cdn.url if pageConfig.cdn and pageConfig.cdn.url) or "https://cdn.ons.gov.uk/sdc/design-system" %}
-    {% set slash = "" if cdn_url | last == "/" else 
+    {% set slash = "" if cdn_url | last == "/" else
         "/" %}
     {% set assetsURL = cdn_url + slash + ((pageConfig.cdn.version if pageConfig.cdn and pageConfig.cdn.version) or release_version or designSystemVersion) %}
 {% elif pageConfig.assetsURL %}
@@ -44,11 +44,11 @@
 
 {# Page columns #}
 {% set pageColNumber = pageConfig.pageColNumber | default("12") %}
-{% set pageColClasses = pageConfig.pageColClasses if pageConfig.pageColClasses else 
+{% set pageColClasses = pageConfig.pageColClasses if pageConfig.pageColClasses else
     '' %}
-{% set mainClasses = pageConfig.mainColClasses if pageConfig.mainColClasses else 
+{% set mainClasses = pageConfig.mainColClasses if pageConfig.mainColClasses else
     '' %}
-{% set themeColor = pageConfig.themeColor if pageConfig.themeColor else 
+{% set themeColor = pageConfig.themeColor if pageConfig.themeColor else
     "#206095" %}
 <!doctype html>
 <html lang="{{ currentLanguageISOCode }}">
@@ -95,7 +95,7 @@
             {% endif %}
 
             {% if pageConfig.social %}
-                {% set twitterImagePath = pageConfig.social.twitterImage if pageConfig.social.twitterImage else 
+                {% set twitterImagePath = pageConfig.social.twitterImage if pageConfig.social.twitterImage else
                     assetsURL + '/favicons/twitter.png' %}
                 <!-- Twitter -->
                 <meta name="twitter:card" content="summary">
@@ -147,7 +147,6 @@
                                 "siteSearchAutosuggest": pageConfig.header.siteSearchAutosuggest,
                                 "browserBanner": pageConfig.header.browserBanner,
                                 "phase": pageConfig.header.phase,
-                                "assetsURL": assetsURL,
                                 "serviceLinks": pageConfig.header.serviceLinks,
                                 "variants": pageConfig.header.variants,
                                 "classes": pageConfig.header.classes,
@@ -190,7 +189,6 @@
                     {% if pageConfig.footer %}
                         {{
                             onsFooter({
-                                "assetsURL": assetsURL,
                                 "wide": pageConfig.wide,
                                 "fullWidth": pageConfig.fullWidth,
                                 "classes": "ons-page__footer",