@ons/design-system 73.0.3 → 73.2.0

package/components/chart/specific-chart-options.js

@@ -8,7 +8,12 @@ class SpecificChartOptions {
         this.config = config;
 
         this.options = {
-            colors: this.theme === 'alternate' ? this.constants.alternateTheme : this.constants.primaryTheme,
+            colors:
+                this.theme === 'alternate'
+                    ? this.constants.alternateTheme
+                    : type == 'line'
+                      ? this.constants.linePrimaryTheme
+                      : this.constants.primaryTheme,
             chart: {
                 type: type,
                 marginTop: this.config.legend.enabled ? (type === 'boxplot' ? 50 : undefined) : 50,
@@ -41,6 +46,23 @@ class SpecificChartOptions {
         };
     }
 
+    limitSeriesToThemeLength = () => {
+        // Get the theme array from ChartConstants based on the theme name
+        const themeArray = this.theme === 'alternate' ? this.constants.alternateTheme : this.constants.primaryTheme;
+
+        // Limit the series to the theme array length
+        if (this.type !== 'scatter' && this.config.series.length > themeArray.length) {
+            this.config.series.length = themeArray.length;
+        }
+    };
+
+    limitSeriesForScatterChart = () => {
+        // Scatter charts only support up to 4 series for readability
+        if (this.config.series.length > 4) {
+            this.config.series.length = 4;
+        }
+    };
+
     getOptions = () => this.options;
 
     getMobileOptions = (xAxisTickInterval, yAxisTickInterval) => {

package/components/cookies-banner/_macro.njk

@@ -4,7 +4,6 @@
     {% if params.lang == 'cy' %}
         {% set ariaLabel = 'Cwcis' %}
         {% set serviceName = 'ons.gov.uk' %}
-        {% set defaultCookiesLink = '/cwics' %}
         {% set statementTitle = 'Cwcis ar' %}
         {% set settingsLinkText = 'Gweld cwcis' %}
         {% set acceptButtonText = 'Derbyn cwcis ychwanegol' %}
@@ -20,7 +19,6 @@
     {% else %}
         {% set ariaLabel = 'Cookies banner' %}
         {% set serviceName = 'ons.gov.uk' %}
-        {% set defaultCookiesLink = '/cookies' %}
         {% set statementTitle = 'Cookies on' %}
         {% set settingsLinkText = 'View cookies' %}
         {% set acceptButtonText = 'Accept additional cookies' %}
@@ -36,7 +34,7 @@
     {% endif %}
 
     {% if not isDesignSystemExample %}
-        {% set settingsLinkUrl = params.settingsLinkUrl | default(defaultCookiesLink) %}
+        {% set settingsLinkUrl = params.settingsLinkUrl | default('/cookies') %}
     {% else %}
         {% set settingsLinkUrl = '#0' %}
     {% endif %}

package/components/details-panel/_macro.njk

@@ -13,11 +13,7 @@
                     {{ openingTag | safe }}
                     class="ons-details-panel__banner-title ons-u-fs-m ons-u-mb-2xs">{{ params.title }}{{ closingTag | safe }}
                     <span class="ons-details-panel__banner-detail">
-                        <span class="ons-details-panel__banner-detail-title ons-u-mr-3xs">
-                            <span class="ons-details-panel__banner-detail-title--open"> {{ openText }} </span>
-                            <span class="ons-details-panel__banner-detail-title--close"> {{ closeText }} </span>
-                        </span>
-                        <span class="ons-details-panel__banner-detail-icon">
+                        <span class="ons-details-panel__banner-detail-icon ons-u-mr-3xs">
                             {% from "components/icon/_macro.njk" import onsIcon %}
                             {{
                                 onsIcon({
@@ -25,11 +21,15 @@
                                 })
                             }}
                         </span>
+                        <span class="ons-details-panel__banner-detail-title">
+                            <span class="ons-details-panel__banner-detail-title--open"> {{ openText }} </span>
+                            <span class="ons-details-panel__banner-detail-title--close"> {{ closeText }} </span>
+                        </span>
                     </span>
                 </span>
             </span>
         </summary>
-        <dl class="ons-container ons-details-panel__content ons-u-pt-xl ons-u-pb-3xl">
+        <dl class="ons-container ons-details-panel__content ons-u-p-l">
             {% for item in params.detailsItems %}
                 <div class="ons-details-panel__item ons-u-pb-xl ons-u-mb-l ons-u-ml-2xs">
                     <dt class="ons-details-panel__content-meta ons-u-mb-l@2xs@m">

package/components/featured-article/example-featured-article-with-chart.njk

@@ -18,7 +18,7 @@
         "chart": {
             "chartType": "line",
             "description": "Line chart showing the annual rate of inflation for the Consumer Prices Index including owner occupiers’ housing costs (CPIH) and its components.",
-            "theme": "alternate",
+            "theme": "primary",
             "title": "Sales volumes and values saw moderate growth in July 2024",
             "subtitle": "Figure 6: Upward contribution from housing and household services (including energy) saw the annual CPIH inflation rate rise",
             "id": "id",

package/components/header/_macro.njk

@@ -216,7 +216,7 @@
                                 </nav>
                             {% endif %}
 
-                            {% if params.searchLinks %}
+                            {% if params.search or params.searchLinks %}
                                 <div class="ons-header__links ons-grid__col ons-header__menu-link">
                                     {{
                                         onsButton({
@@ -225,8 +225,8 @@
                                             "variants": "search",
                                             "iconType": "search",
                                             "attributes": {
-                                                "aria-label": params.searchLinks.searchButtonAriaLabel | default("Toggle search"),
-                                                "aria-controls": params.searchLinks.id,
+                                                "aria-label": (params.search.toggleAriaLabel if params.search.toggleAriaLabel else params.searchLinks.searchButtonAriaLabel) | default("Toggle search"),
+                                                "aria-controls": params.search.id if params.search.id else params.searchLinks.id,
                                                 "aria-expanded": "true",
                                                 "aria-disabled": "true"
                                             }
@@ -235,56 +235,89 @@
                                 </div>
                             {% endif %}
 
-                            {% if params.variants == "basic" and params.searchLinks %}
+                            {% if params.variants == "basic" and (params.searchLinks or params.search) %}
                                 <nav
-                                    class="ons-js-header-search ons-header-nav-search {{ params.searchLinks.classes }}"
-                                    id="{{ params.searchLinks.id }}"
-                                    aria-label="{{ params.searchLinks.searchNavigationAriaLabel | default('Search navigation') }}"
+                                    class="ons-js-header-search ons-header-nav-search {{ params.searchLinks.classes if params.searchLinks and params.searchLinks.classes else '' }}{{ params.search.classes if params.search and params.search.classes else '' }}"
+                                    id="{{ params.search.id if params.search else params.searchLinks.id }}"
+                                    aria-label="{{ (params.search.navAriaLabel if params.search else params.searchLinks.searchNavigationAriaLabel) | default('Search navigation') }}"
                                     aria-hidden="false"
                                 >
                                     <div class="ons-container">
-                                        <div class="ons-header-nav-search__input">
+                                        <form
+                                            class="ons-header-nav-search__input"
+                                            method="get"
+                                            action="{{ params.search.form.action | default('') }}"
+                                        >
                                             {% from "components/input/_macro.njk" import onsInput %}
                                             {{
                                                 onsInput({
                                                     "id": 'search-field',
+                                                    "name": params.search.form.inputName | default('q'),
                                                     "width": 'full',
                                                     "label": {
-                                                        "text": params.searchLinks.searchNavigationInputLabel | default('Search the ONS'),
+                                                        "text": (params.search.form.inputLabel if params.search.form else params.searchLinks.searchNavigationInputLabel) | default('Search the ONS'),
                                                         "id": "header-search-input-label"
                                                     },
                                                     "searchButton": {
                                                         "visuallyHideButtonText": true,
-                                                        "text": params.searchLinks.searchNavigationButtonText | default('Search'),
+                                                        "text":  (params.search.form.buttonText if params.search.form else params.searchLinks.searchNavigationButtonText) | default('Search'),
                                                         "iconType": 'search',
                                                         'variant': 'header'
                                                     }
                                                 })
                                             }}
-                                        </div>
+                                        </form>
                                     </div>
-                                    {% if params.searchLinks %}
+                                    {% if params.search or params.searchLinks %}
                                         <div class="ons-container">
                                             <h2 class="ons-u-fs-r--b ons-u-mb-s ons-header-nav-search__heading">
-                                                {{ params.searchLinks.heading }}
+                                                {{ params.search.links.heading if params.search.links else params.searchLinks.heading }}
                                             </h2>
                                             <ul class="ons-list ons-list--bare ons-list--inline">
-                                                {% for item in params.searchLinks.itemsList %}
-                                                    {# Limiting the popular searches to 5 #}
-                                                    {% if loop.index <= 5 %}
-                                                        <li class="ons-list__item">
-                                                            {% if item.text %}
-                                                                {% if item.url %}
-                                                                    <a href="{{ item.url }}" class="ons-u-fs-r ons-header-nav-search__text"
-                                                                        >{{ item.text }}
-                                                                    </a>
-                                                                {% else %}
-                                                                    <p class="ons-u-fs-r ons-header-nav-search__text">{{ item.text }}</p>
+                                                {% if params.searchLinks %}
+                                                    {% for item in params.searchLinks.itemsList %}
+                                                        {# Limiting the popular searches to 5 #}
+                                                        {% if loop.index <= 5 %}
+                                                            <li class="ons-list__item">
+                                                                {% if item.text %}
+                                                                    {% if item.url %}
+                                                                        <a
+                                                                            href="{{ item.url }}"
+                                                                            class="ons-u-fs-r ons-header-nav-search__text"
+                                                                            >{{ item.text }}
+                                                                        </a>
+                                                                    {% else %}
+                                                                        <p class="ons-u-fs-r ons-header-nav-search__text">
+                                                                            {{ item.text }}
+                                                                        </p>
+                                                                    {% endif %}
                                                                 {% endif %}
-                                                            {% endif %}
-                                                        </li>
-                                                    {% endif %}
-                                                {% endfor %}
+                                                            </li>
+                                                        {% endif %}
+                                                    {% endfor %}
+                                                {% endif %}
+                                                {% if params.search.links %}
+                                                    {% for item in params.search.links.itemsList %}
+                                                        {# Limiting the popular searches to 5 #}
+                                                        {% if loop.index <= 5 %}
+                                                            <li class="ons-list__item">
+                                                                {% if item.text %}
+                                                                    {% if item.url %}
+                                                                        <a
+                                                                            href="{{ item.url }}"
+                                                                            class="ons-u-fs-r ons-header-nav-search__text"
+                                                                            >{{ item.text }}
+                                                                        </a>
+                                                                    {% else %}
+                                                                        <p class="ons-u-fs-r ons-header-nav-search__text">
+                                                                            {{ item.text }}
+                                                                        </p>
+                                                                    {% endif %}
+                                                                {% endif %}
+                                                            </li>
+                                                        {% endif %}
+                                                    {% endfor %}
+                                                {% endif %}
                                             </ul>
                                         </div>
                                     {% endif %}
@@ -294,7 +327,7 @@
                     {% 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 }}"
+                            class="ons-header__links ons-grid__col{{ ' ons-u-ml-auto' if not (params.searchLinks or params.search) 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 }}">
@@ -482,13 +515,13 @@
                                     <span class="ons-grid ons-u-ml-no ons-u-d-no@2xs@xs">
                                         {{
                                             onsButton({
-                                                "text": params.searchLinks.searchNavigationButtonText | default('Search'),
+                                                "text": (params.search.form.buttonText if params.search.form.buttonText else searchLinks.searchNavigationButtonText) | default('Search'),
                                                 "classes": "ons-btn--search ons-u-ml-2xs ons-u-d-no ons-js-toggle-search",
                                                 "variants": ["small", "ghost"],
                                                 "iconType": "search",
                                                 "iconPosition": "only",
                                                 "attributes": {
-                                                    "aria-label": params.searchLinks.searchNavigationButtonAriaLabel | default('Toggle search'),
+                                                    "aria-label":(params.search.navButtonAriaLabel if params.search.navButtonAriaLabel else params.searchLinks.searchNavigationButtonAriaLabel) | default('Toggle search'),
                                                     "aria-controls": "ons-site-search",
                                                     "aria-expanded": "false"
                                                 }

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();