@ons/design-system 72.10.8 → 72.10.10

package/js/timeout.js

@@ -1,3 +1,5 @@
+import DOMPurify from 'dompurify';
+
 export default class Timeout {
     constructor(context, sessionExpiryEndpoint, initialExpiryTime, enableTimeoutReset, startOnLoad) {
         this.context = context;
@@ -77,23 +79,23 @@ export default class Timeout {
                 ($this.endWithFullStop ? '.' : '');
 
             if (timerExpired) {
-                $this.countdown.innerHTML = '<span class="ons-u-fw-b">' + $this.countdownExpiredText + '</span>';
-                $this.accessibleCountdown.innerHTML = $this.countdownExpiredText;
+                $this.countdown.innerHTML = DOMPurify.sanitize('<span class="ons-u-fw-b">' + $this.countdownExpiredText + '</span>');
+                $this.accessibleCountdown.innerHTML = DOMPurify.sanitize($this.countdownExpiredText);
                 setTimeout($this.redirect.bind($this), 2000);
             } else {
                 seconds--;
                 $this.expiryTimeInMilliseconds = seconds * 1000;
-                $this.countdown.innerHTML = timeLeftText;
+                $this.countdown.innerHTML = DOMPurify.sanitize(timeLeftText);
 
                 if (minutesLeft < 1 && secondsLeft < 20) {
                     $this.accessibleCountdown.setAttribute('aria-live', 'assertive');
                 }
 
                 if (!$this.timerRunOnce) {
-                    $this.accessibleCountdown.innerHTML = timeLeftText;
+                    $this.accessibleCountdown.innerHTML = DOMPurify.sanitize(timeLeftText);
                     $this.timerRunOnce = true;
                 } else if (secondsLeft % 15 === 0) {
-                    $this.accessibleCountdown.innerHTML = timeLeftText;
+                    $this.accessibleCountdown.innerHTML = DOMPurify.sanitize(timeLeftText);
                 }
 
                 timers.push(setTimeout(runTimer.bind($this), 1000));
@@ -165,7 +167,8 @@ export default class Timeout {
     }
 
     redirect() {
-        window.location.replace(this.timeOutRedirectUrl);
+        const sanitizedUrl = DOMPurify.sanitize(this.timeOutRedirectUrl);
+        window.location.replace(sanitizedUrl);
     }
 
     clearTimers() {

package/layout/_template.njk

@@ -146,6 +146,19 @@
                             })
                         }}
                     {% endblock %}
+                    {% block announcementBanner %}
+                        {% if pageConfig.announcementBanner %}
+                            {% from "components/announcement-banner/_macro.njk" import onsAnnouncementBanner %}
+                            {{
+                                onsAnnouncementBanner({
+                                    "variants": pageConfig.announcementBanner.variants,
+                                    "title": pageConfig.announcementBanner.title,
+                                    "description": pageConfig.announcementBanner.description,
+                                    "link": pageConfig.announcementBanner.link
+                                })
+                            }}
+                        {% endif %}
+                    {% endblock %}
                     {% block header %}
                         {{
                             onsHeader({

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@ons/design-system",
     "description": "ONS Design System built CSS, JS, and Nunjucks templates",
-    "version": "72.10.8",
+    "version": "72.10.10",
     "main": "index.js",
     "license": "MIT",
     "author": {
@@ -68,7 +68,7 @@
         "autoprefixer": "^10.4.21",
         "babel-plugin-istanbul": "^7.0.0",
         "babelify": "^10.0.0",
-        "backstopjs": "^6.1.4",
+        "backstopjs": "^6.3.25",
         "browser-sync": "^3.0.4",
         "browserify": "^17.0.1",
         "chalk": "^4.1.2",
@@ -82,7 +82,7 @@
         "eslint-config-prettier": "^9.0.0",
         "eslint-plugin-prettier": "^5.0.0",
         "eslint-plugin-unused-imports": "^3.1.0",
-        "express": "^4.17.1",
+        "express": "^5.0.0",
         "front-matter": "^4.0.2",
         "fs-extra": "^11.1.1",
         "fuse.js": "^7.0.0",
@@ -100,9 +100,9 @@
         "jest": "^29.6.1",
         "jest-axe": "^8.0.0",
         "jest-environment-jsdom": "^29.6.1",
-        "jest-puppeteer": "^10.0.0",
+        "jest-puppeteer": "^11.0.0",
         "jsdom": "^26.1.0",
-        "lighthouse": "^11.0.0",
+        "lighthouse": "^12.0.0",
         "lint-staged": "^15.2.0",
         "lodash": "^4.17.21",
         "mdn-polyfills": "^5.14.0",
@@ -114,7 +114,7 @@
         "prepend-file": "^2.0.1",
         "prettier": "^3.2.5",
         "prettier-plugin-jinja-template": "^1.4.0",
-        "puppeteer": "^22.0.0",
+        "puppeteer": "^24.0.0",
         "remark-cli": "^12.0.0",
         "remark-lint": "^9.1.2",
         "remark-preset-lint-recommended": "^6.1.3",