@ons/design-system 73.13.1 → 74.0.0-cookies.0

package/components/hero/example-hero-pale-blue-with-external-breadcrumbs.njk

@@ -4,170 +4,165 @@ layout: ~
 ---
 
 {% from "components/hero/_macro.njk" import onsHero %}
-{% from "components/breadcrumbs/_macro.njk" import onsBreadcrumbs %}
 {% extends "layout/_template.njk" %}
 {%
     set pageConfig = {
         "header": {
             "variants": 'basic',
             "menuLinks": {
-            "id": "menu-links",
-            "keyLinks": [
-                {
-                    'heading': 'Taking part in a survey?',
-                    'description': 'It’s never been more important.'
-                },
-                {
-                    'heading': 'Release calendar',
-                    'description': 'View our latest and upcoming releases.'
-                },
-                {
-                    'heading': 'Explore local statistics',
-                    'url': '#0',
-                    'description': 'Explore statistics across the UK.'
-                }
-            ],
-            "columns": [
-                {
-                    "groups": [
-                        {
-                            "heading": "People, population and community",
-                            "groupItems": [
-                                {
-                                    "text": "Armed forces community"
-                                },
-                                {
-                                    "text": "Births, deaths and marriages"
-                                },
-                                {
-                                    "text": "Crime and justice"
-                                },
-                                {
-                                    "text": "Cultural identity"
-                                },
-                                {
-                                    "text": "Education and childcare"
-                                },
-                                {
-                                    "text": "Elections"
-                                },
-                                {
-                                    "text": "Health and social care"
-                                },
-                                {
-                                    "text": "Household characteristics"
-                                },
-                                {
-                                    "text": "Housing"
-                                },
-                                {
-                                    "text": "Leisure and tourism"
-                                },
-                                {
-                                    "text": "Personal and household finances"
-                                },
-                                {
-                                    "text": "Population and migration"
-                                },
-                                {
-                                    "text": "Well-being"
-                                }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    "groups": [
-                        {
-                            "heading": "Business, industry and trade",
-                            "groupItems": [
-                                {
-                                    "text": "Business"
-                                },
-                                {
-                                    "text": "Changes to business"
-                                },
-                                {
-                                    "text": "Construction industry"
-                                },
-                                {
-                                    "text": "International trade"
-                                },
-                                {
-                                    "text": "IT and internet industry"
-                                },
-                                {
-                                    "text": "Manufacturing and production industry"
-                                },
-                                {
-                                    "text": "Retail industry",
-                                    "url": "#0"
-                                },
-                                {
-                                    "text": "Tourism industry"
-                                }
-                            ]
-                        },
-                        {
-                            "heading": "Employment and labour market",
-                            "url": "#0",
-                            "groupItems":
-                            [
-                                {
-                                    "text": "People in work"
-                                },
-                                {
-                                    "text": "People not in work"
-                                }
-                            ]
+                "id": "menu-links",
+                "keyLinks": [
+                    {
+                        'heading': 'Taking part in a survey?',
+                        'description': 'It’s never been more important.'
+                    },
+                    {
+                        'heading': 'Release calendar',
+                        'description': 'View our latest and upcoming releases.'
+                    },
+                    {
+                        'heading': 'Explore local statistics',
+                        'url': '#0',
+                        'description': 'Explore statistics across the UK.'
+                    }
+                ],
+                "columns": [
+                    {
+                        "groups": [
+                            {
+                                "heading": "People, population and community",
+                                "groupItems": [
+                                    {
+                                        "text": "Armed forces community"
+                                    },
+                                    {
+                                        "text": "Births, deaths and marriages"
+                                    },
+                                    {
+                                        "text": "Crime and justice"
+                                    },
+                                    {
+                                        "text": "Cultural identity"
+                                    },
+                                    {
+                                        "text": "Education and childcare"
+                                    },
+                                    {
+                                        "text": "Elections"
+                                    },
+                                    {
+                                        "text": "Health and social care"
+                                    },
+                                    {
+                                        "text": "Household characteristics"
+                                    },
+                                    {
+                                        "text": "Housing"
+                                    },
+                                    {
+                                        "text": "Leisure and tourism"
+                                    },
+                                    {
+                                        "text": "Personal and household finances"
+                                    },
+                                    {
+                                        "text": "Population and migration"
+                                    },
+                                    {
+                                        "text": "Well-being"
+                                    }
+                                ]
+                            }
+                        ]
+                    },
+                    {
+                        "groups": [
+                            {
+                                "heading": "Business, industry and trade",
+                                "groupItems": [
+                                    {
+                                        "text": "Business"
+                                    },
+                                    {
+                                        "text": "Changes to business"
+                                    },
+                                    {
+                                        "text": "Construction industry"
+                                    },
+                                    {
+                                        "text": "International trade"
+                                    },
+                                    {
+                                        "text": "IT and internet industry"
+                                    },
+                                    {
+                                        "text": "Manufacturing and production industry"
+                                    },
+                                    {
+                                        "text": "Retail industry",
+                                        "url": "#0"
+                                    },
+                                    {
+                                        "text": "Tourism industry"
+                                    }
+                                ]
+                            },
+                            {
+                                "heading": "Employment and labour market",
+                                "url": "#0",
+                                "groupItems":
+                                [
+                                    {
+                                        "text": "People in work"
+                                    },
+                                    {
+                                        "text": "People not in work"
+                                    }
+                                ]
 
-                        }
-                    ]
-                },
-                {
-                    "groups": [
-                        {
-                            "heading": "Economy",
-                            "groupItems": [
-                                {
-                                    "text": "Economic output and productivity"
-                                },
-                                {
-                                    "text": "Government, public sector and taxes"
-                                },
-                                {
-                                    "text": "Gross Value Added (GVA)"
-                                },
-                                {
-                                    "text": "Investments, pensions and trusts"
-                                },
-                                {
-                                    "text": "Regional accounts"
-                                },
-                                {
-                                    "text": "Environmental accounts"
-                                },
-                                {
-                                    "text": "Gross Domestic Product (GDP)"
-                                },
-                                {
-                                    "text": "Inflation and price indices"
-                                },
-                                {
-                                    "text": "National accounts"
-                                }
-                            ]
-                        }
-                    ]
-                }
-            ]
-        }
-        }
-    }
-%}
-{% block pageContent %}
-    {{
-        onsBreadcrumbs({
+                            }
+                        ]
+                    },
+                    {
+                        "groups": [
+                            {
+                                "heading": "Economy",
+                                "groupItems": [
+                                    {
+                                        "text": "Economic output and productivity"
+                                    },
+                                    {
+                                        "text": "Government, public sector and taxes"
+                                    },
+                                    {
+                                        "text": "Gross Value Added (GVA)"
+                                    },
+                                    {
+                                        "text": "Investments, pensions and trusts"
+                                    },
+                                    {
+                                        "text": "Regional accounts"
+                                    },
+                                    {
+                                        "text": "Environmental accounts"
+                                    },
+                                    {
+                                        "text": "Gross Domestic Product (GDP)"
+                                    },
+                                    {
+                                        "text": "Inflation and price indices"
+                                    },
+                                    {
+                                        "text": "National accounts"
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            }
+        },
+        breadcrumbs: {
             "ariaLabel": 'Breadcrumbs',
             "variant": "pale-blue",
             "itemsList": [
@@ -184,18 +179,19 @@ layout: ~
                     "text": 'Retail industry'
                 }
             ]
+        }
+    }
+%}
+
+{% block hero %}
+    {{
+        onsHero({
+            "topic": 'Topic',
+            "title": 'Retail Industry',
+            "text": 'Sales by retailers in Great Britain directly to end consumers, including spending on goods (in store and online)
+                    (Retail Sales Index) and spending on services (Index of Services). The industry as a whole is used as an indicator
+                    of how the wider economy is performing and the strength of consumer spending.',
+            "variants": 'pale-blue'
         })
     }}
-    <main id="main-content">
-        {{
-            onsHero({
-                "topic": 'Topic',
-                "title": 'Retail Industry',
-                "text": 'Sales by retailers in Great Britain directly to end consumers, including spending on goods (in store and online)
-                        (Retail Sales Index) and spending on services (Index of Services). The industry as a whole is used as an indicator
-                        of how the wider economy is performing and the strength of consumer spending.',
-                "variants": 'pale-blue'
-            })
-        }}
-    </main>
 {% endblock %}

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/question/example-question-ccs.njk

@@ -23,7 +23,7 @@ layout: ~
     }
 %}
 
-{% block main %}
+{% block mainContent %}
     {%
         call onsQuestion({
             "title": "How many visitors do you have staying overnight at 3 Severn Road on Sunday 21 March 2021?",

package/components/question/example-question-fieldset.njk

@@ -24,7 +24,7 @@ layout: ~
 %}
 {% set questionTitle = "On 1 May 2016, what was the number of employees for Bolt and Ratchet?" %}
 
-{% block main %}
+{% block mainContent %}
     {%
         call onsQuestion({
             "title": questionTitle,

package/components/question/example-question-interviewer-note.njk

@@ -23,7 +23,7 @@ layout: ~
     }
 %}
 
-{% block main %}
+{% block mainContent %}
     {%
         call onsQuestion({
             "title": "<mark>Interviewer note:</mark>Who to interview",

package/components/question/example-question-no-fieldset.njk

@@ -23,7 +23,7 @@ layout: ~
     }
 %}
 
-{% block main %}
+{% block mainContent %}
     {%
         call onsQuestion({
             "title": "How many visitors are staying overnight at 3 Severn Road on 13 May 2019?",

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/relationships/example-relationships-error.njk

@@ -25,7 +25,7 @@ layout: ~
     }
 %}
 
-{% block main %}
+{% block mainContent %}
 
     {%
         call onsPanel({

package/components/relationships/example-relationships-you.njk

@@ -23,7 +23,7 @@ layout: ~
     }
 %}
 
-{% block main %}
+{% block mainContent %}
     {%
         call onsQuestion({
             "title": "Joe Bloggs is your <strong>…</strong>",

package/components/relationships/example-relationships.njk

@@ -23,7 +23,7 @@ layout: ~
     }
 %}
 
-{% block main %}
+{% block mainContent %}
     {%
         call onsQuestion({
             "title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>…</strong>",

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;