@ons/design-system 72.6.0 → 72.8.0

package/components/breadcrumbs/_breadcrumbs.scss

@@ -77,6 +77,7 @@ $breadcrumb-chevron-height: 0.65rem;
 
         &:hover {
             color: var(--ons-color-text);
+            text-decoration: underline solid var(--ons-color-text) 2px;
         }
     }
 }

package/components/chart/_chart.scss

@@ -78,3 +78,8 @@
 .highcharts-axis-title {
     width: 100%;
 }
+
+.highcharts-xaxis-labels span {
+    display: block !important;
+    white-space: nowrap !important;
+}

package/components/chart/_macro.njk

@@ -29,6 +29,18 @@
         {% if params.percentageHeightMobile and params.chartType != 'bar' %}
             data-highcharts-percentage-height-mobile="{{ params.percentageHeightMobile }}"
         {% endif %}
+        {% if params.xAxis.tickIntervalMobile %}
+            data-highcharts-x-axis-tick-interval-mobile="{{ params.xAxis.tickIntervalMobile }}"
+        {% endif %}
+        {% if params.xAxis.tickIntervalDesktop %}
+            data-highcharts-x-axis-tick-interval-desktop="{{ params.xAxis.tickIntervalDesktop }}"
+        {% endif %}
+        {% if params.yAxis.tickIntervalMobile %}
+            data-highcharts-y-axis-tick-interval-mobile="{{ params.yAxis.tickIntervalMobile }}"
+        {% endif %}
+        {% if params.yAxis.tickIntervalDesktop %}
+            data-highcharts-y-axis-tick-interval-desktop="{{ params.yAxis.tickIntervalDesktop }}"
+        {% endif %}
     >
         {% if params.chartType in supportedChartTypes %}
             <figure class="ons-chart">
@@ -70,7 +82,7 @@
         {% set series = [] %}
         {% for item in params.series %}
             {%
-                set series = series.concat({
+                set seriesItem = {
                     "name": item.name if item.name else '',
                     "data": item.data if item.data else [],
                     "marker": {
@@ -80,8 +92,10 @@
                         "enabled": item.dataLabels if item.dataLabels else false
                     },
                     "type": item.type if item.type and item.type == 'line' else params.chartType
-                })
+                }
             %}
+            {# Use `set` tag to avoid printing the return value of extend #}
+            {% set _ = extend(series, seriesItem) %}
         {% endfor %}
         {%
             set config = {

package/components/chart/_macro.spec.js

@@ -96,6 +96,38 @@ describe('Macro: Chart', () => {
             });
         });
 
+        describe('GIVEN: Params: Tick Interval', () => {
+            describe('WHEN: tick interval is provided', () => {
+                const $ = cheerio.load(
+                    renderComponent('chart', {
+                        ...EXAMPLE_LINE_CHART_REQUIRED_PARAMS,
+                        xAxis: {
+                            ...EXAMPLE_LINE_CHART_REQUIRED_PARAMS.xAxis,
+                            tickIntervalMobile: 2,
+                            tickIntervalDesktop: 5,
+                        },
+                    }),
+                );
+                test('THEN: it includes the tick interval in the config', () => {
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-x-axis-tick-interval-mobile')).toBe('2');
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-x-axis-tick-interval-desktop')).toBe('5');
+                });
+            });
+            describe('WHEN: tick interval is not provided', () => {
+                const $ = cheerio.load(
+                    renderComponent('chart', {
+                        ...EXAMPLE_LINE_CHART_REQUIRED_PARAMS,
+                    }),
+                );
+                test('THEN: it does not include the tick interval in the config', () => {
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-x-axis-tick-interval-mobile')).toBe(undefined);
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-x-axis-tick-interval-desktop')).toBe(undefined);
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-y-axis-tick-interval-desktop')).toBe(undefined);
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-y-axis-tick-interval-mobile')).toBe(undefined);
+                });
+            });
+        });
+
         describe('GIVEN: Params: Config', () => {
             describe('WHEN: config params are provided', () => {
                 const $ = cheerio.load(renderComponent('chart', EXAMPLE_LINE_CHART_WITH_CONFIG_PARAMS));

package/components/chart/bar-chart.js

@@ -40,6 +40,7 @@ class BarChart {
                     style: {
                         color: this.constants.categoryLabelColor,
                     },
+                    useHTML: false,
                 },
                 // remove the tick marks for bar charts
                 tickWidth: 0,
@@ -48,6 +49,14 @@ class BarChart {
                 title: { align: 'high', textAlign: 'middle', reserveSpace: false, rotation: 0, y: -25, useHTML: true },
             },
             yAxis: {
+                labels: {
+                    rotation: 0,
+                    useHTML: true,
+                    style: {
+                        whiteSpace: 'nowrap',
+                        color: this.constants.categoryLabelColor,
+                    },
+                },
                 title: {
                     // Override the y Axis title settings for bar charts where the y axis is horizontal
                     textAlign: 'right',

package/components/chart/chart.js

@@ -28,7 +28,11 @@ class HighchartsBaseChart {
         }
         this.percentageHeightDesktop = this.node.dataset.highchartsPercentageHeightDesktop;
         this.percentageHeightMobile = this.node.dataset.highchartsPercentageHeightMobile;
-        this.commonChartOptions = new CommonChartOptions();
+        this.xAxisTickIntervalMobile = parseInt(this.node.dataset.highchartsXAxisTickIntervalMobile);
+        this.xAxisTickIntervalDesktop = parseInt(this.node.dataset.highchartsXAxisTickIntervalDesktop);
+        this.yAxisTickIntervalMobile = parseInt(this.node.dataset.highchartsYAxisTickIntervalMobile);
+        this.yAxisTickIntervalDesktop = parseInt(this.node.dataset.highchartsYAxisTickIntervalDesktop);
+        this.commonChartOptions = new CommonChartOptions(this.xAxisTickIntervalDesktop, this.yAxisTickIntervalDesktop);
         this.specificChartOptions = new SpecificChartOptions(this.theme, this.chartType, this.config);
         this.lineChart = new LineChart();
         this.barChart = new BarChart();
@@ -138,7 +142,10 @@ class HighchartsBaseChart {
     // Note this is not the same as the viewport width
     // All responsive rules should be defined here to avoid overriding existing rules
     setResponsiveOptions = () => {
-        const mobileCommonChartOptions = this.commonChartOptions.getMobileOptions();
+        const mobileCommonChartOptions = this.commonChartOptions.getMobileOptions(
+            this.xAxisTickIntervalMobile,
+            this.yAxisTickIntervalMobile,
+        );
         if (!this.config.responsive) {
             this.config.responsive = {};
         }

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

@@ -2,7 +2,7 @@ import ChartConstants from './chart-constants';
 
 // Options that are common to all chart types - these are set once in the Highcharts.setOptions() method
 class CommonChartOptions {
-    constructor() {
+    constructor(xAxisTickInterval, yAxisTickInterval) {
         this.constants = ChartConstants.constants();
 
         this.options = {
@@ -96,9 +96,12 @@ class CommonChartOptions {
                 tickWidth: 1,
                 tickLength: 6,
                 tickColor: this.constants.gridLineColor,
+                tickInterval: yAxisTickInterval,
             },
             xAxis: {
                 labels: {
+                    useHTML: true,
+                    rotation: 0,
                     style: {
                         color: this.constants.axisLabelColor,
                         fontSize: this.constants.desktopFontSize,
@@ -117,6 +120,7 @@ class CommonChartOptions {
                 tickWidth: 1,
                 tickLength: 6,
                 tickColor: this.constants.gridLineColor,
+                tickInterval: xAxisTickInterval,
             },
             plotOptions: {
                 series: {
@@ -141,7 +145,7 @@ class CommonChartOptions {
 
     getOptions = () => this.options;
 
-    getMobileOptions = () => {
+    getMobileOptions = (xAxisTickInterval, yAxisTickInterval) => {
         return {
             legend: {
                 itemStyle: {
@@ -159,6 +163,7 @@ class CommonChartOptions {
                         fontSize: this.constants.mobileFontSize,
                     },
                 },
+                tickInterval: xAxisTickInterval,
             },
             yAxis: {
                 labels: {
@@ -171,6 +176,7 @@ class CommonChartOptions {
                         fontSize: this.constants.mobileFontSize,
                     },
                 },
+                tickInterval: yAxisTickInterval,
             },
         };
     };

package/components/chart/example-clustered-column-chart.njk

@@ -63,7 +63,8 @@
                 "Non-store retailing ",
                 "Automotive fuel"
             ],
-            "type": "linear"
+            "type": "linear",
+            "tickIntervalMobile": 5
         },
         "yAxis": {
             "title": "2022"

package/components/chart/example-column-chart-with-annotations.njk

@@ -43,7 +43,8 @@
                 "Mar 1911", "Mar 1912"
             ],
             "title":  "Years",
-            "type": "linear"
+            "type": "linear",
+            "tickIntervalMobile": 5
         },
         "yAxis": {
             "title": "Percentage of GDP"

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

@@ -43,7 +43,8 @@
                 "Mar 1911", "Mar 1912"
             ],
             "title":  "Years",
-            "type": "linear"
+            "type": "linear",
+            "tickIntervalMobile": 5
         },
         "yAxis": {
             "title": "Percentage of GDP"

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

@@ -29,7 +29,8 @@
         "legend": true,
         "xAxis": {
             "categories": ["One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine", "Ten"],
-            "type": "linear"
+            "type": "linear",
+            "tickIntervalMobile": 5
         },
         "yAxis": {
             "title": "Percent (%)"

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

@@ -154,7 +154,9 @@
                 'Aug 2024',
                 'Sep 2024',
                 'Oct 2024'
-            ]
+            ],
+            "tickIntervalDesktop": 15,
+            "tickIntervalMobile": 30
         },
         "yAxis": {
             "title": "Sales",

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