@ons/design-system 74.0.0-next.14 → 74.0.0-next.16

package/js/chart.js

@@ -1,4 +1,2 @@
 import '../components/chart/chart';
 import '../components/chart/chart.dom';
-import '../components/chart/chart-iframe-resize';
-import '../components/chart/chart-iframe-resize.dom';

package/js/cookies-functions.js

@@ -74,7 +74,6 @@ export function getConsentCookie() {
 }
 
 export function setConsentCookie(options) {
-    const domain = getDomain(document.domain);
     let cookieConsent = getConsentCookie();
     if (!cookieConsent) {
         cookieConsent = JSON.parse(JSON.stringify(DEFAULT_COOKIE_CONSENT).replace(/'/g, '"'));
@@ -85,10 +84,6 @@ export function setConsentCookie(options) {
             for (let cookies in COOKIE_CATEGORIES) {
                 if (COOKIE_CATEGORIES[cookies] === cookieType) {
                     cookie(cookies, null);
-                    if (cookie(cookies)) {
-                        const cookieString = cookies + '=; expires=' + new Date() + '; domain=' + domain + '; path=/';
-                        document.cookie = cookieString;
-                    }
                 }
             }
         }
@@ -127,27 +122,25 @@ export function checkConsentCookie(cookieName, cookieValue) {
 }
 
 export function setCookie(name, value, options) {
-    const domain = getDomain(document.domain);
-    let setDomain = '';
+    if (typeof options === 'undefined') {
+        options = {};
+    }
 
-    if (domain.indexOf('localhost') === -1) {
-        setDomain = '; domain=' + domain;
+    if (options.days && options.days < 0) {
+        deleteCookie(name);
+        return;
     }
 
     if (checkConsentCookie(name, value)) {
-        if (typeof options === 'undefined') {
-            options = {};
-        }
+        const secure = getSecureAttribute();
 
-        let cookieString = name + '=' + value + setDomain + '; path=/';
+        let cookieString = name + '=' + value + getCookieDomainAttribute() + '; path=/';
         if (options.days) {
             const date = new Date();
             date.setTime(date.getTime() + options.days * 24 * 60 * 60 * 1000);
             cookieString = cookieString + '; expires=' + date.toGMTString();
         }
-        if (document.location.protocol === 'https:') {
-            cookieString = cookieString + '; Secure';
-        }
+        cookieString = cookieString + secure;
         document.cookie = cookieString;
     }
 }
@@ -167,38 +160,34 @@ export function getCookie(name) {
     return null;
 }
 
-function getCookieDomainPolicy() {
+function getCookieDomain() {
     const banner = document.querySelector('.ons-cookies-banner');
-    const policy = banner ? banner.getAttribute('data-ons-cookie-domain-policy') : null;
-
-    // plan: add 'exact-host' policy in future and retire 'legacy' and 'day1'
-    switch (policy) {
-        case 'legacy':
-        case 'day1':
-            return policy;
-        default:
-            return 'legacy';
+    const configuredDomain = banner ? banner.getAttribute('data-ons-cookie-domain') : null;
+
+    if (configuredDomain !== null) {
+        return configuredDomain;
+    } else {
+        return document.location.hostname;
     }
 }
 
-export function getDomain(domain, cookieHandler = document) {
-    const cookieDomainPolicy = getCookieDomainPolicy();
+function getCookieDomainAttribute() {
+    const domain = getCookieDomain();
 
-    if (cookieDomainPolicy === 'legacy' && domain.startsWith('www.')) {
-        domain = domain.substring(4);
+    if (!domain) {
+        return '';
     }
 
-    let i = 0,
-        domainName = domain,
-        p = domainName.split('.'),
-        s = '_gd' + new Date().getTime();
-    while (i < p.length - 1 && cookieHandler.cookie.indexOf(s + '=' + s) == -1) {
-        // Loop until we find a valid cookie set at the domain or until we've checked all possible domains
-        domainName = p.slice(i, p.length).join('.');
-        cookieHandler.cookie = s + '=' + s + ';domain=' + domainName + ';';
+    return '; domain=' + domain;
+}
 
-        i++;
-    }
-    cookieHandler.cookie = s + '=;expires=Thu, 01 Jan 1970 00:00:01 GMT;domain=' + domainName + ';';
-    return domainName;
+function deleteCookie(name) {
+    const expires = new Date(0).toGMTString();
+    const secure = getSecureAttribute();
+
+    document.cookie = name + '=' + getCookieDomainAttribute() + '; path=/; expires=' + expires + secure;
+}
+
+function getSecureAttribute() {
+    return document.location.protocol === 'https:' ? '; Secure' : '';
 }

package/js/cookies-functions.spec.js

@@ -1,65 +1,109 @@
-/** @jest-environment jsdom */
+/**
+ * @jest-environment jsdom
+ * @jest-environment-options {"url":"https://www.ons.gov.uk/"}
+ */
 
-import { getDomain } from './cookies-functions';
+import { setConsentCookie, setCookie } from './cookies-functions';
+
+let cookieAssignments = [];
 let mockCookieStore = {};
 
-// Mocking document.cookie which is used for setting domain name in `getDomain()`
-export const setMockcookie = {
-    get cookie() {
-        return Object.entries(mockCookieStore)
-            .map(([key, value]) => `${key}=${value}`)
-            .join('; ');
-    },
-    set cookie(value) {
-        const domainMatch = value.match(/domain=([^;]+)/i);
-        const domain = domainMatch?.[1]?.trim();
-
-        // Simulate failure to set cookie on this domain
-        if (domain === 'new-website.ons.gov.uk') return;
-
-        const [key, val] = value.split('=');
-        mockCookieStore[key] = val.split(';')[0];
-    },
-};
-
-describe('script: getDomain()', () => {
+function setCookieDomain(domain) {
+    const banner = document.createElement('div');
+    banner.className = 'ons-cookies-banner';
+    banner.setAttribute('data-ons-cookie-domain', domain);
+    document.body.appendChild(banner);
+}
+
+function getLastCookieAssignment() {
+    return cookieAssignments[cookieAssignments.length - 1];
+}
+
+describe('script: cookies-functions', () => {
     beforeEach(() => {
-        mockCookieStore = {}; // clear the cookie between tests
+        cookieAssignments = [];
+        mockCookieStore = {};
         document.body.innerHTML = '';
+
+        Object.defineProperty(document, 'cookie', {
+            get() {
+                return Object.entries(mockCookieStore)
+                    .map(([key, value]) => `${key}=${value}`)
+                    .join('; ');
+            },
+            set(value) {
+                cookieAssignments.push(value);
+
+                const [key, val] = value.split('=');
+                if (value.includes('expires=Thu, 01 Jan 1970')) {
+                    delete mockCookieStore[key];
+                } else {
+                    mockCookieStore[key] = val.split(';')[0];
+                }
+            },
+            configurable: true,
+        });
     });
 
-    test('should return service-manual.ons.gov.uk as the domain name when cookies can be set at the full subdomain', () => {
-        const result = getDomain('service-manual.ons.gov.uk', setMockcookie);
-        expect(result).toBe('service-manual.ons.gov.uk');
+    test('sets a domain cookie using the current hostname by default', () => {
+        setCookie('ons_cookie_policy', 'test-value', { days: 365 });
+
+        expect(cookieAssignments).toHaveLength(1);
+        expect(getLastCookieAssignment()).toContain('ons_cookie_policy=test-value; domain=www.ons.gov.uk; path=/');
     });
 
-    test('should remove `www` from the domain name www.ons.gov.uk', () => {
-        const result = getDomain('www.ons.gov.uk', setMockcookie);
-        expect(result).toBe('ons.gov.uk');
+    test('does not expire other scopes before setting banner state', () => {
+        setCookie('ons_cookie_message_displayed', 'true', { days: 365 });
+
+        expect(cookieAssignments).toHaveLength(1);
+        expect(getLastCookieAssignment()).toContain('ons_cookie_message_displayed=true; domain=www.ons.gov.uk; path=/');
     });
 
-    test('removes `www` when cookieDomainPolicy is `legacy`', () => {
-        const banner = document.createElement('div');
-        banner.className = 'ons-cookies-banner';
-        banner.setAttribute('data-ons-cookie-domain-policy', 'legacy');
-        document.body.appendChild(banner);
+    test('does not expire other scopes before setting other cookie categories', () => {
+        setCookie('_ga', 'test-value', { days: 365 });
 
-        const result = getDomain('www.ons.gov.uk', setMockcookie);
-        expect(result).toBe('ons.gov.uk');
+        expect(cookieAssignments).toHaveLength(1);
+        expect(getLastCookieAssignment()).toContain('_ga=test-value; domain=www.ons.gov.uk; path=/');
     });
 
-    test('does not remove `www` when cookieDomainPolicy is `day1`', () => {
-        const banner = document.createElement('div');
-        banner.className = 'ons-cookies-banner';
-        banner.setAttribute('data-ons-cookie-domain-policy', 'day1');
-        document.body.appendChild(banner);
+    test('sets domain cookies when `domain` is provided', () => {
+        setCookieDomain('census.gov.uk');
+
+        setCookie('ons_cookie_policy', 'test-value', { days: 365 });
 
-        const result = getDomain('www.ons.gov.uk', setMockcookie);
-        expect(result).toBe('www.ons.gov.uk');
+        expect(getLastCookieAssignment()).toContain('ons_cookie_policy=test-value; domain=census.gov.uk; path=/');
     });
 
-    test('returns `ons.gov.uk` as the domain name when cookies can not be set at subdomain `new-website.ons.gov.uk`', () => {
-        const result = getDomain('new-website.ons.gov.uk', setMockcookie);
-        expect(result).toBe('ons.gov.uk');
+    test('sets host-only cookies when `domain` is explicitly false', () => {
+        setCookieDomain('');
+
+        setCookie('ons_cookie_policy', 'test-value', { days: 365 });
+
+        expect(cookieAssignments).toHaveLength(1);
+        expect(getLastCookieAssignment()).toContain('ons_cookie_policy=test-value; path=/');
+        expect(getLastCookieAssignment()).not.toMatch(/; domain=/i);
+    });
+
+    test('deletes only the default domain scope', () => {
+        setCookie('_ga', null, { days: -1 });
+
+        expect(cookieAssignments).toEqual(['_ga=; domain=www.ons.gov.uk; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT; Secure']);
+    });
+
+    test('deletes only the configured domain scope', () => {
+        setCookieDomain('census.gov.uk');
+
+        setCookie('_ga', null, { days: -1 });
+
+        expect(cookieAssignments).toEqual(['_ga=; domain=census.gov.uk; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT; Secure']);
+    });
+
+    test('deletes category cookies when consent is rejected', () => {
+        mockCookieStore.ons_cookie_policy = "{'essential':true,'settings':true,'usage':true,'campaigns':true}";
+        mockCookieStore._ga = 'test-value';
+
+        setConsentCookie({ usage: false });
+
+        expect(cookieAssignments).toContain('_ga=; domain=www.ons.gov.uk; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT; Secure');
     });
 });

package/layout/_template.njk

@@ -263,7 +263,7 @@
             (function() {
                 var s = [ '{{ assetsUrl }}/scripts/main.js' ],
                 c = document.createElement('script');
-                var hasCharts = !!document.querySelector('[data-highcharts-base-chart], .ons-chart__iframe-wrapper iframe');
+                var hasCharts = !!document.querySelector('[data-highcharts-base-chart]');
 
                 if (hasCharts) {
                     s.push('{{ assetsUrl }}/scripts/chart.js');

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@ons/design-system",
     "description": "ONS Design System built CSS, JS, and Nunjucks templates",
-    "version": "74.0.0-next.14",
+    "version": "74.0.0-next.16",
     "main": "index.js",
     "license": "MIT",
     "author": {
@@ -144,8 +144,7 @@
         "access": "public"
     },
     "dependencies": {
-        "highcharts": "12.1.2",
-        "pym.js": "1.3.2"
+        "highcharts": "12.1.2"
     },
     "resolutions": {
         "backstopjs/puppeteer": "25.11.0",