@ons/design-system 73.0.4 → 73.2.0

package/components/header/_macro.spec.js

@@ -18,6 +18,7 @@ import {
     EXAMPLE_HEADER_NAVIGATION_WITH_SITESEARCHAUTOSUGGEST,
     EXAMPLE_HEADER_MENU_LINKS,
     EXAMPLE_HEADER_SEARCH_AND_MENU_LINKS,
+    EXAMPLE_HEADER_SEARCH,
 } from './_test-examples';
 
 describe('FOR: Macro: Header', () => {
@@ -812,6 +813,228 @@ describe('FOR: Macro: Header', () => {
             });
         });
     });
+
+    describe('GIVEN: Params: search', () => {
+        describe('WHEN: search is provided', () => {
+            const faker = templateFaker();
+            const buttonSpy = faker.spy('button', { suppressOutput: true });
+            faker.renderComponent('header', { ...EXAMPLE_HEADER_SEARCH, variants: 'basic' });
+
+            test('THEN: renders search icon button', () => {
+                expect(buttonSpy.occurrences[0]).toEqual({
+                    iconType: 'search',
+                    classes: 'ons-u-fs-s--b ons-js-toggle-header-search ons-btn--close ons-btn--search-icon active disabled',
+                    type: 'button',
+                    variants: 'search',
+                    attributes: {
+                        'aria-controls': 'search-id',
+                        'aria-expanded': 'true',
+                        'aria-label': 'Custom search button aria label',
+                        'aria-disabled': 'true',
+                    },
+                });
+            });
+        });
+
+        describe('WHEN: links are provided in search', () => {
+            const $ = cheerio.load(renderComponent('header', { ...EXAMPLE_HEADER_SEARCH, variants: 'basic' }));
+
+            test('THEN: renders items list', () => {
+                const itemsList = $('.ons-list--bare .ons-list__item').length;
+                expect(itemsList).toBeGreaterThan(0);
+            });
+
+            test('THEN: renders correct links for items list', () => {
+                const searchItemsLinks = mapAll($('.ons-list--bare .ons-list__item a'), (node) => node.attr('href'));
+                expect(searchItemsLinks).toEqual(['#1', '#2', '#3']);
+            });
+
+            test('THEN: renders correct text for items list', () => {
+                const searchItemsText = mapAll($('.ons-list--bare .ons-list__item a'), (node) => node.text().trim());
+                expect(searchItemsText).toEqual(['Popular Search 1', 'Popular Search 2', 'Popular Search 3']);
+            });
+        });
+
+        describe('WHEN: search parameter is missing', () => {
+            const $ = cheerio.load(renderComponent('header', EXAMPLE_HEADER_BASIC));
+
+            test('THEN: does not render search icon button', () => {
+                expect($('.ons-js-toggle-services').length).toBe(0);
+            });
+
+            test('THEN: does not render search input form', () => {
+                expect($('.ons-header-nav-search').length).toBe(0);
+            });
+
+            test('THEN: does not render items list', () => {
+                expect($('.ons-list--bare').length).toBe(0);
+            });
+        });
+
+        describe('WHEN: search is provided and the header variant is not basic', () => {
+            const $ = cheerio.load(renderComponent('header', { ...EXAMPLE_HEADER_SEARCH, variants: 'neutral' }));
+
+            test('THEN: does not render the search icon button', () => {
+                expect($('.ons-js-toggle-services').length).toBe(0);
+            });
+        });
+
+        describe('WHEN: heading parameter is provided', () => {
+            const $ = cheerio.load(renderComponent('header', { ...EXAMPLE_HEADER_SEARCH, variants: 'basic' }));
+
+            test('THEN: it renders heading with provided text', () => {
+                expect($('.ons-header-nav-search__heading').text().trim()).toBe('Header Search');
+            });
+        });
+
+        describe('WHEN: id parameter is provided', () => {
+            const $ = cheerio.load(renderComponent('header', { ...EXAMPLE_HEADER_SEARCH, variants: 'basic' }));
+
+            test('THEN: applies id to search links ', () => {
+                expect($('#search-id').length).toBe(1);
+            });
+        });
+
+        describe('WHEN: ariaLabel parameter is provided', () => {
+            const $ = cheerio.load(renderComponent('header', { ...EXAMPLE_HEADER_SEARCH, variants: 'basic' }));
+
+            test('THEN: applies aria label to the search links', () => {
+                expect($('.ons-header-nav-search').attr('aria-label')).toBe('Header Search');
+            });
+        });
+
+        describe('WHEN: classes parameter is provided', () => {
+            const $ = cheerio.load(renderComponent('header', { ...EXAMPLE_HEADER_SEARCH, variants: 'basic' }));
+
+            test('THEN: it renders classes with provided value', () => {
+                expect($('.ons-header-nav-search').hasClass('custom-class')).toBe(true);
+            });
+        });
+
+        describe('WHEN: using basic header variant and search is active & disabled by default before JS loads', () => {
+            const $ = cheerio.load(renderComponent('header', { ...EXAMPLE_HEADER_SEARCH, variants: 'basic' }));
+            const $searchBtn = $('.ons-js-toggle-header-search');
+
+            test('THEN: adds the "active" class to the search toggle button', () => {
+                expect($searchBtn.hasClass('active')).toBe(true);
+            });
+
+            test('THEN: adds the "disabled" class to the search toggle button', () => {
+                expect($searchBtn.hasClass('disabled')).toBe(true);
+            });
+
+            test('THEN: sets aria-disabled="true" on the search toggle button', () => {
+                expect($searchBtn.attr('aria-disabled')).toBe('true');
+            });
+        });
+
+        describe('WHEN: search is provided with all custom properties', () => {
+            const faker = templateFaker();
+            const buttonSpy = faker.spy('button', { suppressOutput: true });
+            faker.renderComponent('header', { ...EXAMPLE_HEADER_SEARCH, variants: 'basic' });
+            test('THEN: renders search icon button with custom aria-label', () => {
+                expect(buttonSpy.occurrences[0]).toBeDefined();
+                expect(buttonSpy.occurrences[0].attributes['aria-label']).toBe('Custom search button aria label');
+            });
+        });
+
+        describe('WHEN: toggleAriaLabel is not provided', () => {
+            const faker = templateFaker();
+            const buttonSpy = faker.spy('button', { suppressOutput: true });
+            faker.renderComponent('header', {
+                ...EXAMPLE_HEADER_SEARCH,
+                search: {
+                    ...EXAMPLE_HEADER_SEARCH.links,
+                    toggleAriaLabel: undefined,
+                },
+                variants: 'basic',
+            });
+            test('THEN: renders search icon button with default aria-label', () => {
+                expect(buttonSpy.occurrences[0]).toBeDefined();
+                expect(buttonSpy.occurrences[0].attributes['aria-label']).toBe('Toggle search');
+            });
+        });
+        describe('WHEN: navButtonAriaLabel is provided', () => {
+            const faker = templateFaker();
+            const buttonSpy = faker.spy('button', { suppressOutput: true });
+            faker.renderComponent('header', {
+                ...EXAMPLE_HEADER_SEARCH,
+                siteSearchAutosuggest: {},
+            });
+            test('THEN: renders search navigation button with custom aria-label', () => {
+                const found = buttonSpy.occurrences.find(
+                    (btn) => btn.attributes && btn.attributes['aria-label'] === 'Custom search nav button aria label',
+                );
+                expect(found).toBeDefined();
+            });
+        });
+        describe('WHEN: navButtonAriaLabel is not provided', () => {
+            const faker = templateFaker();
+            const buttonSpy = faker.spy('button', { suppressOutput: true });
+            faker.renderComponent('header', {
+                ...EXAMPLE_HEADER_SEARCH,
+                search: {
+                    ...EXAMPLE_HEADER_SEARCH.search,
+                    navButtonAriaLabel: undefined,
+                },
+                siteSearchAutosuggest: {},
+            });
+            test('THEN: renders search navigation button with default aria-label', () => {
+                const found = buttonSpy.occurrences.find((btn) => btn.attributes && btn.attributes['aria-label'] === 'Toggle search');
+                expect(found).toBeDefined();
+            });
+        });
+
+        describe('WHEN: inputLabel is provided', () => {
+            const $ = cheerio.load(renderComponent('header', { ...EXAMPLE_HEADER_SEARCH, variants: 'basic' }));
+            test('THEN: renders search input with custom label', () => {
+                expect($('#header-search-input-label').text().trim()).toBe('Custom search input label');
+            });
+        });
+        describe('WHEN: inputLabel is not provided', () => {
+            const $ = cheerio.load(
+                renderComponent('header', {
+                    ...EXAMPLE_HEADER_SEARCH,
+                    search: {
+                        ...EXAMPLE_HEADER_SEARCH.search,
+                        form: { inputLabel: undefined },
+                    },
+                    variants: 'basic',
+                }),
+            );
+            test('THEN: renders search input with default label', () => {
+                expect($('#header-search-input-label').text().trim()).toBe('Search the ONS');
+            });
+        });
+        describe('WHEN: buttonText is provided', () => {
+            const $ = cheerio.load(renderComponent('header', { ...EXAMPLE_HEADER_SEARCH, variants: 'basic' }));
+
+            test('THEN: renders the visually hidden search navigation button text', () => {
+                const $button = $('.ons-search__btn.ons-btn--header-search');
+                const hiddenText = $button.find('.ons-u-vh').text().trim();
+                expect(hiddenText).toBe(EXAMPLE_HEADER_SEARCH.search.form.buttonText);
+            });
+        });
+        describe('WHEN: buttonText is not provided', () => {
+            const $ = cheerio.load(
+                renderComponent('header', {
+                    ...EXAMPLE_HEADER_SEARCH,
+                    search: {
+                        ...EXAMPLE_HEADER_SEARCH.search,
+                        form: { buttonText: undefined },
+                    },
+                    variants: 'basic',
+                }),
+            );
+
+            test('THEN: renders the default fallback search navigation button text', () => {
+                const $button = $('.ons-search__btn.ons-btn--header-search');
+                const hiddenText = $button.find('.ons-u-vh').text().trim();
+                expect(hiddenText).toBe('Search');
+            });
+        });
+    });
+
     describe('GIVEN: Params: searchLinks', () => {
         describe('WHEN: searchLinks are provided', () => {
             const faker = templateFaker();

package/components/header/example-header-basic-with-search-and-language-DEPRECATED.njk

@@ -0,0 +1,207 @@
+---
+'fullWidth': true
+---
+
+{% from "components/header/_macro.njk" import onsHeader %}
+
+{{
+    onsHeader({
+        "variants": 'basic',
+        "language": {
+            "languages": [
+                {
+                    "url": '#0',
+                    "isoCode": 'en',
+                    "text": 'English',
+                    "current": false
+                },
+                {
+                    "url": '#0',
+                    "isoCode": 'cy',
+                    "text": 'Cymraeg',
+                    "current": true
+                }
+            ]
+        },
+        "menuLinks": {
+            "id": "menu-links",
+            "keyLinks": [
+                {
+                    'heading': 'Taking part in a survey?',
+                    'description': 'It’s never been more important.'
+                },
+                {
+                    'heading': 'Release calendar',
+                    'description': 'View our latest and upcoming releases.'
+                },
+                {
+                    'heading': 'Explore local statistics',
+                    'url': '#0',
+                    'description': 'Explore statistics across the UK.'
+                }
+            ],
+            "columns": [
+                {
+                    "groups": [
+                        {
+                            "heading": "People, population and community",
+                            "groupItems": [
+                                {
+                                    "text": "Armed forces community"
+                                },
+                                {
+                                    "text": "Births, deaths and marriages"
+                                },
+                                {
+                                    "text": "Crime and justice"
+                                },
+                                {
+                                    "text": "Cultural identity"
+                                },
+                                {
+                                    "text": "Education and childcare"
+                                },
+                                {
+                                    "text": "Elections"
+                                },
+                                {
+                                    "text": "Health and social care"
+                                },
+                                {
+                                    "text": "Household characteristics"
+                                },
+                                {
+                                    "text": "Housing"
+                                },
+                                {
+                                    "text": "Leisure and tourism"
+                                },
+                                {
+                                    "text": "Personal and household finances"
+                                },
+                                {
+                                    "text": "Population and migration"
+                                },
+                                {
+                                    "text": "Well-being"
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    "groups": [
+                        {
+                            "heading": "Business, industry and trade",
+                            "groupItems": [
+                                {
+                                    "text": "Business"
+                                },
+                                {
+                                    "text": "Changes to business"
+                                },
+                                {
+                                    "text": "Construction industry"
+                                },
+                                {
+                                    "text": "International trade"
+                                },
+                                {
+                                    "text": "IT and internet industry"
+                                },
+                                {
+                                    "text": "Manufacturing and production industry"
+                                },
+                                {
+                                    "text": "Retail industry",
+                                    "url": "#0"
+                                },
+                                {
+                                    "text": "Tourism industry"
+                                }
+                            ]
+                        },
+                        {
+                            "heading": "Employment and labour market",
+                            "url": "#0",
+                            "groupItems":
+                            [
+                                {
+                                    "text": "People in work"
+                                },
+                                {
+                                    "text": "People not in work"
+                                }
+                            ]
+
+                        }
+                    ]
+                },
+                {
+                    "groups": [
+                        {
+                            "heading": "Economy",
+                            "groupItems": [
+                                {
+                                    "text": "Economic output and productivity"
+                                },
+                                {
+                                    "text": "Government, public sector and taxes"
+                                },
+                                {
+                                    "text": "Gross Value Added (GVA)"
+                                },
+                                {
+                                    "text": "Investments, pensions and trusts"
+                                },
+                                {
+                                    "text": "Regional accounts"
+                                },
+                                {
+                                    "text": "Environmental accounts"
+                                },
+                                {
+                                    "text": "Gross Domestic Product (GDP)"
+                                },
+                                {
+                                    "text": "Inflation and price indices"
+                                },
+                                {
+                                    "text": "National accounts"
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        },
+        "searchLinks": {
+            "id": "search-links",
+            "searchNavigationAriaLabel": 'Nav Search',
+            "searchButtonAriaLabel": 'Toggle search',
+            'heading': 'Popular searches',
+            "itemsList": [
+                {
+                    "url": '#1',
+                    "text": 'Cost of living'
+                },
+                {
+                    "url": '#1',
+                    "text": 'Inflation'
+                },
+                {
+                    "url": '#3',
+                    "text": 'NHS waiting times'
+                },
+                {
+                    "url": '#0',
+                    "text": 'Wellbeing'
+                },
+                {
+                    "url": '#0',
+                    "text": 'Baby names'
+                }
+            ]
+        }
+    })
+}}

package/components/header/example-header-basic-with-search-and-language.njk

@@ -175,33 +175,42 @@
                 }
             ]
         },
-        "searchLinks": {
-            "id": "search-links",
-            "searchNavigationAriaLabel": 'Nav Search',
-            "searchButtonAriaLabel": 'Toggle search',
-            'heading': 'Popular searches',
-            "itemsList": [
-                {
-                    "url": '#1',
-                    "text": 'Cost of living'
-                },
-                {
-                    "url": '#1',
-                    "text": 'Inflation'
-                },
-                {
-                    "url": '#3',
-                    "text": 'NHS waiting times'
-                },
-                {
-                    "url": '#0',
-                    "text": 'Wellbeing'
-                },
-                {
-                    "url": '#0',
-                    "text": 'Baby names'
-                }
-            ]
+        "search": {
+            "id": "search",
+            "navAriaLabel": 'Nav Search',
+            "toggleAriaLabel": 'Toggle search',
+            "form": {
+                "action":  "https://www.ons.gov.uk/search" ,
+                "inputName": "q",
+                "inputLabel": "Search the ONS",
+                "buttonText": "Search",
+                "buttonAriaLabel": "Submit search"
+             },
+            "links": {
+                'heading': 'Popular searches',
+                "itemsList": [
+                    {
+                        "url": '#1',
+                        "text": 'Cost of living'
+                    },
+                    {
+                        "url": '#1',
+                        "text": 'Inflation'
+                    },
+                    {
+                        "url": '#3',
+                        "text": 'NHS waiting times'
+                    },
+                    {
+                        "url": '#0',
+                        "text": 'Wellbeing'
+                    },
+                    {
+                        "url": '#0',
+                        "text": 'Baby names'
+                    }
+                ]
+            }
         }
     })
 }}

package/components/header/example-header-basic-with-search-button.njk

@@ -159,33 +159,41 @@
                 }
             ]
         },
-        "searchLinks": {
-            "id": "search-links",
-            "searchNavigationAriaLabel": 'Nav Search',
-            "searchButtonAriaLabel": 'Toggle search',
-            'heading': 'Popular searches',
-            "itemsList": [
-                {
-                    "url": '#1',
-                    "text": 'Cost of living'
-                },
-                {
-                    "url": '#1',
-                    "text": 'Inflation'
-                },
-                {
-                    "url": '#3',
-                    "text": 'NHS waiting times'
-                },
-                {
-                    "url": '#0',
-                    "text": 'Wellbeing'
-                },
-                {
-                    "url": '#0',
-                    "text": 'Baby names'
-                }
-            ]
+        "search": {
+            "id": "search",
+            "navAriaLabel": 'Nav Search',
+            "toggleAriaLabel": 'Toggle search',
+            "form": {
+                "action":  "https://www.ons.gov.uk/search" ,
+                "inputName": "q",
+                "inputLabel": "Search the ONS",
+                "buttonText": "Search"
+             },
+            "links": {
+                'heading': 'Popular searches',
+                "itemsList": [
+                    {
+                        "url": '#1',
+                        "text": 'Cost of living'
+                    },
+                    {
+                        "url": '#1',
+                        "text": 'Inflation'
+                    },
+                    {
+                        "url": '#3',
+                        "text": 'NHS waiting times'
+                    },
+                    {
+                        "url": '#0',
+                        "text": 'Wellbeing'
+                    },
+                    {
+                        "url": '#0',
+                        "text": 'Baby names'
+                    }
+                ]
+            }
         }
     })
 }}

package/components/hero/_macro.njk

@@ -6,7 +6,7 @@
     {% set detailsColumns = params.detailsColumns | default ('8') %}
 
     <section
-        class="ons-hero ons-grid--gutterless{% if params.variants and params.variants is not string %}{% for variant in params.variants %}{{ ' ' }}ons-hero--{{ variant }}{% endfor %}{% else %}{{ ' ' }}ons-hero--{{ params.variants }}{% endif %}"
+        class="ons-hero ons-grid--gutterless{% if params.variants and params.variants is not string %}{% for variant in params.variants %}{{ ' ' }}ons-hero--{{ variant }}{% endfor %}{% elif params.variants %}{{ ' ' }}ons-hero--{{ params.variants }}{% endif %}"
     >
         {% if params.variants == 'navy-blue' %}
             <div class="ons-hero__circles" aria-hidden="true">
@@ -41,7 +41,10 @@
 
                         {% if params.text %}
                             <p class="ons-hero__text">{{ params.text | safe }}</p>
+                        {% elif params.richText %}
+                            <div class="ons-hero__richtext">{{ params.richText | safe }}</div>
                         {% endif %}
+
                     </div>
 
                     {% if params.variants == "grey" and params.officialStatisticsBadge == true %}

package/components/hero/_macro.spec.js

@@ -55,6 +55,32 @@ describe('macro: hero', () => {
         expect(title).toBe('Hero text');
     });
 
+    it('has expected `richText` when `text` is not provided', () => {
+        const $ = cheerio.load(
+            renderComponent('hero', {
+                ...EXAMPLE_HERO,
+                text: undefined,
+                richText: '<p>Hero <strong>rich</strong> text</p>',
+            }),
+        );
+
+        expect($('.ons-hero__text').length).toBe(0);
+        expect($('.ons-hero__richtext').length).toBe(1);
+        expect($('.ons-hero__richtext').html().trim()).toBe('<p>Hero <strong>rich</strong> text</p>');
+    });
+
+    it('does not render `richText` when `text` is provided', () => {
+        const $ = cheerio.load(
+            renderComponent('hero', {
+                ...EXAMPLE_HERO,
+                richText: '<p>Hero rich text</p>',
+            }),
+        );
+
+        expect($('.ons-hero__text').length).toBe(1);
+        expect($('.ons-hero__richtext').length).toBe(0);
+    });
+
     it('has expected `html`', () => {
         const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, html: '<span class="some-html">some html</span>' }));
 

package/components/list/_list.scss

@@ -90,9 +90,6 @@
 
     &--p {
         padding: 0;
-        .ons-list__item {
-            margin: 0;
-        }
     }
 
     &--summary {

package/components/panel/_panel.scss

@@ -107,6 +107,11 @@
         &.ons-icon-margin--s {
             padding-left: 1.7rem !important;
         }
+        .ons-list--p {
+            .ons-list__item {
+                margin: 0;
+            }
+        }
     }
 
     &__error {

package/components/radios/_macro.njk

@@ -18,7 +18,7 @@
         <div class="ons-radios__items">
             {% for radio in params.radios %}
                 {% if params.or and loop.revindex0 == 0 %}
-                    <span class="ons-radios__label ons-u-mt-s ons-u-fs-r--b" aria-hidden="true">{{ params.or }}</span>
+                    <span class="ons-radios__label ons-u-mt-2xs ons-u-fs-r--b" aria-hidden="true">{{ params.or }}</span>
                 {% endif %}
                 <span class="ons-radios__item{{ " ons-radios__item--no-border" if params.borderless }}">
                     <span class="ons-radio{{ " ons-radio--no-border" if params.borderless }}">