@ons/design-system 44.0.2 → 45.0.1

package/favicons/census/cy/browserconfig.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square70x70logo src="mstile-70x70.png"/>
+            <square150x150logo src="mstile-150x150.png"/>
+            <square310x310logo src="mstile-310x310.png"/>
+            <wide310x150logo src="mstile-310x150.png"/>
+            <TileColor>#902082</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

package/favicons/census/cy/manifest.json

@@ -0,0 +1,20 @@
+{
+  "name": "Cyfrifiad2021",
+  "short_name": "Cyfrifiad2021",
+  "icons": [
+    {
+      "src": "android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "content_security_policy": "script-src 'self' https://cdn.ons.gov.uk; object-src 'self' https://cdn.ons.gov.uk;",
+  "theme_color": "#902082",
+  "background_color": "#902082",
+  "display": "standalone"
+}

package/favicons/census/cy/safari-pinned-tab.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
+    <path d="M13,24C6.4,24,1,18.6,1,12C1,5.4,6.4,0,13,0c3.3,0,6.5,1.4,8.8,3.8c1,1.1,1,2.8-0.1,3.9c-1.1,1-2.8,1-3.9-0.1c-1.3-1.3-3-2.1-4.8-2.1c-3.6,0-6.5,2.9-6.5,6.5c0,3.6,2.9,6.5,6.5,6.5c1.8,0,3.5-0.7,4.8-2.1c1-1.1,2.8-1.2,3.9-0.1c1.1,1,1.2,2.8,0.1,3.9C19.5,22.6,16.3,24,13,24" fill-rule="nonzero"></path>
+</svg>

package/favicons/census/cy/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "Cyfrifiad2021",
+    "short_name": "Cyfrifiad2021",
+    "icons": [
+        {
+            "src": "android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#902082",
+    "background_color": "#902082",
+    "display": "standalone"
+}

package/favicons/census/en/browserconfig.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square70x70logo src="mstile-70x70.png"/>
+            <square150x150logo src="mstile-150x150.png"/>
+            <square310x310logo src="mstile-310x310.png"/>
+            <wide310x150logo src="mstile-310x150.png"/>
+            <TileColor>#902082</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

package/favicons/census/en/manifest.json

@@ -0,0 +1,20 @@
+{
+  "name": "Census2021",
+  "short_name": "Census2021",
+  "icons": [
+    {
+      "src": "android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "content_security_policy": "script-src 'self' https://cdn.ons.gov.uk; object-src 'self' https://cdn.ons.gov.uk;",
+  "theme_color": "#902082",
+  "background_color": "#902082",
+  "display": "standalone"
+}

package/favicons/census/en/safari-pinned-tab.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
+    <path d="M13,24C6.4,24,1,18.6,1,12C1,5.4,6.4,0,13,0c3.3,0,6.5,1.4,8.8,3.8c1,1.1,1,2.8-0.1,3.9c-1.1,1-2.8,1-3.9-0.1c-1.3-1.3-3-2.1-4.8-2.1c-3.6,0-6.5,2.9-6.5,6.5c0,3.6,2.9,6.5,6.5,6.5c1.8,0,3.5-0.7,4.8-2.1c1-1.1,2.8-1.2,3.9-0.1c1.1,1,1.2,2.8,0.1,3.9C19.5,22.6,16.3,24,13,24" fill-rule="nonzero"></path>
+</svg>

package/favicons/census/en/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "Census2021",
+    "short_name": "Census2021",
+    "icons": [
+        {
+            "src": "android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#902082",
+    "background_color": "#902082",
+    "display": "standalone"
+}

package/js/abortable-fetch.js

@@ -0,0 +1,55 @@
+class AbortableFetch {
+  constructor(url, options) {
+    this.url = url;
+    this.options = options;
+    this.controller = new window.AbortController();
+    this.status = 'UNSENT';
+  }
+
+  send() {
+    this.status = 'LOADING';
+
+    return new Promise((resolve, reject) => {
+      abortableFetch(this.url, { signal: this.controller.signal, ...this.options })
+        .then(response => {
+          if (response.status >= 200 && response.status < 300) {
+            this.status = 'DONE';
+            resolve(response);
+          } else if (response.status >= 400) {
+            this.status = 'DONE';
+            resolve(response);
+          } else {
+            this.status = 'DONE';
+            reject(response);
+          }
+        })
+        .catch(error => {
+          this.status = 'undefined';
+          reject(error);
+        });
+    });
+  }
+
+  abort() {
+    this.controller.abort();
+  }
+}
+
+function abortableFetch(url, options) {
+  return window
+    .fetch(url, options)
+    .then(response => {
+      if (response) {
+        return response;
+      } else {
+        const error = new Error(response.status);
+        error.response = response;
+        throw error;
+      }
+    })
+    .catch(error => {
+      throw error;
+    });
+}
+
+export default (url, options) => new AbortableFetch(url, options);

package/js/analytics.js

@@ -0,0 +1,70 @@
+import domready from './domready';
+
+export let trackEvent = (event, data) => {
+  console.log(`[Analytics disabled] Event: ${event}`); // eslint-disable-line no-console
+  console.log(data); // eslint-disable-line no-console
+};
+
+if (typeof window.ga !== 'undefined') {
+  trackEvent = (evt, data) => {
+    window.ga(evt, data);
+  };
+}
+
+export const trackElement = el => {
+  return trackEvent('send', {
+    hitType: 'event',
+    eventCategory: el.getAttribute('data-ga-category') || '',
+    eventAction: el.getAttribute('data-ga-action') || '',
+    eventLabel: el.getAttribute('data-ga-label') || '',
+  });
+};
+
+const isVisible = el => {
+  return !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length);
+};
+
+export default function initAnalytics() {
+  let trackVisibleElements = [...document.querySelectorAll('[data-ga=visible]')];
+
+  const interval = window.setInterval(() => {
+    trackVisibleElements = trackVisibleElements.filter(element => {
+      return isVisible(element) ? trackElement(element) && false : true;
+    });
+    if (trackVisibleElements.length === 0) {
+      window.clearInterval(interval);
+    }
+  }, 200);
+
+  [...document.querySelectorAll('[data-ga=error]')].map(trackElement);
+
+  document.body.addEventListener('click', ({ target }) => {
+    if (target.getAttribute('data-ga') === 'click') {
+      trackElement(target);
+    }
+  });
+
+  const afterPrint = () => {
+    return trackEvent('send', {
+      hitType: 'event',
+      eventCategory: 'Print Intent',
+      eventAction: 'Print Intent',
+      eventLabel: 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

@@ -0,0 +1,182 @@
+export const DEFAULT_COOKIE_CONSENT = {
+  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',
+};
+
+export function cookie(name, value, options) {
+  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 {
+    return getCookie(name);
+  }
+}
+
+export function setDefaultConsentCookie() {
+  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 });
+}
+
+export function getConsentCookie() {
+  const consentCookie = cookie('ons_cookie_policy');
+  let consentCookieObj;
+
+  if (consentCookie) {
+    consentCookieObj = JSON.parse(consentCookie.replace(/'/g, '"'));
+
+    if (typeof consentCookieObj !== 'object' && consentCookieObj !== null) {
+      consentCookieObj = JSON.parse(consentCookieObj.replace(/'/g, '"'));
+    }
+  } else {
+    return null;
+  }
+  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;
+          }
+        }
+      }
+    }
+  }
+  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;
+  }
+}
+
+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;
+  }
+}
+
+export function setCookie(name, value, options) {
+  const domain = getDomain(document.domain);
+  let setDomain = '';
+
+  if (domain.indexOf('localhost') === -1) {
+    setDomain = '; domain=' + domain;
+  }
+
+  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;
+  }
+}
+
+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));
+    }
+  }
+  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;
+}

package/js/cookies-settings.dom.js

@@ -0,0 +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);
+    });
+  }
+}
+
+domready(cookiesSettings);

package/js/cookies-settings.js

@@ -0,0 +1,105 @@
+import { unset } from 'lodash';
+
+import { cookie, setConsentCookie, setCookie, setDefaultConsentCookie } from './cookies-functions';
+
+export default class CookiesSettings {
+  constructor(component) {
+    this.component = component;
+    this.returnLink = document.querySelector('.ons-js-return-link');
+    this.confirmationMessage = document.querySelector('.ons-cookies-confirmation-message');
+    this.cookiesBanner = document.querySelector('.ons-cookies-banner');
+
+    this.component.addEventListener('submit', this.submitSettingsForm.bind(this));
+    this.returnLink.addEventListener('click', this.goBackToPrevPage.bind(this));
+
+    this.setInitialFormValues();
+  }
+
+  setInitialFormValues() {
+    if (!cookie('ons_cookie_policy')) {
+      setDefaultConsentCookie();
+    }
+
+    const currentConsentCookie = cookie('ons_cookie_policy');
+    let currentConsentCookieJSON = JSON.parse(currentConsentCookie.replace(/'/g, '"'));
+
+    try {
+      unset(currentConsentCookieJSON, 'essential');
+    } catch (e) {
+      console.error(e);
+    }
+
+    for (let cookieType in currentConsentCookieJSON) {
+      let radioButton;
+
+      if (currentConsentCookieJSON[cookieType]) {
+        radioButton = document.querySelector('input[name=cookies-' + cookieType + '][value=on]');
+      } else {
+        radioButton = document.querySelector('input[name=cookies-' + cookieType + '][value=off]');
+      }
+
+      radioButton.checked = true;
+    }
+  }
+
+  submitSettingsForm(event) {
+    event.preventDefault();
+
+    if (!cookie('ons_cookie_message_displayed')) {
+      setCookie('ons_cookie_message_displayed', true, { days: 365 });
+    }
+
+    const formInputs = event.target.getElementsByTagName('input');
+    let options = {};
+
+    for (let i = 0; i < formInputs.length; i++) {
+      const input = formInputs[i];
+      if (input.checked) {
+        const name = input.name.replace('cookies-', '');
+        const value = input.value === 'on' ? true : false;
+
+        options[name] = value;
+
+        if (name === 'usage' && value === true) {
+          if (typeof loadGTM != 'undefined') {
+            loadGTM();
+          }
+        }
+      }
+    }
+
+    setConsentCookie(options);
+
+    this.showConfirmationMessage();
+    this.hideCookiesBanner();
+
+    return false;
+  }
+
+  showConfirmationMessage() {
+    this.confirmationMessage.classList.remove('ons-u-d-no');
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+    this.setConfirmationMessageAttributes();
+  }
+
+  hideCookiesBanner() {
+    if (this.cookiesBanner) {
+      this.cookiesBanner.style.display = 'none';
+    }
+  }
+
+  setConfirmationMessageAttributes() {
+    this.confirmationMessage.setAttribute('role', 'alert');
+    if (document.referrer != '') {
+      this.confirmationMessage.setAttribute('autofocus', 'autofocus');
+      this.confirmationMessage.setAttribute('tabindex', '-1');
+      this.confirmationMessage.focus();
+    } else {
+      this.returnLink.style.display = 'none';
+    }
+  }
+
+  goBackToPrevPage() {
+    window.history.back();
+  }
+}

package/js/domready.js

@@ -0,0 +1,17 @@
+let callbacks = [];
+
+const onReady = () => {
+  callbacks.forEach(fn => fn.call());
+  callbacks = [];
+  window.onsDOMReady = true;
+};
+
+export default function ready(fn) {
+  if (document.readyState === 'loading') {
+    callbacks.push(fn);
+  } else {
+    fn.call();
+  }
+}
+
+document.addEventListener('DOMContentLoaded', onReady);

package/js/fetch.js

@@ -0,0 +1,19 @@
+export function checkStatus(response) {
+  if (response.status >= 200 && response.status < 300) {
+    return response;
+  } else {
+    const error = new Error(response.statusText);
+    error.response = response;
+    throw error;
+  }
+}
+
+export default function(url, options) {
+  return window
+    .fetch(url, {
+      method: 'GET',
+      credentials: 'include',
+      ...options,
+    })
+    .then(checkStatus);
+}

package/js/inpagelink.dom.js

@@ -0,0 +1,13 @@
+import domready from './domready';
+
+async function initialise() {
+  const links = [...document.getElementsByClassName('ons-js-inpagelink')];
+
+  if (links.length) {
+    const inPageLinks = (await import('./inpagelink')).default;
+
+    inPageLinks(links);
+  }
+}
+
+domready(initialise);