@ons/design-system 45.2.0 → 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/button/_button.scss

@@ -62,7 +62,7 @@ $button-shadow-size: 3px;
     margin-left: 0.5rem;
   }
 
-  // When focussed
+  // When focused
   &:focus & {
     outline: 3px solid transparent;
   }

package/components/button/_macro.njk

@@ -29,9 +29,12 @@
             {% set iconType = "loader" %}
             {% set iconPosition = "after" %}
         {# CTA or mobile menu toggle #}
-        {% elif params.url is defined and params.url or params.buttonStyle is defined and params.buttonStyle == "mobile" %}
+        {% elif params.buttonStyle is defined and params.buttonStyle == "mobile" %}
             {% set iconType = "chevron" %}
             {% set iconPosition = "after" %}
+        {% elif params.url is defined and params.url %}
+            {% set iconType = "arrow-next" %}
+            {% set iconPosition = "after" %}
         {% endif %}
     {% endif %}
 

package/components/fieldset/_macro.njk

@@ -1,39 +1,41 @@
 {% from "components/error/_macro.njk" import onsError %}
 
 {% macro onsFieldset(params) %}
-    {% set fieldset %}
-        {% if params.dontWrap is defined and params.dontWrap %}
+    {% set fieldset -%}
+        {% if params.dontWrap is defined and params.dontWrap -%}
             <div class="ons-input-items">
-                {{ caller() }}
+                {{- caller() -}}
             </div>
-        {% elif (params.legend is defined and params.legend) or (params.legendIsQuestionTitle is defined and params.legendIsQuestionTitle) %}
+        {%- elif (params.legend is defined and params.legend) or (params.legendIsQuestionTitle is defined and params.legendIsQuestionTitle) -%}
             <fieldset
                 {% if params.id is defined and params.id %}id="{{ params.id }}"{% endif %}
                 class="ons-fieldset{% if params.classes is defined and params.classes %} {{ params.classes }}{% endif %}"
                 {% 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 }}{% if value is defined and value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
             >
                 <legend class="ons-fieldset__legend{% if params.legendIsQuestionTitle is defined and params.legendIsQuestionTitle %} ons-u-mb-no{% endif %}{% if params.legendClasses is defined and params.legendClasses %} {{ params.legendClasses }}{% endif %}">
-                    {% if params.legendIsQuestionTitle %}
+                    {%- if params.legendIsQuestionTitle -%}
                         <h1 id="fieldset-legend-title" class="ons-fieldset__legend-title ons-u-mb-m{% if params.legendTitleClasses is defined and params.legendTitleClasses %} {{ params.legendTitleClasses }}{% endif %}">
                             {{- params.legend | safe -}}
                         </h1>
-                    {% else %}
+                    {%- else -%}
                         {{- params.legend | safe -}}
-                    {% endif %}
-                    {% if params.description is defined and params.description %}
-                        <div class="ons-fieldset__description{% if params.legendIsQuestionTitle %} ons-fieldset__description--title ons-u-mb-m{% endif %}">{{ params.description | safe }}</div>
-                    {% endif %}
+                    {%- endif -%}
+                    {%- if params.description is defined and params.description -%}
+                        <div class="ons-fieldset__description{% if params.legendIsQuestionTitle %} ons-fieldset__description--title ons-u-mb-m{% endif %}">
+                            {{- params.description | safe -}}
+                        </div>
+                    {%- endif -%}
                 </legend>
-                {{ caller() }}
+                {{- caller() -}}
             </fieldset>
-        {% endif %}
-    {% endset %}
+        {%- endif %}
+    {%- endset %}
 
-    {% if params.error is defined and params.error %}
+    {% if params.error is defined and params.error -%}
         {% call onsError(params.error) %}
-            {{ fieldset | safe }}
+            {{- fieldset | safe -}}
         {% endcall %}
-    {% else %}
-        {{ fieldset | safe }}
-    {% endif %}
+    {%- else -%}
+        {{- fieldset | safe -}}
+    {%- endif %}
 {% endmacro %}

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

@@ -86,7 +86,9 @@
                         "value": params.button.value,
                         "attributes": params.button.attributes,
                         "url": params.button.url,
-                        "buttonStyle": params.button.buttonStyle
+                        "buttonStyle": params.button.buttonStyle,
+                        "iconType": params.button.iconType,
+                        "iconPosition": params.button.iconPosition
                     })
                 }}
             </div>
@@ -161,6 +163,7 @@
                             <div class="ons-grid__col">
                                 {{
                                     onsList({
+                                        "classes": "ons-footer--rows",
                                         "variants": ["bare", "inline"],
                                         "itemsList": row.itemsList
                                     })
@@ -225,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/header/_macro.njk

@@ -131,7 +131,7 @@
                                     "buttonStyle": "mobile",
                                     "variants": ["mobile", "ghost"],
                                     "attributes": {
-                                        "aria-label": params.toggleButton.ariaLabel | default("Toggle main navigation") ,
+                                        "aria-label": params.toggleButton.ariaLabel | default("Toggle main menu") ,
                                         "aria-controls": params.navigation.id,
                                         "aria-haspopup": "true",
                                         "aria-expanded": "false"

package/components/label/_macro.njk

@@ -1,14 +1,14 @@
 {% macro onsLabel(params) %}
-    {% set field %}
+    {% set field -%}
         <span
           {% if params.id is defined and params.id %} id="{{ params.id }}-description-hint"{% else %}id="description-hint"{% endif %}
           class="ons-label__description {% if params.inputType is defined and params.inputType %}ons-{{ params.inputType }}__label--with-description{% else %} ons-input--with-description{% endif %}">
-              {{ params.description }}
+              {{- params.description -}}
         </span>
-    {% endset %}
+    {%- endset %}
 
     <label
-        class="{% if params.inputType is not defined %}ons-label {% endif %}{{ params.classes if params.classes else "" }}{% if params.description is defined and params.description %} ons-label--with-description{% endif %} {{' ons-label--placeholder ' if params.accessiblePlaceholder else "" }}"
+        class="{% if params.inputType is not defined -%}ons-label{%- endif %}{{- ' ' + params.classes if params.classes else "" -}}{%- if params.description is defined and params.description %} ons-label--with-description{%- endif %} {{- ' ons-label--placeholder' if params.accessiblePlaceholder else "" -}}"
         {% if params.for is defined and params.for %} for="{{ params.for }}"{% endif %}
         {% if params.id is defined and params.id %} id="{{ params.id }}"{% endif %}
         {% 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 }}{% if value is defined and value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}
@@ -16,17 +16,17 @@
 
         {{- params.text | safe -}}
 
-        {% if params.inputType is defined and params.inputType %}
-            {% if params.inputType == "checkbox" or params.inputType == "radio" %}
-                {%- if params.description is defined and params.description %}
-                    {{ field | safe }}
-                {% endif -%}
-            {% endif %}
+        {%- if params.inputType is defined and params.inputType -%}
+            {% if params.inputType == "checkbox" or params.inputType == "radio" -%}
+                {%- if params.description is defined and params.description -%}
+                    {{- field | safe -}}
+                {%- endif -%}
+            {%- endif -%}
             </label>
-        {% else %}
+        {%- else -%}
             </label>
-            {%- if params.description is defined and params.description %}
-                {{ field | safe }}
-            {% endif -%}
-        {% endif %}
+            {%- if params.description is defined and params.description -%}
+                {{- field | safe -}}
+            {%- endif -%}
+        {%- endif %}
 {% endmacro %}

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 %}
@@ -70,7 +65,7 @@
                                 })
                             }}
                         {%- else -%}
-                            <a href="{{ item.url }}" class="ons-list__link {% if item.variant == 'inPageLink' %}ons-js-inpagelink {% endif %} {{ item.classes }}"{% if item.index is defined and item.index %} data-qa="list-item-{{ loop.index }}"{% endif %}{% if item.target is defined and item.target %} target="{{ item.target }}"{% endif %}{% if item.rel is defined and item.rel %} rel="{{ item.rel }}"{% endif %}>
+                            <a href="{{ item.url }}" class="ons-list__link {% if item.variants == 'inPageLink' %}ons-js-inpagelink {% endif %} {{ item.classes }}"{% if item.index is defined and item.index %} data-qa="list-item-{{ loop.index }}"{% endif %}{% if item.target is defined and item.target %} target="{{ item.target }}"{% endif %}{% if item.rel is defined and item.rel %} rel="{{ item.rel }}"{% endif %}>
                                 {%- if item.prefix is defined and item.prefix -%}<span class="ons-u-vh">{{- item.prefix -}}</span>{%- endif -%} {{- itemText | safe -}}
                                 {%- if item.target is defined and item.target == "_blank" -%}<span class="ons-u-vh">{{- item.screenreaderMessage | default("this link will open in a new tab") -}}</span>{%- endif -%}
                             </a>
@@ -94,8 +89,9 @@
                             }}
                         {%- endif -%} </span>
                     {%- endif -%}
+                {% if listLength > 1 or listEl == 'ul' %}
                 </li>
+                {% endif %}
             {%- endfor -%}
         </{{listEl}}>
-    {% endif %}
 {% endmacro %}

package/components/pagination/_macro.njk

@@ -41,7 +41,7 @@
               </li>
           {% endif %}
           {% if currentPageIndex > 4 %}
-              <li class="ons-pagination__item ons-pageination__item--gap">&hellip;</li>
+              <li class="ons-pagination__item ons-pagination__item--gap">&hellip;</li>
           {% endif %}
           {% for page in params.pages %}
               {% if loop.index >= middlePagesStart and loop.index <= middlePagesEnd %}
@@ -63,7 +63,7 @@
               {% endif %}
           {% endfor %}
           {% if currentPageIndex < totalPages - 3 %}
-              <li class="ons-pagination__item ons-pageination__item--gap">&hellip;</li>
+              <li class="ons-pagination__item ons-pagination__item--gap">&hellip;</li>
           {% endif %}
           {% if currentPageIndex < totalPages - 2 %}
               {% set lastPage = params.pages | last %}