mp-design-system 0.6.3 → 0.7.5

package/package.json

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

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");
   }
@@ -418,3 +404,7 @@
     @include gap("s-l");
   }
 }
+
+// IE11 fix
+// This forces IE11 to use display:block instead of flex for single-column cards
+_:-ms-fullscreen, :root .c-card, :root .c-card--layout-single .c-card__wrapper { display:block; }

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

@@ -55,7 +55,7 @@ module.exports = {
       }
     },
     {
-      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>',
+    //     images: [
+    //       { src: '/static/img/homepage_1_back.webp' },
+    //     ],
+    //     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 %}
@@ -38,7 +40,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 +48,12 @@
     {% endfor %}
   {% endif %}
 
+  {% if params.shortvideo %}
+    <video id="videoBackground" class="c-hero__video-bg" autoplay loop>
+      <source src="" type="video/mp4">
+    </video>
+  {% endif %}
+
   {% if params.homepage %}
     <canvas class="c-hero__canvas"></canvas>
   {% endif %}
@@ -56,4 +63,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="" type="video/mp4">
+    </video>
+  </div>
+</div>

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

@@ -157,6 +157,40 @@
         @extend .c-hero__image-bg;
         z-index: 1;
       }
+
+      &__video-bg {
+        width: 100%;
+        height: auto;
+        margin-bottom: -6px;
+
+        @media (min-width: 38em) {
+          position: absolute;
+          top: 0;
+          right: 0;
+          left: 40%;
+          max-width: 60%;
+          height: 100%;
+          object-fit: cover;
+          -webkit-mask-image: radial-gradient(circle farthest-side at top right, black 80%, transparent 98%);
+        }
+      }
+
+      &__button {
+        position: absolute;
+        z-index: 2;
+        right: 0;
+        bottom: calc(56.25% / 2 - 25px);
+        left: 0;
+        margin: 0 auto;
+
+        @media (min-width: 38em) {
+          position: absolute;
+          top: 45%;
+          right: 20%;
+          bottom: unset;
+          left: unset;
+        }
+      }
     }
   }
 

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

@@ -3,7 +3,9 @@ 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';
 
@@ -20,7 +22,9 @@ import Tabs from './imports/tabs';
   Comparison();
   Gallery();
   HeroPattern();
-  Tabs();
-  ScrollSpy();
+  HeroVideo();
   ResponsiveTable();
+  ScrollbarWidth();
+  ScrollSpy();
+  Tabs();
 })();

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

package/src/assets/scss/components/gallery.scss

@@ -10,8 +10,13 @@
       width: 100%;
 
       img {
-        margin: 0 auto;
         display: block;
+        margin: 0 auto;
+
+        @supports (object-fit:contain) {
+          max-height: 500px;
+          object-fit: contain;
+        }
       }
     
       &:not(.active) {
@@ -24,29 +29,22 @@
     @include padding-bottom('s');
     display: flex;
     flex-direction: row;
-    flex-wrap: nowrap;
-    -webkit-overflow-scrolling: touch;
-    scroll-behavior: smooth;
-    scroll-snap-type: x mandatory;
-    overflow-x: auto;
+    flex-wrap: wrap;
+    gap: 2%;
+    gap: max(8px, 2%);
     
     & > * {
       background: color('grey', 'step-3');
-      max-width: 25%;
-      max-height: var(--space-2xl);
-      min-width: var(--space-l);
-      min-height: var(--space-l);
-      width: auto;
-      scroll-snap-align: start;
-
-      & + * {
-        margin-left: var(--space-xs-s);
-      }
+      @include space('min-height', 'l');
+      @include space('max-height', '2xl');
+      @include space('min-width', 'l');
+      max-width: 10.75%;
 
       img {
-        min-height: 100%;
-        opacity: 0.9;
+        height: 100%;
+        opacity: 0.8;
         object-fit: cover;
+        width: 100%;
       }
 
       &.active img {
@@ -54,54 +52,4 @@
       }
     }
   }
-}
-
-.c-lightbox {
-  position: fixed;
-  z-index: 1000;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(color('grey', 'step--1'), .9);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  &__slide {
-    max-width: 90vw;
-    margin: auto;
-    display: none;
-
-    &.active {
-      display: block;
-
-      img {
-        max-width: 85vw;
-        max-height: 90vh;
-        margin: auto;
-        display: block;
-      }
-    }
-  }
-
-  &__prev,
-  &__next {
-    position: absolute;
-    height: 2rem;
-    width: 2rem;
-    background-repeat: no-repeat;
-    background-position: center;
-    padding: 0.5rem;
-    cursor: pointer;
-  }
-
-  &__prev {
-    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="arrow-left" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12H2M2 12L9 5M2 12L9 19" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>');
-    left: 0.5rem;
-  }
-
-  &__next {
-    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="arrow-right" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12H22M22 12L15 5M22 12L15 19" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>');
-    right: 0.5rem;
-  }
 }

package/src/assets/scss/components/index.scss

@@ -30,3 +30,4 @@
 
 @import './headings.scss';
 @import './gallery.scss';
+@import './lightbox.scss';

package/src/assets/scss/components/lightbox.scss

@@ -0,0 +1,62 @@
+.c-lightbox {
+  position: fixed;
+  z-index: 1000;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(color('grey', 'step--1'), .9);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &__slide {
+    max-width: 90vw;
+    margin: auto;
+    display: none;
+
+    &.active {
+      display: block;
+
+      img {
+        max-width: 85vw;
+        max-height: 90vh;
+        margin: auto;
+        display: block;
+      }
+    }
+  }
+
+  &__prev,
+  &__next {
+    position: absolute;
+    height: 2rem;
+    width: 2rem;
+    background-repeat: no-repeat;
+    background-position: center;
+    padding: 0.5rem;
+    cursor: pointer;
+  }
+
+  &__prev {
+    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="arrow-left" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12H2M2 12L9 5M2 12L9 19" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>');
+    left: 0.5rem;
+  }
+
+  &__next {
+    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="arrow-right" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12H22M22 12L15 5M22 12L15 19" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>');
+    right: 0.5rem;
+  }
+
+  &__close {
+    position: absolute;
+    top: 0.6rem;
+    right: 0.6rem;
+    color: color('white');
+    font-size: 1.6rem;
+    cursor: pointer;
+  }
+
+  &__video {
+    width: 100%;
+  }
+}

package/src/assets/scss/library.scss

@@ -71,7 +71,7 @@
   @media only screen and (min-width: 600px) {
     &--components &__body > * {
       overflow-y: scroll;
-      height: calc(100vh - 115px);
+      height: calc( 100vh - var(--headerHeight) - 1px );
     }
   }
 
@@ -212,7 +212,11 @@
   }
 
   &__main {
-    overflow-y: scroll;
+    overflow-y: auto;
+
+    @media only screen and (min-width: 600px) {
+      overflow-y: scroll;
+    }
   }
 
   &__frame {