@ons/design-system 45.0.0 → 45.0.1

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

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/layout/_template.njk

@@ -0,0 +1,242 @@
+{% from "components/skip-to-content/_macro.njk" import onsSkipToContent %}
+{% from "components/header/_macro.njk" import onsHeader %}
+{% from "components/footer/_macro.njk" import onsFooter %}
+
+{% set currentLanguageISOCode = "en" %}
+
+{% if pageConfig is defined and pageConfig and pageConfig.language is defined and pageConfig.language and pageConfig.language.languages is defined and pageConfig.language.languages %}
+    {% set currentLanguage = pageConfig.language.languages | selectattr("current") | first %}
+    {% set currentLanguageISOCode = currentLanguage.ISOCode %}
+    {% set otherLanguage = pageConfig.language.languages | rejectattr("current") | first %}
+    {% set otherLanguageISOCode = otherLanguage.ISOCode %}
+{% endif %}
+
+{# Meta icons #}
+{% if pageConfig is defined and pageConfig and pageConfig.theme is defined and pageConfig.theme %}
+    {% set metaicons = pageConfig.theme + "/" + currentLanguageISOCode + "/" %}
+{% else %}
+    {% set metaicons = "" %}
+{% endif %}
+
+{% set pageColNumber = pageConfig.pageColNumber | default("8") %}
+
+{% if pageConfig.cdn is defined and pageConfig.cdn or release_version is defined and release_version %}
+    {# Production #}
+    {% set cdn_url = (pageConfig.cdn.url if pageConfig.cdn is defined and pageConfig.cdn and pageConfig.cdn.url is defined and pageConfig.cdn.url) or "https://cdn.ons.gov.uk/sdc/design-system" %}
+    {% set slash = "" if cdn_url | last == "/" else "/" %}
+    {% set assetsURL = cdn_url + slash + ((pageConfig.cdn.version  if pageConfig.cdn is defined and pageConfig.cdn and pageConfig.cdn.version is defined and pageConfig.cdn.version) or release_version) %}
+{% elif pageInfo is defined and pageInfo and pageInfo.version is defined and pageInfo.version %}
+    {# Prototype kits #}
+    {% set assetsURL = "/" + pageInfo.version %}
+{% elif pageConfig.assetsURL is defined and pageConfig.assetsURL %}
+    {# Runner Dev #}
+    {% set assetsURL = pageConfig.assetsURL %}
+{% else %}
+    {# Development #}
+    {% set assetsURL = "" %}
+{% endif %}
+
+{% if pageConfig is defined and pageConfig and pageConfig.title is defined and pageConfig.title %}
+    {% set page_title = pageConfig.title %}
+{% elif pageInfo is defined and pageInfo and pageInfo.title is defined and pageInfo.title %}
+    {% set page_title = pageInfo.title %}
+{% else %}
+    {% set page_title = "ONS Design System" %}
+{% endif %}
+
+<!doctype html>
+<html lang="{{ currentLanguageISOCode }}">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>{{ page_title }}</title>
+        <link rel="stylesheet" href="{{ assetsURL }}/css/{{ pageConfig.theme | default('main') }}.css">
+        <link rel="stylesheet" media="print" href="{{ assetsURL }}/css/print.css">
+        <meta name="theme-color" content="{% if pageConfig.theme == 'census' %}#902082{% else %}#206095{% endif %}"/>
+
+        {% if pageConfig.headMeta is defined and pageConfig.headMeta %}
+
+            {% if pageConfig.headMeta.description is defined and pageConfig.headMeta.description or pageConfig.description is defined and pageConfig.description %}
+                <meta name="description" content="{{ pageConfig.headMeta.description | default(pageConfig.description) }}">
+            {% endif %}
+
+            <!-- Open Graph -->
+            <meta property="og:type" content="website">
+            <meta property="og:url" content="{{ pageConfig.headMeta.canonicalUrl | default(pageConfig.absoluteUrl) }}">
+            <meta property="og:title" content="{{ pageConfig.headMeta.title | default(pageConfig.title) }}">
+            <meta property="og:image" content="{{ assetsURL }}/favicons/{{ metaicons }}opengraph.png">
+            <meta property="og:image:type" content="image/png">
+            <meta property="og:image:width" content="1200">
+            <meta property="og:image:height" content="630">
+            <meta property="og:description" content="{{ pageConfig.headMeta.description | default(pageConfig.description) }}">
+            <meta property="og:site_name" content="{{ pageConfig.header.title | default(pageConfig.title) }}">
+            <meta property="og:locale" content="{{ currentLanguageISOCode }}">
+            {% if otherLanguageISOCode is defined and otherLanguageISOCode %}
+            <meta property="og:locale:alternate" content="{{ otherLanguageISOCode }}"> 
+            {% endif %}
+
+            <!-- Twitter -->
+            <meta name="twitter:card" content="summary">
+            <meta name="twitter:site" content="{{ pageConfig.headMeta.twitterSite }}">
+            <meta name="twitter:url" content="{{ pageConfig.headMeta.canonicalUrl | default(pageConfig.absoluteUrl) }}">
+            <meta name="twitter:title" content="{{ pageConfig.headMeta.title | default(pageConfig.title) }}">
+            <meta name="twitter:description" content="{{ pageConfig.headMeta.description | default(pageConfig.description) }}">
+            <meta name="twitter:image" content="{{ assetsURL }}/favicons/{{ metaicons }}twitter.png">
+
+            <!-- Canonical -->
+            <link rel="canonical" href="{{ pageConfig.headMeta.canonicalUrl | default(pageConfig.absoluteUrl) }}">
+
+            {% if pageConfig.headMeta.hrefLangs is defined and pageConfig.headMeta.hrefLangs %}
+                {% for item in pageConfig.headMeta.hrefLangs %}
+                    <link rel="alternate" href="{{ item.url }}" hreflang="{{ item.lang }}">
+                {% endfor %}
+            {% endif %}
+
+        {% endif %}
+
+        {% block headIcons %}
+            <!-- Favicons -->
+            <meta name="msapplication-config" content="{{ assetsURL }}/favicons/{{ metaicons }}browserconfig.json">
+            <link rel="icon" type="image/x-icon" href="{{ assetsURL }}/favicons/{{ metaicons }}favicon.ico">
+            <link rel="icon" type="image/png" href="{{ assetsURL }}/favicons/{{ metaicons }}favicon-32x32.png" sizes="32x32">
+            <link rel="icon" type="image/png" href="{{ assetsURL }}/favicons/{{ metaicons }}favicon-16x16.png" sizes="16x16">
+            <link rel="mask-icon" href="{{ assetsURL }}/favicons/{{ metaicons }}safari-pinned-tab.svg" color="#000000">
+            <link rel="apple-touch-icon" type="image/png" href="{{ assetsURL }}/favicons/{{ metaicons }}apple-touch-icon.png" sizes="180x180">
+            <link rel="manifest" href="{{ assetsURL }}/favicons/{{ metaicons }}manifest.json">
+        {% endblock %}
+
+        {% block head %}{% endblock %}
+
+    </head>
+    <body{% if pageConfig.bodyClasses is defined and pageConfig.bodyClasses %} class="{{ pageConfig.bodyClasses }}"{% endif %}>
+        <script{% if pageConfig.cspNonce is defined and pageConfig.cspNonce %} nonce="{{ pageConfig.cspNonce }}"{% elif pageConfig.cspNonce is not defined and csp_nonce is defined and csp_nonce %} nonce="{{ csp_nonce() }}"{% endif %}>document.body.className = ((document.body.className) ? document.body.className + ' ons-js-enabled' : 'ons-js-enabled');</script>
+        {% block bodyStart %}{% endblock %}
+        {% block body %}
+            <div class="ons-page">
+                <div class="ons-page__content">
+                    {% block skipLink %}
+                        {{
+                            onsSkipToContent({
+                                "url": "#main-content",
+                                "text": "Skip to main content"
+                            })
+                        }}
+                    {% endblock %}
+                    {% if form is defined and form and form.attributes is defined and form.attributes %}
+                        <form
+                            {% if form.classes is defined and form.classes %}class="{{ form.classes }}"{% endif %}
+                            method="{{ form.method | default('POST') }}"
+                            {% if form.attributes is defined and form.attributes %}{% for attribute, value in (form.attributes.items() if form.attributes is mapping and form.attributes.items else form.attributes) %}{{ attribute }}{% if value is defined and value %}="{{value}}" {% endif %}{% endfor %}{% endif %}
+                        >
+                    {% endif %}
+                    {% block preHeader %}{% endblock %}
+                    {% block header %}
+                        {{
+                            onsHeader({
+                                "title": pageConfig.header.title | default(pageConfig.title),
+                                "classes": pageConfig.header.classes,
+                                "wide": pageConfig.wide,
+                                "language": pageConfig.language,
+                                "button": pageConfig.signoutButton,
+                                "toggleButton": pageConfig.toggleButton,
+                                "navigation": pageConfig.navigation,
+                                "phase": pageConfig.phase,
+                                "assetsURL": assetsURL,
+                                "serviceLinks": pageConfig.serviceLinks,
+                                "logo": pageConfig.header.logo,
+                                "mobileLogo": pageConfig.header.mobileLogo,
+                                "logoAlt": pageConfig.header.logoAlt,
+                                "logoHref": pageConfig.header.logoHref,
+                                "titleLogo": pageConfig.header.titleLogo,
+                                "titleLogoAlt": pageConfig.header.titleLogoAlt,
+                                "titleLogoHref": pageConfig.header.titleLogoHref,
+                                "customHeaderLogo": pageConfig.header.customHeaderLogo
+                            })
+                        }}
+                    {% endblock %}
+                    {% block pageContent %}
+                        <div class="ons-page__container ons-container {{ containerClasses }}">
+                            {% if pageConfig.breadcrumbs is defined and pageConfig.breadcrumbs %}
+                                {% from "components/breadcrumbs/_macro.njk" import onsBreadcrumbs %}
+                                {{
+                                    onsBreadcrumbs({
+                                        "id": pageConfig.breadcrumbs.id,
+                                        "ariaLabel": pageConfig.breadcrumbs.ariaLabel,
+                                        "itemsList": pageConfig.breadcrumbs.itemsList
+                                    })
+                                }}
+                            {% endif %}
+                            {% block preMain %}{% endblock %}
+                            <div class="ons-grid">
+                                <div class="ons-grid__col ons-col-{{ pageColNumber }}@m">
+                                    <main id="main-content" class="ons-page__main {{ pageClasses }}">
+                                        {% block main %}{% endblock %}
+                                    </main>
+                                </div>
+                            </div>
+                        </div>
+                    {% endblock %}
+
+                    {% if form is defined and form and form.attributes is defined and form.attributes %}
+                        </form>
+                    {% endif %}
+                </div>
+                {% block preFooter %}{% endblock %}
+                {% block footer %}
+                    {% if pageConfig.footer is defined and pageConfig.footer %}
+                        {{
+                            onsFooter({
+                                "assetsURL": assetsURL,
+                                "wide": pageConfig.wide,
+                                "classes": "ons-page__footer",
+                                "language": pageConfig.language,
+                                "lang": currentLanguageISOCode,
+                                "rows": pageConfig.footer.rows,
+                                "cols": pageConfig.footer.cols,
+                                "poweredBy": pageConfig.footer.poweredBy,
+                                "crest": pageConfig.footer.crest,
+                                "OGLLink": pageConfig.footer.OGLLink,
+                                "button": pageConfig.signoutButton,
+                                "footerWarning": pageConfig.footer.footerWarning,
+                                "copyrightDeclaration": pageConfig.footer.copyrightDeclaration,
+                                "newTabWarning": pageConfig.footer.newTabWarning,
+                                "legal": pageConfig.footer.legal
+                            })
+                        }}
+                    {% endif %}
+                {% endblock %}
+            </div>
+            {% block bodyEnd %}{% endblock %}
+        {% endblock %}
+
+        {% if isPatternLib is defined and isPatternLib %}
+            {% set scripts = assetsURL + "/scripts/main.js," + assetsURL + "/scripts/patternlib.js" %}
+        {% else %}
+            {% set scripts = assetsURL + "/scripts/main.js" %}
+        {% endif %}
+
+        <script{% if pageConfig.cspNonce is defined and pageConfig.cspNonce %} nonce="{{ pageConfig.cspNonce }}"{% elif pageConfig.cspNonce is not defined and csp_nonce is defined and csp_nonce %} nonce="{{ csp_nonce() }}"{% endif %}>
+            (function() {
+                var s = '{{ scripts | safe }}'.split(','),
+                c = document.createElement('script');
+
+                if (!('noModule' in c)) {
+                    for (var i = 0; i < s.length; i++) {
+                        s[i] = s[i].replace('.js', '.es5.js');
+                    }
+                }
+
+                for (var i = 0; i < s.length; i++) {
+                    var e = document.createElement('script');
+
+                    e.src = s[i];
+
+                    document.body.appendChild(e);
+                }
+            })();
+        </script>
+
+        {% block scripts %}{% endblock %}
+    </body>
+</html>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ons/design-system",
   "description": "ONS Design System built CSS, JS, and Nunjucks templates",
-  "version": "45.0.0",
+  "version": "45.0.1",
   "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 js",
+    "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",