@ons/design-system 70.0.8 → 70.0.9

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

@@ -1,40 +1,42 @@
 {% from "components/address-input/_macro.njk" import onsAddressInput %}
 
-{{ onsAddressInput({
-    "id": "address-input",
-    "dontWrap": true,
-    "label": {
-        "text": "Enter address or postcode and select from results",
-        "id": "address-label-input"
-    },
-    "isEditable": false,
-    "mandatory": true,
-    "externalInitialiser": true,
-    "autocomplete": "off",
-    "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",
-    "errorTitle": "There is a problem with your answer",
-    "errorMessageEnter": "Enter an address",
-    "errorMessageSelect": "Select an address",
-    "errorMessageAPI": "Sorry, there is a problem. We are working to fix it. Please try again later or",
-    "errorMessageAPILinkText": "contact us for more help",
-    "errorMessageAPILink": "#0",
-    "options": {
-        "regionCode": "gb-eng",
-        "addressType": "residential"
-    }
-}) }}
+{{
+    onsAddressInput({
+        "id": "address-input",
+        "dontWrap": true,
+        "label": {
+            "text": "Enter address or postcode and select from results",
+            "id": "address-label-input"
+        },
+        "isEditable": false,
+        "mandatory": true,
+        "externalInitialiser": true,
+        "autocomplete": "off",
+        "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",
+        "errorTitle": "There is a problem with your answer",
+        "errorMessageEnter": "Enter an address",
+        "errorMessageSelect": "Select an address",
+        "errorMessageAPI": "Sorry, there is a problem. We are working to fix it. Please try again later or",
+        "errorMessageAPILinkText": "contact us for more help",
+        "errorMessageAPILink": "#0",
+        "options": {
+            "regionCode": "gb-eng",
+            "addressType": "residential"
+        }
+    })
+}}

package/components/address-output/_macro.njk

@@ -1,20 +1,20 @@
 {% macro onsAddressOutput(params) %}
-    <div class="ons-address-output{% if params.classes %} {{ params.classes }}{% endif %}">
+    <div class="ons-address-output{{ ' ' + params.classes if params.classes else '' }}">
         <p class="ons-address-output__lines">
             {% if params.unit %}
-                <span class="ons-address-output__unit">{{ params.unit }}</span><br>
+                <span class="ons-address-output__unit">{{ params.unit }}</span><br />
             {% endif %}
             {% if params.organisation %}
-                <span class="ons-address-output__organisation">{{ params.organisation }}</span><br>
+                <span class="ons-address-output__organisation">{{ params.organisation }}</span><br />
             {% endif %}
             {% if params.line1 %}
-                <span class="ons-address-output__line1">{{ params.line1 }}</span><br>
+                <span class="ons-address-output__line1">{{ params.line1 }}</span><br />
             {% endif %}
             {% if params.line2 %}
-                <span class="ons-address-output__line2">{{ params.line2 }}</span><br>
+                <span class="ons-address-output__line2">{{ params.line2 }}</span><br />
             {% endif %}
             {% if params.town %}
-                <span class="ons-address-output__town">{{ params.town }}</span><br>
+                <span class="ons-address-output__town">{{ params.town }}</span><br />
             {% endif %}
             {% if params.postcode %}
                 <span class="ons-address-output__postcode">{{ params.postcode }}</span>

package/components/autosuggest/_macro.njk

@@ -3,7 +3,7 @@
 {% macro onsAutosuggest(params) %}
     <div
         id="{{ params.id }}-container"
-        class="{% if not params.externalInitialiser %}ons-js-autosuggest {% endif %}{% if params.isEditable == false %}ons-js-address-not-editable{% endif %}{% if params.mandatory == true %} ons-js-address-mandatory{% endif %} {% if params.containerClasses %} {{ params.containerClasses }}{% endif %} ons-autosuggest"
+        class="ons-autosuggest{{ ' ons-js-autosuggest' if not params.externalInitialiser }}{{ ' ons-js-address-not-editable' if params.isEditable == false }}{{ ' ons-js-address-mandatory' if params.mandatory == true }}{{ ' ' + params.containerClasses if params.containerClasses else '' }}"
         data-instructions="{{ params.instructions }}"
         data-aria-you-have-selected="{{ params.ariaYouHaveSelected }}"
         data-min-chars="{{ params.minChars }}"
@@ -35,50 +35,70 @@
             {% if params.options.addressType %}data-options-address-type="{{ params.options.addressType }}"{% endif %}
         {% endif %}
     >
-
         {% set autosuggestResults %}
-            <div class="ons-autosuggest__results ons-js-autosuggest-results{% if params.input.width %} ons-input--w-{{ params.input.width }}{% else %} ons-input--w-20{% endif %}">
+            <div
+                class="ons-autosuggest__results ons-js-autosuggest-results{% if params.input.width %}{{ ' ' }}ons-input--w-{{ params.input.width }}{% else %}{{ ' ' }}ons-input--w-20{% endif %}"
+            >
                 <div id="{{ params.resultsTitleId }}" class="ons-autosuggest__results-title ons-u-fs-s">{{ params.resultsTitle }}</div>
-                <ul class="ons-autosuggest__listbox ons-js-autosuggest-listbox" title="{{ params.resultsTitle }}" role="listbox" id="{{ params.id }}-listbox" tabindex="-1"></ul>
+                <ul
+                    class="ons-autosuggest__listbox ons-js-autosuggest-listbox"
+                    title="{{ params.resultsTitle }}"
+                    role="listbox"
+                    id="{{ params.id }}-listbox"
+                    tabindex="-1"
+                ></ul>
+            </div>
+            <div
+                class="ons-autosuggest__instructions ons-u-vh ons-js-autosuggest-instructions"
+                id="{{ params.id }}-instructions"
+                tabindex="-1"
+            >
+                {{ params.instructions }}
             </div>
-            <div class="ons-autosuggest__instructions ons-u-vh ons-js-autosuggest-instructions" id="{{ params.id }}-instructions" tabindex="-1">{{ params.instructions }}</div>
-            <div class="ons-autosuggest__status ons-u-vh ons-js-autosuggest-aria-status" aria-live="assertive" aria-atomic="true" role="status" tabindex="-1"></div>
+            <div
+                class="ons-autosuggest__status ons-u-vh ons-js-autosuggest-aria-status"
+                aria-live="assertive"
+                aria-atomic="true"
+                role="status"
+                tabindex="-1"
+            ></div>
         {% endset %}
 
-        {{ onsInput({
-            "id": params.id,
-            "type": params.input.type,
-            "classes": "ons-js-autosuggest-input " + (params.input.classes if params.input.classes else ''),
-            "width": params.input.width,
-            "label": params.input.label,
-            "autocomplete": params.input.autocomplete,
-            "legend": params.input.legend,
-            "legendClasses": params.input.legendClasses,
-            "legendIsQuestionTitle": params.input.legendIsQuestionTitle,
-            "value": params.input.value,
-            "attributes": params.input.attributes,
-            "error": params.input.error,
-            "mutuallyExclusive": params.input.mutuallyExclusive,
-            "accessiblePlaceholder": params.input.accessiblePlaceholder,
-            "name": params.input.name,
-            "autosuggestResults": autosuggestResults,
-            "minLength": params.input.minLength,
-            "maxLength": params.input.maxLength,
-            "prefix": params.input.prefix,
-            "suffix": params.input.suffix,
-            "fieldId": params.input.fieldId,
-            "fieldClasses": params.input.fieldClasses,
-            "dontWrap": params.input.dontWrap,
-            "charCheckLimit": params.input.charCheckLimit,
-            "searchButton": params.input.searchButton,
-            "postTextboxLinkText": params.input.postTextboxLinkText,
-            "postTextboxLinkUrl": params.input.postTextboxLinkUrl,
-            "listeners": params.input.listeners
-        }) }}
+        {{
+            onsInput({
+                "id": params.id,
+                "type": params.input.type,
+                "classes": "ons-js-autosuggest-input" + (" " + params.input.classes if params.input.classes else ""),
+                "width": params.input.width,
+                "label": params.input.label,
+                "autocomplete": params.input.autocomplete,
+                "legend": params.input.legend,
+                "legendClasses": params.input.legendClasses,
+                "legendIsQuestionTitle": params.input.legendIsQuestionTitle,
+                "value": params.input.value,
+                "attributes": params.input.attributes,
+                "error": params.input.error,
+                "mutuallyExclusive": params.input.mutuallyExclusive,
+                "accessiblePlaceholder": params.input.accessiblePlaceholder,
+                "name": params.input.name,
+                "autosuggestResults": autosuggestResults,
+                "minLength": params.input.minLength,
+                "maxLength": params.input.maxLength,
+                "prefix": params.input.prefix,
+                "suffix": params.input.suffix,
+                "fieldId": params.input.fieldId,
+                "fieldClasses": params.input.fieldClasses,
+                "dontWrap": params.input.dontWrap,
+                "charCheckLimit": params.input.charCheckLimit,
+                "searchButton": params.input.searchButton,
+                "postTextboxLinkText": params.input.postTextboxLinkText,
+                "postTextboxLinkUrl": params.input.postTextboxLinkUrl,
+                "listeners": params.input.listeners
+            })
+        }}
 
         {% if not params.mutuallyExclusive %}
             {{ autosuggestResults | safe }}
         {% endif %}
-
     </div>
 {% endmacro %}

package/components/autosuggest/example-autosuggest-country-multiple.njk

@@ -2,32 +2,32 @@
 
 <div class="ons-grid ons-grid--gutterless">
     <div class="ons-grid__col ons-col-8@m">
-
-        {{ onsAutosuggest({
-            "id": "country-of-birth-autosuggest-multiple",
-            "input": {
-                "label": {
-                    "text": "Passport",
-                    "id": "country-of-birth-label-multiple",
-                    "description": "Enter your own answer or select from suggestions. You can enter multiple countries if you have a passport for more than one."
+        {{
+            onsAutosuggest({
+                "id": "country-of-birth-autosuggest-multiple",
+                "input": {
+                    "label": {
+                        "text": "Passport",
+                        "id": "country-of-birth-label-multiple",
+                        "description": "Enter your own answer or select from suggestions. You can enter multiple countries if you have a passport for more than one."
+                    },
+                    "autocomplete": "off"
                 },
-                "autocomplete": "off"
-            },
-            "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",
-            "moreResults": "Continue entering to improve suggestions",
-            "resultsTitle": "Suggestions",
-            "resultsTitleId": "country-of-birth-suggestions",
-            "allowMultiple": true,
-            "autosuggestData": "/examples/data/country-of-birth.json",
-            "noResults": "No suggestions found. You can enter your own answer",
-            "typeMore": "Continue entering to get suggestions",
-            "language": "en"
-        }) }}
-
+                "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",
+                "moreResults": "Continue entering to improve suggestions",
+                "resultsTitle": "Suggestions",
+                "resultsTitleId": "country-of-birth-suggestions",
+                "allowMultiple": true,
+                "autosuggestData": "/examples/data/country-of-birth.json",
+                "noResults": "No suggestions found. You can enter your own answer",
+                "typeMore": "Continue entering to get suggestions",
+                "language": "en"
+            })
+        }}
     </div>
 </div>

package/components/autosuggest/example-autosuggest-country.njk

@@ -2,30 +2,30 @@
 
 <div class="ons-grid ons-grid--gutterless">
     <div class="ons-grid__col ons-col-8@m">
-
-        {{ onsAutosuggest({
-            "id": "country-of-birth-autosuggest",
-            "input": {
-                "label": {
-                    "text": "Current name of country",
-                    "description": "Enter your own answer or select from suggestions",
-                    "id": "country-of-birth-label"
+        {{
+            onsAutosuggest({
+                "id": "country-of-birth-autosuggest",
+                "input": {
+                    "label": {
+                        "text": "Current name of country",
+                        "description": "Enter your own answer or select from suggestions",
+                        "id": "country-of-birth-label"
+                    },
+                    "autocomplete": "off"
                 },
-                "autocomplete": "off"
-            },
-            "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",
-            "moreResults": "Continue entering to improve suggestions",
-            "resultsTitle": "Suggestions",
-            "resultsTitleId": "country-of-birth-suggestions",
-            "autosuggestData": "/examples/data/country-of-birth.json",
-            "noResults": "No suggestions found. You can enter your own answer",
-            "typeMore": "Continue entering to get suggestions"
-        }) }}
-
+                "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",
+                "moreResults": "Continue entering to improve suggestions",
+                "resultsTitle": "Suggestions",
+                "resultsTitleId": "country-of-birth-suggestions",
+                "autosuggestData": "/examples/data/country-of-birth.json",
+                "noResults": "No suggestions found. You can enter your own answer",
+                "typeMore": "Continue entering to get suggestions"
+            })
+        }}
     </div>
 </div>