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

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'
+                    }
+                ]
+            }
+        ]
+    })
+-}}

package/components/table-of-contents/example-table-of-contents-sticky-full-page-ordered.njk

@@ -0,0 +1,156 @@
+---
+title: 'Example: Table of contents on full page'
+layout: ~
+---
+
+{% from "components/table-of-contents/_macro.njk" import onsTableOfContents %}
+{% extends "layout/_template.njk" %}
+{%
+    set pageConfig = {
+        "header": {
+            "title": "What is the census?"
+        },
+        "breadcrumbs": {
+            "ariaLabel": 'Back',
+            "itemsList": [
+                {
+                    "url": '/',
+                    "id": "back-example-feedback-form-error",
+                    "text": 'Back',
+                    "attributes": {
+                        "data-attribute": "Example attribute"
+                    }
+                }
+            ]
+        },
+        "footer": {
+            "oglLink": {
+                "pre": 'All content is available under the',
+                "link": 'Open Government Licence v3.0',
+                "url": 'https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/',
+                "post": ', except where otherwise stated'
+            }
+        }
+    }
+%}
+
+{% block mainContent %}
+    <div class="ons-page__container ons-container">
+        <div class="ons-grid ons-js-table-of-contents-container">
+            <div class="ons-grid__col ons-grid__col--sticky@m ons-col-4@m">
+                {{
+                    onsTableOfContents({
+                        "title": 'Contents',
+                        "ariaLabel": 'Sections in this page',
+                        "ordered": true,
+                        "itemsList": [
+                            {
+                                "url": '#section1',
+                                "text": 'What is the census?'
+                            },
+                            {
+                                "url": '#section2',
+                                "text": 'The online census has now closed'
+                            },
+                            {
+                                "url": '#section3',
+                                "text": 'What happens after Census Day'
+                            },
+                            {
+                                "url": '#section4',
+                                "text": 'The census in Northern Ireland and Scotland'
+                            },
+                            {
+                                "url": '#section5',
+                                "text": 'The last census'
+                            }
+                        ]
+                    })
+                }}
+            </div>
+            <div class="ons-grid__col ons-col-7@m ons-push-1@m">
+                <section id="section1">
+                    <h2>1. What is the census?</h2>
+                    <p>
+                        The census is a survey that happens every 10 years and gives us a picture of all the people and households in
+                        England and Wales.
+                    </p>
+
+                    <p>
+                        Your answers to the census questions will help organisations make decisions on planning and funding public services
+                        in your area, including transport, education and healthcare.
+                    </p>
+                </section>
+                <section id="section2">
+                    <h2>2. The online census has now closed</h2>
+                    <p>Census Day was on Sunday 21 March 2021.</p>
+
+                    <p>
+                        If you still have a paper census questionnaire, fill it in as soon as you can and return it to FREEPOST, Census
+                        2021.
+                    </p>
+                </section>
+                <section id="section3">
+                    <h2>3. What happens after Census Day</h2>
+                    <p>
+                        Two follow-up surveys, the <a href="#0">Census Coverage Survey</a> and the <a href="#0">Census Quality Survey</a>,
+                        help to improve the quality and accuracy of the census results.
+                    </p>
+
+                    <p>
+                        Over the next year, we work hard to process the answers from all the census questionnaires. This is so that we can
+                        publish the initial Census 2021 findings one year after the census and the main releases two years after the census.
+                    </p>
+
+                    <p>
+                        To make sure the Census 2021 statistics we publish meet the needs of those who use them, we also run an outputs
+                        consultation.
+                    </p>
+                </section>
+                <section id="section4">
+                    <h2>4. The census in Northern Ireland and Scotland</h2>
+                    <p>The Office for National Statistics (ONS) runs the census in England and Wales.</p>
+
+                    <p>
+                        If you live in Northern Ireland, visit the Northern Ireland Statistics Agency (NISRA) census website to find out
+                        about the census for Northern Ireland.
+                    </p>
+
+                    <p>
+                        If you live in Scotland, visit the National Records of Scotland census website to find out how to take part in the
+                        census for Scotland.
+                    </p>
+                </section>
+                <section id="section5">
+                    <h2>5. The last census</h2>
+                    <p>
+                        The last census took place in 2011. Many people and organisations used information from the 2011 Census in a variety
+                        of ways.
+                    </p>
+
+                    <p>
+                        For example, Bristol City Council used it to inform decisions on how to fund local housing improvements. It was also
+                        essential for the charity Redbridge Council for Voluntary Services to help people from ethnic minority groups learn
+                        more about dementia.
+                    </p>
+
+                    <p>
+                        To read more about the benefits that information from the 2011 Census helped to create, visit the Office for
+                        National Statistics (ONS) website.
+                    </p>
+                    <p>
+                        The Census Coverage Survey (CCS) was a short, separate survey that we at the Office for National Statistics (ONS)
+                        started six to eight weeks after Census Day.
+                    </p>
+
+                    <p>
+                        The CCS helps make sure everyone is counted and our census results are as accurate as possible. It asked similar
+                        questions to the main census, just fewer of them, at addresses in a selection of postcodes across England and Wales.
+                    </p>
+
+                    <p>The CCS has now closed.</p>
+                </section>
+            </div>
+        </div>
+    </div>
+{% endblock %}

package/components/table-of-contents/example-table-of-contents-sticky-full-page.njk

@@ -34,7 +34,7 @@ layout: ~
     }
 %}
 
-{% block main %}
+{% block mainContent %}
     <div class="ons-page__container ons-container">
         <div class="ons-grid ons-js-table-of-contents-container">
             <div class="ons-grid__col ons-grid__col--sticky@m ons-col-4@m">

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

@@ -6,7 +6,7 @@ describe('script: table-of-contents', () => {
     beforeEach(async () => {
         await setTestPage(
             '/test',
-            /* eslint-disable indent */
+
             `
       <div class="ons-page__container ons-container">
         <div class="ons-grid ons-js-table-of-contents-container">
@@ -47,7 +47,6 @@ describe('script: table-of-contents', () => {
         </div>
       </div>
       `,
-            /* eslint-enable indent */
         );
     });
 
@@ -68,7 +67,7 @@ describe('script: table-of-contents-fixed-position', () => {
     beforeEach(async () => {
         await setTestPage(
             '/test',
-            /* eslint-disable indent */
+
             `
         <div class="ons-page__container ons-container">
           <div class="ons-grid ons-js-table-of-contents-container">
@@ -146,8 +145,8 @@ describe('script: table-of-contents-fixed-position', () => {
           </div>
         </div>
       `,
-            /* eslint-enable indent */
-            'main',
+
+            'mainContent',
         );
     });