@ons/design-system 72.10.8 → 72.10.10

package/components/chart/bar-chart.js

@@ -47,7 +47,14 @@ class BarChart {
                 tickWidth: 0,
                 tickLength: 0,
                 tickColor: 'transparent',
-                title: { align: 'high', textAlign: 'middle', reserveSpace: false, rotation: 0, y: -25, useHTML: true },
+                title: {
+                    text: '', // Set to an empty string to hide the x-axis title for bar charts
+                    textAlign: 'middle',
+                    reserveSpace: false,
+                    rotation: 0,
+                    y: -25,
+                    useHTML: true,
+                },
             },
             yAxis: {
                 labels: {

package/components/chart/chart-iframe-resize.js

@@ -2,12 +2,12 @@ import pym from 'pym.js';
 
 class ChartIframeResize {
     static selector() {
-        return '.ons-chart__iframe-wrapper';
+        return '.ons-chart__iframe-wrapper iframe';
     }
 
     constructor(node) {
         this.node = node;
-        new pym.Parent(this.node.getAttribute('id'), this.node.dataset.url, {
+        new pym.Child(this.node.getAttribute('id'), this.node.dataset.url, {
             title: this.node.dataset.title,
         });
     }

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

@@ -57,6 +57,15 @@ class CommonChartOptions {
             },
             accessibility: {
                 enabled: true,
+                keyboardNavigation: {
+                    focusBorder: {
+                        enabled: false,
+                    },
+                    enabled: true,
+                    seriesNavigation: {
+                        mode: 'serialize',
+                    },
+                },
             },
             yAxis: {
                 labels: {

package/components/chart/example-bar-chart-with-axis-min-and-max-values.njk

@@ -38,7 +38,6 @@
                 "Non-store retailing",
                 "Automotive fuel"
             ],
-            "title": "Retailing",
             "type": "linear"
         },
         "yAxis": {

package/components/chart/example-bar-chart-with-point-range-and-reference-line-annotations.njk

@@ -54,8 +54,8 @@
             {
                 "text": "A test point annotation",
                 "point": {"x": 2, "y": 3},
-                "labelOffsetX": 40,
-                "labelOffsetY": -30
+                "labelOffsetX": 50,
+                "labelOffsetY": 60
             }
         ],
         "rangeAnnotations": [
@@ -71,7 +71,7 @@
                 "range": {"axisValue1": 5, "axisValue2": 6},
                 "axis": "y",
                 "labelOffsetX": -80,
-                "labelOffsetY": 220,
+                "labelOffsetY": 230,
                 "labelWidth": 80
             }
         ],
@@ -88,7 +88,7 @@
                 "axis": "y",
                 "labelWidth": 100,
                 "labelOffsetX": 10,
-                "labelOffsetY": 140
+                "labelOffsetY": 170
             }
         ]
     })

package/components/chart/example-bar-chart.njk

@@ -42,7 +42,6 @@
                 "Non-store retailing",
                 "Automotive fuel"
             ],
-            "title": "Retailing",
             "type": "linear"
         },
         "yAxis": {

package/components/chart/example-iframe-chart.njk

@@ -27,7 +27,7 @@ may not be available in the future once Florence is decommissioned. #}
                 }
             ]
         },
-        "iframeUrl": "https://www.ons.gov.uk/visualisations/dvc3294/fig01/index.html",
+        "iframeUrl": "/iframe/index.html",
         "fallbackImageUrl": "/img/small/line-chart-screenshot.png"
     })
 }}

package/components/chart/range-annotations-options.js

@@ -160,7 +160,7 @@ class RangeAnnotationsOptions {
             }
 
             // Create and add the connecting line
-            const line = document.createElement('div');
+            const line = document.createElement('tspan');
             line.classList.add('ons-chart__connector-line');
             line.setAttribute('data-range-annotation-line', true);
             labelElement.appendChild(line);

package/components/download-resources/download-resources.spec.js

@@ -432,11 +432,13 @@ describe('script: download-resources', () => {
     });
 
     describe('"Reset all filters" button', () => {
+        const { setTimeout } = require('node:timers/promises');
         beforeEach(async () => {
             await setTestPage('/test', RENDERED_EXAMPLE_PAGE);
             await page.click('#general-public');
             await page.click('#logo');
             await page.click('.ons-js-adv-filter__reset');
+            await setTimeout(50);
         });
 
         it('resets state of all filter checkboxes ', async () => {

package/components/duration/example-duration-error-for-single-field.njk

@@ -1,4 +1,3 @@
-{% from "components/question/_macro.njk" import onsQuestion %}
 {% from "components/duration/_macro.njk" import onsDuration %}
 
 {{

package/components/duration/example-duration-error.njk

@@ -1,4 +1,3 @@
-{% from "components/question/_macro.njk" import onsQuestion %}
 {% from "components/duration/_macro.njk" import onsDuration %}
 
 {{

package/components/footer/_macro.spec.js

@@ -412,12 +412,12 @@ describe('macro: footer', () => {
             });
         });
         describe('correct link for language', () => {
-            it('has the Welsh lang link when the default Welsh lang ons icon is present', () => {
+            it('has the Welsh lang link when the default Welsh lang ONS icon is present', () => {
                 const $ = cheerio.load(renderComponent('footer', { lang: 'cy' }));
 
                 expect($('.ons-footer__logo-link').attr('href')).toBe('https://cy.ons.gov.uk/');
             });
-            it('has the English lang link when the default English lang ons icon is present', () => {
+            it('has the English lang link when the default English lang ONS icon is present', () => {
                 const $ = cheerio.load(renderComponent('footer', { lang: 'en' }));
 
                 expect($('.ons-footer__logo-link').attr('href')).toBe('https://www.ons.gov.uk/');

package/components/header/_macro.njk

@@ -461,17 +461,12 @@
                         </div>
 
                         {% if params.button %}
-                            {% if params.variants == 'neutral' %}
-                                {% set buttonVariant = "ghost-dark" %}
-                            {% else %}
-                                {% set buttonVariant = "ghost" %}
-                            {% endif %}
                             <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink">
                                 {{
                                     onsButton({
                                         "text": params.button.text,
                                         "classes": "ons-u-d-no@2xs@l" if params.navigation else "ons-u-d-no@2xs@m",
-                                        "variants": buttonVariant,
+                                        "variants": "ghost",
                                         "name": params.button.name,
                                         "attributes": params.button.attributes,
                                         "url": params.button.url,
@@ -482,19 +477,14 @@
                             </div>
                         {% endif %}
                         {% if params.navigation or params.siteSearchAutosuggest %}
-                            <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink">
+                            <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@l">
                                 {% if params.siteSearchAutosuggest %}
-                                    {% if params.variants == 'neutral' %}
-                                        {% set buttonVariant = ["small", "ghost-dark"] %}
-                                    {% else %}
-                                        {% set buttonVariant = ["small", "ghost"] %}
-                                    {% endif %}
-                                    <span class="ons-grid ons-u-d-no@2xs@xs ons-u-ml-no ons-u-d-no@l">
+                                    <span class="ons-grid ons-u-ml-no ons-u-d-no@2xs@xs">
                                         {{
                                             onsButton({
                                                 "text": params.searchLinks.searchNavigationButtonText | default('Search'),
                                                 "classes": "ons-btn--search ons-u-ml-2xs ons-u-d-no ons-js-toggle-search",
-                                                "variants": buttonVariant,
+                                                "variants": ["small", "ghost"],
                                                 "iconType": "search",
                                                 "iconPosition": "only",
                                                 "attributes": {
@@ -507,12 +497,11 @@
                                     </span>
                                 {% endif %}
                                 {% if params.navigation.toggleNavigationButton %}
-                                    {% set buttonVariant = ["mobile", "ghost"] %}
                                     {{
                                         onsButton({
                                             "text": params.navigation.toggleNavigationButton.text,
                                             "classes": "ons-u-ml-2xs ons-u-d-no ons-js-navigation-button ons-u-d-no@l",
-                                            "variants": buttonVariant,
+                                            "variants": ["mobile", "ghost"],
                                             "attributes": {
                                                 "aria-label": params.navigation.toggleNavigationButton.ariaLabel | default("Toggle main menu") ,
                                                 "aria-controls": params.navigation.id,

package/components/header/example-header-button-and-navigation.njk

@@ -0,0 +1,133 @@
+---
+'fullWidth': true
+---
+
+{% from "components/header/_macro.njk" import onsHeader %}
+
+{{
+    onsHeader({
+        "title": 'ONS Service',
+        "mastheadLogoUrl": '#0',
+        "button": {
+            "text": 'Save and sign out',
+            "name": 'button-name',
+            "attributes": {
+                "a": 'b'
+            },
+            "url": '#0'
+        },
+        "navigation": {
+            "id": 'main-nav',
+            "ariaLabel": 'Main menu',
+            "currentPath": '#menu-item-3',
+            "currentPageTitle": 'Design system',
+            "itemsList": [
+                {
+                    "text": 'Menu item 1',
+                    "url": '#0'
+                },
+                {
+                    "text": 'Menu item 2',
+                    "url": '#menu-item-2'
+                },
+                {
+                    "text": 'Menu item 3',
+                    "url": '#0'
+                }
+            ],
+            "toggleNavigationButton": {
+                "text": 'Menu',
+                "ariaLabel": 'Toggle main menu'
+            },
+            "subNavigation": {
+                "id": 'sub-nav',
+                "overviewUrl": '#design-system',
+                "overviewText": 'Overview',
+                "ariaLabel": 'Section menu',
+                "currentPath": '#access-codes',
+                "itemsList": [
+                    {
+                        "text": 'Guidance',
+                        "url": '#menu-item-3'
+                    },
+                    {
+                        "text": 'Foundations',
+                        "url": '#0'
+                    },
+                    {
+                        "text": 'Components',
+                        "url": '#0'
+                    },
+                    {
+                        "text": 'Patterns',
+                        "url": '#patterns',
+                        "sections": [
+                            {
+                                "sectionTitle": 'Ask users for...',
+                                "children": [
+                                    {
+                                        "title": 'Access codes',
+                                        "url": '#access-codes'
+                                    },
+                                    {
+                                        "title": 'Addresses',
+                                        "url": '#0'
+                                    },
+                                    {
+                                        "title": 'Dates',
+                                        "url": '#0'
+                                    },
+                                    {
+                                        "title": 'Durations',
+                                        "url": '#0'
+                                    },
+                                    {
+                                        "title": 'Email addresses',
+                                        "url": '#0'
+                                    },
+                                    {
+                                        "title": 'Numeric values',
+                                        "url": '#0'
+                                    },
+                                    {
+                                        "title": 'Phone numbers',
+                                        "url": '#0'
+                                    }
+                                ]
+                            },
+                            {
+                                "sectionTitle": 'Help users to...',
+                                "children": [
+                                    {
+                                        "title": 'Access support in multiple languages',
+                                        "url": '#0'
+                                    },
+                                    {
+                                        "title": 'Change language',
+                                        "url": '#0'
+                                    },
+                                    {
+                                        "title": 'Check answers',
+                                        "url": '#0'
+                                    },
+                                    {
+                                        "title": 'Control cookies',
+                                        "url": '#0'
+                                    },
+                                    {
+                                        "title": 'Correct errors',
+                                        "url": '#0'
+                                    },
+                                    {
+                                        "title": 'Extend a session',
+                                        "url": '#0'
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            }
+        }
+    })
+}}

package/components/header/example-header-external-with-navigation-and-search.njk

@@ -40,7 +40,7 @@
             }
         },
         "siteSearchAutosuggest": {
-            "autosuggestData":  "/examples/data/country-of-birth.json",
+            "autosuggestData": "/examples/data/country-of-birth.json",
             "label": "search",
             "instructions": "instructions",
             "ariaYouHaveSelected": "ariaYouHaveSelected",

package/components/hero/_hero.scss

@@ -88,7 +88,8 @@
         @extend .ons-u-mb-no;
     }
 
-    &--dark & {
+    &--dark &,
+    &--navy-blue & {
         &__details {
             color: var(--ons-color-text-inverse);
 
@@ -97,10 +98,16 @@
             }
 
             a:hover {
-                color: var(--ons-color-text-inverse-link-hover);
-                text-decoration-thickness: 2px;
+                text-decoration: underline solid var(--ons-color-text-inverse-link-hover) 2px;
+            }
+
+            a:focus {
+                color: var(--ons-color-text);
             }
 
+            a:focus:hover {
+                text-decoration: none;
+            }
             .ons-details__heading {
                 color: inherit;
             }
@@ -129,7 +136,7 @@
                 height: 59px;
                 position: absolute;
                 right: 289px;
-                top: -11px;
+                top: 58px;
                 width: 59px;
             }
         }
@@ -141,7 +148,7 @@
                 position: absolute;
                 height: 30px;
                 right: 193px;
-                top: 11px;
+                top: 65px;
                 width: 30px;
             }
         }
@@ -150,7 +157,7 @@
             @include mq(l) {
                 height: 60px;
                 right: 112px;
-                top: 25px;
+                top: 75px;
                 width: 60px;
                 background-color: var(--ons-color-white);
                 border-radius: 50%;
@@ -165,7 +172,7 @@
                 height: 60px;
                 position: absolute;
                 right: 208px;
-                top: 80px;
+                top: 130px;
                 width: 60px;
             }
 
@@ -191,7 +198,7 @@
                 height: 14px;
                 position: absolute;
                 right: 222px;
-                top: 187px;
+                top: 237px;
                 width: 14px;
             }
 
@@ -217,7 +224,7 @@
                 height: 15px;
                 position: absolute;
                 right: 135px;
-                top: 188px;
+                top: 238px;
                 width: 15px;
             }
         }
@@ -342,18 +349,6 @@
         }
 
         &__circle-1 {
-            @include mq(l) {
-                background-color: var(--ons-color-soft-blue-grey);
-                border-radius: 50%;
-                height: 440px;
-                position: absolute;
-                right: 59px;
-                top: -339px;
-                width: 440px;
-            }
-        }
-
-        &__circle-2 {
             background-color: var(--ons-color-light-orange);
             border-radius: 50%;
             bottom: 4%;
@@ -379,7 +374,7 @@
             }
         }
 
-        &__circle-3 {
+        &__circle-2 {
             background-color: var(--ons-color-ocean-blue);
             border-radius: 50%;
             bottom: 7%;

package/components/hero/_macro.njk

@@ -16,7 +16,7 @@
             </div>
         {% elif params.variants == 'pale-blue' %}
             <div class="ons-hero__circles" aria-hidden="true">
-                {% for i in range(1, 4) %}
+                {% for i in range(1, 3) %}
                     <div class="ons-hero__circle-{{ i }}"></div>
                 {% endfor %}
             </div>

package/components/hero/_macro.spec.js

@@ -109,7 +109,7 @@ describe('macro: hero', () => {
         const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, variants: 'grey', officialStatisticsBadge: true }));
 
         expect($('.ons-hero__badge').length).toBe(1);
-        expect($('.ons-hero__badge svg title').text().trim()).toBe('Official Statistics Badge');
+        expect($('.ons-hero__badge svg title').text().trim()).toBe('Official Statistics Badge - Accredited');
     });
 
     it('outputs the statistics badge as a link when officialStatisticsBadgeUrl is provided', () => {