@ons/design-system 72.10.7 → 72.10.9

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/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'));
         }
     }
 }

package/components/tabs/tabs.js

@@ -134,7 +134,7 @@ export default class Tabs {
         window.removeEventListener('hashchange', this.component.boundOnHashChange, true);
     }
 
-    // Handle haschange so that the browser can cycle through the tab history
+    // Handle hashchange so that the browser can cycle through the tab history
     onHashChange() {
         const hash = window.location.hash;
         const tabWithHash = this.getTab(hash);
@@ -259,7 +259,7 @@ export default class Tabs {
     }
 
     getPanel(tab) {
-        const panelSelector = this.getHref(tab).replace(/\./g, '\\.');
+        const panelSelector = this.getHref(tab).replace(/([ .:[\]{}()<>?+*~=|^$!\\])/g, '\\$1');
         const panel = this.component.querySelector(panelSelector);
         return panel;
     }

package/components/video/video.js

@@ -1,3 +1,4 @@
+import DOMPurify from 'dompurify';
 export default class Video {
     constructor(component) {
         this.component = component;
@@ -30,6 +31,7 @@ export default class Video {
     }
     addDNTtoVimeoVideos() {
         let src = this.iframe.getAttribute('data-src');
+        src = DOMPurify.sanitize(src);
         if (src.includes('player.vimeo.com/video') && src.includes('?dnt=1') === false) {
             src += '?dnt=1';
             return src;