mp-design-system 0.7.3 → 0.7.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mp-design-system",
-  "version": "0.7.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/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/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/assets/js/app.js

@@ -3,9 +3,10 @@ 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 ScrollSpy from './imports/scroll-spy';
 import ScrollbarWidth from './imports/scrollbar-width';
+import ScrollSpy from './imports/scroll-spy';
 import Tabs from './imports/tabs';
 
 (() => {
@@ -21,8 +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/scss/components/gallery.scss

@@ -52,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%;
+  }
+}