@ons/design-system 72.5.0 → 72.8.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

@@ -1,5 +1,7 @@
 .ons-chart {
     margin: 0;
+    container-type: inline-size;
+    max-width: $grid-max-width;
 
     &__download-title {
         @extend .ons-u-pt-l;
@@ -21,9 +23,63 @@
         line-height: 1.2rem;
         color: var(--ons-color-grey-75);
     }
+
+    &__footnote-number {
+        display: flex;
+        flex-shrink: 0;
+        flex-grow: 0;
+        align-items: center;
+        justify-content: center;
+        min-width: 1.125rem; // 18px
+        min-height: 1.125rem; // 18px
+        padding: 0.2143em; // 3px;
+        aspect-ratio: 1;
+        border: 1px solid var(--ons-color-grey-100);
+        border-radius: 50%;
+        font-size: 0.875rem; // 14px
+        line-height: 0;
+        background-color: var(--ons-color-white);
+        color: var(--ons-color-grey-100);
+    }
+
+    /* Override Highcharts styling */
+    &__footnote-number span {
+        position: static !important;
+        transform-origin: 0 0 !important;
+        font-size: inherit !important;
+        color: inherit !important;
+        top: 0 !important;
+        left: 0 !important;
+    }
+
+    &__footnotes {
+        list-style: none;
+        padding: 0;
+        margin: 0 0 1rem;
+
+        // We need to use a container query here in order to match the responsive rules for Highcharts
+        // which is based on the width that the chart renders not the viewport
+        // Update the breakpoint value here if the Highcharts responsive rules change
+        @container (min-width: 601px) {
+            display: none;
+        }
+    }
+
+    &__footnote_item {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        font-size: 0.875rem; // 14px
+        color: var(--ons-color-grey-100);
+    }
 }
 
 // This is a workaround to position the axis title to the left
 .highcharts-axis-title {
     width: 100%;
 }
+
+.highcharts-xaxis-labels span {
+    display: block !important;
+    white-space: nowrap !important;
+}

package/components/chart/_macro.njk

@@ -23,6 +23,24 @@
         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">
@@ -33,6 +51,18 @@
                     <p class="ons-u-vh">{{ params.description }}</p>
                 {% endif %}
                 <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 %}
@@ -52,7 +82,7 @@
         {% 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": {
@@ -60,14 +90,17 @@
                     },
                     "dataLabels": {
                         "enabled": item.dataLabels if item.dataLabels 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 = {
                 "legend": {
-                    "enabled" : params.legend
+                    "enabled" : params.legend if params.legend else true
                 },
                 "yAxis": {
                     "title": {
@@ -94,8 +127,13 @@
         <!-- 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 | dump | safe }}
+            {{ config | tojson }}
         </script>
+        {% if params.annotations %}
+            <script type="application/json" data-highcharts-annotations--{{ params.id }}>
+                {{ params.annotations | tojson }}
+            </script>
+        {% endif %}
         <!-- prettier-ignore-end -->
     </div>
 {% endmacro %}

package/components/chart/_macro.spec.js

@@ -8,7 +8,13 @@ import {
     EXAMPLE_LINE_CHART_REQUIRED_PARAMS,
     EXAMPLE_LINE_CHART_WITH_CONFIG_PARAMS,
     EXAMPLE_BAR_CHART_PARAMS,
+    EXAMPLE_BAR_CHART_WITH_PERCENTAGE_HEIGHT_PARAMS,
     EXAMPLE_COLUMN_CHART_PARAMS,
+    EXAMPLE_LINE_CHART_WITH_ANNOTATIONS_PARAMS,
+    EXAMPLE_BAR_CHART_WITH_ANNOTATIONS_PARAMS,
+    EXAMPLE_COLUMN_CHART_WITH_ANNOTATIONS_PARAMS,
+    EXAMPLE_BAR_WITH_LINE_CHART_PARAMS,
+    EXAMPLE_COLUMN_WITH_LINE_CHART_PARAMS,
 } from './_test-examples';
 
 describe('Macro: Chart', () => {
@@ -90,6 +96,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));
@@ -119,6 +157,24 @@ describe('Macro: Chart', () => {
             });
         });
 
+        describe('GIVEN: Params: Percentage Height Desktop', () => {
+            describe('WHEN: percentage height desktop is provided', () => {
+                const $ = cheerio.load(renderComponent('chart', EXAMPLE_LINE_CHART_WITH_CONFIG_PARAMS));
+                test('THEN: it includes correct percentage height desktop', () => {
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-percentage-height-desktop')).toBe('50');
+                });
+            });
+        });
+
+        describe('GIVEN: Params: Percentage Height Mobile', () => {
+            describe('WHEN: percentage height mobile is provided', () => {
+                const $ = cheerio.load(renderComponent('chart', EXAMPLE_LINE_CHART_WITH_CONFIG_PARAMS));
+                test('THEN: it includes correct percentage height mobile', () => {
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-percentage-height-mobile')).toBe('120');
+                });
+            });
+        });
+
         describe('GIVEN: Params: Caption', () => {
             describe('WHEN: caption is provided', () => {
                 const $ = cheerio.load(
@@ -229,6 +285,24 @@ describe('Macro: Chart', () => {
             });
         });
 
+        describe('GIVEN: Params: Percentage Height Desktop', () => {
+            describe('WHEN: percentage height desktop is provided', () => {
+                const $ = cheerio.load(renderComponent('chart', EXAMPLE_BAR_CHART_WITH_PERCENTAGE_HEIGHT_PARAMS));
+                test('THEN: it does not include percentage height desktop', () => {
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-percentage-height-desktop')).toBe(undefined);
+                });
+            });
+        });
+
+        describe('GIVEN: Params: Percentage Height Mobile', () => {
+            describe('WHEN: percentage height mobile is provided', () => {
+                const $ = cheerio.load(renderComponent('chart', EXAMPLE_BAR_CHART_WITH_PERCENTAGE_HEIGHT_PARAMS));
+                test('THEN: it does not include percentage height mobile', () => {
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-percentage-height-mobile')).toBe(undefined);
+                });
+            });
+        });
+
         describe('GIVEN: Params: Caption', () => {
             describe('WHEN: caption is provided', () => {
                 const $ = cheerio.load(
@@ -358,6 +432,24 @@ describe('Macro: Chart', () => {
             });
         });
 
+        describe('GIVEN: Params: Percentage Height Desktop', () => {
+            describe('WHEN: percentage height desktop is provided', () => {
+                const $ = cheerio.load(renderComponent('chart', EXAMPLE_COLUMN_CHART_PARAMS));
+                test('THEN: it includes correct percentage height desktop', () => {
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-percentage-height-desktop')).toBe('50');
+                });
+            });
+        });
+
+        describe('GIVEN: Params: Percentage Height Mobile', () => {
+            describe('WHEN: percentage height mobile is provided', () => {
+                const $ = cheerio.load(renderComponent('chart', EXAMPLE_COLUMN_CHART_PARAMS));
+                test('THEN: it includes correct percentage height mobile', () => {
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-percentage-height-mobile')).toBe('120');
+                });
+            });
+        });
+
         describe('GIVEN: Params: Caption', () => {
             describe('WHEN: caption is provided', () => {
                 const $ = cheerio.load(
@@ -434,4 +526,332 @@ describe('Macro: Chart', () => {
             });
         });
     });
+
+    describe('FOR: Line chart with annotations', () => {
+        describe('GIVEN: Params: Annotations', () => {
+            describe('WHEN: annotations params are provided', () => {
+                const $ = cheerio.load(renderComponent('chart', EXAMPLE_LINE_CHART_WITH_ANNOTATIONS_PARAMS));
+
+                test('THEN: it passes jest-axe checks', async () => {
+                    const results = await axe($.html());
+                    expect(results).toHaveNoViolations();
+                });
+
+                test('THEN: it renders the footnotes', () => {
+                    expect($('.ons-chart__footnotes').text()).toContain('1');
+                    expect($('.ons-chart__footnotes').text()).toContain('A test annotation');
+                    expect($('.ons-chart__footnotes').text()).toContain('2');
+                    expect($('.ons-chart__footnotes').text()).toContain('Another test annotation');
+                });
+
+                test('THEN: the footnotes are hidden from screen readers', () => {
+                    expect($('.ons-chart__footnotes').attr('aria-hidden')).toBe('true');
+                });
+
+                test('THEN: it includes the Annotations JSON config', () => {
+                    const configScript = $(`script[data-highcharts-annotations--line-chart-annotations-123]`).html();
+                    expect(configScript).toContain('"text":"A test annotation"');
+                    expect(configScript).toContain('"point":{"x":10,"y":1.3}');
+                    expect(configScript).toContain('"labelOffsetX":10,"labelOffsetY":-50');
+                });
+            });
+        });
+    });
+
+    describe('FOR: Bar chart with annotations', () => {
+        describe('GIVEN: Params: Annotations', () => {
+            describe('WHEN: annotations params are provided', () => {
+                const $ = cheerio.load(renderComponent('chart', EXAMPLE_BAR_CHART_WITH_ANNOTATIONS_PARAMS));
+                test('THEN: it passes jest-axe checks', async () => {
+                    const results = await axe($.html());
+                    expect(results).toHaveNoViolations();
+                });
+
+                test('THEN: it renders the footnotes', () => {
+                    expect($('.ons-chart__footnotes').text()).toContain('1');
+                    expect($('.ons-chart__footnotes').text()).toContain('A test annotation');
+                });
+
+                test('THEN: the footnotes are hidden from screen readers', () => {
+                    expect($('.ons-chart__footnotes').attr('aria-hidden')).toBe('true');
+                });
+
+                test('THEN: it includes the Annotations JSON config', () => {
+                    const configScript = $(`script[data-highcharts-annotations--bar-chart-annotations-123]`).html();
+                    expect(configScript).toContain('"text":"A test annotation"');
+                    expect(configScript).toContain('"point":{"x":2,"y":3}');
+                    expect(configScript).toContain('"labelOffsetX":10,"labelOffsetY":-50');
+                });
+            });
+        });
+    });
+
+    describe('FOR: Column chart with annotations', () => {
+        describe('GIVEN: Params: Annotations', () => {
+            describe('WHEN: annotations params are provided', () => {
+                const $ = cheerio.load(renderComponent('chart', EXAMPLE_COLUMN_CHART_WITH_ANNOTATIONS_PARAMS));
+
+                test('THEN: it passes jest-axe checks', async () => {
+                    const results = await axe($.html());
+                    expect(results).toHaveNoViolations();
+                });
+
+                test('THEN: it renders the footnotes', () => {
+                    expect($('.ons-chart__footnotes').text()).toContain('1');
+                    expect($('.ons-chart__footnotes').text()).toContain('A test annotation');
+                });
+
+                test('THEN: the footnotes are hidden from screen readers', () => {
+                    expect($('.ons-chart__footnotes').attr('aria-hidden')).toBe('true');
+                });
+
+                test('THEN: it includes the Annotations JSON config', () => {
+                    const configScript = $(`script[data-highcharts-annotations--column-chart-annotations-123]`).html();
+                    expect(configScript).toContain('"text":"A test annotation"');
+                    expect(configScript).toContain('"point":{"x":11,"y":31.8}');
+                    expect(configScript).toContain('"labelOffsetX":10,"labelOffsetY":-50');
+                });
+            });
+        });
+    });
+
+    describe('FOR: Bar Chart with Line', () => {
+        describe('GIVEN: Params: required', () => {
+            describe('WHEN: required params are provided', () => {
+                const $ = cheerio.load(renderComponent('chart', EXAMPLE_BAR_WITH_LINE_CHART_PARAMS));
+                const configScript = $(`script[data-highcharts-config--bar-chart-123]`).html();
+
+                test('THEN: it passes jest-axe checks', async () => {
+                    const results = await axe($.html());
+                    expect(results).toHaveNoViolations();
+                });
+
+                test('THEN: it includes one series of type "bar" and another of type "line"', () => {
+                    expect(configScript).toContain('"type":"bar"');
+                    expect(configScript).toContain('"type":"line"');
+                });
+
+                test('THEN: it renders the chart container with correct data attributes', () => {
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-type')).toBe('bar');
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-theme')).toBe('alternate');
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-title')).toBe('Example Bar Chart');
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-id')).toBe('bar-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_BAR_WITH_LINE_CHART_PARAMS, legend: false }));
+
+                test('THEN: it renders the legend', () => {
+                    const configScript = $(`script[data-highcharts-config--bar-chart-123]`).html();
+                    expect(configScript).toContain('"enabled":false');
+                });
+            });
+        });
+
+        describe('GIVEN: Params: Caption', () => {
+            describe('WHEN: caption is provided', () => {
+                const $ = cheerio.load(
+                    renderComponent('chart', {
+                        ...EXAMPLE_BAR_WITH_LINE_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_BAR_WITH_LINE_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: Series: Type', () => {
+            describe('WHEN: a series has an invalid type', () => {
+                const invalidTypeParams = {
+                    ...EXAMPLE_BAR_WITH_LINE_CHART_PARAMS,
+                    series: [
+                        { name: 'Invalid Series', data: [5, 15, 25], type: 'scatter' },
+                        { name: 'Valid Line Series', data: [10, 20, 30], type: 'line' },
+                    ],
+                };
+
+                const $ = cheerio.load(renderComponent('chart', invalidTypeParams));
+                const configScript = $(`script[data-highcharts-config--bar-chart-123]`).html();
+
+                test('THEN: it defaults non-line series type to the chartType', () => {
+                    expect(configScript).not.toContain('"type":"scatter"');
+                    expect(configScript).toContain('"type":"bar"');
+                    expect(configScript).toContain('"type":"line"');
+                });
+            });
+        });
+
+        describe('GIVEN: Params: Download', () => {
+            describe('WHEN: download object are provided', () => {
+                const $ = cheerio.load(
+                    renderComponent('chart', {
+                        ...EXAMPLE_BAR_WITH_LINE_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: Column Chart with Line', () => {
+        describe('GIVEN: Params: required', () => {
+            describe('WHEN: required params are provided', () => {
+                const $ = cheerio.load(renderComponent('chart', EXAMPLE_COLUMN_WITH_LINE_CHART_PARAMS));
+                const configScript = $(`script[data-highcharts-config--column-chart-123]`).html();
+
+                test('THEN: it passes jest-axe checks', async () => {
+                    const results = await axe($.html());
+                    expect(results).toHaveNoViolations();
+                });
+
+                test('THEN: it includes one series of type "column" and another of type "line"', () => {
+                    expect(configScript).toContain('"type":"column"');
+                    expect(configScript).toContain('"type":"line"');
+                });
+
+                test('THEN: it renders the chart container with correct data attributes', () => {
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-type')).toBe('column');
+                    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');
+                });
+
+                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_COLUMN_WITH_LINE_CHART_PARAMS, legend: false }));
+
+                test('THEN: it renders the legend', () => {
+                    const configScript = $(`script[data-highcharts-config--column-chart-123]`).html();
+                    expect(configScript).toContain('"enabled":false');
+                });
+            });
+        });
+
+        describe('GIVEN: Params: Caption', () => {
+            describe('WHEN: caption is provided', () => {
+                const $ = cheerio.load(
+                    renderComponent('chart', {
+                        ...EXAMPLE_COLUMN_WITH_LINE_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_COLUMN_WITH_LINE_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 is provided', () => {
+                const $ = cheerio.load(
+                    renderComponent('chart', {
+                        ...EXAMPLE_COLUMN_WITH_LINE_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('GIVEN: Params: Series: Type', () => {
+            describe('WHEN: a series has an invalid type', () => {
+                const invalidTypeParams = {
+                    ...EXAMPLE_COLUMN_WITH_LINE_CHART_PARAMS,
+                    series: [
+                        { name: 'Invalid Series', data: [5, 15, 25], type: 'scatter' },
+                        { name: 'Valid Line Series', data: [10, 20, 30], type: 'line' },
+                    ],
+                };
+
+                const $ = cheerio.load(renderComponent('chart', invalidTypeParams));
+                const configScript = $(`script[data-highcharts-config--column-chart-123]`).html();
+
+                test('THEN: it defaults non-line series type to the chartType', () => {
+                    expect(configScript).not.toContain('"type":"scatter"');
+                    expect(configScript).toContain('"type":"column"');
+                    expect(configScript).toContain('"type":"line"');
+                });
+            });
+        });
+    });
 });