@ons/design-system 72.4.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

@@ -70,12 +70,9 @@
             }
         }
     }
-    &__badge {
-        @include mq(l) {
-            position: absolute;
-            right: 0;
-            top: 85px;
-        }
+
+    &__badge-link {
+        display: block;
     }
 
     &--topic {
@@ -95,7 +92,11 @@
     }
 
     &__content {
-        height: 100%;
+        @include mq(l) {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+        }
     }
 
     &__pre-title {

package/components/hero/_macro.njk

@@ -37,36 +37,55 @@
                 {% if params.topic %}
                     <h2 class="ons-hero--topic">{{ params.topic | safe }}</h2>
                 {% endif %}
-                <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>
+
+                <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.text %}
-                        <p class="ons-hero__text">{{ params.text | safe }}</p>
-                    {% endif %}
-                </div>
-                {% if params.variants == "grey" %}
-                    {% if params.officialStatisticsBadge == true %}
+                    </div>
+
+                    {% if params.variants == "grey" and params.officialStatisticsBadge == true %}
                         <div class="ons-hero__badge ons-u-mb-s">
-                            {{-
-                                onsIcon({
-                                    "iconType": 'official-statistics'
-                                })
-                            -}}
-                        </div>
-                    {% endif %}
-                    {% if params.censusLogo == true %}
-                        <div class="ons-hero__census-logo">
-                            {{-
-                                onsIcon({
-                                    "iconType": 'census-logo'
-                                })
-                            -}}
+                            {% 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 %}
+                </div>
+
+                {% if params.variants == "grey" and params.censusLogo == true %}
+                    <div class="ons-hero__census-logo">
+                        {{-
+                            onsIcon({
+                                "iconType": 'census-logo'
+                            })
+                        -}}
+                    </div>
                 {% endif %}
 
                 {% if params.button %}

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

@@ -8,6 +8,7 @@
         "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.',

package/components/icon/_macro.njk

@@ -203,7 +203,7 @@
         </svg>
     {%- elif params.iconType == "search" -%}
         <svg
-            class="{% if params.iconSize %}ons-icon ons-icon--{{ params.iconSize }}{% else %}ons-icon{% endif %}{{ iconClasses }}"
+            class="{% if params.iconSize %}ons-icon ons-icon--search ons-icon--{{ params.iconSize }}{% else %}ons-icon{% endif %}{{ iconClasses }}"
             viewBox="0 0 12 12"
             xmlns="http://www.w3.org/2000/svg"
             aria-hidden="true"
@@ -345,8 +345,8 @@
         <svg
             class="ons-icon--logo{{ iconClasses }}"
             xmlns="http://www.w3.org/2000/svg"
-            width="208"
-            height="20"
+            width="250"
+            height="24"
             viewBox="33 2 552 60"
             aria-labelledby="{{ params.altTextId | default ('ons-logo-en-alt') }}"
             role="img"
@@ -442,8 +442,8 @@
         <svg
             class="ons-icon--logo{{ iconClasses }}"
             xmlns="http://www.w3.org/2000/svg"
-            width="218"
-            height="20"
+            width="262"
+            height="24"
             viewBox="15 2 620 60"
             aria-labelledby="{{ params.altTextId | default ('ons-logo-cy-alt') }}"
             role="img"
@@ -701,9 +701,9 @@
     {%- elif params.iconType == "official-statistics" -%}
         <svg
             xmlns="http://www.w3.org/2000/svg"
-            width="77"
-            height="93"
-            viewBox="0 0 77 93"
+            width="75"
+            height="90"
+            viewBox="-5 0 90 90"
             fill="none"
             title="ons-official-statistics-badge"
             focusable="false"

package/components/input/_input.scss

@@ -86,6 +86,16 @@
     margin-top: 0.25rem;
 }
 
+.ons-input--header-search {
+    border-radius: 0;
+    height: 56px;
+    border: 2px solid var(--ons-color-ocean-blue);
+
+    &:focus {
+        border: 2px solid var(--ons-color-input-border);
+    }
+}
+
 .ons-input--select {
     appearance: none;
     background: var(--ons-color-input-bg)
@@ -149,6 +159,11 @@
     height: 2.5rem;
 }
 
+.ons-input__button--header-search {
+    gap: 0;
+    height: 100%;
+}
+
 .ons-input-search {
     @extend .ons-input--block;
     @extend .ons-input--ghost;

package/components/input/_macro.njk

@@ -25,7 +25,7 @@
         <input
             type="{{ type }}"
             id="{{ params.id }}"
-            class="ons-input ons-input--text ons-input-type__input{{ ' ons-input--error' if params.error }}{{ ' ons-search__input' if params.searchButton }}{{ ' ' + params.classes if params.classes else '' }}{% if params.width %}{{ ' ' }}ons-input{% if params.type == 'number' or params.type == 'tel' %}-number{% endif %}--w-{{ params.width }}{% endif %}{{ exclusiveClass }}{{ inputPlaceholder }}"
+            class="ons-input ons-input--text ons-input-type__input{{ ' ons-input--error' if params.error }}{{ ' ons-search__input' if params.searchButton }}{{ ' ons-input--header-search' if params.searchButton.variant == 'header' }}{{ ' ' + params.classes if params.classes else '' }}{% if params.width %}{{ ' ' }}ons-input{% if params.type == 'number' or params.type == 'tel' %}-number{% endif %}--w-{{ params.width }}{% endif %}{{ exclusiveClass }}{{ inputPlaceholder }}"
             {% if params.prefix and params.prefix.id and not params.prefix.title %}aria-labelledby="{{ params.prefix.id }}"{% elif params.suffix and params.suffix.id and not params.suffix.title %}aria-labelledby="{{ params.suffix.id }}"{% endif %}
             {% if params.prefix and params.prefix.id %}
                 aria-labelledby="{{ params.id }} {{ params.prefix.id }}"
@@ -110,7 +110,7 @@
             {% endif %}
         {% elif params.searchButton %}
             <span
-                class="ons-grid-flex ons-grid-flex--vertical-top ons-input_search-button{{ ' ons-input--with-text-description' if params.label.description }}"
+                class="ons-grid-flex ons-grid-flex--vertical-top ons-input_search-button{{ ' ons-input__button--header-search' if params.searchButton.variant == 'header' }}{{ ' ons-input--with-text-description' if params.label.description }}"
             >
                 {% if params.accessiblePlaceholder %}
                     {{
@@ -142,7 +142,7 @@
                         "html": buttonLabel,
                         "text": params.searchButton.text,
                         "id": params.searchButton.id,
-                        "variants": 'small',
+                        "variants": 'header-search' if params.searchButton.variant == 'header' else 'small',
                         "classes": 'ons-search__btn' + (" " + params.searchButton.classes if params.searchButton.classes else ""),
                         "attributes": params.searchButton.attributes,
                         "iconType": params.searchButton.iconType,