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

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

@@ -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

@@ -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-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

@@ -384,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);
                     });
@@ -401,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);
             }
 
@@ -440,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);
@@ -459,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>`,
             );
         }
     }

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/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/details/_details.scss

@@ -77,6 +77,15 @@ $details-caret-width: 1.75rem;
             display: block;
             margin: 1rem 0 0 0.5rem;
             padding: 0 0 0 1.5rem;
+
+            // Restrict the width of textual content within the details content (paragraphs are already globally restricted)
+
+            ul,
+            ol,
+            label,
+            legend {
+                @include reading-width;
+            }
         }
     }
 

package/components/details/example-details-with-warning.njk

@@ -16,6 +16,6 @@
             "variant": "warn"
         })
     %}
-        Someone in your household must still complete a survey using a household access code
+        <p>Someone in your household must still complete a survey using a household access code</p>
     {% endcall %}
 {% endcall %}

package/components/featured-article/_macro.njk

@@ -31,12 +31,12 @@
 
         {# The media (a nested figure containing a chart or image) is provided via the caller
            block, so the article does not need to know how the content is rendered. #}
-        <div class="ons-featured__media">
-            {{ caller() if caller }}
-        </div>
+        <div class="ons-featured__media">{{ caller() if caller }}</div>
 
         {% if params.description %}
-            <div class="ons-featured__description">{{ params.description | safe }}</div>
+            <div class="ons-featured__description">
+                <div class="ons-u-reading-width">{{ params.description | safe }}</div>
+            </div>
         {% endif %}
     </div>
 {% endmacro %}

package/components/featured-article/macro.spec.js

@@ -123,8 +123,8 @@ describe('Macro: Featured Article', () => {
                         EXAMPLE_CHART_CALLER_CONTENT,
                     ),
                 );
-                const title = $('.ons-featured__description').html().trim();
-                expect(title).toBe('Some description');
+                const description = $('.ons-featured__description .ons-u-reading-width').html().trim();
+                expect(description).toBe('Some description');
             });
         });
     });

package/components/feedback/_macro.njk

@@ -7,6 +7,9 @@
         {{ params.heading }}
         {{ closingHeadingTag | safe }}
         <p class="ons-feedback__content">{{- params.content | safe -}}</p>
-        <a href="{{ params.linkUrl }}" class="ons-feedback__link">{{- params.linkText -}}</a>
+        {# p tag ensures reading width is applied #}
+        <p class="ons-u-mb-no">
+            <a href="{{ params.linkUrl }}" class="ons-feedback__link">{{- params.linkText -}}</a>
+        </p>
     </div>
 {% endmacro %}

package/components/feedback/_macro.spec.js

@@ -110,7 +110,7 @@ describe('FOR: Macro: Feedback', () => {
         describe('WHEN: content is provided', () => {
             const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK));
             test('THEN: renders paragraph with the provided content', () => {
-                expect($('p').text().trim()).toBe('Feedback content...');
+                expect($('p').first().text().trim()).toBe('Feedback content...');
             });
         });
     });

package/components/figure/_figure.scss

@@ -6,6 +6,7 @@
         font-size: 1.125rem;
         font-weight: $font-weight-bold;
         line-height: 1.3;
+        display: block;
     }
 
     &__title {

package/components/figure/_macro.njk

@@ -34,7 +34,7 @@
 
     {{ openingRootTag | safe }}
     {% if params.figureNumber %}
-        <span class="ons-figure__number">{{ params.figureNumber }}</span>
+        <span class="ons-figure__number ons-u-reading-width">{{ params.figureNumber }}</span>
     {% endif %}
     {% if params.title %}
         {{ openingTitleTag | safe }}{{ params.title }}{{ closingTitleTag | safe }}
@@ -61,9 +61,9 @@
 
     {% if params.caption %}
         {% if rootElement == 'figure' %}
-            <figcaption class="ons-figure__caption">{{ params.caption }}</figcaption>
+            <figcaption class="ons-figure__caption ons-u-reading-width">{{ params.caption }}</figcaption>
         {% else %}
-            <span class="ons-figure__caption">{{ params.caption }}</span>
+            <span class="ons-figure__caption ons-u-reading-width">{{ params.caption }}</span>
         {% endif %}
     {% endif %}
     {{ closingRootTag | safe }}

package/components/footer/_macro.njk

@@ -53,14 +53,17 @@
         {% if params.footerWarning %}
             {% from "components/panel/_macro.njk" import onsPanel %}
             <div class="ons-footer__warning">
-                <div class="ons-container">
+                <div
+                    class="ons-container{{ ' ons-container--full-width' if params.fullWidth else "" }}{{ ' ons-container--wide' if params.wide else "" }}"
+                >
                     {%
                         call onsPanel({
                             "variant": "warn",
                             "classes": "ons-panel--warn--footer"
                         })
                     %}
-                        {{ params.footerWarning | safe }}
+                        {# p tag ensures reading width is applied #}
+                        <div class="ons-u-reading-width">{{ params.footerWarning | safe }}</div>
                     {% endcall %}
                 </div>
             </div>

package/components/hero/_hero.scss

@@ -466,6 +466,10 @@
         display: flex;
         flex-direction: column-reverse;
     }
+
+    &__text {
+        @include no-reading-width;
+    }
 }
 
 @include panel-variant(ons-red, var(--ons-color-errors), var(--ons-color-errors-tint));

package/components/input/_input.scss

@@ -43,6 +43,10 @@
     &--textarea {
         // Prevent inner shadow on iOS
         appearance: none;
+
+        &:not(.ons-input--header-search, [class*='--w-']) {
+            @include reading-width;
+        }
     }
 
     &:focus {

package/components/input/_macro.njk

@@ -60,7 +60,10 @@
             <!-- prettier-ignore-end -->
         {% endif %}
         {% if params.postTextboxLinkText %}
-            <a class="ons-u-fs-s ons-input__post-link" href="{{ params.postTextboxLinkUrl }}">{{ params.postTextboxLinkText }}</a>
+            {# p tag ensures reading width is applied #}
+            <p class="ons-u-mb-no">
+                <a class="ons-u-fs-s ons-input__post-link" href="{{ params.postTextboxLinkUrl }}">{{ params.postTextboxLinkText }}</a>
+            </p>
         {% endif %}
     {% endset %}
 

package/components/label/_label.scss

@@ -1,4 +1,6 @@
 .ons-label {
+    @include reading-width;
+
     color: inherit;
     display: block;
     font-weight: $font-weight-bold;
@@ -6,6 +8,7 @@
 
     &__description {
         @extend .ons-u-fs-s;
+        @include reading-width;
 
         display: block;
     }

package/components/list/_list.scss

@@ -3,6 +3,8 @@
     padding: 0 0 0 1.5rem;
 
     &__item {
+        @include reading-width;
+
         &:first-child {
             margin-top: 0.5rem;
         }
@@ -109,14 +111,17 @@
 }
 
 @include bp-suffix('ons-list--inline') {
+    /* stylelint-disable-next-line nesting-selector-no-missing-scoping-root */
     &:not(.ons-list--icons) {
         margin: 0 1rem 0 0;
         .ons-list__item {
+            max-width: none;
             display: inline-block;
             margin: 0 1rem 0 0;
         }
     }
 
+    /* stylelint-disable-next-line nesting-selector-no-missing-scoping-root */
     &.ons-list--icons {
         align-items: center;
         display: flex;

package/components/message-list/_message-list.scss

@@ -16,6 +16,8 @@
     }
 
     &__metadata {
+        @include reading-width;
+
         margin: 0 0 1rem;
 
         &-term,

package/components/panel/_macro.njk

@@ -62,7 +62,7 @@
                 {% set closingTag = "</" ~ titleTag ~ ">" %}
                 <div class="ons-panel__header">
                     {{ openingTag | safe }} id="alert"{% if params.variant %}data-qa="{{ params.variant }}-header"{% endif %}
-                    class="ons-panel__title ons-u-fs-r--b">{{ params.title | safe }}{{ closingTag | safe }}
+                    class="ons-panel__title ons-u-fs-r--b ons-u-reading-width">{{ params.title | safe }}{{ closingTag | safe }}
                 </div>
             {% else %}
                 {% if not params.variant or params.variant == "branded" or params.variant == "info" or params.variant == "bare" %}

package/components/panel/_panel.scss

@@ -112,6 +112,14 @@
                 margin: 0;
             }
         }
+
+        // Restrict the width of textual content within the panel body (paragraphs are already globally restricted)
+        ul,
+        ol,
+        label,
+        legend {
+            @include reading-width;
+        }
     }
 
     &__error {

package/components/panel/example-panel-bare.njk

@@ -6,5 +6,5 @@
         "iconType": 'lock'
     })
 %}
-    Here is some text with an icon
+    <p>Here is some text with an icon</p>
 {% endcall %}

package/components/phase-banner/_phase-banner.scss

@@ -15,5 +15,6 @@
 
     &__desc {
         margin-top: 0.25rem;
+        @include no-reading-width;
     }
 }

package/components/quote/_macro.njk

@@ -1,5 +1,5 @@
 {% macro onsQuote(params) %}
-    <blockquote class="ons-quote">
+    <blockquote class="ons-quote ons-u-reading-width">
         {% from "components/icon/_macro.njk" import onsIcon %}
         {{-
             onsIcon({

package/components/skip-to-content/_macro.njk

@@ -1,6 +1,6 @@
 {% macro onsSkipToContent(params) %}
     <div role="region">
         {% set text = params.text | default('Skip to content') %}
-        <a class="ons-skip-to-content ons-u-fs-r--b" href="{{ params.url }}">{{ text }}</a>
+        <a class="ons-skip-to-content ons-u-fs-r--b" href="{{ params.url }}"><span class="ons-skip-to-content__text">{{ text }}</span></a>
     </div>
 {% endmacro %}

package/components/skip-to-content/_skip.scss

@@ -1,4 +1,5 @@
 .ons-skip-to-content {
+    /* stylelint-disable-next-line property-no-deprecated */
     clip: rect(0 0 0 0);
     clip-path: inset(50%);
     display: block;
@@ -13,6 +14,7 @@
     &:focus {
         background-color: var(--ons-color-focus);
         box-shadow: 0;
+        /* stylelint-disable-next-line property-no-deprecated */
         clip: auto;
         clip-path: none;
         color: var(--ons-color-text-link-focus);
@@ -28,4 +30,10 @@
         white-space: inherit;
         width: auto;
     }
+
+    &__text {
+        // Reading width max-width is hard-coded as skip to content sits outside the `ons-container` class
+        max-width: $reading-width;
+        display: block;
+    }
 }