@ons/design-system 70.0.15 → 70.0.17

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,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: Macro: 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);
+            });
+        });
     });
 });

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

@@ -14,9 +14,9 @@ import {
     EXAMPLE_HEADER_LANGUAGE_CONFIG,
     EXAMPLE_HEADER_NAVIGATION_WITH_SUBNAVIGATION_CONFIG,
     EXAMPLE_HEADER_NAVIGATION_WITH_SITESEARCHAUTOSUGGEST,
-} from './_test_examples';
+} 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/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;
             }
         }
     }

package/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'

package/components/summary/_summary.scss

@@ -88,10 +88,6 @@ $hub-row-spacing: 1.3rem;
         }
     }
 
-    &__actions {
-        white-space: nowrap;
-    }
-
     &__spacer {
         background: var(--ons-color-black);
         display: inline-block;
@@ -190,6 +186,7 @@ $hub-row-spacing: 1.3rem;
 
         &__button {
             align-self: flex-start;
+            text-align: right;
         }
 
         &__values--2 {

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>'
     })
 -}}