@ons/design-system 72.4.0 → 72.6.0

package/components/chart/line-chart.js

@@ -0,0 +1,42 @@
+class LineChart {
+    getLineChartOptions = () => {
+        return {
+            plotOptions: {
+                line: {
+                    lineWidth: 3,
+                    linecap: 'round',
+                    // In a later PR we will update the marker styles
+                    marker: {
+                        enabled: false,
+                        radius: 4,
+                        symbol: 'circle',
+                        lineWidth: 0,
+                    },
+                },
+            },
+        };
+    };
+
+    updateLastPointMarker = (series) => {
+        series.forEach((series) => {
+            // If markers are disabled, hide them all but the last point marker
+            if (series.options.marker.enabled.enabled === undefined) {
+                const points = series.points;
+                if (points && points.length > 0) {
+                    // Show only the last point marker
+                    const lastPoint = points[points.length - 1];
+                    lastPoint.update(
+                        {
+                            marker: {
+                                enabled: true,
+                            },
+                        },
+                        false,
+                    );
+                }
+            }
+        });
+    };
+}
+
+export default LineChart;

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

@@ -0,0 +1,22 @@
+import ChartConstants from './chart-constants';
+
+// Options that rely on the chart config but are not specific to the chart type
+class SpecificChartOptions {
+    constructor(theme, type, config) {
+        this.constants = ChartConstants.constants();
+        this.theme = theme;
+        this.config = config;
+
+        this.options = {
+            colors: this.theme === 'alternate' ? this.constants.alternateTheme : this.constants.primaryTheme,
+            chart: {
+                type: type,
+                marginTop: this.config.legend.enabled ? undefined : 50,
+            },
+        };
+    }
+
+    getOptions = () => this.options;
+}
+
+export default SpecificChartOptions;

package/components/footer/_footer.scss

@@ -62,4 +62,16 @@
             @extend .ons-u-mb-2xs;
         }
     }
+
+    &__logo-large {
+        @include mq('2xs', 414px) {
+            display: none;
+        }
+    }
+
+    &__logo-small {
+        @include mq(415px) {
+            display: none;
+        }
+    }
 }

package/components/footer/_macro.njk

@@ -9,23 +9,44 @@
     {% endif %}
     {% set extraLogo = params.footerLogo.logos.logo2 %}
     {% set onsLogo %}
-        {% if params.lang == 'cy' %}
-            {{-
-                onsIcon({
-                    "iconType": 'ons-logo-stacked-cy' if extraLogo else 'ons-logo-cy',
-                    "altText": 'Swyddfa Ystadegau Gwladol',
-                    "altTextId": 'ons-logo-cy-footer-alt'
-                })
-            -}}
-        {% else %}
-            {{-
-                onsIcon({
-                    "iconType": 'ons-logo-stacked-en' if extraLogo else 'ons-logo-en' ,
-                    "altText": 'Office for National Statistics',
-                    "altTextId": 'ons-logo-en-footer-alt'
-                })
-            -}}
-        {% endif %}
+        <div class="ons-footer__logo-large">
+            {% if params.lang == 'cy' %}
+                {{-
+                    onsIcon({
+                        "iconType": 'ons-logo-stacked-cy' if extraLogo else 'ons-logo-cy',
+                        "altText": 'Swyddfa Ystadegau Gwladol',
+                        "altTextId": 'ons-logo-cy-footer-alt'
+                    })
+                -}}
+            {% else %}
+                {{-
+                    onsIcon({
+                        "iconType": 'ons-logo-stacked-en' if extraLogo else 'ons-logo-en',
+                        "altText": 'Office for National Statistics',
+                        "altTextId": 'ons-logo-en-footer-alt'
+                    })
+                -}}
+            {% endif %}
+        </div>
+        <div class="ons-footer__logo-small">
+            {% if params.lang == 'cy' %}
+                {{-
+                    onsIcon({
+                        "iconType": 'ons-logo-stacked-cy',
+                        "altText": 'Swyddfa Ystadegau Gwladol',
+                        "altTextId": 'ons-logo-stacked-cy-footer-alt'
+                    })
+                -}}
+            {% else %}
+                {{-
+                    onsIcon({
+                        "iconType": 'ons-logo-stacked-en',
+                        "altText": 'Office for National Statistics',
+                        "altTextId": 'ons-logo-stacked-en-footer-alt'
+                    })
+                -}}
+            {% endif %}
+        </div>
     {% endset %}
 
     <footer class="ons-footer">

package/components/header/_header.scss

@@ -168,13 +168,13 @@
     }
 
     &__org-logo--large {
-        @include mq('2xs', 454px) {
+        @include mq('2xs', 460px) {
             display: none;
         }
     }
 
     &__org-logo--small {
-        @include mq(455px) {
+        @include mq(461px) {
             display: none;
         }
     }
@@ -278,6 +278,22 @@
         }
     }
 
+    &-nav-search {
+        background-color: var(--ons-color-branded-tint);
+        margin-bottom: 1rem;
+        @extend .ons-u-pt-2xl;
+        @extend .ons-u-pb-2xl;
+
+        width: 100%;
+        &__input {
+            border-bottom: 1px solid var(--ons-color-ocean-blue);
+            @extend .ons-u-mb-2xl;
+            @extend .ons-u-pb-2xl;
+
+            row-gap: 1rem;
+        }
+    }
+
     .ons-btn {
         top: 0 !important;
     }

package/components/header/_macro.njk

@@ -180,20 +180,21 @@
                             {% endif %}
                         </div>
                     {% endif %}
-                    {% if params.menuLinks %}
-                        <div class="ons-header__links ons-grid__col ons-u-ml-auto">
+
+                    {% if params.variants == "basic" %}
+                        <div class="ons-grid__col ons-col-auto">
                             {% if params.menuLinks %}
-                                <div class="ons-grid__col ons-col-auto">
+                                <div class="ons-header__links ons-grid__col">
                                     {{
                                         onsButton({
-                                            "text": params.menuLinks.toggleNavButton.text | default("Menu"),
-                                            "classes": "ons-u-fs-s--b ons-js-toggle-services button-nav",
+                                            "text": params.menuLinks.toggleMenuButton.text | default("Menu"),
+                                            "classes": "ons-u-fs-s--b ons-js-toggle-nav-menu button-nav",
                                             "type": "button",
                                             "variants": "menu",
                                             "iconType": "chevron",
                                             "iconPosition": "before",
                                             "attributes": {
-                                                "aria-label": params.menuLinks.toggleNavButton.ariaLabel | default("Toggle menu"),
+                                                "aria-label": params.menuLinks.toggleMenuButton.ariaLabel | default("Toggle menu"),
                                                 "aria-controls": params.menuLinks.id,
                                                 "aria-expanded": "false"
                                             }
@@ -201,6 +202,23 @@
                                     }}
                                 </div>
                             {% endif %}
+                            {% if params.searchLinks %}
+                                <div class="ons-header__links ons-grid__col">
+                                    {{
+                                        onsButton({
+                                            "classes": "ons-u-fs-s--b ons-js-toggle-header-search ons-btn--search ons-btn--search-icon",
+                                            "type": "button",
+                                            "variants": "search",
+                                            "iconType": "search",
+                                            "attributes": {
+                                                "aria-label": params.searchLinks.searchButtonAriaLabel | default("Toggle search"),
+                                                "aria-controls": params.searchLinks.id,
+                                                "aria-expanded": "false"
+                                            }
+                                        })
+                                    }}
+                                </div>
+                            {% endif %}
                         </div>
                     {% endif %}
                 </div>
@@ -240,9 +258,10 @@
                     {% endif %}
                 </nav>
             {% endif %}
-            {% if params.menuLinks %}
+
+            {% if params.variants == "basic" and params.menuLinks %}
                 <nav
-                    class="ons-u-d-no ons-js-services-mobile-nav ons-header-nav-menu ons-u-mb-s ons-u-pt-2xl"
+                    class="ons-u-d-no ons-js-nav-menu ons-header-nav-menu ons-u-mb-s ons-u-pt-2xl"
                     id="{{ params.menuLinks.id }}"
                     aria-label="{{ params.menuLinks.ariaLabel | default("Menu navigation") }}"
                 >
@@ -312,6 +331,60 @@
                     {% endif %}
                 </nav>
             {% endif %}
+
+            {% if params.variants == "basic" and params.searchLinks %}
+                <nav
+                    class="ons-u-d-no ons-js-header-search ons-header-nav-search {{ params.searchLinks.classes }}"
+                    id="{{ params.searchLinks.id }}"
+                    aria-label="{{ params.searchLinks.searchNavigationAriaLabel | default('Search navigation') }}"
+                >
+                    <div class="ons-container">
+                        <div class="ons-header-nav-search__input">
+                            {% from "components/input/_macro.njk" import onsInput %}
+                            {{
+                                onsInput({
+                                    "id": 'search-field',
+                                    "width": 'full',
+                                    "label": {
+                                        "text": 'Search the ONS',
+                                        "id": "header-search-input-label"
+                                    },
+                                    "searchButton": {
+                                        "visuallyHideButtonText": true,
+                                        "text": 'Search',
+                                        "iconType": 'search',
+                                        'variant': 'header'
+
+                                    }
+                                })
+                            }}
+                        </div>
+                    </div>
+                    {% if 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 }}</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>
+                                                {% endif %}
+                                            {% endif %}
+                                        </li>
+                                    {% endif %}
+                                {% endfor %}
+                            </ul>
+                        </div>
+                    {% endif %}
+                </nav>
+            {% endif %}
         </div>
         {% if params.variants != "basic" %}
             <div class="ons-header__main">

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'
+                }
+            ]
+        }
+    })
+}}