@ons/design-system 72.10.8 → 72.10.10

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

@@ -0,0 +1,200 @@
+---
+title: 'Example: Table of contents on full page'
+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"
+                                }
+                            ]
+
+                        }
+                    ]
+                },
+                {
+                    "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({
+            "ariaLabel": 'Breadcrumbs',
+            "variant": "navy-blue",
+            "itemsList": [
+                {
+                    "url": '/',
+                    "text": 'Home'
+                },
+                {
+                    "url": '/',
+                    "text": 'Business, industry and trade'
+                },
+                {
+                    "url": '/',
+                    "text": 'Retail industry'
+                }
+            ]
+        })
+    }}
+    <main id="main-content">
+        {{
+            onsHero({
+                "title": 'Welcome to the ONS Beta',
+                "text": 'Thank you for participating in our beta test. This limited preview of the ONS website focuses on our
+                        new design and navigation for the retail insutry section. Please be aware that greyed-out links indicate sections still under development.
+                        The active links will take you through the journey to test the new design features.',
+                "variants": 'navy-blue'
+            })
+        }}
+    </main>
+{% endblock %}

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

@@ -0,0 +1,201 @@
+---
+title: 'Example: Table of contents on full page'
+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"
+                                }
+                            ]
+
+                        }
+                    ]
+                },
+                {
+                    "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({
+            "ariaLabel": 'Breadcrumbs',
+            "variant": "pale-blue",
+            "itemsList": [
+                {
+                    "url": '/',
+                    "text": 'Home'
+                },
+                {
+                    "url": '/',
+                    "text": 'Business, industry and trade'
+                },
+                {
+                    "url": '/',
+                    "text": 'Retail industry'
+                }
+            ]
+        })
+    }}
+    <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/icon/_macro.njk

@@ -701,7 +701,7 @@
             class="ons-icon--logo{{ iconClasses }}"
         >
             <title id="{{ params.altTextId | default ('official-statistics-alt') }}">
-                {{ params.altText | default ('Official Statistics Badge') }}
+                {{ params.altText | default ('Official Statistics Badge - Accredited') }}
             </title>
             <path
                 d="M12.4999 92.59C7.18988 92.59 2.87988 88.27 2.87988 82.97C2.87988 77.67 7.19988 73.35 12.4999 73.35H64.4999C69.8099 73.35 74.1199 77.67 74.1199 82.97C74.1199 88.27 69.7999 92.59 64.4999 92.59H12.4999Z"

package/components/mutually-exclusive/mutually-exclusive.js

@@ -1,3 +1,5 @@
+import DOMPurify from 'dompurify';
+
 const exclusiveGroupItemClass = 'ons-js-exclusive-group-item';
 const optionClass = 'ons-js-exclusive-option';
 const voiceOverAlertClass = 'ons-js-exclusive-alert';
@@ -133,7 +135,7 @@ export default class MutuallyExclusive {
 
         // Only update aria-live if value changes to prevent typing from clearing the message before it's read
         if (deselectionMessage) {
-            this.voiceOverAlertElement.innerHTML = deselectionMessage;
+            this.voiceOverAlertElement.innerHTML = DOMPurify.sanitize(deselectionMessage);
         }
     }
 

package/components/navigation/_macro.njk

@@ -7,25 +7,18 @@
         >
             {% if params.siteSearchAutosuggest %}
                 <div class="ons-navigation-search ons-js-navigation-search">
-                    {% set autosuggestClasses = "ons-input-search ons-input-search--icon" %}
-                    {% set autosuggestLabelClasses = "ons-u-pl-xl" %}
-                    {% if params.variants == "neutral" %}
-                        {% set autosuggestClasses = autosuggestClasses + ' ons-input-search--dark' %}
-                    {% else %}
-                        {% set autosuggestLabelClasses = autosuggestLabelClasses + ' ons-label--white' %}
-                    {% endif %}
                     {{
                         onsAutosuggest({
                             "id": "ons-site-search",
                             "containerClasses": "ons-autosuggest--header",
                             "input": {
-                                "classes": autosuggestClasses,
+                                "classes": "ons-input-search ons-input-search--icon",
                                 "accessiblePlaceholder": true,
                                 "autocomplete": "off",
                                 "label": {
                                     "text": params.siteSearchAutosuggest.label,
                                     "id": "ons-site-search-label",
-                                    "classes": autosuggestLabelClasses
+                                    "classes": "ons-u-pl-xl ons-label--white"
                                 }
                             },
                             "instructions": params.siteSearchAutosuggest.instructions,
@@ -48,13 +41,13 @@
             <nav
                 class="ons-navigation ons-navigation--main ons-js-navigation"
                 id="{{ params.navigation.id }}"
-                aria-label="{{ params.navigation.ariaLabel | default("Main menu") }}"
+                aria-label="{{ params.navigation.ariaLabel | default('Main menu') }}"
                 data-analytics="header-navigation"
             >
                 <ul class="ons-navigation__list">
                     {% for item in params.navigation.itemsList %}
                         <li
-                            class="ons-navigation__item {{ item.classes }}{{ ' ons-navigation__item--active' if (item.url == params.navigation.currentPath) or (params.navigation.currentPath is not string and item.url in params.navigation.currentPath) }}"
+                            class="ons-navigation__item{{ ' ' + item.classes if item.classes }}{{ ' ons-navigation__item--active' if (item.url == params.navigation.currentPath) or (params.navigation.currentPath is not string and item.url in params.navigation.currentPath) }}"
                         >
                             <a
                                 class="ons-navigation__link"
@@ -76,7 +69,7 @@
     {% if params.navigation.subNavigation %}
         {% if not params.navigation.subNavigation.removeHorizontalSubNav %}
             <nav
-                class="ons-navigation ons-navigation--sub ons-u-d-no@2xs@l{{ ' ' + params.navigation.subNavigation.classes if params.navigation.subNavigation.classes else '' }}"
+                class="ons-navigation ons-u-d-no@2xs@l{{ ' ons-navigation--sub-neutral' if params.variants == 'neutral' else ' ons-navigation--sub' }}{{ ' ' + params.navigation.subNavigation.classes if params.navigation.subNavigation.classes else '' }}"
                 id="{{ params.navigation.subNavigation.id }}"
                 aria-label="{{ params.navigation.subNavigation.ariaLabel | default('Section menu') }}"
                 data-analytics="header-section-navigation"
@@ -90,7 +83,7 @@
                                 class="ons-navigation__item{{ ' ' + item.classes if item.classes else '' }}{{ ' ons-navigation__item--active' if (item.url == params.navigation.currentPath) or (params.navigation.currentPath is not string and item.url in params.navigation.currentPath) }}"
                             >
                                 <a
-                                    class="ons-navigation__link ons-navigation__link"
+                                    class="ons-navigation__link"
                                     href="{{ item.url }}"
                                     {% if item.ariaLabel %}aria-label="{{ item.ariaLabel }}"{% endif %}
                                     {% if item.id %}id="{{ item.id }}"{% endif %}
@@ -107,7 +100,9 @@
                 </div>
             </nav>
         {% endif %}
-        <div class="ons-u-d-no@l{{ ' ' + params.navigation.subNavigation.classes if params.navigation.subNavigation.classes else '' }}">
+        <div
+            class="ons-u-d-no@l{{ ' ons-navigation--neutral' if params.variants == 'neutral' else '' }}{{ ' ' + params.navigation.subNavigation.classes if params.navigation.subNavigation.classes else '' }}"
+        >
             {{
                 onsButton({
                     "text": params.navigation.currentPageTitle,
@@ -122,10 +117,10 @@
                 })
             }}
             <nav
-                class="ons-navigation ons-navigation--sub-mobile ons-u-d-no ons-js-secondary-nav ons-u-mt-2xs"
+                class="ons-navigation ons-navigation--sub-mobile ons-u-d-no ons-js-secondary-nav ons-u-mt-2xs{{ ' ons-navigation--sub-neutral' if params.variants == 'neutral' else '' }}"
                 id="{{ params.navigation.subNavigation.id }}--mobile"
                 aria-hidden="true"
-                aria-label="{{ params.navigation.subNavigation.ariaLabel | default("Section menu") }}"
+                aria-label="{{ params.navigation.subNavigation.ariaLabel | default('Section menu') }}"
                 data-analytics="header-section-navigation"
             >
                 <div

package/components/navigation/_navigation.scss

@@ -14,6 +14,11 @@
         padding-top: 0.5rem;
     }
 
+    &--sub-neutral {
+        background: var(--ons-color-grey-15);
+        padding-top: 0.5rem;
+    }
+
     &--sub-mobile {
         border-bottom: 4px solid var(--ons-color-branded-tint);
     }
@@ -125,6 +130,25 @@
         }
     }
 
+    &--sub-neutral & {
+        &__link,
+        &__link:hover,
+        &__link:focus {
+            color: var(--ons-color-black);
+        }
+
+        &__item {
+            &:hover,
+            &--active {
+                border-color: var(--ons-color-black);
+            }
+        }
+    }
+
+    &--sub-mobile.ons-navigation--sub-neutral {
+        background: var(--ons-color-white);
+    }
+
     &__item--active > &__link {
         font-weight: $font-weight-bold;
     }

package/components/radios/clear-radios.js

@@ -1,3 +1,5 @@
+import DOMPurify from 'dompurify';
+
 let clearAlertAnnounced;
 export default class ClearRadios {
     constructor(inputs, button, otherInput) {
@@ -32,7 +34,7 @@ export default class ClearRadios {
     setClearAttributes() {
         this.button.classList.remove('ons-u-db-no-js_enabled');
         if (clearAlertAnnounced === false) {
-            this.ariaElement.innerHTML = this.clearAlert;
+            this.ariaElement.innerHTML = DOMPurify.sanitize(this.clearAlert);
             clearAlertAnnounced = true;
         }
     }
@@ -49,7 +51,7 @@ export default class ClearRadios {
         }
 
         this.button.classList.add('ons-u-db-no-js_enabled');
-        this.ariaElement.innerHTML = this.clearedAlert;
+        this.ariaElement.innerHTML = DOMPurify.sanitize(this.clearedAlert);
         clearAlertAnnounced = false;
     }
 }

package/components/relationships/relationships.js

@@ -1,3 +1,5 @@
+import DOMPurify from 'dompurify';
+
 export default class Relationships {
     constructor(context) {
         this.context = context;
@@ -20,9 +22,9 @@ export default class Relationships {
         if (radio) {
             const title = radio.getAttribute('data-title');
 
-            this.legend.innerHTML = title;
+            this.legend.innerHTML = DOMPurify.sanitize(title);
 
-            this.playback.innerHTML = radio.getAttribute('data-playback');
+            this.playback.innerHTML = DOMPurify.sanitize(radio.getAttribute('data-playback'));
         }
     }
 }