@ons/design-system 72.6.0 → 72.9.0

package/components/breadcrumbs/_breadcrumbs.scss

@@ -77,6 +77,7 @@ $breadcrumb-chevron-height: 0.65rem;
 
         &:hover {
             color: var(--ons-color-text);
+            text-decoration: underline solid var(--ons-color-text) 2px;
         }
     }
 }

package/components/chart/_chart.scss

@@ -78,3 +78,13 @@
 .highcharts-axis-title {
     width: 100%;
 }
+
+.highcharts-xaxis-labels span {
+    display: block !important;
+    white-space: nowrap !important;
+}
+
+// Enforce cursor as auto in the legend
+.highcharts-a11y-proxy-group-legend button {
+    cursor: auto !important;
+}

package/components/chart/_macro.njk

@@ -1,7 +1,7 @@
 {% from "components/list/_macro.njk" import onsList %}
 
 {% macro onsChart(params) %}
-    {% set supportedChartTypes = ['line', 'bar', 'column'] %}
+    {% set supportedChartTypes = ['line', 'bar', 'column', 'scatter', 'area'] %}
 
     {% if params.headingLevel and params.headingLevel >= 1 and params.headingLevel <= 4 %}
         {% set headingLevel = params.headingLevel %}
@@ -22,40 +22,53 @@
         data-highcharts-title="{{ params.title }}"
         data-highcharts-id="{{ params.id }}"
         {% if params.useStackedLayout %}data-highcharts-use-stacked-layout="{{ params.useStackedLayout }}"{% endif %}
-        id="{{ params.id }}"
         {% if params.percentageHeightDesktop and params.chartType != 'bar' %}
             data-highcharts-percentage-height-desktop="{{ params.percentageHeightDesktop }}"
         {% endif %}
         {% if params.percentageHeightMobile and params.chartType != 'bar' %}
             data-highcharts-percentage-height-mobile="{{ params.percentageHeightMobile }}"
         {% endif %}
+        {% if params.xAxis.tickIntervalMobile %}
+            data-highcharts-x-axis-tick-interval-mobile="{{ params.xAxis.tickIntervalMobile }}"
+        {% endif %}
+        {% if params.xAxis.tickIntervalDesktop %}
+            data-highcharts-x-axis-tick-interval-desktop="{{ params.xAxis.tickIntervalDesktop }}"
+        {% endif %}
+        {% if params.yAxis.tickIntervalMobile %}
+            data-highcharts-y-axis-tick-interval-mobile="{{ params.yAxis.tickIntervalMobile }}"
+        {% endif %}
+        {% if params.yAxis.tickIntervalDesktop %}
+            data-highcharts-y-axis-tick-interval-desktop="{{ params.yAxis.tickIntervalDesktop }}"
+        {% endif %}
     >
-        {% if params.chartType in supportedChartTypes %}
-            <figure class="ons-chart">
-                {{ openingTitleTag | safe }} class="ons-chart__title">{{ params.title }}{{ closingTitleTag | safe }}
-                {{ openingSubtitleTag | safe }}
-                class="ons-chart__subtitle">{{ params.subtitle }}{{ closingSubtitleTag | safe }}
-                {% if params.description %}
-                    <p class="ons-u-vh">{{ params.description }}</p>
-                {% endif %}
+        <figure class="ons-chart">
+            {{ openingTitleTag | safe }} class="ons-chart__title">{{ params.title }}{{ closingTitleTag | safe }}
+            {{ openingSubtitleTag | safe }}
+            class="ons-chart__subtitle">{{ params.subtitle }}{{ closingSubtitleTag | safe }}
+            {% if params.description %}
+                <p class="ons-u-vh">{{ params.description }}</p>
+            {% endif %}
+            {% if params.chartType in supportedChartTypes %}
                 <div data-highcharts-chart></div>
-                {#
-                    Footnotes for the annotations at mobile
-                    Hidden from screen readers because the full text will be read out where they appear in the chart
-                #}
-                <ul class="ons-chart__footnotes" aria-hidden="true">
-                    {% for annotation in params.annotations %}
-                        <li class="ons-chart__footnote_item">
-                            <span class="ons-chart__footnote-number">{{ loop.index }}</span>
-                            {{ annotation.text }}
-                        </li>
-                    {% endfor %}
-                </ul>
-                {% if params.caption %}
-                    <figcaption class="ons-chart__caption">{{ params.caption }}</figcaption>
-                {% endif %}
-            </figure>
-        {% endif %}
+            {% else %}
+                <p data-invalid-chart-type><b>Chart type "{{ params.chartType }}" is not supported</b></p>
+            {% endif %}
+            {#
+                Footnotes for the annotations at mobile
+                Hidden from screen readers because the full text will be read out where they appear in the chart
+            #}
+            <ul class="ons-chart__footnotes" aria-hidden="true">
+                {% for annotation in params.annotations %}
+                    <li class="ons-chart__footnote_item">
+                        <span class="ons-chart__footnote-number">{{ loop.index }}</span>
+                        {{ annotation.text }}
+                    </li>
+                {% endfor %}
+            </ul>
+            {% if params.caption %}
+                <figcaption class="ons-chart__caption">{{ params.caption }}</figcaption>
+            {% endif %}
+        </figure>
 
         {% if params.download.title and params.download.itemsList | length > 0 %}
             {{ openingDownloadTitleTag | safe }}
@@ -67,10 +80,11 @@
                 })
             }}
         {% endif %}
+        {% if params.chartType in supportedChartTypes %}
         {% set series = [] %}
         {% for item in params.series %}
             {%
-                set series = series.concat({
+                set seriesItem = {
                     "name": item.name if item.name else '',
                     "data": item.data if item.data else [],
                     "marker": {
@@ -79,9 +93,12 @@
                     "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' else params.chartType
-                })
+                }
             %}
+            {# Use `set` tag to avoid printing the return value of extend #}
+            {% set _ = extend(series, seriesItem) %}
         {% endfor %}
         {%
             set config = {
@@ -112,9 +129,10 @@
 
         <!-- Set scripts to pass the config values as json to the javascript -->
         <!-- prettier-ignore-start -->
-        <script type="application/json" data-highcharts-config--{{ params.id }}>
-            {{ config | tojson }}
-        </script>
+            <script type="application/json" data-highcharts-config--{{ params.id }}>
+                {{ config | tojson }}
+            </script>
+        {% endif %}
         {% if params.annotations %}
             <script type="application/json" data-highcharts-annotations--{{ params.id }}>
                 {{ params.annotations | tojson }}

package/components/chart/_macro.spec.js

@@ -15,6 +15,9 @@ import {
     EXAMPLE_COLUMN_CHART_WITH_ANNOTATIONS_PARAMS,
     EXAMPLE_BAR_WITH_LINE_CHART_PARAMS,
     EXAMPLE_COLUMN_WITH_LINE_CHART_PARAMS,
+    EXAMPLE_SCATTER_CHART_PARAMS,
+    EXAMPLE_AREA_CHART_PARAMS,
+    EXAMPLE_INVALID_CHART_PARAMS,
 } from './_test-examples';
 
 describe('Macro: Chart', () => {
@@ -28,6 +31,10 @@ describe('Macro: Chart', () => {
                     expect(results).toHaveNoViolations();
                 });
 
+                test('THEN: it renders the title', () => {
+                    expect($('.ons-chart__title').text()).toBe('Example Line Chart');
+                });
+
                 test('THEN: it renders the subtitle', () => {
                     expect($('.ons-chart__subtitle').text()).toBe('A sample subtitle');
                 });
@@ -96,6 +103,38 @@ describe('Macro: Chart', () => {
             });
         });
 
+        describe('GIVEN: Params: Tick Interval', () => {
+            describe('WHEN: tick interval is provided', () => {
+                const $ = cheerio.load(
+                    renderComponent('chart', {
+                        ...EXAMPLE_LINE_CHART_REQUIRED_PARAMS,
+                        xAxis: {
+                            ...EXAMPLE_LINE_CHART_REQUIRED_PARAMS.xAxis,
+                            tickIntervalMobile: 2,
+                            tickIntervalDesktop: 5,
+                        },
+                    }),
+                );
+                test('THEN: it includes the tick interval in the config', () => {
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-x-axis-tick-interval-mobile')).toBe('2');
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-x-axis-tick-interval-desktop')).toBe('5');
+                });
+            });
+            describe('WHEN: tick interval is not provided', () => {
+                const $ = cheerio.load(
+                    renderComponent('chart', {
+                        ...EXAMPLE_LINE_CHART_REQUIRED_PARAMS,
+                    }),
+                );
+                test('THEN: it does not include the tick interval in the config', () => {
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-x-axis-tick-interval-mobile')).toBe(undefined);
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-x-axis-tick-interval-desktop')).toBe(undefined);
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-y-axis-tick-interval-desktop')).toBe(undefined);
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-y-axis-tick-interval-mobile')).toBe(undefined);
+                });
+            });
+        });
+
         describe('GIVEN: Params: Config', () => {
             describe('WHEN: config params are provided', () => {
                 const $ = cheerio.load(renderComponent('chart', EXAMPLE_LINE_CHART_WITH_CONFIG_PARAMS));
@@ -121,6 +160,9 @@ describe('Macro: Chart', () => {
                     expect(configScript).toContain('"data":[5,15,25]');
                     expect(configScript).toContain('"name":"Category 2"');
                     expect(configScript).toContain('"data":[10,20,30]');
+                    expect(configScript).toContain('"connectNulls":true');
+                    expect(configScript).toContain('"marker":{"enabled":true}');
+                    expect(configScript).toContain('"dataLabels":{"enabled":true}');
                 });
             });
         });
@@ -822,4 +864,163 @@ describe('Macro: Chart', () => {
             });
         });
     });
+
+    describe('FOR: Scatter chart', () => {
+        describe('GIVEN: Params: required', () => {
+            describe('WHEN: required params are provided', () => {
+                const $ = cheerio.load(renderComponent('chart', EXAMPLE_SCATTER_CHART_PARAMS));
+
+                test('THEN: it passes jest-axe checks', async () => {
+                    const results = await axe($.html());
+                    expect(results).toHaveNoViolations();
+                });
+
+                test('THEN: it renders the chart container with correct data attributes', () => {
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-type')).toBe('scatter');
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-theme')).toBe('primary');
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-title')).toBe('Example Scatter Chart');
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-id')).toBe('scatter-chart-123');
+                });
+            });
+        });
+    });
+
+    describe('FOR: Area Chart', () => {
+        describe('GIVEN: Params: required', () => {
+            describe('WHEN: required params are provided', () => {
+                const $ = cheerio.load(renderComponent('chart', EXAMPLE_AREA_CHART_PARAMS));
+                const configScript = $(`script[data-highcharts-config--area-chart-123]`).html();
+
+                test('THEN: it passes jest-axe checks', async () => {
+                    const results = await axe($.html());
+                    expect(results).toHaveNoViolations();
+                });
+
+                test('THEN: it includes at least one area series', () => {
+                    expect(configScript).toContain('"type":"area"');
+                });
+
+                test('THEN: it renders the chart container with correct data attributes', () => {
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-type')).toBe('area');
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-theme')).toBe('primary');
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-title')).toBe('Example Area Chart');
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-id')).toBe('area-chart-123');
+                });
+
+                test('THEN: it includes the Highcharts JSON config', () => {
+                    expect(configScript).toContain('"text":"X Axis Title"');
+                    expect(configScript).toContain('"text":"Y Axis Title"');
+                });
+            });
+        });
+
+        describe('GIVEN: Params: Legend', () => {
+            describe('WHEN: legend is enabled', () => {
+                const $ = cheerio.load(renderComponent('chart', { ...EXAMPLE_AREA_CHART_PARAMS, legend: false }));
+
+                test('THEN: it renders the legend', () => {
+                    const configScript = $(`script[data-highcharts-config--area-chart-123]`).html();
+                    expect(configScript).toContain('"enabled":false');
+                });
+            });
+        });
+
+        describe('GIVEN: Params: Caption', () => {
+            describe('WHEN: caption is provided', () => {
+                const $ = cheerio.load(
+                    renderComponent('chart', {
+                        ...EXAMPLE_AREA_CHART_PARAMS,
+                        caption: 'This is an example caption for the chart.',
+                    }),
+                );
+
+                test('THEN: it renders the caption when provided', () => {
+                    expect($('figcaption').text()).toBe('This is an example caption for the chart.');
+                });
+            });
+        });
+
+        describe('GIVEN: Params: Description', () => {
+            describe('WHEN: description is provided', () => {
+                const $ = cheerio.load(
+                    renderComponent('chart', {
+                        ...EXAMPLE_AREA_CHART_PARAMS,
+                        description: 'An accessible description for screen readers.',
+                    }),
+                );
+
+                test('THEN: it renders the description for accessibility', () => {
+                    expect($('.ons-u-vh').text()).toBe('An accessible description for screen readers.');
+                });
+            });
+        });
+
+        describe('GIVEN: Params: Download', () => {
+            describe('WHEN: download object are provided', () => {
+                const $ = cheerio.load(
+                    renderComponent('chart', {
+                        ...EXAMPLE_AREA_CHART_PARAMS,
+                        download: {
+                            title: 'Download Chart Data',
+                            itemsList: [
+                                { text: 'Download as PNG', url: 'https://example.com/chart.png' },
+                                { text: 'Download as CSV', url: 'https://example.com/chart.csv' },
+                            ],
+                        },
+                    }),
+                );
+
+                test('THEN: it renders the download section correctly', () => {
+                    expect($('.ons-chart__download-title').text()).toBe('Download Chart Data');
+
+                    const downloadLinks = $('.ons-chart__download-title').next().find('li a');
+                    expect(downloadLinks.eq(0).text()).toBe('Download as PNG');
+                    expect(downloadLinks.eq(0).attr('href')).toBe('https://example.com/chart.png');
+                    expect(downloadLinks.eq(1).text()).toBe('Download as CSV');
+                    expect(downloadLinks.eq(1).attr('href')).toBe('https://example.com/chart.csv');
+                });
+            });
+        });
+    });
+
+    describe('FOR: Invalid Chart', () => {
+        describe('GIVEN: Invalid chart type', () => {
+            describe('WHEN: an invalid chart type is provided', () => {
+                const $ = cheerio.load(renderComponent('chart', EXAMPLE_INVALID_CHART_PARAMS));
+
+                test('THEN: it does not render the chart', () => {
+                    expect($('[data-highcharts-chart]').length).toBe(0);
+                });
+
+                test('THEN: it renders the error message', () => {
+                    expect($('[data-invalid-chart-type]').text()).toBe('Chart type "invalid" is not supported');
+                });
+
+                test('THEN: it does not include the Highcharts JSON config', () => {
+                    const configScript = $(`script[data-highcharts-config--invalid-chart-123]`).html();
+                    expect(configScript).toBeNull();
+                });
+
+                test('THEN: it still renders the title', () => {
+                    expect($('.ons-chart__title').text()).toBe('Example Invalid Chart');
+                });
+
+                test('THEN: it still renders the subtitle', () => {
+                    expect($('.ons-chart__subtitle').text()).toBe('A sample subtitle');
+                });
+
+                test('THEN: it still renders the description', () => {
+                    expect($('.ons-u-vh').text()).toBe('A detailed description');
+                });
+
+                test('THEN: it still renders the caption', () => {
+                    expect($('figcaption').text()).toBe('A detailed caption');
+                });
+
+                test('THEN: it still renders the download', () => {
+                    expect($('.ons-chart__download-title').text()).toBe('Download this chart');
+                });
+            });
+        });
+    });
 });

package/components/chart/annotations-options.js

@@ -16,7 +16,7 @@ class AnnotationsOptions {
                     padding: 3,
                     style: {
                         color: this.constants.labelColor,
-                        fontSize: this.constants.desktopFontSize,
+                        fontSize: this.constants.defaultFontSize,
                         width: 150,
                         textAlign: 'left',
                     },

package/components/chart/area-chart.js

@@ -0,0 +1,26 @@
+class AreaChart {
+    getAreaChartOptions = () => {
+        return {
+            legend: {
+                symbolWidth: 12,
+                symbolHeight: 12,
+            },
+            plotOptions: {
+                area: {
+                    fillOpacity: 1,
+                    // Use a circle instead of the default blob plus line icon
+                    // 'rectangle' counterintuitively gives a circle, because the legend icon has a border radius of half it's height by default
+                    legendSymbol: 'rectangle',
+                    stacking: 'normal',
+                },
+                series: {
+                    marker: {
+                        enabled: false,
+                    },
+                },
+            },
+        };
+    };
+}
+
+export default AreaChart;

package/components/chart/bar-chart.js

@@ -26,7 +26,7 @@ class BarChart {
                             // The design system does not include a semibold font weight, so we use 700 (bold) as an alternative.
                             fontWeight: '700',
                             color: this.constants.labelColor,
-                            fontSize: this.constants.mobileFontSize,
+                            fontSize: this.constants.defaultFontSize,
                         },
                     },
                 },
@@ -40,6 +40,7 @@ class BarChart {
                     style: {
                         color: this.constants.categoryLabelColor,
                     },
+                    useHTML: false,
                 },
                 // remove the tick marks for bar charts
                 tickWidth: 0,
@@ -48,6 +49,14 @@ class BarChart {
                 title: { align: 'high', textAlign: 'middle', reserveSpace: false, rotation: 0, y: -25, useHTML: true },
             },
             yAxis: {
+                labels: {
+                    rotation: 0,
+                    useHTML: true,
+                    style: {
+                        whiteSpace: 'nowrap',
+                        color: this.constants.categoryLabelColor,
+                    },
+                },
                 title: {
                     // Override the y Axis title settings for bar charts where the y axis is horizontal
                     textAlign: 'right',
@@ -110,7 +119,7 @@ class BarChart {
             // The design system does not include a semibold font weight, so we use 700 (bold) as an alternative.
             fontWeight: '700',
             color: this.constants.labelColor,
-            fontSize: this.constants.mobileFontSize,
+            fontSize: this.constants.defaultFontSize,
         },
     });
 

package/components/chart/chart-constants.js

@@ -9,9 +9,90 @@ class ChartConstants {
             categoryLabelColor: '#414042',
             gridLineColor: '#d9d9d9',
             zeroLineColor: '#b3b3b3',
-            // Responsive font sizes
-            mobileFontSize: '0.75rem', // 12px
-            desktopFontSize: '0.875rem', // 14px
+            defaultFontSize: '0.875rem', // 14px
+            lineMarkerStyles: [
+                {
+                    radius: 4,
+                    symbol: 'circle',
+                },
+                {
+                    radius: 4,
+                    symbol: 'square',
+                },
+                {
+                    radius: 5,
+                    symbol: 'diamond',
+                },
+                {
+                    radius: 5,
+                    symbol: 'triangle',
+                },
+                {
+                    radius: 5,
+                    symbol: 'triangle-down',
+                },
+                {
+                    radius: 4,
+                    symbol: 'circle',
+                    fillColor: 'white',
+                    lineWidth: 2.5,
+                    lineColor: null,
+                },
+                {
+                    radius: 4,
+                    symbol: 'square',
+                    fillColor: 'white',
+                    lineWidth: 2.5,
+                    lineColor: null,
+                },
+                {
+                    radius: 5,
+                    symbol: 'diamond',
+                    fillColor: 'white',
+                    lineWidth: 2.5,
+                    lineColor: null,
+                },
+                {
+                    radius: 5,
+                    symbol: 'triangle',
+                    fillColor: 'white',
+                    lineWidth: 2.5,
+                    lineColor: null,
+                },
+                {
+                    radius: 5,
+                    symbol: 'triangle-down',
+                    fillColor: 'white',
+                    lineWidth: 2.5,
+                    lineColor: null,
+                },
+            ],
+            scatterMarkerStyles: [
+                {
+                    radius: 5,
+                    symbol: 'circle',
+                    lineWidth: 1,
+                    lineColor: '#ffffff',
+                },
+                {
+                    radius: 5,
+                    symbol: 'square',
+                    lineWidth: 1,
+                    lineColor: '#ffffff',
+                },
+                {
+                    radius: 6,
+                    symbol: 'diamond',
+                    lineWidth: 1,
+                    lineColor: '#ffffff',
+                },
+                {
+                    radius: 6,
+                    symbol: 'triangle',
+                    lineWidth: 1,
+                    lineColor: '#ffffff',
+                },
+            ],
         };
 
         return constants;