mp-design-system 0.7.3 → 0.8.2

package/package.json

@@ -1,15 +1,14 @@
 {
   "name": "mp-design-system",
-  "version": "0.7.3",
+  "version": "0.8.2",
   "description": "",
-  "main": "app.js",
   "scripts": {
     "dev": "npm-run-all --parallel bundle:*",
     "bundle:eleventy": "eleventy --serve --quiet",
-    "bundle:parcel": "parcel src/assets/js/*.js src/assets/scss/*.scss -d dist/build --public-url ../",
+    "bundle:parcel": "parcel src/assets/js/*.js src/assets/scss/*.scss --dist-dir ./dist/build",
     "build": "run-s prod:*",
     "prod:eleventy": "eleventy",
-    "prod:parcel": "rimraf dist/build && parcel build src/assets/js/*.js src/assets/scss/*.scss -d dist/build --public-url ../",
+    "prod:parcel": "rimraf dist/build && parcel build src/assets/js/*.js src/assets/scss/*.scss --dist-dir ./dist/build",
     "prepublishOnly": "rimraf dist && npm run prod:parcel"
   },
   "files": [
@@ -22,12 +21,13 @@
   "devDependencies": {
     "@11ty/eleventy": "^0.12.1",
     "@11ty/eleventy-plugin-syntaxhighlight": "^3.1.2",
+    "@parcel/transformer-sass": "^2.4.0",
     "dotenv": "^8.6.0",
     "html-prettify": "^1.0.3",
     "markdown-it": "^12.1.0",
     "markdown-it-prism": "^2.1.8",
     "npm-run-all": "^4.1.5",
-    "parcel-bundler": "^1.12.5",
+    "parcel": "^2.4.0",
     "require-glob": "^3.2.0",
     "rimraf": "^3.0.2",
     "sass": "^1.35.2",
@@ -36,6 +36,5 @@
   "alias": {
     "mp": "./node_modules/mp-design-system/src/assets/scss",
     "comp": "./src/_includes/components"
-  },
-  "dependencies": {}
+  }
 }

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/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/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/system-footer.njk

@@ -5,11 +5,9 @@
 {% markdown %}
 ### Get in touch
 
-This system is maintained by the Design System Team.
+This system is maintained by the Design System Team. Any feedback, questions or ideas are welcome, so please share your thoughts.
 
-Any feedback, questions or ideas are welcome, so please share your thoughts.
-
-- For all enquiries please contact [will.wallace@malvernpanalytical.com](mailto:will.wallace@malvernpanalytical.com).
+- For all enquiries please contact [will.wallace@malvernpanalytical.com](mailto:will.wallace@malvernpanalytical.com) via email or Teams.
 {% endmarkdown %}
 
   </nav>

package/src/assets/js/app.js

@@ -1,11 +1,13 @@
+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 ScrollSpy from './imports/scroll-spy';
 import ScrollbarWidth from './imports/scrollbar-width';
+import ScrollSpy from './imports/scroll-spy';
 import Tabs from './imports/tabs';
 
 (() => {
@@ -16,13 +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/gallery.js

@@ -33,6 +33,12 @@ function Gallery() {
       if(slide.classList.contains('c-gallery__video')) {
         slide.remove();
       }
+      if(!slide.classList.contains('c-gallery__video')) {
+        var slideImg = slide.querySelector('img');
+        if(slideImg.srcset != '') {
+          slideImg.removeAttribute('srcset');
+        }
+      }
       slide.classList.add('c-lightbox__slide');
       slide.classList.remove('c-gallery__slide');
     });

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

@@ -27,6 +27,8 @@
 @import '~comp/slat/slat.scss';
 @import '~comp/hero/hero.scss';
 @import '~comp/quote/quote.scss';
+@import '~comp/accordion/accordion.scss';
 
 @import './headings.scss';
 @import './gallery.scss';
+@import './lightbox.scss';

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

@@ -0,0 +1,63 @@
+.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%;
+    max-height: 80vh;
+  }
+}

package/src/assets/scss/objects/grid.scss

@@ -185,13 +185,15 @@ $grid-gutter-width: 36;
       flex-wrap: nowrap;
       overflow-x: scroll;
       scroll-snap-type: x mandatory;
+      scroll-padding: var(--gutter);
       -webkit-overflow-scrolling: touch;
 
       & > * {
         flex: 0 0 auto;
         max-width: 23em;
         width: calc(85vw - var(--gutter)*2.333); // !important
-        scroll-snap-align: center;
+        scroll-snap-align: start;
+        scroll-snap-stop: always;
       }
 
       & > * + * {