mp-design-system 1.2.64 → 1.2.66

package/src/_includes/includes/color-swatches.njk

@@ -1,260 +0,0 @@
-{% set colors = [
-    {
-        name: 'MP Petrol',
-        key: 'Petrol',
-        steps: [
-            {
-                name: "-1",
-                hex: '003039',
-                cmyk: '93.65.57.57',
-                pantone: 'PAN 547'
-            },
-            {
-                name: 0,
-                hex: '005461',
-                cmyk: '93.54.49.27',
-                pantone: 'PAN 3165'
-            },
-            {
-                name: 1,
-                hex: '3d7b87',
-                cmyk: '78.39.40.08'
-            },                
-            {
-                name: 2,
-                hex: 'bfd3d6',
-                cmyk: '24.09.13.00'
-            },
-            {
-                name: 3,
-                hex: 'ebf1f2',
-                cmyk: '06.02.03.00'
-            }
-        ]
-    },
-    {
-        name: 'MP Blue',
-        key: 'Blue',
-        steps: [
-            {
-                name: "-1",
-                hex: '00758c',
-                cmyk: '89.42.35.07'
-            },
-            {
-                name: 0,
-                hex: '00a2c2',
-                cmyk: '77.17.17.00',
-                pantone: 'PAN 312'
-            },
-            {
-                name: 1,
-                hex: '47bcd3',
-                cmyk: '64.04.15.00'
-            },                
-            {
-                name: 2,
-                hex: 'c2e9f0',
-                cmyk: '22.00.05.00'
-            },
-            {
-                name: 3,
-                hex: 'ebf8fa',
-                cmyk: '06.00.01.00'
-            }
-        ]
-    },
-    {
-        name: 'MP Green',
-        key: 'Green',
-        steps: [
-            {
-                name: "-1",
-                hex: '0e7a0e',
-                cmyk: '87.27.100.16'
-            },
-            {
-                name: 0,    
-                hex: '13aa13',
-                cmyk: '81.04.100.01',
-                pantone: 'PAN 354'
-            },
-            {
-                name: 1,
-                hex: '55c255',
-                cmyk: '66.00.89.00'
-            },                
-            {
-                name: 2,
-                hex: 'c6ebc6',
-                cmyk: '22.00.28.00'
-            },
-            {
-                name: 3,
-                hex: 'ecf8ec',
-                cmyk: '06.00.08.00'
-            }
-        ]
-    },
-    {
-        name: 'MP Rubine',
-        key: 'Red',
-        steps: [
-            {
-                name: '-1',    
-                hex: '9b0042',
-                cmyk: ''
-            },
-            {
-                name: 0,    
-                hex: 'ce0058',
-                cmyk: '14.100.50.2',
-                pantone: 'PAN Rubine Red'
-            },
-            {
-                name: 1,    
-                hex: 'dc4787',
-                cmyk: ''
-            },
-            {
-                name: 2,    
-                hex: 'f3c2d7',
-                cmyk: ''
-            },
-            {
-                name: 3,    
-                hex: 'fbebf2',
-                cmyk: ''
-            }
-        ]
-    },
-    {
-        name: 'MP Charcoal',
-        key: 'Grey',
-        steps: [
-            
-            {
-                name: '-1',
-                hex: '1c1c1c',
-                cmyk: '00.00.00.95'
-            },
-            {
-                name: 0,    
-                hex: '333333',
-                cmyk: '00.00.00.91',
-                pantone: 'PAN 447'
-            },
-            {
-                name: 1,
-                hex: '959595',
-                cmyk: '00.00.00.70'
-            },                
-            {
-                name: 2,
-                hex: 'cecece',
-                cmyk: '00.00.00.22'
-            },
-            {
-                name: 3,
-                hex: 'efefef',
-                cmyk: '00.00.00.08'
-            }
-        ]
-    },
-    {
-        name: 'MP Utility Gold',
-        key: 'Utility-Orange',
-        steps: [
-            
-            {
-                name: "-1",
-                hex: 'AE7809',
-                cmyk: '29.51.100.10'
-            },
-            {
-                name: 0,    
-                hex: 'F2A60D',
-                cmyk: '04.38.100.00'
-            },
-            {
-                name: 1,
-                hex: 'F6BF51',
-                cmyk: '03.26.79.00'
-            },                
-            {
-                name: 2,
-                hex: 'FCEAC5',
-                cmyk: '01.07.25.00'
-            },
-            {
-                name: 3,
-                hex: 'FEF8EC',
-                cmyk: '00.02.06.00'
-            }
-        ]
-    },
-    {
-        name: 'MP Utility Blue',
-        key: 'Utility-Blue',
-        steps: [
-            {
-                name: '-1',    
-                hex: '004e7e',
-                cmyk: ''
-            },
-            {
-                name: 0,    
-                hex: '006daf',
-                cmyk: '86.48.3.5'
-            },
-            {
-                name: 1,    
-                hex: '4796c5',
-                cmyk: ''
-            },
-            {
-                name: 2,    
-                hex: 'c2dcec',
-                cmyk: ''
-            },
-            {
-                name: 3,    
-                hex: 'ebf3f9',
-                cmyk: ''
-            }
-        ]
-    }
-] %}
-
-{% macro swatches(params) %}
-<div class="u-flow--2xs">
-    {% for color in colors %}
-        <h3 class="c-h c-h--step-1">{{ color.name }}</h3>
-        <div class="c-library__swatch-grid c-library__swatch-grid--has-labels ">
-            {% for step in color.steps %}
-                {% set classname %}
-                    {{- 'c-library__swatch'}}{# Let's build a string #}
-                    {{ 'u-bg-'+color.key | slug}}{# Set the background color to color.key -#}
-                    {{ '-step-'+step.name if step.name!=0 }} {# If it's not step zero, add the -step-x suffix -#}
-                    {# Set the text color to white, or a dark color #}
-                    {{ 'u-'+color.key|slug+'-step--1' if (step.name==2) or (step.name==3) else 'u-white' -}}
-                {% endset %}
-                <div class="{{classname}}">
-                    <span>Step {{step.name}}</span>
-                </div>
-                <table class="c-table">
-                    <tbody>
-                        <tr><td>Hex</td><td>#{{step.hex | upper}}</td></tr>
-                        {% if params.print %}
-                        <tr><td>CMYK</td><td>{{step.cmyk}}</td></tr>
-                        <tr class="{{ "u-petrol-step-3" if not step.pantone }}">
-                            <td>Pantone</td><td>{{step.pantone if step.pantone}}</td>
-                        </tr>
-                        {% endif %}
-                    </tbody>
-                </table>
-            {% endfor %}
-        </div>
-    {% endfor%}
-</div>
-{% endmacro %}

package/src/_includes/includes/related-events.njk

@@ -1,60 +0,0 @@
-{% from "components/card/macro.njk" import card %}
-
-<aside class="c-slat c-slat--grey c-slat--padded">
-  <div class="u-wrap u-flow">
-    <h3 class="c-h c-h--upper">Related events</h3>
-    <div class="o-grid o-grid--of-three o-grid--swipeable">
-      {{ card({
-          theme: {
-            layout: 'single',
-            size: 'medium',
-            corner: true
-          },
-          header: {
-            title: 'Discover how on-line particle sizing optimises mining analytics.',
-            meta: ['English'],
-            date: {
-              date: '2021-03-09' | createDate,
-              time: '10:30 – 11:30',
-              timezone: 'Eastern Time'
-            }
-          },
-          link: '/prototype/webinar'
-        }) }}
-      {{ card({
-          theme: {
-            layout: 'single',
-            size: 'medium',
-            corner: true
-          },
-          header: {
-            title: 'Ask us Anything: The API Edition - API Characterization & Developability',
-            meta: ['English'],
-            date: {
-              date: '2021-04-14' | createDate,
-              time: '10:30 – 11:30',
-              timezone: 'Eastern Time'
-            }
-          },
-          link: '/prototype/webinar'
-        }) }}
-      {{ card({
-          theme: {
-            layout: 'single',
-            size: 'medium',
-            corner: true
-          },
-          header: {
-            title: 'Zetium ED X-ray fluorescence SuperQ application course',
-            meta: ['English'],
-            date: {
-              date: '2021-04-29' | createDate,
-              time: '10:30 – 11:30',
-              timezone: 'EST'
-            }
-          },
-          link: '/prototype/webinar'
-        }) }}
-    </div>
-  </div>
-</aside>

package/src/_includes/includes/resources.njk

@@ -1,78 +0,0 @@
-{% from "components/card/macro.njk" import card %}
-
-<aside class="mp c-slat c-slat--grey c-slat--padded">
-  <div class="u-wrap u-flow--xl">
-    <h2 class="c-h c-h--step-3">Related resources</h2>
-    <div class="o-grid o-grid--of-three o-grid--swipeable">
-      {{ card({
-        theme: {
-          layout: 'single',
-          size: 'medium'
-        },
-        image: {
-          src: '/static/img/article-1.jpg',
-          alt: ''
-        },
-        header: {
-          title: 'Mixing it with the Mastersizer!'
-        },
-        body: {
-          content: '<p>At a major leading manufacturer of mixing equipment, the Mastersizer particle size analyzer is one of the analytical instruments used by customers during process simulations.</p>'
-        },
-        link: '/prototype/blog-post',
-        tag: 'News'
-      }) }}
-
-      {{ card({
-        theme: {
-          layout: 'single',
-          size: 'medium'
-        },
-        image: {
-          src: '/static/img/article-2.jpg',
-          alt: ''
-        },
-        header: {
-          title: 'Value of the Mastersizer 3000 for pharmaceutical development'
-        },
-        body: {
-          content: '<p>Find out how the Mastersizer range can help keep costs down in formulation development.</p>'
-        },
-        link: '/prototype/blog-post',
-        tag: 'Blog'
-      }) }}
-      
-      {{ card({
-        theme: {
-          layout: 'single',
-          size: 'medium',
-          name: 'featured',
-          noHeightMatch: true
-        },
-        image: {
-          src: '/static/img/featured-event-1.jpg',
-          alt: 'Alt'
-        },
-        header: {
-          title: 'Achieving method transfer from Mastersizer 2000 to Mastersizer 3000',
-          meta: ['English'],
-          date: {
-            date: '2016-01-01' | createDate,
-            duration: '36:01'
-          }
-        },
-        footer: {
-          buttons: [
-            {
-              label: 'Watch now',
-              link: '/prototype/oma/',
-              colour: 'outline-white'
-            }
-          ]
-        },
-        tag: 'Recorded webinar'
-      }) }}
-
-    </div>
-  </div>
-</aside>

package/src/_includes/includes/system-footer.njk

@@ -1,30 +0,0 @@
-{% from "components/component/component.njk" import libraryLink %}
-
-<footer class="mp c-footer" role="contentinfo">
-  <nav class="c-footer__primary u-wrap" aria-label="Footer">
-    <div class="o-grid o-grid--8/3-switch o-grid--push o-grid--layout">
-      <ol class="u-flow--xs u-margin-top-2xs">
-        <li><h3>Quick links</h3></li>
-        <li><a href="/brand/resources">Brand resources</a></li>
-        <li><a href="/quickstart">Quick start guide</a></li>
-      </ol>
-      <div class="mp o-prose u-flow--prose u-step--1">
-
-{% markdown %}
-### Get in touch
-
-This system is maintained by the Design System Team. Any feedback, questions or ideas are welcome, so please share your thoughts.
-
-For all enquiries please contact Will Wallace at Malvern Panalytical, via email or Teams.
-{% endmarkdown %}
-
-      </div>
-    </div>
-  </nav>
-  <div class="c-footer__secondary">
-    <div class="u-wrap">
-      <span></span>
-      <span>&copy; Copyright {{ helpers.currentYear() }}. Malvern Panalytical Ltd is a <a href="https://www.spectris.com/">Spectris</a> company</span>
-    </div>
-  </div>
-</footer>

package/src/_includes/includes/system-header.njk

@@ -1,30 +0,0 @@
-{% from "components/twi/macro.njk" import twi %}
-
-<header class="c-library__header u-split">
-  <a class="c-library__logo" href="/">
-    <img src="/static/svg/logo-small.svg" alt="Home" width="299" height="77" />
-    <span class="c-library__logo-name">
-      {% for item in config.logo %}
-        <span>{{ item }}</span>
-      {% endfor %}
-    </span>
-  </a>
-  <nav>
-    <ul class="u-row">
-      <li><a href="/brand" class="{% if '/brand' in page.url %}c-library-page-active{% endif %}">Brand & visual identity</a></li>
-      <li><a href="/content" class="{% if '/content' in page.url %}c-library-page-active{% endif %}">Tone of voice</a></li>
-      <li><a href="/components" class="{% if '/components' in page.url or '/patterns' in page.url %}c-library-page-active{% endif %}">Component library</a></li>
-      <li class="u-petrol-step-2">V.{{ config.dsVersion }}</li>
-    </ul>
-  </nav>
-</header>
-
-{% if sidebar %}
-  {{ twi({ 
-    icon: 'chevron-down',
-    align: 'right',
-    label: 'Menu',
-    link: "#sidebar",
-    classes: 'c-library__skip-link c-slat--grey u-link u-justify-center' }) 
-  }}
-{% endif %}

package/src/_includes/includes/system-scripts.njk

@@ -1,88 +0,0 @@
-<script>
-    (() => {
-      const openItems = JSON.parse(localStorage.getItem('library-open-items') || '[]');
-      openMenus();
-
-      Array.from(document.querySelectorAll('.c-library-accordion')).forEach(parent => {
-        const toggles = Array.from(document.querySelectorAll('.c-library-accordion__toggle'));
-        toggles.forEach(x => {
-          x.addEventListener('click', toggleParent)
-        });
-
-        Array.from(parent.children).forEach(c => c.classList.add('c-library-accordion-parent'));
-      });
-      
-      const activeMenu = document.querySelector('.c-library-menu-active');
-      if (activeMenu && window.innerWidth > 600) {
-        setTimeout(() => {
-          activeMenu.scrollIntoView({ block: 'center' });
-        }, 0)
-        
-        let parent = activeMenu.closest('.c-library-accordion-parent');
-
-        if (parent) {
-          parent.classList.add('c-library-accordion-open');
-        }
-      }      
-
-      function toggleParent(event) {
-        event.currentTarget.parentNode.classList.toggle('c-library-accordion-open');
-        gatherOpenMenus();
-      }
-
-      function gatherOpenMenus() {
-        const openItems = Array.from(document.querySelectorAll('.c-library-accordion-open'));
-        const items = JSON.stringify(openItems.filter(x => x.children.length).map(x => x.children[0].id).filter(Boolean));
-        localStorage.setItem('library-open-items', items);
-      }
-
-      function openMenus() {
-        openItems.forEach(id => {
-          const el = document.getElementById(id);
-          if (el) el.parentNode.classList.add('c-library-accordion-open');
-        });
-      }
-
-      // Copying HTML
-      Array.from(document.querySelectorAll('.c-library-copy__trigger')).forEach(t => {
-        t.addEventListener('click', copyCodeSnippet);
-      });
-
-      function copyCodeSnippet(event) {
-        const clipboard = event.currentTarget.parentNode.querySelector('.c-library-copy__clipboard');
-        if (clipboard) {
-          navigator.permissions.query({name: 'clipboard-write'}).then(result => {
-            if (result.state == 'granted' || result.state == 'prompt') {
-              navigator.clipboard.writeText(clipboard.innerText)
-            }
-          });
-        }
-      }
-
-      // Toggle iframe background colour
-      Array.from(document.querySelectorAll('.c-library__frame-background')).forEach(t => {
-        t.addEventListener('click', toggleBackgroundColour);
-      });
-
-      function toggleBackgroundColour(event) {
-        const iframe = event.currentTarget.parentNode.parentNode.querySelector('iframe');
-        if (iframe) {
-          iframe.classList.toggle('u-bg-petrol-step-3');
-          iframe.classList.toggle('u-pad-s');
-        }
-      }
-
-      // Show iframe width
-      const iframeWrap = document.getElementById('iframe-wrap');
-      function reportIframeWidth(entry){
-        const width = (entry.contentBoxSize) ? entry.contentBoxSize[0].inlineSize : entry.contentRect.width;
-        iframeWrap.style.setProperty('--width',width);
-      };
-      const resizeObserver = new ResizeObserver((entries) => {
-        for (const entry of entries) {
-          reportIframeWidth(entry);
-        }
-      });
-      resizeObserver.observe(iframeWrap);
-    })();
-  </script>

package/src/_includes/layout.njk

@@ -1,69 +0,0 @@
-{%- set fullTitle = title + " | " + config.name + " | " + config.creator -%}
-<!DOCTYPE html>
-<html lang="en" class="no-js">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{{ fullTitle }}</title>
-    {% if description %} <meta name="description" content="{{ description }}" /> {% endif %}
-    {% if not index %}<meta name="robots" content="noindex" />{% endif %}
-    <meta name="theme-color" content="#005461">
-    <meta property="og:type" content="website" />
-    <meta property="og:title" content="{{ fullTitle }}" />
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:title" content="{{ fullTitle }}" />
-    <meta property="og:image" content="{{ config.openGraphImage }}" />
-		<meta property="og:image:alt" content="{{ config.name }}" />
-		<meta name="twitter:image" content="{{ config.openGraphImage }}" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap" as="style">
-    <link rel="icon" type="image/png" sizes="32x32" href="/static/img/favicon.svg">
-    <link rel="stylesheet" href="/build/scss/main.css" />
-    <script>
-      if(document.documentElement){
-        document.documentElement.classList.add('has-js');
-        document.documentElement.classList.remove('no-js');
-      }
-      // Calculate the height of the sidebar so it doesn't cause double scrollbars
-      function debounce(func, wait, immediate) {
-        var timeout;
-        return function() {
-          var context = this, args = arguments;
-          var later = function() {
-            timeout = null;
-            if (!immediate) func.apply(context, args);
-          };
-          var callNow = immediate && !timeout;
-          clearTimeout(timeout);
-          timeout = setTimeout(later, wait);
-          if (callNow) func.apply(context, args);
-        };
-      };
-      var resizeSidebar = debounce(function() {
-        var header = document.querySelector('.c-library__header');
-        var headerHeight = header && header.offsetHeight + 'px';
-        document.documentElement.style.setProperty('--headerHeight', headerHeight)
-      }, 250); 
-    </script>
-    <script src="/build/js/app.js" defer></script>
-    <script>window.MSInputMethodContext && document.documentMode && document.write('<script src="https://cdn.jsdelivr.net/gh/nuxodin/ie11CustomProperties@4.1.0/ie11CustomProperties.min.js"><\/script>');</script>
-    {% block head %}{% endblock %}
-  </head>
-  <body class="{{ bodyClass }}">
-    {% block inner %}{% endblock %}
-
-    <script>
-      (function() {
-        // Prevent empty links from jumping to the top of page when clicked
-        var links = document.querySelectorAll('a[href=""],a[href="#"]');
-        for(var i = 0; links.length > i; i++) {
-          links[i].addEventListener('click', function(event) {
-            event.preventDefault();
-          })
-        }
-        window.addEventListener('resize', resizeSidebar);
-        resizeSidebar();
-      })();
-    </script>
-  </body>
-</html>

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

@@ -1,67 +0,0 @@
-{% from "components/component/component.njk" import libraryList, libraryLink %}
-{%- from "components/icon/macro.njk" import icon -%}
-
-<div class="u-flow">
-  <h3>Brand & visual identity</h3>
-  <ul>
-    {{ libraryList('Overview', '/brand/', page.url) }}
-    {{ libraryList('Quick start', '/quickstart/', page.url) }}
-    {{ libraryList('Requirements', '/brand/requirements/', page.url) }}
-    {{ libraryList('Resources', '/brand/resources/', page.url) }}
-    {{ libraryList('Logo', '/brand/logo/', page.url) }}
-    {{ libraryList('Colors', '/brand/colors/', page.url) }}
-    {{ libraryList('Typography', '/brand/typography/', page.url) }}
-    {{ libraryList('Photography', '/brand/images/', page.url) }}
-    {{ libraryList('Illustration', '/brand/illustration/', page.url) }}
-    {{ libraryList('Patterns', '/brand/patterns/', page.url) }}
-  </ul>
-  {# <h3>Brand identity</h3>
-  <ul>
-    {{ libraryList('Our brand identity', '/brand/identity/', page.url) }}
-    {{ libraryList('Brand strategy', '/brand/identity/strategy/', page.url) }}
-  </ul>  #}
-</div>
-    {# <li>
-      <a>Typography</a>
-      <ul>
-        <li><a>Desktop</a></li>
-        <li><a>Office</a></li>
-        <li><a>International</a></li>
-        <li><a>Web fonts</a></li>
-        <li><a>Software fonts</a></li>
-      </ul>
-    <li>
-    <li>
-      <a>Visual elements</a>
-      <ul>
-        <li><a>Petrol bar</a></li>
-        <li><a>Cut-off corner</a></li>
-        <li><a>The X-element</a></li>
-        <li><a>Headers</a></li>
-        <li><a>Bullets</a></li>
-        <li><a>Call to actions</a></li>
-        <li><a>Highlights</a></li>
-        <li><a>Separation</a></li>
-        <li><a>Tables</a></li>
-        <li><a>Graphs</a></li>
-        <li><a>Symbols</a></li>
-        <li><a>Web links</a></li>
-        <li><a>Addresses</a></li>
-        <li><a>Service and support</a></li>
-        <li><a>Sector imaging (DEEP in mining and materials)</a></li>
-        <li><a>Brand identity overview (download)</a></li>
-      </ul>
-    <li>
-    <li><a>Sector messaging</a><li>
-    <li><a>Brand identity overviews</a><li> #}
-
-{# <div class="u-flow">
-  <h3><a href="/brand">Applications</a></h3>
-  <p>Coming soon</p>
-  <ul>
-    <li><a>Brand strategy</a></li>
-    <li><a>How two organizations become one</a></li>
-    <li><a>Boilerplate</a></li>
-    <li><a>Legal information</a></li>
-  </ul>
-</div> #}