@ons/design-system 72.2.0 → 72.3.0

package/components/footer/_macro.njk

@@ -207,7 +207,7 @@
                 </div>
                 {% if params.copyrightDeclaration %}
                     <!-- Copyright -->
-                    {% set copyrightDeclaration = '&copy; ' + params.copyrightDeclaration.copyright + '<br /> ' + params.copyrightDeclaration.text %}
+                    {% set copyrightDeclaration = '&copy; ' ~ params.copyrightDeclaration.copyright ~ '<br /> ' ~ params.copyrightDeclaration.text %}
                     <div class="ons-grid ons-grid-flex ons-grid-flex--between">
                         <div class="ons-grid__col">
                             <p class="ons-u-fs-s ons-u-mb-l ons-footer__copyright">{{- copyrightDeclaration | safe -}}</p>

package/components/header/_header.scss

@@ -236,6 +236,48 @@
         }
     }
 
+    &--basic & {
+        &__grid-top {
+            padding: 0;
+        }
+    }
+
+    &-nav-menu {
+        background-color: var(--ons-color-branded-tint);
+        width: 100%;
+
+        &__key-list {
+            border-bottom: 1px solid var(--ons-color-ocean-blue);
+            margin-bottom: 1.25rem;
+            padding-bottom: 1rem;
+            padding-left: 0;
+            row-gap: 1rem;
+        }
+
+        &__link,
+        &__heading,
+        &__text,
+        &__description {
+            line-height: 1.714 !important;
+        }
+
+        &__groupItem-list:not(:last-of-type) {
+            margin-bottom: 2rem !important;
+        }
+
+        .ons-grid {
+            margin-left: 0;
+        }
+
+        .ons-grid__col {
+            padding-left: 0;
+            padding-bottom: 1rem;
+            @include mq(m) {
+                padding-bottom: 0;
+            }
+        }
+    }
+
     .ons-btn {
         top: 0 !important;
     }

package/components/header/_macro.njk

@@ -180,6 +180,29 @@
                             {% endif %}
                         </div>
                     {% endif %}
+                    {% if params.menuLinks %}
+                        <div class="ons-header__links ons-grid__col ons-u-ml-auto">
+                            {% if params.menuLinks %}
+                                <div class="ons-grid__col ons-col-auto">
+                                    {{
+                                        onsButton({
+                                            "text": params.menuLinks.toggleNavButton.text | default("Menu"),
+                                            "classes": "ons-u-fs-s--b ons-js-toggle-services button-nav",
+                                            "type": "button",
+                                            "variants": "menu",
+                                            "iconType": "chevron",
+                                            "iconPosition": "before",
+                                            "attributes": {
+                                                "aria-label": params.menuLinks.toggleNavButton.ariaLabel | default("Toggle menu"),
+                                                "aria-controls": params.menuLinks.id,
+                                                "aria-expanded": "false"
+                                            }
+                                        })
+                                    }}
+                                </div>
+                            {% endif %}
+                        </div>
+                    {% endif %}
                 </div>
             </div>
             {% if params.serviceLinks %}
@@ -217,6 +240,78 @@
                     {% endif %}
                 </nav>
             {% endif %}
+            {% if params.menuLinks %}
+                <nav
+                    class="ons-u-d-no ons-js-services-mobile-nav ons-header-nav-menu ons-u-mb-s ons-u-pt-2xl"
+                    id="{{ params.menuLinks.id }}"
+                    aria-label="{{ params.menuLinks.ariaLabel | default("Menu navigation") }}"
+                >
+                    {% if params.menuLinks.keyLinks %}
+                        <div class="ons-container">
+                            <ul class="ons-grid ons-header-nav-menu__key-list">
+                                {% for keyLink in params.menuLinks.keyLinks %}
+                                    {% if keyLink.heading %}
+                                        <li class="ons-grid__col ons-col-4@m">
+                                            <h2 class="ons-u-fs-s--b ons-u-mb-no ons-header-nav-menu__heading">
+                                                {% if keyLink.url %}
+                                                    <a href="{{ keyLink.url }}" class="ons-header-nav-menu__link">{{ keyLink.heading }}</a>
+                                                {% else %}
+                                                    {{ keyLink.heading }}
+                                                {% endif %}
+                                            </h2>
+                                            {% if keyLink.description %}
+                                                <p class="ons-u-fs-s ons-u-mb-no ons-header-nav-menu__description">
+                                                    {{ keyLink.description }}
+                                                </p>
+                                            {% endif %}
+                                        </li>
+                                    {% endif %}
+                                {% endfor %}
+                            </ul>
+                        </div>
+                    {% endif %}
+                    {% if params.menuLinks.columns %}
+                        <div class="ons-container">
+                            <ul class="ons-grid ons-list ons-list--bare">
+                                {% for column in params.menuLinks.columns %}
+                                    <li class="ons-grid__col ons-col-4@m ons-u-mb-no">
+                                        {% for group in column.groups %}
+                                            {% if group.heading %}
+                                                <h2 class="ons-u-fs-s--b ons-header-nav-menu__heading">
+                                                    {% if group.url %}
+                                                        <a href="{{ group.url }}" class="ons-header-nav-menu__link">{{ group.heading }}</a>
+                                                    {% else %}
+                                                        {{ group.heading }}
+                                                    {% endif %}
+                                                </h2>
+                                            {% endif %}
+                                            {% if group.groupItems %}
+                                                <ul class="ons-list ons-list--bare ons-header-nav-menu__groupItem-list">
+                                                    {% for groupItem in group.groupItems %}
+                                                        {% if groupItem.text %}
+                                                            <li class="ons-u-mb-no">
+                                                                <p class="ons-u-fs-s ons-header-nav-menu_text">
+                                                                    {% if groupItem.url %}
+                                                                        <a href="{{ groupItem.url }}" class="ons-header-nav-menu__link">
+                                                                            {{ groupItem.text }}
+                                                                        </a>
+                                                                    {% else %}
+                                                                        {{ groupItem.text }}
+                                                                    {% endif %}
+                                                                </p>
+                                                            </li>
+                                                        {% endif %}
+                                                    {% endfor %}
+                                                </ul>
+                                            {% endif %}
+                                        {% endfor %}
+                                    </li>
+                                {% endfor %}
+                            </ul>
+                        </div>
+                    {% endif %}
+                </nav>
+            {% endif %}
         </div>
         {% if params.variants != "basic" %}
             <div class="ons-header__main">

package/components/header/_macro.spec.js

@@ -723,7 +723,6 @@ describe('FOR: Macro: Header', () => {
                     ariaMinChars: 'Enter 3 or more characters for suggestions.',
                     ariaNResults: 'There are {n} suggestions available.',
                     ariaOneResult: 'There is one suggestion available.',
-                    ariaResultsLabel: 'Country suggestions',
                     ariaYouHaveSelected: 'You have selected',
                     containerClasses: 'ons-autosuggest--header',
                     id: 'ons-site-search',

package/components/header/example-header-basic.njk

@@ -6,6 +6,157 @@
 
 {{
     onsHeader({
-        "variants": 'basic'
+        "variants": 'basic',
+        "menuLinks": {
+            "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"
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        }
     })
 }}

package/components/header/example-header-external-with-navigation-and-search.njk

@@ -45,7 +45,6 @@
             "instructions": "instructions",
             "ariaYouHaveSelected": "ariaYouHaveSelected",
             "ariaMinChars": "ariaMinChars",
-            "ariaResultsLabel": "ariaResultsLabel",
             "ariaOneResult": "ariaOneResult",
             "ariaNResults": "ariaNResults",
             "ariaLimitedResults": "ariaLimitedResults",

package/components/hero/_hero.scss

@@ -28,6 +28,26 @@
         }
     }
 
+    &--pale-blue {
+        background-color: var(--ons-color-soft-blue-grey);
+        margin-bottom: 2.5rem;
+        &::before {
+            background-color: var(--ons-color-pale-blue);
+            border-radius: 0 0 50% 50%;
+            content: '';
+            height: 100%;
+            inset: 0;
+            left: -40%;
+            position: absolute;
+            width: 150%;
+            @include mq(l) {
+                border-radius: 0 0 80% 50%;
+                left: -25%;
+                width: 130%;
+            }
+        }
+    }
+
     &--grey {
         background-color: var(--ons-color-grey-10);
         &::before {
@@ -329,6 +349,77 @@
         }
     }
 
+    &--pale-blue & {
+        &__details {
+            padding-bottom: 6rem;
+            @include mq(l) {
+                padding-bottom: 4rem;
+            }
+        }
+
+        &__circle-1 {
+            @include mq(l) {
+                background-color: var(--ons-color-soft-blue-grey);
+                border-radius: 50%;
+                height: 440px;
+                position: absolute;
+                right: 59px;
+                top: -339px;
+                width: 440px;
+            }
+        }
+
+        &__circle-2 {
+            background-color: var(--ons-color-light-orange);
+            border-radius: 50%;
+            bottom: 4%;
+            height: 40px;
+            position: absolute;
+            right: 15%;
+            width: 40px;
+            @include mq(xl) {
+                bottom: 30%;
+                height: 72px;
+                right: 346px;
+                width: 72px;
+            }
+            @include mq(l, 1299px) {
+                bottom: 30%;
+                height: 72px;
+                right: 25%;
+                width: 72px;
+            }
+            @include mq(m, 979px) {
+                bottom: 8%;
+                right: 10%;
+            }
+        }
+
+        &__circle-3 {
+            background-color: var(--ons-color-ocean-blue);
+            border-radius: 50%;
+            bottom: 7%;
+            height: 80px;
+            position: absolute;
+            right: -26px;
+            width: 80px;
+
+            @include mq(xl) {
+                right: 43px;
+            }
+
+            @include mq(l) {
+                height: 156px;
+                right: 2%;
+                width: 156px;
+            }
+
+            @include mq(m) {
+                bottom: 9%;
+            }
+        }
+    }
+
     &__title-container {
         @include mq(l) {
             display: grid;

package/components/hero/_macro.njk

@@ -12,9 +12,15 @@
                     <div class="ons-hero__circle-{{ i }}"></div>
                 {% endfor %}
             </div>
+        {% elif params.variants == 'pale-blue' %}
+            <div class="ons-hero__circles" aria-hidden="true">
+                {% for i in range(1, 4) %}
+                    <div class="ons-hero__circle-{{ i }}"></div>
+                {% endfor %}
+            </div>
         {% endif %}
         <div class="ons-hero__container ons-container{{ ' ons-container--wide' if params.wide }}">
-            <div class="ons-hero__details ons-grid__col ons-col-{{ detailsColumns }}@m ons-col-10@s@m">
+            <div class="ons-hero__details ons-grid__col ons-col-{{ detailsColumns }}@m col-10@s@m">
                 {% if params.breadcrumbs %}
                     {% from "components/breadcrumbs/_macro.njk" import onsBreadcrumbs %}
                     {{

package/components/hero/_macro.spec.js

@@ -93,6 +93,11 @@ describe('macro: hero', () => {
         expect($('.ons-hero--navy-blue .ons-hero__circles').length).toBe(1);
     });
 
+    it('renders circles when variant is `pale blue`', () => {
+        const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, variants: 'pale-blue' }));
+        expect($('.ons-hero--pale-blue .ons-hero__circles').length).toBe(1);
+    });
+
     it('outputs the correct topic when set', () => {
         const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, topic: 'Topic Text' }));
 

package/components/hero/example-hero-pale-blue.njk

@@ -0,0 +1,24 @@
+---
+'fullWidth': true
+---
+
+{% from "components/hero/_macro.njk" import onsHero %}
+{{
+    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.',
+        "breadcrumbs": {
+            "ariaLabel": 'Breadcrumbs',
+            "itemsList": [
+                {
+                    "url": '/',
+                    "text": 'Home'
+                }
+            ]
+        },
+        "variants": 'pale-blue'
+    })
+}}

package/components/message-list/_macro.njk

@@ -15,10 +15,17 @@
                     <dd class="ons-message-item__metadata-value ons-message-item__metadata-value--date ons-u-fs-s">
                         {{ message.dateText }}
                     </dd>
+                    <dt class="ons-message-item__metadata-term ons-message-item__metadata-term--body ons-u-vh">
+                        {% if params.ariaLabelMsg and not params.bodyLabel %}
+                            {{ params.ariaLabelMsg | default("Message text") }}:
+                        {% else %}
+                            {{ params.bodyLabel | default("Message text") }}:
+                        {% endif %}
+                    </dt>
+                    <dd class="ons-message-item__metadata-value ons-message-item__metadata-value--body ons-u-fs-r ons-u-mt-s">
+                        {{ message.body | safe }}
+                    </dd>
                 </dl>
-                <div class="ons-message-item__body" aria-label="{{ params.ariaLabelMsg | default("Message text") }}">
-                    {{ message.body | safe }}
-                </div>
                 <div class="ons-message-item__link ons-u-vh">
                     <a href="{{ message.subject.url }}">{{ params.hiddenReadLabel }}: {{ message.subject.text }}</a>
                 </div>

package/components/message-list/_macro.spec.js

@@ -10,6 +10,7 @@ const EXAMPLE_MESSAGE_LIST_MINIMAL = {
     fromLabel: 'From',
     dateLabel: 'Date',
     hiddenReadLabel: 'Read the message',
+    bodyLabel: 'Body',
     messages: [
         {
             id: 'message1',
@@ -39,7 +40,47 @@ const EXAMPLE_MESSAGE_LIST = {
     ...EXAMPLE_MESSAGE_LIST_MINIMAL,
     ariaLabel: 'Message list for ONS Business Surveys',
     ariaLabelMetaData: 'Message information',
-    ariaLabelMsg: 'Message preview',
+};
+
+const EXAMPLE_MESSAGE_LIST_WITH_DEPRECATED_ARIALABELMSG_PARAM = {
+    unreadText: 'New',
+    fromLabel: 'From',
+    dateLabel: 'Date',
+    hiddenReadLabel: 'Read the message',
+    ariaLabelMsg: 'Aria Label Msg Preview',
+    messages: [
+        {
+            id: 'message1',
+            unread: true,
+            subject: {
+                url: 'https://example.com/message/1',
+                text: 'Example message subject',
+            },
+            fromText: 'Example Sender 1',
+            dateText: 'Tue 4 Jul 2020 at 7:47',
+            body: 'An example message.',
+        },
+    ],
+};
+
+const EXAMPLE_MESSAGE_LIST_WIHTOUT_BODYLABEL_PARAM = {
+    unreadText: 'New',
+    fromLabel: 'From',
+    dateLabel: 'Date',
+    hiddenReadLabel: 'Read the message',
+    messages: [
+        {
+            id: 'message1',
+            unread: true,
+            subject: {
+                url: 'https://example.com/message/1',
+                text: 'Example message subject',
+            },
+            fromText: 'Example Sender 1',
+            dateText: 'Tue 4 Jul 2020 at 7:47',
+            body: 'An example message.',
+        },
+    ],
 };
 
 describe('macro: message-list', () => {
@@ -74,18 +115,6 @@ describe('macro: message-list', () => {
         expect($('.ons-message-item__metadata:first').attr('aria-label')).toBe('Message information');
     });
 
-    it('has `aria-label` attribute on `.ons-message-item__body` with the correct default value', () => {
-        const $ = cheerio.load(renderComponent('message-list', EXAMPLE_MESSAGE_LIST_MINIMAL));
-
-        expect($('.ons-message-item__body:first').attr('aria-label')).toBe('Message text');
-    });
-
-    it('has `aria-label` attribute on `.ons-message-item__body` using the provided value', () => {
-        const $ = cheerio.load(renderComponent('message-list', EXAMPLE_MESSAGE_LIST));
-
-        expect($('.ons-message-item__body:first').attr('aria-label')).toBe('Message preview');
-    });
-
     it('has `unreadText` for unread messages', () => {
         const $ = cheerio.load(renderComponent('message-list', EXAMPLE_MESSAGE_LIST));
 
@@ -110,6 +139,35 @@ describe('macro: message-list', () => {
         expect($('.ons-message-item__link:first').text()).toContain('Read the message: ');
     });
 
+    it('has visually hidden label `bodyLabel` when only `bodyLabel` is provided`', () => {
+        const $ = cheerio.load(renderComponent('message-list', EXAMPLE_MESSAGE_LIST_MINIMAL));
+
+        expect($('.ons-message-item__metadata-term--body:first').text().trim()).toBe('Body:');
+    });
+
+    it('has visually hidden label `bodyLabel` when both `bodyLabel` and `ariaLabelMsg` are provided`', () => {
+        const $ = cheerio.load(
+            renderComponent('message-list', {
+                ...EXAMPLE_MESSAGE_LIST_MINIMAL,
+                ariaLabelMsg: 'Aria Label Msg Preview',
+            }),
+        );
+
+        expect($('.ons-message-item__metadata-term--body:first').text().trim()).toBe('Body:');
+    });
+
+    it('has visually hidden deprecated label `ariaLabelMsg` when only `ariaLabelMsg` is provided', () => {
+        const $ = cheerio.load(renderComponent('message-list', EXAMPLE_MESSAGE_LIST_WITH_DEPRECATED_ARIALABELMSG_PARAM));
+
+        expect($('.ons-message-item__metadata-term--body:first').text().trim()).toBe('Aria Label Msg Preview:');
+    });
+
+    it('has the defualt text for visually hidden label `bodyLabel` when both `bodyLabel` and `ariaLabelMsg` are not provided', () => {
+        const $ = cheerio.load(renderComponent('message-list', EXAMPLE_MESSAGE_LIST_WIHTOUT_BODYLABEL_PARAM));
+
+        expect($('.ons-message-item__metadata-term--body:first').text().trim()).toBe('Message text:');
+    });
+
     it('has message as expected', () => {
         const $ = cheerio.load(renderComponent('message-list', EXAMPLE_MESSAGE_LIST_MINIMAL));
 
@@ -119,7 +177,7 @@ describe('macro: message-list', () => {
         expect($message2.find('.ons-message-item__subject').attr('id')).toBe('message2');
         expect($message2.find('.ons-message-item__metadata-value--from').text().trim()).toBe('Example Sender 2');
         expect($message2.find('.ons-message-item__metadata-value--date').text().trim()).toBe('Mon 1 Oct 2019 at 9:52');
-        expect($message2.find('.ons-message-item__body').text().trim()).toBe('Another example message.');
+        expect($message2.find('.ons-message-item__metadata-value--body').text().trim()).toBe('Another example message.');
         expect($message2.find('.ons-message-item__link a').attr('href')).toBe('https://example.com/message/2');
     });
 

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

@@ -5,7 +5,7 @@
 .ons-message-item {
     list-style: none;
     margin-bottom: 2rem;
-    padding-bottom: 1.5rem;
+    padding-bottom: 0.5rem;
 
     &:not(:last-child) {
         border-bottom: 1px solid var(--ons-color-borders);

package/components/navigation/_macro.njk

@@ -32,7 +32,6 @@
                             "ariaYouHaveSelected":params.siteSearchAutosuggest.ariaYouHaveSelected,
                             "minChars": params.siteSearchAutosuggest.minChars,
                             "ariaMinChars": params.siteSearchAutosuggest.ariaMinChars,
-                            "ariaResultsLabel": params.siteSearchAutosuggest.ariaResultsLabel,
                             "ariaOneResult": params.siteSearchAutosuggest.ariaOneResult,
                             "ariaNResults": params.siteSearchAutosuggest.ariaNResults,
                             "ariaLimitedResults": params.siteSearchAutosuggest.ariaLimitedResults,