@ons/design-system 70.0.7 → 70.0.9

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": "#",
-    '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"
+        }
+    })
+}}

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": "#",
-    '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/_address-output.scss

@@ -1,5 +1,5 @@
 .ons-address-output {
-  &__lines {
-    margin-bottom: 0;
-  }
+    &__lines {
+        margin-bottom: 0;
+    }
 }

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/address-output/_macro.spec.js

@@ -6,93 +6,93 @@ import axe from '../../tests/helpers/axe';
 import { renderComponent } from '../../tests/helpers/rendering';
 
 const EXAMPLE_ADDRESS_OUTPUT_FULL = {
-  unit: 'Unit 5',
-  organisation: 'Trescos',
-  line1: 'Abingdon Road',
-  line2: 'Goathill',
-  town: 'Barry',
-  postcode: 'AB12 6UH',
+    unit: 'Unit 5',
+    organisation: 'Trescos',
+    line1: 'Abingdon Road',
+    line2: 'Goathill',
+    town: 'Barry',
+    postcode: 'AB12 6UH',
 };
 
 const EXAMPLE_ADDRESS_OUTPUT_NONE = {};
 
 describe('macro: address-output', () => {
-  it('passes jest-axe checks', async () => {
-    const $ = cheerio.load(renderComponent('address-output', EXAMPLE_ADDRESS_OUTPUT_FULL));
-
-    const results = await axe($.html());
-    expect(results).toHaveNoViolations();
-  });
-
-  it('has additionally provided container style classes', () => {
-    const $ = cheerio.load(
-      renderComponent('address-output', {
-        ...EXAMPLE_ADDRESS_OUTPUT_FULL,
-        classes: 'extra-class another-extra-class',
-      }),
-    );
-
-    expect($('.ons-address-output').hasClass('extra-class')).toBe(true);
-    expect($('.ons-address-output').hasClass('another-extra-class')).toBe(true);
-  });
-
-  it('renders no lines when no parameters are provided', () => {
-    const $ = cheerio.load(renderComponent('address-output', EXAMPLE_ADDRESS_OUTPUT_NONE));
-
-    expect($('.ons-address-output__lines *').length).toBe(0);
-  });
-
-  it.each([
-    ['all address lines', EXAMPLE_ADDRESS_OUTPUT_FULL],
-    ['single line', { unit: 'Unit 5' }],
-  ])('renders `unit` with %s', (_, params) => {
-    const $ = cheerio.load(renderComponent('address-output', params));
-
-    expect($('.ons-address-output__unit').text().trim()).toBe('Unit 5');
-  });
-
-  it.each([
-    ['all address lines', EXAMPLE_ADDRESS_OUTPUT_FULL],
-    ['single line', { organisation: 'Trescos' }],
-  ])('renders `organisation` with %s', (_, params) => {
-    const $ = cheerio.load(renderComponent('address-output', params));
-
-    expect($('.ons-address-output__organisation').text().trim()).toBe('Trescos');
-  });
-
-  it.each([
-    ['all address lines', EXAMPLE_ADDRESS_OUTPUT_FULL],
-    ['single line', { line1: 'Abingdon Road' }],
-  ])('renders `line1` with %s', (_, params) => {
-    const $ = cheerio.load(renderComponent('address-output', params));
-
-    expect($('.ons-address-output__line1').text().trim()).toBe('Abingdon Road');
-  });
-
-  it.each([
-    ['all address lines', EXAMPLE_ADDRESS_OUTPUT_FULL],
-    ['single line', { line2: 'Goathill' }],
-  ])('renders `line2` with %s', (_, params) => {
-    const $ = cheerio.load(renderComponent('address-output', params));
-
-    expect($('.ons-address-output__line2').text().trim()).toBe('Goathill');
-  });
-
-  it.each([
-    ['all address lines', EXAMPLE_ADDRESS_OUTPUT_FULL],
-    ['single line', { town: 'Barry' }],
-  ])('renders `town` with %s', (_, params) => {
-    const $ = cheerio.load(renderComponent('address-output', params));
-
-    expect($('.ons-address-output__town').text().trim()).toBe('Barry');
-  });
-
-  it.each([
-    ['all address lines', EXAMPLE_ADDRESS_OUTPUT_FULL],
-    ['single line', { postcode: 'AB12 6UH' }],
-  ])('renders `postcode` with %s', (_, params) => {
-    const $ = cheerio.load(renderComponent('address-output', params));
-
-    expect($('.ons-address-output__postcode').text().trim()).toBe('AB12 6UH');
-  });
+    it('passes jest-axe checks', async () => {
+        const $ = cheerio.load(renderComponent('address-output', EXAMPLE_ADDRESS_OUTPUT_FULL));
+
+        const results = await axe($.html());
+        expect(results).toHaveNoViolations();
+    });
+
+    it('has additionally provided container style classes', () => {
+        const $ = cheerio.load(
+            renderComponent('address-output', {
+                ...EXAMPLE_ADDRESS_OUTPUT_FULL,
+                classes: 'extra-class another-extra-class',
+            }),
+        );
+
+        expect($('.ons-address-output').hasClass('extra-class')).toBe(true);
+        expect($('.ons-address-output').hasClass('another-extra-class')).toBe(true);
+    });
+
+    it('renders no lines when no parameters are provided', () => {
+        const $ = cheerio.load(renderComponent('address-output', EXAMPLE_ADDRESS_OUTPUT_NONE));
+
+        expect($('.ons-address-output__lines *').length).toBe(0);
+    });
+
+    it.each([
+        ['all address lines', EXAMPLE_ADDRESS_OUTPUT_FULL],
+        ['single line', { unit: 'Unit 5' }],
+    ])('renders `unit` with %s', (_, params) => {
+        const $ = cheerio.load(renderComponent('address-output', params));
+
+        expect($('.ons-address-output__unit').text().trim()).toBe('Unit 5');
+    });
+
+    it.each([
+        ['all address lines', EXAMPLE_ADDRESS_OUTPUT_FULL],
+        ['single line', { organisation: 'Trescos' }],
+    ])('renders `organisation` with %s', (_, params) => {
+        const $ = cheerio.load(renderComponent('address-output', params));
+
+        expect($('.ons-address-output__organisation').text().trim()).toBe('Trescos');
+    });
+
+    it.each([
+        ['all address lines', EXAMPLE_ADDRESS_OUTPUT_FULL],
+        ['single line', { line1: 'Abingdon Road' }],
+    ])('renders `line1` with %s', (_, params) => {
+        const $ = cheerio.load(renderComponent('address-output', params));
+
+        expect($('.ons-address-output__line1').text().trim()).toBe('Abingdon Road');
+    });
+
+    it.each([
+        ['all address lines', EXAMPLE_ADDRESS_OUTPUT_FULL],
+        ['single line', { line2: 'Goathill' }],
+    ])('renders `line2` with %s', (_, params) => {
+        const $ = cheerio.load(renderComponent('address-output', params));
+
+        expect($('.ons-address-output__line2').text().trim()).toBe('Goathill');
+    });
+
+    it.each([
+        ['all address lines', EXAMPLE_ADDRESS_OUTPUT_FULL],
+        ['single line', { town: 'Barry' }],
+    ])('renders `town` with %s', (_, params) => {
+        const $ = cheerio.load(renderComponent('address-output', params));
+
+        expect($('.ons-address-output__town').text().trim()).toBe('Barry');
+    });
+
+    it.each([
+        ['all address lines', EXAMPLE_ADDRESS_OUTPUT_FULL],
+        ['single line', { postcode: 'AB12 6UH' }],
+    ])('renders `postcode` with %s', (_, params) => {
+        const $ = cheerio.load(renderComponent('address-output', params));
+
+        expect($('.ons-address-output__postcode').text().trim()).toBe('AB12 6UH');
+    });
 });