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

package/components/table/_macro.spec.js

@@ -33,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,
@@ -41,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', () => {
@@ -669,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-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"
+                }
+            ]
+        }
+    })
+}}