mp-design-system 0.8.0 → 0.8.6

package/package.json

@@ -1,15 +1,14 @@
 {
   "name": "mp-design-system",
-  "version": "0.8.0",
+  "version": "0.8.6",
   "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/alert/alert.scss

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

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.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/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/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/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-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/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/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 {
@@ -244,12 +244,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/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/objects/prose.scss

@@ -130,15 +130,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/brand/{visual/colors.njk → colors.njk}

@@ -13,7 +13,9 @@ status: 'In production'
 <div class="u-flow--l">
 
 {{ markdown({
-    content: "Our color palette is built around our primary color, MP Petrol. We’ve included just enough tints and shades to provide useful options for designers."
+    content: "Our color palette is built around our primary color, MP Petrol. We’ve included just enough tints and shades to provide useful options for designers. 
+    
+Step 0 is the 'default' shade for each color."
 }) }}
 
 <div class="u-wrap--content">
@@ -27,7 +29,7 @@ status: 'In production'
 
 {% set colors = [
     {
-        name: 'MP21Petrol',
+        name: 'MP Petrol',
         key: 'Petrol',
         steps: [
             {
@@ -58,7 +60,7 @@ status: 'In production'
         ]
     },
     {
-        name: 'MP21Blue',
+        name: 'MP Blue',
         key: 'Blue',
         steps: [
             {
@@ -89,7 +91,7 @@ status: 'In production'
         ]
     },
     {
-        name: 'MP21Green',
+        name: 'MP Green',
         key: 'Green',
         steps: [
             {
@@ -120,77 +122,88 @@ status: 'In production'
         ]
     },
     {
-        name: 'MP21Rubine',
+        name: 'MP Rubine',
         key: 'Red',
         steps: [
             {
                 name: 0,    
                 hex: 'ce0058',
-                cmyk: '14/100/50/2'
+                cmyk: '14.100.50.2'
             }
         ]
     },
     {
-        name: 'MP21UtilGold',
-        key: 'Utility-Orange',
+        name: 'MP Charcoal',
+        key: 'Grey',
         steps: [
             
             {
                 name: "-1",
-                hex: 'AE7809',
-                cmyk: '29.51.100.10'
+                hex: '252525',
+                cmyk: '00.00.00.95'
             },
             {
                 name: 0,    
-                hex: 'F2A60D',
-                cmyk: '04.38.100.00'
+                hex: '333333',
+                cmyk: '00.00.00.91'
             },
             {
                 name: 1,
-                hex: 'F6BF51',
-                cmyk: '03.26.79.00'
+                hex: '6c6c6c',
+                cmyk: '00.00.00.70'
             },                
             {
                 name: 2,
-                hex: 'FCEAC5',
-                cmyk: '01.07.25.00'
+                hex: 'cecece',
+                cmyk: '00.00.00.22'
             },
             {
                 name: 3,
-                hex: 'FEF8EC',
-                cmyk: '00.02.06.00'
+                hex: 'efefef',
+                cmyk: '00.00.00.08'
             }
         ]
     },
     {
-        name: 'MP21Charcoal',
-        key: 'Grey',
+        name: 'MP Utility Gold',
+        key: 'Utility-Orange',
         steps: [
             
             {
                 name: "-1",
-                hex: '252525',
-                cmyk: '00.00.00.95'
+                hex: 'AE7809',
+                cmyk: '29.51.100.10'
             },
             {
                 name: 0,    
-                hex: '333333',
-                cmyk: '00.00.00.91'
+                hex: 'F2A60D',
+                cmyk: '04.38.100.00'
             },
             {
                 name: 1,
-                hex: '6c6c6c',
-                cmyk: '00.00.00.70'
+                hex: 'F6BF51',
+                cmyk: '03.26.79.00'
             },                
             {
                 name: 2,
-                hex: 'cecece',
-                cmyk: '00.00.00.22'
+                hex: 'FCEAC5',
+                cmyk: '01.07.25.00'
             },
             {
                 name: 3,
-                hex: 'efefef',
-                cmyk: '00.00.00.08'
+                hex: 'FEF8EC',
+                cmyk: '00.02.06.00'
+            }
+        ]
+    },
+    {
+        name: 'MP Utility Blue',
+        key: 'Utility-Blue',
+        steps: [
+            {
+                name: 0,    
+                hex: '006daf',
+                cmyk: '86.48.3.5'
             }
         ]
     }
@@ -225,22 +238,27 @@ status: 'In production'
 {{ markdown({
     content: "# When to use color
     
-The color palette works best when it's used in a balanced way; too much of a strong color can make a design feel crowded or busy. Instead, try to keep your designs to mainly white backgrounds, with Grey text, and splashes of color to highlight important elements.
+The color palette works best when it's used in a balanced way; too much of a strong color can make a design feel crowded or busy. Instead, try to keep your designs to mainly white backgrounds, with Charcoal text, and splashes of color to highlight important elements.
 
-**Petrol** is our primary color - it represents Malvern Panalytical's spirit and personality. Along with **Blue** it is the color you will use most often in your designs.
+**Petrol** is our primary color - it represents Malvern Panalytical's spirit and personality. Petrol, together with **Blue**, are the colors you will use most often in your designs.
 
 **Green** is reserved for _calls to action_ - the single most important action that we want a reader or viewer to take next. On a web page for example, this would be the \"buy now\" button.
 
 **Rubine** is reserved for important notices or warnings. It's such an eye-catching color that it must be used sparingly.
 
+**Charcoal** is mainly used for text, but can also be used for other elements.
+
 **Utility Gold** is intended for notices which are less urgent than Rubine. It can also be used sparingly as an accent color, to contrast against Petrol and Blue.
 
-**Grey** is widely used for text in all designs.
+For interactive designs we also have **Utility Blue**, which is used for hyperlinks. Note: Utility Blue is not generally intended for printed materials.
 
 ## Tints and shades
 Each color is provided in _steps_. Step 0 is the \"default\" for each color. If you need a colored background, consider using step 2 or 3, as step 0 or 1 will often be too overpowering.
 
-Using Petrol step 3 as a background color (instead of grey) can be a nice way to introduce a bit of our personality into a design."
+Using Petrol step 3 as a background color (instead of grey) can be a nice way to introduce a bit of our personality into a design.
+
+## Why so many blues?
+Petrol and Blue are part of our brand, but neither is suitable for hyperlinks in web or software environments: Blue doesn't provide enough contrast for legibility, and we didn't want to overuse Petrol. We added Utility Blue to fill this gap."
 }) }}
 
 {{ alert({