mp-design-system 1.2.12 → 1.2.14

package/package.json

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

package/src/_includes/components/card/card.njk

@@ -72,14 +72,14 @@
     <div class="c-card__primary">
       {% if header %}
         <header class="c-card__header u-flow--2xs">
-          {% if hasDate and not isInPast and hasFormat == false %}
+          {% if hasDate and not isInPast and not hasFormat %}
             <time class="c-card__datetime">
               <span class="c-card__day">{{ header.date.date.getDate() }} </span>
               <span class="c-card__month">{{ header.date.date.getMonth() | months }}</span>
             </time>
           {% endif %}
 
-          {% if hasDate and hasFormat == true %}
+          {% if hasDate and hasFormat %}
             <time class="c-card__datetime">
               <span>{{ header.date.date }}</span>
             </time>

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

@@ -448,6 +448,44 @@
       }
     }
   }
+
+  &--event-series {
+    box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 20%);
+
+    .c-card__image img {
+      max-height: 252px;
+      aspect-ratio: 2/1;
+      object-fit: cover;
+    }
+
+    .c-card__wrapper,
+    .c-card__primary {
+      height: 100%;
+    }
+
+    .c-card__primary {
+      flex-shrink: 1;
+    }
+
+    .c-card__header > * + * {
+      @include margin('s', 0, 0, 0);
+    }
+
+    .c-card__datetime {
+      font-size: var(--step--1);
+      font-weight: normal;
+    }
+
+    .c-card__title {
+      font-size: var(--step-0);
+    }
+
+    .c-card__footer .u-link,
+    .c-card__footer .u-link svg {
+      color: color('utility-blue', 'step-1');
+      font-size: var(--step--1);
+    }
+  }
 }
 
 .grid-view > .c-card--event.c-card--has-image .c-card__wrapper {

package/src/_includes/components/card/product-comparison-card.scss

@@ -1,7 +1,9 @@
 .c-product-comparison-card {
   @extend .u-flow--2xs;
+  background: color('white');
   display: flex;
   flex-flow: column;
+  flex-grow: 1;
   border: 1px solid color('petrol', 'step-2');
     
   & > * + * {

package/src/_includes/components/comparison-table/comparison-table.config.js

@@ -1,6 +1,11 @@
 const products = [
   {
     title: 'Mastersizer 3000',
+    image: {
+      src: '/static/img/range-product-1.jpg',
+      alt: 'Mastersizer 3000'
+    },
+    description: 'Delivering the data you need for outcomes you can trust',
     buttons: [
       {
         link: '#',
@@ -11,11 +16,6 @@ const products = [
         label: 'Request a quote'
       }
     ],
-    image: {
-      src: '/static/img/range-product-1.jpg',
-      alt: 'Mastersizer 3000'
-    },
-    description: 'Delivering the data you need for outcomes you can trust',
     sections: [
       ['Laser diffraction', '0.01µm - 3500µm'],
       [true, true, true, false],
@@ -25,6 +25,11 @@ const products = [
   },
   {
     title: 'Mastersizer 3000E',
+    image: {
+      src: '/static/img/range-product-2.jpg',
+      alt: 'Mastersizer 3000E'
+    },
+    description: 'Entry level particle size analyzer',
     buttons: [
       {
         link: '#',
@@ -35,11 +40,6 @@ const products = [
         label: 'Request a quote'
       }
     ],
-    image: {
-      src: '/static/img/range-product-2.jpg',
-      alt: 'Mastersizer 3000E'
-    },
-    description: 'Entry level particle size analyzer',
     sections: [
       ['Laser diffraction', '0.1µm - 1000µm'],
       [false, false, true, true],

package/src/_includes/components/comparison-table/comparison-table.njk

@@ -1,7 +1,7 @@
 {% from "components/button/macro.njk" import button %}
 {% from "components/icon/macro.njk" import icon %}
 
-<section id="product-comparison-table" class="mp u-bg-grey-step-3 u-pad-bottom-l">
+<section id="product-comparison-table" class="mp u-bg-grey-step-3 u-pad-y-xl" style="scroll-margin-top:70px">
   <div class="c-comparison-table__mobile u-wrap"></div>
   <div class="c-comparison-table__desktop u-wrap">
     <table class="c-comparison-table">

package/src/_includes/components/comparison-table/comparison-table.scss

@@ -52,6 +52,7 @@
       @include space('max-height', '3xl');
       @include margin(0, 'auto');
       object-fit: contain;
+      mix-blend-mode: multiply;
     }
 
     p {

package/src/_includes/components/component/preview-default.njk

@@ -1,3 +1,3 @@
-<div class="u-pad-m">
+<div class="mp u-pad-m">
   {{ comp | safe }}
 </div>

package/src/_includes/components/hero/hero.njk

@@ -1,4 +1,4 @@
-{% from "components/twi/macro.njk" import twi %}
+{% from "components/button/macro.njk" import button %}
 {% from "components/breadcrumb/macro.njk" import breadcrumb %}
 {% from "components/button/macro.njk" import button %}
 {% from "components/icon/macro.njk" import icon %}
@@ -33,12 +33,11 @@
       </header>
 
       {% if params.cta %}
-        {{ twi({
+        {{ button({
           link: params.cta.link,
+          inline: true,
           label: params.cta.label,
-          classes: 'u-link',
-          icon: params.cta.icon or 'arrow-right',
-          attrs: params.cta.attrs
+          color: 'green'
         }) }}
       {% endif %}
     </div>

package/src/_includes/components/input/radio.scss

@@ -2,8 +2,8 @@
 .c-checkbox {
   @extend .u-hidden;
 
-  & + label,
-  & + input[type=hidden] + label {
+  &+label,
+  &+input[type=hidden]+label {
     @include padding-left('l');
     position: relative;
     @include step(-1);
@@ -23,33 +23,70 @@
     }
   }
 
-  &:focus + label:before,
-  &:focus + input[type=hidden] + label:before {
+  &:focus+label:before,
+  &:focus+input[type=hidden]+label:before {
     outline: 2px solid;
   }
 
   &[disabled],
   [disabled] & {
-    & + label:before {
+    &+label:before {
       background-color: color('petrol', 'step-2');
       cursor: not-allowed;
       opacity: 0.6;
 
     }
-    &:hover + label:before {
+
+    &:hover+label:before {
       background-color: color('petrol', 'step-2');
     }
   }
+
+
+  &--box {
+    &+label {
+      @include padding('s');
+      height: 100%;
+      width: 100%;
+      background: color('white');
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 6px;
+      text-align: center;
+      font-weight: 700;
+      word-break: break-word;
+
+      &:before,
+      &:after {
+        display: none;
+      }
+    }
+
+    &:checked+label {
+      background: color('blue');
+      color: color('white');
+    }
+
+    &[disabled]+label {
+      background: color('grey', 'step-3');
+      color: color('grey', 'step-1');
+      border: 1px solid color('grey', 'step-2');
+      cursor: not-allowed;
+    }
+  }
+
 }
 
 .c-checkbox {
-  &:checked + label:before,
-  &:checked + input[type=hidden] + label:before {
+
+  &:checked+label:before,
+  &:checked+input[type=hidden]+label:before {
     background: color('utility-blue');
   }
-  
-  &:checked + label:after,
-  &:checked + input[type=hidden] + label:after {
+
+  &:checked+label:after,
+  &:checked+input[type=hidden]+label:after {
     transform: translateX(6.5px) translateY(-1.5px) translateY(-50%) rotate(45deg);
     position: absolute;
     content: '';
@@ -64,38 +101,41 @@
 
 .c-radio,
 .c-checkbox {
-  & + label:hover:before,
-  & + input[type=hidden] + label:hover:before {
-    background-color: color('utility-blue','step-3');
+
+  &+label:hover:before,
+  &+input[type=hidden]+label:hover:before {
+    background-color: color('utility-blue', 'step-3');
   }
 }
 
-.c-checkbox {  
-  &:checked + label:hover:before,
-  &:checked + input[type=hidden] + label:hover:before {
+.c-checkbox {
+
+  &:checked+label:hover:before,
+  &:checked+input[type=hidden]+label:hover:before {
     background: color('utility-blue', 'step--1');
   }
 }
 
 .c-radio {
-  & + label:before,
-  & + input[type=hidden] + label:before {
+
+  &+label:before,
+  &+input[type=hidden]+label:before {
     border-radius: 100%;
   }
 
-  &:checked + label:before,
-  &:checked + input[type=hidden] + label:before {
+  &:checked+label:before,
+  &:checked+input[type=hidden]+label:before {
     box-shadow: inset 0 0 0 5px color('utility-blue');
   }
-  
-  &:checked + label:hover:before,
-  &:checked + input[type=hidden] + label:hover:before {
+
+  &:checked+label:hover:before,
+  &:checked+input[type=hidden]+label:hover:before {
     box-shadow: inset 0 0 0 5px color('utility-blue', 'step--1');
   }
 }
 
 .c-off-canvas .c-checkbox-group {
-  &> * {
+  &>* {
     width: 100%;
     margin-left: 0;
   }

package/src/_includes/components/internal-nav/internal-nav.config.js

@@ -22,7 +22,7 @@ module.exports = {
         links: [
           { link: '#overview', label: 'Overview' },
           { link: '#products', label: 'Products' },
-          { link: '#compare', label: 'Compare' },
+          { link: '#product-comparison-table', label: 'Compare' },
         ],
         button: {
           link: '#',

package/src/_includes/components/internal-nav/internal-nav.scss

@@ -5,6 +5,7 @@
 
   &--stuck {
     @extend .u-bg-white;
+    z-index: 9999;
 
     .c-internal-nav__title {
       opacity: 1;

package/src/assets/scss/components/index.scss

@@ -4,7 +4,6 @@
 @import '~comp/button/button.scss';
 @import '~comp/campaign/campaign.scss';
 @import '~comp/card/card.scss';
-@import '~comp/card/event-series-card.scss';
 @import '~comp/card/industry-card.scss';
 @import '~comp/card/product-comparison-card.scss';
 @import '~comp/comparison-table/comparison-table.scss';
@@ -39,3 +38,4 @@
 @import './form.scss';
 @import './headings.scss';
 @import './lightbox.scss';
+@import './product-finder.scss';

package/src/assets/scss/components/product-finder.scss

@@ -0,0 +1,66 @@
+.c-product-finder {
+    &__panel {
+        background: color('petrol', 'step-3');
+        @include padding('xl-2xl', 'm-xl');
+        position: relative;
+
+        &--intro {
+            background: radial-gradient(circle at top right, color('petrol', 'step-3') 0%, color('petrol', 'step-3') 30%, color('blue', 'step-2') 100%);
+        }
+
+        &:after {
+            content: '';
+            position: absolute;
+            width: 0;
+            height: 0;
+            border-style: solid;
+            @include space('border-width', 'xl', 'xl', 0, 0);
+            border-color: transparent color('white') transparent transparent;
+            bottom: 0;
+            right: 0;
+            display: none;
+        }
+        
+        @media (min-width: 48em) {
+            &:after {
+                display: block;
+            }
+        }
+    }
+
+    &__result {
+        display: flex;
+        flex-flow: column;
+        flex: 1;
+        @include flow('s');
+
+        &>.c-h {
+            font-size: var(--step--1);
+            text-transform: uppercase;
+        }
+
+        &--upgrade {
+            &>.c-h {
+                color: color('petrol');
+
+                @supports(-webkit-text-fill-color:transparent) {
+                    background-image: linear-gradient(to right, color('petrol'), color('blue'));
+                    -webkit-background-clip: text;
+                    -webkit-text-fill-color: transparent;
+                    display: inline-block;
+
+                    &::selection {
+                        -webkit-background-clip: none;
+                    }
+                }
+            }
+
+            .c-product-comparison-card {
+                border: 1px solid;
+                border-image-slice: 1;
+                border-image-source: linear-gradient(to right, rgba(color('blue'), 0.5), rgba(color('green'), 0.5));
+            }
+        }
+
+    }
+}

package/src/assets/scss/objects/grid.scss

@@ -72,6 +72,12 @@ $grid-gutter-width: 36;
     }
   }
 
+  &--of-two-switch {
+    @media (min-width: 40em) {
+      @include o-grid(2);
+    }
+  }
+
   &--of-two-late {
     @media (min-width: 55em) {
       @include o-grid(2)

package/src/components-full-pages.njk

@@ -6,7 +6,7 @@ pagination:
 permalink: "components/full/{{ component.slug }}/"
 title: 'Components'
 renderData:
-  title: "{{ component.title }}"
+  title: '{{ component.title }}'
 ---
 
 {% extends "layout.njk" %}

package/src/components-pages.njk

@@ -7,7 +7,7 @@ permalink: "components/{{ component.slug }}/"
 title: "Components"
 sidebar: components
 renderData:
-  title: "{{ component.title }}"
+  title: '{{ component.title }}'
 ---
 
 {% extends "library.njk" %}

package/src/index.njk

@@ -8,10 +8,74 @@ renderData:
 ---
 
 {% from "components/prose/macro.njk" import markdown %}
-{% from "components/card/macro.njk" import card %}
-{% from "components/usp/macro.njk" import usp %}
+{% from "components/product-signpost/macro.njk" import productSignpost %}
+
+<div class="o-grid o-grid--of-two u-margin-bottom-l-xl">
+  <div class="u-flow u-pad-right-l">
+    <h2 class="c-usp__title">For developers</h2>
+    <p>If you're developing a web site or app, start here.</p>
+    <ul class="o-grid o-grid--of-two">
+      {{ productSignpost ({
+        title: 'Getting started',
+        description: '<p>Using the Franklin design system</p>',
+        link: '/components',
+        classes: 'c-product-signpost--bordered'
+      }) }}
+      {{ productSignpost ({
+        title: 'Installation',
+        description: '<p>How to consume our CSS & JS via NPM</p>',
+        link: '/components/installation',
+        classes: 'c-product-signpost--bordered'
+      }) }}
+      {{ productSignpost ({
+        title: 'Component library',
+        description: '<p>Styles and reusable building blocks</p>',
+        link: '/components',
+        classes: 'c-product-signpost--bordered'
+      }) }}
+      {{ productSignpost ({
+        title: 'Grid system',
+        description: '<p>How to lay out pages and screens</p>',
+        link: '/components/grid',
+        classes: 'c-product-signpost--bordered'
+      }) }}
+    </ul>
+  </div>
+  <div class="u-flow u-pad-left-l">
+    <h2 class="c-usp__title">For non-developers</h2>
+    <p>Not writing code? Start here.</p>
+    <ul class="o-grid o-grid--of-two">
+      {{ productSignpost ({
+        title: 'Quick start guide',
+        description: '<p>The basics of Malvern Panalytical\'s visual style</p>',
+        link: '/quickstart',
+        classes: 'c-product-signpost--bordered'
+      }) }}
+      {{ productSignpost ({
+        title: 'Color',
+        description: '<p>The Malvern Panalytical brand color palette</p>',
+        link: '/brand/colors',
+        classes: 'c-product-signpost--bordered'
+      }) }}
+      {{ productSignpost ({
+        title: 'Typography',
+        description: '<p>Our guidelines for fonts, weights, and spacing</p>',
+        link: '/brand/typography',
+        classes: 'c-product-signpost--bordered'
+      }) }}
+      {{ productSignpost ({
+        title: 'Tone of voice',
+        description: '<p>Make your writing clearer, simpler, and more inspiring</p>',
+        link: '/content',
+        classes: 'c-product-signpost--bordered'
+      }) }}
+    </ul>
+  </div>
+</div>
+
 
-<div class="o-grid o-grid--of-four">
+
+{# <div class="o-grid o-grid--of-four">
   {{ card({
     theme: {
       layout: 'single',
@@ -91,7 +155,7 @@ renderData:
       }
     }
   }) }}
-</div>
+</div> #}
 
 {% set content %}
 
@@ -99,20 +163,20 @@ renderData:
 
 Franklin is Malvern Panalytical's **design system** for web-based marketing materials.
 
-## What's a design system?
+#### What's a design system?
 
 A set of brand guidelines and a library of HTML/CSS/JS components. Using this system is the quickest and easiest way to ensure your website or web-app is on brand.
 
 The [Design Systems Handbook](https://www.designbetter.co/design-systems-handbook) by InVision is a great (free) way to learn more about design systems.
 
-## Are there other design systems in use?
+#### Are there other design systems in use?
 
 There are two other design systems in use at Malvern Panalytical.
 
 - [Sencillo](https://confluence.systems.mp/pages/viewpage.action?spaceKey=FA&title=MP+Sencillo+-+Design+System) (pronounced *sehn-see-yoh*) is a design system used in Smart Manager, Agrilytics, and other web-based customer-facing software applications.
 - [Malvern Panalytical User Interface Guidelines](https://malvern.sharepoint.com/sites/o365-sw-ebl/SitePages/User%20Interface%20Guidelines/Malvern-Panalytical-User-Interface-Guidelines.aspx) (also known as the XBL) is the Design System that is used in our desktop software, including the new OmniTrust. At the time of writing, it hasn't been rolled out to all platforms but it should be the go to Design System for any new software that we create for our products. It is also backed up with a reusable framework that provides the styles and controls within a fixed layout base application.
 
-## Where does Franklin come in?
+#### Where does Franklin come in?
 
 <div class="ds-table c-table c-table--responsive">
 
@@ -130,12 +194,11 @@ There are two other design systems in use at Malvern Panalytical.
 
 {% set latest %}
 ## Latest updates
-##### V1.1.0 - June 2023
+##### V1.2.13 - November 2023
 
-- Add off-canvas pattern for mobile
-- Update disabled input styles
-- Add header component variants: blog and store
-- Misc. fixes
+- New [product comparison cards](/components/product-comparison-card)
+- New ["Sticky" internal nav](/components/internal-nav-sticky-on-scroll)
+- Updated [comparison table](/components/comparison-table) design
 {% endset %}
 
 <div class="o-grid o-grid--layout o-grid--8/4">