@ons/design-system 45.2.2 → 46.0.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 %}