@ons/design-system 45.2.1 → 46.1.0

package/js/abortable-fetch.js

@@ -6,28 +6,20 @@ class AbortableFetch {
     this.status = 'UNSENT';
   }
 
-  send() {
+  async send() {
     this.status = 'LOADING';
-
-    return new Promise((resolve, reject) => {
-      abortableFetch(this.url, { signal: this.controller.signal, ...this.options })
-        .then(response => {
-          if (response.status >= 200 && response.status < 300) {
-            this.status = 'DONE';
-            resolve(response);
-          } else if (response.status >= 400) {
-            this.status = 'DONE';
-            resolve(response);
-          } else {
-            this.status = 'DONE';
-            reject(response);
-          }
-        })
-        .catch(error => {
-          this.status = 'undefined';
-          reject(error);
-        });
-    });
+    try {
+      const response = await window.fetch(this.url, { signal: this.controller.signal, ...this.options });
+      const isResponseOK = (response.status >= 200 && response.status < 300) || response.status >= 400;
+      if (!isResponseOK) {
+        const error = new Error(`HTTP error! status: ${response.status}`);
+        error.response = response;
+        throw error;
+      }
+      return response;
+    } finally {
+      this.status = 'DONE';
+    }
   }
 
   abort() {
@@ -35,21 +27,4 @@ class AbortableFetch {
   }
 }
 
-function abortableFetch(url, options) {
-  return window
-    .fetch(url, options)
-    .then(response => {
-      if (response) {
-        return response;
-      } else {
-        const error = new Error(response.status);
-        error.response = response;
-        throw error;
-      }
-    })
-    .catch(error => {
-      throw error;
-    });
-}
-
 export default (url, options) => new AbortableFetch(url, options);

package/js/main.js

@@ -24,4 +24,5 @@ import '../components/skip-to-content/skip-to-content.dom';
 import '../components/download-resources/download-resources';
 import '../components/select/select';
 import '../components/modal/modal.dom';
-import '../components/timeout-modal/timeout.dom';
+import '../components/timeout-modal/timeout-modal.dom';
+import '../components/timeout-panel/timeout-panel.dom';

package/{components/timeout-modal → js}/timeout.js

@@ -1,15 +1,13 @@
-import Modal from '../modal/modal';
-
 export default class Timeout {
-  constructor(context, url, time) {
+  constructor(context, sessionExpiryEndpoint, initialExpiryTime, enableTimeoutReset, startOnLoad) {
     this.context = context;
-    this.sessionExpiryEndpoint = url;
-    this.initialExpiryTime = time;
-    this.continueButton = context.querySelector('.ons-js-modal-btn');
+    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');
-    this.modalVisibleInMilliseconds = context.getAttribute('data-show-modal-time') * 1000;
 
     // Language dependent text strings
     this.minutesTextSingular = context.getAttribute('data-minutes-text-singular');
@@ -17,17 +15,15 @@ export default class Timeout {
     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');
+    this.countdownExpiredText = context.getAttribute('data-countdown-expired-text');
+    this.endWithFullStop = context.getAttribute('data-full-stop');
 
     // Settings
-    this.expiryTimeInMilliseconds = 0;
     this.expiryTime = '';
-    this.showModalTimeout = null;
+    this.expiryTimeInMilliseconds = 0;
     this.timers = [];
     this.timerRunOnce = false;
-
-    // Create modal instance
-    this.modal = new Modal(this.context);
+    this.countdownStarted = false;
 
     // Start module
     this.initialise();
@@ -39,43 +35,31 @@ export default class Timeout {
     } else {
       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);
-  }
+    if (this.enableTimeoutReset) {
+      this.addThrottledResetEvents();
+    }
 
-  async openModal() {
-    const modalWillOpen = await this.hasExpiryTimeResetInAnotherTab();
-    if (modalWillOpen && !this.modal.isDialogOpen()) {
-      this.modal.openDialog();
+    if (this.startOnLoad) {
       this.startUiCountdown();
     }
+
+    window.addEventListener('focus', this.handleWindowFocus.bind(this));
   }
 
   async startUiCountdown() {
     this.clearTimers();
-    clearInterval(this.shouldModalCloseCheck);
+    this.countdownStarted = true;
 
-    this.shouldModalCloseCheck = setInterval(async () => {
-      await this.hasExpiryTimeResetInAnotherTab();
-    }, 20000);
+    if (this.enableTimeoutReset) {
+      this.shouldRestartCheck = setInterval(async () => {
+        await this.hasExpiryTimeResetInAnotherTab();
+      }, 20000);
+    }
 
-    let millseconds = this.modalVisibleInMilliseconds;
-    let seconds = millseconds / 1000;
+    let milliseconds = this.convertTimeToMilliSeconds(this.expiryTime);
+    let seconds = milliseconds / 1000;
     let timers = this.timers;
     let $this = this;
 
@@ -95,14 +79,15 @@ export default class Timeout {
         (minutesLeft > 0 ? minutesText : '') +
         (minutesLeft > 0 && secondsLeft > 0 ? ' ' : '') +
         (secondsLeft > 0 ? secondsText : '') +
-        '</span>.';
+        '</span>' +
+        ($this.endWithFullStop ? '.' : '');
 
       if (timerExpired) {
-        const shouldExpire = await $this.hasExpiryTimeResetInAnotherTab();
+        const shouldExpire = this.enableTimeoutReset ? await $this.hasExpiryTimeResetInAnotherTab() : true;
 
         if (shouldExpire) {
-          $this.countdown.innerHTML = '<span class="ons-u-fw-b">' + $this.redirectingText + '</span>';
-          $this.accessibleCountdown.innerHTML = $this.redirectingText;
+          $this.countdown.innerHTML = '<span class="ons-u-fw-b">' + $this.countdownExpiredText + '</span>';
+          $this.accessibleCountdown.innerHTML = $this.countdownExpiredText;
           setTimeout($this.redirect.bind($this), 2000);
         }
       } else {
@@ -132,25 +117,16 @@ export default class Timeout {
     if (checkExpiryTime != this.expiryTime) {
       this.expiryTime = checkExpiryTime;
       this.expiryTimeInMilliseconds = this.convertTimeToMilliSeconds(checkExpiryTime);
-      this.closeModalAndRestartTimeout(this.expiryTimeInMilliseconds);
+      this.restartTimeout(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);
+    clearInterval(this.shouldRestartCheck);
+    this.countdownStarted = false;
 
     if (timeInMilliSeconds) {
       this.expiryTimeInMilliseconds = timeInMilliSeconds;
@@ -159,26 +135,13 @@ export default class Timeout {
       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 {
-        const newExpiryTimeInMilliseconds = this.convertTimeToMilliSeconds(canSetNewExpiry).toString();
-        this.closeModalAndRestartTimeout(newExpiryTimeInMilliseconds);
-      }
-    }
-  }
-
-  escToClose(event) {
-    if (this.modal.isDialogOpen() && event.keyCode === 27) {
-      this.closeModalAndRestartTimeout();
-    }
+    this.expiryTime = await this.getExpiryTime();
+    this.clearTimers();
+    clearInterval(this.shouldRestartCheck);
+    this.startUiCountdown();
   }
 
   async setNewExpiryTime() {
@@ -235,45 +198,45 @@ export default class Timeout {
     }
   }
 
-  addThrottledEvents() {
+  addThrottledResetEvents() {
     window.onclick = this.throttle(() => {
       /* istanbul ignore next */
-      if (!this.modal.isDialogOpen()) {
+      if (!this.countdownStarted) {
         this.restartTimeout();
       }
     }, 61000);
 
     window.onmousemove = this.throttle(() => {
       /* istanbul ignore next */
-      if (!this.modal.isDialogOpen()) {
+      if (!this.countdownStarted) {
         this.restartTimeout();
       }
     }, 61000);
 
     window.onmousedown = this.throttle(() => {
       /* istanbul ignore next */
-      if (!this.modal.isDialogOpen()) {
+      if (!this.countdownStarted) {
         this.restartTimeout();
       }
     }, 61000);
 
     window.onscroll = this.throttle(() => {
       /* istanbul ignore next */
-      if (!this.modal.isDialogOpen()) {
+      if (!this.countdownStarted) {
         this.restartTimeout();
       }
     }, 61000);
 
     window.onkeypress = this.throttle(() => {
       /* istanbul ignore next */
-      if (!this.modal.isDialogOpen()) {
+      if (!this.countdownStarted) {
         this.restartTimeout();
       }
     }, 61000);
 
     window.onkeyup = this.throttle(() => {
       /* istanbul ignore next */
-      if (!this.modal.isDialogOpen()) {
+      if (!this.countdownStarted) {
         this.restartTimeout();
       }
     }, 61000);

package/layout/_template.njk

@@ -18,8 +18,6 @@
     {% set metaicons = "" %}
 {% endif %}
 
-{% set pageColNumber = pageConfig.pageColNumber | default("8") %}
-
 {% if pageConfig.cdn is defined and pageConfig.cdn or release_version is defined and release_version %}
     {# Production #}
     {% set cdn_url = (pageConfig.cdn.url if pageConfig.cdn is defined and pageConfig.cdn and pageConfig.cdn.url is defined and pageConfig.cdn.url) or "https://cdn.ons.gov.uk/sdc/design-system" %}
@@ -44,6 +42,21 @@
     {% set page_title = "ONS Design System" %}
 {% endif %}
 
+{# Page columns #}
+{% set mainColNumber = "8" %}
+
+{% if pageConfig.mainCol is defined and pageConfig.mainCol %}
+    {% set mainColNumber = pageConfig.mainCol.columns if pageConfig.mainCol.columns is defined and pageConfig.mainCol.columns %}
+    {% set mainColClasses = (' ' + pageConfig.mainCol.colClasses) if pageConfig.mainCol.colClasses is defined and pageConfig.mainCol.colClasses %}
+    {% set mainClasses = (' ' + pageConfig.mainCol.classes) if pageConfig.mainCol.classes is defined and pageConfig.mainCol.classes %}
+{% endif %}
+
+{% if pageConfig.asideCol is defined and pageConfig.asideCol %}
+    {% set asideColNumber = 12 - mainColNumber if pageConfig.asideCol.position is defined and pageConfig.asideCol.position %}
+    {% set asideColClasses = (' ' + pageConfig.asideCol.colClasses) if pageConfig.asideCol.colClasses is defined and pageConfig.asideCol.colClasses %}
+    {% set asideClasses = (' ' + pageConfig.asideCol.classes) if pageConfig.asideCol.classes is defined and pageConfig.asideCol.classes %}
+{% endif %}
+
 <!doctype html>
 <html lang="{{ currentLanguageISOCode }}">
     <head>
@@ -169,11 +182,26 @@
                             {% endif %}
                             {% block preMain %}{% endblock %}
                             <div class="ons-grid">
-                                <div class="ons-grid__col ons-col-{{ pageColNumber }}@m">
-                                    <main id="main-content" class="ons-page__main {{ pageClasses }}">
+                                {% if pageConfig.asideCol is defined and pageConfig.asideCol %}
+                                    {% set aside %}
+                                        <div class="ons-grid__col ons-col-{{ asideColNumber }}@m{{ asideColClasses }}">
+                                            <aside {% if pageConfig.asideCol.id is defined and pageConfig.asideCol.id %}id="{{ asideId }}" {% endif %}class="ons-page__aside{{ asideClasses }}">
+                                                {% block aside %}{% endblock %}
+                                            </aside>
+                                        </div>
+                                    {% endset %}
+                                {% endif %}
+                                {% if pageConfig.asideCol.position is defined and pageConfig.asideCol.position == "before" %}
+                                    {{ aside | safe }}
+                                {% endif %}
+                                <div class="ons-grid__col ons-col-{{ mainColNumber }}@m{{ mainColClasses }}">
+                                    <main id="main-content" class="ons-page__main{{ mainClasses }}">
                                         {% block main %}{% endblock %}
                                     </main>
                                 </div>
+                                {% if pageConfig.asideCol.position is defined and pageConfig.asideCol.position == "after" %}
+                                    {{ aside | safe }}
+                                {% endif %}
                             </div>
                         </div>
                     {% endblock %}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ons/design-system",
   "description": "ONS Design System built CSS, JS, and Nunjucks templates",
-  "version": "45.2.1",
+  "version": "46.1.0",
   "main": "index.js",
   "license": "MIT",
   "author": {