@ons/design-system 72.6.0 → 72.9.0

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

@@ -0,0 +1,94 @@
+{% from "components/chart/_macro.njk" import onsChart %}
+
+{{
+    onsChart({
+        "chartType": "scatter",
+        "description": "Example scatter chart",
+        "theme": "alternate",
+        "title": "Example scatter chart",
+        "subtitle": "Scatter chart subtitle",
+        "id": "id",
+        "headingLevel": 4,
+        "caption": "Source: Monthly Business Survey, Retails Sales Inquiry from the Office for National Statistics",
+        "download": {
+            'title': 'Download Figure 1 data',
+            'itemsList': [
+            {
+                "text": "Excel spreadsheet (XLSX format, 18KB)",
+                "url": "#"
+            },
+            {
+                "text": "Simple text file (CSV format, 25KB)",
+                "url": "#"
+            },
+            {
+
+                "text": "Image (PNG format, 25KB)",
+                "url": "#"
+            }
+        ]},
+        "xAxis": {
+            "title": "Height"
+        },
+        "yAxis": {
+            "title": "Weight"
+        },
+        "legend": 'true',
+        "series": [
+            {
+                "name": "Female",
+                "data": [
+                    [161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0],
+                    [163.8, 54.5], [158.4, 50.8], [165.2, 57.3], [160.7, 52.4],
+                    [162.3, 55.1], [166.8, 58.7], [159.8, 51.9], [164.5, 56.2],
+                    [158.9, 50.3], [163.1, 53.8],
+                    [161.8, 52.1], [167.1, 58.8], [159.2, 49.8], [157.4, 62.7],
+                    [163.5, 54.9], [158.7, 51.2], [165.5, 57.8], [160.4, 52.7],
+                    [162.7, 55.4], [166.4, 58.4], [159.4, 51.5], [164.8, 56.5],
+                    [158.6, 50.6], [163.4, 53.5]
+                ],
+                "marker": 'true'
+            },
+            {
+                "name": "Male",
+                "data": [
+                    [174.0, 65.6], [175.3, 71.8], [187.5, 80.7], [186.5, 72.6],
+                    [178.2, 68.4], [182.7, 74.3], [176.8, 67.9], [188.4, 77.2],
+                    [184.5, 73.8], [179.6, 70.5], [186.2, 79.4], [183.8, 75.1],
+                    [177.4, 69.2], [185.9, 76.3],
+                    [174.3, 66.1], [175.8, 71.4], [187.8, 80.2], [186.1, 72.9],
+                    [178.7, 68.8], [182.2, 74.7], [176.4, 67.5], [188.0, 77.6],
+                    [184.1, 73.4], [179.2, 70.8], [186.6, 79.8], [183.4, 75.4],
+                    [177.8, 69.6], [185.5, 76.7]
+                ],
+                "marker": 'true'
+            },
+            {
+                "name": "Adolescent Male",
+                "data": [
+                    [168.5, 58.2], [171.2, 62.4], [169.8, 59.7], [173.4, 63.8],
+                    [170.6, 61.2], [172.8, 64.5], [167.9, 57.8], [174.2, 65.1],
+                    [169.5, 60.3], [171.8, 63.2],
+                    [168.8, 58.6], [171.5, 62.8], [169.2, 59.4], [173.7, 63.5],
+                    [170.2, 61.6], [172.4, 64.2], [168.2, 58.1], [173.9, 64.8],
+                    [169.8, 60.7], [171.4, 63.6]
+                ],
+                "marker": 'true'
+            },
+            {
+                "name": "Adolescent Female",
+                "data": [
+                    [164.2, 54.8], [166.5, 57.2], [163.8, 53.9], [165.7, 56.4],
+                    [162.9, 52.8], [167.2, 58.1], [164.8, 55.3], [166.9, 57.8],
+                    [163.5, 53.4], [165.4, 56.7],
+                    [164.5, 55.1], [166.2, 57.5], [163.4, 53.6], [165.9, 56.2],
+                    [162.6, 52.5], [167.5, 58.4], [164.4, 55.6], [166.6, 57.6],
+                    [163.8, 53.7], [165.2, 56.9]
+                ],
+                "marker": 'true'
+            }
+        ],
+        "percentageHeightDesktop": 35,
+        "percentageHeightMobile": 90
+    })
+}}

package/components/chart/line-chart.js

@@ -1,39 +1,34 @@
+import ChartConstants from './chart-constants';
 class LineChart {
+    constructor() {
+        this.chartConstants = ChartConstants.constants();
+        this.markerStyles = this.chartConstants.lineMarkerStyles;
+    }
+
     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,
-                    );
-                }
+        series.forEach((series, i) => {
+            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,
+                    },
+                });
+                // Update the marker styles to use for each series
+                series.update({ marker: this.markerStyles[i] != undefined ? this.markerStyles[i] : this.markerStyles[0] }, false);
             }
         });
     };

package/components/chart/scatter-chart.js

@@ -0,0 +1,34 @@
+import ChartConstants from './chart-constants';
+
+class ScatterChart {
+    constructor() {
+        this.chartConstants = ChartConstants.constants();
+        this.markerStyles = this.chartConstants.scatterMarkerStyles;
+    }
+
+    getScatterChartOptions = () => {
+        return {
+            plotOptions: {
+                scatter: {
+                    // enable tooltips for scatter charts
+                    enableMouseTracking: true,
+                },
+            },
+            xAxis: {
+                gridLineWidth: 1,
+            },
+            yAxis: {
+                gridLineWidth: 1,
+            },
+        };
+    };
+
+    // Use a different set of marker styles for scatter charts
+    updateMarkers = (currentChart) => {
+        currentChart.series.forEach((series, i) => {
+            series.update({ marker: this.markerStyles[i] != undefined ? this.markerStyles[i] : this.markerStyles[0] }, false);
+        });
+    };
+}
+
+export default ScatterChart;

package/components/details/details.js

@@ -8,6 +8,7 @@ export default class Details {
         this.details = detailsElement;
         this.detailsHeader = this.details.querySelector('.ons-js-details-heading');
         this.content = this.details.querySelector('.ons-js-details-content');
+        this.detailsTitle = this.details.querySelector('.ons-js-corrections-details-title');
 
         // Initialise
         const detailsId = detailsElement.getAttribute('id');
@@ -38,6 +39,7 @@ export default class Details {
             const action = open ? 'Open' : 'Close';
             const cls = open ? 'add' : 'remove';
             const openAttribute = open ? 'set' : 'remove';
+            const setText = open ? 'Close detail' : 'Show detail';
 
             this.isOpen = open;
             this.details[`${openAttribute}Attribute`]('open', '');
@@ -45,6 +47,9 @@ export default class Details {
             this.detailsHeader.setAttribute('aria-expanded', open);
             this.content.setAttribute('aria-hidden', !open);
             this.detailsHeader.setAttribute('data-ga-action', `${action} panel`);
+            if (this.detailsTitle) {
+                this.detailsTitle.textContent = setText;
+            }
 
             if (this.onOpen && this.onClose) {
                 if (open) {

package/components/details-panel/_details-panel.scss

@@ -0,0 +1,107 @@
+.ons-details-panel {
+    $root: &;
+
+    background-color: var(--ons-color-info-tint);
+
+    &__info-icon {
+        background: var(--ons-color-white);
+        border-radius: 50%;
+        color: var(--ons-color-ocean-blue);
+        font-size: 1.5rem;
+        font-weight: 700;
+        line-height: 2rem;
+        height: 2rem;
+        width: 2rem;
+        text-align: center;
+    }
+
+    &__banner {
+        list-style: none;
+        background-color: var(--ons-color-ocean-blue);
+        color: var(--ons-color-white);
+        border: 1px solid var(--ons-color-ocean-blue);
+    }
+
+    &__banner-contents {
+        display: flex;
+    }
+
+    &__banner-detail {
+        width: fit-content;
+        cursor: pointer;
+
+        &:focus {
+            background: var(--ons-color-focus);
+            box-shadow: 0 ems($button-shadow-size) 0 var(--ons-color-text-link-focus);
+            color: var(--ons-color-text-link-focus);
+            outline: none;
+        }
+    }
+
+    &__banner-detail-title {
+        text-decoration: underline var(--ons-color-white) 2px;
+        text-underline-position: under;
+    }
+
+    &__banner-detail:focus &__banner-detail-title {
+        text-decoration: none;
+    }
+
+    &__banner-detail-icon {
+        .ons-icon {
+            width: 1rem;
+            height: 1rem;
+            transform: rotate(90deg);
+        }
+
+        #{$root}[open] & {
+            .ons-icon {
+                transform: rotate(270deg);
+            }
+        }
+    }
+
+    &__content {
+        #{$root}[open] & {
+            display: block;
+        }
+
+        .ons-details--initialised & {
+            display: none;
+        }
+    }
+
+    &__item {
+        display: flex;
+        flex-direction: column;
+        border-bottom: 1px solid var(--ons-color-borders);
+        @extend .ons-u-pb-xl;
+        @extend .ons-u-mb-l;
+        @extend .ons-u-ml-2xs;
+
+        @include mq('m') {
+            flex-direction: row;
+            column-gap: 2.5rem;
+        }
+
+        &:last-child {
+            border-bottom: 0;
+            @extend .ons-u-mb-no;
+            @extend .ons-u-pb-no;
+        }
+    }
+
+    &__content-meta {
+        @extend .ons-u-mb-no;
+        @include mq('m') {
+            flex-basis: 25%;
+            min-width: 16.5rem;
+        }
+    }
+
+    &__content-heading {
+        color: var(--ons-color-black);
+        @extend .ons-u-fs-r--b;
+        @extend .ons-u-mb-no;
+    }
+}

package/components/details-panel/_macro.njk

@@ -0,0 +1,41 @@
+{% macro onsDetailsPanel(params) %}
+    <div class="ons-details-panel ons-js-details" {% if params.open %}{{ ' ' }}data-open="true"{% endif %}>
+        <div class="ons-details-panel__banner ons-u-pt-s ons-u-pb-s">
+            <div class="ons-container ons-details-panel__banner-contents">
+                <span class="ons-details-panel__info-icon ons-u-mr-2xs" aria-hidden="true">i</span>
+                <div class="ons-details-panel__banner-body">
+                    <h3 class="ons-details-panel__banner-title ons-u-mb-2xs">{{ params.title }}</h3>
+                    <div class="ons-details-panel__banner-detail ons-js-details-heading">
+                        <span class="ons-details-panel__banner-detail-title ons-js-corrections-details-title ons-u-mr-3xs"
+                            >Show detail</span
+                        >
+                        <span class="ons-details-panel__banner-detail-icon">
+                            {% from "components/icon/_macro.njk" import onsIcon %}
+                            {{
+                                onsIcon({
+                                    "iconType": "chevron"
+                                })
+                            }}
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="ons-container ons-details-panel__content ons-js-details-content ons-u-pt-xl ons-u-pb-3xl">
+            {% for item in params.detailsItems %}
+                <div class="ons-details-panel__item">
+                    <div class="ons-details-panel__content-meta ons-u-mb-l@2xs@m">
+                        <h3 class="ons-details-panel__content-heading">{{ item.text }}</h3>
+                        <time class="ons-details-panel__content-date" datetime="{{ item.date.iso }}">{{ item.date.short }}</time>
+                    </div>
+                    <div class="ons-details-panel__content-description">
+                        <div class="ons-details-panel__content-text ons-u-mb-s">{{ item.description | safe }}</div>
+                        {% if item.url or item.text == 'Content' %}
+                            <a class="ons-details-panel__content-url" href="{{ item.url }}"> View superseded version</a>
+                        {% endif %}
+                    </div>
+                </div>
+            {% endfor %}
+        </div>
+    </div>
+{% endmacro %}

package/components/details-panel/_macro.spec.js

@@ -0,0 +1,54 @@
+/** @jest-environment jsdom */
+import * as cheerio from 'cheerio';
+import axe from '../../tests/helpers/axe';
+import { renderComponent } from '../../tests/helpers/rendering';
+import { EXAMPLE_DETAILS_PANEL } from './_test-examples';
+
+describe('FOR: Macro: Details Panel', () => {
+    describe('GIVEN: Params: title', () => {
+        describe('WHEN: title param is provided', () => {
+            const $ = cheerio.load(renderComponent('details-panel', EXAMPLE_DETAILS_PANEL));
+            test('THEN: banner has the correct title', () => {
+                const contentTitle = $('.ons-details-panel__banner-title').text().replace(/\s+/g, ' ').trim();
+                expect(contentTitle).toBe('Correction and Notice');
+            });
+        });
+    });
+
+    describe('GIVEN: Params: detailsItems', () => {
+        describe('WHEN: detailsItems is provided', () => {
+            const $ = cheerio.load(renderComponent('details-panel', EXAMPLE_DETAILS_PANEL));
+            test('THEN: jest-axe tests pass', async () => {
+                const results = await axe($.html());
+                expect(results).toHaveNoViolations();
+            });
+            test('THEN: items have correct titles', () => {
+                const contentTitle0 = $('.ons-details-panel__content-heading').eq(0).text().trim();
+                const contentTitle1 = $('.ons-details-panel__content-heading').eq(1).text().trim();
+                expect(contentTitle0).toBe('Correction');
+                expect(contentTitle1).toBe('Notice');
+            });
+            test('THEN: items have correct dates', () => {
+                const dateText0 = $('.ons-details-panel__content-date').eq(0).text().trim();
+                const dateText1 = $('.ons-details-panel__content-date').eq(1).text().trim();
+
+                expect(dateText0).toBe('22nd January 2025, 4:30PM');
+                expect(dateText1).toBe('22nd January 2025');
+            });
+            test('THEN: items have correct description text', () => {
+                const contentdescriptionText0 = $('.ons-details-panel__content-text').eq(0).text().trim();
+                const contentdescriptionText1 = $('.ons-details-panel__content-text').eq(1).text().trim();
+
+                expect(contentdescriptionText0).toBe('description1');
+                expect(contentdescriptionText1).toBe('description2');
+            });
+            test('THEN: correction item has a valid link and text', () => {
+                const correctionLinkText = $('.ons-details-panel__content-url').eq(0).text().trim();
+                const correctionLinkUrl = $('.ons-details-panel__content-url').eq(0).attr('href');
+
+                expect(correctionLinkText).toBe('View superseded version');
+                expect(correctionLinkUrl).toBe('#0');
+            });
+        });
+    });
+});

package/components/details-panel/example-details-panel-open.njk

@@ -0,0 +1,29 @@
+{% from "components/details-panel/_macro.njk" import onsDetailsPanel %}
+
+{{
+    onsDetailsPanel({
+        "open": true,
+        "title": "Correction and Notice",
+        "detailsItems": [
+            {
+                "text": 'Correction',
+                "date": {
+                    "iso": '2025-01-22T16:30Z',
+                    "short": '22nd January 2025, 4:30PM'
+                },
+                "description": '<p>The Non-Financial Business Economy publication uses estimates from the Annual Business Survey (ABS). A weighting error means these data have now been revised, with the overall impact being minimal.</p>
+                <p>ONS apologises for any inconvenience caused.</p>',
+                "url": '#0'
+            },
+            {
+                "text": 'Notice',
+                "date": {
+                    "iso": '2025-01-22T16:30Z',
+                    "short": '22nd January 2025, 4:30PM'
+                },
+                "description": '<p>To improve the timeliness of our publications, we have discontinued the previously published <a href="#0">Non-financial business economy<a>, <a href="#0">UK and regional (Annual Business Survey)</a>.
+                We will now deliver the UK and regional elements separately, in our <a href="#0">Non-financial business economy</a>, <a href="#0">UK (Annual Business Survey)</a> and <a href="#0">Non-financial business economy</a>, <a href="#0">regional (Annual Business Survey) bulletins</a>.</p>'
+            }
+        ]
+    })
+}}

package/components/details-panel/example-details-panel.njk

@@ -0,0 +1,28 @@
+{% from "components/details-panel/_macro.njk" import onsDetailsPanel %}
+
+{{
+    onsDetailsPanel({
+        "title": "Correction and Notice",
+        "detailsItems": [
+            {
+                "text": 'Correction',
+                "date": {
+                    "iso": '2025-01-22T16:30Z',
+                    "short": '22nd January 2025, 4:30PM'
+                },
+                "description": '<p>The Non-Financial Business Economy publication uses estimates from the Annual Business Survey (ABS). A weighting error means these data have now been revised, with the overall impact being minimal.</p>
+                <p>ONS apologises for any inconvenience caused.</p>',
+                "url": '#0'
+            },
+            {
+                "text": 'Notice',
+                "date": {
+                    "iso": '2025-01-22T16:30Z',
+                    "short": '22nd January 2025, 4:30PM'
+                },
+                "description": '<p>To improve the timeliness of our publications, we have discontinued the previously published <a href="#0">Non-financial business economy<a>, <a href="#0">UK and regional (Annual Business Survey)</a>.
+                We will now deliver the UK and regional elements separately, in our <a href="#0">Non-financial business economy</a>, <a href="#0">UK (Annual Business Survey)</a> and <a href="#0">Non-financial business economy</a>, <a href="#0">regional (Annual Business Survey) bulletins</a>.</p>'
+            }
+        ]
+    })
+}}

package/components/hero/_hero.scss

@@ -10,6 +10,8 @@
 }
 
 .ons-hero {
+    $root: &;
+
     background-color: var(--ons-color-hero-bg);
     display: flex;
     overflow: hidden;
@@ -81,73 +83,14 @@
         }
     }
 
-    &__badge-link {
-        display: block;
-        width: fit-content;
-    }
-
     &--topic {
         color: var(--ons-color-branded);
         @extend .ons-u-mb-no;
     }
 
-    &__container {
-        align-items: center;
-        display: flex;
-        min-height: 300px;
-        position: relative;
-
-        &--has-details {
-            align-items: flex-start; // Prevents undesired shift if not enough content
-        }
-    }
-
-    &__content {
-        @include mq(l) {
-            display: flex;
-            justify-content: space-between;
-            align-items: flex-start;
-        }
-    }
-
-    &__information {
-        display: flex;
-        flex-wrap: wrap;
-        column-gap: 1rem;
-
-        & .ons-hero__panel {
-            padding: 0.5rem 1rem;
-            border-left: 5px solid transparent;
-            @extend .ons-u-fs-r--b;
-        }
-
-        & .ons-hero__link {
-            padding: 0.5rem 0;
-        }
-    }
-
-    &__pre-title {
-        margin-bottom: 0.5rem;
-
-        @include mq('2xs', m) {
-            max-width: 145px;
-        }
-    }
-
-    &__details {
-        padding-bottom: 3.5rem;
-        padding-top: 2rem;
-        position: relative;
-        z-index: 5;
-    }
-
-    &__details:has(.ons-breadcrumbs) {
-        padding-top: 1rem;
-    }
-
     &--dark & {
         &__details {
-            color: var(--ons-color-text-inverse) !important;
+            color: var(--ons-color-text-inverse);
 
             a {
                 color: inherit;
@@ -162,6 +105,9 @@
                 color: inherit;
             }
         }
+        &--topic {
+            color: var(--ons-color-light-blue-grey);
+        }
     }
     &--navy-blue & {
         &__details {
@@ -172,6 +118,10 @@
             }
         }
 
+        &--topic {
+            color: var(--ons-color-light-blue-grey);
+        }
+
         &__circle-1 {
             @include mq(l) {
                 background-color: var(--ons-color-spring-green);
@@ -454,6 +404,83 @@
         }
     }
 
+    &--dark,
+    &--navy-blue {
+        .ons-breadcrumbs__link {
+            color: var(--ons-color-text-inverse);
+
+            &:hover {
+                color: var(--ons-color-text-inverse);
+                text-decoration: underline solid var(--ons-color-text-inverse) 2px;
+            }
+            &:focus {
+                color: var(--ons-color-text);
+            }
+            &:focus:hover {
+                color: var(--ons-color-text);
+                text-decoration: none;
+            }
+        }
+    }
+
+    &__badge-link {
+        display: block;
+        width: fit-content;
+    }
+
+    &__container {
+        align-items: center;
+        display: flex;
+        min-height: 300px;
+        position: relative;
+
+        &--has-details {
+            align-items: flex-start; // Prevents undesired shift if not enough content
+        }
+    }
+
+    &__content {
+        @include mq(l) {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+        }
+    }
+
+    &__information {
+        display: flex;
+        flex-wrap: wrap;
+        column-gap: 1rem;
+
+        & .ons-hero__panel {
+            padding: 0.5rem 1rem;
+            border-left: 5px solid transparent;
+            @extend .ons-u-fs-r--b;
+        }
+
+        & .ons-hero__link {
+            padding: 0.5rem 0;
+        }
+    }
+
+    &__pre-title {
+        margin-bottom: 0.5rem;
+
+        @include mq('2xs', m) {
+            max-width: 145px;
+        }
+    }
+
+    &__details {
+        padding-bottom: 3.5rem;
+        padding-top: 2rem;
+        position: relative;
+        z-index: 5;
+        #{$root}--with-breadcrumbs & {
+            padding-top: 1rem;
+        }
+    }
+
     &__title-container {
         @include mq(l) {
             display: grid;

package/components/hero/_macro.njk

@@ -6,7 +6,7 @@
     {% set detailsColumns = params.detailsColumns | default ('8') %}
 
     <section
-        class="ons-hero ons-grid--gutterless{% if params.variants and params.variants is not string %}{% for variant in params.variants %}{{ ' ' }}ons-hero--{{ variant }}{% endfor %}{% else %}{{ ' ' }}ons-hero--{{ params.variants }}{% endif %}"
+        class="ons-hero ons-grid--gutterless{% if params.breadcrumbs %}{{ ' ' }}ons-hero--with-breadcrumbs{% endif %}{% if params.variants and params.variants is not string %}{% for variant in params.variants %}{{ ' ' }}ons-hero--{{ variant }}{% endfor %}{% else %}{{ ' ' }}ons-hero--{{ params.variants }}{% endif %}"
     >
         {% if params.variants == 'navy-blue' %}
             <div class="ons-hero__circles" aria-hidden="true">

package/components/hero/example-hero-dark.njk

@@ -11,6 +11,6 @@
             "url": '#0',
             "text": 'Get started'
         },
-        "variants": ['dark']
+        "variants": 'dark'
     })
 }}