@ons/design-system 72.3.0 → 72.5.0

package/components/header/_macro.spec.js

@@ -9,6 +9,7 @@ import { mapAll } from '../../tests/helpers/cheerio';
 import {
     EXAMPLE_HEADER_BASIC,
     EXAMPLE_SERVICE_LINKS_CONFIG,
+    EXAMPLE_HEADER_SEARCH_LINKS,
     EXAMPLE_HEADER_SERVICE_LINKS_MULTIPLE,
     EXAMPLE_HEADER_SERVICE_LINKS_SINGLE,
     EXAMPLE_HEADER_LANGUAGE_CONFIG,
@@ -784,4 +785,100 @@ describe('FOR: Macro: Header', () => {
             });
         });
     });
+    describe('GIVEN: Params: searchLinks', () => {
+        describe('WHEN: searchLinks are provided', () => {
+            const faker = templateFaker();
+            const buttonSpy = faker.spy('button', { suppressOutput: true });
+            faker.renderComponent('header', { ...EXAMPLE_HEADER_SEARCH_LINKS, 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--search ons-btn--search-icon',
+                    type: 'button',
+                    variants: 'search',
+                    attributes: {
+                        'aria-label': 'Example aria label',
+                        'aria-expanded': 'false',
+                        'aria-controls': 'search-links-id',
+                    },
+                });
+            });
+        });
+
+        describe('WHEN: itemsList are provided in searchLinks', () => {
+            const $ = cheerio.load(renderComponent('header', { ...EXAMPLE_HEADER_SEARCH_LINKS, 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: searchLinks 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: searchLinks are provided and the header variant is not basic', () => {
+            const $ = cheerio.load(renderComponent('header', { ...EXAMPLE_HEADER_SEARCH_LINKS, 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_LINKS, variants: 'basic' }));
+
+            test('THEN: it renders heading with provided text', () => {
+                expect($('.ons-header-nav-search__heading').text()).toBe('Header Search');
+            });
+        });
+
+        describe('WHEN: id parameter is provided', () => {
+            const $ = cheerio.load(renderComponent('header', { ...EXAMPLE_HEADER_SEARCH_LINKS, variants: 'basic' }));
+
+            test('THEN: applies id to search links ', () => {
+                expect($('#search-links-id').length).toBe(1);
+            });
+        });
+
+        describe('WHEN: ariaLabel parameter is provided', () => {
+            const $ = cheerio.load(renderComponent('header', { ...EXAMPLE_HEADER_SEARCH_LINKS, 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_LINKS, variants: 'basic' }));
+
+            test('THEN: it renders classes with provided value', () => {
+                expect($('.ons-header-nav-search').hasClass('custom-class')).toBe(true);
+            });
+        });
+    });
 });

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

@@ -0,0 +1,190 @@
+---
+'fullWidth': true
+---
+
+{% from "components/header/_macro.njk" import onsHeader %}
+
+{{
+    onsHeader({
+        "variants": 'basic',
+        "menuLinks": {
+            "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/header.spec.js

@@ -0,0 +1,128 @@
+import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
+import { EXAMPLE_HEADER_SEARCH_AND_MENU_LINKS } from './_test-examples';
+import { getNodeAttributes } from '../../tests/helpers/puppeteer';
+
+describe('script: header', () => {
+    beforeEach(async () => {
+        await setTestPage('/test', renderComponent('header', { ...EXAMPLE_HEADER_SEARCH_AND_MENU_LINKS, variants: 'basic' }));
+    });
+
+    describe('when the search button is clicked', () => {
+        beforeEach(async () => {
+            await page.click('.ons-js-toggle-header-search');
+        });
+
+        it('then the search input form is visible and does not have the ons-u-d-no class', async () => {
+            await page.waitForSelector('.ons-header-nav-search');
+            const isSearchNavVisible = await page.$eval('.ons-header-nav-search', (el) => !el.classList.contains('ons-u-d-no'));
+            expect(isSearchNavVisible).toBe(true);
+        });
+
+        it('then the button switches to the close icon', async () => {
+            const hasCloseIcon = await page.$eval('.ons-js-toggle-header-search svg', (el) => el.classList.contains('ons-icon--close'));
+            expect(hasCloseIcon).toBe(true);
+        });
+
+        it('then the button has aria-expanded="true"', async () => {
+            const attributes = await getNodeAttributes(page, '.ons-js-toggle-header-search');
+            expect(attributes['aria-expanded']).toBe('true');
+        });
+
+        it('then the button has aria-hidden="false"', async () => {
+            const attributes = await getNodeAttributes(page, '.ons-js-header-search');
+            expect(attributes['aria-hidden']).toBe('false');
+        });
+
+        it('then the search field has full width', async () => {
+            await page.waitForSelector('.ons-header-nav-search__input .ons-input');
+            const isFullWidth = await page.$eval('.ons-header-nav-search__input .ons-input', (el) =>
+                el.classList.contains('ons-input--w-full'),
+            );
+            expect(isFullWidth).toBe(true);
+        });
+    });
+
+    describe('when the search button is not clicked', () => {
+        it('then the search form is hidden', async () => {
+            const isSearchNavHidden = await page.$eval('.ons-header-nav-search', (el) => el.classList.contains('ons-u-d-no'));
+            expect(isSearchNavHidden).toBe(true);
+        });
+
+        it('then the button displays the search icon', async () => {
+            const hasSearchIcon = await page.$eval('.ons-js-toggle-header-search svg', (el) => el.classList.contains('ons-icon--search'));
+            expect(hasSearchIcon).toBe(true);
+        });
+
+        it('then the button has aria-expanded="false"', async () => {
+            const attributes = await getNodeAttributes(page, '.ons-js-toggle-header-search');
+            expect(attributes['aria-expanded']).toBe('false');
+        });
+
+        it('then the button has aria-hidden="true"', async () => {
+            const attributes = await getNodeAttributes(page, '.ons-js-header-search');
+            expect(attributes['aria-hidden']).toBe('true');
+        });
+    });
+
+    describe('when the search button is clicked again (to close)', () => {
+        beforeEach(async () => {
+            await page.click('.ons-js-toggle-header-search'); // Open
+            await page.waitForSelector('.ons-header-nav-search');
+            await page.click('.ons-js-toggle-header-search'); // Close
+        });
+
+        it('then the search form is hidden', async () => {
+            const isSearchNavHidden = await page.$eval('.ons-header-nav-search', (el) => el.classList.contains('ons-u-d-no'));
+            expect(isSearchNavHidden).toBe(true);
+        });
+
+        it('then the button switches back to the search icon', async () => {
+            const hasSearchIcon = await page.$eval('.ons-js-toggle-header-search svg', (el) => el.classList.contains('ons-icon--search'));
+            expect(hasSearchIcon).toBe(true);
+        });
+
+        it('then the button has aria-expanded="false"', async () => {
+            const attributes = await getNodeAttributes(page, '.ons-js-toggle-header-search');
+            expect(attributes['aria-expanded']).toBe('false');
+        });
+    });
+
+    describe('when the menu button is clicked', () => {
+        beforeEach(async () => {
+            await page.click('.ons-btn--menu');
+        });
+
+        it('then the navigation menu is displayed', async () => {
+            await page.waitForSelector('.ons-header-nav-menu');
+            const isMenuNavVisible = await page.$eval('.ons-header-nav-menu', (el) => !el.classList.contains('ons-u-d-no'));
+            expect(isMenuNavVisible).toBe(true);
+        });
+
+        it('then the menu button is marked as expanded', async () => {
+            const menuButtonAriaExpanded = await page.$eval('.ons-btn--menu', (el) => el.getAttribute('aria-expanded'));
+            expect(menuButtonAriaExpanded).toBe('true');
+        });
+
+        it('then the navigation menu aria-hidden attribute is set to false', async () => {
+            const isAriaHiddenFalse = await page.$eval('.ons-header-nav-menu', (el) => el.getAttribute('aria-hidden') === 'false');
+            expect(isAriaHiddenFalse).toBe(true);
+        });
+    });
+
+    describe('when the menu button is not clicked', () => {
+        it('then the navigation menu is hidden', async () => {
+            const isMenuNavHidden = await page.$eval('.ons-header-nav-menu', (el) => el.classList.contains('ons-u-d-no'));
+            expect(isMenuNavHidden).toBe(true);
+        });
+
+        it('then the menu button is marked as not expanded', async () => {
+            const menuButtonAriaExpanded = await page.$eval('.ons-btn--menu', (el) => el.getAttribute('aria-expanded'));
+            expect(menuButtonAriaExpanded).toBe('false');
+        });
+
+        it('then the navigation menu aria-hidden attribute is set to true', async () => {
+            const isAriaHiddenTrue = await page.$eval('.ons-header-nav-menu', (el) => el.getAttribute('aria-hidden') === 'true');
+            expect(isAriaHiddenTrue).toBe(true);
+        });
+    });
+});

package/components/hero/_hero.scss

@@ -64,14 +64,17 @@
                 width: 100%;
             }
         }
-    }
-    &__badge {
-        @include mq(xs, l) {
-            margin-top: 2.5rem;
-            margin-bottom: 1rem;
+        .ons-hero__title-container {
+            @include mq(l) {
+                width: 85%;
+            }
         }
     }
 
+    &__badge-link {
+        display: block;
+    }
+
     &--topic {
         color: var(--ons-color-branded);
         @extend .ons-u-mb-no;
@@ -89,7 +92,11 @@
     }
 
     &__content {
-        height: 100%;
+        @include mq(l) {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+        }
     }
 
     &__pre-title {
@@ -425,10 +432,6 @@
             display: grid;
             align-items: start;
             justify-content: space-between;
-
-            &.ons-hero__title-badge {
-                grid-template-columns: 1fr auto;
-            }
         }
     }
 }

package/components/hero/_macro.njk

@@ -1,3 +1,5 @@
+{% from "components/icon/_macro.njk" import onsIcon %}
+
 {% macro onsHero(params) %}
 
     {# Set number of columns used for hero content after medium breakpoint #}
@@ -35,28 +37,57 @@
                 {% if params.topic %}
                     <h2 class="ons-hero--topic">{{ params.topic | safe }}</h2>
                 {% endif %}
-                <div class="ons-hero__title-container {% if params.officialStatisticsBadge %}ons-hero__title-badge{% endif %}">
-                    <header>
-                        <h1 class="ons-hero__title ons-u-fs-3xl">{{ params.title }}</h1>
-                        {% if params.subtitle %}
-                            <h2 class="ons-hero__subtitle ons-u-fs-r--b">{{ params.subtitle }}</h2>
+
+                <div class="ons-hero__content">
+                    <div class="ons-hero__title-container">
+                        <header>
+                            <h1 class="ons-hero__title ons-u-fs-3xl">{{ params.title }}</h1>
+                            {% if params.subtitle %}
+                                <h2 class="ons-hero__subtitle ons-u-fs-r--b">{{ params.subtitle }}</h2>
+                            {% endif %}
+                        </header>
+
+                        {% if params.text %}
+                            <p class="ons-hero__text">{{ params.text | safe }}</p>
                         {% endif %}
-                    </header>
-                    {% if params.officialStatisticsBadge == true %}
-                        {% from "components/icon/_macro.njk" import onsIcon %}
-                        <div class="ons-hero__badge">
-                            {{-
-                                onsIcon({
-                                    "iconType": 'official-statistics'
-                                })
-                            -}}
+                    </div>
+
+                    {% if params.variants == "grey" and params.officialStatisticsBadge == true %}
+                        <div class="ons-hero__badge ons-u-mb-s">
+                            {% if params.officialStatisticsBadgeUrl %}
+                                <a
+                                    href="{{ params.officialStatisticsBadgeUrl }}"
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    class="ons-hero__badge-link"
+                                >
+                                    {{-
+                                        onsIcon({
+                                            "iconType": 'official-statistics'
+                                        })
+                                    -}}
+                                </a>
+                            {% else %}
+                                {{-
+                                    onsIcon({
+                                        "iconType": 'official-statistics'
+                                    })
+                                -}}
+                            {% endif %}
                         </div>
                     {% endif %}
-                    {% if params.text %}
-                        <p class="ons-hero__text">{{ params.text | safe }}</p>
-                    {% endif %}
                 </div>
 
+                {% if params.variants == "grey" and params.censusLogo == true %}
+                    <div class="ons-hero__census-logo">
+                        {{-
+                            onsIcon({
+                                "iconType": 'census-logo'
+                            })
+                        -}}
+                    </div>
+                {% endif %}
+
                 {% if params.button %}
                     {% from "components/button/_macro.njk" import onsButton %}
                     {% set btnClasses = params.button.classes if params.button.classes else '' %}
@@ -80,7 +111,7 @@
                     {% from "components/description-list/_macro.njk" import onsDescriptionList %}
                     {{
                         onsDescriptionList({
-                            "classes": "ons-u-mb-no",
+                            "classes": "ons-u-mb-no ons-u-mt-s ons-u-mt-l@l",
                             "variant": 'inline',
                             "termCol": params.descriptionList.termCol,
                             "descriptionCol": params.descriptionList.descriptionCol,

package/components/hero/_macro.spec.js

@@ -105,13 +105,32 @@ describe('macro: hero', () => {
         expect(content).toBe('Topic Text');
     });
 
-    it('outputs the official statistics badge when officialStatisticsBadge is set to true', () => {
-        const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, officialStatisticsBadge: true }));
+    it('outputs the official statistics badge when officialStatisticsBadge is set to true and variants is set to "grey"', () => {
+        const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, variants: 'grey', officialStatisticsBadge: true }));
 
         expect($('.ons-hero__badge').length).toBe(1);
         expect($('.ons-hero__badge svg title').text().trim()).toBe('Offical Statistics Badge');
     });
 
+    it('outputs the Census 2021 Logo when censusLogo is set to true and variants is set to "grey"', () => {
+        const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, variants: 'grey', censusLogo: true }));
+
+        expect($('.ons-hero__census-logo').length).toBe(1);
+        expect($('.ons-hero__census-logo svg title').text().trim()).toBe('Census 2021 Logo');
+    });
+
+    it('does not render the official statistics badge when officialStatisticsBadge is set to true and variants is not set', () => {
+        const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, censusLogo: true }));
+
+        expect($('.ons-hero__badge').length).toBe(0);
+    });
+
+    it('does not render the Census 2021 Logo when censusLogo is set to true and variants is not set', () => {
+        const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, censusLogo: true }));
+
+        expect($('.ons-hero__census-logo').length).toBe(0);
+    });
+
     it('renders curved gradient when variant is `grey`', () => {
         const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, variants: 'grey' }));
         expect($('.ons-hero--grey').length).toBe(1);

package/components/hero/example-hero-grey.njk

@@ -8,9 +8,11 @@
         "variants": 'grey',
         "detailsColumns": '12',
         "officialStatisticsBadge": true,
+        "officialStatisticsBadgeUrl": 'https://uksa.statisticsauthority.gov.uk/about-the-authority/uk-statistical-system/types-of-official-statistics/',
         "topic": 'Statistical article',
         "title": 'Retail sales rise amid summer discounts and sporting events, according to a first estimate',
         "text": 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id mattis ligula, nec sollicitudin arcu. Donec non tristique tellus. Donec eget malesuada lorem.',
+        "censusLogo": true,
         "breadcrumbs": {
             "ariaLabel": 'Breadcrumbs',
             "itemsList": [
@@ -41,34 +43,34 @@
                     ]
                 },
                 {
-                    "term": "Edition:",
+                    "term": "Next release:",
                     "descriptions": [
                         {
-                            "description": "Latest"
+                            "description": "20 September 2024"
                         }
                     ]
                 },
                 {
-                    "term": "Contact:",
+                    "term": "Edition:",
                     "descriptions": [
                         {
-                            "description": "Retail Sales team"
+                            "description": "Latest"
                         }
                     ]
                 },
                 {
-                    "term": "Next release:",
+                    "term": "Releases:",
                     "descriptions": [
                         {
-                            "description": "20 September 2024"
+                            "description": "View previous releases"
                         }
                     ]
                 },
                 {
-                    "term": "Releases:",
+                    "term": "Contact:",
                     "descriptions": [
                         {
-                            "description": "View previous releases"
+                            "description": "Retail Sales team"
                         }
                     ]
                 }