@ons/design-system 74.0.0-next.8 → 74.0.0-widen.1

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

@@ -175,6 +175,10 @@
                                 {% elif params.serviceLinks.itemsList | length > 1 %}
                                     {% set breakpoint = 'm' %}
                                     {% set controlVisibility = true %}
+                                        {% if params.mastheadLogo.multipleLogos | length > 2 %}
+                                            {# Increase breakpoint if there are 3 logos to avoid stacking#}
+                                            {% set breakpoint = 'l' %}
+                                        {% endif %}
                                 {% else %}
                                     {% set controlVisibility = false %}
                                 {% endif %}
@@ -370,7 +374,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/summary/_macro.njk

@@ -24,8 +24,9 @@
                     {% if group.title %}
                         {% set openingHeadingTag = "<h" ~ headingLevel %}
                         {% set closingHeadingTag = "</h" ~ headingLevel ~ ">" %}
-                        {{ openingHeadingTag | safe }}
-                        class="ons-summary__group-title">{{ group.title }}{{ closingHeadingTag | safe }}
+                        <div class="ons-summary__group-title-wrapper">
+                            {{ openingHeadingTag | safe }} class="ons-summary__group-title">{{ group.title }}{{ closingHeadingTag | safe }}
+                        </div>
                     {% endif %}
                     {% if group.rows %}
                         <dl class="ons-summary__items">

package/components/summary/_summary.scss

@@ -217,9 +217,14 @@ $hub-row-spacing: 1.3rem;
                     border-bottom: 1px solid var(--ons-color-borders-light);
                 }
             }
-            .ons-summary__group-title {
+            .ons-summary__group-title-wrapper {
                 background-color: var(--ons-color-grey-5);
                 padding: 1rem 1.25rem;
+                margin-bottom: 1rem;
+
+                .ons-summary__group-title {
+                    margin: 0;
+                }
             }
             .ons-summary__link {
                 padding: 0 1.25rem;

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

@@ -35,122 +35,120 @@ layout: ~
 %}
 
 {% 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>
+    <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-8@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>
+                    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>
+                    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>
+                    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>
+                    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 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>
+                    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>
+                    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>
+                    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 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>
+                <p>The CCS has now closed.</p>
+            </section>
         </div>
     </div>
 {% endblock %}