@ons/design-system 70.0.16 → 70.0.17

package/README.md

@@ -44,6 +44,15 @@ yarn start
 
 Once the server has started, navigate to <http://localhost:3030>
 
+## Lighthouse Testing - local
+
+This project uses [LHCI](https://www.npmjs.com/package/@lhci/cli).
+
+```bash
+yarn global add @lhci/cli
+yarn test-lighthouse 
+```
+
 ## Testing - macros and scripts
 
 This project uses [jest](https://jestjs.io/docs/cli) and supports its command line options.
@@ -112,7 +121,7 @@ It is sometimes useful to adjust the following settings when writing tests or di
 
 ## Testing - Visual regression tests
 
-This project uses [Backstop JS](https://github.com/garris/BackstopJS) for visual regression testing. The tests run in Chrome headless using Pupeteer inside docker and run in three viewports; 1920 (desktop), 768 (tablet) and 375 (mobile). Reference images are stored in Git LFS and any approved changes will automatically be stored in Git LFS when pushed to the repository.
+This project uses [Backstop JS](https://github.com/garris/BackstopJS) for visual regression testing. The tests run in Chrome headless using Puppeteer inside docker and run in three viewports; 1920 (desktop), 768 (tablet) and 375 (mobile). Reference images are stored in Git LFS and any approved changes will automatically be stored in Git LFS when pushed to the repository.
 
 The visual tests will run automatically on pull requests and the result will be available in the Github Action logs. If the tests fail, the process for viewing the failures and approving changes will need to be handled locally using the following workflow and commands.
 

package/components/access-code/_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: access-code', () => {
+describe('FOR: Macro: Access-code', () => {
     describe('GIVEN: Params: required', () => {
         describe('WHEN: all required params are provided', () => {
             const $ = cheerio.load(
@@ -24,7 +24,7 @@ describe('FOR: access-code', () => {
             test('THEN: autocomplete is disabled on text input', () => {
                 expect($('input').attr('autocomplete')).toBe('off');
             });
-            test('THEN: text input has automatic capitalisation', () => {
+            test('THEN: text input has autocapitalize attribute', () => {
                 expect($('input').attr('autocapitalize')).toBe('characters');
             });
         });

package/components/accordion/_macro.spec.js

@@ -4,64 +4,82 @@ import * as cheerio from 'cheerio';
 
 import axe from '../../tests/helpers/axe';
 import { renderComponent } from '../../tests/helpers/rendering';
-
-const EXAMPLE_ACCORDION_WITH_TWO_ITEMS = {
-    id: 'accordion-identifier',
-    itemsList: [
-        {
-            title: 'Title for item 1',
-            content: 'Content for item 1',
-        },
-        {
-            title: 'Title for item 2',
-            content: 'Content for item 2',
-        },
-    ],
-};
-
-const EXAMPLE_ACCORDION = {
-    ...EXAMPLE_ACCORDION_WITH_TWO_ITEMS,
-    allButton: {
-        open: 'Open label',
-        close: 'Close label',
-    },
-};
-
-describe('macro: accordion', () => {
-    it('passes jest-axe checks', async () => {
-        const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION));
-
-        const results = await axe($.html());
-        expect(results).toHaveNoViolations();
+import { EXAMPLE_ACCORDION } from './_test_examples';
+
+describe('FOR: Macro: Accordion', () => {
+    describe('GIVEN: Params: required', () => {
+        describe('WHEN: all required params are provided', () => {
+            const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION));
+            test('THEN: jest-axe checks pass', async () => {
+                const results = await axe($.html());
+                expect(results).toHaveNoViolations();
+            });
+        });
     });
-
-    it('has the provided `id` attribute', () => {
-        const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION_WITH_TWO_ITEMS));
-
-        expect($('.ons-accordion').attr('id')).toBe('accordion-identifier');
+    describe('GIVEN: Params: required and allButton', () => {
+        describe('WHEN: required and allButton params are provided', () => {
+            const $ = cheerio.load(
+                renderComponent('accordion', {
+                    ...EXAMPLE_ACCORDION,
+                    allButton: {
+                        open: 'Open label',
+                        close: 'Close label',
+                    },
+                }),
+            );
+            test('THEN: jest-axe checks pass', async () => {
+                const results = await axe($.html());
+                expect(results).toHaveNoViolations();
+            });
+        });
     });
-
-    it('has additionally provided style classes', () => {
-        const $ = cheerio.load(
-            renderComponent('accordion', {
-                ...EXAMPLE_ACCORDION_WITH_TWO_ITEMS,
-                classes: 'extra-class another-extra-class',
-            }),
-        );
-
-        expect($('.ons-accordion').hasClass('extra-class')).toBe(true);
-        expect($('.ons-accordion').hasClass('another-extra-class')).toBe(true);
+    describe('GIVEN: Params: id', () => {
+        describe('WHEN: id is provided', () => {
+            const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION));
+            test('THEN: renders with provided id', () => {
+                expect($('.ons-accordion').attr('id')).toBe('accordion-identifier');
+            });
+        });
     });
-
-    describe('item', () => {
-        it('has provided title text', () => {
-            const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION_WITH_TWO_ITEMS));
-
-            const titleText = $('.ons-details__title').first().text().trim();
-            expect(titleText).toBe('Title for item 1');
+    describe('GIVEN: Params: classes', () => {
+        describe('WHEN: additional style classes are provided', () => {
+            const $ = cheerio.load(
+                renderComponent('accordion', {
+                    ...EXAMPLE_ACCORDION,
+                    classes: 'extra-class another-extra-class',
+                }),
+            );
+            test('THEN: renders with provided classes', () => {
+                expect($('.ons-accordion').hasClass('extra-class')).toBe(true);
+                expect($('.ons-accordion').hasClass('another-extra-class')).toBe(true);
+            });
         });
-
-        it('has title with provided tag override', () => {
+    });
+    describe('GIVEN: Params: itemsList: AccordionItem', () => {
+        describe('WHEN: title is provided', () => {
+            const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION));
+            test('THEN: renders title with provided text', () => {
+                const titleText = $('.ons-details__title').first().text().trim();
+                expect(titleText).toBe('Title for item 1');
+            });
+        });
+        describe('WHEN: titleTag is not provided', () => {
+            const $ = cheerio.load(
+                renderComponent('accordion', {
+                    itemsList: [
+                        {
+                            title: 'Title for item 1',
+                            content: 'Content for item 1',
+                        },
+                    ],
+                }),
+            );
+            test('THEN: item title renders with default heading tag', () => {
+                const titleTag = $('.ons-details__title')[0].tagName;
+                expect(titleTag).toBe('h2');
+            });
+        });
+        describe('WHEN: titleTag is provided', () => {
             const $ = cheerio.load(
                 renderComponent('accordion', {
                     itemsList: [
@@ -73,19 +91,19 @@ describe('macro: accordion', () => {
                     ],
                 }),
             );
-
-            const titleTag = $('.ons-details__title')[0].tagName;
-            expect(titleTag).toBe('h5');
+            test('THEN: item title renders with provided heading tag', () => {
+                const titleTag = $('.ons-details__title')[0].tagName;
+                expect(titleTag).toBe('h5');
+            });
         });
-
-        it('has provided content text', () => {
-            const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION_WITH_TWO_ITEMS));
-
-            const titleText = $('.ons-details__content').first().text().trim();
-            expect(titleText).toBe('Content for item 1');
+        describe('WHEN: content is provided', () => {
+            const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION));
+            test('THEN: item content renders with provided text', () => {
+                const titleText = $('.ons-details__content').first().text().trim();
+                expect(titleText).toBe('Content for item 1');
+            });
         });
-
-        it('has additionally provided `attributes`', () => {
+        describe('WHEN: attributes are provided', () => {
             const $ = cheerio.load(
                 renderComponent('accordion', {
                     itemsList: [
@@ -99,12 +117,12 @@ describe('macro: accordion', () => {
                     ],
                 }),
             );
-
-            expect($('.ons-details').attr('a')).toBe('123');
-            expect($('.ons-details').attr('b')).toBe('456');
+            test('THEN: item renders with provided HTML attributes', () => {
+                expect($('.ons-details').attr('a')).toBe('123');
+                expect($('.ons-details').attr('b')).toBe('456');
+            });
         });
-
-        it('has additionally provided `headingAttributes`', () => {
+        describe('WHEN: headingAttributes are provided', () => {
             const $ = cheerio.load(
                 renderComponent('accordion', {
                     itemsList: [
@@ -118,12 +136,12 @@ describe('macro: accordion', () => {
                     ],
                 }),
             );
-
-            expect($('.ons-details__heading').attr('a')).toBe('123');
-            expect($('.ons-details__heading').attr('b')).toBe('456');
+            test('THEN: item header renders with provided HTML attributes', () => {
+                expect($('.ons-details__heading').attr('a')).toBe('123');
+                expect($('.ons-details__heading').attr('b')).toBe('456');
+            });
         });
-
-        it('has additionally provided `contentAttributes`', () => {
+        describe('WHEN: contentAttributes are provided', () => {
             const $ = cheerio.load(
                 renderComponent('accordion', {
                     itemsList: [
@@ -138,31 +156,37 @@ describe('macro: accordion', () => {
                     ],
                 }),
             );
-
-            expect($('.ons-details__content').attr('a')).toBe('123');
-            expect($('.ons-details__content').attr('b')).toBe('456');
+            test('THEN: item content renders with provided HTML attributes', () => {
+                expect($('.ons-details__content').attr('a')).toBe('123');
+                expect($('.ons-details__content').attr('b')).toBe('456');
+            });
         });
     });
-
-    describe('toggle all button', () => {
-        it('outputs a button with the expected class', () => {
+    describe('GIVEN: Params: allButton: AccordionButton', () => {
+        describe('WHEN: required open/close params are provided', () => {
             const $ = cheerio.load(
                 renderComponent('accordion', {
-                    ...EXAMPLE_ACCORDION_WITH_TWO_ITEMS,
+                    ...EXAMPLE_ACCORDION,
                     allButton: {
                         open: 'Open label',
                         close: 'Close label',
                     },
                 }),
             );
-
-            expect($('button.ons-accordion__toggle-all').length).toBe(1);
+            test('THEN: renders button with expected class', () => {
+                expect($('button.ons-accordion__toggle-all').length).toBe(1);
+            });
+            test('THEN: renders button with provided open text', () => {
+                expect($('.ons-accordion__toggle-all-inner').text()).toBe('Open label');
+            });
+            test('THEN: renders button with provided close text', () => {
+                expect($('button.ons-accordion__toggle-all').attr('data-close-all')).toBe('Close label');
+            });
         });
-
-        it('has additionally provided `attributes`', () => {
+        describe('WHEN: attributes are provided', () => {
             const $ = cheerio.load(
                 renderComponent('accordion', {
-                    ...EXAMPLE_ACCORDION_WITH_TWO_ITEMS,
+                    ...EXAMPLE_ACCORDION,
                     allButton: {
                         open: 'Open label',
                         close: 'Close label',
@@ -173,9 +197,56 @@ describe('macro: accordion', () => {
                     },
                 }),
             );
-
-            expect($('button.ons-accordion__toggle-all').attr('a')).toBe('123');
-            expect($('button.ons-accordion__toggle-all').attr('b')).toBe('456');
+            test('THEN: renders button with additional attributes provided', () => {
+                expect($('button.ons-accordion__toggle-all').attr('a')).toBe('123');
+                expect($('button.ons-accordion__toggle-all').attr('b')).toBe('456');
+            });
+        });
+    });
+    describe('GIVEN: Params: saveState', () => {
+        describe('WHEN: saveState param is not provided', () => {
+            const $ = cheerio.load(
+                renderComponent('accordion', {
+                    ...EXAMPLE_ACCORDION,
+                }),
+            );
+            test('THEN: renders without saveState attribute', () => {
+                expect($('.ons-details--accordion').attr('saveState')).toBe(undefined);
+            });
+        });
+        describe('WHEN: saveState param is set to true', () => {
+            const $ = cheerio.load(
+                renderComponent('accordion', {
+                    ...EXAMPLE_ACCORDION,
+                    saveState: true,
+                }),
+            );
+            test('THEN: renders with saveState attribute', () => {
+                expect($('.ons-details--accordion').attr('saveState'));
+            });
+        });
+    });
+    describe('GIVEN: Params: open', () => {
+        describe('WHEN: open param is not provided', () => {
+            const $ = cheerio.load(
+                renderComponent('accordion', {
+                    ...EXAMPLE_ACCORDION,
+                }),
+            );
+            test('THEN: renders with accordion items closed on page load', () => {
+                expect($('.ons-details--accordion').attr('open')).toBe(undefined);
+            });
+        });
+        describe('WHEN: open param is set to true', () => {
+            const $ = cheerio.load(
+                renderComponent('accordion', {
+                    ...EXAMPLE_ACCORDION,
+                    open: true,
+                }),
+            );
+            test('THEN: renders with accordion items open on page load', () => {
+                expect($('.ons-details--accordion').attr('open'));
+            });
         });
     });
 });

package/components/accordion/_test_examples.js

@@ -0,0 +1,13 @@
+export const EXAMPLE_ACCORDION = {
+    id: 'accordion-identifier',
+    itemsList: [
+        {
+            title: 'Title for item 1',
+            content: 'Content for item 1',
+        },
+        {
+            title: 'Title for item 2',
+            content: 'Content for item 2',
+        },
+    ],
+};

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/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']);
+            });
+        });
     });
 });

package/components/breadcrumbs/_test_examples.js

@@ -0,0 +1,36 @@
+export const EXAMPLE_BREADCRUMBS_REQUIRED_PARAMS = {
+    itemsList: [
+        {
+            url: 'https://example.com/',
+            text: 'Home',
+        },
+    ],
+};
+
+export const EXAMPLE_BREADCRUMBS_ALL_PARAMS = {
+    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',
+            },
+        },
+    ],
+};

package/components/browser-banner/_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: browser-banner', () => {
+describe('FOR: Macro: Browser-banner', () => {
     describe('GIVEN: Params: default', () => {
         describe('WHEN: params are at default state', () => {
             const $ = cheerio.load(renderComponent('browser-banner', {}));

package/components/button/_macro.njk

@@ -72,7 +72,7 @@
     {% else %}
         type="{{ buttonType }}"
     {% endif %}
-    class="ons-btn{{ ' ' + params.classes if params.classes else '' }}{% if params.variants and params.variants is not string %}{% for variant in params.variants %}{{ ' ' }}ons-btn--{{ variant }}{% endfor %}{% else %}{{ ' ' }}ons-btn--{{ params.variants }}{% endif %}{{ ' ons-btn--link ons-js-submit-btn' if params.url }}{{ variantClasses }}"
+    class="ons-btn{{ ' ' + params.classes if params.classes else '' }}{% if params.variants and params.variants is not string %}{% for variant in params.variants %}{{ ' ' }}ons-btn--{{ variant }}{% endfor %}{% elif params.variants %}{{ ' ' }}ons-btn--{{ params.variants }}{% endif %}{{ ' ons-btn--link ons-js-submit-btn' if params.url }}{{ variantClasses }}"
     {% if params.id %}id="{{ params.id }}"{% endif %}
     {% if params.value and tag != "a" %}value="{{ params.value }}"{% endif %}
     {% if params.name and tag != "a" %}name="{{ params.name }}"{% endif %}
@@ -111,7 +111,7 @@
         {%- endif -%}
     </span>
     {% if params.url and params.newWindow %}
-        <span class="ons-btn__new-window-description ons-u-vh"> ({{ params.newWindowDescription | default("opens in a new tab") }})</span>
+        <span class="ons-btn__new-window-description ons-u-vh">({{ params.newWindowDescription | default("opens in a new tab") }})</span>
     {% endif %}
     {% if params.buttonContext %}
         <span class="ons-btn__context ons-u-vh">{{ params.buttonContext }}</span>

package/components/button/_macro.spec.js

@@ -393,7 +393,7 @@ describe('macro: button', () => {
                 }),
             );
 
-            expect($('.ons-btn__new-window-description').text()).toBe(' (opens in a new tab)');
+            expect($('.ons-btn__new-window-description').text()).toBe('(opens in a new tab)');
         });
 
         it('has a custom new window description when `newWindow` is `true` and `newWindowDescription` is provided', () => {
@@ -405,7 +405,7 @@ describe('macro: button', () => {
                 }),
             );
 
-            expect($('.ons-btn__new-window-description').text()).toBe(' (custom opens in a new window text)');
+            expect($('.ons-btn__new-window-description').text()).toBe('(custom opens in a new window text)');
         });
 
         it('has the `download` attribute when `variants` contains "download"', () => {

package/components/header/_macro.spec.js

@@ -16,7 +16,7 @@ import {
     EXAMPLE_HEADER_NAVIGATION_WITH_SITESEARCHAUTOSUGGEST,
 } from './_test-examples';
 
-describe('FOR: Header', () => {
+describe('FOR: Macro: Header', () => {
     describe('GIVEN: Params: none', () => {
         describe('WHEN: All params are at default state', () => {
             const $ = cheerio.load(

package/components/text-indent/example-text-indent.njk

@@ -1,6 +1,6 @@
 {% from "components/text-indent/_macro.njk" import onsTextIndent %}
 {{-
     onsTextIndent({
-        text: '<p>Telephone: 0800 141 2021<br>Monday to Friday, 8 am to 7pm<br>Saturday, 8am to 4pm</p>'
+        "text": '<p>Telephone: 0800 141 2021<br>Monday to Friday, 8 am to 7pm<br>Saturday, 8am to 4pm</p>'
     })
 -}}

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@ons/design-system",
     "description": "ONS Design System built CSS, JS, and Nunjucks templates",
-    "version": "70.0.16",
+    "version": "70.0.17",
     "main": "index.js",
     "license": "MIT",
     "author": {
@@ -15,6 +15,7 @@
         "test:no-build": "TEST_PORT=3020 TEST_WITH_PUPPETEER=1 jest '.*\\.spec\\.js'",
         "test:with-log": "yarn test --no-color 2>test.log",
         "test:start-server": "TEST_PORT=3020 gulp start-dev-server",
+        "test-lighthouse": "yarn build && node ./lighthouse/lighthouse-get-urls.js && lhci autorun --config=./lighthouse/lighthouserc.js",
         "build": "yarn && yarn tidy-clean && NODE_ENV=production gulp build",
         "build-serve": "yarn build && gulp start-dev-server",
         "npm-bundle": "NODE_ENV=production yarn tidy-clean && NODE_ENV=production gulp build-package && babel-node ci/generate-npm-package.js",
@@ -95,7 +96,7 @@
         "gulp-sourcemaps": "^3.0.0",
         "gulp-terser": "^2.0.1",
         "http-server": "^14.1.1",
-        "husky": "^8.0.3",
+        "husky": "^9.1.6",
         "jest": "^29.6.1",
         "jest-axe": "^8.0.0",
         "jest-environment-jsdom": "^29.6.1",