@ons/design-system 72.10.0 → 72.10.1

package/components/chart/example-line-chart-with-custom-reference-line-value.njk

@@ -0,0 +1,224 @@
+{% 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": "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,
+        "xAxis": {
+            "title": "Year",
+            "type": "linear",
+            "labelFormat": "{value:,.f}",
+            "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',
+                'Oct 2015',
+                'Nov 2015',
+                'Dec 2015',
+                'Jan 2016',
+                'Feb 2016',
+                'Mar 2016',
+                'Apr 2016',
+                'May 2016',
+                'Jun 2016',
+                'Jul 2016',
+                'Aug 2016',
+                'Sep 2016',
+                'Oct 2016',
+                'Nov 2016',
+                'Dec 2016',
+                'Jan 2017',
+                'Feb 2017',
+                'Mar 2017',
+                'Apr 2017',
+                'May 2017',
+                'Jun 2017',
+                'Jul 2017',
+                'Aug 2017',
+                'Sep 2017',
+                'Oct 2017',
+                'Nov 2017',
+                'Dec 2017',
+                'Jan 2018',
+                'Feb 2018',
+                'Mar 2018',
+                'Apr 2018',
+                'May 2018',
+                'Jun 2018',
+                'Jul 2018',
+                'Aug 2018',
+                'Sep 2018',
+                'Oct 2018',
+                'Nov 2018',
+                'Dec 2018',
+                'Jan 2019',
+                'Feb 2019',
+                'Mar 2019',
+                'Apr 2019',
+                'May 2019',
+                'Jun 2019',
+                'Jul 2019',
+                'Aug 2019',
+                'Sep 2019',
+                'Oct 2019',
+                'Nov 2019',
+                'Dec 2019',
+                'Jan 2020',
+                'Feb 2020',
+                'Mar 2020',
+                'Apr 2020',
+                'May 2020',
+                'Jun 2020',
+                'Jul 2020',
+                'Aug 2020',
+                'Sep 2020',
+                'Oct 2020',
+                'Nov 2020',
+                'Dec 2020',
+                'Jan 2021',
+                'Feb 2021',
+                'Mar 2021',
+                'Apr 2021',
+                'May 2021',
+                'Jun 2021',
+                'Jul 2021',
+                'Aug 2021',
+                'Sep 2021',
+                'Oct 2021',
+                'Nov 2021',
+                'Dec 2021',
+                'Jan 2022',
+                'Feb 2022',
+                'Mar 2022',
+                'Apr 2022',
+                'May 2022',
+                'Jun 2022',
+                'Jul 2022',
+                'Aug 2022',
+                'Sep 2022',
+                'Oct 2022',
+                'Nov 2022',
+                'Dec 2022',
+                'Jan 2023',
+                'Feb 2023',
+                'Mar 2023',
+                'Apr 2023',
+                'May 2023',
+                'Jun 2023',
+                'Jul 2023',
+                'Aug 2023',
+                'Sep 2023',
+                'Oct 2023',
+                'Nov 2023',
+                'Dec 2023',
+                'Jan 2024',
+                'Feb 2024',
+                'Mar 2024',
+                'Apr 2024',
+                'May 2024',
+                'Jun 2024',
+                'Jul 2024',
+                'Aug 2024',
+                'Sep 2024',
+                'Oct 2024'
+            ],
+            "tickIntervalDesktop": 15,
+            "tickIntervalMobile": 30
+        },
+        "yAxis": {
+            "title": "Sales",
+            "labelFormat": "{value:,.f}",
+            "customReferenceLineValue": 5
+        },
+        "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, 0.2, 0.4, 0.5, 0.6,
+                    0.6, 0.8, 0.7, 0.7, 0.8, 0.9, 1.0, 1.3, 1.3, 1.5, 1.8, 1.9, 2.3, 2.3, 2.6, 2.7,
+                    2.6, 2.6, 2.7, 2.8, 2.8, 2.8, 2.7, 2.7, 2.5, 2.3, 2.2, 2.3, 2.3, 2.3, 2.4, 2.2,
+                    2.2, 2.2, 2.0, 1.8, 1.8, 1.8, 2.0, 1.9, 1.9, 2.0, 1.7, 1.7, 1.5, 1.5, 1.4, 1.8,
+                    1.7, 1.5, 0.9, 0.7, 0.8, 1.1, 0.5, 0.7, 0.9, 0.6, 0.8, 0.9, 0.7, 1.0, 1.6, 2.1,
+                    2.4, 2.1, 3.0, 2.9, 3.8, 4.6, 4.8, 4.9, 5.5, 6.2, 7.8, 7.9, 8.2, 8.8, 8.6, 8.8,
+                    9.6, 9.3, 9.2, 8.8, 9.2, 8.9, 7.8, 7.9, 7.3, 6.4, 6.3, 6.3, 4.7, 4.2, 4.2, 4.2,
+                    3.8, 3.8, 3.0, 2.8, 2.8, 3.1, 3.1, 2.6, 3.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.4, -2.1,
+                    -1.9, -2.1, -1.5, -1.6, -1.7, -1.6, -1.8, -1.7, -1.5, -1.4, -0.5, -0.4, 0.2,
+                    0.7, 1.1, 1.9, 2.5, 2.4, 3.0, 2.6, 2.7, 3.1, 3.2, 3.3, 3.3, 3.4, 3.2, 3.0, 2.4,
+                    2.6, 2.5, 2.5, 2.6, 2.7, 2.5, 2.3, 2.1, 1.8, 1.2, 1.3, 1.3, 1.4, 1.5, 1.5, 1.7,
+                    1.2, 0.9, 0.4, 0.5, 0.6, 1.3, 1.0, 0.6, -0.4, -0.9, -0.5, 0.0, -0.2, -0.3, 0.1,
+                    -0.7, -0.2, -0.2, -0.5, 0.1, 1.6, 2.3, 2.9, 2.5, 3.3, 3.5, 4.9, 6.5, 6.9, 7.2,
+                    8.3, 9.4, 12.4, 12.4, 12.7, 13.6, 13.0, 13.2, 14.8, 14.1, 13.4, 13.3, 13.4,
+                    12.7, 10.0, 9.7, 8.5, 6.1, 6.3, 6.2, 2.9, 2.0, 1.9, 1.8, 1.1, 0.9, -0.8, -1.3,
+                    -1.4, -0.5, -0.9, -1.4, -0.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, 2.1, 2.2, 2.5, 2.2,
+                    2.3, 2.6, 2.4, 2.6, 2.7, 2.6, 2.7, 2.6, 2.5, 2.4, 2.5, 2.5, 2.6, 2.2, 2.8, 2.6,
+                    2.5, 2.4, 2.5, 2.5, 2.4, 2.4, 2.2, 2.3, 2.1, 2.1, 1.9, 2.1, 2.0, 2.0, 2.2, 2.0,
+                    2.1, 2.2, 2.1, 2.2, 2.2, 2.2, 2.5, 2.3, 2.2, 2.2, 2.0, 2.2, 2.2, 2.2, 1.9, 2.1,
+                    2.2, 2.2, 1.9, 1.8, 1.7, 2.0, 1.0, 1.5, 1.5, 1.5, 1.6, 1.7, 1.6, 1.6, 1.7, 1.9,
+                    2.1, 1.8, 2.7, 2.5, 2.9, 3.0, 3.1, 3.1, 3.2, 3.7, 4.1, 4.3, 4.5, 4.9, 5.1, 5.3,
+                    5.3, 5.4, 5.8, 5.2, 5.6, 5.7, 6.0, 6.3, 6.3, 6.5, 6.1, 6.3, 6.2, 6.0, 6.0, 6.1,
+                    6.0, 6.0, 6.0, 5.9, 6.0, 5.7, 5.9, 5.6, 5.6
+                ]
+            },
+            {
+                "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, 1.3, 1.4, 1.5, 1.4,
+                    1.4, 1.6, 1.5, 1.5, 1.6, 1.6, 1.5, 1.7, 1.6, 1.7, 1.8, 1.8, 2.1, 1.9, 2.4, 2.5,
+                    2.4, 2.4, 2.6, 2.5, 2.5, 2.5, 2.3, 2.4, 2.2, 2.1, 2.0, 2.0, 1.8, 1.8, 1.9, 1.8,
+                    1.8, 1.8, 1.8, 1.8, 1.8, 1.8, 1.7, 1.7, 1.7, 1.9, 1.5, 1.6, 1.7, 1.7, 1.4, 1.6,
+                    1.7, 1.6, 1.5, 1.3, 1.5, 1.8, 1.0, 1.4, 1.5, 1.2, 1.5, 1.5, 1.1, 1.3, 1.5, 2.0,
+                    2.3, 1.9, 2.9, 2.7, 3.1, 3.6, 3.8, 4.0, 4.6, 5.1, 5.4, 5.2, 5.2, 5.5, 5.6, 5.8,
+                    5.8, 5.7, 5.8, 5.3, 5.7, 5.7, 6.2, 6.5, 6.4, 6.4, 5.9, 5.9, 5.6, 5.2, 5.2, 5.1,
+                    4.8, 4.7, 4.4, 4.2, 4.2, 4.1, 4.3, 4.0, 4.1
+                ]
+            }
+        ],
+        "percentageHeightDesktop": 35,
+        "percentageHeightMobile": 90
+    })
+}}

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

@@ -55,32 +55,32 @@
                 "data": [
                     1.3, null, 0.7, 0.5, 0.4, 0.3, 0.3, 0.4, 0.3, 0.5
                 ],
-                "marker": 'true',
-                "connectNulls": 'true'
+                "marker": true,
+                "connectNulls": true
             },
             {
                 "name": 'Goods',
                 "data": [
                     0.3, -0.2, -1.0, null, -2.0, -2.1, -1.9, -1.8, -2.0, -1.8
                 ],
-                "marker": 'true',
-                "connectNulls": 'true'
+                "marker": true,
+                "connectNulls": true
             },
             {
                 "name": 'Services',
                 "data": [
                     2.2, 2.1, 2.1, 2.1, 2.2, 2.2, 2.0, 2.1, 2.1, 2.2
                 ],
-                "marker": 'true',
-                "connectNulls": 'true'
+                "marker": true,
+                "connectNulls": true
             },
             {
                 "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
                 ],
-                "marker": 'true',
-                "connectNulls": 'true'
+                "marker": true,
+                "connectNulls": true
             }
             ,
             {
@@ -88,48 +88,48 @@
                 "data": [
                     3.2, 3.7, 3.8, 3.9, 3.2, 3.3, 3.4, 3.5, 3.6, 3.7
                 ],
-                "marker": 'true',
-                "connectNulls": 'true'
+                "marker": true,
+                "connectNulls": true
             },
             {
                 "name": 'Extra test series 2',
                 "data": [
                     4.5, 4.3, 4.4, 4.5, 4.4, 4.2, 4.1, 4.2, 4.0, 4.3
                 ],
-                "marker": 'true',
-                "connectNulls": 'true'
+                "marker": true,
+                "connectNulls": true
             },
             {
                 "name": 'Extra test series 3',
                 "data": [
                     5.5, 5.3, 5.4, 5.5, 5.4, 5.2, 5.1, 5.2, 5.0, 5.3
                 ],
-                "marker": 'true',
-                "connectNulls": 'true'
+                "marker": true,
+                "connectNulls": true
             },
             {
                 "name": 'Extra test series 4',
                 "data": [
                     -3.5, -3.3, -3.4, -3.5, -3.4, -3.2, -3.1, -3.2, -3.0, -3.3
                 ],
-                "marker": 'true',
-                "connectNulls": 'true'
+                "marker": true,
+                "connectNulls": true
             },
             {
                 "name": 'Extra test series 5',
                 "data": [
                     -4.5, -4.3, -4.4, -4.5, -4.4, -4.2, -4.1, -4.2, -4.0, -4.3
                 ],
-                "marker": 'true',
-                "connectNulls": 'true'
+                "marker": true,
+                "connectNulls": true
             },
             {
                 "name": 'Extra test series 6',
                 "data": [
                     -5.5, -5.3, -5.4, -5.5, -5.4, -5.2, -5.1, -5.2, -5.0, -5.3
                 ],
-                "marker": 'true',
-                "connectNulls": 'true'
+                "marker": true,
+                "connectNulls": true
             }
         ],
         "percentageHeightDesktop": 35,

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

@@ -47,7 +47,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'
+                "marker": true
             },
             {
                 "name": "Male",
@@ -61,7 +61,7 @@
                     [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'
+                "marker": true
             },
             {
                 "name": "Adolescent Male",
@@ -73,7 +73,7 @@
                     [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'
+                "marker": true
             },
             {
                 "name": "Adolescent Female",
@@ -85,7 +85,7 @@
                     [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'
+                "marker": true
             }
         ],
         "percentageHeightDesktop": 35,

package/components/chart/line-chart.js

@@ -12,24 +12,42 @@ class LineChart {
                     lineWidth: 3,
                     linecap: 'round',
                 },
+                marker: {
+                    enabled: true,
+                },
+            },
+        };
+    };
+
+    getExtraLineChartOptions = () => {
+        return {
+            plotOptions: {
+                line: {
+                    color: this.chartConstants.extraLineColor,
+                },
             },
         };
     };
 
+    // Customise line charts which are set to hide markers
+    // so that the last point marker displays (at the end of the line)
     updateLastPointMarker = (series) => {
         series.forEach((series, i) => {
-            const points = series.points;
-            if (points && points.length > 0) {
-                // Show only the last point marker
-                const lastPoint = points[points.length - 1];
-                lastPoint.update({
-                    marker: {
-                        enabled: true,
-                    },
-                });
-                // Update the marker styles to use for each series
-                series.update({ marker: this.markerStyles[i] != undefined ? this.markerStyles[i] : this.markerStyles[0] }, false);
+            if (series.userOptions.marker.enabled === false) {
+                const points = series.points;
+
+                if (points && points.length > 0) {
+                    // Show only the last point marker
+                    const lastPoint = points[points.length - 1];
+                    lastPoint.update({
+                        marker: {
+                            enabled: true,
+                        },
+                    });
+                }
             }
+            // Update the marker styles to use for each series
+            series.update({ marker: this.markerStyles[i] != undefined ? this.markerStyles[i] : this.markerStyles[0] }, false);
         });
     };
 }

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

@@ -11,6 +11,10 @@ class RangeAnnotationsOptions {
         let yAxisPlotBands = [];
         this.rangeAnnotations.forEach((rangeAnnotation) => {
             let adjustedRangeValues = this.adjustRangeForCategoryAxis(rangeAnnotation, chartType);
+            let rangeAnnotationLabelWidth = undefined;
+            if (!rangeAnnotation.labelInside) {
+                rangeAnnotationLabelWidth = rangeAnnotation.labelWidth ? rangeAnnotation.labelWidth : 150;
+            }
             let rangeConfig = {
                 from: adjustedRangeValues.axisValue1,
                 to: adjustedRangeValues.axisValue2,
@@ -24,7 +28,8 @@ class RangeAnnotationsOptions {
                     style: {
                         color: this.constants.labelColor,
                         fontSize: this.constants.defaultFontSize,
-                        width: rangeAnnotation.labelWidth ? rangeAnnotation.labelWidth : 150,
+                        // This property is not set as an inline style if rangeAnnotation.labelInside is undefined
+                        width: rangeAnnotationLabelWidth,
                     },
                 },
                 color: this.constants.shadingColor,

package/components/chart/scatter-chart.js

@@ -9,12 +9,6 @@ class ScatterChart {
 
     getScatterChartOptions = () => {
         return {
-            plotOptions: {
-                scatter: {
-                    // enable tooltips for scatter charts
-                    enableMouseTracking: true,
-                },
-            },
             xAxis: {
                 gridLineWidth: 1,
             },

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

@@ -17,6 +17,27 @@ class SpecificChartOptions {
     }
 
     getOptions = () => this.options;
+
+    // Add zero line or custom reference line (but only for column or line charts)
+    getReferenceLine = (customReferenceLineValue, chartType) => {
+        let lineValue = 0;
+        if (customReferenceLineValue && (chartType === 'line' || chartType === 'column')) {
+            lineValue = customReferenceLineValue;
+        }
+
+        return {
+            yAxis: {
+                plotLines: [
+                    {
+                        color: this.constants.zeroLineColor,
+                        width: 1.5,
+                        value: lineValue,
+                        zIndex: 2,
+                    },
+                ],
+            },
+        };
+    };
 }
 
 export default SpecificChartOptions;

package/components/chart/utilities.js

@@ -39,8 +39,9 @@ export const preparePlotLinesAndBands = (
     rangeAnnotations = undefined,
     rangeAnnotationsOptions = undefined,
     referenceLineAnnotationsOptions = undefined,
-    commonChartOptions,
+    specificChartOptions,
     chartType,
+    customReferenceLineValue,
 ) => {
     const totalPointAndRangeAnnotations = (annotations ? annotations.length : 0) + (rangeAnnotations ? rangeAnnotations.length : 0);
 
@@ -69,20 +70,20 @@ export const preparePlotLinesAndBands = (
         );
     }
 
-    // We also need to combine the zero line (and any future plot lines) with the reference line annotations here, as otherwise
+    // We also need to combine the zero line / custom reference line with the reference line annotations here, as otherwise
     // it gets overridden by the reference line annotations config
-    let plotLineOptions = commonChartOptions.getPlotLines();
+    let plotLineOptions = specificChartOptions.getReferenceLine(customReferenceLineValue, chartType);
+    desktopAllPlotLines = { ...desktopReferenceLineAnnotations };
+    mobileAllPlotLines = { ...mobileReferenceLineAnnotations };
 
     if (desktopReferenceLineAnnotations.yAxis !== undefined) {
         let desktopMergedPlotLines = desktopReferenceLineAnnotations.yAxis.plotLines.concat(plotLineOptions.yAxis.plotLines);
         let mobileMergedPlotLines = mobileReferenceLineAnnotations.yAxis.plotLines.concat(plotLineOptions.yAxis.plotLines);
-        desktopAllPlotLines = { ...desktopReferenceLineAnnotations };
-        mobileAllPlotLines = { ...mobileReferenceLineAnnotations };
         desktopAllPlotLines.yAxis.plotLines = desktopMergedPlotLines;
         mobileAllPlotLines.yAxis.plotLines = mobileMergedPlotLines;
     } else {
-        desktopAllPlotLines = { ...plotLineOptions };
-        mobileAllPlotLines = { ...plotLineOptions };
+        desktopAllPlotLines.yAxis = { ...plotLineOptions.yAxis };
+        mobileAllPlotLines.yAxis = { ...plotLineOptions.yAxis };
     }
 
     // combine the desktop and mobile range and reference line annotations, along with other plot lines, ready to pass to the config

package/components/checkboxes/_macro.spec.js

@@ -164,7 +164,7 @@ 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('maxlength')).toBe('300');
+            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');
         });

package/components/mutually-exclusive/mutually-exclusive.textarea.spec.js

@@ -65,7 +65,7 @@ describe('script: mutually-exclusive', () => {
                 });
 
                 it('then the characters remaining readout should be reset', async () => {
-                    const limitText = await page.$eval('#feedback-lim', (node) => node.textContent);
+                    const limitText = await page.$eval('#feedback-check', (node) => node.textContent);
                     expect(limitText).toBe('You have 200 characters remaining');
                 });
 

package/components/textarea/_macro.njk

@@ -19,14 +19,14 @@
 
         <textarea
             id="{{ params.id }}"
-            class="ons-input ons-input--textarea{{ ' ons-input--error' if params.error }}{{ ' ons-js-char-limit-input' if params.charCheckLimit and params.charCheckLimit.limit }}{{ textareaExclusiveClass }}{{ ' ' + params.classes if params.classes else '' }}{% if params.width %}{{ ' ' }}ons-input--w-{{ params.width }}{% endif %}"
+            class="ons-input ons-input--textarea{{ ' ons-input--error' if params.error }}{{ ' ons-js-char-check-input' if params.charCheckLimit and params.charCheckLimit.limit }}{{ textareaExclusiveClass }}{{ ' ' + params.classes if params.classes else '' }}{% if params.width %}{{ ' ' }}ons-input--w-{{ params.width }}{% endif %}"
             {% if params.name %}
                 name="{{ params.name }}"
             {% endif %}
             rows="{{ params.rows | default(8) }}"
-            {% if params.charCheckLimit and params.charCheckLimit.limit %}
-                maxlength="{{ params.charCheckLimit.limit }}" data-char-limit-ref="{{ params.id }}-lim"
-                aria-describedby="{{ params.id }}-lim"
+            {% if params.charCheckLimit %}
+                data-char-check-ref="{{ params.id }}-check" data-char-check-num="{{ params.charCheckLimit.limit }}"
+                aria-describedby="{{ params.id }}-check" 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 %}
         >
@@ -36,10 +36,12 @@
         {% if params.charCheckLimit and params.charCheckLimit.limit %}
             {%
                 call onsCharLimit({
-                    "id": params.id ~ "-lim",
+                    "id": params.id ~ "-check",
                     "limit": params.charCheckLimit.limit,
                     "charCountSingular": params.charCheckLimit.charCountSingular,
-                    "charCountPlural": params.charCheckLimit.charCountPlural
+                    "charCountPlural": params.charCheckLimit.charCountPlural,
+                    "charCountOverLimitSingular": params.charCheckLimit.charCountOverLimitSingular,
+                    "charCountOverLimitPlural": params.charCheckLimit.charCountOverLimitPlural
                 })
             %}
             {% endcall %}

package/components/textarea/_macro.spec.js

@@ -22,6 +22,8 @@ const EXAMPLE_TEXTAREA_WITH_CHARACTER_LIMIT = {
         limit: 200,
         charCountSingular: 'You have {x} character remaining',
         charCountPlural: 'You have {x} characters remaining',
+        charCountOverLimitSingular: '{x} character too many',
+        charCountOverLimitPlural: '{x} characters too many',
     },
 };
 
@@ -200,29 +202,29 @@ describe('macro: textarea', () => {
         });
     });
 
-    describe('with character limit', () => {
-        it('has the `ons-js-char-limit-input` class', () => {
+    describe('with character check', () => {
+        it('has the `ons-js-char-check-input` class', () => {
             const $ = cheerio.load(renderComponent('textarea', EXAMPLE_TEXTAREA_WITH_CHARACTER_LIMIT));
 
-            expect($('.ons-input--textarea').hasClass('ons-js-char-limit-input')).toBe(true);
+            expect($('.ons-input--textarea').hasClass('ons-js-char-check-input')).toBe(true);
         });
 
         it('has the provided maximum length', () => {
             const $ = cheerio.load(renderComponent('textarea', EXAMPLE_TEXTAREA_WITH_CHARACTER_LIMIT));
 
-            expect($('.ons-input--textarea').attr('maxlength')).toBe('200');
+            expect($('.ons-input--textarea').attr('data-char-check-num')).toBe('200');
         });
 
-        it('has data attribute which references the character limit component', () => {
+        it('has data attribute which references the character check component', () => {
             const $ = cheerio.load(renderComponent('textarea', EXAMPLE_TEXTAREA_WITH_CHARACTER_LIMIT));
 
-            expect($('.ons-input--textarea').attr('data-char-limit-ref')).toBe('example-id-lim');
+            expect($('.ons-input--textarea').attr('data-char-check-ref')).toBe('example-id-check');
         });
 
         it('has `aria-describedby` attribute which references the character limit component', () => {
             const $ = cheerio.load(renderComponent('textarea', EXAMPLE_TEXTAREA_WITH_CHARACTER_LIMIT));
 
-            expect($('.ons-input--textarea').attr('aria-describedby')).toBe('example-id-lim');
+            expect($('.ons-input--textarea').attr('aria-describedby')).toBe('example-id-check');
         });
 
         it('renders character limit component', () => {
@@ -232,10 +234,12 @@ describe('macro: textarea', () => {
             faker.renderComponent('textarea', EXAMPLE_TEXTAREA_WITH_CHARACTER_LIMIT);
 
             expect(charCheckLimitSpy.occurrences).toContainEqual({
-                id: 'example-id-lim',
+                id: 'example-id-check',
                 limit: 200,
                 charCountSingular: 'You have {x} character remaining',
                 charCountPlural: 'You have {x} characters remaining',
+                charCountOverLimitSingular: '{x} character too many',
+                charCountOverLimitPlural: '{x} characters too many',
             });
         });
     });

package/components/textarea/{example-textarea-with-character-limit.njk → example-textarea-with-character-check.njk}

@@ -12,7 +12,9 @@
         "charCheckLimit": {
             "limit": 200,
             "charCountSingular": "You have {x} character remaining",
-            "charCountPlural": "You have {x} characters remaining"
+            "charCountPlural": "You have {x} characters remaining",
+            "charCountOverLimitSingular": "{x} character too many",
+            "charCountOverLimitPlural": "{x} characters too many"
         }
     })
 }}