mp-design-system 1.2.63 → 1.2.65

package/src/_includes/library-navigation/components-nav.njk

@@ -1,88 +0,0 @@
-{% from "components/component/component.njk" import libraryList, libraryLink %}
-{%- from "components/icon/macro.njk" import icon -%}
-
-<div class="u-flow">
-  <h3>Getting started</h3>
-  <ul>
-    {{ libraryList('Introduction', '/components/', page.url) }}
-    {{ libraryList('Installation', '/components/installation/', page.url) }}
-    {{ libraryList('Publishing the system', '/components/publishing-the-system/', page.url) }}
-    {{ libraryList('Creating a component', '/components/creating-a-component/', page.url) }}
-  </ul>
-</div>
-
-<div class="u-flow">
-  <h3>Foundations</h3>
-  <ul class="c-library-accordion">
-    {{ libraryList('Color', '/components/colour/', page.url) }}
-    {{ libraryList('Space', '/components/space/', page.url) }}
-    <li>
-      {{ libraryLink('Grid', '/components/grid/', page.url) }}
-      <button type="button" class="c-library-accordion__toggle c-button--reset">
-        {{ icon({ id: 'chevron-down' }) }}
-      </button>
-      <ul>
-        {{ libraryList('Generic', '/components/grid/generic/', page.url) }}
-        {{ libraryList('Layout', '/components/grid/layout/', page.url) }}
-        {{ libraryList('Wrapper', '/components/grid/wrap/', page.url) }}
-      </ul>
-    </li>
-    {{ libraryList('Typography', '/components/typography/', page.url) }}
-    {{ libraryList('Flow', '/components/flow/', page.url) }}
-    {{ libraryList('Iconography', '/components/iconography/', page.url) }}
-    {{ libraryList('Approach to CSS', '/components/css/', page.url) }}
-    {{ libraryList('Utilities', '/components/utilities/', page.url) }}
-  </ul>
-</div>
-
-{% for category in components.menu %}
-<div class="u-flow">
-  <h3>{{ category.name }}</h3>
-  <ul class="c-library-accordion">
-    {% for comp in category.components %}
-      {% if not comp.variant %}
-        <li>
-          {{ libraryLink(comp.title, '/components/' + comp.slug + '/', page.url) }}
-
-          {% if comp.siblings | length >= 1 %}
-            <button type="button" class="c-library-accordion__toggle c-button--reset">
-              {{ icon({ id: 'chevron-down' }) }}
-            </button>
-            <ul>
-              {% for sibling in comp.siblings %}
-                {{ libraryList(sibling.title, '/components/' + sibling.slug + '/', page.url) }}
-              {% endfor %}
-            </ul>
-          {% endif %}
-        </li>
-      {% endif %}
-    {% endfor %}
-   </ul>
-</div>
-{% endfor %}
-
-<div class="u-flow">
-  <h3>
-    Example patterns
-  </h3>
-
-  <ul>
-    {{ libraryList('Overview', '/patterns/', page.url) }}
-    {% for p in collections.patterns %}
-      {{ libraryList(p.data.title, p.url, page.url) }}
-    {% endfor %}
-  </ul>
-</div>
- 
-<div class="u-flow">
-  <h3>Example pages</h3>
-
-  <ul>
-    {{ libraryList('Overview', '/prototype/home/', page.url) }}
-    {{ libraryList('Creating a page', '/prototype/creating-a-page/', page.url) }}
-    {% for p in collections.prototypes %}
-      {{ libraryList(p.data.tagTitle or p.data.title, p.url, page.url) }}
-    {% endfor %}
-  </ul>
-</div>
-

package/src/_includes/library-navigation/content-nav.njk

@@ -1,53 +0,0 @@
-{% from "components/component/component.njk" import libraryList, libraryLink %}
-{%- from "components/icon/macro.njk" import icon -%}
-
-<div class="u-flow">
-  <h3>Tone of voice</h3>
-  <ul>
-    {{ libraryList('Our words matter', '/content/', page.url) }}
-    {{ libraryList('Elevator pitch', '/content/elevator-pitch/', page.url) }}
-    {{ libraryList('Boilerplate', '/content/boilerplate/', page.url) }}
-    {{ libraryList('Big ideas for a better world', '/content/big-ideas/', page.url) }}
-  </ul>
-</div>
-
-<div class="u-flow">
-  <h3>Our voice</h3>
-  <ul class="c-library-accordion">
-    {{ libraryList('Seven steps to more clear, confident and surprising writing', '/content/our-voice/seven-steps/', page.url) }}
-    {{ libraryList('1. We focus on the big picture', '/content/our-voice/1-big-picture/', page.url) }}
-    {{ libraryList('2. We say what’s most important', '/content/our-voice/2-whats-most-important/', page.url) }}
-    {{ libraryList('3. We write like we speak', '/content/our-voice/3-write-like-we-speak/', page.url) }}
-    {{ libraryList('4. We write to be skimmed', '/content/our-voice/4-write-to-be-skimmed/', page.url) }}
-    {{ libraryList('5. We use active sentences', '/content/our-voice/5-active-sentences/', page.url) }}
-    {{ libraryList('6. We add energy', '/content/our-voice/6-add-energy/', page.url) }}
-    {{ libraryList('7. … And we add small surprises', '/content/our-voice/7-small-surprises/', page.url) }}
-    {{ libraryList('Which techniques, when?', '/content/our-voice/which-techniques-when/', page.url) }}
-</div>
-
-<div class="u-flow">
-  <h3>Real life examples</h3>
-  <ul>
-    {{ libraryList('Who we are / boilerplate', '/content/real-life-examples/01-who-we-are-boilerplate/', page.url) }}
-    {{ libraryList('Event announcement', '/content/real-life-examples/02-event-announcement/', page.url) }}
-    {{ libraryList('Customer support letter', '/content/real-life-examples/03-customer-support-letter/', page.url) }}
-    {{ libraryList('Delay in shipment letter', '/content/real-life-examples/04-delay-in-shipment-letter/', page.url) }}
-    {{ libraryList('Overview of our events and training', '/content/real-life-examples/05-overview-events-training/', page.url) }}
-    {{ libraryList('Digital product description', '/content/real-life-examples/06-digital-product-description/', page.url) }}
-    {{ libraryList('Recruitment', '/content/real-life-examples/07-recruitment/', page.url) }}
-    {{ libraryList('Industry sector 1', '/content/real-life-examples/08-industry-sector-1/', page.url) }}
-    {{ libraryList('Industry sector 2', '/content/real-life-examples/09-industry-sector-2/', page.url) }}
-    {{ libraryList('Website information', '/content/real-life-examples/10-website-information/', page.url) }}
-    {{ libraryList('Internal update', '/content/real-life-examples/11-internal-update/', page.url) }}
-    {{ libraryList('Value proposition', '/content/real-life-examples/12-value-proposition/', page.url) }}
-  </ul>
-</div>
- 
-<div class="u-flow">
-  <h3>And so …</h3>
-  <ul>
-    {{ libraryList('Sitting down to write', '/content/and-so/sitting-down/', page.url) }}
-    {{ libraryList('Please write responsibly', '/content/and-so/please-write-responsibly/', page.url) }}
-  </ul>
-</div>
-

package/src/_includes/library-navigation/system-nav.njk

@@ -1,9 +0,0 @@
-<div class="u-flow">
-  <h3>Getting started</h3>
-  <ul>
-    <li><a href="/brand">Brand & visual identity</a></li>
-    <li><a href="/components">Web components</a></li>
-    <li><a href="/prototype">Pages</a></li>
-    <li><a href="/content">Tone of voice</a></li>
-  </ul>
-</div>

package/src/_includes/library.njk

@@ -1,5 +0,0 @@
-{% extends "system.njk" %}
-
-{% block sidebar %}
-  {% include "library-navigation/" + sidebar + "-nav.njk" ignore missing %}
-{% endblock %}

package/src/_includes/navigation/blog.njk

@@ -1,16 +0,0 @@
-<nav class="c-header__site c-header__site--with-home" aria-label="Site">
-  <ul>
-    <li>
-      <a href="/prototype/blog">Blog home</a>
-    </li>
-    <li>
-      <a href="">About</a>
-    </li>
-    <li>
-      <a href="">Categories</a>
-    </li>
-    <li>
-      <a href="">Feedback</a>
-    </li>
-  </ul>
-</nav>

package/src/_includes/navigation/corporate.njk

@@ -1,25 +0,0 @@
-<nav class="c-header__site" aria-label="Site">
-  <ul>
-    <li>
-      <a href="/prototype/products">Products</a>
-    </li>
-    <li>
-      <a href="/prototype/sections">Solutions</a>
-    </li>
-    <li>
-      <a href="/prototype/webinars">Webinars and events</a>
-    </li>
-    <li>
-      <a href="">Resources</a>
-    </li>
-    <li>
-      <a href="">Support & downloads</a>
-    </li>
-    <li class="c-header__push">
-      <a href="">Log in</a>
-    </li>
-    <li>
-      <a href="">Register</a>
-    </li>
-  </ul>
-</nav>

package/src/_includes/navigation/store.njk

@@ -1,29 +0,0 @@
-<nav class="c-header__site c-header__site--with-home" aria-label="Site">
-  <ul>
-    <li>
-      <a href="/prototype/products">Store home</a>
-    </li>
-    <li>
-      <a href="/prototype/sections">Consumables</a>
-    </li>
-    <li>
-      <a href="">Standards</a>
-    </li>
-    <li>
-      <a href="/prototype/webinars">Accessories</a>
-    </li>
-    <li>
-      <a href="">Contracts & agreements</a>
-    </li>
-    <li>
-      <a href="">Software</a>
-    </li>
-    <a class="mp c-button c-button--small c-button--tight c-button--outline-white c-header__push u-margin-right-m" href="">Basket (0)</a>
-    <li>
-      <a href="">Log in</a>
-    </li>
-    <li>
-      <a href="">Register</a>
-    </li>
-  </ul>
-</nav>

package/src/_includes/page.njk

@@ -1,14 +0,0 @@
-{% from "components/footer/macro.njk" import footer %}
-{% from "components/header/macro.njk" import header %}
-
-{% extends "layout.njk" %}
-
-{% block inner %}
-    {{ header({
-        siteNav: siteNav
-    }) }}
-
-    {% block content %}{% endblock %}
-
-    {{ footer() }}
-{% endblock %}

package/src/_includes/patterns-page.njk

@@ -1,41 +0,0 @@
----
-sidebar: components
-tags: patterns
----
-
-{% extends "library.njk" %}
-
-{% block content %}
-  <div class="c-library-stretch u-wrap mp c-tabs c-tabs--flex c-tabs--anchor c-tabs--persist u-pad-y-m-l">
-    <header class="u-wrap u-flow--s-l u-margin-bottom-s">
-      <h1 class="c-h c-h--step-3">Patterns: {{ title }}</h1>
-
-      <nav class="c-tabs__controls">
-        <ul class="c-tabs__controls-list">
-          <li><a class="c-tabs__control c-tabs__control--active" href="#pattern-example">Example</a></li>
-          <li><a class="c-tabs__control" href="#pattern-code">Code</a></li>
-        </ul>
-      </nav>
-    </header>
-
-    <div class="c-library-stretch c-tabs__content">
-      <div class="c-tab c-tab--active c-library-stretch" id="pattern-example">
-        <div class="c-library__frame c-library-stretch">
-          {{ content | safe }}
-        </div>
-      </div>
-
-      <div class="c-tab" id="pattern-code">
-        <div class="u-wrap--content">
-          {%- set html -%}{% highlight "html" %}{%- prettify -%}{{ content | safe }}{%- endprettify -%}{% endhighlight %}{%- endset -%}
-          <article class="c-library-copy">
-            <div class="c-library-copy__clipboard">
-              {{ html | safe }}
-            </div>
-            <button type="button" class="c-button--reset c-h c-h--upper c-library-copy__trigger">Copy</button>
-          </article>
-        </div>
-      </div>
-    </div>
-  </div>
-{% endblock %}

package/src/_includes/system-home-page.njk

@@ -1,28 +0,0 @@
----
-sidebar: false
-index: true
----
-
-{% extends "library.njk" %}
-
-{% from "components/hero/macro.njk" import hero %}
-
-{% block content %}
-  <div class="u-pad-bottom-xl">
-    {{ hero({
-      title: title,
-      subtitle: subtitle,
-      cover: true,
-      gradient: true,
-      pattern: 'dots',
-      inverse: true,
-      classes: 'c-library__hero'
-    }) }}
-
-    <div class="u-wrap u-flow--l u-pad-right-xl">
-      {{ content | safe }}
-    </div>
-  </div>
-
-  {% include "includes/system-footer.njk" %}
-{% endblock %}

package/src/_includes/system-page.njk

@@ -1,27 +0,0 @@
----
-sidebar: components
----
-
-{% extends "library.njk" %}
-
-{% from "components/breadcrumb/macro.njk" import breadcrumb %}
-
-{% block content %}
-  <div class="u-wrap u-flow--l u-pad-y-m-l">
-    {% if crumb %}
-      {{ breadcrumb({ link: crumb[0], label: crumb[1] }) }}
-    {% endif %}
-    <div class="u-split">
-      <h1 class="c-h c-h--page-title">{{ title }}</h1>
-      {% if version or status %}
-        <div>
-          {% if version %}<span class="c-library-version">Version {{ version }}</span>{% endif %}
-          {% if status %}<span class="u-margin-left-xs c-library-status c-library-status--{{ status | slug }}">{{ status }}</span>{% endif %}
-        </div>
-      {% endif %}
-    </div>
-    <div>
-      {{ content | safe }}
-    </div>
-  </div>
-{% endblock %}

package/src/_includes/system.njk

@@ -1,39 +0,0 @@
-{% extends "layout.njk" %}
-
-{% set bodyClass = 'mp' %}
-
-{% block head %}
-  <link rel="stylesheet" href="/build/scss/library.css" />
-{% endblock %}
-
-{% block inner %}
-  <div class="c-library c-library--{{ sidebar or 'home' }}">
-    {% include "includes/system-header.njk" %}
-
-    {% set content %}
-      {% block content %}{% endblock %}
-    {% endset %}
-    
-    {% if sidebar %}
-      <div class="c-library__body">
-        <nav class="c-library__sidebar c-library-stretch" id="sidebar">
-          <div class="u-flow--m u-sticky">
-            {% block sidebar %}{% endblock %}
-          </div>
-        </nav>
-        <main class="c-library__main c-library-stretch">
-          <div class="c-library-stretch">
-            {{ content | safe }}
-          </div>
-        </main>
-      </div>
-      {% if sidebar != 'components' %}
-        {% include "includes/system-footer.njk" %}
-      {% endif %}
-    {% else %}
-      {{ content | safe }}
-    {% endif %}
-  </div>
-  {% include "includes/system-scripts.njk" %}
-
-{% endblock %}

package/src/_redirects

@@ -1,13 +0,0 @@
-/brand/identity/ /brand 301
-/brand/identity/boilerplate /content/boilerplate 301
-/brand/identity/strategy /brand 301
-/brand/visual /brand 301
-/brand/visual/colors /brand/colors 301
-/brand/visual/images /brand/images 301
-/brand/visual/logo /brand/logo 301
-/brand/visual/typography /brand/typography 301
-/checklist /quickstart 301
-http://project-franklin.netlify.app https://brand.malvernpanalytical.com 301
-https://project-franklin.netlify.app https://brand.malvernpanalytical.com 301
-http://project-franklin.netlify.app/* https://brand.malvernpanalytical.com/:splat 301
-https://project-franklin.netlify.app/* https://brand.malvernpanalytical.com/:splat 301

package/src/assets/js/app.js

@@ -1,40 +0,0 @@
-import Accordion from './imports/accordion';
-import Carousel from './imports/carousel';
-import ClearForm from './imports/clear-form';
-import Comparison from './imports/comparison';
-import Facet from './imports/facet';
-import Gallery from './imports/gallery';
-import HeroPattern from './imports/hero-pattern';
-import HeroVideo from './imports/hero-video';
-import HotspotImage from './imports/hotspot-image';
-import InternalNav from './imports/internal-nav';
-import OffCanvas from './imports/off-canvas';
-import ResponsiveTable from './imports/responsive-table';
-import ScrollbarWidth from './imports/scrollbar-width';
-import ScrollSpy from './imports/scroll-spy';
-import Tabs from './imports/tabs';
-
-(() => {
-  if (window.NodeList && !NodeList.prototype.forEach) {
-    NodeList.prototype.forEach = Array.prototype.forEach;
-  }
-  if (window.HTMLCollection && !HTMLCollection.prototype.forEach) {
-    HTMLCollection.prototype.forEach = Array.prototype.forEach;
-  }
-
-  Accordion();
-  Carousel();
-  ClearForm();
-  Comparison();
-  Facet();
-  Gallery();
-  HeroPattern();
-  HeroVideo();
-  HotspotImage();
-  InternalNav();
-  OffCanvas();
-  ResponsiveTable();
-  ScrollbarWidth();
-  ScrollSpy();
-  Tabs();
-})();

package/src/assets/js/imports/accordion.js

@@ -1,17 +0,0 @@
-function Accordion() {
-    const accordions = Array.from(document.querySelectorAll('.c-accordion__title'));
-    accordions.forEach(setupAccordions);
-}
-
-function setupAccordions(title) {
-    title.addEventListener('click', titleClick())
-}
-
-function titleClick() {
-    return (event) => {
-        var item = event.currentTarget.parentElement;
-        item.classList.toggle('c-accordion__item--open');
-    }
-}
-
-export default Accordion;

package/src/assets/js/imports/carousel.js

@@ -1,22 +0,0 @@
-function Carousel() {
-  let current = 0;
-  const bgSlides = document.querySelectorAll('.c-hero__image-bg');
-  const fgSlides = document.querySelectorAll('.c-hero__image-fg');
-
-  if(fgSlides.length > 0) {
-    setInterval(() => {
-      for (var bgSlide of bgSlides) {
-        bgSlide.style.opacity = 0;
-      }
-      current = (current != bgSlides.length - 1) ? current + 1 : 0;
-      bgSlides[current].style.opacity = 1;
-      
-      for (var fgSlide of fgSlides) {
-        fgSlide.style.opacity = 0;
-      }
-      fgSlides[current].style.opacity = 1;
-    }, 5000);
-  }
-}
-
-export default Carousel;

package/src/assets/js/imports/clear-form.js

@@ -1,27 +0,0 @@
-function ClearForm() {
-  const formClear = document.getElementById('clearForm');
-  if (formClear) {
-    formClear.addEventListener('click', function () {
-      const fields = this.closest('form').elements;
-      fields.forEach(field => {
-        if (field.value != '') {
-          if (
-            field.type.toLowerCase() == 'text' || 
-            field.type.toLowerCase() == 'email' || 
-            field.type.toLowerCase() == 'tel' || 
-            field.type.toLowerCase() == 'select-one' || 
-            field.type.toLowerCase() == 'textarea'
-            ) {
-            field.value = '';
-            return;
-          } else if (field.type.toLowerCase() == 'checkbox') {
-            field.checked = false;
-            return;
-          }
-        }
-      });
-    });
-  };
-}
-
-export default ClearForm;

package/src/assets/js/imports/comparison.js

@@ -1,64 +0,0 @@
-function Comparison() {
-  document.querySelectorAll('.c-comparison-table').forEach(extractMobileComparison)
-}
-
-function extractMobileComparison(container) {
-  const parent = container.parentNode.parentNode;
-  const body = parent.querySelector('.c-comparison-table tbody');
-  const head = parent.querySelector('.c-comparison-table thead');
-  const mobile = parent.parentElement.querySelector('.c-comparison-table__mobile');
-
-  if (!body || !head || !mobile) return;
-
-  // Remove empty corner piece  
-  const productsInfo = Array.from(head.children[0].children).filter((x, i) => i).map(x => ({ info: x.innerHTML }));
-  const productsButtons = Array.from(head.children[1].children).filter((x, i) => i).map(x => ({ buttons: x.innerHTML }));
-  const products = productsInfo.map((info, index) => ({ ...info, ...productsButtons[index], table: [] }));
-
-  Array.from(body.children).forEach(row => {
-    // For table row headers, push to all products
-    if (row.classList.contains('c-comparison-table__title')) {
-      products.forEach(x => {
-        x.table.push({ type: 'title', title: row.children[0].textContent })
-      })
-    } else {
-      // For all others, loop the cells and push to their appropriate parent
-      const cells = Array.from(row.children);
-      const firstCell = cells.shift();
-
-      cells.forEach((el, index) => {
-        products[index].table.push({
-          type: 'row',
-          key: firstCell.textContent,
-          value: el.innerHTML
-        })
-      })
-    }
-  })
-
-  products.forEach(product => {
-    const el = createMobileProduct(product);
-    mobile.appendChild(el)
-  })
-}
-
-function createMobileProduct(product) {
-  const parent = document.createElement('article');
-  parent.innerHTML = `${product.info}${product.buttons}
-  <table class="c-comparison-table">
-    ${product.table.map(x => {
-      if (x.type === 'title') {
-        return `<tr class="c-comparison-table__title"><th><span>${x.title}</span></th><th></th></tr>`;
-      } else {
-        return `<tr>
-          <td>${x.key}</td>
-          <td>${x.value}</td>
-        </tr>`;
-      }
-    }).join('')}
-  </table>`;
-
-  return parent;
-}
-
-export default Comparison;

package/src/assets/js/imports/facet.js

@@ -1,23 +0,0 @@
-function Facet() {
-    const facetAccordions = Array.from(document.querySelectorAll('.c-facet__toggle'));
-    facetAccordions.forEach(setupFacetAccordions);
-}
-
-function setupFacetAccordions(toggle) {
-    toggle.addEventListener('click', titleClick())
-}
-
-function titleClick() {
-    return (event) => {
-        event.preventDefault();
-        
-        var toggle = event.currentTarget;
-        var facet = toggle.parentElement;
-
-        facet.classList.toggle('c-facet--open');
-        const expanded = facet.classList.contains('c-facet--open') ? 'true' : 'false';
-        toggle.setAttribute('aria-expanded', expanded);
-    }
-}
-
-export default Facet;