mp-design-system 0.8.6 → 0.9.2

package/package.json

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

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/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;

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

@@ -91,7 +91,8 @@
     }
 
     li + li,
-    li + li {
+    li > ul,
+    li > ol {
       @include margin-top('2xs');
     }
   }

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/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'
             },                
             {

package/src/brand/index.njk

@@ -29,19 +29,19 @@ To strengthen Malvern Panalytical’s market position, we must ensure consistent
         border: true
       },
       header: {
-        title: 'Visual identity'
+        title: 'Quick start'
       },
       body: {
-        content: '<p>The visual marks and styles that encapsulate our brand such as logo, colour and typography.</p>'
+        content: '<p>The basics of our brand.</p>'
       },
       footer: {
         cta: {
-          link: '/brand/logo',
+          link: '/brand/basics',
           label: 'Read more'
         }
       }
     }) }}
-
+    
     {{ card({
       theme: {
         layout: 'single',
@@ -65,13 +65,80 @@ To strengthen Malvern Panalytical’s market position, we must ensure consistent
     {{ card({
       theme: {
         layout: 'single',
-        size: 'medium'
+        size: 'medium',
+        border: true
       },
       header: {
-        title: 'Applications'
+        title: 'Logo'
       },
       body: {
-        content: '<p>Browse our different types of assets, such as business cards, brochures or white papers.</p><p>Coming soon.</p>'
+        content: '<p>How to make sure our logo looks its best in your designs.</p>'
+      },
+      footer: {
+        cta: {
+          link: '/brand/logo',
+          label: 'Read more'
+        }
+      }
+    }) }}
+
+    {{ card({
+      theme: {
+        layout: 'single',
+        size: 'medium',
+        border: true
+      },
+      header: {
+        title: 'Colors'
+      },
+      body: {
+        content: '<p>Our complete color palette for digital and physical media.</p>'
+      },
+      footer: {
+        cta: {
+          link: '/brand/colors',
+          label: 'Read more'
+        }
+      }
+    }) }}
+
+    {{ card({
+      theme: {
+        layout: 'single',
+        size: 'medium',
+        border: true
+      },
+      header: {
+        title: 'Typography'
+      },
+      body: {
+        content: '<p>Information on font sizes, spacing, and colors.</p>'
+      },
+      footer: {
+        cta: {
+          link: '/brand/typography',
+          label: 'Read more'
+        }
+      }
+    }) }}
+
+    {{ card({
+      theme: {
+        layout: 'single',
+        size: 'medium',
+        border: true
+      },
+      header: {
+        title: 'Images'
+      },
+      body: {
+        content: '<p>Guidelines on choosing images that represent our brand.</p>'
+      },
+      footer: {
+        cta: {
+          link: '/brand/images',
+          label: 'Read more'
+        }
       }
     }) }}
   </div>

package/src/brand/logo.md

@@ -7,7 +7,7 @@ version: 1.0.0
 status: 'Ready'
 ---
 
-<a href="/static/zip/MP_logo.zip" class="mp c-twi u-link c-twi--left"><span>Download: Malvern Panalytical logo</span><svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--file"><use xlink:href="/static/svg/sprite.svg#file"></use></svg></a>
+{% button 'Download the logo' '/static/zip/MP_logo.zip' %}
 
 The Malvern Panalytical logo is available in three formats: 
 

package/src/brand/typography.md

@@ -17,7 +17,7 @@ Our brand font is [Inter](https://rsms.me/inter). This typeface has been selecte
 
 Find more information about Inter at [https://rsms.me/inter](https://rsms.me/inter)
 
-<a class="mp c-button c-button--inline" href="https://github.com/rsms/inter/releases/download/v3.19/Inter-3.19.zip" download>Download Inter font</a>
+{% button 'Download Inter font' 'https://github.com/rsms/inter/releases/download/v3.19/Inter-3.19.zip' %}
 
 <br>
 
@@ -31,16 +31,13 @@ Find more information about Inter at [https://rsms.me/inter](https://rsms.me/int
 ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789  
 abcdefghijklmnopqrstuvwxyz @ $ € £ ¥ & © ® ™ μ ± °
 
-<ul>
-  <li>Inter Light for printed materials, Inter Regular for digital (e.g. Powerpoint)</li>
-  <li>Color: 100% black for printed materials, <a href="/brand/visual/colors">MP21Charcoal</a> for digital</li>
-  <li><span class="c-library__semi">Inter Semi Bold</span> for emphasis</li>
-  <li>Recommended font sizes for body text:
-    <li>Minimum: 7pt with 9.5pt leading</li>
-    <li>Standard: 8pt with 11pt leading</li>
-    <li>Maximum: 9pt with 12pt leading</li>
-  </li>
-</ul>
+- Inter Light for printed materials, Inter Regular for digital (e.g. Powerpoint)
+- Color: 100% black for printed materials, [MP21Charcoal](/brand/visual/colors) for digital
+- <span class="c-library__semi">Inter Semi Bold</span> for emphasis
+- Recommended font sizes for body text:
+  - Minimum: 7pt with 9.5pt leading
+  - Standard: 8pt with 11pt leading
+  - Maximum: 9pt with 12pt leading
 
 <div class="u-bg-petrol u-white u-pad-m">
     Inter Regular<br>
@@ -74,7 +71,7 @@ abcdefghijklmnopqrstuvwxyz @ $ € £ ¥ & © ® ™ μ ± °
 - H4 will be approximately the same size as bodytext, but in bold weight.
 - The size of the Headings define the space around them: If the cap height is x, then the space underneath should be x as well. The height over the heading is 2x.
 
-![alt text](/static/svg/typography-spacing.svg)
+![A diagram showing the spacing between headings and paragraph text, as explained above.](/static/svg/typography-spacing.svg)
 
 ---
 

package/src/checklist.md

@@ -4,9 +4,9 @@ layout: content-page
 sidebar: components
 ---
 
-We use a variety of digital marketing platforms, each with different styling abilities. We created this design system to bring these platforms together under a single look and feel, but unfortunately not all of them are able to follow the guidelines to the letter.
+We use a variety of digital marketing platforms, each with different styling capabilities. We created this design system to bring these platforms together under a single look and feel, but unfortunately not all of them are able to follow the guidelines to the letter.
 
-When evaluating a new platform, we should aim to ensure they are capable of following the Franklin styles as closely as possible.
+When evaluating a new platform, we should aim to ensure they are capable of following the Franklin style as closely as possible.
 
 Platforms can be categorized into three groups:
 
@@ -56,11 +56,12 @@ Full:
 -	Careers website
 
 Medium: 
--	Bizzabo events pages
+-	Bizzabo event pages
 -	OneWelcome login screen
 
 Basic:
 -	Salesforce customer portal
+-   Bizzabo agenda pages
 
 ### Notes
 More detailed instructions on consuming Franklin’s CSS and JS can be found at <https://brand.malvernpanalytical.com/components/installation>. 

package/src/components/colour.njk

@@ -15,7 +15,7 @@ A limited set of color tints and shades are available for element backgrounds, b
 
 <div class="u-flow--l">
   {{ alert({
-    content: "<p>This page explains how to use color on the web. For print or other uses, see the <a href='/brand/visual/colors'>Brand -> colors</a> page.</p>",
+    content: "<p>This page explains how to use color on the web. For print or other uses, see the <a href='/brand/visual/colors'>Brand ➝ colors</a> page.</p>",
     type: "info"
   })}}
 

package/src/components/flow.njk

@@ -9,6 +9,15 @@ sidebar: components
 
 <div class="u-flow--m">
   {% set content %}
+  Add the class `u-flow` to any container, to space its contents.
+  ```
+  <div class="u-flow">
+    <h1>Flow</h1>
+    <img />
+    <div></div>
+    <a class="c-button"></a>
+  </div>
+  ```
   Spacing content effectively is imperative to good component composition. Taking learnings from broader CSS spacing paradigms, rather than dictate spacing at a child-level, we set the rules at a parent-level, overriding at a child-level where appropriate.
 
   With this approach, we can add any number of new children to a parent without breaking this existing variants. This mindset is crucial to extending the design system over time.