@ons/design-system 74.0.0-next.1 → 74.0.0-next.10

package/components/chart/example-line-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-line-chart-with-custom-reference-line-value.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-line-chart-with-label-format.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"
             }
         ]},
         "footnotes": {

package/components/chart/example-line-chart-with-markers.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-line-chart-with-range-annotations-inside.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-line-chart-with-range-annotations-outside-left-right.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-line-chart-with-range-annotations-outside-top-bottom.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-line-chart-with-reference-line-annotations.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-line-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"
             }
         ]},
         "footnotes": {

package/components/chart/example-scatter-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"
             }
         ]},
         "xAxis": {

package/components/chart/example-scatter-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"
             }
         ]},
         "footnotes": {

package/components/chart/example-stacked-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-stacked-column-chart.njk

@@ -12,9 +12,12 @@
         "download": {
             "title": "Download Figure 6 data",
             "itemsList": [
-                { "text": "Excel spreadsheet (XLSX format, 22KB)", "url": "#" },
-                { "text": "Simple text file (CSV format, 28KB)", "url": "#" },
-                { "text": "Image (PNG format, 32KB)", "url": "#" }
+                { "text": "Excel spreadsheet (XLSX format, 22KB)", "url": "#",
+                "download": "file" },
+                { "text": "Simple text file (CSV format, 28KB)", "url": "#",
+                "download": "file" },
+                { "text": "Image (PNG format, 32KB)", "url": "#",
+                "download": "file" }
             ]
         },
         "legend": true,

package/components/document-list/_macro.njk

@@ -42,7 +42,7 @@
                                         document.metadata.file.fileSize if document.metadata.file.fileSize,
                                         document.metadata.file.filePages if document.metadata.file.filePages ]
                                     %}
-                                    , {{ fileMetadataItems | join(', ') }}
+                                    , {{ fileMetadataItems | select | join(', ') }}
                                 </span>
                             {% endif %}
                         </a>
@@ -89,7 +89,7 @@
                                             document.metadata.file.fileSize if document.metadata.file.fileSize,
                                             document.metadata.file.filePages if document.metadata.file.filePages ]
                                         %}
-                                        {{ fileMetadataItems | join(', ') }}
+                                        {{ fileMetadataItems | select | join(', ') }}
                                     </li>
                                 {%- endif -%}
                             </ul>

package/components/document-list/_macro.spec.js

@@ -277,6 +277,61 @@ describe('FOR: Macro: Document list', () => {
                 expect(fileInfo).toBe('PDF, 499KB, 1 page');
             });
         });
+
+        describe('WHEN: file configuration is missing optional fileSize and filePages', () => {
+            const $ = cheerio.load(
+                renderComponent('document-list', {
+                    documents: [
+                        {
+                            ...EXAMPLE_DOCUMENT_LIST_BASIC,
+                            metadata: {
+                                file: {
+                                    fileType: 'PDF',
+                                },
+                            },
+                        },
+                    ],
+                }),
+            );
+
+            test('THEN: has visually hidden file information without stray separators', () => {
+                const hiddenText = $('.ons-document-list__item-title a .ons-u-vh').text().trim();
+                expect(hiddenText).toBe(', PDF document download');
+            });
+
+            test('THEN: has file information without stray separators', () => {
+                const fileInfo = $('.ons-document-list__item-attribute').text().trim();
+                expect(fileInfo).toBe('PDF');
+            });
+        });
+
+        describe('WHEN: file configuration is missing optional filePages', () => {
+            const $ = cheerio.load(
+                renderComponent('document-list', {
+                    documents: [
+                        {
+                            ...EXAMPLE_DOCUMENT_LIST_BASIC,
+                            metadata: {
+                                file: {
+                                    fileType: 'PDF',
+                                    fileSize: '499KB',
+                                },
+                            },
+                        },
+                    ],
+                }),
+            );
+
+            test('THEN: has visually hidden file information without stray separators', () => {
+                const hiddenText = $('.ons-document-list__item-title a .ons-u-vh').text().trim();
+                expect(hiddenText).toBe(', PDF document download, 499KB');
+            });
+
+            test('THEN: has file information without stray separators', () => {
+                const fileInfo = $('.ons-document-list__item-attribute').text().trim();
+                expect(fileInfo).toBe('PDF, 499KB');
+            });
+        });
     });
 
     describe('GIVEN: Params: object', () => {

package/components/featured-article/_macro.njk

@@ -1,6 +1,3 @@
-{% 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 %}
@@ -32,41 +29,10 @@
             </ul>
         {% endif %}
 
+        {# The media (a nested figure containing a chart or image) is provided via the caller
+           block, so the article does not need to know how the content is rendered. #}
         <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 %}
+            {{ caller() if caller }}
         </div>
 
         {% if params.description %}

package/components/featured-article/example-featured-article-with-chart.njk

@@ -1,6 +1,8 @@
 {% from "components/featured-article/_macro.njk" import onsFeaturedArticle %}
-{{
-    onsFeaturedArticle({
+{% from "components/chart/_macro.njk" import onsChart %}
+
+{%
+    call onsFeaturedArticle({
         "title": {
             "text": 'Retail sales, Great Britain: July 2024',
             "url": '#0'
@@ -15,14 +17,22 @@
             }
         },
         "headingLevel": 3,
-        "chart": {
+        "description": "<ul>
+                <li>Retail sales volumes increased by 0.4% in July 2024, following a 0.2% increase in June 2024.</li>
+                <li>Retail sales values increased by 0.5% in July 2024, following a 0.3% increase in June 2024.</li>
+                <li>The annual rate of inflation for the Consumer Prices Index including owner occupiers’ housing costs (CPIH) was 2.8% in July 2024, up from 2.6% in June 2024.</li>
+            </ul>"
+    })
+%}
+
+    {{
+        onsChart({
             "chartType": "line",
-            "description": "Line chart showing the annual rate of inflation for the Consumer Prices Index including owner occupiers’ housing costs (CPIH) and its components.",
             "theme": "primary",
+            "headingLevel": 4,
             "title": "Sales volumes and values saw moderate growth in July 2024",
-            "subtitle": "Figure 6: Upward contribution from housing and household services (including energy) saw the annual CPIH inflation rate rise",
+            "audioDescription": "Line chart showing the annual rate of inflation for the Consumer Prices Index including owner occupiers’ housing costs (CPIH) and its components.",
             "id": "id",
-            "headingLevel": 4,
             "legend": true,
             "xAxis": {
                 "title": "Year",
@@ -213,11 +223,6 @@
             ],
             "percentageHeightDesktop": 35,
             "percentageHeightMobile": 90
-        },
-        "description": "<ul>
-                <li>Retail sales volumes increased by 0.4% in July 2024, following a 0.2% increase in June 2024.</li>
-                <li>Retail sales values increased by 0.5% in July 2024, following a 0.3% increase in June 2024.</li>
-                <li>The annual rate of inflation for the Consumer Prices Index including owner occupiers’ housing costs (CPIH) was 2.8% in July 2024, up from 2.6% in June 2024.</li>
-            </ul>"
-    })
-}}
+        })
+    }}
+{% endcall %}

package/components/featured-article/example-featured-article-with-image.njk

@@ -1,6 +1,8 @@
 {% from "components/featured-article/_macro.njk" import onsFeaturedArticle %}
-{{
-    onsFeaturedArticle({
+{% from "components/image/_macro.njk" import onsImage %}
+
+{%
+    call onsFeaturedArticle({
         "title": {
             "text": 'Retail sales, Great Britain: July 2024',
             "url": '#0'
@@ -15,10 +17,13 @@
             }
         },
         "headingLevel": 3,
-        "image": {
-            "src": '/img/small/census-monuments-lights-featured.jpg',
-            "alt": 'census monuments lights featured'
-        },
         "description": "Retail sales volumes and values saw moderate growth in July 2024, with the annual rate of inflation for the Consumer Prices Index including owner occupiers’ housing costs (CPIH) rising to 2.8%."
     })
-}}
+%}
+    {{
+        onsImage({
+            "src": '/img/small/census-monuments-lights-featured.jpg',
+            "alt": 'census monuments lights featured'
+        })
+    }}
+{% endcall %}

package/components/featured-article/featured-article.scss

@@ -6,7 +6,7 @@
     outline: 2px solid transparent;
     outline-offset: -2px;
 
-    &__image {
+    &__media {
         .ons-image__img {
             width: 100%;
             max-width: $grid-max-width;