mp-design-system 0.8.4 → 0.9.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mp-design-system",
-  "version": "0.8.4",
+  "version": "0.9.2",
   "description": "",
   "scripts": {
     "dev": "npm-run-all --parallel bundle:*",

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

@@ -37,6 +37,12 @@ module.exports = {
       context: {
         colour: 'outline-white'
       }
+    },
+    {
+      title: 'Small',
+      context: {
+        classes: 'c-button--small'
+      }
     }
   ],
   props: [

package/src/_includes/components/button/button.scss

@@ -11,8 +11,7 @@
   font-family: $font-stack;
 }
 
-.mp.c-button,
-.c-button {
+%c-button {
   // Reset
   border-radius: 0;
   background: transparent;
@@ -45,6 +44,11 @@
     text-decoration: none;
     color: color("white");
   }
+}
+
+.mp.c-button,
+.c-button {
+  @extend %c-button;
 
   &--wide {
     width: 100%;

package/src/_includes/components/campaign/campaign.scss

@@ -1,14 +1,19 @@
+$angle: 225deg;
+
 .c-campaign {
+  @include cutoff;
+  
   position: relative;
-  background: color('grey');
   max-width: calc(#{$wrapper}) !important;
   padding: 0 !important;
 
   &__link {
     @extend .u-fill, .u-fill--link;
   }
-
+  
   &__content {
+    background: color('grey');
+    background: linear-gradient($angle, color('grey', 'step--2'), color('grey'));
     color: color('white');
     width: 100%;
     @include padding('m-l');
@@ -33,9 +38,10 @@
   }
 
   &--petrol {
-    background: color('petrol', 'step-2');
-
+    
     .c-campaign__content {
+      background: color('petrol', 'step-2');
+      background: linear-gradient($angle, color('petrol', 'step-2'), color('petrol', 'step-3'));
       color: color('grey');
     }
 
@@ -45,9 +51,10 @@
   }
 
   &--blue {
-    background: color('blue', 'step-3');
-
+    
     .c-campaign__content {
+      background: color('blue', 'step-3');
+      background: linear-gradient($angle, color('blue', 'step-2'), color('blue', 'step-3'));
       color: color('grey');
     }
 
@@ -57,9 +64,10 @@
   }
 
   &--orange {
-    background: color('utility-orange', 'step-2');
-
+    
     .c-campaign__content {
+      background: color('utility-orange', 'step-2');
+      background: linear-gradient($angle, color('utility-orange', 'step-2'), color('utility-orange', 'step-3'));
       color: color('grey', 'step--1');
     }
 

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

@@ -96,30 +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'
-    //   },
-    // }
+    {
+      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

@@ -75,6 +75,7 @@
   {% endif %}
 </figure>
 
+{% if params.longvideo %}
 <div id="lightboxVideo" class="c-lightbox u-hidden">
   <div class="c-lightbox__close">
     {{ icon({ id: 'cross' }) }}
@@ -84,4 +85,5 @@
       <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>
+</div>
+{% endif %}

package/src/_includes/components/hero/hero.scss

@@ -106,10 +106,10 @@
     .u-wrap {
       @include padding-bottom('l-3xl');
   
-      &:before,
-      &:after {
-        display: none;
-      }
+      // &:before,
+      // &:after {
+      //   display: none;
+      // }
     }
 
     .c-hero {

package/src/_includes/components/input/input.njk

@@ -1,9 +1,9 @@
 {% inputWrapper params.error %}
-  <label class="{{ 'u-hidden' if params.hideLabel else 'c-label' }}{{ params.classes }}" for="{{ params.id }}">{{ params.label }}</label>
+  <label class="{{ 'u-hidden' if params.hideLabel else 'c-label' }}" for="{{ params.id }}">{{ params.label }}</label>
   {% if params.button %}
   <div class="u-flex u-border">
   {% endif %}
-  <input type="{{ params.type or 'text' }}" class="c-input {{ 'c-input--with-button' if params.button }}" name="{{ params.name or params.id }}" placeholder="{{ params.placeholder }}" id="{{ params.id }}" {{ 'required' if params.required }} />
+  <input type="{{ params.type or 'text' }}" class="c-input {{ 'c-input--with-button' if params.button }}{{ params.classes }}" name="{{ params.name or params.id }}" placeholder="{{ params.placeholder }}" id="{{ params.id }}" {{ 'required' if params.required }} />
   {% if params.button %}
   <button type="button" class="mp c-button--white">Search</button>
   {% endif %}

package/src/_includes/components/input/input.scss

@@ -41,6 +41,19 @@
     min-height: 10rem;;
   }
 
+  &--file {
+    border: 0;
+    padding: 0;
+    cursor: pointer;
+
+    @at-root ::-webkit-file-upload-button {
+      @extend %c-button;
+      @extend .c-button--blue;
+      display: inline-flex;
+      @include margin-right('xs');
+    }
+  }
+
   &-error {
     --error-state: #{color('red')};
     position: relative;

package/src/_includes/components/quote/quote.scss

@@ -1,21 +1,23 @@
 .c-quote {
     color: color('petrol', 'step-1');
     padding-top: 74px;
-    @include padding-top('2xl');
+    @include padding('2xl', 0, 'l', 'xl');
     position: relative;
 
     &:before {
       content: '“';
-      // color: color('petrol', 'step-2');
+      color: color('petrol', 'step-3');
       position: absolute;
       height: 57px;
       width: 45px;
       left: 0;
-      top: 0;
+      top: 0.1em;
+      font-family: "Arial", sans-serif;
       font-size: 10em;
       font-weight: 900;
       line-height: 0.9;
-      margin-left: -0.05em;
+      margin-left: -0.025em;
+      z-index: -1;
     }
 
     p {

package/src/_includes/components/tabs/tabs.scss

@@ -37,7 +37,7 @@
     overflow-x: auto;
     
     &-list {
-      border-bottom: 4px solid color('petrol', 'step-2');
+      border-bottom: 4px solid color('utility-blue', 'step-3');
       display: flex;
       width: 100%;
       min-width: min-content;
@@ -58,7 +58,7 @@
     @include padding(0, 0 , 's-m');
     @include margin-right('m');
     display: block;
-    border-bottom: 4px solid color('petrol', 'step-2');
+    border-bottom: 4px solid color('utility-blue', 'step-3');
     margin-bottom: -4px;
     position: relative;
     z-index: 1;

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

@@ -13,7 +13,7 @@
     <ul class="u-row">
       <li><a href="/brand" class="{% if '/brand' in page.url %}c-library-page-active{% endif %}">Brand & visual identity</a></li>
       <li><a href="/content" class="{% if '/content' in page.url %}c-library-page-active{% endif %}">Tone of voice</a></li>
-      <li><a href="/components" class="{% if '/components' in page.url or '/patterns' in page.url %}c-library-page-active{% endif %}">Web components</a></li>
+      <li><a href="/components" class="{% if '/components' in page.url or '/patterns' in page.url %}c-library-page-active{% endif %}">Component library</a></li>
       <li class="u-petrol-step-2">V.{{ config.dsVersion }}</li>
     </ul>
   </nav>

package/src/_includes/layout.njk

@@ -39,7 +39,7 @@
         document.documentElement.style.setProperty('--headerHeight', headerHeight)
       }, 250); 
     </script>
-    <link rel="icon" type="image/png" sizes="32x32" href="/static/img/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/static/img/favicon.svg">
     <link rel="stylesheet" href="/build/scss/main.css" />
     <script>window.MSInputMethodContext && document.documentMode && document.write('<script src="https://cdn.jsdelivr.net/gh/nuxodin/ie11CustomProperties@4.1.0/ie11CustomProperties.min.js"><\/script>');</script>
     <script src="https://polyfill.io/v3/polyfill.min.js?features=Array.prototype.forEach%2CDOMTokenList.prototype.forEach%2CNodeList.prototype.forEach%2CArray.from"></script>

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

@@ -5,6 +5,7 @@
   <h3>Brand & visual identity</h3>
   <ul>
     {{ libraryList('Overview', '/brand/', page.url) }}
+    {{ libraryList('The basics', '/brand/basics/', page.url) }}
     {{ libraryList('Downloads', '/brand/downloads/', page.url) }}
     {{ libraryList('Logo', '/brand/logo/', page.url) }}
     {{ libraryList('Colors', '/brand/colors/', page.url) }}

package/src/_includes/system-home-page.njk

@@ -14,7 +14,8 @@ sidebar: false
       cover: true,
       gradient: true,
       pattern: 'dots',
-      inverse: true
+      inverse: true,
+      classes: 'c-library__hero'
     }) }}
 
     <div class="u-wrap u-flow--l">

package/src/assets/js/imports/hero-video.js

@@ -8,25 +8,44 @@ function HeroVideo() {
       }
       
       const lightboxTrigger = document.getElementById('playVideo');
-      const lightboxVideo = document.getElementById('lightboxVideo');
+      const lightboxContainer = document.getElementById('lightboxVideo');
+      const lightboxVideo = lightboxContainer.querySelector('.c-lightbox__video');
 
       lightboxTrigger.addEventListener('click', e => {
-        videoBackground.removeAttribute('autoplay');
-        lightboxVideo.classList.remove('u-hidden');
+        videoBackground.pause();
+        lightboxContainer.classList.remove('u-hidden');
+        checkVideos();
       });
   
-      lightboxVideo.addEventListener('click', (e) => {
+      lightboxContainer.addEventListener('click', (e) => {
         if (!e.target.classList.contains('c-lightbox__video')) {
           videoBackground.setAttribute('autoplay','');
-          lightboxVideo.classList.add('u-hidden');
+          lightboxContainer.classList.add('u-hidden');
+          checkVideos();
         }
       });
       window.addEventListener('keydown', function(e) {
         if (e.key == "Escape") {
           videoBackground.setAttribute('autoplay','');
-          lightboxVideo.classList.add('u-hidden');
+          lightboxContainer.classList.add('u-hidden');
+          checkVideos();
         }
       });
+
+      function checkVideos() {
+        if(lightboxContainer.classList.contains('u-hidden')) {
+          if (videoBackground.paused) {
+            videoBackground.play();
+          }
+          if (!lightboxVideo.paused) {
+            lightboxVideo.pause();
+          }
+        } else {
+          if (!videoBackground.paused) {
+            videoBackground.pause();
+          }
+        }
+      }
     }
   });
 }

package/src/assets/scss/foundations/colour.scss

@@ -71,10 +71,10 @@ $colours: (
 
   'grey': (
     -50: mix(black, #CCC, 50%),
-    'step--2': mp-mix($f-mp-grey, black, 76%),
-    'step--1': mp-mix($f-mp-grey, black, 28%),
+    'step--2': mp-mix($f-mp-grey, black, 80%),
+    'step--1': mp-mix($f-mp-grey, black, 45%),
     'step-0': $f-mp-grey,
-    'step-1': mp-mix($f-mp-grey, white, 28%),
+    'step-1': mp-mix($f-mp-grey, white, 48%),
     'step-2': mp-mix($f-mp-grey, white, 76%),
     'step-3': mp-mix($f-mp-grey, white, 92%)
   ),

package/src/assets/scss/library.scss

@@ -55,6 +55,11 @@
     }
   }
 
+  &__hero {
+    color: white;
+    background: linear-gradient(color('petrol'), transparent), linear-gradient(45deg, color('blue'), color('petrol'));
+  }
+
   &__body {
     display: grid;
     grid-template-rows: auto auto;
@@ -244,12 +249,15 @@
     }
 
     iframe {
-      position: absolute;
       height: 100%;
       width: 100%;
       left: 0;
       top: 0;
       transition: all .3s cubic-bezier(0.22, 0.61, 0.36, 1);
+
+      @media only screen and (min-width: 600px) {
+        position: absolute;
+      }
     }
   }
 

package/src/assets/scss/objects/prose.scss

@@ -91,7 +91,8 @@
     }
 
     li + li,
-    li + li {
+    li > ul,
+    li > ol {
       @include margin-top('2xs');
     }
   }
@@ -130,15 +131,15 @@
 
   @media (min-width: 35em) {
     &:not(.o-prose--left-blockquote) blockquote {
-      padding-left: 107px;
+      @include padding-left('3xl');
 
       &:before {
-        left: 107px;
+        left: var(--space-xl);
       }
     }
 
     &.o-prose--left-blockquote blockquote {
-      padding-right: 107px;
+      @include padding-right('3xl');
     }
   }
 

package/src/assets/scss/tools/cutoff.scss

@@ -0,0 +1,56 @@
+// Cutoff corner effect
+
+$g : var(--gutter);
+$og : calc(100% - var(--gutter));
+
+@mixin cutoff($corner:"bottom-right") {
+    @if $corner == "top-left" {
+        clip-path: polygon( 
+            $g 0,
+            100% 0,
+            100% 100%,
+            0 100%,
+            0 $g 
+        );
+    } @else if $corner == "top-right" {
+        clip-path: polygon( 
+            0 0,
+            $og 0,
+            100% $g,
+            100% 100%,
+            0 100% 
+        );
+    } @else if $corner == "bottom-left" {
+        clip-path: polygon( 
+            0 0,
+            100% 0,
+            100% 100%,
+            $g 100%,
+            0 $og 
+        );
+    } @else {
+        clip-path: polygon( 
+            0 0,
+            100% 0,
+            100% $og,
+            $og 100%,
+            0 100% 
+        );
+    }
+}
+
+.u-cutoff {
+    @include cutoff
+}
+
+.u-cutoff--top-right {
+    @include cutoff("top-right")
+}
+
+.u-cutoff--top-left {
+    @include cutoff("top-left")
+}
+
+.u-cutoff--bottom-left {
+    @include cutoff("bottom-left")
+}

package/src/assets/scss/tools/index.scss

@@ -1,4 +1,5 @@
 @import './breakout.scss';
+@import './cutoff.scss';
 
 @function color($palette, $tone: 'step-0') {
   @return map-get(map-get($colours, $palette), $tone);

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

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

package/src/brand/basics.md

@@ -0,0 +1,35 @@
+---
+title: The basics of our digital brand
+layout: content-page
+sidebar: brand
+tags: brand
+version: 0.0.0
+status: 'Development'
+---
+
+## Text
+- Our font is [Inter](/brand/typography).
+- Text is colored MP Charcoal (#333333).
+- 18px font size.
+- We write in American English using [sentence case](https://en.wikipedia.org/wiki/Letter_case#Stylistic_or_specialised_usage).
+
+## Buttons
+{% button 'Primary button' %}
+{% button 'Secondary button' '' 'c-button--blue' %}
+{% button 'Tertiary button' '' 'c-button--outline-green' %}
+- Primary buttons are always colored MP Green (#13AA13). Please use this color sparingly, for the most important elements on the page. 
+- Secondary buttons may be colored MP Blue (#00A2C2), or outlined. 
+- The font is Inter Bold, 18px.
+- 6px border-radius.
+- Padding is 0.777em (horizontal) and 1.5em (vertical).
+
+## Layout
+- Use a plain white background, with a splash of color to emphasise important elements.
+- Reduce visual clutter by using space to separate items, rather than lines or boxes. Don't be afraid of white space!
+- Text is most comfortable to read when it's between 50-75 characters wide. This translates to 30-50 em.
+
+## More details
+- [Fonts and typography](../typography)
+- [Colors](../colors)
+- [Buttons](/components/button)
+- [Tone of voice](/content)

package/src/brand/colors.njk

@@ -21,7 +21,7 @@ Step 0 is the 'default' shade for each color."
 <div class="u-wrap--content">
 
 {{ alert({
-    content: "<p>This page applies to printed materials and Office files such as Powerpoint etc. If you're building a website see the <a href='/components/colour'>Components -> colors</a> page instead.</p>",
+    content: "<p>If you're building a website which consumes the Franklin CSS via CDN, see the <a href='/components/colour'>Components ➝ colors</a> page instead.</p>",
     type: "info"
 })}}
 
@@ -139,7 +139,7 @@ Step 0 is the 'default' shade for each color."
             
             {
                 name: "-1",
-                hex: '252525',
+                hex: '1c1c1c',
                 cmyk: '00.00.00.95'
             },
             {
@@ -149,7 +149,7 @@ Step 0 is the 'default' shade for each color."
             },
             {
                 name: 1,
-                hex: '6c6c6c',
+                hex: '959595',
                 cmyk: '00.00.00.70'
             },                
             {