@ons/design-system 73.9.1 → 73.10.0-beta.2

package/components/chart/_chart.scss

@@ -29,15 +29,6 @@
         outline-offset: 2px;
     }
 
-    &__download-title {
-        @extend .ons-u-pt-l;
-        @extend .ons-u-fs-r--b;
-    }
-
-    &__caption {
-        color: var(--ons-color-grey-75);
-    }
-
     &__annotations-footnotes-number {
         // !important is necessary for some range annotation labels at mobile, otherwise
         // the inline-styled block display takes precedence. This inline style is only

package/components/chart/_macro.njk

@@ -1,21 +1,11 @@
-{% from "components/list/_macro.njk" import onsList %}
-{% from "components/details/_macro.njk" import onsDetails %}
-
 {% macro onsChart(params) %}
+    {% from "components/figure/_macro.njk" import onsFigure %}
     {% set supportedChartTypes = ['line', 'bar', 'column', 'scatter', 'area', 'columnrange', 'boxplot'] %}
     {% set supportedChartTypesWithLine = ['column'] %}
     {% set supportedChartTypesWithScatter = ['columnrange'] %}
     {% set supportedChartTypesWithXAxisMinAndMax = ['scatter'] %}
     {% set supportedChartTypesWithYAxisMinAndMax = ['line', 'bar', 'column', 'scatter', 'area', 'columnrange', 'boxplot'] %}
     {% set supportedAspectRatios = ['16-9', '4-3', '21-9', '1-1', '3-2', '9-16'] %}
-    {% set headingLevel = params.headingLevel | default(2) %}
-    {% set openingTitleTag = "<h" ~ headingLevel %}
-    {% set closingTitleTag = "</h" ~ headingLevel ~ ">" %}
-    {% set openingSubtitleTag = "<h" ~  (headingLevel + 1) %}
-    {% set closingSubtitleTag = "</h" ~ (headingLevel + 1) ~ ">" %}
-    {% set openingDownloadTitleTag = "<h" ~ (headingLevel + 2) %}
-    {% set closingDownloadTitleTag = "</h" ~ (headingLevel + 2) ~ ">" %}
-    {% set audioDescriptionId = "chart-audio-description-" ~ params.id %}
     {% set instructionsId = "chart-instructions-" ~ params.id %}
     {% set iframeAspectRatio = params.iframeAspectRatio if params.iframeAspectRatio in supportedAspectRatios else '16-9' %}
     {% set instructions = params.instructions | default('Use the Tab key to move focus into the chart. Once inside, use the arrow keys to navigate between data points. As you move, tooltips will be announced to describe each point. Touch device users, explore by touch or with swipe gestures.') %}
@@ -54,132 +44,110 @@
             {% endif %}
         {% endif %}
     >
-        <figure class="ons-chart" aria-describedby="{{ audioDescriptionId }}">
-            {{ openingTitleTag | safe }} class="ons-chart__title">{{ params.title }}{{ closingTitleTag | safe }}
-            {% if params.subtitle %}
-                {{ openingSubtitleTag | safe }}
-                class="ons-chart__subtitle">{{ params.subtitle }}{{ closingSubtitleTag | safe }}
-            {% endif %}
-
-            <p class="ons-u-vh" id="{{ audioDescriptionId }}">{{ params.description }}</p>
-
-            {% if params.iframeUrl %}
-                <div
-                    class="ons-chart__iframe-wrapper{{ ' ons-chart__non-js-hide' if params.fallbackImageUrl else '' }}"
-                    id="{{ params.id }}"
-                >
-                    <iframe
-                        src="{{ params.iframeUrl }}"
-                        title="{{ params.title }}"
-                        class="ons-chart__iframe ons-chart__iframe--{{ iframeAspectRatio }}"
-                        frameborder="0"
-                        scrolling="no"
-                    ></iframe>
-                </div>
-            {% else %}
-                {% 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 %}
+        {%
+            call onsFigure({
+                "id": params.id,
+                "headingLevel": params.headingLevel,
+                "figureNumber": params.figureNumber,
+                "title": params.title,
+                "subtitle": params.subtitle,
+                "audioDescription": params.description,
+                "caption": params.caption,
+                "footnotes": params.footnotes,
+                "download": params.download
+            })
+        %}
+            <div class="ons-chart">
+                {% if params.iframeUrl %}
                     <div
-                        data-highcharts-chart-container
-                        class="ons-chart__container"
-                        tabindex="0"
-                        role="region"
-                        aria-label="chart container"
-                        aria-describedby="{{ instructionsId }}"
+                        class="ons-chart__iframe-wrapper{{ ' ons-chart__non-js-hide' if params.fallbackImageUrl else '' }}"
+                        id="iframe--{{ params.id }}"
                     >
-                        <div id="{{ instructionsId }}" class="ons-u-vh">{{ instructions }}</div>
-                        <div data-highcharts-chart class="ons-chart__chart"></div>
+                        <iframe
+                            src="{{ params.iframeUrl }}"
+                            title="{{ params.title }}"
+                            class="ons-chart__iframe ons-chart__iframe--{{ iframeAspectRatio }}"
+                            frameborder="0"
+                            scrolling="no"
+                        ></iframe>
                     </div>
                 {% else %}
-                    <p data-invalid-chart-type data-unsupported-chart-text>
-                        <b>{{ '"' + params.chartType + '" - ' + (params.unsupportedChartText or 'chart type is not supported') }}</b>
-                    </p>
+                    {% 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-container
+                            class="ons-chart__container"
+                            tabindex="0"
+                            role="region"
+                            aria-label="chart container"
+                            aria-describedby="{{ instructionsId }}"
+                        >
+                            <div id="{{ instructionsId }}" class="ons-u-vh">{{ instructions }}</div>
+                            <div data-highcharts-chart class="ons-chart__chart"></div>
+                        </div>
+                    {% else %}
+                        <p data-invalid-chart-type data-unsupported-chart-text>
+                            <b>{{ '"' + params.chartType + '" - ' + (params.unsupportedChartText or 'chart type is not supported') }}</b>
+                        </p>
+                    {% endif %}
                 {% endif %}
-            {% endif %}
 
-            {% if params.fallbackImageUrl %}
-                {% set fallbackImageId = ["fallback-image--", params.id] | join %}
-                <noscript id="{{ fallbackImageId }}">
-                    {# Note that a more detailed description of the chart is provided in the audio description above #}
-                    <img
-                        src="{{ params.fallbackImageUrl }}"
-                        alt="{{ params.fallbackImageAlt or 'Fallback image for the chart as JavaScript is disabled' }}"
-                        class="ons-chart__fallback-image"
-                    />
-                </noscript>
-            {% endif %}
-            {#
+                {% if params.fallbackImageUrl %}
+                    {% set fallbackImageId = ["fallback-image--", params.id] | join %}
+                    <noscript id="{{ fallbackImageId }}">
+                        {# Note that a more detailed description of the chart is provided in the figure's audio description #}
+                        <img
+                            src="{{ params.fallbackImageUrl }}"
+                            alt="{{ params.fallbackImageAlt or 'Fallback image for the chart as JavaScript is disabled' }}"
+                            class="ons-chart__fallback-image"
+                        />
+                    </noscript>
+                {% 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
             #}
-            {% if (params.annotations or params.rangeAnnotations or params.referenceLineAnnotations) and not params.iframeUrl %}
-                <ul class="ons-chart__annotations-footnotes" aria-hidden="true" data-annotations-footnotes>
-                    {% for annotation in params.annotations %}
-                        <li class="ons-chart__annotations-footnotes_item">
-                            <span class="ons-chart__annotations-footnotes-number">{{ loop.index }}</span>
-                            {{ annotation.text }}
-                        </li>
-                    {% endfor %}
-                    {% for rangeAnnotation in params.rangeAnnotations %}
-                        <li class="ons-chart__annotations-footnotes_item">
-                            <span class="ons-chart__annotations-footnotes-number">{{ loop.index + params.annotations | length }}</span>
-                            {{ rangeAnnotation.text }}
-                        </li>
-                    {% endfor %}
-                    {% for referenceLineAnnotation in params.referenceLineAnnotations %}
-                        <li class="ons-chart__annotations-footnotes_item">
-                            <span class="ons-chart__annotations-footnotes-number"
-                                >{{ loop.index + params.annotations | length + params.rangeAnnotations | length }}</span
-                            >
-                            {{ referenceLineAnnotation.text }}
-                        </li>
-                    {% endfor %}
-                </ul>
-            {% endif %}
-            {% 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 }}
-            class="ons-chart__download-title">{{ params.download.title }}{{ closingDownloadTitleTag | safe }}
-            {{
-                onsList({
-                    "element": "ol",
-                    "itemsList": params.download.itemsList
-                })
-            }}
-        {% endif %}
-
-        {% if params.footnotes %}
-            {% set footnotesId = ["footnotes--", params.id] | join %}
-
-            {{
-                onsDetails({
-                    "id": footnotesId,
-                    "title": params.footnotes.title,
-                    "content": params.footnotes.content,
-                    "headingLevel": headingLevel + 2,
-                    "classes": "ons-u-mt-xl"
-                })
-            }}
-        {% endif %}
+                {% if (params.annotations or params.rangeAnnotations or params.referenceLineAnnotations) and not params.iframeUrl %}
+                    <ul class="ons-chart__annotations-footnotes" aria-hidden="true" data-annotations-footnotes>
+                        {% for annotation in params.annotations %}
+                            <li class="ons-chart__annotations-footnotes_item">
+                                <span class="ons-chart__annotations-footnotes-number">{{ loop.index }}</span>
+                                {{ annotation.text }}
+                            </li>
+                        {% endfor %}
+                        {% for rangeAnnotation in params.rangeAnnotations %}
+                            <li class="ons-chart__annotations-footnotes_item">
+                                <span class="ons-chart__annotations-footnotes-number">{{ loop.index + params.annotations | length }}</span>
+                                {{ rangeAnnotation.text }}
+                            </li>
+                        {% endfor %}
+                        {% for referenceLineAnnotation in params.referenceLineAnnotations %}
+                            <li class="ons-chart__annotations-footnotes_item">
+                                <span class="ons-chart__annotations-footnotes-number"
+                                    >{{ loop.index + params.annotations | length + params.rangeAnnotations | length }}</span
+                                >
+                                {{ referenceLineAnnotation.text }}
+                            </li>
+                        {% endfor %}
+                    </ul>
+                {% endif %}
+            </div>
+        {% endcall %}
 
         {% if (params.chartType in supportedChartTypes) and not params.iframeUrl %}
             {% set series = [] %}

package/components/chart/_macro.spec.js

@@ -40,11 +40,11 @@ describe('Macro: Chart', () => {
                 });
 
                 test('THEN: it renders the title', () => {
-                    expect($('.ons-chart__title').text()).toBe('Example Line Chart');
+                    expect($('.ons-figure__title').text()).toBe('Example Line Chart');
                 });
 
                 test('THEN: it renders the subtitle', () => {
-                    expect($('.ons-chart__subtitle').text()).toBe('A sample subtitle');
+                    expect($('.ons-figure__subtitle').text()).toBe('A sample subtitle');
                 });
 
                 test('THEN: it renders the chart container with the correct data attributes', () => {
@@ -61,7 +61,7 @@ describe('Macro: Chart', () => {
 
                 test('THEN: it does NOT render optional fields', () => {
                     expect($('figcaption').length).toBe(0);
-                    expect($('.ons-chart__download-title').length).toBe(0);
+                    expect($('.ons-details__title').length).toBe(0);
                 });
 
                 test('THEN: it renders the chart container with the correct aria attributes', () => {
@@ -128,15 +128,30 @@ describe('Macro: Chart', () => {
                 );
 
                 test('THEN: renders title with correct tag', () => {
-                    expect($('.ons-chart__title')[0].tagName).toBe('h3');
+                    expect($('.ons-figure__title')[0].tagName).toBe('h3');
                 });
 
                 test('THEN: renders subtitle with correct tag', () => {
-                    expect($('.ons-chart__subtitle')[0].tagName).toBe('h4');
+                    expect($('.ons-figure__subtitle')[0].tagName).toBe('h4');
                 });
 
                 test('THEN: renders download title with correct tag', () => {
-                    expect($('.ons-chart__download-title')[0].tagName).toBe('h5');
+                    expect($('.ons-details__title')[0].tagName).toBe('h5');
+                });
+            });
+        });
+
+        describe('GIVEN: Params: figureNumber', () => {
+            describe('WHEN: figureNumber is provided', () => {
+                const $ = cheerio.load(
+                    renderComponent('chart', {
+                        ...EXAMPLE_LINE_CHART_REQUIRED_PARAMS,
+                        figureNumber: 'Figure 1',
+                    }),
+                );
+
+                test('THEN: it renders the figure number', () => {
+                    expect($('.ons-figure__number').text()).toBe('Figure 1');
                 });
             });
         });
@@ -455,7 +470,7 @@ describe('Macro: Chart', () => {
                 );
 
                 test('THEN: it renders the description for accessibility', () => {
-                    expect($('#chart-audio-description-chart-123').text()).toBe('An accessible description for screen readers.');
+                    expect($('#figure-audio-description-chart-123').text()).toBe('An accessible description for screen readers.');
                 });
             });
         });
@@ -476,9 +491,9 @@ describe('Macro: Chart', () => {
                 );
 
                 test('THEN: it renders the download section correctly', () => {
-                    expect($('.ons-chart__download-title').text()).toBe('Download Chart Data');
+                    expect($('.ons-details__title').text()).toBe('Download Chart Data');
 
-                    const downloadLinks = $('.ons-chart__download-title').next().find('li a');
+                    const downloadLinks = $('.ons-details__content 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');
@@ -689,7 +704,7 @@ describe('Macro: Chart', () => {
 
                 test('THEN: it does NOT render optional fields', () => {
                     expect($('figcaption').length).toBe(0);
-                    expect($('.ons-chart__download-title').length).toBe(0);
+                    expect($('.ons-details__title').length).toBe(0);
                 });
 
                 test('THEN: it includes the Highcharts JSON config', () => {
@@ -895,7 +910,7 @@ describe('Macro: Chart', () => {
                 );
 
                 test('THEN: it renders the description for accessibility', () => {
-                    expect($('#chart-audio-description-bar-chart-123').text()).toBe('An accessible description for screen readers.');
+                    expect($('#figure-audio-description-bar-chart-123').text()).toBe('An accessible description for screen readers.');
                 });
             });
         });
@@ -916,9 +931,9 @@ describe('Macro: Chart', () => {
                 );
 
                 test('THEN: it renders the download section correctly', () => {
-                    expect($('.ons-chart__download-title').text()).toBe('Download Chart Data');
+                    expect($('.ons-details__title').text()).toBe('Download Chart Data');
 
-                    const downloadLinks = $('.ons-chart__download-title').next().find('li a');
+                    const downloadLinks = $('.ons-details__content 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');
@@ -1009,7 +1024,7 @@ describe('Macro: Chart', () => {
 
                 test('THEN: it does NOT render optional fields', () => {
                     expect($('figcaption').length).toBe(0);
-                    expect($('.ons-chart__download-title').length).toBe(0);
+                    expect($('.ons-details__title').length).toBe(0);
                 });
 
                 test('THEN: it includes the Highcharts JSON config', () => {
@@ -1180,7 +1195,7 @@ describe('Macro: Chart', () => {
                 );
 
                 test('THEN: it renders the description for accessibility', () => {
-                    expect($('#chart-audio-description-column-chart-123').text()).toBe('An accessible description for screen readers.');
+                    expect($('#figure-audio-description-column-chart-123').text()).toBe('An accessible description for screen readers.');
                 });
             });
         });
@@ -1201,9 +1216,9 @@ describe('Macro: Chart', () => {
                 );
 
                 test('THEN: it renders the download section correctly', () => {
-                    expect($('.ons-chart__download-title').text()).toBe('Download Chart Data');
+                    expect($('.ons-details__title').text()).toBe('Download Chart Data');
 
-                    const downloadLinks = $('.ons-chart__download-title').next().find('li a');
+                    const downloadLinks = $('.ons-details__content 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');
@@ -1549,7 +1564,7 @@ describe('Macro: Chart', () => {
                 );
 
                 test('THEN: it renders the description for accessibility', () => {
-                    expect($('#chart-audio-description-area-chart-123').text()).toBe('An accessible description for screen readers.');
+                    expect($('#figure-audio-description-area-chart-123').text()).toBe('An accessible description for screen readers.');
                 });
             });
         });
@@ -1570,9 +1585,9 @@ describe('Macro: Chart', () => {
                 );
 
                 test('THEN: it renders the download section correctly', () => {
-                    expect($('.ons-chart__download-title').text()).toBe('Download Chart Data');
+                    expect($('.ons-details__title').text()).toBe('Download Chart Data');
 
-                    const downloadLinks = $('.ons-chart__download-title').next().find('li a');
+                    const downloadLinks = $('.ons-details__content 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');
@@ -1594,9 +1609,9 @@ describe('Macro: Chart', () => {
                     }),
                 );
                 test('THEN: it renders the footnotes', () => {
-                    expect($('#footnotes--area-chart-123').length).toBe(1);
-                    expect($('#footnotes--area-chart-123').find('ol').length).toBe(1);
-                    expect($('#footnotes--area-chart-123').text()).toContain('Footnotes');
+                    expect($('#figure-footnotes--area-chart-123').length).toBe(1);
+                    expect($('#figure-footnotes--area-chart-123').find('ol').length).toBe(1);
+                    expect($('#figure-footnotes--area-chart-123').text()).toContain('Footnotes');
                 });
             });
         });
@@ -1795,7 +1810,7 @@ describe('Macro: Chart', () => {
                 );
 
                 test('THEN: it renders the description for accessibility', () => {
-                    expect($('#chart-audio-description-boxplot-chart-123').text()).toBe(accessibleDescription);
+                    expect($('#figure-audio-description-boxplot-chart-123').text()).toBe(accessibleDescription);
                 });
             });
         });
@@ -2019,15 +2034,15 @@ describe('Macro: Chart', () => {
                 });
 
                 test('THEN: it still renders the title', () => {
-                    expect($('.ons-chart__title').text()).toBe('Example Invalid Chart');
+                    expect($('.ons-figure__title').text()).toBe('Example Invalid Chart');
                 });
 
                 test('THEN: it still renders the subtitle', () => {
-                    expect($('.ons-chart__subtitle').text()).toBe('A sample subtitle');
+                    expect($('.ons-figure__subtitle').text()).toBe('A sample subtitle');
                 });
 
                 test('THEN: it still renders the description', () => {
-                    expect($('#chart-audio-description-invalid-chart-123').text()).toBe('A detailed description');
+                    expect($('#figure-audio-description-invalid-chart-123').text()).toBe('A detailed description');
                 });
 
                 test('THEN: it still renders the caption', () => {
@@ -2035,7 +2050,7 @@ describe('Macro: Chart', () => {
                 });
 
                 test('THEN: it still renders the download', () => {
-                    expect($('.ons-chart__download-title').text()).toBe('Download this chart');
+                    expect($('.ons-details__title').text()).toBe('Download this chart');
                 });
             });
         });

package/components/chart/example-area-chart-with-axis-min-and-max-values.njk

@@ -15,16 +15,19 @@
             'itemsList': [
             {
                 "text": "Excel spreadsheet (XLSX format, 18KB)",
-                "url": "#"
+                "url": "#",
+                "download": "file"
             },
             {
                 "text": "Simple text file (CSV format, 25KB)",
-                "url": "#"
+                "url": "#",
+                "download": "file"
             },
             {
 
                 "text": "Image (PNG format, 25KB)",
-                "url": "#"
+                "url": "#",
+                "download": "file"
             }
         ]},
         "legend": "true",

package/components/chart/example-area-chart.njk

@@ -15,16 +15,19 @@
             'itemsList': [
             {
                 "text": "Excel spreadsheet (XLSX format, 18KB)",
-                "url": "#"
+                "url": "#",
+                "download": "file"
             },
             {
                 "text": "Simple text file (CSV format, 25KB)",
-                "url": "#"
+                "url": "#",
+                "download": "file"
             },
             {
 
                 "text": "Image (PNG format, 25KB)",
-                "url": "#"
+                "url": "#",
+                "download": "file"
             }
         ]},
         "legend": "true",

package/components/chart/example-bar-chart-with-annotations.njk

@@ -14,15 +14,18 @@
             'itemsList': [
                 {
                     "text": "Excel spreadsheet (XLSX format, 18KB)",
-                    "url": "#"
+                    "url": "#",
+                    "download": "file"
                 },
                 {
                     "text": "Simple text file (CSV format, 25KB)",
-                    "url": "#"
+                    "url": "#",
+                    "download": "file"
                 },
                 {
                     "text": "Image (PNG format, 25KB)",
-                    "url": "#"
+                    "url": "#",
+                    "download": "file"
                 }
             ]
         },

package/components/chart/example-bar-chart-with-axis-min-and-max-values.njk

@@ -14,15 +14,18 @@
             'itemsList': [
                 {
                     "text": "Excel spreadsheet (XLSX format, 18KB)",
-                    "url": "#"
+                    "url": "#",
+                    "download": "file"
                 },
                 {
                     "text": "Simple text file (CSV format, 25KB)",
-                    "url": "#"
+                    "url": "#",
+                    "download": "file"
                 },
                 {
                     "text": "Image (PNG format, 25KB)",
-                    "url": "#"
+                    "url": "#",
+                    "download": "file"
                 }
             ]
         },

package/components/chart/example-bar-chart-with-point-range-and-reference-line-annotations.njk

@@ -14,15 +14,18 @@
             'itemsList': [
                 {
                     "text": "Excel spreadsheet (XLSX format, 18KB)",
-                    "url": "#"
+                    "url": "#",
+                    "download": "file"
                 },
                 {
                     "text": "Simple text file (CSV format, 25KB)",
-                    "url": "#"
+                    "url": "#",
+                    "download": "file"
                 },
                 {
                     "text": "Image (PNG format, 25KB)",
-                    "url": "#"
+                    "url": "#",
+                    "download": "file"
                 }
             ]
         },

package/components/chart/example-bar-chart.njk

@@ -14,15 +14,18 @@
             'itemsList': [
                 {
                     "text": "Excel spreadsheet (XLSX format, 18KB)",
-                    "url": "#"
+                    "url": "#",
+                    "download": "file"
                 },
                 {
                     "text": "Simple text file (CSV format, 25KB)",
-                    "url": "#"
+                    "url": "#",
+                    "download": "file"
                 },
                 {
                     "text": "Image (PNG format, 25KB)",
-                    "url": "#"
+                    "url": "#",
+                    "download": "file"
                 }
             ]
         },

package/components/chart/example-bar-with-confidence-levels.njk

@@ -13,15 +13,18 @@
             'itemsList': [
                 {
                     "text": "Excel spreadsheet (XLSX format, 18KB)",
-                    "url": "#"
+                    "url": "#",
+                    "download": "file"
                 },
                 {
                     "text": "Simple text file (CSV format, 25KB)",
-                    "url": "#"
+                    "url": "#",
+                    "download": "file"
                 },
                 {
                     "text": "Image (PNG format, 25KB)",
-                    "url": "#"
+                    "url": "#",
+                    "download": "file"
                 }
             ]
         },