@ons/design-system 70.0.7 → 70.0.8

package/favicons/manifest.json

@@ -1,27 +1,27 @@
 {
-  "name": "Office for National Statistics",
-  "short_name": "ONS",
-  "icons": [
-    {
-        "src": "android-chrome-192x192.png",
-        "sizes": "192x192",
-        "type": "image/png"
-    },
-    {
-        "src": "android-chrome-512x512.png",
-        "sizes": "512x512",
-        "type": "image/png"
-    },
-    {
-      "src": "maskable_icon.png",
-      "sizes": "192x192",
-      "type": "image/png",
-      "purpose": "any maskable"
-    }
-  ],
-  "content_security_policy": "script-src 'self' https://cdn.ons.gov.uk; object-src 'self' https://cdn.ons.gov.uk;",
-  "theme_color": "#003B61",
-  "background_color": "#003B61",
-  "display": "standalone",
-  "start_url": "../"
+    "name": "Office for National Statistics",
+    "short_name": "ONS",
+    "icons": [
+        {
+            "src": "android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        },
+        {
+            "src": "maskable_icon.png",
+            "sizes": "192x192",
+            "type": "image/png",
+            "purpose": "any maskable"
+        }
+    ],
+    "content_security_policy": "script-src 'self' https://cdn.ons.gov.uk; object-src 'self' https://cdn.ons.gov.uk;",
+    "theme_color": "#003B61",
+    "background_color": "#003B61",
+    "display": "standalone",
+    "start_url": "../"
 }

package/js/abortable-fetch.js

@@ -1,30 +1,30 @@
 class AbortableFetch {
-  constructor(url, options) {
-    this.url = url;
-    this.options = options;
-    this.controller = new window.AbortController();
-    this.status = 'UNSENT';
-  }
+    constructor(url, options) {
+        this.url = url;
+        this.options = options;
+        this.controller = new window.AbortController();
+        this.status = 'UNSENT';
+    }
 
-  async send() {
-    this.status = 'LOADING';
-    try {
-      const response = await window.fetch(this.url, { signal: this.controller.signal, ...this.options });
-      const isResponseOK = (response.status >= 200 && response.status < 300) || response.status >= 400;
-      if (!isResponseOK) {
-        const error = new Error(`HTTP error! status: ${response.status}`);
-        error.response = response;
-        throw error;
-      }
-      return response;
-    } finally {
-      this.status = 'DONE';
+    async send() {
+        this.status = 'LOADING';
+        try {
+            const response = await window.fetch(this.url, { signal: this.controller.signal, ...this.options });
+            const isResponseOK = (response.status >= 200 && response.status < 300) || response.status >= 400;
+            if (!isResponseOK) {
+                const error = new Error(`HTTP error! status: ${response.status}`);
+                error.response = response;
+                throw error;
+            }
+            return response;
+        } finally {
+            this.status = 'DONE';
+        }
     }
-  }
 
-  abort() {
-    this.controller.abort();
-  }
+    abort() {
+        this.controller.abort();
+    }
 }
 
 export default (url, options) => new AbortableFetch(url, options);

package/js/analytics.js

@@ -3,71 +3,71 @@ import domready from './domready';
 export let trackEvent = () => {};
 
 if (window.google_tag_manager !== undefined) {
-  console.log('GA active');
-  trackEvent = (type, data) => {
-    gtag('event', type, { ...data });
-    console.log('Data sent to Data Layer');
-  };
+    console.log('GA active');
+    trackEvent = (type, data) => {
+        gtag('event', type, { ...data });
+        console.log('Data sent to Data Layer');
+    };
 } else {
-  console.log('Google analytics not connected');
+    console.log('Google analytics not connected');
 }
 
 export const trackElement = (el, type) => {
-  const attributes = el.attributes;
-  const eventData = {};
-  // Loop through all attributes of the element
-  for (let i = 0; i < attributes.length; i++) {
-    const attributeName = attributes[i].name;
-    // Check if the attribute starts with 'data-ga-'
-    if (attributeName.startsWith('data-ga-')) {
-      // Extract the key by removing 'data-ga-' prefix
-      const key = attributeName.replace('data-ga-', '').replace('-', '_');
-      // Use the attribute value as the value for the key
-      eventData[key] = el.getAttribute(attributeName);
+    const attributes = el.attributes;
+    const eventData = {};
+    // Loop through all attributes of the element
+    for (let i = 0; i < attributes.length; i++) {
+        const attributeName = attributes[i].name;
+        // Check if the attribute starts with 'data-ga-'
+        if (attributeName.startsWith('data-ga-')) {
+            // Extract the key by removing 'data-ga-' prefix
+            const key = attributeName.replace('data-ga-', '').replace('-', '_');
+            // Use the attribute value as the value for the key
+            eventData[key] = el.getAttribute(attributeName);
+        }
     }
-  }
-  return trackEvent(`ons_${type}`, eventData);
+    return trackEvent(`ons_${type}`, eventData);
 };
 
 export default function initAnalytics() {
-  let trackVisibleElements = [...document.querySelectorAll('[data-ga=visible]')];
+    let trackVisibleElements = [...document.querySelectorAll('[data-ga=visible]')];
 
-  const interval = window.setInterval(() => {
-    trackVisibleElements = trackVisibleElements.filter((element) => {
-      return element ? trackElement(element, 'visible') && false : true;
-    });
-    if (trackVisibleElements.length === 0) {
-      window.clearInterval(interval);
-    }
-  }, 200);
-
-  document.body.addEventListener('click', ({ target }) => {
-    if (target.getAttribute('data-ga') === 'click') {
-      return trackElement(target, 'click');
-    } else if (target.parentElement.getAttribute('data-ga') === 'click') {
-      return trackElement(target.parentElement, 'click');
-    }
-  });
-  [...document.querySelectorAll('[data-ga=error]')].map((element) => trackElement(element, 'error'));
+    const interval = window.setInterval(() => {
+        trackVisibleElements = trackVisibleElements.filter((element) => {
+            return element ? trackElement(element, 'visible') && false : true;
+        });
+        if (trackVisibleElements.length === 0) {
+            window.clearInterval(interval);
+        }
+    }, 200);
 
-  const afterPrint = () => {
-    return trackEvent({
-      event_tracked: 'true',
-      event_category: 'Print Intent',
-      event_action: 'Print Intent',
-      event_label: window.location.pathname.split('/').slice(-3).join('/'),
+    document.body.addEventListener('click', ({ target }) => {
+        if (target.getAttribute('data-ga') === 'click') {
+            return trackElement(target, 'click');
+        } else if (target.parentElement.getAttribute('data-ga') === 'click') {
+            return trackElement(target.parentElement, 'click');
+        }
     });
-  };
+    [...document.querySelectorAll('[data-ga=error]')].map((element) => trackElement(element, 'error'));
 
-  if (window.matchMedia) {
-    const mediaQueryList = window.matchMedia('print');
-    mediaQueryList.addListener(function (mql) {
-      if (!mql.matches) {
-        afterPrint();
-      }
-    });
-  }
-  window.onafterprint = afterPrint;
+    const afterPrint = () => {
+        return trackEvent({
+            event_tracked: 'true',
+            event_category: 'Print Intent',
+            event_action: 'Print Intent',
+            event_label: window.location.pathname.split('/').slice(-3).join('/'),
+        });
+    };
+
+    if (window.matchMedia) {
+        const mediaQueryList = window.matchMedia('print');
+        mediaQueryList.addListener(function (mql) {
+            if (!mql.matches) {
+                afterPrint();
+            }
+        });
+    }
+    window.onafterprint = afterPrint;
 }
 
 domready(initAnalytics);

package/js/cookies-functions.js

@@ -1,182 +1,182 @@
 export const DEFAULT_COOKIE_CONSENT = {
-  essential: true,
-  settings: false,
-  usage: false,
-  campaigns: false,
+    essential: true,
+    settings: false,
+    usage: false,
+    campaigns: false,
 };
 
 export const COOKIE_CATEGORIES = {
-  RH_SESSION: 'essential',
-  session: 'essential',
-  ons_cookie_policy: 'essential',
-  ons_cookie_message_displayed: 'essential',
-  _ga: 'usage',
-  _gid: 'usage',
-  _gat: 'usage',
-  _use_hitbox: 'campaigns',
-  VISITOR_INFO1_LIVE: 'campaigns',
-  _fbp: 'campaigns',
-  COOKIE_SUPPORT: 'essential',
-  GUEST_LANGUAGE_ID: 'essential',
-  JSESSIONID: 'essential',
-  ID: 'essential',
-  COMPANY_ID: 'essential',
-  USER_UUID: 'essential',
-  LFR_SESSION_STATE_: 'essential',
-  csfcfc: 'essential',
+    RH_SESSION: 'essential',
+    session: 'essential',
+    ons_cookie_policy: 'essential',
+    ons_cookie_message_displayed: 'essential',
+    _ga: 'usage',
+    _gid: 'usage',
+    _gat: 'usage',
+    _use_hitbox: 'campaigns',
+    VISITOR_INFO1_LIVE: 'campaigns',
+    _fbp: 'campaigns',
+    COOKIE_SUPPORT: 'essential',
+    GUEST_LANGUAGE_ID: 'essential',
+    JSESSIONID: 'essential',
+    ID: 'essential',
+    COMPANY_ID: 'essential',
+    USER_UUID: 'essential',
+    LFR_SESSION_STATE_: 'essential',
+    csfcfc: 'essential',
 };
 
 export function cookie(name, value, options) {
-  if (typeof value !== 'undefined') {
-    if (value === false || value === null) {
-      return setCookie(name, '', { days: -1 });
+    if (typeof value !== 'undefined') {
+        if (value === false || value === null) {
+            return setCookie(name, '', { days: -1 });
+        } else {
+            if (typeof options === 'undefined') {
+                options = { days: 30 };
+            }
+            return setCookie(name, value, options);
+        }
     } else {
-      if (typeof options === 'undefined') {
-        options = { days: 30 };
-      }
-      return setCookie(name, value, options);
+        return getCookie(name);
     }
-  } else {
-    return getCookie(name);
-  }
 }
 
 export function setDefaultConsentCookie() {
-  const defaultConsentCookie = JSON.stringify(DEFAULT_COOKIE_CONSENT).replace(/"/g, "'");
-  setCookie('ons_cookie_policy', defaultConsentCookie, { days: 365 });
+    const defaultConsentCookie = JSON.stringify(DEFAULT_COOKIE_CONSENT).replace(/"/g, "'");
+    setCookie('ons_cookie_policy', defaultConsentCookie, { days: 365 });
 }
 
 export function approveAllCookieTypes() {
-  let approvedConsent = {
-    essential: true,
-    settings: true,
-    usage: true,
-    campaigns: true,
-  };
-
-  setCookie('ons_cookie_policy', JSON.stringify(approvedConsent).replace(/"/g, "'"), { days: 365 });
+    let approvedConsent = {
+        essential: true,
+        settings: true,
+        usage: true,
+        campaigns: true,
+    };
+
+    setCookie('ons_cookie_policy', JSON.stringify(approvedConsent).replace(/"/g, "'"), { days: 365 });
 }
 
 export function getConsentCookie() {
-  const consentCookie = cookie('ons_cookie_policy');
-  let consentCookieObj;
+    const consentCookie = cookie('ons_cookie_policy');
+    let consentCookieObj;
 
-  if (consentCookie) {
-    consentCookieObj = JSON.parse(consentCookie.replace(/'/g, '"'));
+    if (consentCookie) {
+        consentCookieObj = JSON.parse(consentCookie.replace(/'/g, '"'));
 
-    if (typeof consentCookieObj !== 'object' && consentCookieObj !== null) {
-      consentCookieObj = JSON.parse(consentCookieObj.replace(/'/g, '"'));
+        if (typeof consentCookieObj !== 'object' && consentCookieObj !== null) {
+            consentCookieObj = JSON.parse(consentCookieObj.replace(/'/g, '"'));
+        }
+    } else {
+        return null;
     }
-  } else {
-    return null;
-  }
-  return consentCookieObj;
+    return consentCookieObj;
 }
 
 export function setConsentCookie(options) {
-  const domain = getDomain(document.domain);
-
-  let cookieConsent = getConsentCookie();
-  if (!cookieConsent) {
-    cookieConsent = JSON.parse(JSON.stringify(DEFAULT_COOKIE_CONSENT).replace(/'/g, '"'));
-  }
-  for (let cookieType in options) {
-    cookieConsent[cookieType] = options[cookieType];
-    if (!options[cookieType]) {
-      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;
-          }
+    const domain = getDomain(document.domain);
+
+    let cookieConsent = getConsentCookie();
+    if (!cookieConsent) {
+        cookieConsent = JSON.parse(JSON.stringify(DEFAULT_COOKIE_CONSENT).replace(/'/g, '"'));
+    }
+    for (let cookieType in options) {
+        cookieConsent[cookieType] = options[cookieType];
+        if (!options[cookieType]) {
+            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;
+                    }
+                }
+            }
         }
-      }
     }
-  }
-  setCookie('ons_cookie_policy', JSON.stringify(cookieConsent).replace(/"/g, "'"), { days: 365 });
+    setCookie('ons_cookie_policy', JSON.stringify(cookieConsent).replace(/"/g, "'"), { days: 365 });
 }
 
 export function checkConsentCookieCategory(cookieName, cookieCategory) {
-  let currentConsentCookie = getConsentCookie();
-  if (!currentConsentCookie && COOKIE_CATEGORIES[cookieName]) {
-    return true;
-  }
-
-  currentConsentCookie = getConsentCookie();
-  try {
-    return currentConsentCookie[cookieCategory];
-  } catch (e) {
-    console.error(e);
-    return false;
-  }
+    let currentConsentCookie = getConsentCookie();
+    if (!currentConsentCookie && COOKIE_CATEGORIES[cookieName]) {
+        return true;
+    }
+
+    currentConsentCookie = getConsentCookie();
+    try {
+        return currentConsentCookie[cookieCategory];
+    } catch (e) {
+        console.error(e);
+        return false;
+    }
 }
 
 export function checkConsentCookie(cookieName, cookieValue) {
-  // If we're setting the consent, session or RH_SESSION cookie OR deleting a cookie, allow by default
-  if (cookieName === 'ons_cookie_policy' || cookieValue === null || cookieValue === false) {
-    return true;
-  }
-
-  if (COOKIE_CATEGORIES[cookieName]) {
-    const cookieCategory = COOKIE_CATEGORIES[cookieName];
-    return checkConsentCookieCategory(cookieName, cookieCategory);
-  } else {
-    // Deny the cookie if it is not known to us
-    return false;
-  }
+    // If we're setting the consent, session or RH_SESSION cookie OR deleting a cookie, allow by default
+    if (cookieName === 'ons_cookie_policy' || cookieValue === null || cookieValue === false) {
+        return true;
+    }
+
+    if (COOKIE_CATEGORIES[cookieName]) {
+        const cookieCategory = COOKIE_CATEGORIES[cookieName];
+        return checkConsentCookieCategory(cookieName, cookieCategory);
+    } else {
+        // Deny the cookie if it is not known to us
+        return false;
+    }
 }
 
 export function setCookie(name, value, options) {
-  const domain = getDomain(document.domain);
-  let setDomain = '';
+    const domain = getDomain(document.domain);
+    let setDomain = '';
 
-  if (domain.indexOf('localhost') === -1) {
-    setDomain = '; domain=' + domain;
-  }
-
-  if (checkConsentCookie(name, value)) {
-    if (typeof options === 'undefined') {
-      options = {};
+    if (domain.indexOf('localhost') === -1) {
+        setDomain = '; domain=' + domain;
     }
 
-    let cookieString = name + '=' + value + setDomain + '; 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';
+    if (checkConsentCookie(name, value)) {
+        if (typeof options === 'undefined') {
+            options = {};
+        }
+
+        let cookieString = name + '=' + value + setDomain + '; 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';
+        }
+        document.cookie = cookieString;
     }
-    document.cookie = cookieString;
-  }
 }
 
 export function getCookie(name) {
-  const nameEQ = name + '=';
-  const cookies = document.cookie.split(';');
-  for (let i = 0, len = cookies.length; i < len; i++) {
-    let cookie = cookies[i];
-    while (cookie.charAt(0) === ' ') {
-      cookie = cookie.substring(1, cookie.length);
-    }
-    if (cookie.indexOf(nameEQ) === 0) {
-      return decodeURIComponent(cookie.substring(nameEQ.length));
+    const nameEQ = name + '=';
+    const cookies = document.cookie.split(';');
+    for (let i = 0, len = cookies.length; i < len; i++) {
+        let cookie = cookies[i];
+        while (cookie.charAt(0) === ' ') {
+            cookie = cookie.substring(1, cookie.length);
+        }
+        if (cookie.indexOf(nameEQ) === 0) {
+            return decodeURIComponent(cookie.substring(nameEQ.length));
+        }
     }
-  }
-  return null;
+    return null;
 }
 
 export function getDomain(domain) {
-  let i = 0,
-    domainName = domain,
-    p = domainName.split('.'),
-    s = '_gd' + new Date().getTime();
-  while (i < p.length - 1 && document.cookie.indexOf(s + '=' + s) == -1) {
-    domainName = p.slice(-1 - ++i).join('.');
-    document.cookie = s + '=' + s + ';domain=' + domainName + ';';
-  }
-  document.cookie = s + '=;expires=Thu, 01 Jan 1970 00:00:01 GMT;domain=' + domainName + ';';
-  return domainName;
+    let i = 0,
+        domainName = domain,
+        p = domainName.split('.'),
+        s = '_gd' + new Date().getTime();
+    while (i < p.length - 1 && document.cookie.indexOf(s + '=' + s) == -1) {
+        domainName = p.slice(-1 - ++i).join('.');
+        document.cookie = s + '=' + s + ';domain=' + domainName + ';';
+    }
+    document.cookie = s + '=;expires=Thu, 01 Jan 1970 00:00:01 GMT;domain=' + domainName + ';';
+    return domainName;
 }

package/js/cookies-settings.dom.js

@@ -1,13 +1,13 @@
 import domready from './domready';
 
 async function cookiesSettings() {
-  const cookiesSettings = [...document.querySelectorAll('[data-module=cookie-settings]')];
-  if (cookiesSettings.length) {
-    const CookiesSettings = (await import('./cookies-settings')).default;
-    cookiesSettings.forEach((form) => {
-      new CookiesSettings(form);
-    });
-  }
+    const cookiesSettings = [...document.querySelectorAll('[data-module=cookie-settings]')];
+    if (cookiesSettings.length) {
+        const CookiesSettings = (await import('./cookies-settings')).default;
+        cookiesSettings.forEach((form) => {
+            new CookiesSettings(form);
+        });
+    }
 }
 
 domready(cookiesSettings);