mp-design-system 0.7.5 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mp-design-system",
-  "version": "0.7.5",
+  "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/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/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/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/brand/downloads.njk

@@ -13,7 +13,7 @@ tags: brand
 <div class="u-flow--l">
 
 {{ twi({
-    link: "/static/pdf/FINAL Tone of voice guidelines April 2021.pdf",
+    link: "https://malvern.sharepoint.com/:b:/r/sites/Intranet/Shared%20Documents/FINAL%20Tone%20of%20voice%20guidelines%20April%202021.pdf?csf=1&web=1&e=vW1Qzs",
     label: "Tone of voice guidelines",
     classes: "u-link",
     icon: "file"
@@ -29,7 +29,7 @@ icon: 'file'
 <br>
 
 {{ twi({
-    link: "/static/ppt/MP Elevator pitch.pptx",
+    link: "https://malvern.sharepoint.com/:p:/r/sites/SVP/Shared%20Documents/Elevator%20Pitch%20(different%20languages)/Elevator%20pitch%20PPT%20(internal-external).pptx?d=w5ae5e5afa8c042f9968f95878a910471&csf=1&web=1&e=ui0qAk",
     label: "Elevator pitch - Powerpoint presentation",
     classes: "u-link",
     icon: "file"

package/src/brand/visual/images.md

@@ -42,39 +42,39 @@ The images we use can have a great effect on how people perceive our company. Ju
 <div class="c-library__photo-grid grid-1">
 <div class="u-bg-petrol u-white"><h2>Captivate</h2></div>
 <img src="/static/img/grid-captivate-1.jpg" alt="A silhouette of a woman's face, overlaid with plotted lines and charts of data" loading="lazy">
-<img src="/static/img/grid-captivate-3.jpg" alt="Looking up through tree branches at the Milky Way, filling the night sky" loading="lazy">
-<img src="/static/img/grid-captivate-4.jpg" alt="A glowing Malvern Panalytical logo floats amongst trees in a misty forest " loading="lazy">
-<img src="/static/img/grid-captivate-2.jpg" alt="A network of brass pins embedded in a wooden surface, connected with fine wire" loading="lazy">
+<img src="https://p3.aprimocdn.net/malvernpanalytical/f4c97a0a-bb44-417d-a935-adea010bdf70/shutterstock_600381020_Low-res.JPG" alt="Looking up through tree branches at the Milky Way, filling the night sky" loading="lazy">
+<img src="https://p3.aprimocdn.net/malvernpanalytical/519c5d77-203b-433f-a8d6-adf600fd4f42/shutterstock_1729372963_Low-res.JPG" alt="A glowing Malvern Panalytical logo floats amongst trees in a misty forest " loading="lazy">
+<img src="https://p3.aprimocdn.net/malvernpanalytical/d3e8fca9-b331-4798-ac4e-adea010d1c42/shutterstock_455077471_Low-res.JPG" alt="A network of brass pins embedded in a wooden surface, connected with fine wire" loading="lazy">
 </div>
 
 <div class="c-library__photo-grid grid-1">
 <div class="u-bg-red u-white"><h2>Inspire</h2></div>
-<img src="/static/img/grid-inspire-1.jpg" alt="A scientist wearing protective gear leans in, using a pipette to fill a cuvette" loading="lazy">
-<img src="/static/img/grid-inspire-2.jpg" alt="An extreme close-up of tiny underwater plants, glowing in sunlight" loading="lazy">
-<img src="/static/img/grid-inspire-4.jpg" alt="An industrial pipeline silhouetted against the dawn sky" loading="lazy">
-<img src="/static/img/grid-inspire-3.jpg" alt="A CNC machine cuts into a piece of metal, sending sparks flying" loading="lazy">
+<img src="https://p3.aprimocdn.net/malvernpanalytical/981276ff-0ab9-4be9-aedd-adea010bf005/shutterstock_145005193_Low-res.JPG" alt="A scientist wearing protective gear leans in, using a pipette to fill a cuvette" loading="lazy">
+<img src="https://p3.aprimocdn.net/malvernpanalytical/372bcddb-261b-4272-a3fd-adea010c01ad/shutterstock_1408636658_Low-res.JPG" alt="An extreme close-up of tiny underwater plants, glowing in sunlight" loading="lazy">
+<img src="https://p3.aprimocdn.net/malvernpanalytical/d80bfeb7-1b0c-40cf-97e8-adea010bea98/shutterstock_174607778_Low-res.JPG" alt="An industrial pipeline silhouetted against the dawn sky" loading="lazy">
+<img src="https://p3.aprimocdn.net/malvernpanalytical/7f424ea8-8443-444a-8c91-adea010bee72/shutterstock_712297567_Low-res.JPG" alt="A CNC machine cuts into a piece of metal, sending sparks flying" loading="lazy">
 </div>
 
 <div class="c-library__photo-grid grid-2">
 <div class="u-bg-blue u-white"><h2>Inform - Applications</h2></div>
-<img src="/static/img/grid-inform-applications-1.jpg" alt="An engineer in a hard hat crouches down to install solar panels on a roof" loading="lazy">
-<img src="/static/img/grid-inform-applications-2.jpg" alt="A deep sea oil rig lit up against the evening sky" loading="lazy">
-<img src="/static/img/grid-inform-applications-3.jpg" alt="A scientist collects a water sample from a stream and checks it against a touchscreen device" loading="lazy">
+<img src="https://p3.aprimocdn.net/malvernpanalytical/971f54df-cdb3-43d8-ac63-adea010af455/shutterstock_1515878372_Low-res.JPG" alt="Three engineers in a workshop building a robotic device" loading="lazy">
+<img src="https://p3.aprimocdn.net/malvernpanalytical/1f20be8d-61fc-465b-b67d-adea010a3cad/shutterstock_717797560_Low-res.JPG" alt="A deep sea oil rig lit up against the evening sky" loading="lazy">
+<img src="https://p3.aprimocdn.net/malvernpanalytical/86aad13f-9f20-4a18-8a2e-adea010ae3d9/shutterstock_111870260_Low-res.JPG" alt="An aerial view of a water treatment plant in the sunshine" loading="lazy">
 </div>
 
 <div class="c-library__photo-grid grid-2">
 <div class="u-bg-blue u-white"><h2>Inform - Technology</h2></div>
-<img src="/static/img/grid-inform-tech-2.jpg" alt="An engineer types on a laptop, surrounded by server racks, with cable bundles covering the walls and ceiling" loading="lazy">
-<img src="/static/img/grid-inform-tech-1.jpg" alt="A scientist wearing protective gear looks into a microscope" loading="lazy">
-<img src="/static/img/grid-inform-tech-4.jpg" alt="A network of glass spheres, some lit from within, connected by metal rods, suspended in darkness" loading="lazy">
+<img src="https://p3.aprimocdn.net/malvernpanalytical/b7f2beab-a7e1-48f7-83e1-adea010ca426/shutterstock_1921649444_Low-res.JPG" alt="An engineer in a data center typing on a laptop, surrounded by server racks" loading="lazy">
+<img src="https://p3.aprimocdn.net/malvernpanalytical/523373f2-3a26-45b4-9b1b-adea010caab1/shutterstock_1073659409_Low-res.JPG" alt="A scientist wearing protective gear looks into a microscope" loading="lazy">
+<img src="https://p3.aprimocdn.net/malvernpanalytical/5b80c088-2b69-4bb9-a705-adea010d0fb1/shutterstock_1770220811_Low-res.JPG" alt="A network of glass spheres, some lit from within, connected by metal rods, suspended in darkness" loading="lazy">
 </div>
 
 <div class="c-library__photo-grid grid-1">
 <div class="u-bg-green u-white"><h2>Convince</h2></div>
-<img src="/static/img/grid-convince-1.jpg" alt="A woman holds a mobile phone to her ear, and smiles at the camera" loading="lazy">
-<img src="/static/img/grid-convince-2.jpg" alt="Liquid is mixed inside a scientific machine, lit from within" loading="lazy">
-<img src="/static/img/grid-convince-3.jpg" alt="Plants with green leaves growing out of glass containers in a laboratory" loading="lazy">
-<img src="/static/img/grid-convince-4.jpg" alt="An aerial view of farmland, with buildings connected by CGI arcs of light in the air" loading="lazy">
+<img src="https://p3.aprimocdn.net/malvernpanalytical/fb25d412-a13c-47fa-8740-adea010b4722/shutterstock_1522368992_Low-res.JPG" alt="A birds-eye view of people raising their glasses around a dinner table" loading="lazy">
+<img src="https://p3.aprimocdn.net/malvernpanalytical/87714d0a-16c8-43f5-a7e0-adea01143f6a/shutterstock_326505566_Low-res.JPG" alt="A barista pours steamed milk into a latte, creating a heart pattern" loading="lazy">
+<img src="https://p3.aprimocdn.net/malvernpanalytical/2d6b4793-692f-4ff8-ab51-adea010c6f71/shutterstock_128581706_Low-res.JPG" alt="Plants with green leaves growing out of glass containers in a laboratory" loading="lazy">
+<img src="https://p3.aprimocdn.net/malvernpanalytical/fe398dc5-a0db-4801-a680-adea010c65e1/shutterstock_1898110876_Low-res.JPG" alt="An aerial view of farmland, with buildings connected by CGI arcs of light in the air" loading="lazy">
 </div>
 
 <div class="u-wrap--content u-margin-top-xl">

package/src/prototype/product.njk

@@ -31,7 +31,7 @@ tagTitle: Product
         <h2 class="c-h c-h--page-subtitle u-margin-top-s-m">Delivering the data you need for outcomes you can trust</h2>
         <div class="mp o-prose u-margin-top-s-m u-flow--m">
           <p>From pharma to food, manufacturing to environmental monitoring, organisations the world over trust the Mastersizer 3000 laser diffraction particle size analyser for fast, accurate and reliable analysis. The instrument’s ease of use and versatility means it’s valued for both scientific research and manufacturing quality control.</p>
-          {{ twi({ classes: 'u-link', label: 'Download brochure', link: '/static/pdf/Mastersizer 3000.pdf', attrs: 'download', icon: 'file', inline: true, colour: 'white' }) }}
+          {{ twi({ classes: 'u-link', label: 'Download brochure', link: 'https://www.malvernpanalytical.com/en/assets/Mastersizer%203000%20Brochure%20%28EN%29_tcm50-58994.pdf', attrs: 'download', icon: 'file', inline: true, colour: 'white' }) }}
         </div>
         <div class="u-margin-top-s-m">
           {{ button({ link: '/prototype/request-a-quote', label: 'Request a quote', inline: true }) }}
@@ -84,6 +84,7 @@ tagTitle: Product
         links: [
           { link: '#features-and-benefits', label: 'Features and benefits' },
           { link: '#key-components', label: 'Key components' },
+          { link: '#faqs', label: 'FAQs' },
           { link: '#use-cases', label: 'Use cases' },
           { link: '#specifications', label: 'Specifications' },
           { link: '#accessories', label: 'Accessories' },
@@ -150,6 +151,28 @@ tagTitle: Product
         </ul>
       </div>
 
+      <div class="mp o-prose u-flow--prose" id="faqs">
+        <h2>Frequently asked questions</h2>
+        <dl class="c-accordion">
+          <div class="c-accordion__item ">
+            <dt class="c-accordion__title">Do I need to prepare the workspace prior to installation?</dt>
+            <dd class="c-accordion__content o-prose u-flow--prose">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.</dd>
+          </div>
+          <div class="c-accordion__item ">
+            <dt class="c-accordion__title">What specialist skills or knowledge are required?</dt>
+            <dd class="c-accordion__content o-prose u-flow--prose">You don't need any specialist skills or knowledge to perform a Smart Install. Simply follow the instructions provided.</dd>
+          </div>
+          <div class="c-accordion__item ">
+            <dt class="c-accordion__title">Do I need specialist tools or equipment to Smart Install a new instrument?</dt>
+            <dd class="c-accordion__content o-prose u-flow--prose"><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></dd>
+          </div>
+          <div class="c-accordion__item ">
+            <dt class="c-accordion__title">What languages are available for the Smart Install guides?</dt>
+            <dd class="c-accordion__content o-prose u-flow--prose"><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></dd>
+          </div>
+        </dl>
+      </div>
+
       <div class="mp o-prose u-flow--prose" id="use-cases">
         <h2>What customers use the Mastersizer 3000 for</h2>
         <p>The Mastersizer 3000 lets users find the particle size ‘sweet spot’ for a vast array of processes – helping them create substances that behave more <strong>predictably</strong>, more <strong>safely</strong> and to a higher <strong>quality</strong>. Mastersizers are frequently used for:</p>

package/src/prototype/range.njk

@@ -31,7 +31,7 @@ tagTitle: Range
   },
   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'
   }