@ons/design-system 72.9.2 → 72.10.1

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

@@ -0,0 +1,221 @@
+import ChartConstants from './chart-constants';
+
+class RangeAnnotationsOptions {
+    constructor(rangeAnnotations) {
+        this.constants = ChartConstants.constants();
+        this.rangeAnnotations = rangeAnnotations;
+    }
+
+    getRangeAnnotationsOptionsDesktop = (chartType) => {
+        let xAxisPlotBands = [];
+        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,
+                label: {
+                    text: rangeAnnotation.text,
+                    useHTML: true,
+                    className: rangeAnnotation.labelInside
+                        ? `ons-chart__range-annotation-label ons-chart__range-annotation-label--${rangeAnnotation.axis}`
+                        : 'ons-chart__range-annotation-label--outside',
+                    allowOverlap: true,
+                    style: {
+                        color: this.constants.labelColor,
+                        fontSize: this.constants.defaultFontSize,
+                        // This property is not set as an inline style if rangeAnnotation.labelInside is undefined
+                        width: rangeAnnotationLabelWidth,
+                    },
+                },
+                color: this.constants.shadingColor,
+            };
+            if (!rangeAnnotation.labelInside && rangeAnnotation.labelOffsetX) {
+                rangeConfig.label.x = rangeAnnotation.labelOffsetX;
+            }
+            if (!rangeAnnotation.labelInside && rangeAnnotation.labelOffsetY) {
+                rangeConfig.label.y = rangeAnnotation.labelOffsetY;
+            }
+            if (rangeAnnotation.axis === 'x') {
+                xAxisPlotBands.push(rangeConfig);
+            } else if (rangeAnnotation.axis === 'y') {
+                yAxisPlotBands.push(rangeConfig);
+            }
+        });
+        return {
+            xAxis: xAxisPlotBands.length > 0 ? { plotBands: xAxisPlotBands } : undefined,
+            yAxis: yAxisPlotBands.length > 0 ? { plotBands: yAxisPlotBands } : undefined,
+        };
+    };
+
+    getRangeAnnotationsOptionsMobile = (annotationsLength, chartType) => {
+        let xAxisPlotBands = [];
+        let yAxisPlotBands = [];
+        this.rangeAnnotations.forEach((rangeAnnotation, index) => {
+            let adjustedRangeValues = this.adjustRangeForCategoryAxis(rangeAnnotation, chartType);
+            let rangeConfig = {
+                from: adjustedRangeValues.axisValue1,
+                to: adjustedRangeValues.axisValue2,
+                label: {
+                    // Add the number of point annotations to the current range annotation loop
+                    // 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',
+                    allowOverlap: true,
+                    style: {
+                        color: this.constants.labelColor,
+                        fontSize: this.constants.defaultFontSize,
+                    },
+                },
+                color: this.constants.shadingColor,
+            };
+            if (rangeAnnotation.axis === 'x') {
+                xAxisPlotBands.push(rangeConfig);
+            } else if (rangeAnnotation.axis === 'y') {
+                yAxisPlotBands.push(rangeConfig);
+            }
+        });
+        return {
+            xAxis: xAxisPlotBands.length > 0 ? { plotBands: xAxisPlotBands } : undefined,
+            yAxis: yAxisPlotBands.length > 0 ? { plotBands: yAxisPlotBands } : undefined,
+        };
+    };
+
+    // Returns the position of the label relative to the plotBand
+    getLabelPosition = (chartType, labelRect, plotBandRect, isXaxis) => {
+        let isToLeft = false;
+        let isToRight = false;
+        let isToTop = false;
+        let isToBottom = false;
+        let isVertical = chartType === 'bar' ? !isXaxis : isXaxis;
+        if (isVertical) {
+            // vertical plotBand
+            if (labelRect.right < plotBandRect.left) {
+                isToLeft = true;
+            }
+            if (labelRect.left > plotBandRect.right) {
+                isToRight = true;
+            }
+        } else {
+            // horizontal plotBand
+            if (labelRect.bottom < plotBandRect.top) {
+                isToTop = true;
+            }
+            if (labelRect.top > plotBandRect.bottom) {
+                isToBottom = true;
+            }
+        }
+        return { isToLeft, isToRight, isToTop, isToBottom };
+    };
+
+    // Draws the line connecting the label to the plotBand
+    // Also adds a custom class to the label based on its position
+    addLine = (currentChart) => {
+        // If there is already a line in the chart, remove it before redrawing it
+        const lines = currentChart.container.querySelectorAll('[data-range-annotation-line]');
+        if (lines.length > 0) {
+            lines.forEach((line) => {
+                line.remove();
+            });
+        }
+
+        // Get all plotBands from both axes
+        // The filter ensures that plotLines are not included as they will have a `value` property rather than `from` and `to` properties
+        const xAxisPlotBands = currentChart.xAxis[0].plotLinesAndBands.filter((band) => band.options.from !== undefined);
+        const yAxisPlotBands = currentChart.yAxis[0].plotLinesAndBands.filter((band) => band.options.from !== undefined);
+
+        // Combine all plotBands
+        const allPlotBands = [...xAxisPlotBands, ...yAxisPlotBands];
+
+        allPlotBands.forEach((plotBand) => {
+            // If the label is set to be inside the plotBand, exit early and don't draw a line
+            if (plotBand.options.label.x === undefined && plotBand.options.label.y === undefined) {
+                return;
+            }
+
+            // Get the plotBand element
+            const plotBandElement = plotBand.svgElem.element;
+            const plotBandRect = plotBandElement.getBoundingClientRect();
+
+            // Get the label element
+            const labelElement = plotBand.label.element;
+            const labelRect = labelElement.getBoundingClientRect();
+
+            // Get the label position relative to the plotBand (left, right, top or bottom)
+            const labelPosition = this.getLabelPosition(
+                currentChart.userOptions.chart.type,
+                labelRect,
+                plotBandRect,
+                plotBand.axis.isXAxis,
+            );
+
+            // Only draw a line in the label doesn't overlap the plot band
+            if (!(labelPosition.isToLeft || labelPosition.isToRight || labelPosition.isToTop || labelPosition.isToBottom)) {
+                return;
+            }
+
+            // Create and add the connecting line
+            const line = document.createElement('div');
+            line.classList.add('ons-chart__connector-line');
+            line.setAttribute('data-range-annotation-line', true);
+            labelElement.appendChild(line);
+
+            // Draw the line based on the label position
+            if (labelPosition.isToRight) {
+                let divWidth = labelRect.left - plotBandRect.right;
+                line.style.width = `${divWidth}px`;
+                line.style.height = '1px';
+                line.style.top = `${labelRect.height / 2}px`;
+                line.style.left = `-${divWidth}px`;
+                labelElement.classList.add('ons-chart__range-annotation-label--right');
+            }
+
+            if (labelPosition.isToLeft) {
+                let divWidth = plotBandRect.left - labelRect.right;
+                line.style.width = `${divWidth}px`;
+                line.style.height = '1px';
+                line.style.top = `${labelRect.height / 2}px`;
+                line.style.right = `-${divWidth}px`;
+                labelElement.classList.add('ons-chart__range-annotation-label--left');
+            }
+
+            if (labelPosition.isToTop) {
+                let divHeight = plotBandRect.top - labelRect.bottom;
+                line.style.height = `${divHeight}px`;
+                line.style.width = '1px';
+                line.style.top = `${labelRect.height}px`;
+                line.style.left = `${labelRect.width / 2}px`;
+                labelElement.classList.add('ons-chart__range-annotation-label--top');
+            }
+
+            if (labelPosition.isToBottom) {
+                let divHeight = labelRect.top - plotBandRect.bottom;
+                line.style.height = `${divHeight}px`;
+                line.style.width = '1px';
+                line.style.top = `-${divHeight}px`;
+                line.style.left = `${labelRect.width / 2}px`;
+                labelElement.classList.add('ons-chart__range-annotation-label--bottom');
+            }
+        });
+    };
+
+    // For bar and column charts, we want the range to
+    // start and end flush with the edges of the columns / bars,
+    // not halfway through as is the Highcharts default.
+    adjustRangeForCategoryAxis = (rangeAnnotation, chartType) => {
+        let axisValue1 = rangeAnnotation.range.axisValue1;
+        let axisValue2 = rangeAnnotation.range.axisValue2;
+        if ((chartType === 'bar' && rangeAnnotation.axis === 'x') || (chartType === 'column' && rangeAnnotation.axis === 'x')) {
+            axisValue1 = rangeAnnotation.range.axisValue1 - 0.5;
+            axisValue2 = rangeAnnotation.range.axisValue2 - 0.5;
+        }
+        return { axisValue1, axisValue2 };
+    };
+}
+
+export default RangeAnnotationsOptions;

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

@@ -0,0 +1,93 @@
+import ChartConstants from './chart-constants';
+
+class ReferenceLineAnnotationsOptions {
+    constructor(referenceLineAnnotations) {
+        this.constants = ChartConstants.constants();
+        this.referenceLineAnnotations = referenceLineAnnotations;
+    }
+
+    getReferenceLineAnnotationsOptionsDesktop = () => {
+        let xAxisPlotLines = [];
+        let yAxisPlotLines = [];
+        this.referenceLineAnnotations.forEach((referenceLineAnnotation) => {
+            let referenceLineConfig = {
+                label: {
+                    text: referenceLineAnnotation.text,
+                    style: {
+                        color: this.constants.labelColor,
+                        fontSize: this.constants.defaultFontSize,
+                        width: referenceLineAnnotation.labelWidth ? referenceLineAnnotation.labelWidth : 150,
+                    },
+                    x: referenceLineAnnotation.labelOffsetX ? referenceLineAnnotation.labelOffsetX : 10,
+                    y: referenceLineAnnotation.labelOffsetY ? referenceLineAnnotation.labelOffsetY : 20,
+                    rotation: 0,
+                    align: 'left',
+                    textAlign: 'left',
+                },
+                color: this.constants.zeroLineColor,
+                // note this works to give a dashed line with 4px and a 4px gap, but
+                // this way of styling it is undocumented
+                dashStyle: '2 2',
+                width: 2,
+                value: referenceLineAnnotation.value,
+                zIndex: 3,
+            };
+            if (referenceLineAnnotation.axis === 'x') {
+                xAxisPlotLines.push(referenceLineConfig);
+            } else if (referenceLineAnnotation.axis === 'y') {
+                yAxisPlotLines.push(referenceLineConfig);
+            }
+        });
+        return {
+            xAxis: xAxisPlotLines.length > 0 ? { plotLines: xAxisPlotLines } : undefined,
+            yAxis: yAxisPlotLines.length > 0 ? { plotLines: yAxisPlotLines } : undefined,
+        };
+    };
+
+    getReferenceLineAnnotationsOptionsMobile = (annotationsLength, chartType) => {
+        let xAxisPlotLines = [];
+        let yAxisPlotLines = [];
+        this.referenceLineAnnotations.forEach((referenceLineAnnotation, index) => {
+            let isVertical = referenceLineAnnotation.axis === 'x' ? true : false;
+            if (chartType === 'bar') {
+                isVertical = !isVertical;
+            }
+            let referenceLineConfig = {
+                label: {
+                    // Add the number of point and range annotations to the current reference line annotation loop
+                    // 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',
+                    allowOverlap: true,
+                    style: {
+                        color: this.constants.labelColor,
+                        fontSize: this.constants.defaultFontSize,
+                    },
+                    x: isVertical ? 7 : 0,
+                    y: isVertical ? 13 : -10, // 13 works with the height of the styled number
+                    rotation: 0,
+                    zIndex: 3,
+                },
+                color: this.constants.zeroLineColor,
+                // note this works to give a dashed line with 4px and a 4px gap, but
+                // this way of styling it is undocumented
+                dashStyle: '2 2',
+                width: 2,
+                value: referenceLineAnnotation.value,
+                zIndex: 3,
+            };
+            if (referenceLineAnnotation.axis === 'x') {
+                xAxisPlotLines.push(referenceLineConfig);
+            } else if (referenceLineAnnotation.axis === 'y') {
+                yAxisPlotLines.push(referenceLineConfig);
+            }
+        });
+        return {
+            xAxis: xAxisPlotLines.length > 0 ? { plotLines: xAxisPlotLines } : undefined,
+            yAxis: yAxisPlotLines.length > 0 ? { plotLines: yAxisPlotLines } : undefined,
+        };
+    };
+}
+
+export default ReferenceLineAnnotationsOptions;

package/components/chart/scatter-chart.js

@@ -4,16 +4,11 @@ class ScatterChart {
     constructor() {
         this.chartConstants = ChartConstants.constants();
         this.markerStyles = this.chartConstants.scatterMarkerStyles;
+        this.confidenceLevelMarkerStyles = this.chartConstants.confidenceLevelMarkerStyles;
     }
 
     getScatterChartOptions = () => {
         return {
-            plotOptions: {
-                scatter: {
-                    // enable tooltips for scatter charts
-                    enableMouseTracking: true,
-                },
-            },
             xAxis: {
                 gridLineWidth: 1,
             },
@@ -29,6 +24,20 @@ class ScatterChart {
             series.update({ marker: this.markerStyles[i] != undefined ? this.markerStyles[i] : this.markerStyles[0] }, false);
         });
     };
+
+    updateMarkersForConfidenceLevels = (series) => {
+        series.forEach((series, i) => {
+            series.update(
+                {
+                    marker:
+                        this.confidenceLevelMarkerStyles[i] != undefined
+                            ? this.confidenceLevelMarkerStyles[i]
+                            : this.confidenceLevelMarkerStyles[0],
+                },
+                false,
+            );
+        });
+    };
 }
 
 export default ScatterChart;

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

@@ -11,12 +11,33 @@ class SpecificChartOptions {
             colors: this.theme === 'alternate' ? this.constants.alternateTheme : this.constants.primaryTheme,
             chart: {
                 type: type,
-                marginTop: this.config.legend.enabled ? undefined : 50,
+                marginTop: this.config.legend.enabled ? (type === 'boxplot' ? 50 : undefined) : 50,
             },
         };
     }
 
     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

@@ -0,0 +1,97 @@
+// Utility function to merge two configs together
+export const mergeConfigs = (baseConfig, newConfig) => {
+    // If newConfig is null/undefined, return baseConfig
+    if (!newConfig) return baseConfig;
+
+    // Create a new object to store the merged result
+    const merged = { ...baseConfig };
+
+    // Iterate through all keys in newConfig
+    Object.keys(newConfig).forEach((key) => {
+        // Get values from both configs for this key
+        const baseValue = merged[key];
+        const newValue = newConfig[key];
+
+        // If both values are objects (and not null), recursively merge them
+        if (
+            baseValue &&
+            newValue &&
+            typeof baseValue === 'object' &&
+            typeof newValue === 'object' &&
+            !Array.isArray(baseValue) &&
+            !Array.isArray(newValue)
+        ) {
+            merged[key] = mergeConfigs(baseValue, newValue);
+        } else {
+            // For non-objects and arrays use the new value
+            // If the new value is null/undefined, use the base value
+            merged[key] = newValue ?? baseValue;
+        }
+    });
+
+    return merged;
+};
+
+// Helper function to process the range and reference line annotations plus any plot lines config
+// ready to pass to the responsive rules
+export const preparePlotLinesAndBands = (
+    annotations = undefined,
+    rangeAnnotations = undefined,
+    rangeAnnotationsOptions = undefined,
+    referenceLineAnnotationsOptions = undefined,
+    specificChartOptions,
+    chartType,
+    customReferenceLineValue,
+) => {
+    const totalPointAndRangeAnnotations = (annotations ? annotations.length : 0) + (rangeAnnotations ? rangeAnnotations.length : 0);
+
+    // Both range and reference line annotations are added to the axis objects, so we need to correctly combine them before we can pass them to the config.
+    let desktopRangeAnnotations = {};
+    let mobileRangeAnnotations = {};
+    let desktopReferenceLineAnnotations = {};
+    let mobileReferenceLineAnnotations = {};
+    let desktopAllPlotLines = {};
+    let mobileAllPlotLines = {};
+    let desktopAllPlotLinesAndBands = {};
+    let mobileAllPlotLinesAndBands = {};
+
+    // get the desktop and mobile range annotations
+    if (rangeAnnotationsOptions) {
+        desktopRangeAnnotations = rangeAnnotationsOptions.getRangeAnnotationsOptionsDesktop(chartType);
+        mobileRangeAnnotations = rangeAnnotationsOptions.getRangeAnnotationsOptionsMobile(annotations ? annotations.length : 0, chartType);
+    }
+
+    // get the desktop and mobile reference line annotations
+    if (referenceLineAnnotationsOptions) {
+        desktopReferenceLineAnnotations = referenceLineAnnotationsOptions.getReferenceLineAnnotationsOptionsDesktop();
+        mobileReferenceLineAnnotations = referenceLineAnnotationsOptions.getReferenceLineAnnotationsOptionsMobile(
+            totalPointAndRangeAnnotations,
+            chartType,
+        );
+    }
+
+    // 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 = 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.yAxis.plotLines = desktopMergedPlotLines;
+        mobileAllPlotLines.yAxis.plotLines = mobileMergedPlotLines;
+    } else {
+        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
+    desktopAllPlotLinesAndBands = mergeConfigs(desktopRangeAnnotations, desktopAllPlotLines);
+    mobileAllPlotLinesAndBands = mergeConfigs(mobileRangeAnnotations, mobileAllPlotLines);
+
+    return {
+        desktopAllPlotLinesAndBands,
+        mobileAllPlotLinesAndBands,
+    };
+};

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"
         }
     })
 }}