@ons/design-system 74.0.0-next.7 → 74.0.0-widen.0

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/details-panel/_macro.njk

@@ -21,7 +21,7 @@
                                 })
                             }}
                         </span>
-                        <span class="ons-details-panel__banner-detail-title">
+                        <span class="ons-details-panel__banner-detail-title ons-u-reading-width">
                             <span class="ons-details-panel__banner-detail-title--open"> {{ openText }} </span>
                             <span class="ons-details-panel__banner-detail-title--close"> {{ closeText }} </span>
                         </span>

package/components/download-resources/download-resources.spec.js

@@ -1,9 +1,6 @@
-import { KnownDevices } from 'puppeteer';
-import { setViewport } from '../../tests/helpers/puppeteer';
+import { iPhoneX, setViewport } from '../../tests/helpers/puppeteer';
 import { renderComponent, renderTemplate, setTestPage } from '../../tests/helpers/rendering';
 
-const iPhoneX = KnownDevices['iPhone X'];
-
 /* eslint-disable indent */
 const EXAMPLE_PAGE = `
   <div class="ons-page">

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/header/_macro.njk

@@ -370,7 +370,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('Chwilio’r SYG' if params.lang == 'cy' else 'Search the ONS'),
+                                    "text": (params.search.form.inputLabel if params.search.form else params.searchLinks.searchNavigationInputLabel) | default('Chwilio’r SYG' if currentLanguageIsoCode == 'cy' else 'Search the ONS'),
                                     "id": "header-search-input-label"
                                 },
                                 "searchButton": {

package/components/header/_macro.spec.js

@@ -1131,6 +1131,27 @@ describe('FOR: Macro: Header', () => {
                 expect($('#header-search-input-label').text().trim()).toBe('Search the ONS');
             });
         });
+        describe('WHEN: inputLabel is not provided and Welsh is the current language', () => {
+            const $ = cheerio.load(
+                renderComponent('header', {
+                    ...EXAMPLE_HEADER_SEARCH,
+                    variants: 'basic',
+                    language: {
+                        languages: [
+                            { url: '#0', isoCode: 'en', text: 'English', current: false },
+                            { url: '#0', isoCode: 'cy', text: 'Cymraeg', current: true },
+                        ],
+                    },
+                    search: {
+                        ...EXAMPLE_HEADER_SEARCH.search,
+                        form: { ...EXAMPLE_HEADER_SEARCH.search.form, inputLabel: undefined },
+                    },
+                }),
+            );
+            test('THEN: renders search input with Welsh default label', () => {
+                expect($('#header-search-input-label').text().trim()).toBe('Chwilio’r SYG');
+            });
+        });
         describe('WHEN: buttonText is provided', () => {
             const $ = cheerio.load(renderComponent('header', { ...EXAMPLE_HEADER_SEARCH, variants: 'basic' }));
 

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/_message.scss

@@ -1,7 +1,7 @@
 @use 'sass:math';
 
 .ons-message {
-    border-radius: math.div($grid-gutters, 2);
+    border-radius: math.div($grid-gutter-standard, 2);
     margin-bottom: 2rem;
     outline: 1px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show background
 
@@ -23,7 +23,7 @@
 
     &__head {
         border-bottom: 1px solid var(--ons-color-borders);
-        padding: $grid-gutters;
+        padding: $grid-gutter-standard;
         position: relative;
     }
 
@@ -50,6 +50,6 @@
     }
 
     &__body {
-        padding: $grid-gutters;
+        padding: $grid-gutter-standard;
     }
 }

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;
+    }
 }

package/components/tabs/tabs.spec.js

@@ -1,9 +1,6 @@
-import { KnownDevices } from 'puppeteer';
-import { setViewport } from '../../tests/helpers/puppeteer';
+import { iPhoneX, setViewport } from '../../tests/helpers/puppeteer';
 import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
 
-const iPhoneX = KnownDevices['iPhone X'];
-
 const EXAMPLE_TABS = {
     title: 'Example tabs',
     titleClasses: 'ons-u-fs-m',