@ons/design-system 73.12.0 → 74.0.0-gutters.0

package/components/autosuggest/autosuggest.spec.js

@@ -657,6 +657,7 @@ describe('script: autosuggest', () => {
                 );
 
                 await page.type('.ons-js-autosuggest-input', 'England', { delay: 20 });
+                await page.waitForSelector('.ons-autosuggest__option');
                 await page.keyboard.press('ArrowUp');
                 await page.keyboard.press('Enter');
                 // Unfocus the autosuggest input

package/components/back-to-top/back-to-top.js

@@ -1,7 +1,11 @@
 export default class BackToTop {
     constructor(component) {
         this.component = component;
-        this.content = this.component.previousElementSibling;
+        let el = this.component;
+        while (el && !el.previousElementSibling) {
+            el = el.parentElement;
+        }
+        this.content = el ? el.previousElementSibling : null;
         this.target = document.getElementById(this.component.firstElementChild.href.split('#')[1]);
         this.contentleft;
         this.updateContentDetails();
@@ -27,6 +31,10 @@ export default class BackToTop {
             scrollPosition = -this.target.getBoundingClientRect().top + window.innerHeight;
         }
 
+        // In the extremely unlikely situation where there is no content at all above the back to top component, exit early
+        if (!this.content) {
+            return;
+        }
         const contentRect = this.content.getBoundingClientRect();
         const windowHeight = window.innerHeight;
         const contentBottom = contentRect.bottom;

package/components/back-to-top/back-to-top.spec.js

@@ -117,3 +117,49 @@ describe('script: back-to-top', () => {
         expect(previousWidth).not.toEqual(newWidth);
     });
 });
+
+describe('script: back-to-top without an adjacent previous sibling', () => {
+    it('does not throw errors when the component is nested several levels deep with no immediate previous sibling', async () => {
+        const pageErrors = [];
+        const handler = (err) => pageErrors.push(err.message);
+        page.on('pageerror', handler);
+
+        await setTestPage(
+            '/test',
+            `
+                <div>
+                    <p>Content above</p>
+                </div>
+                <div>
+                    <div>
+                        <div>
+                            ${renderComponent('back-to-top', {})}
+                        </div>
+                    </div>
+                </div>
+            `,
+        );
+
+        await page.evaluate(() => {
+            window.scrollTo(0, window.innerHeight * 2 + 10);
+        });
+
+        page.off('pageerror', handler);
+        expect(pageErrors).toHaveLength(0);
+    });
+
+    it('does not throw errors when there is no content preceding the back-to-top component', async () => {
+        const pageErrors = [];
+        const handler = (err) => pageErrors.push(err.message);
+        page.on('pageerror', handler);
+
+        await setTestPage('/test', `${renderComponent('back-to-top', {})}`);
+
+        await page.evaluate(() => {
+            window.scrollTo(0, window.innerHeight * 2 + 10);
+        });
+
+        page.off('pageerror', handler);
+        expect(pageErrors).toHaveLength(0);
+    });
+});

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

@@ -1,7 +1,7 @@
 {% from "components/card/_macro.njk" import onsCard %}
 
 <div class="ons-container">
-    <div class="ons-grid ons-grid-flex-gap ons-grid-flex-gap--s ons-grid-flex--vertical-top">
+    <div class="ons-grid ons-grid-flex-gap ons-grid-flex--vertical-top">
         <div class="ons-grid__col ons-grid__col--flex-col ons-grid__col--stretch">
             {{
                 onsCard({

package/components/chart/_macro.njk

@@ -42,6 +42,9 @@
             {% if params.yAxis.customReferenceLineValue %}
                 data-highcharts-custom-reference-line-value="{{ params.yAxis.customReferenceLineValue }}"
             {% endif %}
+            {% if params.dataLabelDecimalPoints >= 1 and params.dataLabelDecimalPoints <= 2 %}
+                data-highcharts-data-label-decimal-points="{{ params.dataLabelDecimalPoints }}"
+            {% endif %}
         {% endif %}
     >
         {%

package/components/chart/_macro.spec.js

@@ -885,6 +885,55 @@ describe('Macro: Chart', () => {
             });
         });
 
+        describe('GIVEN: Params: dataLabelDecimalPoints', () => {
+            describe('WHEN: dataLabelDecimalPoints is provided', () => {
+                const $ = cheerio.load(
+                    renderComponent('chart', {
+                        ...EXAMPLE_BAR_CHART_PARAMS,
+                        dataLabelDecimalPoints: 2,
+                    }),
+                );
+
+                test('THEN: it includes the data label decimal points data attribute', () => {
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-data-label-decimal-points')).toBe('2');
+                });
+            });
+
+            describe('WHEN: dataLabelDecimalPoints is not provided', () => {
+                const $ = cheerio.load(renderComponent('chart', EXAMPLE_BAR_CHART_PARAMS));
+
+                test('THEN: it does not include the data label decimal points data attribute', () => {
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-data-label-decimal-points')).toBe(undefined);
+                });
+            });
+
+            describe('WHEN: dataLabelDecimalPoints is greater than 2', () => {
+                const $ = cheerio.load(
+                    renderComponent('chart', {
+                        ...EXAMPLE_BAR_CHART_PARAMS,
+                        dataLabelDecimalPoints: 3,
+                    }),
+                );
+
+                test('THEN: it does not include the data label decimal points data attribute', () => {
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-data-label-decimal-points')).toBe(undefined);
+                });
+            });
+
+            describe('WHEN: dataLabelDecimalPoints is less than 1', () => {
+                const $ = cheerio.load(
+                    renderComponent('chart', {
+                        ...EXAMPLE_BAR_CHART_PARAMS,
+                        dataLabelDecimalPoints: 0,
+                    }),
+                );
+
+                test('THEN: it does not include the data label decimal points data attribute', () => {
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-data-label-decimal-points')).toBe(undefined);
+                });
+            });
+        });
+
         describe('GIVEN: Params: caption', () => {
             describe('WHEN: caption is provided', () => {
                 const $ = cheerio.load(

package/components/chart/bar-chart.js

@@ -5,7 +5,23 @@ class BarChart {
         this.constants = ChartConstants.constants();
     }
 
-    getBarChartOptions = (useStackedLayout) => {
+    getBarChartOptions = (useStackedLayout, dataLabelDecimalPoints) => {
+        const dataLabels = {
+            enabled: true,
+            inside: false,
+            style: {
+                textOutline: 'none',
+                // The design system does not include a semibold font weight, so we use 700 (bold) as an alternative.
+                fontWeight: '700',
+                color: this.constants.labelColor,
+                fontSize: this.constants.defaultFontSize,
+            },
+        };
+        if (dataLabelDecimalPoints !== undefined) {
+            dataLabels.formatter = function () {
+                return Number(this.y).toFixed(dataLabelDecimalPoints);
+            };
+        }
         return {
             plotOptions: {
                 bar: {
@@ -18,17 +34,7 @@ class BarChart {
                     borderRadius: 0,
                     // Set the data labels to be enabled and positioned outside the bars
                     // We can add custom formatting on each chart to move the labels inside the bars if the bar is wide enough
-                    dataLabels: {
-                        enabled: true,
-                        inside: false,
-                        style: {
-                            textOutline: 'none',
-                            // The design system does not include a semibold font weight, so we use 700 (bold) as an alternative.
-                            fontWeight: '700',
-                            color: this.constants.labelColor,
-                            fontSize: this.constants.defaultFontSize,
-                        },
-                    },
+                    dataLabels,
                 },
                 series: {
                     stacking: useStackedLayout ? 'normal' : null,

package/components/chart/chart.js

@@ -73,6 +73,9 @@ class HighchartsBaseChart {
         this.customReferenceLineValue = this.node.dataset.highchartsCustomReferenceLineValue
             ? parseFloat(this.node.dataset.highchartsCustomReferenceLineValue)
             : undefined;
+        this.dataLabelDecimalPoints = this.node.dataset.highchartsDataLabelDecimalPoints
+            ? parseInt(this.node.dataset.highchartsDataLabelDecimalPoints, 10)
+            : undefined;
         this.specificChartOptions = new SpecificChartOptions(
             this.theme,
             this.chartType,
@@ -153,7 +156,7 @@ class HighchartsBaseChart {
     setSpecificChartOptions = () => {
         const specificChartOptions = this.specificChartOptions.getOptions();
         const lineChartOptions = this.lineChart.getLineChartOptions();
-        const barChartOptions = this.barChart.getBarChartOptions(this.useStackedLayout);
+        const barChartOptions = this.barChart.getBarChartOptions(this.useStackedLayout, this.dataLabelDecimalPoints);
         const columnRangeChartOptions = this.columnRangeChart.getColumnRangeChartOptions();
         const columnChartOptions = this.columnChart.getColumnChartOptions(this.config, this.useStackedLayout, this.extraLines);
         const areaChartOptions = this.areaChart.getAreaChartOptions();

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

@@ -146,6 +146,7 @@ class CommonChartOptions {
             },
             tooltip: {
                 animation: false,
+                snap: 2,
             },
         };
     }

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

@@ -0,0 +1,64 @@
+{% from "components/chart/_macro.njk" import onsChart %}
+{{
+    onsChart({
+        "chartType": "column",
+        "description": "Monthly percentage change in retail sales volume by store type, Great Britain, January to June 2025",
+        "theme": "primary",
+        "title": "Food stores showed a strong rise on the month, while non-food stores fell",
+        "subtitle": "Figure 6: Upward contribution to monthly percentage change in total retail sales",
+        "id": "uuid",
+        "useStackedLayout": true,
+        "caption": "Source: Monthly Business Survey, Retail Sales Inquiry from the Office for National Statistics",
+        "download": {
+            "title": "Download Figure 6 data",
+            "itemsList": [
+                { "text": "Excel spreadsheet (XLSX format, 22KB)", "url": "#",
+                "download": "file" },
+                { "text": "Simple text file (CSV format, 28KB)", "url": "#",
+                "download": "file" },
+                { "text": "Image (PNG format, 32KB)", "url": "#",
+                "download": "file" }
+            ]
+        },
+        "legend": true,
+        "series": [
+            {
+                "name": "Food stores",
+                "data": [1.5, 0.8, 1.2, 0.9, 1.1, 1.4]
+            },
+            {
+                "name": "Non-food stores",
+                "data": [0.5, -0.2, 0.6, 0.8, 0.3, 0.4]
+            },
+            {
+                "name": "Non-store retailing",
+                "data": [0.2, 0.1, 0.3, 0.2, 0.4, 0.3]
+            },
+            {
+                "name": "Automotive fuel",
+                "data": [0.3, 0.2, -0.1, 0.4, 0.2, 0.5]
+            },
+            {
+                "name": "Another test data source",
+                "data": [1.5, 0.8, 1.5, 0.2, 0.8, 1.3],
+                "type": "line"
+            }
+        ],
+        "xAxis": {
+            "categories": [
+                "Jan 2025",
+                "Feb 2025",
+                "Mar 2025",
+                "Apr 2025",
+                "May 2025",
+                "Jun 2025"
+            ],
+            "title": "Month"
+        },
+        "yAxis": {
+            "title": "Monthly percentage change (%)"
+        },
+        "percentageHeightDesktop": 40,
+        "percentageHeightMobile": 90
+    })
+}}

package/components/download-resources/download-resources.spec.js

@@ -1,9 +1,6 @@
-import { KnownDevices } from 'puppeteer';
-import { setViewport } from '../../tests/helpers/puppeteer';
+import { iPhoneX, setViewport } from '../../tests/helpers/puppeteer';
 import { renderComponent, renderTemplate, setTestPage } from '../../tests/helpers/rendering';
 
-const iPhoneX = KnownDevices['iPhone X'];
-
 /* eslint-disable indent */
 const EXAMPLE_PAGE = `
   <div class="ons-page">

package/components/message/_message.scss

@@ -1,7 +1,7 @@
 @use 'sass:math';
 
 .ons-message {
-    border-radius: math.div($grid-gutters, 2);
+    border-radius: math.div($grid-gutter-standard, 2);
     margin-bottom: 2rem;
     outline: 1px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show background
 
@@ -23,7 +23,7 @@
 
     &__head {
         border-bottom: 1px solid var(--ons-color-borders);
-        padding: $grid-gutters;
+        padding: $grid-gutter-standard;
         position: relative;
     }
 
@@ -50,6 +50,6 @@
     }
 
     &__body {
-        padding: $grid-gutters;
+        padding: $grid-gutter-standard;
     }
 }

package/components/tabs/tabs.spec.js

@@ -1,9 +1,6 @@
-import { KnownDevices } from 'puppeteer';
-import { setViewport } from '../../tests/helpers/puppeteer';
+import { iPhoneX, setViewport } from '../../tests/helpers/puppeteer';
 import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
 
-const iPhoneX = KnownDevices['iPhone X'];
-
 const EXAMPLE_TABS = {
     title: 'Example tabs',
     titleClasses: 'ons-u-fs-m',