@ons/design-system 70.0.8 → 70.0.10

package/components/access-code/_macro.njk

@@ -7,29 +7,33 @@
     {% set maxlength = params.maxlength | default(16) + extraSpaces %}
 
     {% set content %}
-        {{ onsInput({
-            "id": params.id,
-            "type": params.type,
-            "name": params.name,
-            "classes": "ons-access-code__input ons-js-access-code" + (" ons-u-mb-xs" if params.postTextboxLinkText else ""),
-            "label": params.label,
-            "attributes": {
-                "maxlength": maxlength,
-                "data-group-size": groupSize,
-                "autocomplete": "off",
-                "autocapitalize": "characters"
-            },
-            "fieldClasses": "ons-question__answer",
-            "error": params.error,
-            "postTextboxLinkText": params.postTextboxLinkText,
-            "postTextboxLinkUrl": params.postTextboxLinkUrl
-        }) }}
+        {{
+            onsInput({
+                "id": params.id,
+                "type": params.type,
+                "name": params.name,
+                "classes": "ons-access-code__input ons-js-access-code" + (" ons-u-mb-xs" if params.postTextboxLinkText else ""),
+                "label": params.label,
+                "attributes": {
+                    "maxlength": maxlength,
+                    "data-group-size": groupSize,
+                    "autocomplete": "off",
+                    "autocapitalize": "characters"
+                },
+                "fieldClasses": "ons-question__answer",
+                "error": params.error,
+                "postTextboxLinkText": params.postTextboxLinkText,
+                "postTextboxLinkUrl": params.postTextboxLinkUrl
+            })
+        }}
     {% endset %}
 
     {% if not params.error %}
-        {% call onsPanel({
-            "classes": "ons-u-mb-s" + (' ' + params.classes if params.classes else '')
-        }) %}
+        {%
+            call onsPanel({
+                "classes": "ons-u-mb-s" + (" " + params.classes if params.classes else "")
+            })
+        %}
             {{ content | safe }}
         {% endcall %}
     {% else %}
@@ -37,11 +41,13 @@
     {% endif %}
 
     {% if params.securityMessage %}
-        {% call onsPanel({
-            "variant": "bare",
-            "iconType": "lock",
-            "classes": "ons-u-mb-s"
-        }) %}
+        {%
+            call onsPanel({
+                "variant": "bare",
+                "iconType": "lock",
+                "classes": "ons-u-mb-s"
+            })
+        %}
             {{ params.securityMessage }}
         {% endcall %}
     {% endif %}

package/components/access-code/example-access-code-error.njk

@@ -1,22 +1,26 @@
 ---
-title: "Example: Access code error"
+title: 'Example: Access code error'
 layout: ~
 ---
+
 {% extends "layout/_template.njk" %}
 {% from "components/access-code/_macro.njk" import onsAccessCode %}
 {% from "components/button/_macro.njk" import onsButton %}
 {% from "components/panel/_macro.njk" import onsPanel %}
 {% from "components/details/_macro.njk" import onsDetails %}
-
-{% set pageConfig = {
-    "title": "Study title"
-} %}
+{%
+    set pageConfig = {
+        "title": "Study title"
+    }
+%}
 
 {% block main %}
-    {% call onsPanel({
-        "title": "There is a problem with this page",
-        "variant": "error"
-    }) %}
+    {%
+        call onsPanel({
+            "title": "There is a problem with this page",
+            "variant": "error"
+        })
+    %}
         {% from "components/list/_macro.njk" import onsList %}
         {{
             onsList({
@@ -34,46 +38,54 @@ layout: ~
 
     <h1 class="ons-u-mt-l">Start study</h1>
 
-    {{ onsAccessCode({
-        "id": "access-code",
-        "name": "access-code",
-        "postTextboxLinkText": "Where to find your access code",
-        "postTextboxLinkUrl": "#0",
-        "label": {
-            "text": "Enter your 16-character access code",
-            "description": "Keep this code safe. You will need to enter it every time you access your survey"
-        },
-        "securityMessage": "Your personal information is protected by law and will be kept confidential",
-        "error": {
-            "id": "access-code-error",
-            "text": "Enter an access code"
-        }
-    }) }}
+    {{
+        onsAccessCode({
+            "id": "access-code",
+            "name": "access-code",
+            "postTextboxLinkText": "Where to find your access code",
+            "postTextboxLinkUrl": "#0",
+            "label": {
+                "text": "Enter your 16-character access code",
+                "description": "Keep this code safe. You will need to enter it every time you access your survey"
+            },
+            "securityMessage": "Your personal information is protected by law and will be kept confidential",
+            "error": {
+                "id": "access-code-error",
+                "text": "Enter an access code"
+            }
+        })
+    }}
 
-    {{ onsButton({
-        "text": "Access study",
-        "classes": "ons-u-mb-xl"
-    }) }}
+    {{
+        onsButton({
+            "text": "Access study",
+            "classes": "ons-u-mb-xl"
+        })
+    }}
 
     <h2>If you do not have an access code</h2>
     <p>
-        If you have lost or not received an access code, you can <a href="#0">request a new access code</a>.
-        This can be sent to you by text or post.
+        If you have lost or not received an access code, you can <a href="#0">request a new access code</a>. This can be sent to you by text
+        or post.
     </p>
 
     {% set content %}
         <p>If you need to answer separately from the people you live with, you can <a href="#0">request an individual access code</a>.</p>
-        {% call onsPanel({
-            "variant": "warn"
-        }) %}
+        {%
+            call onsPanel({
+                "variant": "warn"
+            })
+        %}
             Someone in your household must still complete a study using this household access code
         {% endcall %}
     {% endset %}
 
-    {% call onsDetails({
-        "id": "details-access-code-error",
-        "title": "Need to answer separately from your household?"
-    }) %}
+    {%
+        call onsDetails({
+            "id": "details-access-code-error",
+            "title": "Need to answer separately from your household?"
+        })
+    %}
         {{ content | safe }}
     {% endcall %}
 {% endblock %}

package/components/access-code/example-access-code.njk

@@ -1,58 +1,68 @@
 ---
-title: "Example: Access code"
+title: 'Example: Access code'
 layout: ~
 ---
+
 {% extends "layout/_template.njk" %}
 {% from "components/access-code/_macro.njk" import onsAccessCode %}
 {% from "components/button/_macro.njk" import onsButton %}
 {% from "components/panel/_macro.njk" import onsPanel %}
 {% from "components/details/_macro.njk" import onsDetails %}
-
-{% set pageConfig = {
-    "header": {
-        "title": "Study title"
+{%
+    set pageConfig = {
+        "header": {
+            "title": "Study title"
+        }
     }
-} %}
+%}
 
 {% block main %}
     <h1 class="ons-u-mt-l">Start study</h1>
 
-    {{ onsAccessCode({
-        "id": "access-code-example",
-        "name": "access-code",
-        "postTextboxLinkText": "Where to find your access code",
-        "postTextboxLinkUrl": "#0",
-        "label": {
-            "text": "Enter your 16-character access code",
-            "description": "Keep this code safe. You will need to enter it every time you access your study"
-        },
-        "securityMessage": "Your personal information is protected by law and will be kept confidential"
-    }) }}
+    {{
+        onsAccessCode({
+            "id": "access-code-example",
+            "name": "access-code",
+            "postTextboxLinkText": "Where to find your access code",
+            "postTextboxLinkUrl": "#0",
+            "label": {
+                "text": "Enter your 16-character access code",
+                "description": "Keep this code safe. You will need to enter it every time you access your study"
+            },
+            "securityMessage": "Your personal information is protected by law and will be kept confidential"
+        })
+    }}
 
-    {{ onsButton({
-        "text": "Access study",
-        "classes": "ons-u-mb-xl"
-    }) }}
+    {{
+        onsButton({
+            "text": "Access study",
+            "classes": "ons-u-mb-xl"
+        })
+    }}
 
     <h2>If you do not have an access code</h2>
     <p>
-        If you have lost or not received an access code, you can <a href="#0">request a new access code</a>.
-        This can be sent to you by text or post.
+        If you have lost or not received an access code, you can <a href="#0">request a new access code</a>. This can be sent to you by text
+        or post.
     </p>
 
     {% set content %}
         <p>If you need to answer separately from the people you live with, you can <a href="#0">request an individual access code</a>.</p>
-        {% call onsPanel({
-            "variant": "warn"
-        }) %}
+        {%
+            call onsPanel({
+                "variant": "warn"
+            })
+        %}
             Someone in your household must still complete a study using this household access code
         {% endcall %}
     {% endset %}
 
-    {% call onsDetails({
-        "id": "details",
-        "title": "Need to answer separately from your household?"
-    }) %}
+    {%
+        call onsDetails({
+            "id": "details",
+            "title": "Need to answer separately from your household?"
+        })
+    %}
         {{ content | safe }}
     {% endcall %}
 {% endblock %}

package/components/accordion/_macro.njk

@@ -1,15 +1,16 @@
 {% macro onsAccordion(params) %}
     {% from "components/details/_macro.njk" import onsDetails %}
 
-    <div id="{{params.id}}" class="ons-accordion{{ ' ' + params.classes if params.classes }}">
+    <div id="{{ params.id }}" class="ons-accordion{{ ' ' + params.classes if params.classes else '' }}">
         {% if params.allButton %}
             {% from "components/button/_macro.njk" import onsButton %}
             {% set attributes = params.allButton.attributes | default({}) %}
-
-            {% set attributes = attributes | setAttributes({
-                "data-close-all": params.allButton.close,
-                "data-group": params.id
-            }) %}
+            {%
+                set attributes = attributes | setAttributes({
+                    "data-close-all": params.allButton.close,
+                    "data-group": params.id
+                })
+            %}
 
             {{
                 onsButton({

package/components/accordion/example-accordion-open.njk

@@ -1,7 +1,6 @@
 {% from "components/accordion/_macro.njk" import onsAccordion %}
 {% from "components/checkboxes/_macro.njk" import onsCheckboxes %}
 
-
 {% set content1 %}
     {{
         onsCheckboxes({

package/components/address-input/_macro.njk

@@ -3,10 +3,13 @@
 {% from "components/input/_macro.njk" import onsInput %}
 
 {% macro onsAddressInput(params) %}
-   {% set fields %}
-        <div id="address" class="ons-field ons-address-input {% if not params.manualEntry %}ons-address-input--search ons-js-address-autosuggest{% endif %}">
+    {% set fields %}
+        <div
+            id="address"
+            class="ons-field ons-address-input{{ ' ons-address-input--search ons-js-address-autosuggest' if not params.manualEntry }}"
+        >
             {% if params.isEditable == true or params.manualEntry %}
-                {% if not params.manualEntry %}<div class="ons-js-address-input__manual ons-u-db-no-js_enabled">{% endif %}
+                {% set addressInputs %}
                     {% if params.organisation %}
                         {{
                             onsInput({
@@ -81,11 +84,16 @@
                             })
                         }}
                     {% endif %}
+                {% endset %}
                 {% if not params.manualEntry %}
+                    <div class="ons-js-address-input__manual ons-u-db-no-js_enabled">
+                        {{ addressInputs | safe }}
                         <div class="ons-u-mt-s">
                             <a href="#0" class="ons-js-address-search-btn ons-u-db-no-js_disabled">{{ params.searchButton }}</a>
                         </div>
                     </div>
+                {% else %}
+                    {{ addressInputs | safe }}
                 {% endif %}
             {% endif %}
 
@@ -105,7 +113,7 @@
                 })
             }}
             {% if not params.manualEntry %}
-                <div class="ons-js-address-input__search{% if params.isEditable == true %} ons-u-db-no-js_disabled{% endif %}">
+                <div class="ons-js-address-input__search{{ ' ons-u-db-no-js_disabled' if params.isEditable == true }}">
                     {{
                         onsAutosuggest({
                             "id": params.id + "-autosuggest",
@@ -157,7 +165,9 @@
                         })
                     }}
                     {% if params.manualLinkText %}
-                        <a href="{{ params.manualLink | default('#0') }}" class="ons-js-address-manual-btn ons-u-mt-s ons-u-dib">{{ params.manualLinkText }}</a>
+                        <a href="{{ params.manualLink | default('#0') }}" class="ons-js-address-manual-btn ons-u-mt-s ons-u-dib"
+                            >{{ params.manualLinkText }}</a
+                        >
                     {% endif %}
                 </div>
             {% endif %}
@@ -167,12 +177,14 @@
     {% if params.dontWrap %}
         {{ fields | safe }}
     {% else %}
-        {% call onsFieldset({
-            "id": params.id,
-            "classes": params.classes,
-            "legend": params.legend,
-            "legendClasses": params.legendClasses
-        }) %}
+        {%
+            call onsFieldset({
+                "id": params.id,
+                "classes": params.classes,
+                "legend": params.legend,
+                "legendClasses": params.legendClasses
+            })
+        %}
             {{ fields | safe }}
         {% endcall %}
     {% endif %}

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

@@ -1,5 +1,4 @@
 import abortableFetch from '../../js/abortable-fetch';
-import { sanitiseAutosuggestText } from '../autosuggest/autosuggest.helpers';
 import AutosuggestUI from '../autosuggest/autosuggest.ui';
 import AddressError from './autosuggest.address.error';
 import AddressSetter from './autosuggest.address.setter';
@@ -180,10 +179,8 @@ export default class AutosuggestAddress {
             }
 
             results = updatedResults.map(({ uprn, address, type }) => {
-                const sanitisedText = sanitiseAutosuggestText(address, this.addressReplaceChars);
                 return {
                     [this.lang]: address,
-                    sanitisedText,
                     uprn,
                     type,
                 };
@@ -235,10 +232,8 @@ export default class AutosuggestAddress {
         const data = await this.retrieveAddress(id);
         const address = data.response.address.formattedAddress;
         const uprn = data.response.address.uprn;
-        const sanitisedText = sanitiseAutosuggestText(address, this.addressReplaceChars);
         return {
             [this.lang]: address,
-            sanitisedText,
             uprn,
         };
     }

package/components/address-input/example-address-input-editable.njk

@@ -1,52 +1,54 @@
 {% from "components/address-input/_macro.njk" import onsAddressInput %}
 
-{{ onsAddressInput({
-    "id": "address-input-editable",
-    "dontWrap": true,
-    "label": {
-        "text": "Enter address or postcode and select from results",
-        "id": "address-label-input-editable"
-    },
-    "isEditable": true,
-    "mandatory": true,
-    "APIDomain": "https://mock-address-api.gcp.onsdigital.uk",
-    'APIDomainBearerToken': "some_token",
-    "instructions": "Use up and down keys to navigate suggestions once you\'ve typed more than two characters. Use the enter key to select a suggestion. Touch device users, explore by touch or with swipe gestures.",
-    "ariaYouHaveSelected": "You have selected",
-    "ariaMinChars": "Enter 3 or more characters for suggestions.",
-    "ariaOneResult": "There is one suggestion available.",
-    "ariaNResults": "There are {n} suggestions available.",
-    "ariaLimitedResults": "Results have been limited to 10 suggestions. Type more characters to improve your search",
-    "ariaGroupedResults": "There are {n} for {x}",
-    "groupCount": "{n} addresses",
-    "moreResults": "Enter more of the address to improve results",
-    "resultsTitle": "Select an address",
-    "resultsTitleId": "address-results",
-    "noResults": "No results found. Try entering a different part of the address",
-    "tooManyResults": "{n} results found. Enter more of the address to improve results",
-    "typeMore": "Enter more of the address to get results",
-    "autocomplete": "off",
-    "errorTitle": "There is a problem with your answer",
-    "errorMessageEnter": "Enter an address",
-    "errorMessageSelect": "Select an address",
-    "errorMessageAPI": "Sorry, there is a problem loading addresses.",
-    "errorMessageAPILinkText": "Enter address manually",
-    "options": {
-        "regionCode": "gb-eng",
-        "addressType": "residential"
-    },
-    "line1": {
-        "label": "Address line 1"
-    },
-    "line2": {
-        "label": "Address line 2"
-    },
-    "town": {
-        "label": "Town or city"
-    },
-    "postcode": {
-        "label": "Postcode"
-    },
-    "searchButton": "Search for an address",
-    "manualLinkText": "Manually enter address"
-}) }}
+{{
+    onsAddressInput({
+        "id": "address-input-editable",
+        "dontWrap": true,
+        "label": {
+            "text": "Enter address or postcode and select from results",
+            "id": "address-label-input-editable"
+        },
+        "isEditable": true,
+        "mandatory": true,
+        "APIDomain": "https://mock-address-api.gcp.onsdigital.uk",
+        'APIDomainBearerToken': "some_token",
+        "instructions": "Use up and down keys to navigate suggestions once you\'ve typed more than two characters. Use the enter key to select a suggestion. Touch device users, explore by touch or with swipe gestures.",
+        "ariaYouHaveSelected": "You have selected",
+        "ariaMinChars": "Enter 3 or more characters for suggestions.",
+        "ariaOneResult": "There is one suggestion available.",
+        "ariaNResults": "There are {n} suggestions available.",
+        "ariaLimitedResults": "Results have been limited to 10 suggestions. Type more characters to improve your search",
+        "ariaGroupedResults": "There are {n} for {x}",
+        "groupCount": "{n} addresses",
+        "moreResults": "Enter more of the address to improve results",
+        "resultsTitle": "Select an address",
+        "resultsTitleId": "address-results",
+        "noResults": "No results found. Try entering a different part of the address",
+        "tooManyResults": "{n} results found. Enter more of the address to improve results",
+        "typeMore": "Enter more of the address to get results",
+        "autocomplete": "off",
+        "errorTitle": "There is a problem with your answer",
+        "errorMessageEnter": "Enter an address",
+        "errorMessageSelect": "Select an address",
+        "errorMessageAPI": "Sorry, there is a problem loading addresses.",
+        "errorMessageAPILinkText": "Enter address manually",
+        "options": {
+            "regionCode": "gb-eng",
+            "addressType": "residential"
+        },
+        "line1": {
+            "label": "Address line 1"
+        },
+        "line2": {
+            "label": "Address line 2"
+        },
+        "town": {
+            "label": "Town or city"
+        },
+        "postcode": {
+            "label": "Postcode"
+        },
+        "searchButton": "Search for an address",
+        "manualLinkText": "Manually enter address"
+    })
+}}

package/components/address-input/example-address-input-manual.njk

@@ -1,23 +1,25 @@
 {% from "components/address-input/_macro.njk" import onsAddressInput %}
 
-{{ onsAddressInput({
-    "id": "address-input-manual",
-    "dontWrap": true,
-    "manualEntry": true,
-    "label": {
-        "text": "Enter address or postcode and select from results",
-        "id": "address-label-input-manual"
-    },
-    "line1": {
-        "label": "Address line 1"
-    },
-    "line2": {
-        "label": "Address line 2"
-    },
-    "town": {
-        "label": "Town or city"
-    },
-    "postcode": {
-        "label": "Postcode"
-    }
-}) }}
+{{
+    onsAddressInput({
+        "id": "address-input-manual",
+        "dontWrap": true,
+        "manualEntry": true,
+        "label": {
+            "text": "Enter address or postcode and select from results",
+            "id": "address-label-input-manual"
+        },
+        "line1": {
+            "label": "Address line 1"
+        },
+        "line2": {
+            "label": "Address line 2"
+        },
+        "town": {
+            "label": "Town or city"
+        },
+        "postcode": {
+            "label": "Postcode"
+        }
+    })
+}}