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

package/components/address-input/autosuggest.address.spec.js

@@ -411,6 +411,29 @@ describe('script: address-input', () => {
                     });
                 });
             });
+
+            describe('when a grouped suggestion is selected with the mouse', () => {
+                beforeEach(async () => {
+                    const options = await page.$$('.ons-autosuggest__option');
+                    await options[0].click();
+                    await setTimeout(400);
+                });
+
+                it('makes expected bucket request', async () => {
+                    expect(
+                        await apiFaker.getRequestCount(
+                            '/addresses/eq/bucket?postcode=CF14%202AA&streetname=Penlline%20Road&townname=Whitchurch&groupfullpostcodes=combo',
+                        ),
+                    ).toBe(1);
+                });
+
+                it('keeps nested suggestion entries after blur timeout', async () => {
+                    const suggestions = await page.$$eval('.ons-autosuggest__option', (nodes) =>
+                        nodes.map((node) => node.textContent.trim()),
+                    );
+                    expect(suggestions).toEqual(['197 College Road, Whitchurch, Cardiff, CF14 2AB']);
+                });
+            });
         });
 
         describe('when there is an error retrieving the address', () => {

package/components/autosuggest/autosuggest.ui.js

@@ -201,6 +201,8 @@ export default class AutosuggestUI {
     }
 
     handleFocus() {
+        this.blurring = false;
+
         if (this.allowMultiple === 'true' && this.allSelections.length && this.input.value.slice(-1) !== ' ' && this.input.value !== '') {
             this.input.value = `${this.input.value}, `;
         }
@@ -513,6 +515,7 @@ export default class AutosuggestUI {
 
     selectResult(index) {
         if (this.results.length) {
+            clearTimeout(this.blurTimeout);
             this.settingResult = true;
             const result = this.results[index || this.highlightedResultIndex || 0];
             const resultItem = result.item ?? result;

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

@@ -368,7 +368,7 @@
                                 "name": params.search.form.inputName | default('q'),
                                 "width": 'full',
                                 "label": {
-                                    "text": (params.search.form.inputLabel if params.search.form else params.searchLinks.searchNavigationInputLabel) | default('Chwilio’r SYG' if params.lang == 'cy' else 'Search the ONS'),
+                                    "text": (params.search.form.inputLabel if params.search.form else params.searchLinks.searchNavigationInputLabel) | default('Chwilio’r SYG' if currentLanguageIsoCode == 'cy' else 'Search the ONS'),
                                     "id": "header-search-input-label"
                                 },
                                 "searchButton": {

package/components/header/_macro.spec.js

@@ -1104,6 +1104,27 @@ describe('FOR: Macro: Header', () => {
                 expect($('#header-search-input-label').text().trim()).toBe('Search the ONS');
             });
         });
+        describe('WHEN: inputLabel is not provided and Welsh is the current language', () => {
+            const $ = cheerio.load(
+                renderComponent('header', {
+                    ...EXAMPLE_HEADER_SEARCH,
+                    variants: 'basic',
+                    language: {
+                        languages: [
+                            { url: '#0', isoCode: 'en', text: 'English', current: false },
+                            { url: '#0', isoCode: 'cy', text: 'Cymraeg', current: true },
+                        ],
+                    },
+                    search: {
+                        ...EXAMPLE_HEADER_SEARCH.search,
+                        form: { ...EXAMPLE_HEADER_SEARCH.search.form, inputLabel: undefined },
+                    },
+                }),
+            );
+            test('THEN: renders search input with Welsh default label', () => {
+                expect($('#header-search-input-label').text().trim()).toBe('Chwilio’r SYG');
+            });
+        });
         describe('WHEN: buttonText is provided', () => {
             const $ = cheerio.load(renderComponent('header', { ...EXAMPLE_HEADER_SEARCH, variants: 'basic' }));
 

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"