@ons/design-system 72.10.6 → 72.10.8

package/components/chart/_macro.spec.js

@@ -25,6 +25,7 @@ import {
     EXAMPLE_LINE_CHART_WITH_RANGE_ANNOTATION_WITH_LABEL_INSIDE_PARAMS,
     EXAMPLE_LINE_CHART_WITH_REFERENCE_LINE_ANNOTATIONS_PARAMS,
     EXAMPLE_LINE_CHART_WITH_MIXED_ANNOTATION_TYPES_PARAMS,
+    EXAMPLE_IFRAME_CHART_PARAMS,
 } from './_test-examples';
 
 describe('Macro: Chart', () => {
@@ -192,6 +193,52 @@ describe('Macro: Chart', () => {
             });
         });
 
+        describe('GIVEN: Params: fallbackImageUrl', () => {
+            describe('WHEN: fallbackImageUrl is provided', () => {
+                const $ = cheerio.load(
+                    renderComponent('chart', {
+                        ...EXAMPLE_LINE_CHART_WITH_CONFIG_PARAMS,
+                        fallbackImageUrl: '/img/small/line-chart-screenshot.png',
+                    }),
+                );
+                const noScriptFallbackImage = $(`#fallback-image--chart-456`).html();
+                test('THEN: it renders the fallback image', () => {
+                    expect(noScriptFallbackImage).toContain('/img/small/line-chart-screenshot.png');
+                });
+            });
+        });
+
+        describe('GIVEN: Params: fallbackImageAlt', () => {
+            describe('WHEN: fallbackImageAlt is provided', () => {
+                const $ = cheerio.load(
+                    renderComponent('chart', {
+                        ...EXAMPLE_LINE_CHART_WITH_CONFIG_PARAMS,
+                        fallbackImageUrl: '/img/small/line-chart-screenshot.png',
+                        fallbackImageAlt: 'A description of the fallback image for screen readers',
+                    }),
+                );
+                const noScriptFallbackImage = $(`#fallback-image--chart-456`).html();
+                test('THEN: it renders the customised fallback image alt text', () => {
+                    expect(noScriptFallbackImage).toContain('alt="A description of the fallback image for screen readers"');
+                });
+            });
+        });
+
+        describe('GIVEN: Params: no fallbackImageAlt', () => {
+            describe('WHEN: fallbackImageAlt is not provided', () => {
+                const $ = cheerio.load(
+                    renderComponent('chart', {
+                        ...EXAMPLE_LINE_CHART_WITH_CONFIG_PARAMS,
+                        fallbackImageUrl: '/img/small/line-chart-screenshot.png',
+                    }),
+                );
+                const noScriptFallbackImage = $(`#fallback-image--chart-456`).html();
+                test('THEN: it renders the default fallback image alt text', () => {
+                    expect(noScriptFallbackImage).toContain('alt="Fallback image for the chart as JavaScript is disabled"');
+                });
+            });
+        });
+
         describe('GIVEN: Params: Caption', () => {
             describe('WHEN: caption is provided', () => {
                 const $ = cheerio.load(
@@ -628,14 +675,14 @@ describe('Macro: Chart', () => {
                 });
 
                 test('THEN: it renders the footnotes', () => {
-                    expect($('.ons-chart__footnotes').text()).toContain('1');
-                    expect($('.ons-chart__footnotes').text()).toContain('A test annotation');
-                    expect($('.ons-chart__footnotes').text()).toContain('2');
-                    expect($('.ons-chart__footnotes').text()).toContain('Another test annotation');
+                    expect($('.ons-chart__annotations-footnotes').text()).toContain('1');
+                    expect($('.ons-chart__annotations-footnotes').text()).toContain('A test annotation');
+                    expect($('.ons-chart__annotations-footnotes').text()).toContain('2');
+                    expect($('.ons-chart__annotations-footnotes').text()).toContain('Another test annotation');
                 });
 
                 test('THEN: the footnotes are hidden from screen readers', () => {
-                    expect($('.ons-chart__footnotes').attr('aria-hidden')).toBe('true');
+                    expect($('.ons-chart__annotations-footnotes').attr('aria-hidden')).toBe('true');
                 });
 
                 test('THEN: it includes the Annotations JSON config', () => {
@@ -658,12 +705,12 @@ describe('Macro: Chart', () => {
                 });
 
                 test('THEN: it renders the footnotes', () => {
-                    expect($('.ons-chart__footnotes').text()).toContain('1');
-                    expect($('.ons-chart__footnotes').text()).toContain('A test annotation');
+                    expect($('.ons-chart__annotations-footnotes').text()).toContain('1');
+                    expect($('.ons-chart__annotations-footnotes').text()).toContain('A test annotation');
                 });
 
                 test('THEN: the footnotes are hidden from screen readers', () => {
-                    expect($('.ons-chart__footnotes').attr('aria-hidden')).toBe('true');
+                    expect($('.ons-chart__annotations-footnotes').attr('aria-hidden')).toBe('true');
                 });
 
                 test('THEN: it includes the Annotations JSON config', () => {
@@ -687,12 +734,12 @@ describe('Macro: Chart', () => {
                 });
 
                 test('THEN: it renders the footnotes', () => {
-                    expect($('.ons-chart__footnotes').text()).toContain('1');
-                    expect($('.ons-chart__footnotes').text()).toContain('A test annotation');
+                    expect($('.ons-chart__annotations-footnotes').text()).toContain('1');
+                    expect($('.ons-chart__annotations-footnotes').text()).toContain('A test annotation');
                 });
 
                 test('THEN: the footnotes are hidden from screen readers', () => {
-                    expect($('.ons-chart__footnotes').attr('aria-hidden')).toBe('true');
+                    expect($('.ons-chart__annotations-footnotes').attr('aria-hidden')).toBe('true');
                 });
 
                 test('THEN: it includes the Annotations JSON config', () => {
@@ -977,6 +1024,26 @@ describe('Macro: Chart', () => {
                 });
             });
         });
+
+        describe('GIVEN: Params: Footnotes', () => {
+            describe('WHEN: footnotes are provided', () => {
+                const $ = cheerio.load(
+                    renderComponent('chart', {
+                        ...EXAMPLE_AREA_CHART_PARAMS,
+                        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>',
+                        },
+                    }),
+                );
+                test('THEN: it renders the footnotes', () => {
+                    expect($('#footnotes--area-chart-123').length).toBe(1);
+                    expect($('#footnotes--area-chart-123').find('ol').length).toBe(1);
+                    expect($('#footnotes--area-chart-123').text()).toContain('Footnotes');
+                });
+            });
+        });
     });
 
     describe('FOR: Boxplot Chart', () => {
@@ -1304,16 +1371,16 @@ describe('Macro: Chart', () => {
                 });
 
                 test('THEN: it renders the footnotes sequentially', () => {
-                    expect($('.ons-chart__footnotes').text()).toContain('1');
-                    expect($('.ons-chart__footnotes').text()).toContain('A test point annotation');
-                    expect($('.ons-chart__footnotes').text()).toContain('2');
-                    expect($('.ons-chart__footnotes').text()).toContain('A test x axis range annotation');
-                    expect($('.ons-chart__footnotes').text()).toContain('3');
-                    expect($('.ons-chart__footnotes').text()).toContain('A test y axis range annotation with the label inside');
-                    expect($('.ons-chart__footnotes').text()).toContain('4');
-                    expect($('.ons-chart__footnotes').text()).toContain('A test x axis reference line annotation');
-                    expect($('.ons-chart__footnotes').text()).toContain('5');
-                    expect($('.ons-chart__footnotes').text()).toContain('A test y axis reference line annotation');
+                    expect($('.ons-chart__annotations-footnotes').text()).toContain('1');
+                    expect($('.ons-chart__annotations-footnotes').text()).toContain('A test point annotation');
+                    expect($('.ons-chart__annotations-footnotes').text()).toContain('2');
+                    expect($('.ons-chart__annotations-footnotes').text()).toContain('A test x axis range annotation');
+                    expect($('.ons-chart__annotations-footnotes').text()).toContain('3');
+                    expect($('.ons-chart__annotations-footnotes').text()).toContain('A test y axis range annotation with the label inside');
+                    expect($('.ons-chart__annotations-footnotes').text()).toContain('4');
+                    expect($('.ons-chart__annotations-footnotes').text()).toContain('A test x axis reference line annotation');
+                    expect($('.ons-chart__annotations-footnotes').text()).toContain('5');
+                    expect($('.ons-chart__annotations-footnotes').text()).toContain('A test y axis reference line annotation');
                 });
             });
         });
@@ -1456,4 +1523,190 @@ describe('Macro: Chart', () => {
             });
         });
     });
+
+    describe('FOR: Iframe chart', () => {
+        describe('GIVEN: Params: Iframe chart', () => {
+            describe('WHEN: an iframe url param is provided', () => {
+                const $ = cheerio.load(renderComponent('chart', EXAMPLE_IFRAME_CHART_PARAMS));
+
+                test('THEN: it passes jest-axe checks', async () => {
+                    const results = await axe($.html());
+                    expect(results).toHaveNoViolations();
+                });
+
+                test('THEN: it renders the iframe', () => {
+                    expect($('.ons-chart__iframe-wrapper').length).toBe(1);
+                });
+
+                test('THEN: it includes the iframe title as a data attribute', () => {
+                    const iframe = $('.ons-chart__iframe-wrapper');
+                    expect(iframe.attr('data-title')).toBe(EXAMPLE_IFRAME_CHART_PARAMS.title);
+                });
+
+                test('THEN: the theme parameter is ignored', () => {
+                    const $ = cheerio.load(
+                        renderComponent('chart', {
+                            ...EXAMPLE_IFRAME_CHART_PARAMS,
+                            theme: 'secondary',
+                        }),
+                    );
+
+                    expect($('[data-highcharts-theme]').length).toBe(0);
+                });
+
+                test('THEN: the percentageHeightDesktop and percentageHeightMobile parameters are ignored', () => {
+                    const $ = cheerio.load(
+                        renderComponent('chart', {
+                            ...EXAMPLE_IFRAME_CHART_PARAMS,
+                            percentageHeightDesktop: 50,
+                            percentageHeightMobile: 10,
+                        }),
+                    );
+
+                    expect($('[data-highcharts-percentage-height-desktop]').length).toBe(0);
+                    expect($('[data-highcharts-percentage-height-mobile]').length).toBe(0);
+                });
+
+                test('THEN: the tickIntervalDesktop and tickIntervalMobile parameters are ignored', () => {
+                    const $ = cheerio.load(
+                        renderComponent('chart', {
+                            ...EXAMPLE_IFRAME_CHART_PARAMS,
+                            xAxis: {
+                                tickIntervalDesktop: 10,
+                                tickIntervalMobile: 5,
+                            },
+                            yAxis: {
+                                tickIntervalDesktop: 10,
+                                tickIntervalMobile: 5,
+                            },
+                        }),
+                    );
+
+                    expect($('[data-highcharts-x-axis-tick-interval-desktop]').length).toBe(0);
+                    expect($('[data-highcharts-x-axis-tick-interval-mobile]').length).toBe(0);
+                    expect($('[data-highcharts-y-axis-tick-interval-desktop]').length).toBe(0);
+                    expect($('[data-highcharts-y-axis-tick-interval-mobile]').length).toBe(0);
+                });
+
+                test('THEN: the tickIntervalDesktop and tickIntervalMobile parameters are ignored', () => {
+                    const $ = cheerio.load(
+                        renderComponent('chart', {
+                            ...EXAMPLE_IFRAME_CHART_PARAMS,
+                            estimateLineLabel: 'Estimated value',
+                            uncertaintyRangeLabel: '95% Confidence Interval',
+                        }),
+                    );
+
+                    expect($('[data-highcharts-estimate-line-label]').length).toBe(0);
+                    expect($('[data-highcharts-uncertainty-range-label]').length).toBe(0);
+                });
+
+                test('THEN: the customReferenceLineValue parameter is ignored', () => {
+                    const $ = cheerio.load(
+                        renderComponent('chart', {
+                            ...EXAMPLE_IFRAME_CHART_PARAMS,
+                            yAxis: {
+                                customReferenceLineValue: 10,
+                            },
+                        }),
+                    );
+
+                    expect($('[data-highcharts-custom-reference-line-value]').length).toBe(0);
+                });
+
+                test('THEN: the legend for boxplot charts is not rendered', () => {
+                    const $ = cheerio.load(
+                        renderComponent('chart', {
+                            ...EXAMPLE_IFRAME_CHART_PARAMS,
+                            chartType: 'boxplot',
+                            legend: true,
+                            estimateLineLabel: 'Estimated value',
+                            uncertaintyRangeLabel: '95% Confidence Interval',
+                        }),
+                    );
+
+                    expect($('.ons-chart__boxplot-legend').length).toBe(0);
+                });
+
+                test('THEN: the Highcharts config is not included', () => {
+                    const configScript = $(`script[data-highcharts-config--iframe-chart-123]`).html();
+                    expect(configScript).toBeNull();
+                });
+
+                test('THEN: the annotations footnotes and scripts are not rendered', () => {
+                    const $ = cheerio.load(
+                        renderComponent('chart', {
+                            ...EXAMPLE_IFRAME_CHART_PARAMS,
+                            annotations: [
+                                {
+                                    text: 'A test point annotation',
+                                    point: { x: 2, y: 3 },
+                                    labelOffsetX: 10,
+                                    labelOffsetY: -50,
+                                },
+                            ],
+                            rangeAnnotations: [
+                                {
+                                    text: 'A test x axis range annotation',
+                                    range: { axisValue1: 10, axisValue2: 15 },
+                                    axis: 'x',
+                                    labelOffsetX: 150,
+                                    labelOffsetY: 0,
+                                },
+                                {
+                                    text: 'A test y axis range annotation with the label inside',
+                                    range: { axisValue1: 5, axisValue2: 10 },
+                                    axis: 'y',
+                                    labelInside: true,
+                                    labelWidth: 250,
+                                },
+                            ],
+                            referenceLineAnnotations: [
+                                {
+                                    text: 'A test x axis reference line annotation',
+                                    value: 34,
+                                    axis: 'x',
+                                },
+                                {
+                                    text: 'A test y axis reference line annotation',
+                                    value: 12,
+                                    axis: 'y',
+                                    labelWidth: 100,
+                                },
+                            ],
+                        }),
+                    );
+
+                    expect($('[data-annotations-footnotes]').length).toBe(0);
+                    expect($('[data-highcharts-annotations--iframe-chart-123]').length).toBe(0);
+                    expect($('[data-highcharts-range-annotations--iframe-chart-123]').length).toBe(0);
+                    expect($('[data-highcharts-reference-line-annotations--iframe-chart-123]').length).toBe(0);
+                });
+
+                test('THEN: invalid chart type is ignored', () => {
+                    const $ = cheerio.load(
+                        renderComponent('chart', {
+                            ...EXAMPLE_IFRAME_CHART_PARAMS,
+                            chartType: 'foobar',
+                        }),
+                    );
+
+                    expect($('[data-invalid-chart-type]').length).toBe(0);
+                });
+            });
+
+            describe('WHEN: Params: fallbackImageUrl is set', () => {
+                const $ = cheerio.load(
+                    renderComponent('chart', {
+                        ...EXAMPLE_IFRAME_CHART_PARAMS,
+                        fallbackImageUrl: '/img/small/line-chart-screenshot.png',
+                    }),
+                );
+                const iframe = $(`.ons-chart__iframe-wrapper`);
+                test('THEN: the iframe is hidden when JavaScript is disabled', () => {
+                    expect(iframe.attr('class')).toContain('ons-chart__non-js-hide');
+                });
+            });
+        });
+    });
 });

package/components/chart/annotations-options.js

@@ -49,7 +49,7 @@ class AnnotationsOptions {
                     borderColor: 'transparent',
                     // We use css styling for the rounded number annotation at mobile
                     useHTML: true,
-                    className: 'ons-chart__footnote-number',
+                    className: 'ons-chart__annotations-footnotes-number',
                 },
                 draggable: '',
             },

package/components/chart/bar-chart.js

@@ -38,6 +38,7 @@ class BarChart {
                 // Update the category label colours for bar charts
                 labels: {
                     style: {
+                        textOverflow: 'ellipsis',
                         color: this.constants.categoryLabelColor,
                     },
                     useHTML: false,
@@ -70,6 +71,7 @@ class BarChart {
     };
 
     // Updates the config to move the data labels inside the bars, but only if the bar is wide enough
+    // See the checkHideDataLabels function in chart.js for more details about when this function is run
     // This also runs when the chart is resized
     postLoadDataLabels = (currentChart) => {
         const insideOptions = this.getBarChartLabelsInsideOptions();

package/components/chart/chart-iframe-resize.dom.js

@@ -0,0 +1,8 @@
+import ChartIframeResize from './chart-iframe-resize';
+import domready from '../../js/domready';
+
+domready(async () => {
+    [ChartIframeResize].forEach((Component) => {
+        document.querySelectorAll(Component.selector()).forEach((el) => new Component(el));
+    });
+});

package/components/chart/chart-iframe-resize.js

@@ -0,0 +1,16 @@
+import pym from 'pym.js';
+
+class ChartIframeResize {
+    static selector() {
+        return '.ons-chart__iframe-wrapper';
+    }
+
+    constructor(node) {
+        this.node = node;
+        new pym.Parent(this.node.getAttribute('id'), this.node.dataset.url, {
+            title: this.node.dataset.title,
+        });
+    }
+}
+
+export default ChartIframeResize;

package/components/chart/chart.dom.js

@@ -1,8 +1,10 @@
 import HighchartsBaseChart from './chart';
 import domready from '../../js/domready';
 
-domready(async () => {
-    [HighchartsBaseChart].forEach((Component) => {
-        document.querySelectorAll(Component.selector()).forEach((el) => new Component(el));
+document.fonts.ready.then(() => {
+    domready(async () => {
+        [HighchartsBaseChart].forEach((Component) => {
+            document.querySelectorAll(Component.selector()).forEach((el) => new Component(el));
+        });
     });
 });

package/components/chart/chart.js

@@ -31,6 +31,11 @@ class HighchartsBaseChart {
             console.error('No chart node found');
             return;
         }
+
+        // Add a CSS class to the chart based on the chart type (e.g., 'bar-chart-container', 'line-chart-container')
+        // This allows type-specific styling in CSS.
+        chartNode.classList.add(`${this.chartType}-chart-container`);
+
         this.id = this.node.dataset.highchartsId;
         this.useStackedLayout = this.node.hasAttribute('data-highcharts-use-stacked-layout');
         this.config = JSON.parse(this.node.querySelector(`[data-highcharts-config--${this.id}]`).textContent);
@@ -187,9 +192,15 @@ class HighchartsBaseChart {
     };
 
     // Check if the data labels should be hidden
-    // They should be hidden for clustered bar charts with more than 2 series, and also for stacked bar charts
+    // They should be hidden where there are more than 20 data points in a series, for clustered bar charts with more than 2 series, and also for stacked bar charts
     checkHideDataLabels = () => {
-        return (this.chartType === 'bar' && this.config.series.length > 2) || this.useStackedLayout === true;
+        let hideDataLabels = (this.chartType === 'bar' && this.config.series.length > 2) || this.useStackedLayout === true;
+        this.config.series.forEach((series) => {
+            if (series.data.length > 20) {
+                hideDataLabels = true;
+            }
+        });
+        return hideDataLabels;
     };
 
     // Adjust font size and annotations for smaller width of chart

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

@@ -63,6 +63,7 @@
             "title": "Y axis title"
         },
         "percentageHeightDesktop": 50,
-        "percentageHeightMobile": 120
+        "percentageHeightMobile": 120,
+        "fallbackImageUrl": '/img/small/area-chart-screenshot.png'
     })
 }}

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

@@ -26,6 +26,10 @@
                 }
             ]
         },
+        "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>"
+        },
         "xAxis": {
             "categories": [
                 "All retailing",

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

@@ -0,0 +1,33 @@
+{% from "components/chart/_macro.njk" import onsChart %}
+
+{# Important note: the example visualisation used here by the iframeUrl parameter
+may not be available in the future once Florence is decommissioned. #}
+
+{{
+    onsChart({
+        "description": "Volume sales, seasonally adjusted, Great Britain, January 2022 to January 2025",
+        "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": "#"
+                }
+            ]
+        },
+        "iframeUrl": "https://www.ons.gov.uk/visualisations/dvc3294/fig01/index.html",
+        "fallbackImageUrl": "/img/small/line-chart-screenshot.png"
+    })
+}}

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

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

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

@@ -27,6 +27,10 @@
                 "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",
@@ -218,6 +222,7 @@
             }
         ],
         "percentageHeightDesktop": 35,
-        "percentageHeightMobile": 90
+        "percentageHeightMobile": 90,
+        "fallbackImageUrl": '/img/small/line-chart-screenshot.png'
     })
 }}

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

@@ -27,6 +27,10 @@
                 "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>"
+        },
         "xAxis": {
             "title": "Height"
         },

package/components/chart/range-annotations-options.js

@@ -65,7 +65,7 @@ class RangeAnnotationsOptions {
                     // So that if we have both types of annotations, the numbers will be sequential
                     text: `${annotationsLength + index + 1}`,
                     useHTML: true,
-                    className: 'ons-chart__footnote-number',
+                    className: 'ons-chart__annotations-footnotes-number',
                     allowOverlap: true,
                     style: {
                         color: this.constants.labelColor,

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

@@ -58,7 +58,7 @@ class ReferenceLineAnnotationsOptions {
                     // So that if we have more than one type of annotations, the numbers will be sequential
                     text: `${annotationsLength + index + 1}`,
                     useHTML: true,
-                    className: 'ons-chart__footnote-number',
+                    className: 'ons-chart__annotations-footnotes-number',
                     allowOverlap: true,
                     style: {
                         color: this.constants.labelColor,

package/components/checkboxes/_macro.spec.js

@@ -164,9 +164,9 @@ describe('macro: checkboxes', () => {
         it('renders the text area with expected parameters', () => {
             const $ = cheerio.load(renderComponent('checkboxes', EXAMPLE_CHECKBOX_ITEM_CHECKBOXES_WITH_TEXTAREA));
             expect($('.ons-input--textarea').attr('name')).toBe('other answer');
-            expect($('.ons-input--textarea').attr('data-char-check-num')).toBe('300');
-            expect($('.ons-input__limit').attr('data-charcount-singular')).toBe('You have {x} character remaining');
-            expect($('.ons-input__limit').attr('data-charcount-plural')).toBe('You have {x} characters remaining');
+            expect($('.ons-input--textarea').attr('data-message-check-num')).toBe('300');
+            expect($('.ons-input__limit').attr('data-message-singular')).toBe('You have {x} character remaining');
+            expect($('.ons-input__limit').attr('data-message-plural')).toBe('You have {x} characters remaining');
         });
     });
 

package/components/input/_macro.njk

@@ -44,10 +44,9 @@
             {% if params.autocomplete %}autocomplete="{{ params.autocomplete }}"{% endif %}
             {% if params.accessiblePlaceholder %}placeholder="{{ params.label.text }}"{% endif %}
             {% if params.charCheckLimit %}
-                data-char-check-ref="{{ params.id }}-check" data-char-check-num="{{ params.charCheckLimit.limit }}"
+                data-message-check-ref="{{ params.id }}-check" data-message-check-num="{{ params.charCheckLimit.limit }}"
                 aria-describedby="{{ params.id }}-check"
             {% endif %}
-            {% if params.charCheckLimit and params.charCheckLimit.charcheckCountdown %}data-char-check-countdown="true"{% endif %}
             {% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ ' ' }}{{ attribute }}{% if value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}
             {% if params.label and params.label.description %}{% if params.label.id %}aria-describedby="{{ params.label.id }}-description-hint"{% else %}aria-describedby="description-hint"{% endif %}{% endif %}
         />

package/components/input/_macro.spec.js

@@ -570,36 +570,16 @@ describe('macro: input', () => {
             expect($('.ons-input').attr('maxlength')).toBe('200');
         });
 
-        it('does not have `data-char-check-countdown` attribute when `charcheckCountdown` is not provided', () => {
-            const $ = cheerio.load(renderComponent('input', EXAMPLE_INPUT_WITH_CHARACTER_LIMIT));
-
-            expect($('.ons-input').attr('data-char-check-countdown')).toBe(undefined);
-        });
-
-        it('has `data-char-check-countdown` attribute when `charcheckCountdown` is true', () => {
-            const $ = cheerio.load(
-                renderComponent('input', {
-                    ...EXAMPLE_INPUT_WITH_CHARACTER_LIMIT,
-                    charCheckLimit: {
-                        ...EXAMPLE_INPUT_WITH_CHARACTER_LIMIT.charCheckLimit,
-                        charcheckCountdown: true,
-                    },
-                }),
-            );
-
-            expect($('.ons-input').attr('data-char-check-countdown')).toBe('true');
-        });
-
         it('has data attribute which references the character limit component', () => {
             const $ = cheerio.load(renderComponent('input', EXAMPLE_INPUT_WITH_CHARACTER_LIMIT));
 
-            expect($('.ons-input').attr('data-char-check-ref')).toBe('example-id-check');
+            expect($('.ons-input').attr('data-message-check-ref')).toBe('example-id-check');
         });
 
         it('has data attribute which defines limit for character check', () => {
             const $ = cheerio.load(renderComponent('input', EXAMPLE_INPUT_WITH_CHARACTER_LIMIT));
 
-            expect($('.ons-input').attr('data-char-check-num')).toBe('200');
+            expect($('.ons-input').attr('data-message-check-num')).toBe('200');
         });
 
         it('has `aria-describedby` attribute which references the character limit component', () => {