mp-design-system 1.2.26 → 1.2.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mp-design-system",
-  "version": "1.2.26",
+  "version": "1.2.28",
   "description": "",
   "scripts": {
     "dev": "npm-run-all --parallel bundle:*",
@@ -30,7 +30,7 @@
     "parcel": "^2.4.0",
     "require-glob": "^4.1.0",
     "rimraf": "^3.0.2",
-    "sass": "^1.49.10",
+    "sass": "^1.71.0",
     "slugify": "^1.6.5"
   },
   "alias": {

package/src/_includes/components/card/existing-customer-card.config.js

@@ -0,0 +1,51 @@
+const categories = require('../component/categories');
+
+module.exports = {
+  title: 'Existing customer card',
+  category: categories.card,
+  component: {
+    name: 'existing-customer-card',
+    folder: 'card'
+  },
+  preview: 'cards-two',
+  context: {
+    title: 'Mastersizer accessories',
+    lede: 'Configure your Mastersizer for your application and requirements with our range of accessories.',
+    cta: {
+      link: 'https://www.malvernpanalytical.com/en/products/product-range/mastersizer-range/mastersizer-3000#accessories',
+      label: 'View accessories',
+    },
+    image: {
+      src: 'https://p3.aprimocdn.net/malvernpanalytical/37015a45-6002-4cc3-9650-ad9e00b43396/636216816480633919JL_Original%20file.jpg?quality=60',
+      alt: 'Mastersizer accessories',
+    }
+  },
+  variants: [
+    {
+      title: 'Large',
+      preview: 'fixed-width',
+      context: {
+        width: 'large',
+        title: 'Looking for support?',
+        lede: 'Looking for support, manuals or software? Malvern Panalytical will provide the support for your business.',
+        cta: {
+          link: 'https://www.malvernpanalytical.com/en/support/product-support/mastersizer-range',
+          label: 'Get support',
+        },
+        image: {
+          src: 'https://p3.aprimocdn.net/malvernpanalytical/15fab5ad-6222-460d-aa00-ae0e011438ad/i_110714_063_m3kBROCHURE_w_MV_Original.JPG?quality=60',
+          alt: 'Mastersizer accessories',
+        }
+      }
+    }
+  ],
+  props: [
+    {
+      table: [
+        ['title', 'string'],
+        ['description', 'string'],
+        ['url', 'string'],
+      ]
+    }
+  ]
+}

package/src/_includes/components/card/existing-customer-card.njk

@@ -0,0 +1,36 @@
+{%- from "components/twi/macro.njk" import twi -%}
+
+{%- set classNames = "mp c-existing-customer-card" -%}
+
+{%- if params.width -%}
+  {% set classNames = classNames + " c-existing-customer-card--" + params.width %}
+{% endif -%}
+
+<div class="{{ classNames }}">
+  <div class="c-existing-customer-card__wrapper">
+    <div class="c-existing-customer-card__main-wrapper">
+      {% if params.title | length %}
+      <h3 class="c-existing-customer-card__title">
+        <a href="{{ params.cta.link }}" aria-label="{{ params.title }}">
+          {{ params.title }}
+        </a>
+      </h3>
+      {% endif %}
+      {% if params.lede | length %}
+        <p class="c-existing-customer-card__lede">{{ params.lede }}</p>
+      {% endif %}
+      {% if params.cta | length %}
+        {{ twi({
+          label: params.cta.label,
+          classes: 'u-link',
+          icon: 'arrow-right'
+        }) }}
+      {% endif %}
+    </div>
+    {% if params.image | length %}
+      <figure class="c-existing-customer-card__media-wrapper">
+        <img class="c-existing-customer-card__image" src="{{ params.image.src }}" alt="{{ params.image.alt }}" />
+      </figure>
+    {% endif %}
+  </div>
+</div>

package/src/_includes/components/card/existing-customer-card.scss

@@ -0,0 +1,100 @@
+.c-existing-customer-card {
+  background: color('white');
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 0 var(--space-l) var(--space-l) 0;
+    border-color: transparent color('grey', 'step-3') transparent transparent;
+  }
+
+  &:focus-within {
+    outline: 2px solid color('petrol');
+  }
+
+  &:where(:hover, :focus-within) .u-link {
+    text-decoration: underline;
+  }
+  
+  &__wrapper {
+    @include padding('s-m');
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__main-wrapper {
+    width: auto;
+    @extend .u-flow--s-m;
+    text-align: center;
+  }
+  
+  &__title {
+    @include step(2);
+
+    a {
+      @include clickable-parent;
+    }
+  }
+
+  &__lede {
+    line-height: lh('prose');
+  }
+  
+  &__media-wrapper {
+    @include margin-top('m');
+  }
+  
+  &__image {
+    max-height: 180px;
+    @include margin(0, 'auto');
+  }
+}
+
+.c-existing-customer-card--large {
+  @extend .c-existing-customer-card;
+  
+  @media (min-width: 55em) {
+    .c-existing-customer-card {
+      &__wrapper {
+        @include o-grid(2);
+        @include padding-right('l-3xl');
+        @include padding-left('l-3xl');
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+    
+        & > * {
+          @include margin-bottom(0);
+        }
+      }
+    
+      &__main-wrapper {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        text-align: left;
+      }
+    
+      &__title {
+        @include step(3);
+      }
+    
+      &__media-wrapper {
+        @include margin(0);
+      }
+    
+      &__image {
+        max-height: unset;
+        height: auto;
+        width: auto;
+      }
+    }
+  }
+}

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

@@ -4,10 +4,18 @@
   {{ c({ name: 'card' }, params) }}
 {% endmacro %}
 
+{% macro existingCustomerCard(params) %}
+  {{ c({ name: 'existing-customer-card', folder: 'card' }, params) }}
+{% endmacro %}
+
 {% macro industryCard(params) %}
   {{ c({ name: 'industry-card', folder: 'card' }, params) }}
 {% endmacro %}
 
 {% macro productComparisonCard(params) %}
   {{ c({ name: 'product-comparison-card', folder: 'card' }, params) }}
+{% endmacro %}
+
+{% macro searchResultCard(params) %}
+  {{ c({ name: 'search-result-card', folder: 'card' }, params) }}
 {% endmacro %}

package/src/_includes/components/card/search-result-card.config.js

@@ -0,0 +1,29 @@
+const categories = require('../component/categories');
+
+module.exports = {
+  title: 'Search result card',
+  category: categories.card,
+  component: {
+    name: 'search-result-card',
+    folder: 'card'
+  },
+  preview: 'content-width',
+  context: {
+    title: 'Mastersizer range',
+    description: 'The Mastersizer range of laser diffraction particle size analyzers set the standard for delivering rapid, accurate particle size distributions for both wet and dry dispersions.',
+    url: '/en/products/product-range/mastersizer-range',
+    tag: 'Product range'
+  },
+  variants: [
+  ],
+  props: [
+    {
+      table: [
+        ['title', 'string'],
+        ['description', 'string'],
+        ['url', 'string'],
+        ['tag', 'string'],
+      ]
+    }
+  ]
+}

package/src/_includes/components/card/search-result-card.njk

@@ -0,0 +1,29 @@
+{%- from "components/eyebrow/macro.njk" import eyebrow -%}
+
+<article class="mp c-search-result-card">
+  <header class="c-search-result-card__header">
+    {% if params.title | length %}
+      <h2 class="c-search-result-card__title">
+        <a href="{{ params.url }}" aria-label="{{ params.title }}">
+          {{ params.title }}
+        </a>
+      </h2>
+    {% endif %}
+    {% if params.tag | length %}
+      <div class="c-search-result-card__tag">
+        {{ eyebrow({
+          text: params.tag,
+          colour: 'blue'
+        }) }}
+      </div>
+    {% endif %}
+  </header>
+  <div class="c-search-result-card__body">
+    {% if params.description | length %}
+      <p class="c-search-result-card__description">{{ params.description }}</p>
+    {% endif %}
+    {% if params.url | length %}
+      <span class="c-search-result-card__url">{{ params.url }}</span>
+    {% endif %}
+  </div>
+</article>

package/src/_includes/components/card/search-result-card.scss

@@ -0,0 +1,44 @@
+.c-search-result-card {
+  @extend .u-flow--xs;
+  @include padding-top('m');
+  @include padding-bottom('m');
+  position: relative;
+
+  &:focus-within {
+    outline: 2px solid color('petrol');
+  }
+
+  &:where(:hover, :focus-within) .c-search-result-card__title {
+    text-decoration: underline;
+    text-underline-offset: 0.1em;
+  }
+
+  &__header,
+  &__body {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__title {
+    @include step(1);
+
+    a {
+      @include clickable-parent;
+    }
+  }
+
+  &__tag,
+  &__description + &__url {
+    @include margin-bottom('2xs');
+    order: -1;
+  }
+
+  &__body {
+    @extend .o-prose;
+    @include step(-1);
+  }
+
+  &__url {
+    color: color('utility-blue');
+  }
+}

package/src/_includes/components/component/preview-fixed-width.njk

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

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

@@ -0,0 +1,61 @@
+module.exports = {
+    title: 'Eyebrow',
+    component: {
+        name: 'eyebrow',
+    },
+    context: {
+        text: 'Product range',
+        colour: ''
+    },
+    variants: [
+        {
+            title: 'Blue',
+            context: {
+                text: 'Product range',
+                colour: 'blue'
+            }
+        },
+        {
+            title: 'Blue step 2',
+            context: {
+                text: 'Product range',
+                colour: 'blue-step-2'
+            }
+        },
+        {
+            title: 'Grey',
+            context: {
+                text: 'Product range',
+                colour: 'grey'
+            }
+        },
+        {
+            title: 'Petrol',
+            context: {
+                text: 'Product range',
+                colour: 'petrol'
+            }
+        },
+        {
+            title: 'Red',
+            context: {
+                text: 'Product range',
+                colour: 'red'
+            }
+        },
+        {
+            title: 'Utility blue',
+            context: {
+                text: 'Product range',
+                colour: 'utility-blue'
+            }
+        },
+        {
+            title: 'Utility orange',
+            context: {
+                text: 'Product range',
+                colour: 'utility-orange'
+            }
+        }
+    ]
+}

package/src/_includes/components/eyebrow/eyebrow.njk

@@ -0,0 +1,7 @@
+{%- set classNames = "mp c-eyebrow" -%}
+
+{%- if params.colour -%}
+  {% set classNames = classNames + " c-eyebrow--" + params.colour %}
+{% endif -%}
+
+<span class="{{ classNames }}">{{ params.text }}</span>

package/src/_includes/components/eyebrow/eyebrow.scss

@@ -0,0 +1,39 @@
+.c-eyebrow {
+  background-color: color('green');
+  color: color('white');  
+  @include padding('3xs', 'xs');
+  border-radius: 2em;
+  display: inline-block;
+  @include step(-1);
+  letter-spacing: -.01em;
+
+  &--blue {
+    background-color: color('blue');
+  }
+
+  &--blue-step-2 {
+    background-color: color('blue', 'step-2');
+    color: color('petrol');
+  }
+
+  &--grey {
+    background-color: color('grey');
+  }
+
+  &--petrol {
+    background-color: color('petrol');
+  }
+
+  &--red {
+    background-color: color('red');
+  }
+
+  &--utility-blue {
+    background-color: color('utility-blue');
+  }
+
+  &--utility-orange {
+    background-color: color('utility-orange');
+    color: color('grey');
+  }
+}

package/src/_includes/components/eyebrow/macro.njk

@@ -0,0 +1,5 @@
+{%- from "components/component/component.njk" import c -%}
+
+{%- macro eyebrow(params) -%}
+  {{ c({ name: 'eyebrow' }, params) }}
+{%- endmacro -%}

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

@@ -22,7 +22,9 @@ module.exports = {
       context: {
         classes: 'c-usp c-usp--center',
         content: false,
-        icon: '<svg width="73" height="73" viewBox="0 0 73 73" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24.1035 27.9854C24.1035 34.6127 29.4761 39.9854 36.1035 39.9854C42.7308 39.9854 48.1035 34.6127 48.1035 27.9854C48.1035 21.3579 42.7308 15.9854 36.1035 15.9854C29.4761 15.9854 24.1035 21.3579 24.1035 27.9854Z" fill="#00A2C2"/><circle cx="36.1035" cy="27.9854" r="22" stroke="#333333" stroke-width="4"/><path d="M22.3356 45.4453V67.5621C22.3356 67.5726 22.3471 67.579 22.356 67.5735L35.1829 59.5477C35.6155 59.277 36.1647 59.277 36.5974 59.5477L49.4243 67.5735C49.4331 67.579 49.4447 67.5726 49.4447 67.5621V45.4453" stroke="#333333" stroke-width="4"/></svg>'
+        icon: {
+          url: 'https://p3.aprimocdn.net/malvernpanalytical/7da9e7e5-edca-4d49-bc7f-b11401123c52/icon-stopwatch_Original%20file.svg'
+        }
       }
     },
     {
@@ -45,7 +47,8 @@ module.exports = {
         ['content', 'html', 'HTML passed to the prose field'],
         ['link', 'string (deprecated)'],
         ['eyebrow', 'string'],
-        ['icon', 'svg', 'HTML/SVG which is output raw']
+        ['icon.svg', 'svg', 'HTML/SVG which is output raw'],
+        ['icon.url', 'string', 'image url']
       ]
     }
   ]

package/src/_includes/components/usp/usp.md

@@ -1,3 +1,81 @@
+# Blank HTML templates
+
+{% accordion %}
+
+{% accordionItem "Grid of four, icon & text, left-aligned" %}
+
+```html
+<div class="o-grid o-grid--of-four">
+
+  <!-- First USP block: duplicate this -->
+  <div class="mp c-usp">
+    <div class="u-flow">
+      <div class="c-usp__icon">
+        <img src="https://p3.aprimocdn.net/malvernpanalytical/etc" />
+      </div>
+      <h3 class="c-h c-h--step-1 c-usp__title">Handles the toughest conditions</h3>
+      <div class="mp o-prose u-step--1">
+        <p>FORJ is designed for less thermal stress and reduced risk of contamination - which means low maintenance and high productivity.</p>
+      </div>
+    </div>
+  </div>
+
+  <!-- etc. -->
+
+</div>
+```
+
+{% endaccordionItem %}
+
+{% accordionItem "Grid of three, eyebrow & text, left-aligned" %}
+
+```html
+<div class="o-grid o-grid--of-three">
+
+  <!-- First USP block: duplicate this -->
+  <div class="mp c-usp">
+    <div class="u-flow ">
+      <span class="c-usp__eyebrow">Greater flexibility</span>
+      <h3 class="c-h c-h--step-2 c-usp__title">Impressive particle sizing performance</h3>
+      <div class="mp o-prose u-step--1">
+        <p>High sample throughput and a measurement size range from 10nm to 3.5mm</p>
+      </div>
+    </div>
+  </div>
+
+  <!-- etc. -->
+
+</div>
+```
+
+{% endaccordionItem %}
+
+  {% accordionItem "Grid of seven (or more), icons only, centered" %}
+
+```html
+<div class="o-grid o-grid--of-three u-justify-center">
+
+  <!-- First USP block: duplicate this -->
+  <div class="mp c-usp c-usp c-usp--center">
+    <div class="u-flow u-text-center">
+      <div class="c-usp__icon">
+        <img src="https://p3.aprimocdn.net/malvernpanalytical/etc" />
+      </div>
+      <h3 class="c-h c-h--step-1 c-usp__title">Handles the toughest conditions</h3>
+    </div>
+  </div>
+
+  <!-- etc. -->
+
+</div>
+```
+
+{% endaccordionItem %}
+
+{% endaccordion %}
+
+---
+
 A USP can include a few elements:
 - Icon (optional)
 - Eyebrow (optional)
@@ -17,5 +95,7 @@ When using USPs, please follow these guidelines:
   - If there's no body text or eyebrow, the USP may be centered
 - **Font size**
   - Body text font size is always step -1
-  - Title text is step-2 when using a three-column grid
-  - or step-1 when using a four-column grid
+  - Title text is step 2 when using a three-column grid
+  - or step 1 when using a four-column grid
+
+---

package/src/_includes/components/usp/usp.njk

@@ -21,7 +21,13 @@
       </span>
     {% endif %}
     {% if params.icon %}
-      <div class="c-usp__icon">{{params.icon | safe}}</div>
+      <div class="c-usp__icon">
+        {% if params.icon.svg %}
+          {{params.icon.svg | safe}}
+        {% elseif params.icon.url %}
+          <img src="{{params.icon.url}}"/>
+        {% endif %}
+      </div>
     {% endif %}
     <h3 class="c-h {{size}} c-usp__title">{{ params.title }}</h3>
     {% if params.content %}

package/src/_includes/components/usp/usp.scss

@@ -44,8 +44,8 @@
     @include space('width','l');
 
     .c-usp--center & {
-      @include space('height','2xl');
-      @include space('width','2xl');
+      @include space('height','xl');
+      @include space('width','xl');
     }
   }
 

package/src/_includes/layout.njk

@@ -16,8 +16,6 @@
 		<meta property="og:image:alt" content="{{ config.name }}" />
 		<meta name="twitter:image" content="{{ config.openGraphImage }}" />
     <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" />

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

@@ -4,10 +4,13 @@
 @import '~comp/button/button.scss';
 @import '~comp/campaign/campaign.scss';
 @import '~comp/card/card.scss';
+@import '~comp/card/existing-customer-card.scss';
 @import '~comp/card/industry-card.scss';
 @import '~comp/card/product-comparison-card.scss';
+@import '~comp/card/search-result-card.scss';
 @import '~comp/comparison-table/comparison-table.scss';
 @import '~comp/embed/embed.scss';
+@import '~comp/eyebrow/eyebrow.scss';
 @import '~comp/featured-article-card/featured-article-card.scss';
 @import '~comp/features-table/features-table.scss';
 @import '~comp/filter-search/filter-search.scss';

package/src/assets/scss/foundations/typography.scss

@@ -136,8 +136,8 @@ $f-max-width: 1332;
   font-style:  normal;
   font-weight: 400;
   font-display: swap;
-  src: url("../fonts/Inter-Regular.woff2") format("woff2"),
-       url("../fonts/Inter-Regular.woff") format("woff");
+  src: #{'../fonts/inter-regular.woff2'} format("woff2"),
+       #{'../fonts/inter-regular.woff'} format("woff");
 }
 
 @font-face {
@@ -145,8 +145,8 @@ $f-max-width: 1332;
   font-style:  normal;
   font-weight: 600;
   font-display: swap;
-  src: url('../fonts/Inter-SemiBold.woff2') format("woff2"),
-       url('../fonts/Inter-SemiBold.woff') format("woff");
+  src: #{'../fonts/inter-semibold.woff2'} format("woff2"),
+       #{'../fonts/inter-semibold.woff'} format("woff");
 }
 
 @font-face {
@@ -154,6 +154,6 @@ $f-max-width: 1332;
   font-style:  normal;
   font-weight: 700;
   font-display: swap;
-  src: url('../fonts/Inter-Bold.woff2') format("woff2"),
-       url('../fonts/Inter-Bold.woff') format("woff");
+  src: #{'../fonts/inter-bold.woff2'} format("woff2"),
+       #{'../fonts/inter-bold.woff'} format("woff");
 }

package/src/assets/scss/tools/index.scss

@@ -152,4 +152,20 @@
       hyphens: auto;
     }
   }
+}
+
+@mixin clickable-parent {
+  position: static;
+
+  &:focus {
+    outline: 0;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    cursor: pointer !important;
+    display: flex;
+  }
 }

package/src/assets/scss/utilities/divider.scss

@@ -0,0 +1,6 @@
+.u-divider {
+  & > * + * {
+    border-top: 1px solid;
+    border-top-color: color('grey', 'step-2');
+  }
+}