@ons/design-system 70.0.16 → 72.0.0

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

@@ -57,10 +57,10 @@ export default class AutosuggestAddress {
         });
 
         // Set up AIMS api variables and auth
-        this.APIDomain = this.container.getAttribute('data-api-domain');
-        this.lookupURL = `${this.APIDomain}/addresses/eq?input=`;
-        this.lookupGroupURL = `${this.APIDomain}/addresses/eq/bucket?`;
-        this.retrieveURL = `${this.APIDomain}/addresses/eq/uprn/`;
+        this.apiDomain = this.container.getAttribute('data-api-domain');
+        this.lookupUrl = `${this.apiDomain}/addresses/eq?input=`;
+        this.lookupGroupUrl = `${this.apiDomain}/addresses/eq/bucket?`;
+        this.retrieveUrl = `${this.apiDomain}/addresses/eq/uprn/`;
 
         // Query string options
         this.manualQueryParams = this.container.getAttribute('data-query-params');
@@ -77,7 +77,7 @@ export default class AutosuggestAddress {
     }
 
     async checkAPIStatus() {
-        this.fetch = abortableFetch(this.lookupURL + 'cf142&limit=10', {
+        this.fetch = abortableFetch(this.lookupUrl + 'cf142&limit=10', {
             method: 'GET',
             headers: this.setAuthorization(this.authorizationToken),
         });
@@ -109,24 +109,24 @@ export default class AutosuggestAddress {
     }
 
     async findAddress(text, grouped) {
-        let queryURL, fullQueryURL;
+        let queryUrl, fullQueryUrl;
 
         if (this.manualQueryParams) {
             const manualQueryParams = this.container.getAttribute('data-query-params');
-            fullQueryURL = this.lookupURL + text + manualQueryParams;
+            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);
+            fullQueryUrl = this.generateUrlParams(queryUrl);
             if (fullPostcodeQuery && grouped !== false) {
-                fullQueryURL = fullQueryURL + '&groupfullpostcodes=combo';
+                fullQueryUrl = fullQueryUrl + '&groupfullpostcodes=combo';
             }
         }
 
-        this.fetch = abortableFetch(fullQueryURL, {
+        this.fetch = abortableFetch(fullQueryUrl, {
             method: 'GET',
             headers: this.setAuthorization(this.authorizationToken),
         });
@@ -248,11 +248,11 @@ export default class AutosuggestAddress {
     }
 
     async retrieveAddress(id, type = null) {
-        let retrieveUrl = this.retrieveURL + id;
+        let retrieveUrl = this.retrieveUrl + id;
 
-        const fullUPRNURL = this.generateURLParams(retrieveUrl, id, type);
+        const fullUprnUrl = this.generateUrlParams(retrieveUrl, id, type);
 
-        this.fetch = abortableFetch(fullUPRNURL, {
+        this.fetch = abortableFetch(fullUprnUrl, {
             method: 'GET',
             headers: this.setAuthorization(this.authorizationToken),
         });
@@ -315,8 +315,8 @@ export default class AutosuggestAddress {
         };
     }
 
-    generateURLParams(baseURL, uprn, type) {
-        let fullURL = baseURL,
+    generateUrlParams(baseUrl, uprn, type) {
+        let fullUrl = baseUrl,
             addressType;
 
         const classificationFilterParam = '&classificationfilter=',
@@ -336,37 +336,37 @@ export default class AutosuggestAddress {
 
         if (!uprn) {
             if (this.classificationFilter && this.classificationFilter !== 'residential') {
-                fullURL = fullURL + classificationFilterParam + this.classificationFilter;
+                fullUrl = fullUrl + classificationFilterParam + this.classificationFilter;
             }
 
             if (this.classificationFilter === 'workplace') {
                 if (this.regionCode === 'gb-eng') {
-                    fullURL = fullURL + eboostParam;
+                    fullUrl = fullUrl + eboostParam;
                 } else if (this.regionCode === 'gb-wls') {
-                    fullURL = fullURL + wboostParam;
+                    fullUrl = fullUrl + wboostParam;
                 }
             }
 
             if (this.regionCode === 'gb-nir') {
                 if (this.classificationFilter === 'educational') {
-                    fullURL = fullURL + nionlyParam;
+                    fullUrl = fullUrl + nionlyParam;
                 } else {
-                    fullURL = fullURL + niboostParam;
+                    fullUrl = fullUrl + niboostParam;
                 }
             }
 
             if (this.lang === 'cy') {
-                fullURL = fullURL + favourwelshParam;
+                fullUrl = fullUrl + favourwelshParam;
             }
         } else if (uprn) {
-            fullURL = baseURL + addresstypeParam + addressType;
+            fullUrl = baseUrl + addresstypeParam + addressType;
         }
 
         if (this.epoch === 'true') {
-            fullURL = fullURL + epochParam;
+            fullUrl = fullUrl + epochParam;
         }
 
-        return fullURL;
+        return fullUrl;
     }
 
     handleAPIError() {

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

@@ -30,8 +30,8 @@ const EXAMPLE_ADDRESS_INPUT = {
     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',
+    errorMessageApi: 'Sorry, there is a problem loading addresses',
+    errorMessageApiLinkText: 'Enter address manually',
     options: {
         regionCode: 'gb-eng',
         addressType: 'residential',
@@ -52,20 +52,21 @@ const EXAMPLE_ADDRESS_INPUT = {
         label: 'Postcode',
     },
     searchButton: 'Search for an address',
+    manualLinkUrl: '#0',
     manualLinkText: 'Manually enter address',
 };
 
 const EXAMPLE_ADDRESS_INPUT_WITH_API = {
     ...EXAMPLE_ADDRESS_INPUT,
-    APIDomain: '/fake/api',
-    APIDomainBearerToken: 'someToken',
+    apiDomain: '/fake/api',
+    apiDomainBearerToken: 'someToken',
     externalInitialiser: true,
 };
 
 const { setTimeout } = require('node:timers/promises');
 
 describe('script: address-input', () => {
-    const apiFaker = new PuppeteerEndpointFaker(EXAMPLE_ADDRESS_INPUT_WITH_API.APIDomain);
+    const apiFaker = new PuppeteerEndpointFaker(EXAMPLE_ADDRESS_INPUT_WITH_API.apiDomain);
 
     apiFaker.setOverrides(
         [

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

@@ -10,8 +10,8 @@
         },
         "isEditable": true,
         "mandatory": true,
-        "APIDomain": "https://mock-address-api.gcp.onsdigital.uk",
-        'APIDomainBearerToken': "some_token",
+        "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.",
@@ -30,8 +30,8 @@
         "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",
+        "errorMessageApi": "Sorry, there is a problem loading addresses.",
+        "errorMessageApiLinkText": "Enter address manually",
         "options": {
             "regionCode": "gb-eng",
             "addressType": "residential"
@@ -49,6 +49,7 @@
             "label": "Postcode"
         },
         "searchButton": "Search for an address",
+        "manualLinkUrl": "#0",
         "manualLinkText": "Manually enter address"
     })
 }}

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

@@ -12,8 +12,8 @@
         "mandatory": true,
         "externalInitialiser": true,
         "autocomplete": "off",
-        "APIDomain": "https://mock-address-api.gcp.onsdigital.uk",
-        'APIDomainBearerToken': "some_token",
+        "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.",
@@ -31,9 +31,8 @@
         "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",
+        "errorMessageApi": "Sorry, there is a problem. We are working to fix it. Please try again later or",
+        "errorMessageApiLinkText": "contact us for more help",
         "options": {
             "regionCode": "gb-eng",
             "addressType": "residential"

package/components/autosuggest/_autosuggest.scss

@@ -5,7 +5,7 @@
         border-radius: $input-radius;
         display: inline-block;
 
-        @include mq(xxs, s) {
+        @include mq('2xs', s) {
             width: 100%;
         }
     }
@@ -94,19 +94,19 @@
     &__panel.ons-panel--warn {
         background: none;
         border: 0;
-        margin: 0;
+        margin: 0 !important;
         .ons-panel__icon {
-            font-size: 21px;
-            line-height: 25px;
+            font-size: 1.3rem;
+            line-height: 1.5rem;
             margin-top: 0;
-            min-height: 24px;
-            min-width: 26px;
-            top: 17px;
+            min-height: 1.5rem;
+            min-width: 1.5rem;
+            top: 1rem;
         }
 
         .ons-panel__body {
             font-weight: $font-weight-bold;
-            padding: 0.8rem 0.8rem 0.8rem 2rem;
+            padding: 0.75rem 0.75rem 0.75rem 2rem;
         }
     }
 

package/components/autosuggest/_macro.njk

@@ -15,9 +15,9 @@
         data-results-title="{{ params.resultsTitle }}"
         data-no-results="{{ params.noResults }}"
         data-type-more="{{ params.typeMore }}"
-        {% if params.APIDomain %}data-api-domain="{{ params.APIDomain }}"{% endif %}
-        {% if params.APIDomainBearerToken %}data-authorization-token="{{ params.APIDomainBearerToken }}"{% endif %}
-        {% if params.APIManualQueryParams == true %}data-query-params=""{% endif %}
+        {% if params.apiDomain %}data-api-domain="{{ params.apiDomain }}"{% endif %}
+        {% if params.apiDomainBearerToken %}data-authorization-token="{{ params.apiDomainBearerToken }}"{% endif %}
+        {% if params.apiManualQueryParams == true %}data-query-params=""{% endif %}
         {% if params.allowMultiple == true %}data-allow-multiple="true"{% endif %}
         {% if params.autosuggestData %}data-autosuggest-data="{{ params.autosuggestData }}"{% endif %}
         {% if params.errorTitle %}data-error-title="{{ params.errorTitle }}"{% endif %}
@@ -26,8 +26,8 @@
         {% if params.ariaGroupedResults %}data-aria-grouped-results="{{ params.ariaGroupedResults }}"{% endif %}
         {% if params.groupCount %}data-group-count="{{ params.groupCount }}"{% endif %}
         {% if params.tooManyResults %}data-too-many-results="{{ params.tooManyResults }}"{% endif %}
-        {% if params.errorMessageAPI %}data-error-api="{{ params.errorMessageAPI }}"{% endif %}
-        {% if params.errorMessageAPILinkText %}data-error-api-link-text="{{ params.errorMessageAPILinkText }}"{% endif %}
+        {% if params.errorMessageApi %}data-error-api="{{ params.errorMessageApi }}"{% endif %}
+        {% if params.errorMessageApiLinkText %}data-error-api-link-text="{{ params.errorMessageApiLinkText }}"{% endif %}
         {% if params.language %}data-lang="{{ params.language }}"{% endif %}
         {% if params.options %}
             {% if params.options.oneYearAgo %}data-options-one-year-ago="true"{% endif %}

package/components/autosuggest/autosuggest.spec.js

@@ -597,7 +597,7 @@ describe('script: autosuggest', () => {
                         ...EXAMPLE_AUTOSUGGEST,
                         errorTitle: 'There is a problem with your answer',
                         errorMessage: 'Enter an address ',
-                        errorMessageAPI: 'Sorry, there is a problem.',
+                        errorMessageApi: 'Sorry, there is a problem.',
                     }),
                 );
 

package/components/back-to-top/_back-to-top.scss

@@ -1,12 +1,12 @@
 .ons-back-to-top {
     &__description {
-        margin-left: 0.2rem;
+        margin-left: 0.25rem;
     }
 
     &__enabled {
         background: none;
         width: fit-content;
-        padding: 0.5em 0;
+        padding: 0.5rem 0;
     }
 
     &__sticky {

package/components/back-to-top/_macro.spec.js

@@ -5,7 +5,7 @@ import * as cheerio from 'cheerio';
 import axe from '../../tests/helpers/axe';
 import { renderComponent } from '../../tests/helpers/rendering';
 
-describe('FOR: Back-to-top', () => {
+describe('FOR: Macro: Back-to-top', () => {
     describe('GIVEN: Params: default', () => {
         describe('WHEN: params are at default', () => {
             const $ = cheerio.load(renderComponent('back-to-top'));

package/components/back-to-top/example-full-page-back-to-top.njk

@@ -31,15 +31,15 @@ layout: ~
 %}
 
 {% block main %}
-    <h1 class="ons-u-fs-xxl">
-        <span class="ons-u-fs-m ons-u-db ons-u-mb-xs ons-u-lighter">Press releases</span>
+    <h1 class="ons-u-fs-2xl">
+        <span class="ons-u-fs-m ons-u-db ons-u-mb-2xs ons-u-lighter">Press releases</span>
         <span class="ons-u-vh">: </span>
-        <span class="ons-u-fs-xxl ons-u-db">ONS launches Integrated Data Service to boost government collaboration on data sharing</span>
+        <span class="ons-u-fs-2xl ons-u-db">ONS launches Integrated Data Service to boost government collaboration on data sharing</span>
     </h1>
 
     <div class="ons-grid">
         <div class="ons-grid__col ons-col-7@m">
-            <div class="ons-page__body ons-u-mt-m">
+            <div class="ons-page__body ons-u-mt-l">
                 <p>
                     In a groundbreaking move, the Office for National Statistics (ONS) has embarked on a transformative journey with the
                     introduction of the Integrated Data Service (IDS). This sophisticated, cloud-based platform is meticulously crafted to
@@ -106,7 +106,7 @@ layout: ~
                     appropriately and making sure it is put to use for the public good."
                 </p>
 
-                <div class="ons-u-mt-l ons-u-mt-xl@m">
+                <div class="ons-u-mt-xl ons-u-mt-3xl@m">
                     {{
                         onsContentPagination({
                             "ariaLabel": 'Article pagination',
@@ -179,7 +179,7 @@ layout: ~
                             "id": 'share-this-article',
                             "title": 'Share this article',
                             "iconPosition": 'before',
-                            "iconSize": 'xxl',
+                            "iconSize": '2xl',
                             "itemsList": [
                                 {
                                     "url": '#0',

package/components/breadcrumbs/_breadcrumbs.scss

@@ -22,7 +22,7 @@ $breadcrumb-chevron-height: 0.65rem;
 
         .ons-icon {
             height: $breadcrumb-chevron-height;
-            margin: 0 0.2rem;
+            margin: 0 0.25rem;
             vertical-align: middle;
             width: $breadcrumb-chevron-height;
         }

package/components/breadcrumbs/_macro.spec.js

@@ -5,125 +5,131 @@ import * as cheerio from 'cheerio';
 import axe from '../../tests/helpers/axe';
 import { mapAll } from '../../tests/helpers/cheerio';
 import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
-
-const EXAMPLE_BREADCRUMBS_MINIMAL = {
-    itemsList: [
-        {
-            url: 'https://example.com/',
-            text: 'Home',
-        },
-        {
-            url: 'https://example.com/guide/',
-            text: 'Guide',
-        },
-    ],
-};
-
-const EXAMPLE_BREADCRUMBS = {
-    classes: 'extra-class another-extra-class',
-    ariaLabel: 'Breadcrumbs label',
-    id: 'example-breadcrumbs',
-    itemsList: [
-        {
-            itemClasses: 'item-extra-class item-another-extra-class',
-            linkClasses: 'link-extra-class link-another-extra-class',
-            url: 'https://example.com/',
-            text: 'Home',
-            attributes: {
-                'data-a': '123',
-                'data-b': '456',
-            },
-            id: 'first-breadcrumb',
-        },
-        {
-            url: 'https://example.com/guide/',
-            text: 'Guide',
-            id: 'second-breadcrumb',
-            attributes: {
-                'data-a': '789',
-                'data-b': 'ABC',
-            },
-        },
-    ],
-};
-
-describe('macro: breadcrumbs', () => {
-    it('passes jest-axe checks', async () => {
-        const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
-
-        const results = await axe($.html());
-        expect(results).toHaveNoViolations();
-    });
-
-    it('has additionally provided style classes', () => {
-        const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
-
-        expect($('.ons-breadcrumbs').hasClass('extra-class')).toBe(true);
-        expect($('.ons-breadcrumbs').hasClass('another-extra-class')).toBe(true);
-    });
-
-    it('has a default `aria-label` of "Breadcrumbs"', () => {
-        const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_MINIMAL));
-
-        expect($('.ons-breadcrumbs').attr('aria-label')).toBe('Breadcrumbs');
-    });
-
-    it('has the provided `ariaLabel` for `aria-label`', () => {
-        const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
-
-        expect($('.ons-breadcrumbs').attr('aria-label')).toBe('Breadcrumbs label');
-    });
-
-    it('has the provided `id`', () => {
-        const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
-
-        expect($('.ons-breadcrumbs').attr('id')).toBe('example-breadcrumbs');
+import { EXAMPLE_BREADCRUMBS_REQUIRED_PARAMS, EXAMPLE_BREADCRUMBS_ALL_PARAMS } from './_test_examples';
+
+describe('FOR: Macro: Breadcrumbs', () => {
+    describe('GIVEN: Params: required', () => {
+        describe('WHEN: required params are provided', () => {
+            const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_REQUIRED_PARAMS));
+            test('THEN: jest-axe tests pass', async () => {
+                const results = await axe($.html());
+                expect(results).toHaveNoViolations();
+            });
+            const faker = templateFaker();
+            const iconsSpy = faker.spy('icon');
+            faker.renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_REQUIRED_PARAMS);
+            test('THEN: renders chevron icon next to item', () => {
+                const iconTypes = iconsSpy.occurrences.map((occurrence) => occurrence.iconType);
+                expect(iconTypes).toEqual(['chevron']);
+            });
+        });
     });
-
-    it('has additionally provided style classes on `item` element', () => {
-        const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
-
-        expect($('.ons-breadcrumbs__item:first').hasClass('item-extra-class')).toBe(true);
-        expect($('.ons-breadcrumbs__item:first').hasClass('item-another-extra-class')).toBe(true);
+    describe('GIVEN: Params: all', () => {
+        describe('WHEN: all Params are provided', () => {
+            const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_ALL_PARAMS));
+            test('THEN: jest-axe tests pass', async () => {
+                const results = await axe($.html());
+                expect(results).toHaveNoViolations();
+            });
+            const faker = templateFaker();
+            const iconsSpy = faker.spy('icon');
+            faker.renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_ALL_PARAMS);
+            test('THEN: renders chevron icon next to each item', () => {
+                const iconTypes = iconsSpy.occurrences.map((occurrence) => occurrence.iconType);
+                expect(iconTypes).toEqual(['chevron', 'chevron']);
+            });
+        });
     });
-
-    it('has additionally provided style classes on `link` element', () => {
-        const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
-
-        expect($('.ons-breadcrumbs__link:first').hasClass('link-extra-class')).toBe(true);
-        expect($('.ons-breadcrumbs__link:first').hasClass('link-another-extra-class')).toBe(true);
+    describe('GIVEN: Params: classes', () => {
+        describe('WHEN: additional classes are provided', () => {
+            const $ = cheerio.load(
+                renderComponent('breadcrumbs', {
+                    ...EXAMPLE_BREADCRUMBS_REQUIRED_PARAMS,
+                    classes: 'extra-class another-extra-class',
+                }),
+            );
+            test('THEN: renders with correct additional classes', () => {
+                expect($('.ons-breadcrumbs').hasClass('extra-class')).toBe(true);
+                expect($('.ons-breadcrumbs').hasClass('another-extra-class')).toBe(true);
+            });
+        });
     });
-
-    it('has provided `url` on `link` elements', () => {
-        const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
-
-        const urls = mapAll($('.ons-breadcrumbs__link'), (node) => node.attr('href'));
-        expect(urls).toEqual(['https://example.com/', 'https://example.com/guide/']);
+    describe('GIVEN: Params: ariaLabel', () => {
+        describe('WHEN: ariaLabel is not provided', () => {
+            const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_REQUIRED_PARAMS));
+            test('THEN: renders with default aria-label of "Breadcrumbs"', () => {
+                expect($('.ons-breadcrumbs').attr('aria-label')).toBe('Breadcrumbs');
+            });
+        });
+        describe('WHEN: ariaLabel is provided', () => {
+            const $ = cheerio.load(
+                renderComponent('breadcrumbs', {
+                    ...EXAMPLE_BREADCRUMBS_REQUIRED_PARAMS,
+                    ariaLabel: 'Breadcrumbs label',
+                }),
+            );
+            test('THEN: renders with provided aria-label', () => {
+                expect($('.ons-breadcrumbs').attr('aria-label')).toBe('Breadcrumbs label');
+            });
+        });
     });
-
-    it('has provided `text` on `link` elements', () => {
-        const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
-
-        const labels = mapAll($('.ons-breadcrumbs__link'), (node) => node.text().trim());
-        expect(labels).toEqual(['Home', 'Guide']);
-    });
-
-    it('has provided `attributes` on `link` elements', () => {
-        const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
-
-        const testValuesA = mapAll($('.ons-breadcrumbs__link'), (node) => node.attr('data-a'));
-        expect(testValuesA).toEqual(['123', '789']);
-        const testValuesB = mapAll($('.ons-breadcrumbs__link'), (node) => node.attr('data-b'));
-        expect(testValuesB).toEqual(['456', 'ABC']);
+    describe('GIVEN: Params: id', () => {
+        describe('WHEN: id is provided', () => {
+            const $ = cheerio.load(
+                renderComponent('breadcrumbs', {
+                    ...EXAMPLE_BREADCRUMBS_REQUIRED_PARAMS,
+                    id: 'example-breadcrumbs',
+                }),
+            );
+            test('THEN: renders with provided id', () => {
+                expect($('.ons-breadcrumbs').attr('id')).toBe('example-breadcrumbs');
+            });
+        });
     });
-
-    it('has a "chevron" icon for each breadcrumb item', () => {
-        const faker = templateFaker();
-        const iconsSpy = faker.spy('icon');
-
-        faker.renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_MINIMAL);
-
-        const iconTypes = iconsSpy.occurrences.map((occurrence) => occurrence.iconType);
-        expect(iconTypes).toEqual(['chevron', 'chevron']);
+    describe('GIVEN: Params: itemsList (multiple)', () => {
+        describe('WHEN: itemClasses param is provided', () => {
+            const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_ALL_PARAMS));
+            test('THEN: renders item with provided style classes', () => {
+                expect($('.ons-breadcrumbs__item:first').hasClass('item-extra-class')).toBe(true);
+                expect($('.ons-breadcrumbs__item:first').hasClass('item-another-extra-class')).toBe(true);
+            });
+        });
+        describe('WHEN: linkClasses param is provided', () => {
+            const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_ALL_PARAMS));
+            test('THEN: renders link with provided style classes', () => {
+                expect($('.ons-breadcrumbs__link').hasClass('link-extra-class')).toBe(true);
+                expect($('.ons-breadcrumbs__link').hasClass('link-another-extra-class')).toBe(true);
+            });
+        });
+        describe('WHEN: id param is provided', () => {
+            const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_ALL_PARAMS));
+            test('THEN: renders items with provided id', () => {
+                const ids = mapAll($('.ons-breadcrumbs__link'), (node) => node.attr('id'));
+                expect(ids).toEqual(['first-breadcrumb', 'second-breadcrumb']);
+            });
+        });
+        describe('WHEN: url param is provided', () => {
+            const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_ALL_PARAMS));
+            test('THEN: renders items with provided url link', () => {
+                const urls = mapAll($('.ons-breadcrumbs__link'), (node) => node.attr('href'));
+                expect(urls).toEqual(['https://example.com/', 'https://example.com/guide/']);
+            });
+        });
+        describe('WHEN: text param is provided', () => {
+            const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_ALL_PARAMS));
+            test('THEN: renders item links with provided text', () => {
+                const labels = mapAll($('.ons-breadcrumbs__link'), (node) => node.text().trim());
+                expect(labels).toEqual(['Home', 'Guide']);
+            });
+        });
+        describe('WHEN: attributes param is provided', () => {
+            const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_ALL_PARAMS));
+            test('THEN: renders items with provided attributes', () => {
+                const testValuesA = mapAll($('.ons-breadcrumbs__link'), (node) => node.attr('data-a'));
+                expect(testValuesA).toEqual(['123', '789']);
+                const testValuesB = mapAll($('.ons-breadcrumbs__link'), (node) => node.attr('data-b'));
+                expect(testValuesB).toEqual(['456', 'ABC']);
+            });
+        });
     });
 });