@ons/design-system 45.2.1 → 46.1.0

package/components/address-input/autosuggest.address.js

@@ -74,81 +74,68 @@ export default class AutosuggestAddress {
     this.checkAPIStatus();
   }
 
-  checkAPIStatus() {
+  async checkAPIStatus() {
     this.fetch = abortableFetch(this.lookupURL + 'CF142&limit=10', {
       method: 'GET',
       headers: this.setAuthorization(this.authorizationToken),
     });
-    this.fetch
-      .send()
-      .then(async response => {
-        const status = (await response.json()).status.code;
-        if (status > 400) {
-          if (this.isEditable) {
-            this.handleAPIError();
-          } else {
-            this.autosuggest.handleNoResults(status);
-          }
-        }
-      })
-      .catch(error => {
-        console.log(error);
+    try {
+      const response = await this.fetch.send();
+      const status = (await response.json()).status.code;
+      if (status > 400) {
         if (this.isEditable) {
           this.handleAPIError();
         } else {
           this.autosuggest.handleNoResults(status);
         }
-      });
+      }
+    } catch (error) {
+      console.log(error);
+      if (this.isEditable) {
+        this.handleAPIError();
+      } else {
+        this.autosuggest.handleNoResults(status);
+      }
+    }
   }
 
-  suggestAddresses(query, [], grouped) {
-    return new Promise((resolve, reject) => {
-      if (this.fetch && this.fetch.status !== 'DONE') {
-        this.fetch.abort();
-      }
+  async suggestAddresses(query, [], grouped) {
+    if (this.fetch && this.fetch.status !== 'DONE') {
+      this.fetch.abort();
+    }
 
-      this.reject = reject;
-      this.findAddress(query, grouped)
-        .then(resolve)
-        .catch(reject);
-    });
+    return await this.findAddress(query, grouped);
   }
 
-  findAddress(text, grouped) {
-    return new Promise((resolve, reject) => {
-      let queryURL, fullQueryURL;
+  async findAddress(text, grouped) {
+    let queryURL, fullQueryURL;
 
-      if (this.manualQueryParams) {
-        const manualQueryParams = this.container.getAttribute('data-query-params');
-        fullQueryURL = this.lookupURL + text + manualQueryParams;
-      } else {
-        const fullPostcodeQuery = this.testFullPostcodeQuery(text);
-        let limit = fullPostcodeQuery ? 100 : 10;
+    if (this.manualQueryParams) {
+      const manualQueryParams = this.container.getAttribute('data-query-params');
+      fullQueryURL = this.lookupURL + text + manualQueryParams;
+    } else {
+      const fullPostcodeQuery = this.testFullPostcodeQuery(text);
+      let limit = fullPostcodeQuery ? 100 : 10;
 
-        queryURL = grouped ? this.lookupGroupURL + this.groupQuery : this.lookupURL + text + '&limit=' + limit;
+      queryURL = grouped ? this.lookupGroupURL + this.groupQuery : this.lookupURL + text + '&limit=' + limit;
 
-        fullQueryURL = this.generateURLParams(queryURL);
-        if (fullPostcodeQuery && grouped !== false) {
-          fullQueryURL = fullQueryURL + '&groupfullpostcodes=combo';
-        }
+      fullQueryURL = this.generateURLParams(queryURL);
+      if (fullPostcodeQuery && grouped !== false) {
+        fullQueryURL = fullQueryURL + '&groupfullpostcodes=combo';
       }
+    }
 
-      this.fetch = abortableFetch(fullQueryURL, {
-        method: 'GET',
-        headers: this.setAuthorization(this.authorizationToken),
-      });
-      this.fetch
-        .send()
-        .then(async data => {
-          const response = await data.json();
-          const status = response.status.code;
-          const addresses = response.response;
-          const limit = response.response.limit;
-          const results = await this.mapFindResults(addresses, limit, status);
-          resolve(results);
-        })
-        .catch(reject);
+    this.fetch = abortableFetch(fullQueryURL, {
+      method: 'GET',
+      headers: this.setAuthorization(this.authorizationToken),
     });
+    const data = await this.fetch.send();
+    const response = await data.json();
+    const status = response.status.code;
+    const addresses = response.response;
+    const limit = response.response.limit;
+    const results = await this.mapFindResults(addresses, limit, status);
+    return results;
   }
 
   async mapFindResults(results, limit, status) {
@@ -262,75 +249,66 @@ export default class AutosuggestAddress {
     }
   }
 
-  retrieveAddress(id, type = null) {
-    return new Promise((resolve, reject) => {
-      let retrieveUrl = this.retrieveURL + id;
-
-      const fullUPRNURL = this.generateURLParams(retrieveUrl, id, type);
+  async retrieveAddress(id, type = null) {
+    let retrieveUrl = this.retrieveURL + id;
 
-      this.fetch = abortableFetch(fullUPRNURL, {
-        method: 'GET',
-        headers: this.setAuthorization(this.authorizationToken),
-      });
+    const fullUPRNURL = this.generateURLParams(retrieveUrl, id, type);
 
-      this.fetch
-        .send()
-        .then(async response => {
-          const data = await response.json();
-          resolve(data);
-        })
-        .catch(reject);
+    this.fetch = abortableFetch(fullUPRNURL, {
+      method: 'GET',
+      headers: this.setAuthorization(this.authorizationToken),
     });
+
+    const response = await this.fetch.send();
+    const data = await response.json();
+    return data;
   }
 
-  onAddressSelect(selectedResult) {
-    return new Promise((resolve, reject) => {
-      if (selectedResult.uprn) {
-        this.retrieveAddress(selectedResult.uprn, selectedResult.type)
-          .then(data => {
-            if (this.isEditable) {
-              if (data.status.code >= 403) {
-                this.autosuggest.handleNoResults(403);
-              } else {
-                this.addressSetter.setAddress(this.createAddressLines(data, resolve));
-                this.addressSelected = true;
-              }
-            } else {
-              this.selectedAddressValue = selectedResult.displayText;
-              this.autosuggest.input.value = selectedResult.displayText;
-              this.uprn.value = selectedResult.uprn;
-              this.addressSelected = true;
-            }
-          })
-          .catch(error => {
-            console.log(error);
-            if (this.isEditable) {
-              this.handleAPIError();
-            } else {
-              this.autosuggest.handleNoResults(403);
-            }
-            reject();
-          });
-      } else if (selectedResult.postcode) {
-        this.autosuggest.input.value =
-          selectedResult.streetName +
-          ', ' +
-          (selectedResult.townName === selectedResult.postTown
-            ? selectedResult.postTown
-            : selectedResult.townName + ', ' + selectedResult.postTown) +
-          ', ' +
-          selectedResult.postcode;
-        this.autosuggest.input.focus();
-        this.groupQuery =
-          'postcode=' + selectedResult.postcode + '&streetname=' + selectedResult.streetName + '&townname=' + selectedResult.townName;
-        this.autosuggest.handleChange(true);
+  async onAddressSelect(selectedResult) {
+    if (selectedResult.uprn) {
+      try {
+        const data = await this.retrieveAddress(selectedResult.uprn, selectedResult.type);
+        if (this.isEditable) {
+          if (data.status.code >= 403) {
+            this.autosuggest.handleNoResults(403);
+          } else {
+            this.addressSetter.setAddress(this.createAddressLines(data));
+            this.addressSelected = true;
+          }
+        } else {
+          this.selectedAddressValue = selectedResult.displayText;
+          this.autosuggest.input.value = selectedResult.displayText;
+          this.uprn.value = selectedResult.uprn;
+          this.addressSelected = true;
+        }
+      } catch (error) {
+        console.log(error);
+        if (this.isEditable) {
+          this.handleAPIError();
+        } else {
+          this.autosuggest.handleNoResults(403);
+        }
+        throw error;
       }
-    });
+    } else if (selectedResult.postcode) {
+      this.autosuggest.input.value =
+        selectedResult.streetName +
+        ', ' +
+        (selectedResult.townName === selectedResult.postTown
+          ? selectedResult.postTown
+          : selectedResult.townName + ', ' + selectedResult.postTown) +
+        ', ' +
+        selectedResult.postcode;
+      this.autosuggest.input.focus();
+      this.groupQuery =
+        'postcode=' + selectedResult.postcode + '&streetname=' + selectedResult.streetName + '&townname=' + selectedResult.townName;
+      this.autosuggest.handleChange(true);
+    }
   }
 
-  createAddressLines(data, resolve) {
+  createAddressLines(data) {
     const values = data.response.address;
-    const addressLines = {
+    return {
       addressLine1: values.addressLine1,
       addressLine2: values.addressLine2,
       addressLine3: values.addressLine3,
@@ -338,9 +316,6 @@ export default class AutosuggestAddress {
       postcode: values.postcode,
       uprn: values.uprn,
     };
-    resolve();
-
-    return addressLines;
   }
 
   generateURLParams(baseURL, uprn, type) {

package/components/autosuggest/autosuggest.js

@@ -14,19 +14,11 @@ export default class Autosuggest {
     });
   }
 
-  onSelect(result) {
-    return new Promise(resolve => {
-      this.autosuggest.input.value = result.displayText;
-
-      resolve();
-    });
+  async onSelect(result) {
+    this.autosuggest.input.value = result.displayText;
   }
 
-  onUnsetResult() {
-    return new Promise(resolve => {
-      resolve();
-    });
-  }
+  async onUnsetResult() {}
 
   onError(error) {
     console.error(error);

package/components/autosuggest/autosuggest.ui.js

@@ -120,17 +120,10 @@ export default class AutosuggestUI {
     this.bindEventListeners();
   }
 
-  fetchData() {
+  async fetchData() {
     this.fetch = abortableFetch(this.autosuggestData);
-    return new Promise((resolve, reject) => {
-      this.fetch
-        .send()
-        .then(async response => {
-          this.data = await response.json();
-          resolve(this.data);
-        })
-        .catch(reject);
-    });
+    const response = await this.fetch.send();
+    this.data = await response.json();
   }
 
   bindEventListeners() {

package/components/footer/_footer.scss

@@ -42,4 +42,10 @@
       min-height: 1.5rem;
     }
   }
+
+  &--rows {
+    li {
+      margin-bottom: 0.5rem !important;
+    }
+  }
 }

package/components/footer/_macro.njk

@@ -163,6 +163,7 @@
                             <div class="ons-grid__col">
                                 {{
                                     onsList({
+                                        "classes": "ons-footer--rows",
                                         "variants": ["bare", "inline"],
                                         "itemsList": row.itemsList
                                     })
@@ -227,7 +228,7 @@
                                 <div class="ons-grid__col">
                                     {{
                                         onsList({
-                                            "classes": 'ons-u-mb-m',
+                                            "classes": 'ons-u-mb-m ons-footer--rows',
                                             "variants": ['bare', 'inline'],
                                             "itemsList": legal.itemsList
                                         })

package/components/lists/_macro.njk

@@ -13,23 +13,18 @@
         {% set otherClasses = '' %}
     {% endif %}
 
-    {% if params.element is defined and params.element %}
+    {% if params.element is defined and params.element and listLength > 1 %}
         {% set listEl = params.element | lower %}
+    {% elif (params.element is defined and params.element == 'ol') and listLength < 2 %}
+        {% set listEl = 'p' %}
     {% else %}
         {% set listEl = 'ul' %}
     {% endif %}
-
-    {% if (params.element is defined and params.element == 'ol') and listLength < 2 %}
-        <p {% if params.id is defined and params.id %}id="{{ params.id }}"{% endif %}{% if params.classes is defined and params.classes %} class="{{ params.classes -}}"{% endif %}>
-            {%- for item in params.itemsList -%}
-                {{ item.text }}
-            {%- endfor -%}
-        </p>
-    {% else %}
-        <{{listEl}} {% if params.id is defined and params.id %}id="{{ params.id }}"{% endif %}class="{% if listLength > 1 %}ons-list{% endif %}{% if params.classes is defined and params.classes %} {{ params.classes -}}{% endif %}{% if params.variants is defined and params.variants %}{% if params.variants is not string %}{% for variant in params.variants %} ons-list--{{ variant }}{% endfor %}{% else %} ons-list--{{ params.variants }}{% endif %}{% endif %}{% if otherClasses %} {{ otherClasses -}}{% endif %}">
+        <{{listEl}} {% if params.id is defined and params.id %}id="{{ params.id }}"{% endif %}class="{% if listLength > 1 or listEl == 'ul' %}ons-list{% else %}ons-list--p{% endif %}{% if params.classes is defined and params.classes %} {{ params.classes -}}{% endif %}{% if params.variants is defined and params.variants %}{% if params.variants is not string %}{% for variant in params.variants %} ons-list--{{ variant }}{% endfor %}{% else %} ons-list--{{ params.variants }}{% endif %}{% endif %}{% if otherClasses %} {{ otherClasses -}}{% endif %}">
             {%- for item in (params.itemsList if params.itemsList is iterable else params.itemsList.items()) -%}
+                {% if listLength > 1 or listEl == 'ul' %}
                 <li class="ons-list__item{% if item.listClasses is defined and item.listClasses %} {{ item.listClasses }}{% endif %}"{% if item.current is defined and item.current %} aria-current="true"{% endif %}>
-
+                {% endif %}
                     {% set itemText = item.text %}
 
                     {% if params.itemsList[0] is defined and item.iconType is defined and item.iconType %}
@@ -94,8 +89,9 @@
                             }}
                         {%- endif -%} </span>
                     {%- endif -%}
+                {% if listLength > 1 or listEl == 'ul' %}
                 </li>
+                {% endif %}
             {%- endfor -%}
         </{{listEl}}>
-    {% endif %}
 {% endmacro %}

package/components/modal/_macro.njk

@@ -1,4 +1,4 @@
-{% macro onsModal(params) %}    
+{% macro onsModal(params) %}
     {% set modalID = params.id | default('dialog') %}
     <dialog class="ons-modal ons-js-modal {{ params.classes }}"
         id="{{ modalID }}"

package/components/panel/_macro.njk

@@ -29,6 +29,8 @@
     {% if params is defined and params and params.type == "warn-branded" or params.type == "announcement" %}
     <div class="{{containerClass}}">
         <div class="ons-container">
+    {% elif params.type is defined and params.type == "warn" %}
+        <div class="ons-container">
     {% endif %}
 
         <div {% if params is defined and params and params.type == 'error' and params.title is defined and params.title %}aria-labelledby="error-summary-title" role="alert" tabindex="-1" {% if params.dsExample != true %}autofocus="autofocus" {% endif %}{% endif %}class="ons-panel{{ typeClass }}{{ iconClass }}{{ noTitleClass }}{{ spaciousClass }}{{ classes }}"{% if params is defined and params and params.attributes is defined and params.attributes %}{% for attribute, value in (params.attributes.items() if params is defined and params and params.attributes is mapping and params.attributes.items is defined and params.attributes.items else params.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}{% if params is defined and params and params.id is defined and params.id %} id="{{params.id}}"{% endif %}>
@@ -86,7 +88,7 @@
                 {% endif %}
             {% endif %}
 
-            <div class="ons-panel__body{% if params is defined and params and params.iconSize is defined and params.iconSize %} ons-svg-icon-margin--{{ params.iconSize }}{% endif %}" {% if params is defined and params and params.attributes is defined and params.attributes %}{% for attribute, value in (params.attributes.items() if params is defined and params and params.attributes is mapping and params.attributes.items is defined and params.attributes.items else params.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}>{{ (params.body if params else "") | safe }}
+            <div class="ons-panel__body{% if params is defined and params and params.iconSize is defined and params.iconSize %} ons-svg-icon-margin--{{ params.iconSize }}{% endif %}">{{ (params.body if params else "") | safe }}
                 {{ caller() if caller }}
             </div>
 
@@ -95,6 +97,8 @@
     {% if params is defined and params and params.type == "warn-branded" or params.type == "announcement"  %}
         </div>
     </div>
+    {% elif params.type is defined and params.type == "warn" %}
+    </div>
     {% endif %}
 
 {% endmacro %}

package/components/panel/_panel.scss

@@ -47,6 +47,10 @@
     padding: 0.75rem 1rem;
   }
 
+  &__timer {
+    white-space: nowrap;
+  }
+
   &__title {
     margin: 0;
   }

package/components/timeout-modal/_macro.njk

@@ -1,5 +1,5 @@
 {% from "components/modal/_macro.njk" import onsModal %}
-{% macro onsTimeoutModal(params) %}    
+{% macro onsTimeoutModal(params) %}
     {% call onsModal({
             "title": params.title,
             "btnText": params.btnText,
@@ -10,11 +10,12 @@
                 "data-show-modal-time": params.showModalTimeInSeconds,
                 "data-server-session-expiry-endpoint": params.serverSessionExpiryEndpoint,
                 "data-countdown-text": params.countdownText,
-                "data-redirecting-text": params.redirectingText,
+                "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"
             }
         })

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

@@ -4,12 +4,12 @@ async function modals() {
   const timeouts = [...document.querySelectorAll('.ons-js-timeout-modal')];
 
   if (timeouts.length) {
-    const Timeout = (await import('./timeout')).default;
+    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 Timeout(context, url, time);
+      new TimeoutModal(context, url, time);
     });
   }
 }

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

@@ -0,0 +1,62 @@
+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;
+
+    // Create modal instance
+    this.modal = new Modal(this.context);
+
+    // Create timeout instance
+    this.timeout = new Timeout(this.context, this.sessionExpiryEndpoint, this.initialExpiryTime, true);
+
+    this.bindEventListeners();
+  }
+
+  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.expiryTimeInMilliseconds = this.timeout.convertTimeToMilliSeconds(this.initialExpiryTime);
+    } else {
+      // For demo purposes
+      this.expiryTimeInMilliseconds = 60000;
+    }
+    this.showModalTimeout = setTimeout(
+      this.openModalAndStartCountdown.bind(this),
+      this.expiryTimeInMilliseconds - this.modalVisibleInMilliseconds,
+    );
+  }
+
+  async openModalAndStartCountdown() {
+    const modalWillOpen = await this.timeout.hasExpiryTimeResetInAnotherTab();
+    if (modalWillOpen && !this.modal.isDialogOpen()) {
+      this.modal.openDialog();
+      this.timeout.startUiCountdown();
+    }
+  }
+
+  closeModalAndRestartTimeout() {
+    if (this.modal.isDialogOpen()) {
+      this.modal.closeDialog();
+    }
+    this.timeout.restartTimeout();
+    this.startTimeout();
+  }
+
+  escToClose(event) {
+    if (this.modal.isDialogOpen() && event.keyCode === 27) {
+      this.closeModalAndRestartTimeout();
+    }
+  }
+}

package/components/timeout-panel/_macro.njk

@@ -0,0 +1,26 @@
+{% from "components/panel/_macro.njk" import onsPanel %}
+{% macro onsTimeoutPanel(params) %}
+    {% call onsPanel({
+            "id": params.id,
+            "classes": "ons-js-panel-with-countdown",
+            "type": "warn",
+            "attributes": {
+                "data-redirect-url": params.redirectUrl,
+                "data-server-session-expires-at": params.sessionExpiresAt,
+                "data-server-session-expiry-endpoint": params.serverSessionExpiryEndpoint,
+                "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>
+    {% endcall %}
+{% endmacro %}

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

@@ -0,0 +1,17 @@
+import domready from '../../js/domready';
+
+async function timeoutPanels() {
+  const panels = [...document.querySelectorAll('.ons-js-panel-with-countdown')];
+
+  if (panels.length) {
+    const Timeout = (await import('../../js/timeout')).default;
+
+    panels.forEach(context => {
+      let url = context.getAttribute('data-server-session-expiry-endpoint');
+      let time = context.getAttribute('data-server-session-expires-at');
+      new Timeout(context, url, time, false, true);
+    });
+  }
+}
+
+domready(timeoutPanels);