@ons/design-system 70.0.7 → 70.0.9

package/js/cookies-settings.js

@@ -3,105 +3,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');
+    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.component.addEventListener('submit', this.submitSettingsForm.bind(this));
+        this.returnLink?.addEventListener('click', this.goBackToPrevPage.bind(this));
 
-    this.setInitialFormValues();
-  }
-
-  setInitialFormValues() {
-    if (!cookie('ons_cookie_policy')) {
-      setDefaultConsentCookie();
+        this.setInitialFormValues();
     }
 
-    const currentConsentCookie = cookie('ons_cookie_policy');
-    let currentConsentCookieJSON = JSON.parse(currentConsentCookie.replace(/'/g, '"'));
+    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);
-    }
+        try {
+            unset(currentConsentCookieJSON, 'essential');
+        } catch (e) {
+            console.error(e);
+        }
 
-    for (let cookieType in currentConsentCookieJSON) {
-      let radioButton;
+        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]`);
-      }
+            if (currentConsentCookieJSON[cookieType]) {
+                radioButton = document.querySelector(`input[name=cookies-${cookieType}][value=on]`);
+            } else {
+                radioButton = document.querySelector(`input[name=cookies-${cookieType}][value=off]`);
+            }
 
-      if (radioButton) {
-        radioButton.checked = true;
-      }
+            if (radioButton) {
+                radioButton.checked = true;
+            }
+        }
     }
-  }
 
-  submitSettingsForm(event) {
-    event.preventDefault();
+    submitSettingsForm(event) {
+        event.preventDefault();
 
-    if (!cookie('ons_cookie_message_displayed')) {
-      setCookie('ons_cookie_message_displayed', true, { days: 365 });
-    }
+        if (!cookie('ons_cookie_message_displayed')) {
+            setCookie('ons_cookie_message_displayed', true, { days: 365 });
+        }
 
-    const formInputs = event.target.getElementsByTagName('input');
-    let options = {};
+        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;
+        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;
+                options[name] = value;
 
-        if (name === 'usage' && value === true) {
-          if (typeof loadGTM != 'undefined') {
-            loadGTM();
-          }
+                if (name === 'usage' && value === true) {
+                    if (typeof loadGTM != 'undefined') {
+                        loadGTM();
+                    }
+                }
+            }
         }
-      }
-    }
 
-    setConsentCookie(options);
+        setConsentCookie(options);
 
-    this.showConfirmationMessage();
-    this.hideCookiesBanner();
+        this.showConfirmationMessage();
+        this.hideCookiesBanner();
 
-    return false;
-  }
+        return false;
+    }
 
-  showConfirmationMessage() {
-    this.confirmationMessage.classList.remove('ons-u-d-no');
-    document.body.scrollTop = document.documentElement.scrollTop = 0;
-    this.setConfirmationMessageAttributes();
-  }
+    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';
+    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';
+
+    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();
-  }
+    goBackToPrevPage() {
+        window.history.back();
+    }
 }

package/js/cookies-settings.spec.js

@@ -2,9 +2,9 @@ import { renderComponent, setTestPage } from '../tests/helpers/rendering';
 
 const EXAMPLE_COOKIES_SETTINGS_PAGE = `
   ${renderComponent('cookies-banner', {
-    statementTitle: 'Tell us whether you accept cookies',
-    statementText: 'We use <a href="#0">cookies to collect information</a> about how you use census.gov.uk.',
-    confirmationText: 'You’ve accepted all cookies. You can <a href="#0">change your cookie preferences</a> at any time.',
+      statementTitle: 'Tell us whether you accept cookies',
+      statementText: 'We use <a href="#0">cookies to collect information</a> about how you use census.gov.uk.',
+      confirmationText: 'You’ve accepted all cookies. You can <a href="#0">change your cookie preferences</a> at any time.',
   })}
 
   <form data-module="cookie-settings">
@@ -37,142 +37,142 @@ const EXAMPLE_PART_COOKIES_SETTINGS_PAGE = `
 `;
 
 describe('script: cookies-settings', () => {
-  beforeEach(async () => {
-    const client = await page.target().createCDPSession();
-    await client.send('Network.clearBrowserCookies');
-  });
-
-  it('sets a consent cookie by default', async () => {
-    await setTestPage('/test', EXAMPLE_COOKIES_SETTINGS_PAGE);
-
-    const cookies = await page.cookies();
-    const ons_cookie_policy = cookies.find((cookie) => cookie.name === 'ons_cookie_policy');
-    const policy = JSON.parse(ons_cookie_policy.value.replace(/'/g, '"'));
-
-    expect(policy).toEqual({
-      essential: true,
-      settings: false,
-      usage: false,
-      campaigns: false,
+    beforeEach(async () => {
+        const client = await page.target().createCDPSession();
+        await client.send('Network.clearBrowserCookies');
     });
-  });
 
-  it('sets all radio buttons to the default values of every `cookieType`', async () => {
-    await setTestPage('/test', EXAMPLE_COOKIES_SETTINGS_PAGE);
+    it('sets a consent cookie by default', async () => {
+        await setTestPage('/test', EXAMPLE_COOKIES_SETTINGS_PAGE);
 
-    const cookiesSettingsOffRadio = await page.$eval('input[name=cookies-settings][value=off]', (node) => node.checked);
-    const cookiesUsageOffRadio = await page.$eval('input[name=cookies-usage][value=off]', (node) => node.checked);
-    const cookiesCampaignsOffRadio = await page.$eval('input[name=cookies-campaigns][value=off]', (node) => node.checked);
+        const cookies = await page.cookies();
+        const ons_cookie_policy = cookies.find((cookie) => cookie.name === 'ons_cookie_policy');
+        const policy = JSON.parse(ons_cookie_policy.value.replace(/'/g, '"'));
 
-    expect(cookiesSettingsOffRadio).toBe(true);
-    expect(cookiesUsageOffRadio).toBe(true);
-    expect(cookiesCampaignsOffRadio).toBe(true);
-  });
+        expect(policy).toEqual({
+            essential: true,
+            settings: false,
+            usage: false,
+            campaigns: false,
+        });
+    });
+
+    it('sets all radio buttons to the default values of every `cookieType`', async () => {
+        await setTestPage('/test', EXAMPLE_COOKIES_SETTINGS_PAGE);
+
+        const cookiesSettingsOffRadio = await page.$eval('input[name=cookies-settings][value=off]', (node) => node.checked);
+        const cookiesUsageOffRadio = await page.$eval('input[name=cookies-usage][value=off]', (node) => node.checked);
+        const cookiesCampaignsOffRadio = await page.$eval('input[name=cookies-campaigns][value=off]', (node) => node.checked);
+
+        expect(cookiesSettingsOffRadio).toBe(true);
+        expect(cookiesUsageOffRadio).toBe(true);
+        expect(cookiesCampaignsOffRadio).toBe(true);
+    });
 
-  it('sets the provided radio buttons to the default values of every matched `cookieType`', async () => {
-    await setTestPage('/test', EXAMPLE_PART_COOKIES_SETTINGS_PAGE);
+    it('sets the provided radio buttons to the default values of every matched `cookieType`', async () => {
+        await setTestPage('/test', EXAMPLE_PART_COOKIES_SETTINGS_PAGE);
 
-    const cookiesSettingsOffRadio = await page.$eval('input[name=cookies-settings][value=off]', (node) => node.checked);
-    const cookiesCampaignsOffRadio = await page.$eval('input[name=cookies-campaigns][value=off]', (node) => node.checked);
+        const cookiesSettingsOffRadio = await page.$eval('input[name=cookies-settings][value=off]', (node) => node.checked);
+        const cookiesCampaignsOffRadio = await page.$eval('input[name=cookies-campaigns][value=off]', (node) => node.checked);
 
-    expect(cookiesSettingsOffRadio).toBe(true);
-    expect(cookiesCampaignsOffRadio).toBe(true);
-  });
+        expect(cookiesSettingsOffRadio).toBe(true);
+        expect(cookiesCampaignsOffRadio).toBe(true);
+    });
 
-  it('sets all radios to on from off when accepting cookies', async () => {
-    await setTestPage('/test', EXAMPLE_COOKIES_SETTINGS_PAGE);
+    it('sets all radios to on from off when accepting cookies', async () => {
+        await setTestPage('/test', EXAMPLE_COOKIES_SETTINGS_PAGE);
 
-    await page.click('.ons-js-accept-cookies');
+        await page.click('.ons-js-accept-cookies');
 
-    const cookiesSettingsOnRadio = await page.$eval('input[name=cookies-settings][value=on]', (node) => node.checked);
-    const cookiesUsageOnRadio = await page.$eval('input[name=cookies-usage][value=on]', (node) => node.checked);
-    const cookiesCampaignsOnRadio = await page.$eval('input[name=cookies-campaigns][value=on]', (node) => node.checked);
+        const cookiesSettingsOnRadio = await page.$eval('input[name=cookies-settings][value=on]', (node) => node.checked);
+        const cookiesUsageOnRadio = await page.$eval('input[name=cookies-usage][value=on]', (node) => node.checked);
+        const cookiesCampaignsOnRadio = await page.$eval('input[name=cookies-campaigns][value=on]', (node) => node.checked);
 
-    expect(cookiesSettingsOnRadio).toBe(true);
-    expect(cookiesUsageOnRadio).toBe(true);
-    expect(cookiesCampaignsOnRadio).toBe(true);
-  });
+        expect(cookiesSettingsOnRadio).toBe(true);
+        expect(cookiesUsageOnRadio).toBe(true);
+        expect(cookiesCampaignsOnRadio).toBe(true);
+    });
 
-  it.each([['settings'], ['usage'], ['campaigns']])('updates consent cookie when "%s" policy is turned on', async (policyName) => {
-    await setTestPage('/test', EXAMPLE_COOKIES_SETTINGS_PAGE);
+    it.each([['settings'], ['usage'], ['campaigns']])('updates consent cookie when "%s" policy is turned on', async (policyName) => {
+        await setTestPage('/test', EXAMPLE_COOKIES_SETTINGS_PAGE);
 
-    await page.click(`input[name=cookies-${policyName}][value=on]`);
-    await page.click('#submit-button');
+        await page.click(`input[name=cookies-${policyName}][value=on]`);
+        await page.click('#submit-button');
 
-    const cookies = await page.cookies();
-    const ons_cookie_policy = cookies.find((cookie) => cookie.name === 'ons_cookie_policy');
-    const policy = JSON.parse(ons_cookie_policy.value.replace(/'/g, '"'));
+        const cookies = await page.cookies();
+        const ons_cookie_policy = cookies.find((cookie) => cookie.name === 'ons_cookie_policy');
+        const policy = JSON.parse(ons_cookie_policy.value.replace(/'/g, '"'));
 
-    expect(policy).toHaveProperty(policyName, true);
-  });
+        expect(policy).toHaveProperty(policyName, true);
+    });
 
-  it.each([['settings'], ['usage'], ['campaigns']])(
-    'updates consent cookie when "%s" policy is turned on and then off',
-    async (policyName) => {
-      await setTestPage('/test', EXAMPLE_COOKIES_SETTINGS_PAGE);
+    it.each([['settings'], ['usage'], ['campaigns']])(
+        'updates consent cookie when "%s" policy is turned on and then off',
+        async (policyName) => {
+            await setTestPage('/test', EXAMPLE_COOKIES_SETTINGS_PAGE);
 
-      await page.click(`input[name=cookies-${policyName}][value=on]`);
-      await page.click('#submit-button');
+            await page.click(`input[name=cookies-${policyName}][value=on]`);
+            await page.click('#submit-button');
 
-      await page.click(`input[name=cookies-${policyName}][value=off]`);
-      await page.click('#submit-button');
+            await page.click(`input[name=cookies-${policyName}][value=off]`);
+            await page.click('#submit-button');
 
-      const cookies = await page.cookies();
-      const ons_cookie_policy = cookies.find((cookie) => cookie.name === 'ons_cookie_policy');
-      const policy = JSON.parse(ons_cookie_policy.value.replace(/'/g, '"'));
+            const cookies = await page.cookies();
+            const ons_cookie_policy = cookies.find((cookie) => cookie.name === 'ons_cookie_policy');
+            const policy = JSON.parse(ons_cookie_policy.value.replace(/'/g, '"'));
 
-      expect(policy).toHaveProperty(policyName, false);
-    },
-  );
+            expect(policy).toHaveProperty(policyName, false);
+        },
+    );
 
-  it('sets ons_cookie_message_displayed cookie on form submit', async () => {
-    await setTestPage('/test', EXAMPLE_COOKIES_SETTINGS_PAGE);
+    it('sets ons_cookie_message_displayed cookie on form submit', async () => {
+        await setTestPage('/test', EXAMPLE_COOKIES_SETTINGS_PAGE);
 
-    const cookiesBefore = await page.cookies();
-    const ons_cookie_message_displayed_before = cookiesBefore.find((cookie) => cookie.name === 'ons_cookie_message_displayed');
-    expect(ons_cookie_message_displayed_before).toBeUndefined();
+        const cookiesBefore = await page.cookies();
+        const ons_cookie_message_displayed_before = cookiesBefore.find((cookie) => cookie.name === 'ons_cookie_message_displayed');
+        expect(ons_cookie_message_displayed_before).toBeUndefined();
 
-    await page.click('#submit-button');
+        await page.click('#submit-button');
 
-    const cookiesAfter = await page.cookies();
-    const ons_cookie_message_displayed_after = cookiesAfter.find((cookie) => cookie.name === 'ons_cookie_message_displayed');
+        const cookiesAfter = await page.cookies();
+        const ons_cookie_message_displayed_after = cookiesAfter.find((cookie) => cookie.name === 'ons_cookie_message_displayed');
 
-    expect(ons_cookie_message_displayed_after.value).toBe('true');
-  });
+        expect(ons_cookie_message_displayed_after.value).toBe('true');
+    });
 
-  it('does not hide the cookie banner by default', async () => {
-    await setTestPage('/test', EXAMPLE_COOKIES_SETTINGS_PAGE);
+    it('does not hide the cookie banner by default', async () => {
+        await setTestPage('/test', EXAMPLE_COOKIES_SETTINGS_PAGE);
 
-    const displayStyle = await page.$eval('.ons-cookies-banner', (node) => window.getComputedStyle(node).getPropertyValue('display'));
-    expect(displayStyle).not.toBe('none');
-  });
+        const displayStyle = await page.$eval('.ons-cookies-banner', (node) => window.getComputedStyle(node).getPropertyValue('display'));
+        expect(displayStyle).not.toBe('none');
+    });
 
-  it('hides the cookie banner on form submit', async () => {
-    await setTestPage('/test', EXAMPLE_COOKIES_SETTINGS_PAGE);
+    it('hides the cookie banner on form submit', async () => {
+        await setTestPage('/test', EXAMPLE_COOKIES_SETTINGS_PAGE);
 
-    await page.click('#submit-button');
+        await page.click('#submit-button');
 
-    const displayStyle = await page.$eval('.ons-cookies-banner', (node) => window.getComputedStyle(node).getPropertyValue('display'));
-    expect(displayStyle).toBe('none');
-  });
+        const displayStyle = await page.$eval('.ons-cookies-banner', (node) => window.getComputedStyle(node).getPropertyValue('display'));
+        expect(displayStyle).toBe('none');
+    });
 
-  it('does not show a confirmation message by default', async () => {
-    await setTestPage('/test', EXAMPLE_COOKIES_SETTINGS_PAGE);
+    it('does not show a confirmation message by default', async () => {
+        await setTestPage('/test', EXAMPLE_COOKIES_SETTINGS_PAGE);
 
-    const displayStyle = await page.$eval('.ons-cookies-confirmation-message', (node) =>
-      window.getComputedStyle(node).getPropertyValue('display'),
-    );
-    expect(displayStyle).toBe('none');
-  });
+        const displayStyle = await page.$eval('.ons-cookies-confirmation-message', (node) =>
+            window.getComputedStyle(node).getPropertyValue('display'),
+        );
+        expect(displayStyle).toBe('none');
+    });
 
-  it('shows a confirmation message on form submit', async () => {
-    await setTestPage('/test', EXAMPLE_COOKIES_SETTINGS_PAGE);
+    it('shows a confirmation message on form submit', async () => {
+        await setTestPage('/test', EXAMPLE_COOKIES_SETTINGS_PAGE);
 
-    await page.click('#submit-button');
+        await page.click('#submit-button');
 
-    const displayStyle = await page.$eval('.ons-cookies-confirmation-message', (node) =>
-      window.getComputedStyle(node).getPropertyValue('display'),
-    );
-    expect(displayStyle).not.toBe('none');
-  });
+        const displayStyle = await page.$eval('.ons-cookies-confirmation-message', (node) =>
+            window.getComputedStyle(node).getPropertyValue('display'),
+        );
+        expect(displayStyle).not.toBe('none');
+    });
 });

package/js/domready.js

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

package/js/fetch.js

@@ -1,19 +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;
-  }
+    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);
+    return window
+        .fetch(url, {
+            method: 'GET',
+            credentials: 'include',
+            ...options,
+        })
+        .then(checkStatus);
 }

package/js/inpagelink.dom.js

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

package/js/inpagelink.js

@@ -1,29 +1,29 @@
 export default function inPageLinks(links) {
-  links.forEach((link) => {
-    const id = link.getAttribute('href').replace('#', '');
+    links.forEach((link) => {
+        const id = link.getAttribute('href').replace('#', '');
 
-    link.addEventListener('click', (event) => {
-      event.preventDefault();
-      focusOnInput(id);
+        link.addEventListener('click', (event) => {
+            event.preventDefault();
+            focusOnInput(id);
+        });
     });
-  });
 }
 
 function focusOnInput(id) {
-  const container = document.getElementById(id);
-  container.scrollIntoView();
+    const container = document.getElementById(id);
+    container.scrollIntoView();
 
-  const input = [
-    ...container.getElementsByTagName('INPUT'),
-    ...container.getElementsByTagName('TEXTAREA'),
-    ...container.getElementsByTagName('SELECT'),
-  ].filter((input) => {
-    const type = input.getAttribute('type');
+    const input = [
+        ...container.getElementsByTagName('INPUT'),
+        ...container.getElementsByTagName('TEXTAREA'),
+        ...container.getElementsByTagName('SELECT'),
+    ].filter((input) => {
+        const type = input.getAttribute('type');
 
-    return type !== 'readonly' && type !== 'hidden';
-  })[0];
+        return type !== 'readonly' && type !== 'hidden';
+    })[0];
 
-  if (input && input.getAttribute('tabindex') !== '-1') {
-    input.focus();
-  }
+    if (input && input.getAttribute('tabindex') !== '-1') {
+        input.focus();
+    }
 }

package/js/polyfills.js

@@ -1,6 +1,5 @@
 // This must be included for IE support
 import 'core-js';
-//import 'regenerator-runtime/runtime';
 import 'mdn-polyfills/CustomEvent';
 import 'mdn-polyfills/Node.prototype.append';
 import 'mdn-polyfills/Node.prototype.remove';

package/js/print-button.js

@@ -1,16 +1,16 @@
 import domready from './domready';
 
 export default function addEventListeners() {
-  const buttons = [...document.querySelectorAll('.ons-js-print-btn')];
+    const buttons = [...document.querySelectorAll('.ons-js-print-btn')];
 
-  buttons.forEach((button) => {
-    button.addEventListener('click', handleClick);
-    button.classList.remove('ons-u-d-no');
-  });
+    buttons.forEach((button) => {
+        button.addEventListener('click', handleClick);
+        button.classList.remove('ons-u-d-no');
+    });
 }
 
 function handleClick() {
-  window.print();
+    window.print();
 }
 
 domready(addEventListeners);