@ons/design-system 72.10.5 → 72.10.7

package/components/header/_header.scss

@@ -65,6 +65,15 @@
             margin: 0 0 1rem;
         }
     }
+
+    &__language {
+        display: none;
+
+        .ons-js-enabled & {
+            display: block;
+        }
+    }
+
     // Modifier - variants
     &--description {
         .ons-header {
@@ -169,13 +178,13 @@
     }
 
     &__org-logo--large {
-        @include mq('2xs', 460px) {
+        @include mq('2xs', 590px) {
             display: none;
         }
     }
 
     &__org-logo--small {
-        @include mq(461px) {
+        @include mq(591px) {
             display: none;
         }
     }
@@ -245,6 +254,16 @@
 
             #{$root}__menu-links {
                 width: 100%;
+
+                #{$root}__language {
+                    display: block;
+                    padding-top: 1rem;
+
+                    // hide the language switcher within nav when js is enabled
+                    .ons-js-enabled & {
+                        display: none;
+                    }
+                }
             }
 
             // When JS is enabled, revert the no-js styles
@@ -260,26 +279,11 @@
     }
 
     &-nav-menu {
-        // applies styles for non-js variant
-        background-color: var(--ons-color-branded-tint);
-        border-bottom: 1px solid var(--ons-color-ocean-blue);
         margin-bottom: 0;
-        padding-bottom: 1rem;
+        padding-bottom: 2.5rem;
         position: relative;
         width: 100%;
 
-        // updates styles when js is enabled
-        .ons-js-enabled & {
-            border-bottom: 0;
-            margin-bottom: 1rem;
-            padding-bottom: 0;
-            position: absolute;
-            top: 100%;
-            left: 50%;
-            width: 100vw;
-            transform: translateX(-50%);
-        }
-
         &__key-list {
             border-bottom: 1px solid var(--ons-color-ocean-blue);
             margin-bottom: 1.25rem;
@@ -312,14 +316,14 @@
         }
     }
 
+    // applies styles for non-js variant
+    &-nav-menu ~ &-nav-search {
+        border-top: 1px solid var(--ons-color-ocean-blue);
+    }
+
+    &-nav-menu,
     &-nav-search {
         background-color: var(--ons-color-branded-tint);
-        margin-bottom: 1rem;
-        @extend .ons-u-pt-2xl;
-        @extend .ons-u-pb-2xl;
-
-        position: relative;
-        width: 100%;
 
         // updates styles when js is enabled
         .ons-js-enabled & {
@@ -328,7 +332,19 @@
             left: 50%;
             width: 100vw;
             transform: translateX(-50%);
+            border-top: 0;
+            z-index: 500;
         }
+    }
+
+    &__menu-links ~ &__links {
+        padding-bottom: 0.25rem;
+    }
+
+    &-nav-search {
+        @extend .ons-u-pt-2xl;
+        @extend .ons-u-pb-2xl;
+
         &__input {
             border-bottom: 1px solid var(--ons-color-ocean-blue);
             @extend .ons-u-mb-2xl;

package/components/header/_macro.njk

@@ -7,6 +7,7 @@
     {% set openingTag = "<" + titleTag %}
     {% set closingTag = "</" + titleTag + ">" %}
     {% set currentLanguageIsoCode = "en" %}
+    {% set logoAltText = params.mastheadLogoAltText or params.mastheadLogo.altText %}
 
     {% if params.language and params.language.languages %}
         {% set currentLanguage = params.language.languages | selectattr("current") | first %}
@@ -42,7 +43,6 @@
                 >
                     <div class="ons-grid__col ons-col-auto">
                         {%- if not params.mastheadLogo.multipleLogos -%}
-
                             {% set mastheadLogo %}
                                 <div class="ons-header__org-logo ons-header__org-logo--large">
                                     {% if params.mastheadLogo.large %}
@@ -51,7 +51,7 @@
                                         {{-
                                             onsIcon({
                                                 "iconType": 'ons-logo-' + currentLanguageIsoCode,
-                                                "altText": 'Office for National Statistics homepage'
+                                                "altText": logoAltText | default('Office for National Statistics logo')
                                             })
                                         -}}
                                     {% endif %}
@@ -65,7 +65,7 @@
                                         {{-
                                             onsIcon({
                                                 "iconType": 'ons-logo-stacked-' + currentLanguageIsoCode,
-                                                "altText": 'Office for National Statistics logo'
+                                                "altText": logoAltText | default('Office for National Statistics logo')
                                             })
                                         -}}
                                     {% endif %}
@@ -88,7 +88,7 @@
                                             {{-
                                                 onsIcon({
                                                     "iconType": 'ons-logo-stacked-' + currentLanguageIsoCode,
-                                                    "altText": 'Office for National Statistics logo'
+                                                    "altText": logoAltText | default('Office for National Statistics logo')
                                                 })
                                             -}}
                                         {% endif %}
@@ -102,86 +102,9 @@
                             </div>
                         {%- endif -%}
                     </div>
-                    {% if params.language or params.serviceLinks %}
-                        <div class="ons-header__links ons-grid__col ons-u-ml-auto">
-                            {% if params.language %}
-                                <div class="ons-grid__col ons-col-auto{{ ' ons-u-mr-s ons-u-d-no@2xs@xs' if params.serviceLinks }}">
-                                    {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
-                                    {{ onsLanguageSelector(params.language) }}
-                                </div>
-                            {% endif %}
-                            {% if params.serviceLinks %}
-                                {% if params.serviceLinks.itemsList | length == 1 and params.language %}
-                                    {% set breakpoint = 'xs' %}
-                                    {% set controlVisibility = true %}
-                                {% elif params.serviceLinks.itemsList | length > 1 %}
-                                    {% set breakpoint = 'm' %}
-                                    {% set controlVisibility = true %}
-                                {% else %}
-                                    {% set controlVisibility = false %}
-                                {% endif %}
-                                <div
-                                    class="ons-grid__col ons-col-auto{% if controlVisibility == true %}{{ ' ' }}ons-u-d-no@2xs@{{ breakpoint }}{% endif %}"
-                                >
-                                    <nav
-                                        class="ons-header-service-nav ons-header-service-nav--main{{ ' ' + params.serviceLinks.classes if params.serviceLinks.classes else '' }}"
-                                        aria-label="{{ params.serviceLinks.ariaLabel | default('Service links navigation') }}"
-                                    >
-                                        <ul class="ons-header-service-nav__list">
-                                            {% for item in params.serviceLinks.itemsList %}
-                                                <li class="ons-header-service-nav__item">
-                                                    {% if item.iconType %}
-                                                        {{-
-                                                            onsIcon({
-                                                                "iconType": item.iconType
-                                                            })
-                                                        -}}
-                                                    {% endif %}
-                                                    {% if item.url %}
-                                                        <a
-                                                            href="{{ item.url }}"
-                                                            class="ons-header-service-nav__link"
-                                                            {% if item.id %}id="{{ item.id }}"{% endif %}
-                                                            >{% if item.title %}{{ item.title }}{% elif item.text %}{{ item.text }}{% endif %}</a
-                                                        >
-                                                    {% else %}
-                                                        {% if item.title %}{{ item.title }}{% elif item.text %}{{ item.text }}{% endif %}
-                                                    {% endif %}
-                                                </li>
-                                            {% endfor %}
-                                        </ul>
-                                    </nav>
-                                </div>
-                                {% if params.serviceLinks.itemsList | length > 1 or params.language %}
-                                    {% if params.variants == 'internal' %}
-                                        {% set buttonVariant = ["mobile", "text-link", "text-link-inverse"] %}
-                                    {% elif params.variants == 'neutral' %}
-                                        {% set buttonVariant = ["mobile", "neutral"] %}
-                                    {% else %}
-                                        {% set buttonVariant = ["mobile", "text-link"] %}
-                                    {% endif %}
-                                    <div class="ons-grid__col ons-col-auto ons-u-d-no@{{ breakpoint }}">
-                                        {{
-                                            onsButton({
-                                                "text": params.serviceLinks.toggleServicesButton.text | default("Account"),
-                                                "classes": "ons-u-d-no ons-js-toggle-services",
-                                                "type": "button",
-                                                "variants": buttonVariant,
-                                                "attributes": {
-                                                    "aria-label": params.serviceLinks.toggleServicesButton.ariaLabel | default("Toggle menu"),
-                                                    "aria-controls": params.serviceLinks.id,
-                                                    "aria-expanded": "false"
-                                                }
-                                            })
-                                        }}
-                                    </div>
-                                {% endif %}
-                            {% endif %}
-                        </div>
-                    {% endif %}
 
                     {% if params.variants == "basic" %}
-                        <div class="ons-grid__col ons-col-auto ons-header__menu-links">
+                        <div class="ons-grid__col ons-col-auto ons-header__menu-links ons-u-ml-auto">
                             {% if params.menuLinks %}
                                 <div class="ons-header__links ons-grid__col">
                                     {{
@@ -203,6 +126,15 @@
                                 </div>
                             {% endif %}
 
+                            {% if params.language %}
+                                <div class="ons-grid__col ons-col-auto{{ ' ons-u-mr-s ons-u-d-no@2xs@xs' if params.serviceLinks }}">
+                                    <div class="ons-header__language">
+                                        {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
+                                        {{ onsLanguageSelector(params.language) }}
+                                    </div>
+                                </div>
+                            {% endif %}
+
                             {% if params.variants == "basic" and params.menuLinks %}
                                 <nav
                                     class="ons-js-nav-menu ons-header-nav-menu ons-u-pt-2xl"
@@ -318,15 +250,14 @@
                                                     "id": 'search-field',
                                                     "width": 'full',
                                                     "label": {
-                                                        "text": 'Search the ONS',
+                                                        "text": params.searchLinks.searchNavigationInputLabel | default('Search the ONS'),
                                                         "id": "header-search-input-label"
                                                     },
                                                     "searchButton": {
                                                         "visuallyHideButtonText": true,
-                                                        "text": 'Search',
+                                                        "text": params.searchLinks.searchNavigationButtonText | default('Search'),
                                                         "iconType": 'search',
                                                         'variant': 'header'
-
                                                     }
                                                 })
                                             }}
@@ -361,6 +292,87 @@
                             {% endif %}
                         </div>
                     {% endif %}
+                    {% if params.language or params.serviceLinks %}
+                        <div
+                            class="ons-header__links ons-grid__col{{ ' ons-u-ml-auto' if not params.searchLinks and not params.menuLinks }}"
+                        >
+                            {% if params.language %}
+                                <div class="ons-grid__col ons-col-auto{{ ' ons-u-mr-s ons-u-d-no@2xs@xs' if params.serviceLinks }}">
+                                    <div class="ons-header__language">
+                                        {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
+                                        {{ onsLanguageSelector(params.language) }}
+                                    </div>
+                                </div>
+                            {% endif %}
+                            {% if params.serviceLinks %}
+                                {% if params.serviceLinks.itemsList | length == 1 and params.language %}
+                                    {% set breakpoint = 'xs' %}
+                                    {% set controlVisibility = true %}
+                                {% elif params.serviceLinks.itemsList | length > 1 %}
+                                    {% set breakpoint = 'm' %}
+                                    {% set controlVisibility = true %}
+                                {% else %}
+                                    {% set controlVisibility = false %}
+                                {% endif %}
+                                <div
+                                    class="ons-grid__col ons-col-auto{% if controlVisibility == true %}{{ ' ' }}ons-u-d-no@2xs@{{ breakpoint }}{% endif %}"
+                                >
+                                    <nav
+                                        class="ons-header-service-nav ons-header-service-nav--main{{ ' ' + params.serviceLinks.classes if params.serviceLinks.classes else '' }}"
+                                        aria-label="{{ params.serviceLinks.ariaLabel | default('Service links navigation') }}"
+                                    >
+                                        <ul class="ons-header-service-nav__list">
+                                            {% for item in params.serviceLinks.itemsList %}
+                                                <li class="ons-header-service-nav__item">
+                                                    {% if item.iconType %}
+                                                        {{-
+                                                            onsIcon({
+                                                                "iconType": item.iconType
+                                                            })
+                                                        -}}
+                                                    {% endif %}
+                                                    {% if item.url %}
+                                                        <a
+                                                            href="{{ item.url }}"
+                                                            class="ons-header-service-nav__link"
+                                                            {% if item.id %}id="{{ item.id }}"{% endif %}
+                                                            >{% if item.title %}{{ item.title }}{% elif item.text %}{{ item.text }}{% endif %}</a
+                                                        >
+                                                    {% else %}
+                                                        {% if item.title %}{{ item.title }}{% elif item.text %}{{ item.text }}{% endif %}
+                                                    {% endif %}
+                                                </li>
+                                            {% endfor %}
+                                        </ul>
+                                    </nav>
+                                </div>
+                                {% if params.serviceLinks.itemsList | length > 1 or params.language %}
+                                    {% if params.variants == 'internal' %}
+                                        {% set buttonVariant = ["mobile", "text-link", "text-link-inverse"] %}
+                                    {% elif params.variants == 'neutral' %}
+                                        {% set buttonVariant = ["mobile", "neutral"] %}
+                                    {% else %}
+                                        {% set buttonVariant = ["mobile", "text-link"] %}
+                                    {% endif %}
+                                    <div class="ons-grid__col ons-col-auto ons-u-d-no@{{ breakpoint }}">
+                                        {{
+                                            onsButton({
+                                                "text": params.serviceLinks.toggleServicesButton.text | default("Account"),
+                                                "classes": "ons-u-d-no ons-js-toggle-services",
+                                                "type": "button",
+                                                "variants": buttonVariant,
+                                                "attributes": {
+                                                    "aria-label": params.serviceLinks.toggleServicesButton.ariaLabel | default("Toggle menu"),
+                                                    "aria-controls": params.serviceLinks.id,
+                                                    "aria-expanded": "false"
+                                                }
+                                            })
+                                        }}
+                                    </div>
+                                {% endif %}
+                            {% endif %}
+                        </div>
+                    {% endif %}
                 </div>
             </div>
             {% if params.serviceLinks %}
@@ -393,8 +405,10 @@
                         {% endfor %}
                     </ul>
                     {% if params.language %}
-                        {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
-                        {{ onsLanguageSelector(params.language) }}
+                        <div class="ons-header__language">
+                            {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
+                            {{ onsLanguageSelector(params.language) }}
+                        </div>
                     {% endif %}
                 </nav>
             {% endif %}
@@ -478,13 +492,13 @@
                                     <span class="ons-grid ons-u-d-no@2xs@xs ons-u-ml-no ons-u-d-no@l">
                                         {{
                                             onsButton({
-                                                "text": "Search",
+                                                "text": params.searchLinks.searchNavigationButtonText | default('Search'),
                                                 "classes": "ons-btn--search ons-u-ml-2xs ons-u-d-no ons-js-toggle-search",
                                                 "variants": buttonVariant,
                                                 "iconType": "search",
                                                 "iconPosition": "only",
                                                 "attributes": {
-                                                    "aria-label": "Toggle search" ,
+                                                    "aria-label": params.searchLinks.searchNavigationButtonAriaLabel | default('Toggle search'),
                                                     "aria-controls": "ons-site-search",
                                                     "aria-expanded": "false"
                                                 }

package/components/header/_macro.spec.js

@@ -106,7 +106,7 @@ describe('FOR: Macro: Header', () => {
                 expect(iconsSpy.occurrences[0].iconType).toBe('ons-logo-en');
             });
             test('THEN: renders logo with correct default alt-text on large screen', () => {
-                expect(iconsSpy.occurrences[0].altText).toBe('Office for National Statistics homepage');
+                expect(iconsSpy.occurrences[0].altText).toBe('Office for National Statistics logo');
             });
             test('THEN: renders default small logo on small screen', () => {
                 expect(iconsSpy.occurrences[1].iconType).toBe('ons-logo-stacked-en');
@@ -153,6 +153,30 @@ describe('FOR: Macro: Header', () => {
             });
         });
     });
+    describe('GIVEN: Params: mastheadLogoAltText', () => {
+        describe('WHEN: mastheadLogoAltText is provided', () => {
+            const faker = templateFaker();
+            const iconsSpy = faker.spy('icon');
+            faker.renderComponent('header', {
+                ...EXAMPLE_HEADER_BASIC,
+                mastheadLogoAltText: 'Custom alt text for logo',
+            });
+            test('THEN: renders logo with provided alt text', () => {
+                expect(iconsSpy.occurrences[0].altText).toBe('Custom alt text for logo');
+            });
+        });
+        describe('WHEN: mastheadLogoAltText is not provided', () => {
+            const faker = templateFaker();
+            const iconsSpy = faker.spy('icon');
+            faker.renderComponent('header', {
+                ...EXAMPLE_HEADER_BASIC,
+                mastheadLogoAltText: undefined,
+            });
+            test('THEN: renders logo with default alt text', () => {
+                expect(iconsSpy.occurrences[0].altText).toBe('Office for National Statistics logo');
+            });
+        });
+    });
     describe('GIVEN: Params: multipleLogos', () => {
         describe('WHEN: image parameter is set to "ONS Logo"', () => {
             const faker = templateFaker();
@@ -803,7 +827,7 @@ describe('FOR: Macro: Header', () => {
                     attributes: {
                         'aria-controls': 'search-links-id',
                         'aria-expanded': 'true',
-                        'aria-label': 'Example aria label',
+                        'aria-label': 'Custom search button aria label',
                         'aria-disabled': 'true',
                     },
                 });
@@ -901,6 +925,110 @@ describe('FOR: Macro: Header', () => {
                 expect($searchBtn.attr('aria-disabled')).toBe('true');
             });
         });
+
+        describe('WHEN: searchLinks are provided with all custom properties', () => {
+            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 with custom aria-label', () => {
+                expect(buttonSpy.occurrences[0]).toBeDefined();
+                expect(buttonSpy.occurrences[0].attributes['aria-label']).toBe('Custom search button aria label');
+            });
+        });
+        describe('WHEN: searchButtonAriaLabel is not provided', () => {
+            const faker = templateFaker();
+            const buttonSpy = faker.spy('button', { suppressOutput: true });
+            faker.renderComponent('header', {
+                ...EXAMPLE_HEADER_SEARCH_LINKS,
+                searchLinks: {
+                    ...EXAMPLE_HEADER_SEARCH_LINKS.searchLinks,
+                    searchButtonAriaLabel: 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: searchNavigationButtonAriaLabel is provided', () => {
+            const faker = templateFaker();
+            const buttonSpy = faker.spy('button', { suppressOutput: true });
+            faker.renderComponent('header', {
+                ...EXAMPLE_HEADER_SEARCH_LINKS,
+                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: searchNavigationButtonAriaLabel is not provided', () => {
+            const faker = templateFaker();
+            const buttonSpy = faker.spy('button', { suppressOutput: true });
+            faker.renderComponent('header', {
+                ...EXAMPLE_HEADER_SEARCH_LINKS,
+                searchLinks: {
+                    ...EXAMPLE_HEADER_SEARCH_LINKS.searchLinks,
+                    searchNavigationButtonAriaLabel: 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: searchNavigationInputLabel is provided', () => {
+            const $ = cheerio.load(renderComponent('header', { ...EXAMPLE_HEADER_SEARCH_LINKS, variants: 'basic' }));
+            test('THEN: renders search input with custom label', () => {
+                expect($('#header-search-input-label').text().trim()).toBe('Custom search input label');
+            });
+        });
+        describe('WHEN: searchNavigationInputLabel is not provided', () => {
+            const $ = cheerio.load(
+                renderComponent('header', {
+                    ...EXAMPLE_HEADER_SEARCH_LINKS,
+                    searchLinks: {
+                        ...EXAMPLE_HEADER_SEARCH_LINKS.searchLinks,
+                        searchNavigationInputLabel: undefined,
+                    },
+                    variants: 'basic',
+                }),
+            );
+            test('THEN: renders search input with default label', () => {
+                expect($('#header-search-input-label').text().trim()).toBe('Search the ONS');
+            });
+        });
+        describe('WHEN: searchNavigationButtonText is provided', () => {
+            const $ = cheerio.load(renderComponent('header', { ...EXAMPLE_HEADER_SEARCH_LINKS, 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_LINKS.searchLinks.searchNavigationButtonText);
+            });
+        });
+        describe('WHEN: searchNavigationButtonText is not provided', () => {
+            const $ = cheerio.load(
+                renderComponent('header', {
+                    ...EXAMPLE_HEADER_SEARCH_LINKS,
+                    searchLinks: {
+                        ...EXAMPLE_HEADER_SEARCH_LINKS.searchLinks,
+                        searchNavigationButtonText: 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: menuLinks', () => {