@ons/design-system 72.10.4 → 72.10.6

package/components/button/_button.scss

@@ -610,9 +610,6 @@ $button-shadow-size: 3px;
     }
 
     &--menu {
-        align-items: center;
-        display: flex;
-        padding: 1rem;
         border-bottom: 4px solid rgb(0 0 0 / 0%);
         .ons-icon {
             transform: rotate(90deg);
@@ -699,9 +696,14 @@ $button-shadow-size: 3px;
     &--search-icon,
     &--close {
         border-bottom: 4px solid transparent;
+    }
+
+    &--menu,
+    &--search-icon,
+    &--close {
         align-items: center;
         display: flex;
-        padding: 1rem;
+        padding: 1.25rem 1rem 1rem;
     }
 
     &--search-icon &,
@@ -768,8 +770,8 @@ $button-shadow-size: 3px;
     }
 
     &--search-icon:focus {
-        background-color: var(--ons-color-focus);
-        border-color: var(--ons-color-text-link-focus);
+        background-color: var(--ons-color-focus) !important;
+        border-color: var(--ons-color-text-link-focus) !important;
     }
 
     &--search-icon:focus &,

package/components/chart/_chart.scss

@@ -8,19 +8,7 @@
         @extend .ons-u-fs-r--b;
     }
 
-    &__title {
-        font-size: 1.25rem;
-        line-height: 1.625rem;
-    }
-
-    &__subtitle {
-        font-size: 1rem;
-        line-height: 1.3rem;
-    }
-
     &__caption {
-        font-size: 1rem;
-        line-height: 1.2rem;
         color: var(--ons-color-grey-75);
     }
 
@@ -91,8 +79,8 @@
 
         &-item {
             &--uncertainty {
-                width: 14px;
-                height: 14px;
+                width: 12px;
+                height: 12px;
                 background-color: rgb(32 96 149 / 65%);
             }
 

package/components/chart/_macro.njk

@@ -4,6 +4,8 @@
     {% set supportedChartTypes = ['line', 'bar', 'column', 'scatter', 'area', 'columnrange', 'boxplot'] %}
     {% set supportedChartTypesWithLine = ['column'] %}
     {% set supportedChartTypesWithScatter = ['columnrange'] %}
+    {% set supportedChartTypesWithXAxisMinAndMax = ['scatter'] %}
+    {% set supportedChartTypesWithYAxisMinAndMax = ['line', 'bar', 'column', 'scatter', 'area', 'columnrange', 'boxplot'] %}
     {% set headingLevel = params.headingLevel | default(2) %}
     {% set openingTitleTag = "<h" ~ headingLevel %}
     {% set closingTitleTag = "</h" ~ headingLevel ~ ">" %}
@@ -75,7 +77,9 @@
             {% if params.chartType in supportedChartTypes %}
                 <div data-highcharts-chart></div>
             {% else %}
-                <p data-invalid-chart-type><b>Chart type "{{ params.chartType }}" is not supported</b></p>
+                <p data-invalid-chart-type data-unsupported-chart-text>
+                    <b>{{ '"' + params.chartType + '" - ' + (params.unsupportedChartText or 'chart type is not supported') }}</b>
+                </p>
             {% endif %}
             {#
                 Footnotes for the annotations at mobile
@@ -172,7 +176,11 @@
                     },
                     "labels": {
                         "format": params.yAxis.labelFormat
-                    }
+                    },
+                    "min": params.yAxis.min if params.yAxis.min is defined and params.chartType in supportedChartTypesWithYAxisMinAndMax else undefined,
+                    "max": params.yAxis.max if params.yAxis.max is defined and params.chartType in supportedChartTypesWithYAxisMinAndMax else undefined,
+                    "startOnTick": params.yAxis.startOnTick if params.yAxis.startOnTick is defined and params.chartType in supportedChartTypesWithYAxisMinAndMax else undefined,
+                    "endOnTick": params.yAxis.endOnTick if params.yAxis.endOnTick is defined and params.chartType in supportedChartTypesWithYAxisMinAndMax else undefined
                 },
                 "xAxis": {
                     "title": {
@@ -182,7 +190,11 @@
                     "type": params.xAxis.type,
                     "labels": {
                         "format": params.xAxis.labelFormat
-                    }
+                    },
+                    "min": params.xAxis.min if params.xAxis.min is defined and params.chartType in supportedChartTypesWithXAxisMinAndMax else undefined,
+                    "max": params.xAxis.max if params.xAxis.max is defined and params.chartType in supportedChartTypesWithXAxisMinAndMax else undefined,
+                    "startOnTick": params.xAxis.startOnTick if params.xAxis.startOnTick is defined and params.chartType in supportedChartTypesWithXAxisMinAndMax else undefined,
+                    "endOnTick": params.xAxis.endOnTick if params.xAxis.endOnTick is defined and params.chartType in supportedChartTypesWithXAxisMinAndMax else undefined
                 },
                 "series": series
             }

package/components/chart/_macro.spec.js

@@ -207,6 +207,30 @@ describe('Macro: Chart', () => {
             });
         });
 
+        describe('GIVEN: Params: unsupportedChartText', () => {
+            describe('WHEN: unsupportedChartText is provided', () => {
+                const params = { ...EXAMPLE_INVALID_CHART_PARAMS, unsupportedChartText: 'this chart type is not valid' };
+                const $ = cheerio.load(renderComponent('chart', params));
+
+                test('THEN: it renders the unsupported chart text in the correct element', () => {
+                    const invalid = $('[data-invalid-chart-type]');
+                    expect(invalid.length).toBe(1);
+                    expect(invalid.text().trim()).toContain('- this chart type is not valid');
+                });
+            });
+
+            describe('WHEN: unsupportedChartText is not provided', () => {
+                const params = { ...EXAMPLE_INVALID_CHART_PARAMS };
+                const $ = cheerio.load(renderComponent('chart', params));
+
+                test('THEN: it renders the default unsupported chart text', () => {
+                    const invalid = $('[data-invalid-chart-type]');
+                    expect(invalid.length).toBe(1);
+                    expect(invalid.text().trim()).toBe('"invalid" - chart type is not supported');
+                });
+            });
+        });
+
         describe('GIVEN: Params: Description', () => {
             describe('WHEN: description is provided', () => {
                 const $ = cheerio.load(
@@ -1146,7 +1170,7 @@ describe('Macro: Chart', () => {
                 });
 
                 test('THEN: it renders the error message', () => {
-                    expect($('[data-invalid-chart-type]').text()).toBe('Chart type "invalid" is not supported');
+                    expect($('[data-invalid-chart-type]').text().trim()).toBe('"invalid" - chart type is not supported');
                 });
 
                 test('THEN: it does not include the Highcharts JSON config', () => {
@@ -1294,4 +1318,142 @@ describe('Macro: Chart', () => {
             });
         });
     });
+
+    describe('FOR: Axis Min, Max, startOnTick, endOnTick', () => {
+        const BASE_PARAMS = {
+            id: 'test-chart',
+            title: 'Test Chart',
+            xAxis: {
+                title: 'X Axis Title',
+                categories: ['A', 'B', 'C'],
+                type: 'linear',
+                labelFormat: '{value}',
+            },
+            yAxis: {
+                title: 'Y Axis Title',
+                labelFormat: '{value}',
+            },
+            series: [],
+        };
+
+        describe('GIVEN: chartType supports xAxis min/max (bar, scatter)', () => {
+            test('THEN: xAxis min and max are included in config when provided', () => {
+                const params = {
+                    ...BASE_PARAMS,
+                    chartType: 'scatter',
+                    xAxis: {
+                        ...BASE_PARAMS.xAxis,
+                        min: 1,
+                        max: 10,
+                        startOnTick: true,
+                        endOnTick: false,
+                    },
+                };
+
+                const $ = cheerio.load(renderComponent('chart', params));
+                const configScript = $(`script[data-highcharts-config--${params.id}]`).html();
+
+                expect(configScript).toContain('"min":1');
+                expect(configScript).toContain('"max":10');
+                expect(configScript).toContain('"startOnTick":true');
+                expect(configScript).toContain('"endOnTick":false');
+            });
+
+            test('THEN: xAxis min and max are NOT included if not defined', () => {
+                const params = {
+                    ...BASE_PARAMS,
+                    chartType: 'scatter',
+                    xAxis: {
+                        ...BASE_PARAMS.xAxis,
+                        min: undefined,
+                        max: undefined,
+                        startOnTick: undefined,
+                        endOnTick: undefined,
+                    },
+                };
+
+                const $ = cheerio.load(renderComponent('chart', params));
+                const configScript = $(`script[data-highcharts-config--${params.id}]`).html();
+
+                const config = JSON.parse(configScript);
+
+                expect(config.xAxis.min).toBeUndefined();
+                expect(config.xAxis.max).toBeUndefined();
+                expect(config.xAxis.startOnTick).toBeUndefined();
+                expect(config.xAxis.endOnTick).toBeUndefined();
+            });
+        });
+
+        describe('GIVEN: chartType supports yAxis min/max (line, bar, column, scatter, area, columnrange, boxplot)', () => {
+            test('THEN: yAxis min and max are included in config when provided', () => {
+                const params = {
+                    ...BASE_PARAMS,
+                    chartType: 'line',
+                    yAxis: {
+                        ...BASE_PARAMS.yAxis,
+                        min: 0,
+                        max: 100,
+                        startOnTick: false,
+                        endOnTick: true,
+                    },
+                };
+
+                const $ = cheerio.load(renderComponent('chart', params));
+                const configScript = $(`script[data-highcharts-config--${params.id}]`).html();
+
+                expect(configScript).toContain('"min":0');
+                expect(configScript).toContain('"max":100');
+                expect(configScript).toContain('"startOnTick":false');
+                expect(configScript).toContain('"endOnTick":true');
+            });
+
+            test('THEN: yAxis min and max are NOT included if not defined', () => {
+                const params = {
+                    ...BASE_PARAMS,
+                    chartType: 'line',
+                    yAxis: {
+                        ...BASE_PARAMS.yAxis,
+                        min: undefined,
+                        max: undefined,
+                        startOnTick: undefined,
+                        endOnTick: undefined,
+                    },
+                };
+
+                const $ = cheerio.load(renderComponent('chart', params));
+                const configScript = $(`script[data-highcharts-config--${params.id}]`).html();
+
+                const config = JSON.parse(configScript);
+
+                expect(config.yAxis.min).toBeUndefined();
+                expect(config.yAxis.max).toBeUndefined();
+                expect(config.yAxis.startOnTick).toBeUndefined();
+                expect(config.yAxis.endOnTick).toBeUndefined();
+            });
+        });
+
+        describe('GIVEN: chartType does NOT support axis min/max', () => {
+            test('THEN: xAxis min and max are ignored', () => {
+                const params = {
+                    ...BASE_PARAMS,
+                    chartType: 'line',
+                    xAxis: {
+                        ...BASE_PARAMS.xAxis,
+                        min: 1,
+                        max: 10,
+                        startOnTick: true,
+                        endOnTick: true,
+                    },
+                };
+
+                const $ = cheerio.load(renderComponent('chart', params));
+                const configScript = $(`script[data-highcharts-config--${params.id}]`).html();
+
+                expect(configScript).not.toContain('"min":1');
+                expect(configScript).not.toContain('"max":10');
+                expect(configScript).not.toContain('"startOnTick":true');
+                expect(configScript).not.toContain('"endOnTick":true');
+            });
+        });
+    });
 });

package/components/chart/boxplot.js

@@ -30,6 +30,9 @@ class Boxplot {
                     color: this.constants.legendLabelColor,
                 },
             },
+            tooltip: {
+                enabled: false,
+            },
         };
     };
 }

package/components/chart/columnrange-chart.js

@@ -20,6 +20,9 @@ class ColumnRangeChart {
                     },
                 },
             },
+            tooltip: {
+                enabled: false,
+            },
             xAxis: {
                 // Update the category label colours for bar charts
                 labels: {

package/components/chart/example-area-chart-with-axis-min-and-max-values.njk

@@ -0,0 +1,72 @@
+{% from "components/chart/_macro.njk" import onsChart %}
+
+{{
+    onsChart({
+        "chartType": "area",
+        "description": "Area chart showing the annual rate of inflation for the Consumer Prices Index including owner occupiers’ housing costs (CPIH) and its components.",
+        "theme": "alternate",
+        "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": "#"
+            }
+        ]},
+        "legend": "true",
+        "series": [
+        {
+                "data": [
+                    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"
+            },
+            {
+                "data": [
+                    28.8, 23.2, 33.0, 25.8, 20.8, 39.8, 37.9, 28.2, 37.6, 46.7,
+                    43.9, 41.8
+                ],
+                "name": "Test series 2"
+            },
+            {
+                "data": [
+                    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"
+            }
+        ],
+        "xAxis": {
+            "categories": [
+                "Mar 1901", "Mar 1902", "Mar 1903", "Mar 1904", "Mar 1905", "Mar 1906", "Mar 1907", "Mar 1908", "Mar 1909", "Mar 1910",
+                "Mar 1911", "Mar 1912"
+            ],
+            "title":  "Years",
+            "type": "linear"
+        },
+        "yAxis": {
+            "title": "Y axis title",
+            "min": -25,
+            "max": 150,
+            "startOnTick": true,
+            "endOnTick": false
+        },
+        "percentageHeightDesktop": 50,
+        "percentageHeightMobile": 120
+    })
+}}

package/components/chart/example-bar-chart-with-axis-min-and-max-values.njk

@@ -0,0 +1,59 @@
+{% from "components/chart/_macro.njk" import onsChart %}
+
+{{
+    onsChart({
+        "chartType": "bar",
+        "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",
+        "caption": "Source: Monthly Business Survey, Retail 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": {
+            "categories": [
+                "All retailing",
+                "All retailing excluding Automotive fuel",
+                "Food stores",
+                "Department stores",
+                "Other non-food stores",
+                "Textile clothing \u0026 footwear stores",
+                "Household goods stores",
+                "Non-store retailing",
+                "Automotive fuel"
+            ],
+            "title": "Retailing",
+            "type": "linear"
+        },
+        "yAxis": {
+            "title": "Percent (%)",
+            "min": -5,
+            "max": 10,
+            "startOnTick": true,
+            "endOnTick": false
+        },
+        "series": [
+            {
+                "data": [1.7, 2.1, 5.6, 0, -0.6, -2.7, -1.7, 2.4, -1.2],
+                "dataLabels": true,
+                "name": "Jan-25"
+            }
+        ]
+    })
+}}

package/components/chart/example-column-chart-with-axis-min-and-max-values.njk

@@ -0,0 +1,59 @@
+{% from "components/chart/_macro.njk" import onsChart %}
+
+{{
+    onsChart({
+        "chartType": "column",
+        "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",
+        "caption": "Source: Public sector finances from the Office for Budget Responsibility (OBR) and 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": "#"
+                }
+            ]
+        },
+        "legend": false,
+        "series": [
+            {
+                "data": [
+                    37.8, 41.0, 43.0, 42.9, 41.8, 39.8, 37.9, 38.2, 37.6, 36.7,
+                    33.9, 31.8
+                ],
+                "dataLabels": false,
+                "name": "Public sector net debt as a % of GDP (PSND)"
+            }
+        ],
+        "xAxis": {
+            "categories": [
+                "Mar 1901", "Mar 1902", "Mar 1903", "Mar 1904", "Mar 1905", "Mar 1906", "Mar 1907", "Mar 1908", "Mar 1909", "Mar 1910",
+                "Mar 1911", "Mar 1912"
+            ],
+            "title":  "Years",
+            "type": "linear",
+            "tickIntervalMobile": 5
+        },
+        "yAxis": {
+            "title": "Percentage of GDP",
+            "min": -10,
+            "max": 50,
+            "startOnTick": true,
+            "endOnTick": false
+        },
+        "percentageHeightDesktop": 35,
+        "percentageHeightMobile": 90
+    })
+}}