@ons/design-system 73.8.0 → 73.9.0

package/README.md

@@ -143,6 +143,8 @@ Checkout the branch locally and run:
 
 `yarn test-visual` - This will run the same tests locally as were run in Github Actions. After they have completed the report will open in your default browser.
 
+`VR_SHARD_INDEX=0 VR_SHARD_COUNT=4 yarn test-visual` - This runs only one shard of the visual tests locally. Useful when one shard fails in CI.
+
 `yarn test-visual:approve` - This will approve the failures/diff caught by the tests.
 
 `git lfs push --all origin` - First commit the files in the normal way then run the command. This will push the new reference images to Git LFS.
@@ -176,7 +178,7 @@ yarn add @ons/design-system@next
 
 ### Publishing the stable major
 
-1. Merge `next` into `main`.
+1. Merge `next` into `main`. **Do not squash; use a regular merge commit to preserve history.**
 2. Create a normal release tag, for example: `74.0.0`.
 3. Publish the GitHub Release (not marked as a pre-release).
 

package/components/header/_header.scss

@@ -363,9 +363,7 @@
         // updates styles when js is enabled
         .ons-js-enabled & {
             position: relative;
-            left: 50%;
-            width: 100vw;
-            transform: translateX(-50%);
+            width: 100%;
             border-top: 0;
         }
     }

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('Search the ONS'),
+                                    "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'),
                                     "id": "header-search-input-label"
                                 },
                                 "searchButton": {

package/components/table/_macro.njk

@@ -8,7 +8,7 @@
             class="ons-table-scrollable__content"
             tabindex="0"
             role="region"
-            aria-label="{{ params.caption }}. {{ params.ariaLabel | default('Scrollable table') }}"
+            {% if params.ariaLabel %}aria-label="{{ params.ariaLabel }}"{% endif %}
         >
             {# 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

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: [],
 };
@@ -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', () => {

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/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 main %}
+    <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 %}