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

package/README.md

@@ -143,11 +143,23 @@ 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.
+
+### Handling VR test failures
+
+If the VR tests fail locally, you'll see an error starting with `Error: docker run --rm -i --add-host=host.docker.internal:host-gateway...`
+
+`npx http-server backstop_data -p 8008 -o /html_report/` - View the report in your browser.
+
+### Approving VR test reference image changes
+
 `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.
+Commit and approve the file changes in the normal way.
+
+`git lfs push --all origin` - This will push the new reference images to Git LFS.
 
-You can then commit and push the updated references and your changes to your branch. The test images that would have been created when you ran `yarn test-visual` are gitignored and the new references images will be pushed to Git LFS.
+You can then push the updated references and your changes to your branch. The test images that would have been created when you ran `yarn test-visual` are gitignored and the new references images will be pushed to Git LFS.
 
 If your local tests are failing but you have approved them, run `yarn test-visual:reference`. This will update the reference images locally on your machine.
 
@@ -176,7 +188,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/access-code/example-access-code-error.njk

@@ -14,7 +14,7 @@ layout: ~
     }
 %}
 
-{% block main %}
+{% block mainContent %}
     {%
         call onsPanel({
             "title": "There is a problem with this page",
@@ -76,7 +76,7 @@ layout: ~
                 "variant": "warn"
             })
         %}
-            Someone in your household must still complete a study using this household access code
+            <p>Someone in your household must still complete a study using this household access code</p>
         {% endcall %}
     {% endset %}
 

package/components/access-code/example-access-code.njk

@@ -16,7 +16,7 @@ layout: ~
     }
 %}
 
-{% block main %}
+{% block mainContent %}
     <h1 class="ons-u-mt-2xl">Start study</h1>
 
     {{
@@ -53,7 +53,7 @@ layout: ~
                 "variant": "warn"
             })
         %}
-            Someone in your household must still complete a study using this household access code
+            <p>Someone in your household must still complete a study using this household access code</p>
         {% endcall %}
     {% endset %}
 

package/components/address-input/_macro.njk

@@ -19,7 +19,6 @@
                                     "text": params.organisation.label
                                 },
                                 "classes": "ons-js-address-organisation",
-                                "width": "20@m",
                                 "name": params.id + "-organisation",
                                 "error": params.organisation.error
                             })
@@ -34,7 +33,6 @@
                                     "text": params.line1.label
                                 },
                                 "classes": "ons-js-address-line1",
-                                "width": "20@m",
                                 "name": params.id + "-line1",
                                 "error": params.line1.error
                             })
@@ -49,7 +47,6 @@
                                     "text": params.line2.label
                                 },
                                 "classes": "ons-js-address-line2",
-                                "width": "20@m",
                                 "name": params.id + "-line2",
                                 "error": params.line2.error
                             })
@@ -165,9 +162,12 @@
                         })
                     }}
                     {% if params.manualLinkText %}
-                        <a href="{{ params.manualLinkUrl }}" class="ons-js-address-manual-btn ons-u-mt-s ons-u-dib"
-                            >{{ params.manualLinkText }}</a
-                        >
+                        {# p tag ensures reading width is applied #}
+                        <p class="ons-u-mb-no">
+                            <a href="{{ params.manualLinkUrl }}" class="ons-js-address-manual-btn ons-u-mt-s ons-u-dib"
+                                >{{ params.manualLinkText }}</a
+                            >
+                        </p>
                     {% endif %}
                 </div>
             {% endif %}

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

@@ -176,7 +176,6 @@ describe('FOR: Macro: Address-input', () => {
                         text: 'Organisation name',
                     },
                     value: 'Example Organisation',
-                    width: '20@m',
                     error: { text: 'Server error: organisation name' },
                 });
             });
@@ -191,7 +190,6 @@ describe('FOR: Macro: Address-input', () => {
                         text: 'Address line 1',
                     },
                     value: 'Flat 12345',
-                    width: '20@m',
                     error: { text: 'Server error: address line 1' },
                 });
             });
@@ -207,7 +205,6 @@ describe('FOR: Macro: Address-input', () => {
                         text: 'Address line 2',
                     },
                     value: '12345 The Road',
-                    width: '20@m',
                     error: { text: 'Server error: address line 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/address-output/_macro.njk

@@ -1,5 +1,5 @@
 {% macro onsAddressOutput(params) %}
-    <div class="ons-address-output{{ ' ' + params.classes if params.classes else '' }}">
+    <div class="ons-address-output ons-u-reading-width{{ ' ' + params.classes if params.classes else '' }}">
         <p class="ons-address-output__lines">
             {% if params.unit %}
                 <span class="ons-address-output__unit">{{ params.unit }}</span><br />

package/components/announcement-banner/_announcement-banner.scss

@@ -13,6 +13,11 @@
         background-color: var(--ons-color-gov-red);
     }
 
+    &__title,
+    &__description {
+        @include no-reading-width;
+    }
+
     &__link {
         color: var(--ons-color-text-inverse);
 

package/components/autosuggest/_autosuggest.scss

@@ -26,6 +26,8 @@
     }
 
     &__results-title {
+        @include reading-width;
+
         background: var(--ons-color-grey-15);
         border-bottom: 1px solid var(--ons-color-input-border);
         padding: 0.25rem 0.5rem;
@@ -41,6 +43,12 @@
         }
     }
 
+    &__option-text {
+        @include reading-width;
+
+        display: block;
+    }
+
     &__option {
         cursor: pointer;
         margin: 0;

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}, `;
         }
@@ -382,7 +384,7 @@ export default class AutosuggestUI {
                             innerHTML +
                             `<span class="ons-autosuggest__category ons-u-lighter ons-u-fs-s ons-u-db">${resultItem.category}</span>`;
                     }
-                    listElement.innerHTML = innerHTML;
+                    listElement.innerHTML = `<span class="ons-autosuggest__option-text">${innerHTML}</span>`;
                     listElement.addEventListener('click', () => {
                         this.selectResult(index);
                     });
@@ -399,7 +401,7 @@ export default class AutosuggestUI {
                 const listElement = document.createElement('li');
                 listElement.className = `${classAutosuggestOption} ${classAutosuggestOptionMoreResults}`;
                 listElement.setAttribute('aria-hidden', 'true');
-                listElement.innerHTML = DOMPurify.sanitize(this.moreResults);
+                listElement.innerHTML = `<span class="ons-autosuggest__option-text">${DOMPurify.sanitize(this.moreResults)}</span>`;
                 this.listbox.appendChild(listElement);
             }
 
@@ -438,11 +440,14 @@ export default class AutosuggestUI {
             message = this.typeMore;
             this.setAriaStatus(message);
             this.listbox.innerHTML = DOMPurify.sanitize(
-                `<li class="${classAutosuggestOption} ${classAutosuggestOptionNoResults}">${message}</li>`,
+                `<li class="${classAutosuggestOption} ${classAutosuggestOptionNoResults}"><span class="ons-autosuggest__option-text">${message}</span></li>`,
             );
         } else if (status > 400 || status === '') {
             const sanitizedHref = DOMPurify.sanitize(window.location.href);
-            message = this.errorAPI + (this.errorAPILinkText ? ' <a href="' + sanitizedHref + '">' + this.errorAPILinkText + '</a>.' : '');
+            message =
+                '<p>' +
+                this.errorAPI +
+                (this.errorAPILinkText ? ' <a href="' + sanitizedHref + '">' + this.errorAPILinkText + '</a>.</p>' : '');
             let ariaMessage = this.errorAPI + (this.errorAPILinkText ? ' ' + this.errorAPILinkText : '');
 
             this.input.setAttribute('disabled', true);
@@ -457,7 +462,7 @@ export default class AutosuggestUI {
         } else {
             message = this.noResults;
             this.listbox.innerHTML = DOMPurify.sanitize(
-                `<li class="${classAutosuggestOption} ${classAutosuggestOptionNoResults}">${message}</li>`,
+                `<li class="${classAutosuggestOption} ${classAutosuggestOptionNoResults}"><span class="ons-autosuggest__option-text">${message}</span></li>`,
             );
         }
     }
@@ -513,6 +518,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/back-to-top/_back-to-top.scss

@@ -3,6 +3,13 @@
         margin-left: 0.25rem;
     }
 
+    // This element also gets a margin-left value set in the JS to match the content left spacing
+    &__content {
+        @include reading-width;
+
+        display: inline-block;
+    }
+
     &__enabled {
         background: none;
         width: fit-content;

package/components/back-to-top/_macro.njk

@@ -3,7 +3,7 @@
 {% macro onsBackToTop(params) %}
     <div class="ons-back-to-top ons-js-back-to-top ons-back-to-top__enabled">
         <a href="#{{ params.anchor | default('top') }}" class="ons-back-to-top__link">
-            <span>
+            <span class="ons-back-to-top__content">
                 {{-
                     onsIcon({
                         "iconType": 'arrow-up',

package/components/back-to-top/example-full-page-back-to-top.njk

@@ -30,7 +30,7 @@ layout: ~
     }
 %}
 
-{% block main %}
+{% block mainContent %}
     <h1 class="ons-u-fs-2xl">
         <span class="ons-u-fs-m ons-u-db ons-u-mb-2xs ons-u-lighter">Press releases</span>
         <span class="ons-u-vh">: </span>

package/components/breadcrumbs/_breadcrumbs.scss

@@ -3,7 +3,7 @@ $breadcrumb-chevron-height: 0.65rem;
 .ons-breadcrumbs-wrapper {
     position: relative;
     z-index: 10;
-    margin-bottom: -2rem;
+    margin-bottom: -1rem;
     &--grey {
         background-color: var(--ons-color-banner-bg);
     }
@@ -14,9 +14,9 @@ $breadcrumb-chevron-height: 0.65rem;
 
     &--navy-blue {
         background-color: var(--ons-color-navy-blue-light);
-        margin-bottom: -1.75rem;
+        margin-bottom: -0.75rem;
         @include mq(l) {
-            margin-bottom: -3.25rem;
+            margin-bottom: -2.25rem;
         }
     }
 
@@ -48,15 +48,12 @@ $breadcrumb-chevron-height: 0.65rem;
     &--pale-blue {
         background-color: var(--ons-color-pale-blue);
     }
-    .ons-breadcrumbs {
-        padding: 1rem;
-    }
 }
 
 .ons-breadcrumbs {
     align-items: center;
     display: flex;
-    padding: 1rem 0;
+    padding: 1rem 0 0;
 
     &__items {
         margin: 0;

package/components/breadcrumbs/_macro.njk

@@ -1,33 +1,37 @@
 {% from "components/icon/_macro.njk" import onsIcon %}
 {% macro onsBreadcrumbs(params) %}
     {% set breadcrumbs %}
-        <nav
-            class="ons-breadcrumbs{{ ' ons-container' if params.variant }}{{ ' ' + params.classes if params.classes else '' }}"
-            aria-label="{{ params.ariaLabel | default('Breadcrumbs') }}"
-            {% if params.id %}id="{{ params.id }}"{% endif %}
+        <div
+            class="ons-container{{ ' ons-container--full-width' if params.fullWidth else "" }}{{ ' ons-container--wide' if params.wide else "" }}"
         >
-            <ol class="ons-breadcrumbs__items ons-u-fs-s">
-                {%- for item in params.itemsList -%}
-                    <li
-                        class="ons-breadcrumbs__item{{ ' ' + item.itemClasses if item.itemClasses else '' }}"
-                        id="breadcrumb-{{ loop.index }}"
-                    >
-                        <a
-                            class="ons-breadcrumbs__link{{ ' ' + item.linkClasses if item.linkClasses else '' }}"
-                            href="{% if not isDesignSystemExample %}{{ item.url }}{% else %}#0{% endif %}"
-                            {% if item.id %}{{ ' ' }}id='{{ item.id }}'{% endif %}
-                            {% if item.attributes %}{% for attribute, value in (item.attributes.items() if item.attributes is mapping and item.attributes.items else item.attributes) %}{{ ' ' }}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
-                            >{{ item.text }}</a
+            <nav
+                class="ons-breadcrumbs{{ ' ' + params.classes if params.classes else '' }}"
+                aria-label="{{ params.ariaLabel | default('Breadcrumbs') }}"
+                {% if params.id %}id="{{ params.id }}"{% endif %}
+            >
+                <ol class="ons-breadcrumbs__items ons-u-fs-s">
+                    {%- for item in params.itemsList -%}
+                        <li
+                            class="ons-breadcrumbs__item{{ ' ' + item.itemClasses if item.itemClasses else '' }}"
+                            id="breadcrumb-{{ loop.index }}"
                         >
-                        {{-
-                            onsIcon({
-                                "iconType": "chevron"
-                            })
-                        -}}
-                    </li>
-                {%- endfor -%}
-            </ol>
-        </nav>
+                            <a
+                                class="ons-breadcrumbs__link{{ ' ' + item.linkClasses if item.linkClasses else '' }}"
+                                href="{% if not isDesignSystemExample %}{{ item.url }}{% else %}#0{% endif %}"
+                                {% if item.id %}{{ ' ' }}id='{{ item.id }}'{% endif %}
+                                {% if item.attributes %}{% for attribute, value in (item.attributes.items() if item.attributes is mapping and item.attributes.items else item.attributes) %}{{ ' ' }}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
+                                >{{ item.text }}</a
+                            >
+                            {{-
+                                onsIcon({
+                                    "iconType": "chevron"
+                                })
+                            -}}
+                        </li>
+                    {%- endfor -%}
+                </ol>
+            </nav>
+        </div>
     {% endset %}
     {% if params.variant %}
         <div class="ons-breadcrumbs-wrapper ons-breadcrumbs-wrapper--{{ params.variant }}">{{ breadcrumbs | safe }}</div>

package/components/breadcrumbs/_macro.spec.js

@@ -133,6 +133,45 @@ describe('FOR: Macro: Breadcrumbs', () => {
         });
     });
 
+    describe('GIVEN: Params: fullWidth', () => {
+        describe('WHEN: fullWidth is not provided', () => {
+            const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_REQUIRED_PARAMS));
+            test('THEN: renders container without full-width class', () => {
+                expect($('.ons-container').hasClass('ons-container--full-width')).toBe(false);
+            });
+        });
+        describe('WHEN: fullWidth is set to true', () => {
+            const $ = cheerio.load(
+                renderComponent('breadcrumbs', {
+                    ...EXAMPLE_BREADCRUMBS_REQUIRED_PARAMS,
+                    fullWidth: true,
+                }),
+            );
+            test('THEN: renders container with full-width class', () => {
+                expect($('.ons-container').hasClass('ons-container--full-width')).toBe(true);
+            });
+        });
+    });
+    describe('GIVEN: Params: wide', () => {
+        describe('WHEN: wide is not provided', () => {
+            const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_REQUIRED_PARAMS));
+            test('THEN: renders container without wide class', () => {
+                expect($('.ons-container').hasClass('ons-container--wide')).toBe(false);
+            });
+        });
+        describe('WHEN: wide is set to true', () => {
+            const $ = cheerio.load(
+                renderComponent('breadcrumbs', {
+                    ...EXAMPLE_BREADCRUMBS_REQUIRED_PARAMS,
+                    wide: true,
+                }),
+            );
+            test('THEN: renders container with wide class', () => {
+                expect($('.ons-container').hasClass('ons-container--wide')).toBe(true);
+            });
+        });
+    });
+
     describe('GIVEN: Params: variant', () => {
         describe('WHEN: variant is provided', () => {
             const $ = cheerio.load(

package/components/breadcrumbs/example-breadcrumbs-wide.njk

@@ -0,0 +1,52 @@
+---
+title: 'Example: Breadcrumbs override wide'
+layout: ~
+---
+
+{% from "components/hero/_macro.njk" import onsHero %}
+{% from "components/breadcrumbs/_macro.njk" import onsBreadcrumbs %}
+{% extends "layout/_template.njk" %}
+{%
+    set pageConfig = {
+        "header": {
+            "title": 'Service title',
+            "mastheadLogoUrl": '#0',
+            "titleUrl": '#0',
+            "serviceLinks": {
+                "id": "service-links-internal",
+                "ariaLabel": 'Services menu',
+                "ariaListLabel": 'Menu',
+                "toggleServicesButton": {
+                    "text": 'Account',
+                    "ariaLabel": 'Toggle services menu'
+                },
+                "itemsList": [
+                    {
+                        "text": "Jacky Turner",
+                        "iconType": 'person'
+                    },
+                    {
+                        "text": "Sign out",
+                        "url": "#0"
+                    }
+                ]
+            }
+        },
+        "wide": true
+    }
+%}
+
+{% block breadcrumbs %}
+    {{
+        onsBreadcrumbs({
+            "wide": true,
+            "ariaLabel": 'Breadcrumbs',
+            "itemsList": [
+                {
+                    "url": '/',
+                    "text": 'Home'
+                }
+            ]
+        })
+    }}
+{% endblock %}

package/components/char-check-limit/_macro.njk

@@ -1,16 +1,18 @@
 {% macro onsCharLimit(params) %}
-    {% if params.variant == "check" %}
-        {% set content = caller() %}
-        <span class="ons-js-char-check-input">{{ content | safe }}</span>
-    {% endif %}
-    <span
-        id="{{ params.id }}"
-        class="ons-input__limit ons-u-fs-s--b ons-u-d-no ons-u-mt-2xs"
-        data-count-type="{{ params.variant if params.variant == 'word' else 'char' }}"
-        data-message-singular="{% if params.variant == 'word' %}{{ params.wordCountSingular }}{% else %}{{ params.charCountSingular }}{% endif %}"
-        data-message-plural="{% if params.variant == 'word' %}{{ params.wordCountPlural }}{% else %}{{ params.charCountPlural }}{% endif %}"
-        data-message-over-limit-singular="{% if params.variant == 'word' %}{{ params.wordCountOverLimitSingular | default("You have exceeded the word limit by {x} word") }}{% else %}{{ params.charCountOverLimitSingular | default("You have exceeded the character limit by {x} character") }}{% endif %}"
-        data-message-over-limit-plural="{% if params.variant == 'word' %}{{ params.wordCountOverLimitPlural | default("You have exceeded the word limit by {x} words") }}{% else %}{{ params.charCountOverLimitPlural | default("You have exceeded the character limit by {x} characters") }}{% endif %}"
-    >
-    </span>
+    <div class="ons-u-reading-width">
+        {% if params.variant == "check" %}
+            {% set content = caller() %}
+            <span class="ons-js-char-check-input">{{ content | safe }}</span>
+        {% endif %}
+        <span
+            id="{{ params.id }}"
+            class="ons-input__limit ons-u-fs-s--b ons-u-d-no ons-u-mt-2xs"
+            data-count-type="{{ params.variant if params.variant == 'word' else 'char' }}"
+            data-message-singular="{% if params.variant == 'word' %}{{ params.wordCountSingular }}{% else %}{{ params.charCountSingular }}{% endif %}"
+            data-message-plural="{% if params.variant == 'word' %}{{ params.wordCountPlural }}{% else %}{{ params.charCountPlural }}{% endif %}"
+            data-message-over-limit-singular="{% if params.variant == 'word' %}{{ params.wordCountOverLimitSingular | default("You have exceeded the word limit by {x} word") }}{% else %}{{ params.charCountOverLimitSingular | default("You have exceeded the character limit by {x} character") }}{% endif %}"
+            data-message-over-limit-plural="{% if params.variant == 'word' %}{{ params.wordCountOverLimitPlural | default("You have exceeded the word limit by {x} words") }}{% else %}{{ params.charCountOverLimitPlural | default("You have exceeded the character limit by {x} characters") }}{% endif %}"
+        >
+        </span>
+    </div>
 {% endmacro %}

package/components/chart/_chart.scss

@@ -29,15 +29,6 @@
         outline-offset: 2px;
     }
 
-    &__download-title {
-        @extend .ons-u-pt-l;
-        @extend .ons-u-fs-r--b;
-    }
-
-    &__caption {
-        color: var(--ons-color-grey-75);
-    }
-
     &__annotations-footnotes-number {
         // !important is necessary for some range annotation labels at mobile, otherwise
         // the inline-styled block display takes precedence. This inline style is only