@ons/design-system 44.1.1 → 45.0.2

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/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);

package/js/inpagelink.js

@@ -0,0 +1,31 @@
+export default function inPageLinks(links) {
+  if (document.getElementById('patternlib-page__example') === null) {
+    links.forEach(link => {
+      const id = link.getAttribute('href').replace('#', '');
+
+      link.addEventListener('click', event => {
+        event.preventDefault();
+        focusOnInput(id);
+      });
+    });
+  }
+}
+
+function focusOnInput(id) {
+  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');
+
+    return type !== 'readonly' && type !== 'hidden';
+  })[0];
+
+  if (input && input.getAttribute('tabindex') !== '-1') {
+    input.focus();
+  }
+}

package/js/main.js

@@ -0,0 +1,27 @@
+import './inpagelink.dom';
+import './print-button';
+import './cookies-settings.dom';
+import '../components/mutually-exclusive/mutually-exclusive.dom';
+import '../components/textarea/textarea.dom';
+import '../components/password/password.dom';
+import '../components/tabs/tabs.dom';
+import '../components/table-of-contents/toc.dom';
+import '../components/collapsible/collapsible.dom';
+import '../components/table/scrollable-table.dom';
+import '../components/table/sortable-table.dom';
+import '../components/header/header-nav.dom';
+import '../components/access-code/uac.dom';
+import '../components/relationships/relationships.dom';
+import '../components/checkboxes/checkboxes.dom';
+import '../components/radios/radios.dom';
+import '../components/autosuggest/autosuggest.dom';
+import '../components/address-input/autosuggest.address.dom';
+import '../components/input/character-check.dom';
+import '../components/cookies-banner/cookies-banner.dom';
+import '../components/button/button.dom';
+import '../components/reply/reply.dom';
+import '../components/skip-to-content/skip-to-content.dom';
+import '../components/download-resources/download-resources';
+import '../components/select/select';
+import '../components/modal/modal.dom';
+import '../components/timeout-modal/timeout.dom';

package/js/polyfills.js

@@ -0,0 +1,9 @@
+// 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';
+import 'mdn-polyfills/Element.prototype.closest';
+import 'whatwg-fetch';
+import 'abortcontroller-polyfill/dist/polyfill-patch-fetch';

package/js/print-button.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ons/design-system",
   "description": "ONS Design System built CSS, JS, and Nunjucks templates",
-  "version": "44.1.1",
+  "version": "45.0.2",
   "main": "index.js",
   "license": "MIT",
   "author": {
@@ -19,7 +19,7 @@
     "test": "STYLES=main gulp build-styles && TEST_MODE=nomodule karma start ./karma.conf.babel-register.js && TEST_MODE=esm karma start ./karma.conf.babel-register.js && codecov",
     "test:browserstack": "STYLES=main gulp build-styles && TEST_MODE=nomodule TEST_ON_BROWSERSTACK=true karma start ./karma.conf.babel-register.js && TEST_MODE=esm TEST_ON_BROWSERSTACK=true karma start ./karma.conf.babel-register.js",
     "test-visual": "yarn build && npx percy exec -- babel-node src/tests/visual/percy.snapshots.js",
-    "tidy-clean": "rm -rf build css favicons fonts img components page-templates templates scripts coverage scss",
+    "tidy-clean": "rm -rf build css favicons fonts img components layout scripts coverage scss js",
     "check-unused": "npx npm-check-unused",
     "dedupe-deps": "npx yarn-deduplicate yarn.lock",
     "lint-staged": "lint-staged",