mp-design-system 0.9.24 → 0.9.26

package/package.json

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

package/src/_includes/components/breadcrumb/breadcrumb.njk

@@ -10,7 +10,7 @@
           </li>
         {% else %}
           <li class="c-breadcrumb__item" role="listitem">
-              <span class="c-breadcrumb__current" aria-current={{ item.label }}>{{ item.label}}</span>
+              <span class="c-breadcrumb__current" aria-current="{{ item.label }}">{{ item.label}}</span>
           </li>
         {% endif %}
       {% endfor %}

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

@@ -49,6 +49,12 @@ module.exports = {
       context: {
         classes: 'c-button--small'
       }
+    },
+    {
+      title: 'Loading',
+      context: {
+        classes: 'c-button--loading'
+      }
     }
   ],
   props: [
@@ -69,7 +75,8 @@ module.exports = {
         ['c-button--[colour]', 'petrol, red, blue, white, outline-green, outline-white'],
         ['c-button--small', '', 'Shrinks the button'],
         ['c-button--wide', '', 'Makes the button 100% width'],
-        ['c-button--tight', '', 'Reduces the left/right padding']
+        ['c-button--tight', '', 'Reduces the left/right padding'],
+        ['c-button--loading', '', 'Replace the button text with a loading indicator']
       ]
     }
   ]

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

@@ -144,4 +144,28 @@
     @include step(-1);
     padding: 0.5em 1em;
   }
-}
+
+  &--loading {
+    color: transparent;
+    transition: color .3s ease;
+
+    &:after {
+      content: '⌛';
+      color: color("white");
+      position: absolute;
+    }
+
+    @media (prefers-reduced-motion:no-preference) {
+      &:after {
+        content: '';
+        animation: spin 1.2s ease infinite;
+        border-radius: 50%;
+        border: 3px solid #3336;
+        border-top-color: color("white");
+        display: block;
+        height: 1em;
+        width: 1em;
+      }
+    }
+  }
+}

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

@@ -731,7 +731,49 @@ module.exports = {
           content: '<p>确定聚合物材料的分子量、粒度和结构</p>'
         }
       }
-    }
+    },
+    {
+      title: 'Event card (with image)',
+      preview: 'content-width',
+      context: {
+        theme: {
+          border: false,
+          size: 'small',
+          layout: 'multi',
+          name: 'event',
+          inlineSpecs: true,
+          corner: true,
+        },
+        image: {
+          src: '/static/img/blog-page-image-1.jpg',
+          alt: 'Product image alt'
+        },
+        header: {      
+          title: 'Discover how on-line particle sizing optimises mining analytics.',
+          date: {
+            date: new Date(),
+            time: '11:00 – 12:00',
+            timezone: 'EST'
+          },
+          meta: [
+            'English'
+          ],
+        },
+        body: {
+          keySpecs: [
+            {
+              title: 'Products',
+              term: 'Morphologi G3-ID'
+            },
+            {
+              title: 'Technologies',
+              term: 'Morphologically-Directed Raman Spectroscopy'
+            }
+          ]
+        },
+        link: '#'
+      }
+    },
   ],
 
   props: [

package/src/_includes/components/card/card.scss

@@ -353,6 +353,7 @@
     text-align: right;
     font-size: 1.5rem;
     transition: 300ms color;
+    z-index: 1;
 
     .c-icon {
       position: relative;
@@ -403,6 +404,44 @@
     flex-wrap: wrap;
     @include gap("s-l");
   }
+
+  &--event.c-card--has-image {
+    @extend .c-card--switch;
+
+    .c-card__wrapper {
+      @include padding(0);
+
+      .c-card__primary {
+        @include padding("s-m");
+      }
+
+      .c-card__image {
+        position: relative;
+
+        img {
+          height: 100%;
+          object-fit: cover;
+          aspect-ratio: 16 / 9;
+        }
+      }
+
+      @media (min-width: 55em) {
+        .c-card__primary {
+          width: calc(60% - 18px) !important;
+          width: calc(60% - var(--space-s-m)) !important;
+        }
+
+        .c-card__image {
+          width: calc(40% - 18px) !important;
+          width: calc(40% - var(--space-s-m)) !important;
+
+          img {
+            position: absolute;
+          }
+        }
+      }
+    }
+  }
 }
 
 // IE11 fix

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

@@ -2,7 +2,7 @@
 
 <header class="c-library__header u-split">
   <a class="c-library__logo" href="/">
-    <img src="/static/svg/logo-small.svg" alt="Home" />
+    <img src="/static/svg/logo-small.svg" alt="Home" width="299" height="77" />
     <span class="c-library__logo-name">
       {% for item in config.logo %}
         <span>{{ item }}</span>

package/src/_includes/layout.njk

@@ -5,6 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{ fullTitle }}</title>
+    {% if description %} <meta name="description" content="{{ description }}" /> {% endif %}
     <meta name="theme-color" content="#005461">
     <meta property="og:type" content="website" />
     <meta property="og:title" content="{{ fullTitle }}" />
@@ -13,7 +14,12 @@
     <meta property="og:image" content="{{ config.openGraphImage }}" />
 		<meta property="og:image:alt" content="{{ config.name }}" />
 		<meta name="twitter:image" content="{{ config.openGraphImage }}" />
-    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="preload" href="/build/Inter-Bold.af5441a3.woff2" as="font" type="font/woff2" crossorigin>
+    <link rel="preload" href="/build/Inter-Regular.ed77b881.woff2" as="font" type="font/woff2" crossorigin>
+    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap" as="style">
+    <link rel="icon" type="image/png" sizes="32x32" href="/static/img/favicon.svg">
+    <link rel="stylesheet" href="/build/scss/main.css" />
     <script>
       if(document.documentElement){
         document.documentElement.classList.add('has-js');
@@ -40,8 +46,7 @@
         document.documentElement.style.setProperty('--headerHeight', headerHeight)
       }, 250); 
     </script>
-    <link rel="icon" type="image/png" sizes="32x32" href="/static/img/favicon.svg">
-    <link rel="stylesheet" href="/build/scss/main.css" />
+    <script src="/build/js/app.js" defer></script>
     <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>
     {% block head %}{% endblock %}
@@ -49,7 +54,6 @@
   <body class="{{ bodyClass }}">
     {% block inner %}{% endblock %}
 
-    <script src="/build/js/app.js"></script>
     <script>
       (function() {
         // Prevent empty links from jumping to the top of page when clicked

package/src/assets/scss/elements/reset.scss

@@ -120,8 +120,9 @@ button {
 
 [disabled],
 .mp.c-button[disabled] {
-  opacity: 0.5;
   cursor: not-allowed;
+  filter: saturate(0.4);
+  opacity: 0.6;
 }
 
 label {

package/src/assets/scss/foundations/animation.scss

@@ -0,0 +1,4 @@
+@keyframes spin {
+    from { transform: rotate(0deg) }
+    to { transform: rotate(360deg) }
+}

package/src/assets/scss/foundations/index.scss

@@ -1,3 +1,4 @@
 @import './typography.scss';
 @import './space.scss';
-@import './colour.scss';
+@import './colour.scss';
+@import './animation.scss';

package/src/assets/scss/library.scss

@@ -166,9 +166,9 @@
           @include step(4);
         }
 
-        &:nth-last-child(3) {
-          color: color('petrol', 'step-1');
-        }
+        // &:nth-last-child(3) {
+          // color: color('petrol', 'step-1');
+        // }
       }
     }
   }

package/src/brand/basics.md

@@ -1,5 +1,6 @@
 ---
 title: The basics of our digital brand
+description: A simple style guide for getting started with Malvern Panalytical's Franklin design system
 layout: content-page
 sidebar: brand
 tags: brand
@@ -14,9 +15,9 @@ status: 'Development'
 - 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' %}
+{% 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.

package/src/brand/index.njk

@@ -1,5 +1,6 @@
 ---
 title: Brand & visual identity
+description: Getting started with Malvern Panalytical's brand guidelines; colors, fonts, logos, and more.
 layout: system-page
 sidebar: brand
 status: 'Development'

package/src/components/index.njk

@@ -1,5 +1,6 @@
 ---
 title: Components
+description: Styles and resuable building blocks written in Sass and HTML.
 layout: system-page
 sidebar: components
 status: 'Development'

package/src/content/index.njk

@@ -1,5 +1,6 @@
 ---
 title: Tone of voice
+description: Guidelines to help us make our writing clearer, simpler and more inspiring.
 layout: system-page
 sidebar: content
 status: 'Ready'

package/src/index.njk

@@ -1,6 +1,7 @@
 ---
 title: "Welcome"
 subtitle: Our design system helps us create consistent experiences across our websites and beyond. It also makes the design and development process faster, more efficient and scalable.
+description: Franklin is Malvern Panalytical's design system for public-facing websites and digital products.
 layout: system-home-page
 renderData:
   title: "Welcome to the Franklin design system"