mp-design-system 0.7.5 → 0.8.4

package/package.json

@@ -1,15 +1,14 @@
 {
   "name": "mp-design-system",
-  "version": "0.7.5",
+  "version": "0.8.4",
   "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": [
@@ -21,21 +20,21 @@
   "license": "ISC",
   "devDependencies": {
     "@11ty/eleventy": "^0.12.1",
-    "@11ty/eleventy-plugin-syntaxhighlight": "^3.1.2",
+    "@11ty/eleventy-plugin-syntaxhighlight": "^3.2.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",
+    "html-prettify": "^1.0.6",
+    "markdown-it": "^12.3.2",
+    "markdown-it-prism": "^2.2.3",
     "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",
-    "slugify": "^1.6.0"
+    "sass": "^1.49.10",
+    "slugify": "^1.6.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/alert/alert.scss

@@ -24,7 +24,7 @@
     }
   }
 
-  & > .c-icon {
+  & .c-icon {
     position: absolute;
     left: 1.25rem;
     top: 1.25rem;

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

@@ -38,6 +38,12 @@ module.exports = {
       context: {
         classes: 'c-campaign--orange'
       }
+    },
+    {
+      title: 'No image',
+      context: {
+        image: false
+      }
     }
   ],
   props: [

package/src/_includes/components/campaign/campaign.njk

@@ -11,9 +11,11 @@
 
 <aside class="{{ classNames }}">
   <a href="" class="c-campaign__link">{{ params.title }}</a>
-  <figure class="c-campaign__image">
-    <img src="{{ params.image.src }}" alt="{{ params.image.alt }}" />
-  </figure>
+  {% if params.image %}
+    <figure class="c-campaign__image">
+      <img src="{{ params.image.src }}" alt="{{ params.image.alt }}" />
+    </figure>
+  {% endif %}
   <div class="c-campaign__content u-flow">
     <h2 class="c-h c-h--step-2">{{ params.title }}</h2>
     <div class="mp o-prose u-flow--prose">

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

@@ -48,7 +48,7 @@ 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'
         }
@@ -102,9 +102,9 @@ module.exports = {
     //     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' },
-    //     ],
+    //     videoplaceholder: {
+    //       src: 'https://p3.aprimocdn.net/malvernpanalytical/bf169dc6-9edb-4609-9ba8-add301206d1e/bridge-bg_Original%20file.webp?quality=60'
+    //     },
     //     shortvideo: [
     //       { src: '' },
     //       { type: 'video/mp4' },

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

@@ -13,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">
@@ -49,9 +53,11 @@
   {% endif %}
 
   {% if params.shortvideo %}
-    <video id="videoBackground" class="c-hero__video-bg" autoplay loop>
-      <source src="" type="video/mp4">
-    </video>
+    <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 %}
@@ -75,7 +81,7 @@
   </div>
   <div class="c-lightbox__slide active">
     <video class="c-lightbox__video" controls controlslist="nodownload">
-      <source src="" type="video/mp4">
+      <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;
@@ -157,21 +156,47 @@
         @extend .c-hero__image-bg;
         z-index: 1;
       }
+    }
+  }
+
+  &--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%);
+      }
+    }
 
-      &__video-bg {
+    .c-hero {
+        &__video-bg {
         width: 100%;
         height: auto;
         margin-bottom: -6px;
+        background-size: cover;
 
         @media (min-width: 38em) {
           position: absolute;
-          top: 0;
+          top: 50%;
           right: 0;
           left: 40%;
           max-width: 60%;
           height: 100%;
+          transform: translateY(-50%);
+        }
+
+        video {
+          width: 100%;
+          height: 100%;
           object-fit: cover;
-          -webkit-mask-image: radial-gradient(circle farthest-side at top right, black 80%, transparent 98%);
         }
       }
 
@@ -181,6 +206,7 @@
         right: 0;
         bottom: calc(56.25% / 2 - 25px);
         left: 0;
+        background: rgba(black, 0.2);
         margin: 0 auto;
 
         @media (min-width: 38em) {

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

@@ -7,4 +7,28 @@
   .u-wrap--fields {
     @include padding-right(0)
   }
+
+  @media only screen and (min-width: 35em) and (max-width: 54.95em) {
+    column-width: 18em;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 0 var(--gutter);
+    grid-template-rows: auto max-content auto;
+    
+    h2 {
+      grid-column: 1/3;
+    }
+
+    li {
+      break-inside: avoid;
+    }
+        
+    .u-grey-step-1 {
+      grid-row: 2/4;
+    }
+    
+    .c-button {
+      align-self: start;
+    }
+  }
 }

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

@@ -1,17 +1,25 @@
+{% 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="mp o-prose u-flow--prose u-step--1">
+    <div class="o-grid o-grid--8/3-switch o-grid--push">
+      <ol class="u-flow--xs u-margin-top-2xs">
+        <li><h3>Quick links</h3></li>
+        <li><a href="/brand/downloads">Popular downloads</a></li>
+        <li><a href="/checklist">Franklin checklist</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.
+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@malvernpanalytical.com](mailto:will.wallace@malvernpanalytical.com).
+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">

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

@@ -2,27 +2,21 @@
 {%- from "components/icon/macro.njk" import icon -%}
 
 <div class="u-flow">
-  <h3>Getting started</h3>
+  <h3>Brand & visual identity</h3>
   <ul>
     {{ libraryList('Overview', '/brand/', page.url) }}
-    {{ libraryList('Downloads', '/brand/downloads', page.url) }}
+    {{ libraryList('Downloads', '/brand/downloads/', page.url) }}
+    {{ libraryList('Logo', '/brand/logo/', page.url) }}
+    {{ libraryList('Colors', '/brand/colors/', page.url) }}
+    {{ libraryList('Typography', '/brand/typography/', page.url) }}
+    {{ libraryList('Images', '/brand/images/', page.url) }}
   </ul>
-  <h3>Brand identity</h3>
+  {# <h3>Brand identity</h3>
   <ul>
     {{ libraryList('Our brand identity', '/brand/identity/', page.url) }}
     {{ libraryList('Brand strategy', '/brand/identity/strategy/', page.url) }}
-    {{ libraryList('Boilerplate', '/brand/identity/boilerplate/', page.url) }}
-    {{ libraryList('Legal information', '/brand/identity/legal-information/', page.url) }}
-  </ul>
+  </ul>  #}
 </div>
-
-<div class="u-flow">
-  <h3>Visual identity</h3>
-  <ul>
-    {{ libraryList('The logo', '/brand/visual/logo', page.url) }}
-    {{ libraryList('Brand colors', '/brand/visual/colors/', page.url) }}
-    {{ libraryList('Typography', '/brand/visual/typography/', page.url) }}
-    {{ libraryList('Images', '/brand/visual/images/', page.url) }}
     {# <li>
       <a>Typography</a>
       <ul>
@@ -56,8 +50,6 @@
     <li>
     <li><a>Sector messaging</a><li>
     <li><a>Brand identity overviews</a><li> #}
-  </ul>
-</div>
 
 {# <div class="u-flow">
   <h3><a href="/brand">Applications</a></h3>

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

@@ -14,7 +14,7 @@
 <div class="u-flow">
   <h3>Foundations</h3>
   <ul class="c-library-accordion">
-    {{ libraryList('Colour', '/components/colour/', page.url) }}
+    {{ libraryList('Color', '/components/colour/', page.url) }}
     {{ libraryList('Space', '/components/space/', page.url) }}
     <li>
       {{ libraryLink('Grid', '/components/grid/', page.url) }}

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

@@ -2,10 +2,11 @@
 {%- from "components/icon/macro.njk" import icon -%}
 
 <div class="u-flow">
-  <h3>Getting started</h3>
+  <h3>Tone of voice</h3>
   <ul>
     {{ libraryList('Our words matter', '/content/', page.url) }}
     {{ libraryList('Elevator pitch', '/content/elevator-pitch/', page.url) }}
+    {{ libraryList('Boilerplate', '/content/boilerplate/', page.url) }}
     {{ libraryList('Big ideas for a better world', '/content/big-ideas/', page.url) }}
   </ul>
 </div>

package/src/_redirects

@@ -0,0 +1,8 @@
+/brand/identity/ /brand 301
+/brand/identity/boilerplate /content/boilerplate 301
+/brand/identity/strategy /brand 301
+/brand/visual /brand 301
+/brand/visual/colors /brand/colors 301
+/brand/visual/images /brand/images 301
+/brand/visual/logo /brand/logo 301
+/brand/visual/typography /brand/typography 301

package/src/assets/js/app.js

@@ -1,3 +1,4 @@
+import Accordion from './imports/accordion';
 import Carousel from './imports/carousel';
 import ClearForm from './imports/clear-form';
 import Comparison from './imports/comparison';
@@ -17,6 +18,7 @@ import Tabs from './imports/tabs';
     HTMLCollection.prototype.forEach = Array.prototype.forEach;
   }
   
+  Accordion();
   Carousel();
   ClearForm();
   Comparison();

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/scss/components/index.scss

@@ -27,6 +27,7 @@
 @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';

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

@@ -58,5 +58,6 @@
 
   &__video {
     width: 100%;
+    max-height: 80vh;
   }
 }

package/src/assets/scss/library.scss

@@ -131,12 +131,12 @@
   &__logo {
     display: flex;
     align-items: center;
-    // margin-left: -110px;
+    justify-content: center;
     max-width: 15%;
     min-width: 100px;
 
-    @media only screen and (min-width:600px) {
-      // margin-left: 0;
+    @media only screen and (min-width:650px) {
+      justify-content: flex-start;
     }
     
     &-name {

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;
       }
 
       & > * + * {

package/src/assets/scss/utilities/index.scss

@@ -1,3 +1,7 @@
+html {
+  font-size:18px;
+}
+
 html body {
 
 @import './typography.scss';