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

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/figure/_macro.njk

@@ -10,8 +10,13 @@
     {% set closingTitleTag = "</h" ~ headingLevel ~ ">" %}
     {% set openingSubtitleTag = '<h' ~ (headingLevel + 1) ~ ' class="ons-figure__subtitle">' %}
     {% set closingSubtitleTag = "</h" ~ (headingLevel + 1) ~ ">" %}
-    {% set openingDownloadTitleTag = '<h' ~ (headingLevel + 2) ~ '>' %}
-    {% set closingDownloadTitleTag = "</h" ~ (headingLevel + 2) ~ ">" %}
+    {% if params.title and params.subtitle %}
+        {% set childHeadingLevel = headingLevel + 2 %}
+    {% elif params.title %}
+        {% set childHeadingLevel = headingLevel + 1 %}
+    {% else %}
+        {% set childHeadingLevel = headingLevel %}
+    {% endif %}
     {% set audioDescriptionId = "figure-audio-description-" ~ params.id %}
     {% set rootElement = 'div' if params.useDivForRootElement else 'figure' %}
     {% set openingRootTag = '<' ~ rootElement %}
@@ -34,7 +39,7 @@
     {% if params.title %}
         {{ openingTitleTag | safe }}{{ params.title }}{{ closingTitleTag | safe }}
     {% endif %}
-    {% if params.subtitle %}
+    {% if params.subtitle and params.title %}
         {{ openingSubtitleTag | safe }}{{ params.subtitle }}{{ closingSubtitleTag | safe }}
     {% endif %}
 
@@ -70,7 +75,7 @@
                 "id": footnotesId,
                 "title": params.footnotes.title,
                 "content": params.footnotes.content,
-                "headingLevel": headingLevel + 2,
+                "headingLevel": childHeadingLevel,
                 "classes": "ons-u-mb-l"
             })
         }}
@@ -86,7 +91,7 @@
                     "itemsList": params.download.itemsList,
                     "variants": "bare"
                 }),
-                "headingLevel": headingLevel + 2
+                "headingLevel": childHeadingLevel
             })
         }}
     {% endif %}

package/components/figure/_macro.spec.js

@@ -173,7 +173,7 @@ describe('macro: figure', () => {
     });
 
     describe('subtitle', () => {
-        it('renders the subtitle', () => {
+        it('renders the subtitle when title is also provided', () => {
             const $ = cheerio.load(
                 renderComponent(
                     'figure',
@@ -193,6 +193,21 @@ describe('macro: figure', () => {
 
             expect($('.ons-figure__subtitle').length).toBe(0);
         });
+
+        it('does not render the subtitle when title is not provided', () => {
+            const $ = cheerio.load(
+                renderComponent(
+                    'figure',
+                    {
+                        id: 'example-figure',
+                        subtitle: 'A subtitle',
+                    },
+                    CALLER_CONTENT,
+                ),
+            );
+
+            expect($('.ons-figure__subtitle').length).toBe(0);
+        });
     });
 
     describe('heading levels', () => {
@@ -244,7 +259,7 @@ describe('macro: figure', () => {
             expect($('.ons-figure__subtitle')[0].tagName).toBe('h5');
         });
 
-        it('renders footnotes heading two levels below the title', () => {
+        it('renders footnotes heading two levels below when title and subtitle are provided', () => {
             const faker = templateFaker();
             const detailsSpy = faker.spy('details');
 
@@ -253,6 +268,7 @@ describe('macro: figure', () => {
                 {
                     ...EXAMPLE_FIGURE_BASIC,
                     headingLevel: 3,
+                    subtitle: 'A subtitle',
                     footnotes: {
                         title: 'Footnotes',
                         content: 'Some notes.',
@@ -264,7 +280,47 @@ describe('macro: figure', () => {
             expect(detailsSpy.occurrences[0].headingLevel).toBe(5);
         });
 
-        it('renders download heading two levels below the title', () => {
+        it('renders footnotes heading one level below when only title is provided', () => {
+            const faker = templateFaker();
+            const detailsSpy = faker.spy('details');
+
+            faker.renderComponent(
+                'figure',
+                {
+                    ...EXAMPLE_FIGURE_BASIC,
+                    headingLevel: 3,
+                    footnotes: {
+                        title: 'Footnotes',
+                        content: 'Some notes.',
+                    },
+                },
+                CALLER_CONTENT,
+            );
+
+            expect(detailsSpy.occurrences[0].headingLevel).toBe(4);
+        });
+
+        it('renders footnotes at the base heading level when no title or subtitle is provided', () => {
+            const faker = templateFaker();
+            const detailsSpy = faker.spy('details');
+
+            faker.renderComponent(
+                'figure',
+                {
+                    id: 'example-figure',
+                    headingLevel: 3,
+                    footnotes: {
+                        title: 'Footnotes',
+                        content: 'Some notes.',
+                    },
+                },
+                CALLER_CONTENT,
+            );
+
+            expect(detailsSpy.occurrences[0].headingLevel).toBe(3);
+        });
+
+        it('renders download heading two levels below when title and subtitle are provided', () => {
             const faker = templateFaker();
             const detailsSpy = faker.spy('details');
 
@@ -273,6 +329,7 @@ describe('macro: figure', () => {
                 {
                     ...EXAMPLE_FIGURE_BASIC,
                     headingLevel: 3,
+                    subtitle: 'A subtitle',
                     download: {
                         title: 'Downloads',
                         itemsList: [{ text: 'A file', url: '/file.csv', download: 'file' }],
@@ -283,6 +340,46 @@ describe('macro: figure', () => {
 
             expect(detailsSpy.occurrences[0].headingLevel).toBe(5);
         });
+
+        it('renders download heading one level below when only title is provided', () => {
+            const faker = templateFaker();
+            const detailsSpy = faker.spy('details');
+
+            faker.renderComponent(
+                'figure',
+                {
+                    ...EXAMPLE_FIGURE_BASIC,
+                    headingLevel: 3,
+                    download: {
+                        title: 'Downloads',
+                        itemsList: [{ text: 'A file', url: '/file.csv', download: 'file' }],
+                    },
+                },
+                CALLER_CONTENT,
+            );
+
+            expect(detailsSpy.occurrences[0].headingLevel).toBe(4);
+        });
+
+        it('renders download at the base heading level when no title or subtitle is provided', () => {
+            const faker = templateFaker();
+            const detailsSpy = faker.spy('details');
+
+            faker.renderComponent(
+                'figure',
+                {
+                    id: 'example-figure',
+                    headingLevel: 3,
+                    download: {
+                        title: 'Downloads',
+                        itemsList: [{ text: 'A file', url: '/file.csv', download: 'file' }],
+                    },
+                },
+                CALLER_CONTENT,
+            );
+
+            expect(detailsSpy.occurrences[0].headingLevel).toBe(3);
+        });
     });
 
     describe('audio description', () => {

package/components/table/_macro.njk

@@ -13,9 +13,22 @@
             "title": params.title,
             "subtitle": params.subtitle,
             "footnotes": params.footnotes,
-            "download": params.download
+            "download": params.download,
+            "caption": params.sourceNote
         })
     %}
+        {% set tableClasses = "ons-table" %}
+
+        {# If there is no source note, footnotes or downloads after the table, add a bottom margin to the table to match the previous spacing #}
+        {# If there source note, footnotes or downloads after the table, the figure component handles the extra spacing #}
+        {% if not params.sourceNote and not params.footnotes and not params.download %}
+            {% set tableClasses = tableClasses + " ons-table--bottom-space" %}
+        {% endif %}
+
+        {% if params.tableClasses %}
+            {% set tableClasses = tableClasses + " " + params.tableClasses %}
+        {% endif %}
+
         <div class="ons-table-scrollable ons-table-scrollable--on">
             <div
                 class="ons-table-scrollable__content"
@@ -25,7 +38,7 @@
             >
                 {# Uses multiple loops to set the rowspan class so that it can work in both nunjucks and jinja2 environments due to the scoping rules of each language #}
                 <table
-                    class="ons-table{{ ' ' + params.tableClasses if params.tableClasses else '' }}{% for row in params.thList %}{% for th in row.ths %}{% if th.rowspan %}{{ ' ' }}ons-table--has-rowspan{% endif %}{% endfor %}{% endfor %}{% for row in params.trs %}{% for td in row.tds %}{% if td.rowspan %}{{ ' ' }}ons-table--has-rowspan{% endif %}{% endfor %}{% endfor %}{% if variants %}{% if variants is not string %}{% for variant in variants %}{{ ' ' }}ons-table--{{ variant }}{% endfor %}{% else %}{{ ' ' }}ons-table--{{ variants }}{% endif %}{% endif %}"
+                    class="{{ tableClasses }}{% for row in params.thList %}{% for th in row.ths %}{% if th.rowspan %}{{ ' ' }}ons-table--has-rowspan{% endif %}{% endfor %}{% endfor %}{% for row in params.trs %}{% for td in row.tds %}{% if td.rowspan %}{{ ' ' }}ons-table--has-rowspan{% endif %}{% endfor %}{% endfor %}{% if variants %}{% if variants is not string %}{% for variant in variants %}{{ ' ' }}ons-table--{{ variant }}{% endfor %}{% else %}{{ ' ' }}ons-table--{{ variants }}{% endif %}{% endif %}"
                     {% if params.sortBy and 'sortable' in variants %}
                         data-aria-sort="{{ params.sortBy }}" data-aria-asc="{{ params.ariaAsc }}" data-aria-desc="{{ params.ariaDesc }}"
                     {% endif %}

package/components/table/_macro.spec.js

@@ -670,6 +670,59 @@ describe('macro: table', () => {
         });
     });
 
+    describe('bottom spacing', () => {
+        it('adds "ons-table--bottom-space" class when there are no footnotes, download or sourceNote', () => {
+            const $ = cheerio.load(renderComponent('table', EXAMPLE_TABLE));
+
+            expect($('.ons-table').hasClass('ons-table--bottom-space')).toBe(true);
+        });
+
+        it('does not add "ons-table--bottom-space" class when `sourceNote` is provided', () => {
+            const $ = cheerio.load(
+                renderComponent('table', {
+                    ...EXAMPLE_TABLE,
+                    sourceNote: 'Source: Office for National Statistics',
+                }),
+            );
+
+            expect($('.ons-table').hasClass('ons-table--bottom-space')).toBe(false);
+        });
+
+        it('does not add "ons-table--bottom-space" class when `footnotes` is provided', () => {
+            const $ = cheerio.load(
+                renderComponent('table', {
+                    ...EXAMPLE_TABLE,
+                    footnotes: {
+                        title: 'Footnotes',
+                        content: 'Data is seasonally adjusted.',
+                    },
+                }),
+            );
+
+            expect($('.ons-table').hasClass('ons-table--bottom-space')).toBe(false);
+        });
+
+        it('does not add "ons-table--bottom-space" class when `download` is provided', () => {
+            const $ = cheerio.load(
+                renderComponent('table', {
+                    ...EXAMPLE_TABLE,
+                    download: {
+                        title: 'Download this table',
+                        itemsList: [
+                            {
+                                text: 'Table data (CSV, 2KB)',
+                                url: '/data/table.csv',
+                                download: 'file',
+                            },
+                        ],
+                    },
+                }),
+            );
+
+            expect($('.ons-table').hasClass('ons-table--bottom-space')).toBe(false);
+        });
+    });
+
     describe('figure wrapper', () => {
         it('renders with a <div> root element instead of <figure>', () => {
             const $ = cheerio.load(renderComponent('table', EXAMPLE_TABLE));
@@ -765,6 +818,18 @@ describe('macro: table', () => {
             expect(figureSpy.occurrences[0].download).toEqual(download);
         });
 
+        it('passes `sourceNote` to the figure component', () => {
+            const faker = templateFaker();
+            const figureSpy = faker.spy('figure');
+
+            faker.renderComponent('table', {
+                ...EXAMPLE_TABLE,
+                sourceNote: 'Source: Office for National Statistics',
+            });
+
+            expect(figureSpy.occurrences[0].caption).toBe('Source: Office for National Statistics');
+        });
+
         it('sets `useDivForRootElement` on the figure component', () => {
             const faker = templateFaker();
             const figureSpy = faker.spy('figure');

package/components/table/_table.scss

@@ -1,7 +1,6 @@
 .ons-table {
     border-collapse: collapse;
     border-spacing: 0;
-    margin-bottom: 1rem;
     width: 100%;
 
     &__head {
@@ -241,4 +240,10 @@
             }
         }
     }
+
+    // Used when there is no source note, footnotes or downloads after the table, to match the previous bottom spacing
+    // If there source note, footnotes or downloads after the table, the figure component handles the extra spacing
+    &--bottom-space {
+        margin-bottom: 1rem;
+    }
 }

package/components/table/example-table-with-figure-fields.njk

@@ -7,6 +7,7 @@
         "title": "Population by region, mid-2023",
         "subtitle": "Estimates for England and Wales",
         "caption": "Population estimates by region",
+        "sourceNote": "Source: Office for National Statistics – Population estimates for the UK, England and Wales, Scotland and Northern Ireland",
         "ths": [
             {
                 "value": "Region"