@ons/design-system 72.10.2 → 72.10.4

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

@@ -2,7 +2,7 @@ import ChartConstants from './chart-constants';
 
 // Options that rely on the chart config but are not specific to the chart type
 class SpecificChartOptions {
-    constructor(theme, type, config) {
+    constructor(theme, type, config, xAxisTickInterval, yAxisTickInterval) {
         this.constants = ChartConstants.constants();
         this.theme = theme;
         this.config = config;
@@ -13,11 +13,77 @@ class SpecificChartOptions {
                 type: type,
                 marginTop: this.config.legend.enabled ? (type === 'boxplot' ? 50 : undefined) : 50,
             },
+            yAxis: {
+                tickInterval: yAxisTickInterval,
+            },
+            xAxis: {
+                tickInterval: xAxisTickInterval,
+            },
         };
     }
 
     getOptions = () => this.options;
 
+    getMobileOptions = (xAxisTickInterval, yAxisTickInterval) => {
+        return {
+            tooltip: {
+                enabled: false,
+            },
+            xAxis: {
+                tickInterval: xAxisTickInterval,
+            },
+            yAxis: {
+                tickInterval: yAxisTickInterval,
+            },
+        };
+    };
+
+    hideDataLabels = (series) => {
+        series.forEach((series) => {
+            series.update({
+                dataLabels: {
+                    enabled: false,
+                },
+            });
+        });
+    };
+
+    disableLegendForSingleSeries = (config) => {
+        if (config.chart.type != 'boxplot' && config.series.length === 1) {
+            config.legend = {
+                enabled: false,
+            };
+            config.chart.marginTop = 50;
+        }
+    };
+
+    adjustChartHeight = (currentChart, percentageHeightDesktop, percentageHeightMobile) => {
+        // get current width of the plot area
+        const plotWidth = currentChart.plotWidth;
+        let newPlotHeight = undefined;
+        let totalHeight = 400; // Highcharts default height - needed if one of the percentage heights is undefined
+
+        // Calculate the new plot height based on the percentage height
+        if (plotWidth > 400) {
+            if (percentageHeightDesktop !== undefined) {
+                newPlotHeight = Math.round(plotWidth * (percentageHeightDesktop / 100));
+            }
+        } else {
+            if (percentageHeightMobile !== undefined) {
+                newPlotHeight = Math.round(plotWidth * (percentageHeightMobile / 100));
+            }
+        }
+        // update the total height if we have a new plot height
+        if (newPlotHeight !== undefined) {
+            totalHeight = currentChart.plotTop + newPlotHeight + currentChart.marginBottom;
+        }
+
+        // set the new size of the chart
+        if (totalHeight !== currentChart.chartHeight) {
+            currentChart.setSize(null, totalHeight, false);
+        }
+    };
+
     // Add zero line or custom reference line (but only for column or line charts)
     getReferenceLine = (customReferenceLineValue, chartType) => {
         let lineValue = 0;
@@ -38,6 +104,80 @@ class SpecificChartOptions {
             },
         };
     };
+
+    updateLegendSymbols = (chart) => {
+        if (chart.legend.options.enabled) {
+            chart.legend.allItems.forEach((item, index) => {
+                const { legendItem, userOptions } = item;
+                const seriesType = userOptions?.type;
+                const { label, symbol, line } = legendItem || {};
+
+                if (seriesType === '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();
+                        }
+
+                        // Remove any existing custom symbols for this legend item
+                        const existingSymbols = label.parentGroup.element.querySelectorAll('[data-custom-legend-symbol]');
+                        existingSymbols.forEach((symbol) => symbol.remove());
+
+                        // 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 - 22, bbox.y + 4, 12, markerStyle.radius, markerStyle.radius)
+                            .attr({
+                                fill: item.color,
+                                stroke: item.color,
+                                'stroke-width': 1,
+                                width: 12,
+                                height: 12,
+                                'data-custom-legend-symbol': true,
+                            });
+                        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;
+                    // Update the symbol width and height
+                    // For column, bar and other chart types
+                    symbol.attr({
+                        width: 12,
+                        height: 12,
+                        y: 8,
+                    });
+                }
+            });
+        }
+    };
 }
 
 export default SpecificChartOptions;

package/components/description-list/_description-list.scss

@@ -41,17 +41,17 @@
     }
 
     &--inline {
-        .ons-description-list__term {
-            padding-right: 1rem;
-        }
-
         @include mq(l) {
             display: grid;
             grid-template-columns: repeat(3, 1fr);
-            grid-template-rows: repeat(2, 1fr);
-            grid-auto-flow: column;
+            grid-auto-rows: auto;
+            grid-auto-flow: row;
             gap: 0.5rem 2.5rem;
 
+            &-single {
+                grid-template-columns: 1fr;
+            }
+
             .ons-description-list__value {
                 grid-column-start: 2;
             }
@@ -59,6 +59,7 @@
             .ons-description-list__item {
                 display: grid;
                 grid-template-columns: auto 1fr;
+                grid-column-gap: 1rem;
             }
         }
     }

package/components/description-list/_macro.njk

@@ -1,6 +1,6 @@
 {% macro onsDescriptionList(params) %}
     <dl
-        class="ons-description-list ons-description-list__items ons-grid ons-grid--gutterless{{ ' ons-description-list--inline' if params.variant == 'inline' else ' ons-u-cf' }}{{ ' ' + params.classes if params.classes else '' }}"
+        class="ons-description-list ons-description-list__items ons-grid ons-grid--gutterless{{ ' ons-description-list--inline' if params.variant == 'inline' else ' ons-u-cf' }}{{ ' ons-description-list--inline-single' if params.itemsList|length < 2 else '' }}{{ ' ' + params.classes if params.classes else '' }}"
         {% if params.id %}id="{{ params.id }}"{% endif %}
         {% if params.descriptionListLabel %}
             title="{{ params.descriptionListLabel }}" aria-label="{{ params.descriptionListLabel }}"

package/components/details-panel/_details-panel.scss

@@ -20,6 +20,27 @@
         background-color: var(--ons-color-ocean-blue);
         color: var(--ons-color-white);
         border: 1px solid var(--ons-color-ocean-blue);
+
+        // remove browser default arrow for <details>
+        &::marker,
+        &::-webkit-details-marker {
+            display: none;
+        }
+
+        &:focus {
+            outline: 0;
+
+            #{$root}__banner-detail {
+                background: var(--ons-color-focus);
+                box-shadow: 0 ems($button-shadow-size) 0 var(--ons-color-text-link-focus);
+                color: var(--ons-color-text-link-focus);
+                outline: none;
+            }
+
+            #{$root}__banner-detail-title {
+                text-decoration: none;
+            }
+        }
     }
 
     &__banner-contents {
@@ -29,22 +50,28 @@
     &__banner-detail {
         width: fit-content;
         cursor: pointer;
-
-        &:focus {
-            background: var(--ons-color-focus);
-            box-shadow: 0 ems($button-shadow-size) 0 var(--ons-color-text-link-focus);
-            color: var(--ons-color-text-link-focus);
-            outline: none;
-        }
     }
 
     &__banner-detail-title {
         text-decoration: underline var(--ons-color-white) 2px;
         text-underline-position: under;
-    }
+        display: inline-block;
+
+        &--open {
+            display: inline;
 
-    &__banner-detail:focus &__banner-detail-title {
-        text-decoration: none;
+            #{$root}[open] & {
+                display: none;
+            }
+        }
+
+        &--close {
+            display: none;
+
+            #{$root}[open] & {
+                display: inline;
+            }
+        }
     }
 
     &__banner-detail-icon {
@@ -65,19 +92,12 @@
         #{$root}[open] & {
             display: block;
         }
-
-        .ons-details--initialised & {
-            display: none;
-        }
     }
 
     &__item {
         display: flex;
         flex-direction: column;
         border-bottom: 1px solid var(--ons-color-borders);
-        @extend .ons-u-pb-xl;
-        @extend .ons-u-mb-l;
-        @extend .ons-u-ml-2xs;
 
         @include mq('m') {
             flex-direction: row;
@@ -85,14 +105,16 @@
         }
 
         &:last-child {
-            border-bottom: 0;
             @extend .ons-u-mb-no;
             @extend .ons-u-pb-no;
+
+            border-bottom: 0;
         }
     }
 
     &__content-meta {
         @extend .ons-u-mb-no;
+
         @include mq('m') {
             flex-basis: 25%;
             min-width: 16.5rem;
@@ -101,7 +123,5 @@
 
     &__content-heading {
         color: var(--ons-color-black);
-        @extend .ons-u-fs-r--b;
-        @extend .ons-u-mb-no;
     }
 }

package/components/details-panel/_macro.njk

@@ -1,6 +1,9 @@
 {% macro onsDetailsPanel(params) %}
-    <div class="ons-details-panel ons-js-details" {% if params.open %}{{ ' ' }}data-open="true"{% endif %}>
-        <div class="ons-details-panel__banner ons-u-pt-s ons-u-pb-s">
+    {% set openText = params.openText | default("Show detail") %}
+    {% set closeText = params.closeText | default("Hide detail") %}
+
+    <details class="ons-details-panel" {% if params.open %}{{ ' ' }}data-open{% endif %}>
+        <summary class="ons-details-panel__banner ons-u-pt-s ons-u-pb-s">
             <div class="ons-container ons-details-panel__banner-contents">
                 <span class="ons-details-panel__info-icon ons-u-mr-2xs" aria-hidden="true">i</span>
                 <div class="ons-details-panel__banner-body">
@@ -9,10 +12,11 @@
                     {% set closingTag = "</h" ~ titleTag ~ ">" %}
                     {{ openingTag | safe }}
                     class="ons-details-panel__banner-title ons-u-fs-m ons-u-mb-2xs">{{ params.title }}{{ closingTag | safe }}
-                    <div class="ons-details-panel__banner-detail ons-js-details-heading">
-                        <span class="ons-details-panel__banner-detail-title ons-js-corrections-details-title ons-u-mr-3xs"
-                            >Show detail</span
-                        >
+                    <div class="ons-details-panel__banner-detail">
+                        <span class="ons-details-panel__banner-detail-title ons-u-mr-3xs">
+                            <span class="ons-details-panel__banner-detail-title--open"> {{ openText }} </span>
+                            <span class="ons-details-panel__banner-detail-title--close"> {{ closeText }} </span>
+                        </span>
                         <span class="ons-details-panel__banner-detail-icon">
                             {% from "components/icon/_macro.njk" import onsIcon %}
                             {{
@@ -24,22 +28,24 @@
                     </div>
                 </div>
             </div>
-        </div>
-        <div class="ons-container ons-details-panel__content ons-js-details-content ons-u-pt-xl ons-u-pb-3xl">
+        </summary>
+        <div class="ons-container ons-details-panel__content ons-u-pt-xl ons-u-pb-3xl">
             {% for item in params.detailsItems %}
-                <div class="ons-details-panel__item">
+                <div class="ons-details-panel__item ons-u-pb-xl ons-u-mb-l ons-u-ml-2xs">
                     <div class="ons-details-panel__content-meta ons-u-mb-l@2xs@m">
-                        <h3 class="ons-details-panel__content-heading">{{ item.text }}</h3>
+                        <h3 class="ons-details-panel__content-heading ons-u-fs-r--b ons-u-mb-no">{{ item.text }}</h3>
                         <time class="ons-details-panel__content-date" datetime="{{ item.date.iso }}">{{ item.date.short }}</time>
                     </div>
                     <div class="ons-details-panel__content-description">
                         <div class="ons-details-panel__content-text ons-u-mb-s">{{ item.description | safe }}</div>
                         {% if item.url or item.text == 'Content' %}
-                            <a class="ons-details-panel__content-url" href="{{ item.url }}"> View superseded version</a>
+                            <a class="ons-details-panel__content-url" href="{{ item.url }}">
+                                {{ item.urlText | default("View superseded version") }}
+                            </a>
                         {% endif %}
                     </div>
                 </div>
             {% endfor %}
         </div>
-    </div>
+    </details>
 {% endmacro %}

package/components/details-panel/example-details-panel.njk

@@ -3,6 +3,7 @@
 {{
     onsDetailsPanel({
         "title": "Correction and Notice",
+        "headingLevel": 3,
         "detailsItems": [
             {
                 "text": 'Correction',

package/components/featured-article/_macro.njk

@@ -0,0 +1,76 @@
+{% from "components/chart/_macro.njk" import onsChart %}
+{% from "components/image/_macro.njk" import onsImage %}
+
+{% macro onsFeaturedArticle(params) %}
+    {% set headingLevel = params.headingLevel | default(2) %}
+    {% set openingArticleTitleTag = "<h" ~ headingLevel %}
+    {% set closingArticleTitleTag = "</h" ~ headingLevel ~ ">" %}
+
+    <div class="ons-featured">
+        {{ openingArticleTitleTag | safe }} class="ons-featured__title ons-u-fs-m ons-u-mt-no ons-u-mb-2xs">
+        <a href="{{ params.title.url }}">{{ params.title.text }}</a>
+        {{ closingArticleTitleTag | safe }}
+
+        {%- if params.metadata -%}
+            {% set metadata = params.metadata %}
+            <ul class="ons-featured__item-metadata">
+                {%- if metadata.date -%}
+                    <li class="ons-featured__item-attribute">
+                        {% set prefixClass = "ons-u-fw-b" if metadata.date.showPrefix == true else "ons-u-vh" %}
+                        <span class="{{ prefixClass }}">{{ metadata.date.prefix | default("Published") }}: </span>
+                        {%- if metadata.date.iso -%}
+                            <time datetime="{{ metadata.date.iso }}">{{ metadata.date.short }}</time>
+                        {%- endif -%}
+                    </li>
+                {% endif %}
+
+                {%- if metadata.text -%}
+                    <li class="ons-featured__item-attribute">
+                        <span {% if metadata.text %}class="ons-featured__attribute-text ons-u-fw-b"{% endif %}>{{ metadata.text }}</span>
+                    </li>
+                {% endif %}
+            </ul>
+        {% endif %}
+
+        <div class="ons-featured__media">
+            {% if params.chart %}
+                {{
+                    onsChart({
+                        "chartType": params.chart.chartType,
+                        "description": params.chart.description,
+                        "theme": params.chart.theme,
+                        "title": params.chart.title,
+                        "id": params.chart.id,
+                        "headingLevel": headingLevel + 1,
+                        "legend": params.chart.legend,
+                        "xAxis": params.chart.xAxis,
+                        "yAxis": params.chart.yAxis,
+                        "series": params.chart.series,
+                        "annotations": params.chart.annotations,
+                        "rangeAnnotations": params.chart.rangeAnnotations,
+                        "referenceLineAnnotations": params.chart.referenceLineAnnotations,
+                        "estimateLineLabel": params.chart.estimateLineLabel,
+                        "uncertaintyRangeLabel": params.chart.uncertaintyRangeLabel,
+                        "isChartInverted": params.chart.isChartInverted,
+                        "useStackedLayout": params.chart.useStackedLayout,
+                        "percentageHeightDesktop": params.chart.percentageHeightDesktop,
+                        "percentageHeightMobile": params.chart.percentageHeightMobile
+                    })
+                }}
+            {% elif params.image %}
+                <div class="ons-featured__image">
+                    {{
+                        onsImage({
+                            "src": params.image.src,
+                            "alt": params.image.alt
+                        })
+                    }}
+                </div>
+            {% endif %}
+        </div>
+
+        {% if params.description %}
+            <div class="ons-featured__description">{{ params.description | safe }}</div>
+        {% endif %}
+    </div>
+{% endmacro %}