@ons/design-system 73.0.4 → 73.3.0

package/components/chart/_chart.scss

@@ -12,8 +12,8 @@
             fill: var(--ons-color-grey-75); /* Forces the color used for text in high contrast mode */
         }
         .highcharts-annotation-label text,
-        .highcharts-plot-line-label,
-        .highcharts-plot-band-label {
+        .highcharts-plot-band-label,
+        .highcharts-plot-line-label {
             fill: CanvasText !important; /* Forces the color used for text in high contrast mode */
         }
 

package/components/chart/_macro.spec.js

@@ -260,6 +260,38 @@ describe('Macro: Chart', () => {
                     expect(configScript).toContain('"startOnTick":false');
                     expect(configScript).toContain('"endOnTick":true');
                 });
+
+                test('THEN: yAxis min and max are included in config with the correct values', () => {
+                    const params = {
+                        id: 'test-chart',
+                        title: 'Test Chart',
+                        xAxis: {
+                            title: 'X Axis Title',
+                            categories: ['A', 'B', 'C'],
+                            type: 'linear',
+                            labelFormat: '{value}',
+                        },
+                        chartType: 'line',
+                        yAxis: {
+                            title: 'Y Axis Title',
+                            labelFormat: '{value}',
+                            min: 20.5,
+                            max: 99.5,
+                            tickIntervalDesktop: 0.5,
+                            startOnTick: false,
+                            endOnTick: true,
+                        },
+                        series: [],
+                    };
+
+                    const $ = cheerio.load(renderComponent('chart', params));
+                    const configScript = $(`script[data-highcharts-config--${params.id}]`).html();
+
+                    expect(configScript).toContain('"min":20.5');
+                    expect(configScript).toContain('"max":99.5');
+                    expect(configScript).toContain('"startOnTick":false');
+                    expect(configScript).toContain('"endOnTick":true');
+                });
             });
 
             describe('WHEN: yAxis min and max are not provided', () => {

package/components/chart/annotations-options.js

@@ -11,6 +11,7 @@ class AnnotationsOptions {
             {
                 labels: [],
                 labelOptions: {
+                    useHTML: true,
                     shape: 'connector',
                     borderColor: this.constants.labelColor,
                     padding: 3,

package/components/chart/area-chart.js

@@ -5,6 +5,9 @@ class AreaChart {
                 symbolWidth: 12,
                 symbolHeight: 12,
             },
+            yAxis: {
+                reversedStacks: false,
+            },
             plotOptions: {
                 area: {
                     fillOpacity: 1,

package/components/chart/bar-chart.js

@@ -73,6 +73,7 @@ class BarChart {
                     reserveSpace: true,
                     useHTML: false,
                 },
+                reversedStacks: false,
             },
         };
     };

package/components/chart/chart.js

@@ -56,16 +56,16 @@ class HighchartsBaseChart {
         this.percentageHeightDesktop = this.node.dataset.highchartsPercentageHeightDesktop;
         this.percentageHeightMobile = this.node.dataset.highchartsPercentageHeightMobile;
         this.xAxisTickIntervalMobile = this.node.dataset.highchartsXAxisTickIntervalMobile
-            ? parseInt(this.node.dataset.highchartsXAxisTickIntervalMobile)
+            ? parseFloat(this.node.dataset.highchartsXAxisTickIntervalMobile)
             : undefined;
         this.xAxisTickIntervalDesktop = this.node.dataset.highchartsXAxisTickIntervalDesktop
-            ? parseInt(this.node.dataset.highchartsXAxisTickIntervalDesktop)
+            ? parseFloat(this.node.dataset.highchartsXAxisTickIntervalDesktop)
             : undefined;
         this.yAxisTickIntervalMobile = this.node.dataset.highchartsYAxisTickIntervalMobile
-            ? parseInt(this.node.dataset.highchartsYAxisTickIntervalMobile)
+            ? parseFloat(this.node.dataset.highchartsYAxisTickIntervalMobile)
             : undefined;
         this.yAxisTickIntervalDesktop = this.node.dataset.highchartsYAxisTickIntervalDesktop
-            ? parseInt(this.node.dataset.highchartsYAxisTickIntervalDesktop)
+            ? parseFloat(this.node.dataset.highchartsYAxisTickIntervalDesktop)
             : undefined;
         this.commonChartOptions = new CommonChartOptions();
         this.estimateLineLabel = this.node.dataset.highchartsEstimateLineLabel;
@@ -167,6 +167,7 @@ class HighchartsBaseChart {
         if (this.chartType === 'scatter') {
             // Merge the scatter chart options with the existing config
             this.config = mergeConfigs(this.config, scatterChartOptions);
+            this.specificChartOptions.limitSeriesForScatterChart();
         }
         if (this.chartType === 'boxplot') {
             // Merge the boxplot chart options with the existing config
@@ -187,6 +188,7 @@ class HighchartsBaseChart {
             }
         }
 
+        // Limit the number of series to the theme length
         this.specificChartOptions.limitSeriesToThemeLength();
 
         // Disable the legend for single series charts

package/components/chart/column-chart.js

@@ -1,6 +1,9 @@
 class ColumnChart {
     getColumnChartOptions = (config, useStackedLayout, extraLines) => {
         return {
+            yAxis: {
+                reversedStacks: false,
+            },
             plotOptions: {
                 column: {
                     ...this.getPointPadding(config, useStackedLayout, extraLines, false),

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

@@ -34,7 +34,7 @@
                     39.2, 47.1, 44.0, 46, 65.3, 53.2, 49.1, 49.3, 50.4, 48.1,
                     43.9, 41.8
                 ],
-                "name": "Test series 3"
+                "name": "Test series 1"
             },
             {
                 "data": [
@@ -48,7 +48,7 @@
                     37.8, 41.0, 43.0, 42.9, 41.8, 39.8, 37.9, 38.2, 37.6, 36.7,
                     33.9, 31.8
                 ],
-                "name": "Test series 1"
+                "name": "Test series 3"
             }
         ],
         "xAxis": {

package/components/chart/example-line-chart-with-label-format.njk

@@ -0,0 +1,89 @@
+{% from "components/chart/_macro.njk" import onsChart %}
+
+{{
+    onsChart({
+        "chartType": "line",
+        "description": "Line chart showing the annual rate of inflation for the Consumer Prices Index including owner occupiers’ housing costs (CPIH) and its components.",
+        "theme": "primary",
+        "title": "Sales volumes and values saw moderate growth in July 2024",
+        "subtitle": "Figure 6: Upward contribution from housing and household services (including energy) saw the annual CPIH inflation rate rise",
+        "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": "#"
+            }
+        ]},
+        "footnotes": {
+            "title": "Footnotes",
+            "content": "<ol><li>Non-store retailing refers to retailers that do not have a store presence. While the majority is made up of online retailers, it also includes other retailers, such as stalls and markets.</li><li>More data are available in our Retail Sales Index datasets.</li></ol>"
+        },
+        "legend": true,
+        "xAxis": {
+            "title": "Year",
+            "type": "linear",
+            "labelFormat": "{value:.2f}",
+            "categories": [
+                'Oct 2014',
+                'Nov 2014',
+                'Dec 2014',
+                'Jan 2015',
+                'Feb 2015',
+                'Mar 2015',
+                'Apr 2015',
+                'May 2015',
+                'Jun 2015',
+                'Jul 2015',
+                'Aug 2015',
+                'Sep 2015'
+            ],
+            "tickIntervalMobile": 3
+        },
+        "yAxis": {
+            "title": "Sales",
+            "labelFormat": "{value:,.2f}"
+        },
+        "series": [
+            {
+                "name": 'CPIH',
+                "data": [
+                    1.3, 1.1, 0.7, 0.5, 0.4, 0.3, 0.3, 0.4, 0.3, 0.5, 0.4, 0.2
+                ]
+            },
+            {
+                "name": 'Goods',
+                "data": [
+                    0.3, 0.2, 1.0, 1.5, 2.0, 2.1, 1.9, 1.8, 2.0, 1.8, 2.0, 2.3
+                ]
+            },
+            {
+                "name": 'Services',
+                "data": [
+                    2.2, 2.1, 2.1, 2.1, 2.2, 2.2, 2.0, 2.1, 2.1, 2.2, 2.2, 2.2
+                ]
+            },
+            {
+                "name": 'CPIH excl energy, food, alcohol & tobacco',
+                "data": [
+                    1.5, 1.3, 1.4, 1.5, 1.4, 1.2, 1.1, 1.2, 1.0, 1.3, 1.2, 1.2
+                ]
+            }
+        ],
+        "percentageHeightDesktop": 35,
+        "percentageHeightMobile": 90,
+        "fallbackImageUrl": '/img/small/line-chart-screenshot.png'
+    })
+}}

package/components/chart/reference-line-annotations-options.js

@@ -13,6 +13,7 @@ class ReferenceLineAnnotationsOptions {
             let referenceLineConfig = {
                 label: {
                     text: referenceLineAnnotation.text,
+                    useHTML: true,
                     style: {
                         color: this.constants.labelColor,
                         fontSize: this.constants.defaultFontSize,

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

@@ -51,11 +51,18 @@ class SpecificChartOptions {
         const themeArray = this.theme === 'alternate' ? this.constants.alternateTheme : this.constants.primaryTheme;
 
         // Limit the series to the theme array length
-        if (this.config.series.length > themeArray.length) {
+        if (this.type !== 'scatter' && this.config.series.length > themeArray.length) {
             this.config.series.length = themeArray.length;
         }
     };
 
+    limitSeriesForScatterChart = () => {
+        // Scatter charts only support up to 4 series for readability
+        if (this.config.series.length > 4) {
+            this.config.series.length = 4;
+        }
+    };
+
     getOptions = () => this.options;
 
     getMobileOptions = (xAxisTickInterval, yAxisTickInterval) => {

package/components/details-panel/_macro.njk

@@ -13,11 +13,7 @@
                     {{ openingTag | safe }}
                     class="ons-details-panel__banner-title ons-u-fs-m ons-u-mb-2xs">{{ params.title }}{{ closingTag | safe }}
                     <span class="ons-details-panel__banner-detail">
-                        <span class="ons-details-panel__banner-detail-title ons-u-mr-3xs">
-                            <span class="ons-details-panel__banner-detail-title--open"> {{ openText }} </span>
-                            <span class="ons-details-panel__banner-detail-title--close"> {{ closeText }} </span>
-                        </span>
-                        <span class="ons-details-panel__banner-detail-icon">
+                        <span class="ons-details-panel__banner-detail-icon ons-u-mr-3xs">
                             {% from "components/icon/_macro.njk" import onsIcon %}
                             {{
                                 onsIcon({
@@ -25,11 +21,15 @@
                                 })
                             }}
                         </span>
+                        <span class="ons-details-panel__banner-detail-title">
+                            <span class="ons-details-panel__banner-detail-title--open"> {{ openText }} </span>
+                            <span class="ons-details-panel__banner-detail-title--close"> {{ closeText }} </span>
+                        </span>
                     </span>
                 </span>
             </span>
         </summary>
-        <dl class="ons-container ons-details-panel__content ons-u-pt-xl ons-u-pb-3xl">
+        <dl class="ons-container ons-details-panel__content ons-u-p-l">
             {% for item in params.detailsItems %}
                 <div class="ons-details-panel__item ons-u-pb-xl ons-u-mb-l ons-u-ml-2xs">
                     <dt class="ons-details-panel__content-meta ons-u-mb-l@2xs@m">

package/components/header/_header.scss

@@ -254,6 +254,8 @@
 
             #{$root}__menu-links {
                 width: 100%;
+                display: flex;
+                align-items: center;
 
                 #{$root}__language {
                     display: block;
@@ -327,13 +329,11 @@
 
         // updates styles when js is enabled
         .ons-js-enabled & {
-            position: absolute;
-            top: 100%;
+            position: relative;
             left: 50%;
             width: 100vw;
             transform: translateX(-50%);
             border-top: 0;
-            z-index: 500;
         }
     }