mp-design-system 0.8.2 → 0.8.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mp-design-system",
-  "version": "0.8.2",
+  "version": "0.8.4",
   "description": "",
   "scripts": {
     "dev": "npm-run-all --parallel bundle:*",
@@ -20,18 +20,18 @@
   "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": "^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",

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/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/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/includes/system-footer.njk

@@ -1,15 +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.
 
-- For all enquiries please contact [will.wallace@malvernpanalytical.com](mailto:will.wallace@malvernpanalytical.com) via email or Teams.
+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/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 {

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

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

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({

package/src/brand/index.njk

@@ -21,15 +21,6 @@ To strengthen Malvern Panalytical’s market position, we must ensure consistent
     content: content
   }) }}
 
-  <br>
-
-  {{ twi({
-    link: '/static/pdf/PN12558_Physical_branding_v23.pdf',
-    label: 'Physical brand quick-start guide',
-    classes: 'u-link',
-    icon: 'file'
-  }) }}
-
   <div class="o-grid o-grid--of-three-late">
     {{ card({
       theme: {
@@ -38,14 +29,14 @@ To strengthen Malvern Panalytical’s market position, we must ensure consistent
         border: true
       },
       header: {
-        title: 'Brand identity'
+        title: 'Visual identity'
       },
       body: {
-        content: '<p>A brand is defined by what a company does, not just what it says or shows.</p>'
+        content: '<p>The visual marks and styles that encapsulate our brand such as logo, colour and typography.</p>'
       },
       footer: {
         cta: {
-          link: '/brand/identity',
+          link: '/brand/logo',
           label: 'Read more'
         }
       }
@@ -58,14 +49,14 @@ To strengthen Malvern Panalytical’s market position, we must ensure consistent
         border: true
       },
       header: {
-        title: 'Visual identity'
+        title: 'Downloads'
       },
       body: {
-        content: '<p>The visual marks and styles that encapsulate our brand such as logo, colour and typography.</p>'
+        content: '<p>Download our brand guidelines PDF, our logo, and more.</p>'
       },
       footer: {
         cta: {
-          link: '/brand/visual/logo',
+          link: '/brand/downloads',
           label: 'Read more'
         }
       }

package/src/brand/{visual/logo.md → logo.md}

@@ -9,20 +9,25 @@ 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>
 
-The Malvern Panalytical logo is available in two formats: 
+The Malvern Panalytical logo is available in three formats: 
 
 - Standard, with the text alongside the 'X' brandmark;
-- Stacked, with the X and the text centered.
+- Stacked, with the X and the text centered;
+- Simple, for use at small sizes (when the fine details of the regular logo become obscured).
 
-<div class="o-grid o-grid--of-two">
+<div class="o-grid o-grid--of-three">
     <figure style="width:320px">
-        <figcaption>Standard side-by-side format</figcaption>
-        <img src="/static/svg/logo.svg" alt="Malvern Panalytical logo, horizontal format">
+        <figcaption>Standard</figcaption>
+        <img src="/static/svg/logo.svg" alt="Malvern Panalytical logo, horizontal format" class="u-margin-top-m">
     </figure>
     <figure style="width:200px">
-        <figcaption>Stacked format</figcaption>
+        <figcaption>Stacked</figcaption>
         <img src="/static/svg/logo-stacked.svg" alt="Malvern Panalytical logo, stacked format">
     </figure>
+    <figure style="width:100px">
+        <figcaption>Simple</figcaption>
+        <img src="/static/svg/logo-simple.svg" alt="Malvern Panalytical logo, stacked format" class="u-margin-top-s">
+    </figure>
 </div>
 
 ## Spacing

package/src/brand/{visual/typography.md → typography.md}

@@ -15,9 +15,14 @@ Our brand font is [Inter](https://rsms.me/inter). This typeface has been selecte
 - Comprehensive weight and style options
 - Understated authority
 
+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>
 
-Find more information about Inter at [https://rsms.me/inter](https://rsms.me/inter)
+<br>
+
+#### Google Fonts
+[Inter is also available from Google Fonts](https://fonts.google.com/specimen/Inter).
 
 ---
 

package/src/checklist.md

@@ -0,0 +1,70 @@
+---
+title: Franklin compatibility checklist
+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.
+
+When evaluating a new platform, we should aim to ensure they are capable of following the Franklin styles as closely as possible.
+
+Platforms can be categorized into three groups:
+
+1.	Full design system users
+2.	Medium users
+3.	Basic users
+
+With 1 being the most customizable and 3 the least. More customization allows closer alignment with Franklin.
+
+## Checklist
+To qualify as a **Medium** user, a platform must be able to:
+
+<div>
+    <input type="checkbox" class="c-checkbox" name="inter-font" id="inter-font" value=""   />
+    <label for="inter-font">Use the Inter font, either installed in the project or linked via Google Fonts</label>
+</div>
+<div>
+    <input type="checkbox" class="c-checkbox" name="html" id="html" value=""   />
+    <label for="html">Build bespoke HTML components following Franklin examples</label>
+</div>
+<div>
+    <input type="checkbox" class="c-checkbox" name="css" id="css" value=""   />
+    <label for="css">Write custom CSS & JS to identically replicate Franklin</label>
+</div>
+
+Additionally, they can be considered **Full** users if they can:
+
+<div>
+    <input type="checkbox" class="c-checkbox" name="cdn" id="cdn" value=""   />
+    <label for="cdn">Consume Franklin's CSS and JavaScript via CDN links</label>
+</div>
+<div>
+    <input type="checkbox" class="c-checkbox" name="interface" id="interface" value=""   />
+    <label for="interface">Style all elements of the interface</label>
+</div>
+
+If the platform can’t qualify as a Medium user, they are a **Basic** user. Typically, with Basic platforms there is no ability to write custom HTML, CSS, or JS. Visual customization is limited to e.g. changing colors and picking from predefined templates.
+
+### Example questions
+Could the platform incorporate our main header navigation by using the HTML defined at: <https://brand.malvernpanalytical.com/components/header/#component-code>?
+How about tabs, as defined at: <https://brand.malvernpanalytical.com/components/tabs/#component-code>?
+
+### Examples of each type
+Full: 
+-	Malvern Panalytical website
+-	Materials Talks blog
+-	Careers website
+
+Medium: 
+-	Bizzabo events pages
+-	OneWelcome login screen
+
+Basic:
+-	Salesforce customer portal
+
+### Notes
+More detailed instructions on consuming Franklin’s CSS and JS can be found at <https://brand.malvernpanalytical.com/components/installation>. 
+
+Example HTML for nearly every component is available at <https://brand.malvernpanalytical.com/components>.
+
+Documentation is currently a bit lacking for Medium users – e.g. there’s no simple way to supply compiled CSS for their reference, and the uncompiled Sass is likely overcomplicated for their needs. I’m happy to talk through everything they need, but we should aim to document this more thoroughly.

package/src/components/colour.njk

@@ -25,7 +25,7 @@ A limited set of color tints and shades are available for element backgrounds, b
 
   {% set colors = [
     {
-        name: 'MP21Petrol',
+        name: 'MP Petrol',
         key: 'Petrol',
         steps: [
             {
@@ -61,7 +61,7 @@ A limited set of color tints and shades are available for element backgrounds, b
         ]
     },
     {
-        name: 'MP21Blue',
+        name: 'MP Blue',
         key: 'Blue',
         steps: [
             {
@@ -97,7 +97,7 @@ A limited set of color tints and shades are available for element backgrounds, b
         ]
     },
     {
-        name: 'MP21Green',
+        name: 'MP Green',
         key: 'Green',
         steps: [
             {
@@ -133,7 +133,7 @@ A limited set of color tints and shades are available for element backgrounds, b
         ]
     },
     {
-        name: 'MP21Rubine',
+        name: 'MP Rubine',
         key: 'Red',
         steps: [
             {
@@ -169,7 +169,7 @@ A limited set of color tints and shades are available for element backgrounds, b
         ]
     },
     {
-        name: 'MP21Charcoal',
+        name: 'MP Charcoal',
         key: 'Grey',
         steps: [
             
@@ -206,7 +206,7 @@ A limited set of color tints and shades are available for element backgrounds, b
         ]
     },
     {
-        name: 'MP21UtilBlue',
+        name: 'MP Utility Blue',
         key: 'Utility blue',
         steps: [
             {
@@ -242,7 +242,7 @@ A limited set of color tints and shades are available for element backgrounds, b
         ]
     },
     {
-        name: 'MP21UtilGold',
+        name: 'MP Utility Gold',
         key: 'Utility orange',
         steps: [
             {