@ons/design-system 72.10.3 → 72.10.4

package/components/card/_card.scss

@@ -5,6 +5,7 @@
     &--feature {
         background-color: var(--ons-color-banner-bg);
         padding: 2rem;
+        outline: 1px solid transparent;
     }
 
     &__link {

package/components/card/example-card-set-with-headline-figures.njk

@@ -1,8 +1,8 @@
 {% from "components/card/_macro.njk" import onsCard %}
 
 <div class="ons-container">
-    <div class="ons-grid ons-grid-flex ons-grid-flex--vertical-top">
-        <div class="ons-grid__col ons-grid__col--flex-col ons-grid__col--stretch ons-u-flex-grow ons-col-4@m">
+    <div class="ons-grid ons-grid-flex-gap ons-grid-flex-gap--s ons-grid-flex--vertical-top">
+        <div class="ons-grid__col ons-grid__col--flex-col ons-grid__col--stretch">
             {{
                 onsCard({
                     "variant": 'feature',
@@ -20,7 +20,7 @@
             }}
         </div>
 
-        <div class="ons-grid__col ons-grid__col--flex-col ons-grid__col--stretch ons-u-flex-grow ons-col-4@m">
+        <div class="ons-grid__col ons-grid__col--flex-col ons-grid__col--stretch">
             {{
                 onsCard({
                     "variant": 'feature',
@@ -38,7 +38,7 @@
             }}
         </div>
 
-        <div class="ons-grid__col ons-grid__col--flex-col ons-grid__col--stretch ons-u-flex-grow ons-col-4@m">
+        <div class="ons-grid__col ons-grid__col--flex-col ons-grid__col--stretch">
             {{
                 onsCard({
                     "variant": 'feature',

package/components/chart/_macro.njk

@@ -2,14 +2,9 @@
 
 {% macro onsChart(params) %}
     {% set supportedChartTypes = ['line', 'bar', 'column', 'scatter', 'area', 'columnrange', 'boxplot'] %}
-    {% set supportedChartTypesWithLine = ['column', 'columnrange'] %}
+    {% set supportedChartTypesWithLine = ['column'] %}
     {% set supportedChartTypesWithScatter = ['columnrange'] %}
-
-    {% if params.headingLevel and params.headingLevel >= 1 and params.headingLevel <= 4 %}
-        {% set headingLevel = params.headingLevel %}
-    {% else %}
-        {% set headingLevel = 2 %}
-    {% endif %}
+    {% set headingLevel = params.headingLevel | default(2) %}
     {% set openingTitleTag = "<h" ~ headingLevel %}
     {% set closingTitleTag = "</h" ~ headingLevel ~ ">" %}
     {% set openingSubtitleTag = "<h" ~  (headingLevel + 1) %}
@@ -53,8 +48,11 @@
     >
         <figure class="ons-chart">
             {{ openingTitleTag | safe }} class="ons-chart__title">{{ params.title }}{{ closingTitleTag | safe }}
-            {{ openingSubtitleTag | safe }}
-            class="ons-chart__subtitle">{{ params.subtitle }}{{ closingSubtitleTag | safe }}
+            {% if params.subtitle %}
+                {{ openingSubtitleTag | safe }}
+                class="ons-chart__subtitle">{{ params.subtitle }}{{ closingSubtitleTag | safe }}
+            {% endif %}
+
             {% if params.description %}
                 <p class="ons-u-vh">{{ params.description }}</p>
             {% endif %}
@@ -83,28 +81,31 @@
                 Footnotes for the annotations at mobile
                 Hidden from screen readers because the full text will be read out where they appear in the chart
             #}
-            <ul class="ons-chart__footnotes" aria-hidden="true">
-                {% for annotation in params.annotations %}
-                    <li class="ons-chart__footnote_item">
-                        <span class="ons-chart__footnote-number">{{ loop.index }}</span>
-                        {{ annotation.text }}
-                    </li>
-                {% endfor %}
-                {% for rangeAnnotation in params.rangeAnnotations %}
-                    <li class="ons-chart__footnote_item">
-                        <span class="ons-chart__footnote-number">{{ loop.index + params.annotations | length }}</span>
-                        {{ rangeAnnotation.text }}
-                    </li>
-                {% endfor %}
-                {% for referenceLineAnnotation in params.referenceLineAnnotations %}
-                    <li class="ons-chart__footnote_item">
-                        <span class="ons-chart__footnote-number"
-                            >{{ loop.index + params.annotations | length + params.rangeAnnotations | length }}</span
-                        >
-                        {{ referenceLineAnnotation.text }}
-                    </li>
-                {% endfor %}
-            </ul>
+            {% if params.annotations or params.rangeAnnotations or params.referenceLineAnnotations %}
+                <ul class="ons-chart__footnotes" aria-hidden="true">
+                    {% for annotation in params.annotations %}
+                        <li class="ons-chart__footnote_item">
+                            <span class="ons-chart__footnote-number">{{ loop.index }}</span>
+                            {{ annotation.text }}
+                        </li>
+                    {% endfor %}
+                    {% for rangeAnnotation in params.rangeAnnotations %}
+                        <li class="ons-chart__footnote_item">
+                            <span class="ons-chart__footnote-number">{{ loop.index + params.annotations | length }}</span>
+                            {{ rangeAnnotation.text }}
+                        </li>
+                    {% endfor %}
+                    {% for referenceLineAnnotation in params.referenceLineAnnotations %}
+                        <li class="ons-chart__footnote_item">
+                            <span class="ons-chart__footnote-number"
+                                >{{ loop.index + params.annotations | length + params.rangeAnnotations | length }}</span
+                            >
+                            {{ referenceLineAnnotation.text }}
+                        </li>
+                    {% endfor %}
+                </ul>
+            {% endif %}
+
             {% if params.caption %}
                 <figcaption class="ons-chart__caption">{{ params.caption }}</figcaption>
             {% endif %}
@@ -132,7 +133,7 @@
                         "name": item.name if item.name else '',
                         "data": item.data if item.data else [],
                         "marker": {
-                            "enabled": item.marker if item.marker else false
+                            "enabled": true if (item.type == 'scatter' or params.chartType == 'scatter' or item.marker == true) else false
                         },
                         "dataLabels": {
                             "enabled": item.dataLabels if item.dataLabels else false
@@ -160,8 +161,7 @@
         {%
             set config = {
                 "chart": {
-                    "type": params.chartType,
-                    "inverted": params.isChartInverted if params.isChartInverted == true else false
+                    "type": params.chartType
                 },
                 "legend": {
                     "enabled" : legendValue

package/components/chart/_macro.spec.js

@@ -1132,55 +1132,6 @@ describe('Macro: Chart', () => {
                     expect(configScript).toContain('"type":"columnrange"');
                     expect(configScript).toContain('"type":"scatter"');
                 });
-
-                describe('GIVEN: Params: isChartInverted', () => {
-                    describe('WHEN: isChartInverted parameter is provided and set to true', () => {
-                        const $ = cheerio.load(
-                            renderComponent('chart', {
-                                ...EXAMPLE_COLUMN_RANGE_CHART_PARAMS,
-                                isChartInverted: true,
-                            }),
-                        );
-                        test('THEN: it sets isChartInverted to true', () => {
-                            const configScript = $(`script[data-highcharts-config--uuid]`).html();
-                            expect(configScript).toContain('"chart":{"type":"columnrange","inverted":true}');
-                        });
-                    });
-
-                    describe('WHEN: isChartInverted parameter is provided and set to false', () => {
-                        const $ = cheerio.load(
-                            renderComponent('chart', {
-                                ...EXAMPLE_COLUMN_RANGE_CHART_PARAMS,
-                                isChartInverted: false,
-                            }),
-                        );
-                        test('THEN: it sets isChartInverted to false', () => {
-                            const configScript = $(`script[data-highcharts-config--uuid]`).html();
-                            expect(configScript).toContain('"chart":{"type":"columnrange","inverted":false}');
-                        });
-                    });
-
-                    describe('WHEN: isChartInverted parameter is not provided', () => {
-                        const $ = cheerio.load(renderComponent('chart', EXAMPLE_COLUMN_RANGE_CHART_PARAMS));
-                        test('THEN: it sets isChartInverted to false', () => {
-                            const configScript = $(`script[data-highcharts-config--uuid]`).html();
-                            expect(configScript).toContain('"chart":{"type":"columnrange","inverted":false}');
-                        });
-                    });
-
-                    describe('WHEN: isChartInverted parameter is provided but is not a boolean', () => {
-                        const $ = cheerio.load(
-                            renderComponent('chart', {
-                                ...EXAMPLE_COLUMN_RANGE_CHART_PARAMS,
-                                isChartInverted: 'false',
-                            }),
-                        );
-                        test('THEN: it sets isChartInverted to false', () => {
-                            const configScript = $(`script[data-highcharts-config--uuid]`).html();
-                            expect(configScript).toContain('"chart":{"type":"columnrange","inverted":false}');
-                        });
-                    });
-                });
             });
         });
     });

package/components/chart/chart.js

@@ -62,14 +62,20 @@ class HighchartsBaseChart {
         this.yAxisTickIntervalDesktop = this.node.dataset.highchartsYAxisTickIntervalDesktop
             ? parseInt(this.node.dataset.highchartsYAxisTickIntervalDesktop)
             : undefined;
-        this.commonChartOptions = new CommonChartOptions(this.xAxisTickIntervalDesktop, this.yAxisTickIntervalDesktop);
+        this.commonChartOptions = new CommonChartOptions();
         this.estimateLineLabel = this.node.dataset.highchartsEstimateLineLabel;
         this.uncertainyRangeLabel = this.node.dataset.highchartsUncertaintyRangeLabel;
         this.customReferenceLineValue = this.node.dataset.highchartsCustomReferenceLineValue
             ? parseFloat(this.node.dataset.highchartsCustomReferenceLineValue)
             : undefined;
 
-        this.specificChartOptions = new SpecificChartOptions(this.theme, this.chartType, this.config);
+        this.specificChartOptions = new SpecificChartOptions(
+            this.theme,
+            this.chartType,
+            this.config,
+            this.xAxisTickIntervalDesktop,
+            this.yAxisTickIntervalDesktop,
+        );
         this.lineChart = new LineChart();
         this.barChart = new BarChart();
         this.columnChart = new ColumnChart();
@@ -259,25 +265,29 @@ class HighchartsBaseChart {
             const currentChart = event.target;
             if (this.chartType === 'line') {
                 this.lineChart.updateLastPointMarker(currentChart.series);
-                this.commonChartOptions.hideDataLabels(currentChart.series);
+                this.specificChartOptions.hideDataLabels(currentChart.series);
             }
             if (this.chartType === 'bar') {
                 this.barChart.updateBarChartHeight(this.config, currentChart, this.useStackedLayout);
                 if (!this.hideDataLabels) {
                     this.barChart.postLoadDataLabels(currentChart);
                 } else {
-                    this.commonChartOptions.hideDataLabels(currentChart.series);
+                    this.specificChartOptions.hideDataLabels(currentChart.series);
                 }
             }
             if (this.chartType === 'column') {
-                this.commonChartOptions.hideDataLabels(currentChart.series);
+                this.specificChartOptions.hideDataLabels(currentChart.series);
             }
             if (this.chartType === 'scatter') {
                 this.scatterChart.updateMarkers(currentChart);
+                this.specificChartOptions.hideDataLabels(currentChart.series);
+            }
+            if (this.chartType === 'boxplot') {
+                this.specificChartOptions.hideDataLabels(currentChart.series);
             }
             if (this.chartType === 'columnrange') {
                 this.columnRangeChart.updateColumnRangeChartHeight(this.config, currentChart);
-                this.commonChartOptions.hideDataLabels(currentChart.series);
+                this.specificChartOptions.hideDataLabels(currentChart.series);
 
                 if (this.extraScatter > 0) {
                     const scatterSeries = currentChart.series.filter((series) => series.type === 'scatter');
@@ -290,7 +300,7 @@ class HighchartsBaseChart {
             if (this.extraLines > 0) {
                 currentChart.series.forEach((series) => {
                     if (series.type === 'line') {
-                        this.commonChartOptions.hideDataLabels([series]);
+                        this.specificChartOptions.hideDataLabels([series]);
                     }
                 });
             }
@@ -307,7 +317,7 @@ class HighchartsBaseChart {
             if (this.rangeAnnotationsOptions) {
                 this.rangeAnnotationsOptions.addLine(currentChart);
             }
-            if (this.chartType != 'bar') {
+            if (this.chartType != 'bar' && this.chartType != 'columnrange') {
                 this.specificChartOptions.adjustChartHeight(currentChart, this.percentageHeightDesktop, this.percentageHeightMobile);
             }
             // Update the legend symbols on render to maintain them during resize

package/components/chart/columnrange-chart.js

@@ -57,6 +57,9 @@ class ColumnRangeChart {
                     useHTML: false,
                 },
             },
+            chart: {
+                inverted: true, // Invert the chart to make it horizontal
+            },
             legend: {
                 symbolRadius: 0,
                 itemStyle: {

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(xAxisTickInterval, yAxisTickInterval) {
+    constructor() {
         this.constants = ChartConstants.constants();
 
         this.options = {
@@ -85,7 +85,6 @@ class CommonChartOptions {
                 tickWidth: 1,
                 tickLength: 6,
                 tickColor: this.constants.gridLineColor,
-                tickInterval: yAxisTickInterval,
             },
             xAxis: {
                 labels: {
@@ -109,7 +108,6 @@ class CommonChartOptions {
                 tickWidth: 1,
                 tickLength: 6,
                 tickColor: this.constants.gridLineColor,
-                tickInterval: xAxisTickInterval,
             },
             plotOptions: {
                 series: {
@@ -134,16 +132,6 @@ class CommonChartOptions {
     }
 
     getOptions = () => this.options;
-
-    hideDataLabels = (series) => {
-        series.forEach((series) => {
-            series.update({
-                dataLabels: {
-                    enabled: false,
-                },
-            });
-        });
-    };
 }
 
 export default CommonChartOptions;

package/components/chart/example-bar-with-confidence-levels.njk

@@ -3,9 +3,7 @@
 {{
     onsChart({
         "chartType": "columnrange",
-        "isChartInverted": true,
         "description": "Volume sales, seasonally adjusted, Great Britain, January 2022 to January 2025",
-        "theme": "primary",
         "title": "Food stores showed a strong rise on the month, while non-food stores fell",
         "subtitle": "Figure 6: Upward contribution from housing and household services (including energy) saw the annual CPIH inflation rate rise",
         "id": "uuid",
@@ -56,13 +54,10 @@
                     [-10.5, 12.0],
                     [-12.1, 18.5]
                 ],
-                "dataLabels": true,
                 "name": "Values"
             },
             {
                 "data": [1,2,3,4,5,6,7,8,9,10,3,11,12],
-                "marker": true,
-                "dataLabels": false,
                 "name": "Another test data source",
                 "type": "scatter"
             }

package/components/chart/example-column-with-confidence-levels.njk

@@ -4,7 +4,6 @@
     onsChart({
         "chartType": "boxplot",
         "description": "Public sector net debt excluding public sector banks, percentage of gross domestic product (GDP), UK, financial year ending (FYE) 1901 to October 2024",
-        "theme": "primary",
         "title": "Figure 6: Net debt as a percentage of GDP remains at levels last seen in the early 1960s",
         "subtitle": "Public sector net debt excluding public sector banks, percentage of gross domestic product (GDP), UK, financial year ending (FYE) 1901 to October 2024",
         "id": "uuid",
@@ -39,9 +38,7 @@
                     [817, 817, 817, 817, 817],
                     [806, 806, 806, 806, 806],
                     [864, 864, 864, 864, 864]
-                ],
-                "dataLabels": false,
-                "name": "Net debt"
+                ]
             }
         ],
         'estimateLineLabel': 'Data line',

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

@@ -46,8 +46,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",
@@ -60,8 +59,7 @@
                     [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",
@@ -72,8 +70,7 @@
                     [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",
@@ -84,8 +81,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,

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

@@ -2,7 +2,7 @@ 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) {
+    constructor(theme, type, config, xAxisTickInterval, yAxisTickInterval) {
         this.constants = ChartConstants.constants();
         this.theme = theme;
         this.config = config;
@@ -13,6 +13,12 @@ class SpecificChartOptions {
                 type: type,
                 marginTop: this.config.legend.enabled ? (type === 'boxplot' ? 50 : undefined) : 50,
             },
+            yAxis: {
+                tickInterval: yAxisTickInterval,
+            },
+            xAxis: {
+                tickInterval: xAxisTickInterval,
+            },
         };
     }
 
@@ -32,6 +38,16 @@ class SpecificChartOptions {
         };
     };
 
+    hideDataLabels = (series) => {
+        series.forEach((series) => {
+            series.update({
+                dataLabels: {
+                    enabled: false,
+                },
+            });
+        });
+    };
+
     disableLegendForSingleSeries = (config) => {
         if (config.chart.type != 'boxplot' && config.series.length === 1) {
             config.legend = {
@@ -42,18 +58,25 @@ class SpecificChartOptions {
     };
 
     adjustChartHeight = (currentChart, percentageHeightDesktop, percentageHeightMobile) => {
-        // get height and width of the plot area
-        const plotHeight = currentChart.plotHeight;
+        // get current width of the plot area
         const plotWidth = currentChart.plotWidth;
-        // calculate the new plot height based on the percentage height
-        // default to the current height
-        let newPlotHeight = plotHeight;
+        let newPlotHeight = undefined;
+        let totalHeight = 400; // Highcharts default height - needed if one of the percentage heights is undefined
+
+        // Calculate the new plot height based on the percentage height
         if (plotWidth > 400) {
-            newPlotHeight = Math.round(plotWidth * (percentageHeightDesktop / 100));
+            if (percentageHeightDesktop !== undefined) {
+                newPlotHeight = Math.round(plotWidth * (percentageHeightDesktop / 100));
+            }
         } else {
-            newPlotHeight = Math.round(plotWidth * (percentageHeightMobile / 100));
+            if (percentageHeightMobile !== undefined) {
+                newPlotHeight = Math.round(plotWidth * (percentageHeightMobile / 100));
+            }
+        }
+        // update the total height if we have a new plot height
+        if (newPlotHeight !== undefined) {
+            totalHeight = currentChart.plotTop + newPlotHeight + currentChart.marginBottom;
         }
-        const totalHeight = currentChart.plotTop + newPlotHeight + currentChart.marginBottom;
 
         // set the new size of the chart
         if (totalHeight !== currentChart.chartHeight) {

package/components/description-list/_description-list.scss

@@ -41,17 +41,17 @@
     }
 
     &--inline {
-        .ons-description-list__term {
-            padding-right: 1rem;
-        }
-
         @include mq(l) {
             display: grid;
             grid-template-columns: repeat(3, 1fr);
-            grid-template-rows: repeat(2, 1fr);
-            grid-auto-flow: column;
+            grid-auto-rows: auto;
+            grid-auto-flow: row;
             gap: 0.5rem 2.5rem;
 
+            &-single {
+                grid-template-columns: 1fr;
+            }
+
             .ons-description-list__value {
                 grid-column-start: 2;
             }
@@ -59,6 +59,7 @@
             .ons-description-list__item {
                 display: grid;
                 grid-template-columns: auto 1fr;
+                grid-column-gap: 1rem;
             }
         }
     }

package/components/description-list/_macro.njk

@@ -1,6 +1,6 @@
 {% macro onsDescriptionList(params) %}
     <dl
-        class="ons-description-list ons-description-list__items ons-grid ons-grid--gutterless{{ ' ons-description-list--inline' if params.variant == 'inline' else ' ons-u-cf' }}{{ ' ' + params.classes if params.classes else '' }}"
+        class="ons-description-list ons-description-list__items ons-grid ons-grid--gutterless{{ ' ons-description-list--inline' if params.variant == 'inline' else ' ons-u-cf' }}{{ ' ons-description-list--inline-single' if params.itemsList|length < 2 else '' }}{{ ' ' + params.classes if params.classes else '' }}"
         {% if params.id %}id="{{ params.id }}"{% endif %}
         {% if params.descriptionListLabel %}
             title="{{ params.descriptionListLabel }}" aria-label="{{ params.descriptionListLabel }}"

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

@@ -20,6 +20,27 @@
         background-color: var(--ons-color-ocean-blue);
         color: var(--ons-color-white);
         border: 1px solid var(--ons-color-ocean-blue);
+
+        // remove browser default arrow for <details>
+        &::marker,
+        &::-webkit-details-marker {
+            display: none;
+        }
+
+        &:focus {
+            outline: 0;
+
+            #{$root}__banner-detail {
+                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;
+            }
+
+            #{$root}__banner-detail-title {
+                text-decoration: none;
+            }
+        }
     }
 
     &__banner-contents {
@@ -29,22 +50,28 @@
     &__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;
-    }
+        display: inline-block;
+
+        &--open {
+            display: inline;
 
-    &__banner-detail:focus &__banner-detail-title {
-        text-decoration: none;
+            #{$root}[open] & {
+                display: none;
+            }
+        }
+
+        &--close {
+            display: none;
+
+            #{$root}[open] & {
+                display: inline;
+            }
+        }
     }
 
     &__banner-detail-icon {
@@ -65,19 +92,12 @@
         #{$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;
@@ -85,14 +105,16 @@
         }
 
         &:last-child {
-            border-bottom: 0;
             @extend .ons-u-mb-no;
             @extend .ons-u-pb-no;
+
+            border-bottom: 0;
         }
     }
 
     &__content-meta {
         @extend .ons-u-mb-no;
+
         @include mq('m') {
             flex-basis: 25%;
             min-width: 16.5rem;
@@ -101,7 +123,5 @@
 
     &__content-heading {
         color: var(--ons-color-black);
-        @extend .ons-u-fs-r--b;
-        @extend .ons-u-mb-no;
     }
 }