@ons/design-system 74.0.0-next.5 → 74.0.0-next.7

package/components/table/_macro.spec.js

@@ -7,6 +7,7 @@ import { mapAll } from '../../tests/helpers/cheerio';
 import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
 
 const EXAMPLE_TABLE_MINIMAL = {
+    ariaLabel: 'Example table',
     ths: [],
     trs: [],
 };
@@ -32,7 +33,7 @@ describe('macro: table', () => {
         expect(results).toHaveNoViolations();
     });
 
-    it('has the provided `id` attribute', () => {
+    it('has the provided `id` on the wrapping element', () => {
         const $ = cheerio.load(
             renderComponent('table', {
                 ...EXAMPLE_TABLE,
@@ -40,7 +41,7 @@ describe('macro: table', () => {
             }),
         );
 
-        expect($('.ons-table').attr('id')).toBe('example-table');
+        expect($('.ons-figure').attr('id')).toBe('example-table');
     });
 
     it('has additionally provided style classes', () => {
@@ -67,27 +68,15 @@ describe('macro: table', () => {
         expect($('.ons-table-scrollable__content').length).toBe(1);
     });
 
-    it('renders an appropriate `aria-label` attribute on the "content" container element', () => {
+    it('renders the `aria-label` attribute on the "content" container element', () => {
         const $ = cheerio.load(
             renderComponent('table', {
                 ...EXAMPLE_TABLE,
-                caption: 'Example table caption',
-            }),
-        );
-
-        expect($('.ons-table-scrollable__content').attr('aria-label')).toBe('Example table caption. Scrollable table');
-    });
-
-    it('renders a custom `aria-label` attribute on the "content" container element', () => {
-        const $ = cheerio.load(
-            renderComponent('table', {
-                ...EXAMPLE_TABLE,
-                caption: 'Example table caption',
                 ariaLabel: 'Special table',
             }),
         );
 
-        expect($('.ons-table-scrollable__content').attr('aria-label')).toBe('Example table caption. Special table');
+        expect($('.ons-table-scrollable__content').attr('aria-label')).toBe('Special table');
     });
 
     describe('Vertical Alignment', () => {
@@ -680,4 +669,174 @@ describe('macro: table', () => {
             expect($('.ons-table__caption').hasClass('ons-u-vh')).toBe(true);
         });
     });
+
+    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));
+
+            expect($('.ons-figure')[0].tagName).toBe('div');
+        });
+
+        it('passes `title` to the figure component', () => {
+            const faker = templateFaker();
+            const figureSpy = faker.spy('figure');
+
+            faker.renderComponent('table', {
+                ...EXAMPLE_TABLE,
+                title: 'Population by region',
+            });
+
+            expect(figureSpy.occurrences[0].title).toBe('Population by region');
+        });
+
+        it('passes `subtitle` to the figure component', () => {
+            const faker = templateFaker();
+            const figureSpy = faker.spy('figure');
+
+            faker.renderComponent('table', {
+                ...EXAMPLE_TABLE,
+                subtitle: 'Mid-year estimates, 2023',
+            });
+
+            expect(figureSpy.occurrences[0].subtitle).toBe('Mid-year estimates, 2023');
+        });
+
+        it('passes `headingLevel` to the figure component', () => {
+            const faker = templateFaker();
+            const figureSpy = faker.spy('figure');
+
+            faker.renderComponent('table', {
+                ...EXAMPLE_TABLE,
+                headingLevel: 3,
+            });
+
+            expect(figureSpy.occurrences[0].headingLevel).toBe(3);
+        });
+
+        it('passes `figureNumber` to the figure component', () => {
+            const faker = templateFaker();
+            const figureSpy = faker.spy('figure');
+
+            faker.renderComponent('table', {
+                ...EXAMPLE_TABLE,
+                figureNumber: 'Table 1',
+            });
+
+            expect(figureSpy.occurrences[0].figureNumber).toBe('Table 1');
+        });
+
+        it('passes `footnotes` to the figure component', () => {
+            const faker = templateFaker();
+            const figureSpy = faker.spy('figure');
+
+            const footnotes = {
+                title: 'Footnotes',
+                content: 'Data is seasonally adjusted.',
+            };
+
+            faker.renderComponent('table', {
+                ...EXAMPLE_TABLE,
+                footnotes,
+            });
+
+            expect(figureSpy.occurrences[0].footnotes).toEqual(footnotes);
+        });
+
+        it('passes `download` to the figure component', () => {
+            const faker = templateFaker();
+            const figureSpy = faker.spy('figure');
+
+            const download = {
+                title: 'Download this table',
+                itemsList: [
+                    {
+                        text: 'Table data (CSV, 2KB)',
+                        url: '/data/table.csv',
+                        download: 'file',
+                    },
+                ],
+            };
+
+            faker.renderComponent('table', {
+                ...EXAMPLE_TABLE,
+                download,
+            });
+
+            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');
+
+            faker.renderComponent('table', EXAMPLE_TABLE);
+
+            expect(figureSpy.occurrences[0].useDivForRootElement).toBe(true);
+        });
+    });
 });

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-basic-no-caption.njk

@@ -0,0 +1,46 @@
+{% from "components/table/_macro.njk" import onsTable %}
+{{
+    onsTable({
+        "ariaLabel": "Basic table example",
+        "id": "basic-table",
+        "ths": [
+            {
+                "value": "Column A"
+            },
+            {
+                "value": "Column B"
+            },
+            {
+                "value": "Column C"
+            }
+        ],
+        "trs": [
+            {
+                "tds": [
+                    {
+                        "value": "Cell A1"
+                    },
+                    {
+                        "value": "Cell B1"
+                    },
+                    {
+                        "value": "Cell C1"
+                    }
+                ]
+            },
+            {
+                "tds": [
+                    {
+                        "value": "Cell A2"
+                    },
+                    {
+                        "value": "Cell B2"
+                    },
+                    {
+                        "value": "Cell C2"
+                    }
+                ]
+            }
+        ]
+    })
+}}

package/components/table/example-table-basic-visually-hidden-caption.njk

@@ -0,0 +1,47 @@
+{% from "components/table/_macro.njk" import onsTable %}
+{{
+    onsTable({
+        "caption": "A basic table with a visually hidden caption",
+        "hideCaption": true,
+        "id": "basic-table",
+        "ths": [
+            {
+                "value": "Column A"
+            },
+            {
+                "value": "Column B"
+            },
+            {
+                "value": "Column C"
+            }
+        ],
+        "trs": [
+            {
+                "tds": [
+                    {
+                        "value": "Cell A1"
+                    },
+                    {
+                        "value": "Cell B1"
+                    },
+                    {
+                        "value": "Cell C1"
+                    }
+                ]
+            },
+            {
+                "tds": [
+                    {
+                        "value": "Cell A2"
+                    },
+                    {
+                        "value": "Cell B2"
+                    },
+                    {
+                        "value": "Cell C2"
+                    }
+                ]
+            }
+        ]
+    })
+}}

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

@@ -0,0 +1,86 @@
+{% from "components/table/_macro.njk" import onsTable %}
+{{
+    onsTable({
+        "id": "table-with-figure-fields",
+        "headingLevel": 3,
+        "figureNumber": "Table 1",
+        "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"
+            },
+            {
+                "value": "Population",
+                "numeric": true
+            },
+            {
+                "value": "Change (%)",
+                "numeric": true
+            }
+        ],
+        "trs": [
+            {
+                "tds": [
+                    {
+                        "value": "North East"
+                    },
+                    {
+                        "value": "2,647,000",
+                        "numeric": true
+                    },
+                    {
+                        "value": "0.3",
+                        "numeric": true
+                    }
+                ]
+            },
+            {
+                "tds": [
+                    {
+                        "value": "North West"
+                    },
+                    {
+                        "value": "7,417,000",
+                        "numeric": true
+                    },
+                    {
+                        "value": "0.5",
+                        "numeric": true
+                    }
+                ]
+            },
+            {
+                "tds": [
+                    {
+                        "value": "South East"
+                    },
+                    {
+                        "value": "9,294,000",
+                        "numeric": true
+                    },
+                    {
+                        "value": "0.7",
+                        "numeric": true
+                    }
+                ]
+            }
+        ],
+        "footnotes": {
+            "title": "Footnotes",
+            "content": "Figures are rounded to the nearest thousand. Percentage change is compared with mid-2022 estimates."
+        },
+        "download": {
+            "title": "Download this table",
+            "itemsList": [
+                {
+                    "text": "Population by region (CSV format, 1KB)",
+                    "url": "/data/population-by-region.csv",
+                    "download": "file"
+                }
+            ]
+        }
+    })
+}}

package/components/table/table.spec.js

@@ -5,6 +5,7 @@ describe('script: table', () => {
         // Construct a table with 15 columns and 15 rows with long labels.
         const params = {
             variants: ['scrollable'],
+            ariaLabel: 'Example table',
             ths: Array.from({ length: 15 }, (_, i) => ({ value: `Column ${i + 1}` })),
             trs: [
                 {
@@ -44,6 +45,7 @@ describe('script: table', () => {
     describe('variant: sortable', () => {
         const params = {
             variants: ['sortable'],
+            ariaLabel: 'Example table',
             sortBy: 'Sort by',
             ariaAsc: 'ascending',
             ariaDesc: 'descending',

package/components/table-of-contents/_macro.njk

@@ -15,6 +15,8 @@
 
         <nav class="ons-table-of-contents" aria-label="{{ params.ariaLabel | default('Table of contents') }}">
             <h2 class="ons-table-of-contents__title ons-u-fs-r--b ons-u-mb-s">{{ params.title }}</h2>
+            {% set element = 'ol' if params.ordered else 'ul' %}
+            {% set variant = null if params.ordered else 'dashed' %}
             {% if params.lists %}
                 {% for list in params.lists %}
                     {% if list.listHeading %}
@@ -24,9 +26,9 @@
                     {% endif %}
                     {{
                         onsList({
-                            "element": 'ol',
+                            "element": element,
                             "classes": 'ons-u-mb-l',
-                            "variants": 'dashed',
+                            "variants": variant,
                             "itemsList": list.itemsList
                         })
                     }}
@@ -34,9 +36,9 @@
             {% elif params.itemsList %}
                 {{
                     onsList({
-                        "element": 'ol',
+                        "element": element,
                         "classes": 'ons-u-mb-l',
-                        "variants": 'dashed',
+                        "variants": variant,
                         "itemsList": params.itemsList
                     })
                 }}

package/components/table-of-contents/_macro.spec.js

@@ -160,12 +160,29 @@ describe('macro: table-of-contents', () => {
             faker.renderComponent('table-of-contents', EXAMPLE_TABLE_OF_CONTENTS_SINGLE);
 
             expect(listsSpy.occurrences[0]).toEqual({
-                element: 'ol',
+                element: 'ul',
                 classes: 'ons-u-mb-l',
                 variants: 'dashed',
                 itemsList: EXAMPLE_TABLE_OF_CONTENTS_SINGLE.itemsList,
             });
         });
+
+        it('outputs `lists` component as an ordered list when `ordered` is `true`', () => {
+            const faker = templateFaker();
+            const listsSpy = faker.spy('list');
+
+            faker.renderComponent('table-of-contents', {
+                ...EXAMPLE_TABLE_OF_CONTENTS_SINGLE,
+                ordered: true,
+            });
+
+            expect(listsSpy.occurrences[0]).toEqual({
+                element: 'ol',
+                classes: 'ons-u-mb-l',
+                variants: null,
+                itemsList: EXAMPLE_TABLE_OF_CONTENTS_SINGLE.itemsList,
+            });
+        });
     });
 
     describe('multiple lists', () => {
@@ -199,18 +216,41 @@ describe('macro: table-of-contents', () => {
             faker.renderComponent('table-of-contents', EXAMPLE_TABLE_OF_CONTENTS_MULTIPLE);
 
             expect(listsSpy.occurrences[0]).toEqual({
-                element: 'ol',
+                element: 'ul',
                 classes: 'ons-u-mb-l',
                 variants: 'dashed',
                 itemsList: EXAMPLE_TABLE_OF_CONTENTS_MULTIPLE.lists[0].itemsList,
             });
             expect(listsSpy.occurrences[1]).toEqual({
-                element: 'ol',
+                element: 'ul',
                 classes: 'ons-u-mb-l',
                 variants: 'dashed',
                 itemsList: EXAMPLE_TABLE_OF_CONTENTS_MULTIPLE.lists[1].itemsList,
             });
         });
+
+        it('outputs `lists` component for each list as ordered lists when `ordered` is `true`', () => {
+            const faker = templateFaker();
+            const listsSpy = faker.spy('list');
+
+            faker.renderComponent('table-of-contents', {
+                ...EXAMPLE_TABLE_OF_CONTENTS_MULTIPLE,
+                ordered: true,
+            });
+
+            expect(listsSpy.occurrences[0]).toEqual({
+                element: 'ol',
+                classes: 'ons-u-mb-l',
+                variants: null,
+                itemsList: EXAMPLE_TABLE_OF_CONTENTS_MULTIPLE.lists[0].itemsList,
+            });
+            expect(listsSpy.occurrences[1]).toEqual({
+                element: 'ol',
+                classes: 'ons-u-mb-l',
+                variants: null,
+                itemsList: EXAMPLE_TABLE_OF_CONTENTS_MULTIPLE.lists[1].itemsList,
+            });
+        });
     });
 
     describe('related links and button', () => {

package/components/table-of-contents/example-table-of-contents-ordered.njk

@@ -0,0 +1,64 @@
+{% from "components/table-of-contents/_macro.njk" import onsTableOfContents %}
+
+{{-
+    onsTableOfContents({
+        "title": 'Contents',
+        "ariaLabel": 'Pages in this guide',
+        "skipLink": {
+            "url": "#0",
+            "text": 'Skip to guide content'
+        },
+        "ordered": true,
+        "lists": [
+            {
+                "itemsList": [
+                    {
+                        "url": '#0',
+                        "text": 'Overview',
+                        "current": true
+                    },
+                    {
+                        "url": '#0',
+                        "text": 'Who should take part and why'
+                    },
+                    {
+                        "url": '#0',
+                        "text": 'How your information is used'
+                    },
+                    {
+                        "url": '#0',
+                        "text": 'The 2019 Census Rehearsal'
+                    },
+                    {
+                        "url": '#0',
+                        "text": 'Further information'
+                    },
+                    {
+                        "url": '#0',
+                        "text": 'Online census'
+                    },
+                    {
+                        "url": '#0',
+                        "text": 'Who should take part and why'
+                    },
+                    {
+                        "url": '#0',
+                        "text": 'How your information is used'
+                    },
+                    {
+                        "url": '#0',
+                        "text": 'The 2019 Census Rehearsal'
+                    },
+                    {
+                        "url": '#0',
+                        "text": 'Further information'
+                    },
+                    {
+                        "url": '#0',
+                        "text": 'Online census'
+                    }
+                ]
+            }
+        ]
+    })
+-}}