@ons/design-system 72.9.2 → 72.10.1

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

@@ -25,7 +25,10 @@
     }
 
     &__footnote-number {
-        display: flex;
+        // !important is necessary for some range annotation labels at mobile, otherwise
+        // the inline-styled block display takes precedence. This inline style is only
+        // applied in some cases - it seems to happen when the shaded area is narrower than the label width.
+        display: flex !important;
         flex-shrink: 0;
         flex-grow: 0;
         align-items: center;
@@ -72,6 +75,38 @@
         font-size: 0.875rem; // 14px
         color: var(--ons-color-grey-100);
     }
+
+    &__boxplot-legend {
+        display: flex;
+        gap: 2rem;
+        font-size: 0.875rem; // 14px
+        padding-left: 1rem;
+        align-items: center;
+
+        &-item {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        &-item {
+            &--uncertainty {
+                width: 14px;
+                height: 14px;
+                background-color: rgb(32 96 149 / 65%);
+            }
+
+            &--estimate {
+                width: 20px;
+                height: 3px;
+                background-color: #003c57;
+            }
+        }
+
+        &-label {
+            font-size: inherit;
+        }
+    }
 }
 
 // This is a workaround to position the axis title to the left
@@ -88,3 +123,40 @@
 .highcharts-a11y-proxy-group-legend button {
     cursor: auto !important;
 }
+
+.ons-chart__range-annotation-label {
+    &--x {
+        padding: 0 1.25rem;
+    }
+
+    &--outside {
+        padding: 0;
+        overflow: visible !important;
+    }
+
+    &--right {
+        text-align: left !important;
+        padding-left: 0.3125rem;
+    }
+
+    &--left {
+        text-align: right !important;
+        padding-right: 0.3125rem;
+    }
+
+    &--top {
+        text-align: center !important;
+        padding-bottom: 0.3125rem;
+    }
+
+    &--bottom {
+        text-align: center !important;
+        padding-top: 0.3125rem;
+    }
+}
+
+.ons-chart__connector-line {
+    position: absolute;
+    border-top: 1px solid var(--ons-color-grey-100);
+    border-left: 1px solid var(--ons-color-grey-100);
+}

package/components/chart/_macro.njk

@@ -1,8 +1,9 @@
 {% from "components/list/_macro.njk" import onsList %}
 
 {% macro onsChart(params) %}
-    {% set supportedChartTypes = ['line', 'bar', 'column', 'scatter', 'area'] %}
-    {% set supportedChartTypesWithLine = ['column'] %}
+    {% set supportedChartTypes = ['line', 'bar', 'column', 'scatter', 'area', 'columnrange', 'boxplot'] %}
+    {% set supportedChartTypesWithLine = ['column', 'columnrange'] %}
+    {% set supportedChartTypesWithScatter = ['columnrange'] %}
 
     {% if params.headingLevel and params.headingLevel >= 1 and params.headingLevel <= 4 %}
         {% set headingLevel = params.headingLevel %}
@@ -15,7 +16,6 @@
     {% set closingSubtitleTag = "</h" ~ (headingLevel + 1) ~ ">" %}
     {% set openingDownloadTitleTag = "<h" ~ (headingLevel + 2) %}
     {% set closingDownloadTitleTag = "</h" ~ (headingLevel + 2) ~ ">" %}
-
     <div
         data-highcharts-base-chart
         data-highcharts-type="{{ params.chartType }}"
@@ -41,6 +41,15 @@
         {% if params.yAxis.tickIntervalDesktop %}
             data-highcharts-y-axis-tick-interval-desktop="{{ params.yAxis.tickIntervalDesktop }}"
         {% endif %}
+        {% if params.estimateLineLabel %}
+            data-highcharts-estimate-line-label="{{ params.estimateLineLabel }}"
+        {% endif %}
+        {% 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 }}
@@ -49,6 +58,22 @@
             {% if params.description %}
                 <p class="ons-u-vh">{{ params.description }}</p>
             {% endif %}
+            {% if params.chartType == 'boxplot' and (params.estimateLineLabel or params.uncertaintyRangeLabel) and params.legend == true %}
+                <div class="ons-chart__boxplot-legend">
+                    {% if params.uncertaintyRangeLabel %}
+                        <div class="ons-chart__boxplot-legend-item">
+                            <span class="ons-chart__boxplot-legend-item ons-chart__boxplot-legend-item--uncertainty"></span>
+                            <span class="ons-chart__boxplot-legend-label">{{ params.uncertaintyRangeLabel }}</span>
+                        </div>
+                    {% endif %}
+                    {% if params.estimateLineLabel %}
+                        <div class="ons-chart__boxplot-legend-item">
+                            <span class="ons-chart__boxplot-legend-item ons-chart__boxplot-legend-item--estimate"></span>
+                            <span class="ons-chart__boxplot-legend-label">{{ params.estimateLineLabel }}</span>
+                        </div>
+                    {% endif %}
+                </div>
+            {% endif %}
             {% if params.chartType in supportedChartTypes %}
                 <div data-highcharts-chart></div>
             {% else %}
@@ -65,6 +90,20 @@
                         {{ annotation.text }}
                     </li>
                 {% endfor %}
+                {% for rangeAnnotation in params.rangeAnnotations %}
+                    <li class="ons-chart__footnote_item">
+                        <span class="ons-chart__footnote-number">{{ loop.index + params.annotations | length }}</span>
+                        {{ rangeAnnotation.text }}
+                    </li>
+                {% endfor %}
+                {% for referenceLineAnnotation in params.referenceLineAnnotations %}
+                    <li class="ons-chart__footnote_item">
+                        <span class="ons-chart__footnote-number"
+                            >{{ loop.index + params.annotations | length + params.rangeAnnotations | length }}</span
+                        >
+                        {{ referenceLineAnnotation.text }}
+                    </li>
+                {% endfor %}
             </ul>
             {% if params.caption %}
                 <figcaption class="ons-chart__caption">{{ params.caption }}</figcaption>
@@ -83,28 +122,49 @@
         {% 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 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 %}
+        {% if params.legend is defined %}
+            {# if a legend parameter has been provided, check that it is a boolean #}
+            {% if params.legend == true or params.legend == false %}
+                {# legend value is a boolean - use the value passed in #}
+                {% set legendValue = params.legend %}
+            {% endif %}
+        {% endif %}
         {%
             set config = {
+                "chart": {
+                    "type": params.chartType,
+                    "inverted": params.isChartInverted if params.isChartInverted == true else false
+                },
                 "legend": {
-                    "enabled" : params.legend if params.legend else true
+                    "enabled" : legendValue
                 },
                 "yAxis": {
                     "title": {
@@ -139,6 +199,16 @@
                 {{ params.annotations | tojson }}
             </script>
         {% endif %}
+        {% if params.rangeAnnotations %}
+            <script type="application/json" data-highcharts-range-annotations--{{ params.id }}>
+                {{ params.rangeAnnotations | tojson }}
+            </script>
+        {% endif %}
+        {% if params.referenceLineAnnotations %}
+            <script type="application/json" data-highcharts-reference-line-annotations--{{ params.id }}>
+                {{ params.referenceLineAnnotations | tojson }}
+            </script>
+        {% endif %}
         <!-- prettier-ignore-end -->
     </div>
 {% endmacro %}