mp-design-system 0.8.0 → 0.8.6

package/src/brand/downloads.njk

@@ -2,22 +2,22 @@
 title: Downloads
 layout: content-page
 sidebar: brand
-status: 'Development'
-version: 0.0.1
+status: 'Ready'
 tags: brand
 ---
 {% from "components/prose/macro.njk" import markdown %}
 {% from "components/card/macro.njk" import card %}
 {% from "components/twi/macro.njk" import twi %}
 
-<div class="u-flow--l">
+<div class="u-flow--l u-margin-top-xl">
 
 {{ twi({
-    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",
+    link: "/static/zip/MP_logo.zip",
+    label: "Malvern Panalytical logo",
     classes: "u-link",
     icon: "file"
 }) }}
+
 <br>
 
 {{ twi({
@@ -26,6 +26,16 @@ label: 'Brand guidelines quick-start guide',
 classes: 'u-link',
 icon: 'file'
 }) }}
+
+<br>
+
+{{ twi({
+    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"
+}) }}
+
 <br>
 
 {{ twi({

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}

@@ -7,20 +7,27 @@ version: 1.0.0
 status: 'Ready'
 ---
 
-The Malvern Panalytical logo is available in two formats: 
+<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 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: [
             {

package/src/components/grid/index.njk

@@ -4,22 +4,64 @@ layout: system-page
 sidebar: components
 ---
 
-{% from "components/usp/macro.njk" import usp %}
-  
+{% from "components/card/macro.njk" import card %}
+
 <div class="o-grid o-grid--of-three-late">
-  {{ usp({
-    title: 'Generic',
-    content: '<p>Grids to be nested inside layout grids, splitting content into equal columns.</p>',
-    link: '/components/grid/generic/'
+  {{ card({
+      theme: {
+        layout: 'single',
+        size: 'large',
+        border: true
+      },
+      header: {
+        title: 'Generic'
+      },
+      body: {
+        content: '<p>Grids to be nested inside layout grids, splitting content into equal columns.</p>'
+      },
+      footer: {
+        cta: {
+          link: '/components/grid/generic/',
+          label: 'Read more'
+        }
+      }
   }) }}
-  {{ usp({
-    title: 'Layout',
-    content: '<p>Grids designed to lay out full pages, fitting into the twelve column grid.</p>',
-    link: '/components/grid/layout/'
+  {{ card({
+      theme: {
+        layout: 'single',
+        size: 'large',
+        border: true
+      },
+      header: {
+        title: 'Layout'
+      },
+      body: {
+        content: '<p>Grids designed to lay out full pages, using the twelve column grid.</p>'
+      },
+      footer: {
+        cta: {
+          link: '/components/grid/layout/',
+          label: 'Read more'
+        }
+      }
   }) }}
-  {{ usp({
-    title: 'Wrapper',
-    content: '<p>Site-width constrains.</p>',
-    link: '/components/grid/wrap/'
+  {{ card({
+      theme: {
+        layout: 'single',
+        size: 'large',
+        border: true
+      },
+      header: {
+        title: 'Wrapper'
+      },
+      body: {
+        content: '<p>Site-width constraints.</p>'
+      },
+      footer: {
+        cta: {
+          link: '/components/grid/wrap/',
+          label: 'Read more'
+        }
+      }
   }) }}
 </div>

package/src/components/iconography.njk

@@ -18,23 +18,23 @@ Icons add visual noise to designs and should be used sparingly.
 {% endset %}
 
 {% set icons = [
-  'file',
-  'arrow-right',
   'arrow-left',
+  'arrow-right',
   'chevron-down',
-  'search',
+  'cross',
+  'dash',
   'facebook',
-  'twitter',
-  'rss',
+  'file',
+  'info',
   'instagram',
   'linkedin',
-  'youtube',
-  'play',
-  'info',
   'log-out',
-  'cross',
+  'play',
+  'rss',
+  'search',
   'tick',
-  'dash'
+  'twitter',
+  'youtube'
 ] %} 
 
 {% set content2 %}
@@ -50,7 +50,9 @@ Adding new icons to the SVG sprite is a manual process.
 5. Paste into Franklin's /src/static/svg/sprite.svg
    - Convert the \<svg> tag into a \<symbol>
    - Add an id attribute
-   - Generall ensure your \<symbol> looks the same as existing ones
+   - Generally ensure your \<symbol> looks the same as existing ones
+
+Please remember to add your icon to this page!
 {% endset %}
 
 <div class="u-flow--l">
@@ -63,7 +65,7 @@ Adding new icons to the SVG sprite is a manual process.
       <tr>
         <th>Icon</th>
         <th>ID</th>
-        <th>Code</th>
+        <th>Code (Nunjucks)</th>
       </tr>
     </thead>
     <tbody>
@@ -73,7 +75,7 @@ Adding new icons to the SVG sprite is a manual process.
             {{ icon({ id: id }) }}
           </td>
           <td><code>{{ id }}</code></td>
-          <td><code>{{ "{{ icon({ id: id }) }}" }}</code></td>
+          <td><code>{{ "{{ icon({ id:" }} {{ id }} }) }}</code></td>
         </tr>
       {% endfor %}
     </table>

package/src/components/installation.md

@@ -9,12 +9,12 @@ sidebar: components
 The simplest way to consume the design system is with a `<link>` & `<script>` tag. Unpkg is a CDN of the built CSS & JavaScript, and can be included like so:
 
 ```html
-<link rel="stylesheet" href="https://unpkg.com/mp-design-system@{{ config.dsVersion }}/dist/build/scss/main.css" />
+<link rel="stylesheet" href="https://unpkg.com/mp-design-system@latest/dist/build/scss/main.css" />
 
-<script src="https://unpkg.com/mp-design-system@{{ config.dsVersion }}/dist/build/js/app.js"></script>
+<script src="https://unpkg.com/mp-design-system@latest/dist/build/js/app.js"></script>
 ```
 
-The latest version number is **V.{{ config.dsVersion }}**, and is visible in the top-right of the page throughout the design system.
+The latest version number is **V.{{ config.dsVersion }}**, and is visible in the top-right of the page throughout the design system. You can access previous versions by replacing "latest" in the URL, e.g. `https://unpkg.com/mp-design-system@0.8.2/dist/build/scss/main.css`
 
 ## Consuming the design system via NPM
 

package/src/components/publishing-the-system.md

@@ -8,6 +8,8 @@ sidebar: components
 
 To push changes to the live version of this website, simply `git push` the `master` branch. [Netlify](http://netlify.com/) will automatically rebuild the website with the latest code & design and redeploy it.
 
+Details on editing and updating this website are available in [Confluence](https://malvernpanalytical.atlassian.net/l/cp/mwMV1d1H) (Malvern Panalytical employees only).
+
 ## NPM
 
 When you're ready to cut a new release to NPM, here are the steps you'll need to take:

package/src/content/big-ideas.md

@@ -3,7 +3,7 @@ title: Big ideas for a better world
 layout: content-page
 sidebar: content
 tags: content
-date: 2020-01-03
+date: 2020-01-04
 ---
 
 ### Explained clearly, confidently and with a few small surprises

package/src/content/boilerplate.md

@@ -0,0 +1,27 @@
+---
+title: Boilerplate
+layout: content-page
+sidebar: content
+status: 'Ready'
+version: 1.0.2
+tags: content
+date: 2020-01-03
+---
+
+{% alert %}
+This is our **boilerplate**: the default text we use to describe ourselves in press releases and other publications.
+{% endalert %}
+
+### About Malvern Panalytical
+
+We draw on the power of our analytical instruments and services to make the invisible visible and the impossible possible. 
+
+Through the chemical, physical and structural analysis of materials, our high precision analytical systems and top-notch services support our customers in creating a better world. We help them improve everything from the energies that power us and the materials we build with, to the medicines that cure us and the foods we enjoy. 
+
+We partner with many of the world’s biggest companies, universities and research organizations. They value us not only for the power of our solutions, but also for the depth of our expertise, collaboration and integrity. 
+
+We are committed to Net Zero in our own operations by 2030 and in our total value chain by 2040. This is woven into the fabric of our business, and we help our employees and customers think about their part in creating a healthier, cleaner, and more productive world. 
+
+With over 2300 employees, we serve the world, and we are part of Spectris plc, the world-leading precision measurement group.
+
+**Malvern Panalytical. We’re BIG on small.™**

package/src/content/index.njk

@@ -34,7 +34,7 @@ Which is why we’ve created these guidelines. They contain simple, practical ad
   }) }}
 
   {{ 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: 'Download this guide as a PDF',
     classes: 'u-link',
     icon: 'file',

package/src/content/our-voice/1-big-picture.md

@@ -3,7 +3,7 @@ title: 1. We focus on the big picture
 layout: content-page
 sidebar: content
 tags: content
-date: 2020-01-05
+date: 2020-01-06
 ---
 
 # Not on ourselves

package/src/content/our-voice/2-whats-most-important.md

@@ -3,7 +3,7 @@ title: 2. We say what's most important
 layout: content-page
 sidebar: content
 tags: content
-date: 2020-01-06
+date: 2020-01-07
 ---
 
 # Not everything we know

package/src/content/our-voice/3-write-like-we-speak.md

@@ -3,7 +3,7 @@ title: 3. We write like we speak
 layout: content-page
 sidebar: content
 tags: content
-date: 2020-01-07
+date: 2020-01-08
 ---
 
 # Not like a technical report

package/src/content/our-voice/4-write-to-be-skimmed.md

@@ -3,7 +3,7 @@ title: 4. We write to be skimmed
 layout: content-page
 sidebar: content
 tags: content
-date: 2020-01-08
+date: 2020-01-09
 ---
 
 # Let people find what they need quickly

package/src/content/our-voice/5-active-sentences.md

@@ -3,7 +3,7 @@ title: 5. We use active sentences
 layout: content-page
 sidebar: content
 tags: content
-date: 2020-01-09
+date: 2020-01-10
 ---
 
 # Passive sentences will not be used

package/src/content/our-voice/6-add-energy.md

@@ -3,7 +3,7 @@ title: 6. We add energy
 layout: content-page
 sidebar: content
 tags: content
-date: 2020-01-10
+date: 2020-01-11
 ---
 # With short sentences. (Like this).
 

package/src/content/our-voice/7-small-surprises.md

@@ -3,7 +3,7 @@ title: 7. … And we add small surprises
 layout: content-page
 sidebar: content
 tags: content
-date: 2020-01-11
+date: 2020-01-12
 ---
 # Give our readers a smile in the mind
 

package/src/content/our-voice/seven-steps.md

@@ -3,7 +3,7 @@ title: 7 steps to more clear, confident and surprising writing
 layout: content-page
 sidebar: content
 tags: content
-date: 2020-01-04
+date: 2020-01-05
 ---
 
 These are the main practical techniques that are the foundation of our tone of voice. 

package/src/content/our-voice/which-techniques-when.md

@@ -3,7 +3,7 @@ title: Which techniques, when?
 layout: content-page
 sidebar: content
 tags: content
-date: 2020-01-12
+date: 2020-01-13
 ---
 
 As you’ll notice from the examples in these guidelines, we don’t need to use *all* the techniques *all* of the time.

package/src/content/real-life-examples/01-who-we-are-boilerplate.md

@@ -14,15 +14,19 @@ Malvern Panalytical was formed by the merger of Malvern Instruments and PANalyti
 
 # After
 
-**When you make the invisible visible, the impossible is possible.**
+**About Malvern Panalytical**
 
-Our analytical systems and services help our customers to create a better world. Through chemical, physical and structural analysis of materials, they improve everything from the energies that power us and the materials we build with, to the medicines that cure us and the foods we enjoy.
+We draw on the power of our analytical instruments and services to make the invisible visible and the impossible possible. 
 
-We partner with many of the world’s biggest companies, universities and research organizations. They value us not only for the power of our solutions, but also for the depth of our expertise, collaboration and integrity.
+Through the chemical, physical and structural analysis of materials, our high precision analytical systems and top-notch services support our customers in creating a better world. We help them improve everything from the energies that power us and the materials we build with, to the medicines that cure us and the foods we enjoy. 
 
-**Our roots**
+We partner with many of the world’s biggest companies, universities and research organizations. They value us not only for the power of our solutions, but also for the depth of our expertise, collaboration and integrity. 
 
-Once, we were two companies: Malvern Instruments and PANalytical. Now we are one, with over 2,200 people worldwide, and part of Spectris plc, the world-leading precision measurements Group.
+We are committed to Net Zero in our own operations by 2030 and in our total value chain by 2040. This is woven into the fabric of our business, and we help our employees and customers think about their part in creating a healthier, cleaner, and more productive world. 
+
+With over 2300 employees, we serve the world, and we are part of Spectris plc, the world-leading precision measurement group.
+
+**Malvern Panalytical. We’re BIG on small.™**
 
 {% alert %}
 ### What's changed
@@ -31,5 +35,5 @@ Once, we were two companies: Malvern Instruments and PANalytical. Now we are one
 - **Write like we speak**  
   We’ve stripped out all of the business-speak (maximizing productivity, innovative, enhance efficiency) and focused on the real-life problems we’re helping to solve.
 - **Add energy**  
-  Note how using three short sentences in the second paragraph (The energies…The materials…The medicines…) add a sense of drama.
+  Note how using repetition in the second paragraph (the energies…the materials…the medicines…the foods) add a sense of drama.
 {% endalert %}