@ons/design-system 72.10.7 → 72.10.9

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: {
@@ -71,6 +78,7 @@ class BarChart {
     };
 
     // Updates the config to move the data labels inside the bars, but only if the bar is wide enough
+    // See the checkHideDataLabels function in chart.js for more details about when this function is run
     // This also runs when the chart is resized
     postLoadDataLabels = (currentChart) => {
         const insideOptions = this.getBarChartLabelsInsideOptions();

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

@@ -2,7 +2,7 @@ import pym from 'pym.js';
 
 class ChartIframeResize {
     static selector() {
-        return '[data-chart-iframe]';
+        return '.ons-chart__iframe-wrapper';
     }
 
     constructor(node) {

package/components/chart/chart.dom.js

@@ -1,8 +1,10 @@
 import HighchartsBaseChart from './chart';
 import domready from '../../js/domready';
 
-domready(async () => {
-    [HighchartsBaseChart].forEach((Component) => {
-        document.querySelectorAll(Component.selector()).forEach((el) => new Component(el));
+document.fonts.ready.then(() => {
+    domready(async () => {
+        [HighchartsBaseChart].forEach((Component) => {
+            document.querySelectorAll(Component.selector()).forEach((el) => new Component(el));
+        });
     });
 });

package/components/chart/chart.js

@@ -192,9 +192,15 @@ class HighchartsBaseChart {
     };
 
     // Check if the data labels should be hidden
-    // They should be hidden for clustered bar charts with more than 2 series, and also for stacked bar charts
+    // They should be hidden where there are more than 20 data points in a series, for clustered bar charts with more than 2 series, and also for stacked bar charts
     checkHideDataLabels = () => {
-        return (this.chartType === 'bar' && this.config.series.length > 2) || this.useStackedLayout === true;
+        let hideDataLabels = (this.chartType === 'bar' && this.config.series.length > 2) || this.useStackedLayout === true;
+        this.config.series.forEach((series) => {
+            if (series.data.length > 20) {
+                hideDataLabels = true;
+            }
+        });
+        return hideDataLabels;
     };
 
     // Adjust font size and annotations for smaller width of chart

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-area-chart.njk

@@ -63,6 +63,7 @@
             "title": "Y axis title"
         },
         "percentageHeightDesktop": 50,
-        "percentageHeightMobile": 120
+        "percentageHeightMobile": 120,
+        "fallbackImageUrl": '/img/small/area-chart-screenshot.png'
     })
 }}

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,6 +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": "https://www.ons.gov.uk/visualisations/dvc3294/fig01/index.html",
+        "fallbackImageUrl": "/img/small/line-chart-screenshot.png"
     })
 }}

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

@@ -222,6 +222,7 @@
             }
         ],
         "percentageHeightDesktop": 35,
-        "percentageHeightMobile": 90
+        "percentageHeightMobile": 90,
+        "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/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', () => {

package/components/hero/example-hero-dark-with-external-breadcrumbs.njk

@@ -0,0 +1,194 @@
+---
+title: 'Example: Table of contents on full page'
+layout: ~
+---
+
+{% from "components/hero/_macro.njk" import onsHero %}
+{% from "components/breadcrumbs/_macro.njk" import onsBreadcrumbs %}
+{% extends "layout/_template.njk" %}
+{%
+    set pageConfig = {
+        "header": {
+            "variants": 'basic',
+            "menuLinks": {
+                "id": "menu-links",
+                "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"
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            }
+        }
+    }
+%}
+{% block pageContent %}
+    {{
+        onsBreadcrumbs({
+            "ariaLabel": 'Breadcrumbs',
+            "variant": "dark",
+            "itemsList": [
+                {
+                    "url": '/',
+                    "text": 'Home'
+                }
+            ]
+        })
+    }}
+    <main id="main-content">
+        {{
+            onsHero({
+                "title": 'Design and build digital services for the ONS',
+                "text": 'Everything you need to make accessible, consistent digital products',
+                "button": {
+                    "url": '#0',
+                    "text": 'Get started'
+                },
+                "variants": 'dark'
+            })
+        }}
+    </main>
+{% endblock %}