mp-design-system 0.6.4 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mp-design-system",
-  "version": "0.6.4",
+  "version": "0.8.0",
   "description": "",
   "main": "app.js",
   "scripts": {

package/src/_includes/components/accordion/accordion.config.js

@@ -0,0 +1,27 @@
+module.exports = {
+    title: 'Accordion',
+    component: {
+        name: 'accordion'
+    },
+    docs: true,
+    context: {
+        items: [
+            {
+                title: 'Do I need to prepare the workspace prior to installation?',
+                content: 'All instruments need a power source, and some have additional requirements such as a water supply or waste extraction. Where this the case, we will advise you prior to shipping your instrument.'
+            },
+            {
+                title: 'What specialist skills or knowledge are required?',
+                content: 'You don\'t need any specialist skills or knowledge to perform a Smart Install. Simply follow the instructions provided.'
+            },
+            {
+                title: 'Do I need specialist tools or equipment to Smart Install a new instrument?',
+                content: '<ul><li>For installation of a Mastersizer or Zetasizer system, you will need a computer with internet access in order to view the installation guides. For installation of an Epsilon 1 XRF instrument, you will also need a smartphone or tablet to connect with our support personnel via a secure, augmented reality (AR) platform.</li><li>Everything else you need to install your new instrument will be provided.</li></ul>'
+            },
+            {
+                title: 'What languages are available for the Smart Install guides?',
+                content: '<ul><li>Mastersizer: English, Chinese, Korean, French, German and Japanese</li><li>Zetasizer: English, Chinese, Korean, French, German and Japanese</li><li>Epsilon 1: English, French, German and Japanese, Spanish and Portuguese</li></ul>'
+            }
+        ]
+    }
+}

package/src/_includes/components/accordion/accordion.md

@@ -0,0 +1,15 @@
+## Blank HTML template
+```
+<dl class="c-accordion">
+    <div class="c-accordion__item">
+        <dt class="c-accordion__title">Title one</dt>
+        <dd class="c-accordion__content o-prose u-flow--prose">Content one</dd>
+    </div>
+    <div class="c-accordion__item">
+        <dt class="c-accordion__title">Title two</dt>
+        <dd class="c-accordion__content o-prose u-flow--prose">Content two</dd>
+    </div>
+</dl>
+```
+- To make an item display in its opened state when the page loads, add the class `c-accordion--item__open`
+- The classnames `o-prose` and `u-flow--prose` on the content are optional

package/src/_includes/components/accordion/accordion.njk

@@ -0,0 +1,10 @@
+{% from "components/icon/macro.njk" import icon %}
+
+<dl class="c-accordion">
+    {% for item in params.items %}
+        <div class="c-accordion__item {{ 'c-accordion__item--open' if item.state }}">
+            <dt class="c-accordion__title">{{ item.title }}</dt>
+            <dd class="c-accordion__content o-prose u-flow--prose">{{ item.content | safe }}</dd>
+        </div>
+    {% endfor %}
+</dl>

package/src/_includes/components/accordion/accordion.scss

@@ -0,0 +1,49 @@
+.c-accordion {
+    &__item {
+        @include padding('xs',0);
+        
+        & + & {
+            border-top: 1px solid color('petrol', 'step-2');
+        }
+    }
+    
+    &__title {
+        @include step(1);
+        @include padding('xs',0);
+        cursor: pointer;
+        font-weight: weight('bold');
+        position: relative;
+
+        &:before {
+            background-image: url('data:image/svg+xml;utf8,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 1V17M1 9H17" stroke="%23252525" stroke-width="2" stroke-linecap="round"/></svg>');
+            background-position: center center;
+            background-repeat: no-repeat;
+            content: "";
+            display: block;
+            height: 1em;
+            left: 0;
+            position: absolute;
+            width: 1em;
+        }
+
+        .c-accordion__item--open &:before {
+            background-image: url('data:image/svg+xml;utf8,<svg width="10" height="2" viewBox="0 0 10 2" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1H9" stroke="%23252525" stroke-width="2" stroke-linecap="round"/></svg>');
+            transform: scaleX(1.75);
+        }
+    }
+
+    &__content {
+        margin-left: 0;
+        @include padding-bottom('xs');
+        display: none;
+
+        .c-accordion__item--open & {
+            display: block;
+        }
+    }
+
+    &__title,
+    &__content {
+        @include padding-left('l-xl');
+    }
+}

package/src/_includes/components/accordion/macro.njk

@@ -0,0 +1,5 @@
+{% from "components/component/component.njk" import c %}
+
+{% macro alert(params) %}
+  {{ c({ name: 'accordion' }, params) }}
+{% endmacro %}

package/src/_includes/components/button/button.njk

@@ -22,7 +22,7 @@
 {%- elseif params.type == 'span' -%}
 <span class="{{ classNames }}" {{ attrs }}>
 {%- else -%}
-<button type="{{ params.type or 'button' }}" class="{{ classNames}}"{{ attrs }}>
+<button type="{{ params.type or 'button' }}" class="{{ classNames}}" {{ attrs }}>
 {%- endif -%}
   {%- if params.icon -%}
     {{ twi({ icon: params.icon, align: params.align, label: params.label }) }}

package/src/_includes/components/campaign/campaign.config.js

@@ -24,19 +24,19 @@ module.exports = {
     {
       title: 'Petrol',
       context: {
-        classes: 'c-campaign__petrol'
+        classes: 'c-campaign--petrol'
       }
     },
     {
       title: 'Blue',
       context: {
-        classes: 'c-campaign__blue'
+        classes: 'c-campaign--blue'
       }
     },
     {
       title: 'Orange',
       context: {
-        classes: 'c-campaign__orange'
+        classes: 'c-campaign--orange'
       }
     }
   ],

package/src/_includes/components/card/card.scss

@@ -170,20 +170,6 @@
     }
   }
 
-  // &--fixed-aspect figure {
-  //   height: 0;
-  //   padding-bottom: 62.5%;
-  //   aspect-ratio: 16/10;
-  //   position: relative;
-  // }
-  // &--image-margin figure {
-  //   @include margin("s-m", "s-m", 0, "s-m");
-  // }
-
-  &--layout-single &__figure {
-    @extend .u-16\/9;
-  }
-
   &__primary {
     @include flow("s");
   }

package/src/_includes/components/comparison-table/comparison-table.scss

@@ -52,6 +52,11 @@
     }
   }
 
+  thead img {
+    @include space('max-height', '3xl');
+    object-fit: contain;
+  }
+
 }
 
 @media only screen and (min-width: 640px) {

package/src/_includes/components/hero/hero.config.js

@@ -48,14 +48,14 @@ module.exports = {
         },
         cta: {
           label: 'Download brochure',
-          link: '/static/pdf/Mastersizer 3000.pdf',
+          link: 'https://www.malvernpanalytical.com/en/assets/Mastersizer%203000%20Brochure%20%28EN%29_tcm50-58994.pdf',
           attrs: 'download',
           icon: 'file'
         }
       }
     },
     {
-      title: 'For homepage',
+      title: 'Homepage',
       context: {
         title: "We’re big on small.",
         subtitle: null,
@@ -76,7 +76,7 @@ module.exports = {
       }
     },
     {
-      title: 'For homepage (light)',
+      title: 'Homepage (light)',
       context: {
         title: "We’re big on small.",
         subtitle: null,
@@ -96,6 +96,30 @@ module.exports = {
         homepage: 'light'
       }
     },
+    // {
+    //   title: 'Homepage with video',
+    //   context: {
+    //     title: 'We\'re big on small.',
+    //     subtitle: null,
+    //     content: '<p>We make scientific instruments and services that make the invisible visible, and the impossible possible.</p>',
+    //     videoplaceholder: {
+    //       src: 'https://p3.aprimocdn.net/malvernpanalytical/bf169dc6-9edb-4609-9ba8-add301206d1e/bridge-bg_Original%20file.webp?quality=60'
+    //     },
+    //     shortvideo: [
+    //       { src: '' },
+    //       { type: 'video/mp4' },
+    //     ],
+    //     longvideo: [
+    //       { src: '' },
+    //       { type: 'video/mp4' },
+    //     ],
+    //     cta: {
+    //       label: 'About Malvern Panalytical',
+    //       link: ''
+    //     },
+    //     homepage: 'dark'
+    //   },
+    // }
   ],
   props: [
     {

package/src/_includes/components/hero/hero.njk

@@ -1,5 +1,7 @@
 {% from "components/twi/macro.njk" import twi %}
 {% from "components/breadcrumb/macro.njk" import breadcrumb %}
+{% from "components/button/macro.njk" import button %}
+{% from "components/icon/macro.njk" import icon %}
 
 {%- set classes = 'mp c-hero' -%}
 {% if params.classes %}{%- set classes = classes + ' ' + params.classes -%}{% endif %}
@@ -11,6 +13,10 @@
   {%- set classes = classes + ' c-hero--homepage-light' -%}
 {% endif %}
 
+{% if params.shortvideo %}
+  {%- set classes = classes + ' c-hero--homepage-video' -%}
+{% endif %}
+
 <figure class="{{ classes }}">
   <div class="u-wrap">
     <div class="c-hero__content">
@@ -38,7 +44,6 @@
     </div>
   </div>
 
-
   {% if params.image %}
     <div class="c-hero__image-bg" style="background-image:url({{ params.image.src }});"></div>
   {% elif params.images %}
@@ -47,6 +52,14 @@
     {% endfor %}
   {% endif %}
 
+  {% if params.shortvideo %}
+    <div class="c-hero__video-bg" style="background-image:url({{ params.videoplaceholder.src }});">
+      <video id="videoBackground" autoplay loop>
+        <source src="https://p3.aprimocdn.net/malvernpanalytical/304f04aa-ae04-4bed-9946-ae3101152327/PN12593_Brand_Movie_Malvern_Panalytical_MIX_0dBfs_website_header_Original%20file.mp4" type="video/mp4">
+      </video>
+    </div>
+  {% endif %}
+
   {% if params.homepage %}
     <canvas class="c-hero__canvas"></canvas>
   {% endif %}
@@ -56,4 +69,19 @@
       <div class="c-hero__image-fg" style="background-image:url({{ image.src }});"></div>
     {% endfor %}
   {% endif %}
+
+  {% if params.longvideo %}
+    {{ button({ link: '', label: 'Play video', colour: 'outline-white', classes: 'c-hero__button', attrs: 'id=playVideo' }) }}
+  {% endif %}
 </figure>
+
+<div id="lightboxVideo" class="c-lightbox u-hidden">
+  <div class="c-lightbox__close">
+    {{ icon({ id: 'cross' }) }}
+  </div>
+  <div class="c-lightbox__slide active">
+    <video class="c-lightbox__video" controls controlslist="nodownload">
+      <source src="https://p3.aprimocdn.net/malvernpanalytical/304f04aa-ae04-4bed-9946-ae3101152327/PN12593_Brand_Movie_Malvern_Panalytical_MIX_0dBfs_website_header_Original%20file.mp4" type="video/mp4">
+    </video>
+  </div>
+</div>

package/src/_includes/components/hero/hero.scss

@@ -141,7 +141,6 @@
           z-index: -1;
           transition: opacity 3s ease;
           background-position: 60% 40%;
-          -webkit-mask-image: radial-gradient(circle farthest-side at top right, black 80%, transparent 98%);
 
           &:after {
             display: none;
@@ -160,6 +159,67 @@
     }
   }
 
+  &--homepage-video {
+    position: relative;
+
+    &::after {
+      position: absolute;
+      content: '';
+      top: 0;
+      left: 0;
+      background: rgba(black, 0.33);
+      width: 100%;
+      height: 100%;
+
+      @media (min-width: 38em) {
+        background: radial-gradient(circle farthest-side at top right, rgba(46, 50, 51, 0) 0%, rgba(46, 50, 51, 0) 15.16%, rgba(46, 50, 51, 0.2) 27.66%, rgba(41, 54, 56, 0.55) 39.61%, rgba(35, 66, 71, 0.8) 49.78%, #005461 59.87%, #003039 100%);
+      }
+    }
+
+    .c-hero {
+        &__video-bg {
+        width: 100%;
+        height: auto;
+        margin-bottom: -6px;
+        background-size: cover;
+
+        @media (min-width: 38em) {
+          position: absolute;
+          top: 50%;
+          right: 0;
+          left: 40%;
+          max-width: 60%;
+          height: 100%;
+          transform: translateY(-50%);
+        }
+
+        video {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+      }
+
+      &__button {
+        position: absolute;
+        z-index: 2;
+        right: 0;
+        bottom: calc(56.25% / 2 - 25px);
+        left: 0;
+        background: rgba(black, 0.2);
+        margin: 0 auto;
+
+        @media (min-width: 38em) {
+          position: absolute;
+          top: 45%;
+          right: 20%;
+          bottom: unset;
+          left: unset;
+        }
+      }
+    }
+  }
+
   &--homepage-light {
     @extend .c-hero--homepage;
     background: linear-gradient(79.62deg, color('petrol', 'step-3') 0%, color('blue', 'step-2') 100%), color('petrol', 'step-3');

package/src/_includes/components/industry-card/industry-card.njk

@@ -1,7 +1,7 @@
 <article class="mp c-industry-card">
   <a class="c-industry-card__link u-flow--xs" href="{{ params.link }}">
-    <figure class="c-industry-card__image u-16/9">
-      <img class="u-fill" src="{{ params.image.src }}" alt="{{ params.image.alt or params.title }}" />
+    <figure class="c-industry-card__image">
+      <img class="u-2/1" src="{{ params.image.src }}" alt="{{ params.image.alt or params.title }}" />
     </figure>
     <h3 class="c-h c-h--reset">{{ params.title }}</h3>
   </a>

package/src/_includes/components/industry-card/industry-card.scss

@@ -5,11 +5,11 @@
     display: block;
   }
 
-  &__image {
-    @extend .u-16\/9
-  }
-
   &:hover .c-h--reset {
     text-decoration: underline;
   }
+
+  img {
+    width: 100%;
+  }
 }

package/src/_includes/components/meta-box/meta-box.scss

@@ -3,4 +3,8 @@
   @include padding('s-m');
   @include step(-1);
   @include flow('s');
-}
+
+  .u-wrap--fields {
+    @include padding-right(0)
+  }
+}

package/src/_includes/components/table/table.config.js

@@ -17,6 +17,18 @@ module.exports = {
         classes: 'c-table--fixed'
       }
     },
+    {
+      title: 'Vertical headers',
+      context: {
+        theme: 'vertical'
+      }
+    },
+    {
+      title: 'No headers',
+      context: {
+        theme: 'none'
+      }
+    },
     {
       title: 'Center',
       context: {

package/src/_includes/components/table/table.njk

@@ -1,16 +1,22 @@
 <table class="mp c-table {{ params.classes }}" {{ params.attrs }}>
+  {% if params.theme != 'none'%}
   <thead>
     <tr>
       {% for header in params.headers %}
-        <th>{{ header | safe }}</th>
+        {% if (params.theme != 'vertical') or ((params.theme == 'vertical') and (loop.index0 == 0)) %}
+          <th>{{ header | safe }}</th>
+        {% else %}
+          <td>{{ header | safe }}</td>
+        {% endif %}
       {% endfor %}
     </tr>
   </thead>
+  {% endif %}
   <tbody>
     {% for row in params.rows %}
       <tr>
         {% for cell in row %}
-          {% if loop.index0 == 0 %}
+          {% if (params.theme == 'vertical') and (loop.index0 == 0) %}
             <th>{{ cell | safe }}</th>
           {% else %}
             <td>{{ cell | safe }}</td>

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

@@ -3,7 +3,7 @@
 <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">
+    <div class="o-grid o-grid--of-three o-grid--swipeable">
       {{ card({
           theme: {
             layout: 'single',

package/src/_includes/includes/resources.njk

@@ -3,7 +3,7 @@
 <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">
+    <div class="o-grid o-grid--of-three o-grid--swipeable">
       {{ card({
         theme: {
           layout: 'single',

package/src/_includes/layout.njk

@@ -14,10 +14,31 @@
 		<meta property="og:image:alt" content="{{ config.name }}" />
 		<meta name="twitter:image" content="{{ config.openGraphImage }}" />
     <link rel="preconnect" href="https://fonts.gstatic.com">
-    <script>if(document.documentElement){
-      document.documentElement.classList.add('has-js');
-      document.documentElement.classList.remove('no-js');
-    }</script>
+    <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 headerHeight = document.querySelector('.c-library__header').offsetHeight + 'px';
+        document.documentElement.style.setProperty('--headerHeight', headerHeight)
+      }, 250); 
+    </script>
     <link rel="icon" type="image/png" sizes="32x32" href="/static/img/favicon-32x32.png">
     <link rel="stylesheet" href="/build/scss/main.css" />
     <script>window.MSInputMethodContext && document.documentMode && document.write('<script src="https://cdn.jsdelivr.net/gh/nuxodin/ie11CustomProperties@4.1.0/ie11CustomProperties.min.js"><\/script>');</script>
@@ -30,12 +51,15 @@
     <script src="/build/js/app.js"></script>
     <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>

package/src/assets/js/app.js

@@ -1,9 +1,12 @@
+import Accordion from './imports/accordion';
 import Carousel from './imports/carousel';
 import ClearForm from './imports/clear-form';
 import Comparison from './imports/comparison';
 import Gallery from './imports/gallery';
 import HeroPattern from './imports/hero-pattern';
+import HeroVideo from './imports/hero-video';
 import ResponsiveTable from './imports/responsive-table';
+import ScrollbarWidth from './imports/scrollbar-width';
 import ScrollSpy from './imports/scroll-spy';
 import Tabs from './imports/tabs';
 
@@ -15,12 +18,15 @@ import Tabs from './imports/tabs';
     HTMLCollection.prototype.forEach = Array.prototype.forEach;
   }
   
+  Accordion();
   Carousel();
   ClearForm();
   Comparison();
   Gallery();
   HeroPattern();
-  Tabs();
-  ScrollSpy();
+  HeroVideo();
   ResponsiveTable();
+  ScrollbarWidth();
+  ScrollSpy();
+  Tabs();
 })();

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

@@ -0,0 +1,19 @@
+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) => {
+        console.log(event)
+        var item = event.currentTarget.parentElement;
+        console.log(item)
+        item.classList.toggle('c-accordion__item--open');
+    }
+}
+
+export default Accordion;

package/src/assets/js/imports/hero-video.js

@@ -0,0 +1,34 @@
+function HeroVideo() {
+  document.addEventListener("DOMContentLoaded", () => {
+    const videoBackground = document.getElementById('videoBackground');
+    if(typeof(videoBackground) != 'undefined' && videoBackground != null) {
+      const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
+      if(!reducedMotion || reducedMotion.matches) {
+        videoBackground.classList.add('u-hidden');
+      }
+      
+      const lightboxTrigger = document.getElementById('playVideo');
+      const lightboxVideo = document.getElementById('lightboxVideo');
+
+      lightboxTrigger.addEventListener('click', e => {
+        videoBackground.removeAttribute('autoplay');
+        lightboxVideo.classList.remove('u-hidden');
+      });
+  
+      lightboxVideo.addEventListener('click', (e) => {
+        if (!e.target.classList.contains('c-lightbox__video')) {
+          videoBackground.setAttribute('autoplay','');
+          lightboxVideo.classList.add('u-hidden');
+        }
+      });
+      window.addEventListener('keydown', function(e) {
+        if (e.key == "Escape") {
+          videoBackground.setAttribute('autoplay','');
+          lightboxVideo.classList.add('u-hidden');
+        }
+      });
+    }
+  });
+}
+
+export default HeroVideo;

package/src/assets/js/imports/scrollbar-width.js

@@ -0,0 +1,15 @@
+import { debounce } from './utilities';
+
+function ScrollbarWidth() {
+    setScrollbarWidth();
+    window.addEventListener('resize', debounce(setScrollbarWidth, 250));
+}
+
+function setScrollbarWidth() {
+    document.documentElement.style.setProperty(
+        '--scrollbarWidth', 
+        window.innerWidth - document.body.clientWidth + 'px'
+    );
+}
+
+export default ScrollbarWidth;

package/src/assets/js/imports/utilities.js

@@ -15,6 +15,16 @@ export function userPrefersReducedMotion() {
   return prefersReducedMotion;
 }
 
+export const debounce = (func, limit) => {
+  let wait = false; 
+  return () => {
+      if (wait) return;
+      func();
+      wait = true;
+      setTimeout(() => wait = false, limit);
+  }
+}
+
 export const lerp = (x, y, a) => x * (1 - a) + y * a;
 export const clamp = (a, min = 0, max = 1) => Math.min(max, Math.max(min, a));
 export const invlerp = (x, y, a) => clamp((a - x) / (y - x));