@ons/design-system 72.10.0 → 72.10.2

package/components/char-check-limit/_macro.njk

@@ -8,8 +8,8 @@
         class="ons-input__limit ons-u-fs-s--b ons-u-d-no ons-u-mt-2xs"
         data-charcount-singular="{{ params.charCountSingular }}"
         data-charcount-plural="{{ params.charCountPlural }}"
-        data-charcount-limit-singular="{{ params.charCountOverLimitSingular }}"
-        data-charcount-limit-plural="{{ params.charCountOverLimitPlural }}"
+        data-charcount-limit-singular="{{ params.charCountOverLimitSingular | default("You have exceeded the character limit by {x} character") }}"
+        data-charcount-limit-plural="{{ params.charCountOverLimitPlural | default("You have exceeded the character limit by {x} characters") }}"
     >
     </span>
 {% endmacro %}

package/components/char-check-limit/character-check.js

@@ -6,9 +6,18 @@ const attrCharCheckVal = 'data-char-check-num';
 
 export default class CharCheck {
     constructor(context) {
-        this.context = context;
-        this.input = this.context.querySelector('input');
-        this.button = this.context.parentNode.querySelector('button');
+        this.tagName = context.tagName;
+
+        // Handle either an input directly or a container with an input inside
+        if (this.tagName.toLowerCase() === 'input' || this.tagName.toLowerCase() === 'textarea') {
+            this.input = context;
+        } else {
+            this.input = context.querySelector('input');
+        }
+
+        // Find the button: if input is passed directly, look at its parent
+        let parent = this.input.parentNode;
+        this.button = parent ? parent.querySelector('button') : null;
         this.checkElement = document.getElementById(this.input.getAttribute(attrCharCheckRef));
         this.checkVal = this.input.getAttribute(attrCharCheckVal);
         this.countdown = this.input.getAttribute(attrCharCheckCountdown) || false;
@@ -22,15 +31,17 @@ export default class CharCheck {
         if (this.button) {
             this.setButtonState(this.checkVal);
         }
+
         this.input.addEventListener('input', this.updateCheckReadout.bind(this));
     }
 
     updateCheckReadout(event, firstRun) {
         const value = this.input.value;
-        const remaining = this.checkVal - value.length;
+        const remaining = this.checkVal - this.getCharLength(value);
+
         // Prevent aria live announcement when component initialises
         if (!firstRun && event.inputType) {
-            this.checkElement.setAttribute('aria-live', 'polite');
+            this.checkElement.setAttribute('aria-live', [remaining > 0 ? 'polite' : 'assertive']);
         } else {
             this.checkElement.removeAttribute('aria-live');
         }
@@ -67,13 +78,23 @@ export default class CharCheck {
     }
 
     setShowMessage(remaining) {
-        this.checkElement.classList[(remaining < this.checkVal && remaining > 0 && this.countdown) || remaining < 0 ? 'remove' : 'add'](
-            'ons-u-d-no',
-        );
+        if (this.tagName.toLowerCase() === 'textarea') {
+            // Always display the remaining character message for textarea
+            this.checkElement.classList['remove']('ons-u-d-no');
+        } else {
+            this.checkElement.classList[(remaining < this.checkVal && remaining > 0 && this.countdown) || remaining < 0 ? 'remove' : 'add'](
+                'ons-u-d-no',
+            );
+        }
     }
 
     setCheckClass(remaining, element, setClass) {
         element.classList[remaining < 0 ? 'add' : 'remove'](setClass);
-        this.checkElement.setAttribute('aria-live', [remaining > 0 ? 'polite' : 'assertive']);
+    }
+
+    getCharLength(text) {
+        // line breaks count as two characters as forms convert to \n\r when submitted
+        const lineBreaks = (text.match(/\n/g) || []).length;
+        return text.length + lineBreaks;
     }
 }

package/components/char-check-limit/character-check.spec.js

@@ -192,7 +192,7 @@ describe('script: character-check', () => {
             });
 
             it('then aria-live attribute should removed', async () => {
-                const hasAriaLiveAttribute = await page.$eval('#feedback-lim', (element) => element.hasAttribute('aria-live'));
+                const hasAriaLiveAttribute = await page.$eval('#feedback-check', (element) => element.hasAttribute('aria-live'));
                 expect(hasAriaLiveAttribute).toBe(false);
             });
         });

package/components/chart/_chart.scss

@@ -91,15 +91,14 @@
 
         &-item {
             &--uncertainty {
-                width: 12px;
-                height: 12px;
+                width: 14px;
+                height: 14px;
                 background-color: rgb(32 96 149 / 65%);
             }
 
             &--estimate {
                 width: 20px;
                 height: 3px;
-                border-radius: 2px;
                 background-color: #003c57;
             }
         }

package/components/chart/_macro.njk

@@ -47,6 +47,9 @@
         {% if params.uncertaintyRangeLabel %}
             data-highcharts-uncertainty-range-label="{{ params.uncertaintyRangeLabel }}"
         {% endif %}
+        {% if params.yAxis.customReferenceLineValue %}
+            data-highcharts-custom-reference-line-value="{{ params.yAxis.customReferenceLineValue }}"
+        {% endif %}
     >
         <figure class="ons-chart">
             {{ openingTitleTag | safe }} class="ons-chart__title">{{ params.title }}{{ closingTitleTag | safe }}
@@ -119,23 +122,31 @@
         {% endif %}
         {% if params.chartType in supportedChartTypes %}
         {% set series = [] %}
+        {% set lineSeriesCount = 0 %}
         {% for item in params.series %}
-            {%
-                set seriesItem = {
-                    "name": item.name if item.name else '',
-                    "data": item.data if item.data else [],
-                    "marker": {
-                        "enabled": item.marker if item.marker else false
-                    },
-                    "dataLabels": {
-                        "enabled": item.dataLabels if item.dataLabels else false
-                    },
-                    "connectNulls": item.connectNulls if item.connectNulls else false,
-                    "type": item.type if item.type and (item.type == 'line' and params.chartType in supportedChartTypesWithLine) or (item.type == 'scatter' and params.chartType in supportedChartTypesWithScatter) else params.chartType
-                }
-            %}
-            {# Use `set` tag to avoid printing the return value of extend #}
-            {% set _ = extend(series, seriesItem) %}
+            {% if item.type == 'line' and lineSeriesCount > 0 %}
+                {# skip extra line series as the DS guidelines only allow for one extra line series #}
+            {% else %}
+                {%
+                    set seriesItem = {
+                        "name": item.name if item.name else '',
+                        "data": item.data if item.data else [],
+                        "marker": {
+                            "enabled": item.marker if item.marker else false
+                        },
+                        "dataLabels": {
+                            "enabled": item.dataLabels if item.dataLabels else false
+                        },
+                        "connectNulls": item.connectNulls if item.connectNulls else false,
+                        "type": item.type if item.type and (item.type == 'line' and params.chartType in supportedChartTypesWithLine) or (item.type == 'scatter' and params.chartType in supportedChartTypesWithScatter) else params.chartType
+                    }
+                %}
+                {# Use `set` tag to avoid printing the return value of extend #}
+                {% set _ = extend(series, seriesItem) %}
+            {% endif %}
+            {% if item.type == 'line' %}
+                {% set lineSeriesCount = lineSeriesCount + 1 %}
+            {% endif %}
         {% endfor %}
         {# Set the legend value to true by default #}
         {% set legendValue = true %}

package/components/chart/_macro.spec.js

@@ -702,6 +702,7 @@ describe('Macro: Chart', () => {
                     expect($('[data-highcharts-base-chart]').attr('data-highcharts-theme')).toBe('alternate');
                     expect($('[data-highcharts-base-chart]').attr('data-highcharts-title')).toBe('Example Column Chart');
                     expect($('[data-highcharts-base-chart]').attr('data-highcharts-id')).toBe('column-chart-123');
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-custom-reference-line-value')).toBe('10');
                 });
 
                 test('THEN: it includes the Highcharts JSON config', () => {
@@ -709,6 +710,24 @@ describe('Macro: Chart', () => {
                     expect(configScript).toContain('"text":"Y Axis Title"');
                 });
             });
+            describe('WHEN: more than one line is provided', () => {
+                const $ = cheerio.load(
+                    renderComponent('chart', {
+                        ...EXAMPLE_COLUMN_WITH_LINE_CHART_PARAMS,
+                        series: [
+                            ...EXAMPLE_COLUMN_WITH_LINE_CHART_PARAMS.series,
+                            { name: 'Additional Line', data: [15, 25, 35], type: 'line' },
+                            { name: 'Another additional Line', data: [14, 27, 31], type: 'line' },
+                        ],
+                    }),
+                );
+                const configScript = $(`script[data-highcharts-config--column-chart-123]`).html();
+
+                test('THEN: it does not include the additional line series', () => {
+                    const lineTypeMatches = (configScript.match(/"type":"line"/g) || []).length;
+                    expect(lineTypeMatches).toBe(1);
+                });
+            });
         });
 
         describe('GIVEN: Params: Legend', () => {

package/components/chart/bar-chart.js

@@ -70,29 +70,55 @@ class BarChart {
     };
 
     // Updates the config to move the data labels inside the bars, but only if the bar is wide enough
-    // This may also need to run when the chart is resized
+    // This also runs when the chart is resized
     postLoadDataLabels = (currentChart) => {
-        const insideOptions = {
-            dataLabels: this.getBarChartLabelsInsideOptions(),
-        };
-        const outsideOptions = {
-            dataLabels: this.getBarChartLabelsOutsideOptions(),
-        };
-
+        const insideOptions = this.getBarChartLabelsInsideOptions();
+        const outsideOptions = this.getBarChartLabelsOutsideOptions();
         currentChart.series.forEach((series) => {
+            // If we have a bar chart with an extra line, exit early for the line series
+            if (series.type == 'line') {
+                return;
+            }
+
+            if (series.type == 'scatter') {
+                // If we have a bar chart with confidence levels, exit early for the scatter series
+                return;
+            }
+
             const points = series.data;
+
             points.forEach((point) => {
-                // Get the actual width of the data label
-                const labelWidth = point.dataLabel && point.dataLabel.getBBox().width;
-                // Move the data labels inside the bar if the bar is wider than the label plus some padding
-                if (series.type == 'scatter') {
-                    // If we have a bar chart with confidence levels, exit early for the scatter series
-                    return;
-                }
-                if (point.shapeArgs.height > labelWidth + 20) {
-                    point.update(insideOptions, false);
-                } else {
-                    point.update(outsideOptions, false);
+                if (point.dataLabel) {
+                    // Get the actual width of the data label
+                    const labelWidth = point.dataLabel.getBBox().width;
+
+                    // Move the data labels inside the bar if the bar is wider than the label plus some padding
+                    if (point.shapeArgs.height > labelWidth + 5) {
+                        // Negative values are aligned on the left, positive values on the right
+                        if (point.y < 0) {
+                            point.update(
+                                {
+                                    dataLabels: {
+                                        ...insideOptions,
+                                        align: 'left',
+                                    },
+                                },
+                                false,
+                            );
+                        } else {
+                            point.update(
+                                {
+                                    dataLabels: {
+                                        ...insideOptions,
+                                        align: 'right',
+                                    },
+                                },
+                                false,
+                            );
+                        }
+                    } else {
+                        point.update({ dataLabels: outsideOptions }, false);
+                    }
                 }
             });
         });
@@ -102,7 +128,6 @@ class BarChart {
 
     getBarChartLabelsInsideOptions = () => ({
         inside: true,
-        align: 'right',
         verticalAlign: 'middle',
         style: {
             color: 'white',
@@ -114,6 +139,7 @@ class BarChart {
         inside: false,
         align: undefined,
         verticalAlign: undefined,
+        overflow: 'allow',
         style: {
             textOutline: 'none',
             // The design system does not include a semibold font weight, so we use 700 (bold) as an alternative.

package/components/chart/chart-constants.js

@@ -12,6 +12,7 @@ class ChartConstants {
             estimateLineColor: '#003c57',
             uncertaintyRangeColor: 'rgba(32, 96, 149, 0.65)',
             defaultFontSize: '0.875rem', // 14px
+            extraLineColor: '#222222',
             shadingColor: '#ececec',
             lineMarkerStyles: [
                 {

package/components/chart/chart.js

@@ -65,6 +65,10 @@ class HighchartsBaseChart {
         this.commonChartOptions = new CommonChartOptions(this.xAxisTickIntervalDesktop, this.yAxisTickIntervalDesktop);
         this.estimateLineLabel = this.node.dataset.highchartsEstimateLineLabel;
         this.uncertainyRangeLabel = this.node.dataset.highchartsUncertaintyRangeLabel;
+        this.customReferenceLineValue = this.node.dataset.highchartsCustomReferenceLineValue
+            ? parseFloat(this.node.dataset.highchartsCustomReferenceLineValue)
+            : undefined;
+
         this.specificChartOptions = new SpecificChartOptions(this.theme, this.chartType, this.config);
         this.lineChart = new LineChart();
         this.barChart = new BarChart();
@@ -93,6 +97,15 @@ class HighchartsBaseChart {
         return this.chartType === 'line' ? 0 : this.config.series.filter((series) => series.type === 'line').length;
     };
 
+    // Used to ensure that extra line series always overlay the column series
+    updateExtraLineZIndex = () => {
+        this.config.series.forEach((series) => {
+            if (series.type === 'line') {
+                series.zIndex = this.config.series.length + 1;
+            }
+        });
+    };
+
     // Check for the number of extra line series in the config
     checkForExtraScatter = () => {
         return this.chartType === 'scatter' ? 0 : this.config.series.filter((series) => series.type === 'scatter').length;
@@ -148,7 +161,9 @@ class HighchartsBaseChart {
         }
 
         if (this.extraLines > 0) {
+            this.updateExtraLineZIndex();
             this.config = mergeConfigs(this.config, this.lineChart.getLineChartOptions());
+            this.config = mergeConfigs(this.config, this.lineChart.getExtraLineChartOptions(this.config.series.length + 1));
             if (this.chartType === 'column') {
                 this.config = mergeConfigs(this.config, columnChartOptions);
             }
@@ -192,8 +207,9 @@ class HighchartsBaseChart {
             this.rangeAnnotations,
             this.rangeAnnotationsOptions,
             this.referenceLineAnnotationsOptions,
-            this.commonChartOptions,
+            this.specificChartOptions,
             this.chartType,
+            this.customReferenceLineValue,
         );
 
         let rules = [

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

@@ -113,8 +113,6 @@ class CommonChartOptions {
             },
             plotOptions: {
                 series: {
-                    // disables the tooltip on hover
-                    enableMouseTracking: false,
                     animation: false,
 
                     // disables the legend item hover
@@ -129,32 +127,19 @@ class CommonChartOptions {
                     },
                 },
             },
+            tooltip: {
+                animation: false,
+            },
         };
     }
 
     getOptions = () => this.options;
 
-    // TODO: A future ticket will add support for other plot lines which are not
-    // reference line annotations, and will be styled like the zero line
-    // See ticket https://jira.ons.gov.uk/browse/CCB-63
-    getPlotLines = () => {
-        // Add zero line
-        return {
-            yAxis: {
-                plotLines: [
-                    {
-                        color: this.constants.zeroLineColor,
-                        width: 1.5,
-                        value: 0,
-                        zIndex: 2,
-                    },
-                ],
-            },
-        };
-    };
-
     getMobileOptions = (xAxisTickInterval, yAxisTickInterval) => {
         return {
+            tooltip: {
+                enabled: false,
+            },
             xAxis: {
                 tickInterval: xAxisTickInterval,
             },
@@ -185,20 +170,64 @@ class CommonChartOptions {
 
     updateLegendSymbols = (chart) => {
         if (chart.legend.options.enabled) {
-            chart.legend.allItems.forEach((item) => {
+            chart.legend.allItems.forEach((item, index) => {
                 const { legendItem, userOptions } = item;
                 const seriesType = userOptions?.type;
-                // symbol is defined for bar / column series, and line is defined for line series
-                // if symbol is defined for a line series, it is the marker symbol
-                const { label, symbol } = legendItem || {};
+                const { label, symbol, line } = legendItem || {};
 
                 if (seriesType === 'line') {
-                    label?.attr({
-                        x: 30, // Adjust label position to account for longer line
+                    // This is the case for the column plus line chart - the series type is
+                    // line, but the chart type is column. In this case we show a simple
+                    // line symbol in the legend, but we need to move the label to the right
+                    // to account for the longer line symbol
+                    if (chart.userOptions.chart.type !== 'line') {
+                        label?.attr({
+                            x: 30, // Adjust label position to account for longer line
+                        });
+                    }
+
+                    // This is the scenario for a line chart with markers disabled
+                    // We have custom code in line-chart.js to update the last point to
+                    // display as a symbol. This code checks if there is no symbol in the legend
+                    // (which means it is a line chart with markers disabled)
+                    // and if so, it updates the legend to display as a symbol rather than as a line
+                    // We only to this for chart types that are explicitly line charts - i.e. not column with line
+                    if (!symbol && label && label.element && chart.userOptions.chart.type === 'line') {
+                        // Hide the line in the legend
+                        if (line) {
+                            line.hide();
+                        }
+
+                        // Create a custom symbol for the legend using the line marker symbol options
+                        const renderer = chart.renderer;
+                        const bbox = label.element.getBBox();
+                        const markerStyle = this.constants.lineMarkerStyles[index % this.constants.lineMarkerStyles.length];
+
+                        const legendSymbol = renderer
+                            .symbol(markerStyle.symbol, bbox.x - 30, bbox.y + 4, 12, markerStyle.radius, markerStyle.radius)
+                            .attr({
+                                fill: item.color,
+                                stroke: item.color,
+                                'stroke-width': 1,
+                                width: 12,
+                                height: 12,
+                            });
+
+                        legendSymbol.add(label.parentGroup);
+                        label?.attr({
+                            x: 15, // Adjust label position to account for shorter space that the symbol takes up
+                        });
+                    }
+                } else if (seriesType === 'columnrange') {
+                    symbol.attr({
+                        width: 14,
+                        height: 14,
+                        y: 8,
                     });
                 } else {
                     if (!symbol) return;
-                    // Set the symbol size for bar / column series
+                    // Update the symbol width and height
+                    // For column, bar and other chart types
                     else {
                         symbol.attr({
                             width: 12,

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

@@ -0,0 +1,56 @@
+{% from "components/chart/_macro.njk" import onsChart %}
+
+{{
+    onsChart({
+        "chartType": "column",
+        "description": "Public sector net debt excluding public sector banks, percentage of gross domestic product (GDP), UK, financial year ending (FYE) 1901 to October 2024",
+        "theme": "primary",
+        "title": "Figure 6: Net debt as a percentage of GDP remains at levels last seen in the early 1960s",
+        "subtitle": "Public sector net debt excluding public sector banks, percentage of gross domestic product (GDP), UK, financial year ending (FYE) 1901 to October 2024",
+        "id": "uuid",
+        "caption": "Source: Public sector finances from the Office for Budget Responsibility (OBR) and the Office for National Statistics",
+        "download": {
+            'title': 'Download Figure 1 data',
+            'itemsList': [
+                {
+                    "text": "Excel spreadsheet (XLSX format, 18KB)",
+                    "url": "#"
+                },
+                {
+                    "text": "Simple text file (CSV format, 25KB)",
+                    "url": "#"
+                },
+                {
+                    "text": "Image (PNG format, 25KB)",
+                    "url": "#"
+                }
+            ]
+        },
+        "legend": false,
+        "series": [
+            {
+                "data": [
+                    37.8, 41.0, 43.0, 42.9, 41.8, 39.8, 37.9, 38.2, 37.6, 36.7,
+                    33.9, 31.8
+                ],
+                "dataLabels": false,
+                "name": "Public sector net debt as a % of GDP (PSND)"
+            }
+        ],
+        "xAxis": {
+            "categories": [
+                "Mar 1901", "Mar 1902", "Mar 1903", "Mar 1904", "Mar 1905", "Mar 1906", "Mar 1907", "Mar 1908", "Mar 1909", "Mar 1910",
+                "Mar 1911", "Mar 1912"
+            ],
+            "title":  "Years",
+            "type": "linear",
+            "tickIntervalMobile": 5
+        },
+        "yAxis": {
+            "title": "Percentage of GDP",
+            "customReferenceLineValue": 25
+        },
+        "percentageHeightDesktop": 35,
+        "percentageHeightMobile": 90
+    })
+}}