Merge branch 'main' into major-release

ONSdigital · Sep 18, 2024 · 731dc69 · 731dc69
2 parents f3531ae + 1e4c58d
commit 731dc69
Show file tree

Hide file tree

Showing 9 changed files with 109 additions and 102 deletions.
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -21,7 +21,7 @@ jobs:
             - name: Zip templates
               run: zip -r templates.zip templates/*
             - name: Release
-              uses: softprops/action-gh-release@v1
+              uses: softprops/action-gh-release@v2
               with:
                   files: templates.zip
               env:

diff --git a/.gitignore b/.gitignore
@@ -15,6 +15,10 @@ backstop_data/bitmaps_test/
 backstop_data/html_report/
 backstop.config-for-docker.json
 
+# Generated from lighthouse tests
+.lighthouseci/
+lighthouse/urls.json
+
 # npm package folders
 /components/
 /page-templates/

diff --git a/README.md b/README.md
@@ -112,7 +112,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.
 

diff --git a/...rence/ds-vr-test__components_list_example-summary-list_0_document_0_desktop.png b/...rence/ds-vr-test__components_list_example-summary-list_0_document_0_desktop.png
diff --git a/...erence/ds-vr-test__components_list_example-summary-list_0_document_1_tablet.png b/...erence/ds-vr-test__components_list_example-summary-list_0_document_1_tablet.png
diff --git a/...erence/ds-vr-test__components_list_example-summary-list_0_document_2_mobile.png b/...erence/ds-vr-test__components_list_example-summary-list_0_document_2_mobile.png
diff --git a/src/components/browser-banner/_macro.spec.js b/src/components/browser-banner/_macro.spec.js
@@ -5,102 +5,101 @@ import * as cheerio from 'cheerio';
 import axe from '../../tests/helpers/axe';
 import { renderComponent } from '../../tests/helpers/rendering';
 
-const EXAMPLE_BROWSER_BANNER_DEFAULT = {};
-
-describe('macro: browser-banner', () => {
-    it('passes jest-axe checks with', async () => {
-        const $ = cheerio.load(renderComponent('browser-banner', EXAMPLE_BROWSER_BANNER_DEFAULT));
-
-        const results = await axe($.html());
-        expect(results).toHaveNoViolations();
-    });
-
-    it('has the default `bannerLeadingText`', () => {
-        const $ = cheerio.load(renderComponent('browser-banner', EXAMPLE_BROWSER_BANNER_DEFAULT));
-
-        const bannerLeadingText = $('.ons-browser-banner__lead').text().trim();
-        expect(bannerLeadingText).toBe('This website no longer supports your browser.');
-    });
-
-    it('has the default `bannerCTA`', () => {
-        const $ = cheerio.load(renderComponent('browser-banner', EXAMPLE_BROWSER_BANNER_DEFAULT));
-
-        const bannerCtaHtml = $('.ons-browser-banner__cta').text().trim();
-        expect(bannerCtaHtml).toBe('You can upgrade your browser to the latest version.');
-    });
-
-    it('has the default `bannerLinkUrl`', () => {
-        const $ = cheerio.load(renderComponent('browser-banner', EXAMPLE_BROWSER_BANNER_DEFAULT));
-
-        expect($('.ons-browser-banner__link').attr('href')).toBe('https://www.ons.gov.uk/help/browsers');
-    });
-
-    it('has `container--wide` class when `wide` is true', () => {
-        const $ = cheerio.load(
-            renderComponent('browser-banner', {
-                ...EXAMPLE_BROWSER_BANNER_DEFAULT,
-                wide: true,
-            }),
-        );
-
-        expect($('.ons-container').hasClass('ons-container--wide')).toBe(true);
+describe('FOR: browser-banner', () => {
+    describe('GIVEN: Params: default', () => {
+        describe('WHEN: params are at default state', () => {
+            const $ = cheerio.load(renderComponent('browser-banner', {}));
+
+            it('THEN: passes jest-axe checks', async () => {
+                const results = await axe($.html());
+                expect(results).toHaveNoViolations();
+            });
+
+            it('THEN: has the english default bannerLeadingText', () => {
+                const bannerLeadingText = $('.ons-browser-banner__lead').text().trim();
+                expect(bannerLeadingText).toBe('This website no longer supports your browser.');
+            });
+
+            it('THEN: has the english default bannerCTA', () => {
+                const bannerCtaHtml = $('.ons-browser-banner__cta').text().trim();
+                expect(bannerCtaHtml).toBe('You can upgrade your browser to the latest version.');
+            });
+
+            it('THEN: has the english default bannerLinkUrl', () => {
+                expect($('.ons-browser-banner__link').attr('href')).toBe('https://www.ons.gov.uk/help/browsers');
+            });
+        });
+
+        describe('WHEN: params are at default and language is set to welsh', () => {
+            const $ = cheerio.load(renderComponent('browser-banner', { lang: 'cy' }));
+
+            it('THEN: has the welsh default bannerLeadingText', () => {
+                const bannerLeadingText = $('.ons-browser-banner__lead').text().trim();
+                expect(bannerLeadingText).toBe('Nid yw’r wefan hon yn cefnogi eich porwr mwyach.');
+            });
+
+            it('THEN: has the welsh default bannerCTA', () => {
+                const bannerCtaHtml = $('.ons-browser-banner__cta').text().trim();
+                expect(bannerCtaHtml).toBe('Gallwch ddiweddaru eich porwr i’r fersiwn ddiweddaraf.');
+            });
+
+            it('THEN: has the welsh default bannerLinkUrl', () => {
+                expect($('.ons-browser-banner__link').attr('href')).toBe('https://cy.ons.gov.uk/help/browsers');
+            });
+        });
     });
 
-    it('does not have `container--wide` class when `wide` is not set', () => {
-        const $ = cheerio.load(
-            renderComponent('browser-banner', {
-                ...EXAMPLE_BROWSER_BANNER_DEFAULT,
-            }),
-        );
-
-        expect($('.ons-container').hasClass('ons-container--wide')).toBe(false);
-    });
-
-    it('has `container--full-width` class when `fullWidth` is true', () => {
-        const $ = cheerio.load(
-            renderComponent('browser-banner', {
-                ...EXAMPLE_BROWSER_BANNER_DEFAULT,
-                fullWidth: true,
-            }),
-        );
-
-        expect($('.ons-container').hasClass('ons-container--full-width')).toBe(true);
-    });
-
-    it('does not have `container--full-width` class when `fullWidth` is not set', () => {
-        const $ = cheerio.load(
-            renderComponent('browser-banner', {
-                ...EXAMPLE_BROWSER_BANNER_DEFAULT,
-            }),
-        );
-
-        expect($('.ons-container').hasClass('ons-container--full-width')).toBe(false);
+    describe('GIVEN: Params: wide', () => {
+        describe('WHEN: wide is set to true', () => {
+            it('THEN: has container--wide class', () => {
+                const $ = cheerio.load(
+                    renderComponent('browser-banner', {
+                        ...{},
+                        wide: true,
+                    }),
+                );
+
+                expect($('.ons-container').hasClass('ons-container--wide')).toBe(true);
+            });
+        });
+
+        describe('WHEN: wide is not set', () => {
+            it('THEN: does not have container--wide class', () => {
+                const $ = cheerio.load(
+                    renderComponent('browser-banner', {
+                        ...{},
+                    }),
+                );
+
+                expect($('.ons-container').hasClass('ons-container--wide')).toBe(false);
+            });
+        });
     });
-});
-
-describe('mode: Welsh language', () => {
-    it('has the welsh version of default `bannerLeadingText`', () => {
-        const $ = cheerio.load(
-            renderComponent('browser-banner', {
-                ...EXAMPLE_BROWSER_BANNER_DEFAULT,
-                lang: 'cy',
-            }),
-        );
-
-        const bannerLeadingText = $('.ons-browser-banner__lead').text().trim();
-        expect(bannerLeadingText).toBe('Nid yw’r wefan hon yn cefnogi eich porwr mwyach.');
-    });
-
-    it('has the welsh version of default `bannerCTA`', () => {
-        const $ = cheerio.load(renderComponent('browser-banner', { lang: 'cy' }));
-
-        const bannerCtaHtml = $('.ons-browser-banner__cta').text().trim();
-        expect(bannerCtaHtml).toBe('Gallwch ddiweddaru eich porwr i’r fersiwn ddiweddaraf.');
-    });
-
-    it('has the welsh version of default `bannerLinkUrl`', () => {
-        const $ = cheerio.load(renderComponent('browser-banner', { lang: 'cy' }));
 
-        expect($('.ons-browser-banner__link').attr('href')).toBe('https://cy.ons.gov.uk/help/browsers');
+    describe('GIVEN: Params: fullWidth', () => {
+        describe('WHEN: fullWidth is set to true', () => {
+            it('THEN: has container--full-width class', () => {
+                const $ = cheerio.load(
+                    renderComponent('browser-banner', {
+                        ...{},
+                        fullWidth: true,
+                    }),
+                );
+
+                expect($('.ons-container').hasClass('ons-container--full-width')).toBe(true);
+            });
+        });
+
+        describe('WHEN: fullWidth is not set', () => {
+            it('THEN: does not have container--full-width class', () => {
+                const $ = cheerio.load(
+                    renderComponent('browser-banner', {
+                        ...{},
+                    }),
+                );
+
+                expect($('.ons-container').hasClass('ons-container--full-width')).toBe(false);
+            });
+        });
     });
 });
diff --git a/src/components/list/_list.scss b/src/components/list/_list.scss
@@ -109,8 +109,10 @@
         }
         .ons-list__prefix,
         .ons-list__suffix {
+            @extend .ons-u-m-no;
             &--icon-check .ons-icon {
                 fill: var(--ons-color-leaf-green) !important;
+                @extend .ons-u-mr-s;
             }
         }
     }

diff --git a/src/components/list/example-summary-list.njk b/src/components/list/example-summary-list.njk
@@ -1,10 +1,12 @@
 {% from "components/list/_macro.njk" import onsList %}
 {{
     onsList({
+        "iconPosition": "before",
         "variants": "summary",
         "itemsList": [
             {
-              "text": 'birth certificate'
+                "text": 'birth certificate',
+                "iconType": "check"
             },
             {
                 "text": 'national insurance number'