mp-design-system 0.6.4 → 0.8.0

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

@@ -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,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 {

package/src/assets/scss/tools/breakout.scss

@@ -3,9 +3,11 @@
 
 @mixin breakout($pad: 0) {
     left: 50%;
+    left: calc( 50% + var(--scrollbarWidth)/2.0001 );
     position: relative;
     transform: translateX(-50vw);
     width: 100vw;
+    width: calc( 100vw - var(--scrollbarWidth) );
     padding-left: safe-space($pad);
     padding-right: safe-space($pad);
 }

package/src/assets/scss/utilities/display.scss

@@ -109,10 +109,12 @@
   @include gap("s-l");
 }
 
-.u-16\/9 {
-  height: 0;
-  padding-bottom: 56.25%;
-  position: relative;
+@supports (object-fit: cover) {
+  .u-2\/1 {
+    aspect-ratio: 2 / 1;
+    object-fit: cover;
+    object-position: 75% 50%;
+  }
 }
 
 @media (min-width: 640px) {

package/src/assets/scss/utilities/hr.scss

@@ -12,4 +12,8 @@
 
 .u-border {
   border: 1px solid color('petrol', 'step-2');
+}
+
+.o-prose hr {
+  @extend .u-hr
 }

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

@@ -1,3 +1,5 @@
+html body {
+
 @import './typography.scss';
 @import './link.scss';
 @import './colour.scss';
@@ -9,3 +11,5 @@
 @import './hr.scss';
 @import './ellipsis.scss';
 @import './scroll-shadows.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/components/utilities.md

@@ -63,17 +63,60 @@ More typography utility classes are documented on the [typography page](/compone
 ```
 
 ```html
-<div class="u-sticky">Sticky positioning at the top of the viewport</div>
+<p class="u-sticky">This will "stick" to the top of the screen while scrolling</p>
 ```
 
 ```html
-<div class="u-sticky--gutter">Sticky positioning with gutter spacing</div>
+<div class="u-sticky--gutter">Sticky positioning, with a gap above</div>
 ```
 
 ```html
 <div class="u-split">
-    <h2>Webinars and events</h2>
-    <a href>View all</a>
+    <p>Split: aligned left</p>
+    <a class="u-link">Aligned right</a>
 </div>
 The two child items will be aligned in a horizontal row
+```
+<div class="u-split u-pad-s u-border">
+    <p>Split: aligned left</p>
+    <a class="u-link">Aligned right</a>
+</div>
+
+## Padding and margins
+
+More padding and margin utility classes are documented on the [space page](/components/space).
+
+#### Syntax: 
+`u`-`(pad or margin)`-`(optional direction)`-`(size)`-`(optional flex size)`
+
+Sizes | Directions
+------|-----------
+3xs | top
+2xs | bottom
+xs | left
+s | right
+m | y
+l | x
+xl | 
+2xl | 
+3xl | 
+4xl | 
+
+N.B. Not all permutations are available in the existing CSS, as that would amount to over 4800 extra lines of code. Currently we've only implemented a handful - but we can add more as needed.
+
+```html
+<div class="u-pad-s">Small padding on all sides</div>
+```
+
+```html
+<div class="u-margin-y-xl">Extra large margin on top and bottom</div>
+```
+
+```html
+<div class="u-margin-left-m">Medium margin on left side only</div>
+```
+
+```html
+<div class="u-pad-x-s-xl">Flexible (small to XL) padding on left and right</div>
+Grows from small padding on small screens, to xl padding on large screens
 ```

package/src/prototype/index.njk

@@ -445,7 +445,7 @@ tags: prototype
           </div>
 
           <div id="tab-events" class="c-tab">
-            <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/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'
   }