mp-design-system 1.2.27 → 1.2.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mp-design-system",
-  "version": "1.2.27",
+  "version": "1.2.30",
   "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/button/button.scss

@@ -149,7 +149,7 @@
 
   &--small {
     @include step(-1);
-    padding: 0.5em 1em;
+    padding: 0.75em 1em;
   }
 
   &--loading {

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',
+    link: 'https://www.malvernpanalytical.com/en/products/product-range/mastersizer-range/mastersizer-3000#accessories',
+    lede: 'Configure your Mastersizer for your application and requirements with our range of accessories.',
+    cta: {
+      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?',
+        link: 'https://www.malvernpanalytical.com/en/support/product-support/mastersizer-range',
+        lede: 'Looking for support, manuals or software? Malvern Panalytical will provide the support for your business.',
+        cta: {
+          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,40 @@
+{%- 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">
+        {% if params.link | length %}
+          <a href="{{ params.link }}" aria-label="{{ params.title }}">
+            {{ params.title }}
+          </a>
+          {% else %}
+            {{ params.title }}
+        {% endif %}
+      </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/industry-card.config.js

@@ -9,13 +9,36 @@ module.exports = {
   },
   preview: 'cards-three',
   context: {
-    title: 'Building materials',
+    classes: '',
+    title: 'Mining and minerals',
     link: '#',
+    description: 'Explore the world of Iron, Base metals, Bauxite, Clay, Coal, Industrial Minerals and Precious Metals in 3D.    ',
     image: {
-      src: '/static/img/sector-1.jpg',
+      src: '/static/img/sector-3.jpg',
       alt: ''
-    }
+    },
+    footer: {
+      button: {
+        label: 'View industry'
+      }
+    },
   },
+  variants: [
+    {
+      title: 'Heading only',
+      context: {
+        classes: 'c-industry-card--heading',
+        title: 'Zetasizer Pro',
+        link: '#',
+        description: '',
+        image: {
+          src: '/static/img/range-product-1.jpg',
+          alt: ''
+        },
+        footer: {}
+      },
+    }
+  ],
   props: [
     {
       table: [

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

@@ -1,8 +1,34 @@
-<article class="mp c-industry-card">
-  <a class="c-industry-card__link u-flow--xs" href="{{ params.link }}">
+{%- from "components/twi/macro.njk" import twi -%}
+
+{%- set classes = 'mp c-industry-card' -%}
+
+{%- if params.classes -%}{% set classes = classes + ' ' + params.classes %}{%- endif -%}
+
+<article class="{{ classes }}" role="article" aria-label="Industry card">
+  <div class="c-industry-card__body">
+    {% if params.title | length %}
+      <h3 class="c-industry-card__heading">
+        {% if params.link | length %}
+          <a href="{{ params.link }}" aria-label="{{ params.title }}">
+            {{ params.title }}
+          </a>
+        {% else %}
+          {{ params.title }}
+        {% endif %}
+      </h3>
+    {% endif %}
+    {% if params.description | length %}
+      <p class="c-industry-card__lede">{{ params.description }}</p>
+    {% endif %}
+    {% if params.footer | length %}
+      <footer class="c-industry-card__footer">
+        {{ twi({ label: params.footer.button.label, icon: 'arrow-right', classes: 'c-twi--small u-link' }) }}
+      </footer>
+    {% endif %}
+  </div>
+  {% if params.image | length %}
     <figure class="c-industry-card__image">
-      <img class="u-2/1" src="{{ params.image.src }}" alt="{{ params.image.alt or params.title }}" />
+      <img src="{{ params.image.src }}" alt="{{ params.image.alt or params.title }}" />
     </figure>
-    <h3 class="c-h c-h--reset">{{ params.title }}</h3>
-  </a>
-</article>
+  {% endif %}
+</article>

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

@@ -1,15 +1,85 @@
 .c-industry-card {
-  color: color('utility-blue');
+  background: color('white');
+  display: flex;
+  flex-flow: column;
+  border: none;
+  border: 1px solid color('petrol', 'step-2');
+  position: relative;
 
-  &__link {
-    display: block;
+  &:focus-within {
+    outline: 2px solid color('petrol');
   }
 
-  &:hover .c-h--reset {
+  &:where(:hover) .c-twi.u-link {
     text-decoration: underline;
+    text-underline-offset: 0.1em;
   }
 
-  img {
-    width: 100%;
+  &__body {
+    @include padding('s-m');
+    display: flex;
+    flex-flow: column;
+    flex-grow: 1;
+    
+    & > * + * {
+      @include margin-top('xs');
+    }
+  }
+
+  &__heading {
+    @extend .c-h, .c-h--step-0;
+
+    a {
+      @include clickable-parent;
+    }
+  }
+
+  &__lede {
+    @extend .u-step--1;
+  }
+
+  &__footer {
+    @include margin-top('auto');
+    @include padding-top('s');
+  }
+
+  &__image {
+    max-height: 10em;
+    order: -1;
+
+    img {
+      height: 100%;
+      width: 100%;
+      aspect-ratio: 2/1;
+      object-fit: cover;
+    }
   }
 }
+
+.c-industry-card--heading {
+  border: none;
+  
+  .c-industry-card {
+    &__heading {
+      color: color('utility-blue');
+      @include margin-top('xs');
+      font-weight: normal;
+    }
+
+    &__body {
+      @include padding(0);
+    }
+
+    &__image {
+      height: unset;
+    }
+  }
+
+  &:where(:hover) {
+    .c-industry-card {
+      &__heading {
+        text-decoration: underline;
+      }
+    }
+  }
+}

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

@@ -4,14 +4,26 @@
   {{ 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) }}
+{% macro measurementTypeCard(params) %}
+  {{ c({ name: 'measurement-type-card', folder: 'card' }, params) }}
+{% endmacro %}
+
+{% macro productCard(params) %}
+  {{ c({ name: 'product-card', folder: 'card' }, params) }}
 {% endmacro %}
 
 {% macro searchResultCard(params) %}
   {{ c({ name: 'search-result-card', folder: 'card' }, params) }}
+{% endmacro %}
+
+{% macro technologyCard(params) %}
+  {{ c({ name: 'technology-card', folder: 'card' }, params) }}
 {% endmacro %}

package/src/_includes/components/card/measurement-type-card.config.js

@@ -0,0 +1,35 @@
+const categories = require('../component/categories');
+
+module.exports = {
+  title: 'Measurement type card',
+  category: categories.card,
+  component: {
+    name: 'measurement-type-card',
+    folder: 'card'
+  },
+  preview: 'cards-three',
+  context: {
+    title: 'Particle size',
+    link: '#',
+    description: 'Measurement of particle size distributions is routinely carried out across a wide range of industries.',
+    image: {
+      src: '/static/img/range-product-1.jpg',
+      alt: ''
+    },
+    footer: {
+      button: {
+        label: 'View measurement type'
+      }
+    }
+  },
+  variants: [],
+  props: [
+    {
+      table: [
+        ['title', 'string'],
+        ['link', 'string'],
+        ['image', 'object', 'Image object']
+      ]
+    }
+  ]
+}

package/src/_includes/components/card/measurement-type-card.njk

@@ -0,0 +1,35 @@
+{%- from "components/twi/macro.njk" import twi -%}
+
+{%- set classes = 'mp c-measurement-type-card' -%}
+
+{%- if params.classes -%}{% set classes = classes + ' ' + params.classes %}{%- endif -%}
+
+<article class="{{ classes }}" role="article" aria-label="Measurement type card">
+  <div class="c-measurement-type-card__body">
+    {% if params.title | length %}
+      <h3 class="c-measurement-type-card__heading">
+        {% if params.link | length %}
+          <a href="{{ params.link }}" aria-label="{{ params.title }}">
+            {{ params.title }}
+          </a>
+          {% else %}
+            {{ params.title }}
+        {% endif %}
+      </h3>
+    {% endif %}
+    {% if params.description | length %}
+      <p class="c-measurement-type-card__lede">{{ params.description }}</p>
+    {% endif %}
+    {% if params.footer.button | length %}
+      <footer class="c-measurement-type-card__footer">
+        {{ twi({ label: params.footer.button.label, icon: 'arrow-right', classes: 'c-twi--small u-link' }) }}
+      </footer>
+    {% endif %}
+  </div>
+  {% if params.image | length %}
+    <figure class="c-measurement-type-card__image">
+      <img src="{{ params.image.src }}" alt="{{ params.image.alt or params.title }}" />
+    </figure>
+  {% endif %}
+</article>
+

package/src/_includes/components/card/measurement-type-card.scss

@@ -0,0 +1,56 @@
+.c-measurement-type-card {
+  background: color('white');
+  display: flex;
+  flex-flow: column;
+  border: 1px solid color('petrol', 'step-2');
+  position: relative;
+
+  &:focus-within {
+    outline: 2px solid color('petrol');
+  }
+
+  &:where(:hover) .c-twi.u-link {
+    text-decoration: underline;
+    text-underline-offset: 0.1em;
+  }
+
+  &__body {
+    @include padding('s-m');
+    display: flex;
+    flex-flow: column;
+    flex-grow: 1;
+    
+    & > * + * {
+      @include margin-top('xs');
+    }
+  }
+
+  &__heading {
+    @extend .c-h, .c-h--step-0;
+
+    a {
+      @include clickable-parent;
+    }
+  }
+
+  &__lede {
+    @extend .u-step--1;
+  }
+
+  &__footer {
+    @include margin-top('auto');
+    @include padding-top('s');
+  }
+
+  &__image {
+    height: 10em;
+    order: -1;
+
+    img {
+      height: 100%;
+      width: 100%;
+      aspect-ratio: 16/9;
+      object-fit: cover;
+    }
+  }
+}

package/src/_includes/components/card/{product-comparison-card.config.js → product-card.config.js}

@@ -1,10 +1,10 @@
 const categories = require('../component/categories');
 
 module.exports = {
-  title: 'Product comparison card',
+  title: 'Product card',
   category: categories.card,
   component: {
-    name: 'product-comparison-card',
+    name: 'product-card',
     folder: 'card'
   },
   preview: 'cards-three',
@@ -15,46 +15,27 @@ module.exports = {
       src: '/static/img/range-product-1.jpg',
       alt: ''
     },
-    features: [
-      {
-        icon: 'cross',
-        label: 'Classic 90° DLS'
-      },
-      {
-        icon: 'tick',
-        label: 'Dynamic light scattering'
-      },
-      {
-        icon: 'tick',
-        label: 'Static light scattering'
-      },
-      {
-        icon: 'tick',
-        label: 'Non-Invasive Back Scatter DLS'
-      },
-      {
-        icon: 'cross',
-        label: 'Multi-Angle Dynamic Light Scattering'
-      }
-    ],
     footer: {
       buttons: [
         {
           link: '#',
-          label: 'More details'
+          label: 'More details',
+          classes: 'c-button--small'
         },
         {
           link: '#',
-          label: 'Request a quote'
+          label: 'Request a quote',
+          classes: 'c-button--small'
         }
       ]
     }
   },
   variants: [
     {
-      title: 'Without features list',
+      title: 'With features list',
       preview: 'cards-three',
       context: {
+        classes: 'c-product-card--features-list',
         title: 'Zetasizer Pro',
         description: 'The Zetasizer Pro is your go-to instrument to measure a wide range of sample types and concentrations.',
         image: {
@@ -62,6 +43,26 @@ module.exports = {
           alt: ''
         },
         features: [
+          {
+            icon: 'cross',
+            label: 'Classic 90° DLS'
+          },
+          {
+            icon: 'tick',
+            label: 'Dynamic light scattering'
+          },
+          {
+            icon: 'tick',
+            label: 'Static light scattering'
+          },
+          {
+            icon: 'tick',
+            label: 'Non-Invasive Back Scatter DLS'
+          },
+          {
+            icon: 'cross',
+            label: 'Multi-Angle Dynamic Light Scattering'
+          }
         ],
         footer: {
           buttons: [

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

@@ -0,0 +1,50 @@
+{%- from "components/button/macro.njk" import button -%}
+{%- from "components/twi/macro.njk" import twi -%}
+
+{%- set classes = 'mp c-product-card' -%}
+
+{%- if params.classes -%}{% set classes = classes + ' ' + params.classes %}{%- endif -%}
+
+<article class="{{ classes }}" role="article" aria-label="Product card">
+  <div class="c-product-card__body">
+    {% if params.title | length %}
+      <h3 class="c-product-card__heading">
+        {{ params.title }}
+      </h3>
+    {% endif %}
+    {% if params.description | length %}
+      <p class="c-product-card__lede">{{ params.description }}</p>
+    {% endif %}
+    {% if params.features | length %}
+      <p class="c-product-card__features-list-heading">Features include</p>
+      <ul class="c-product-card__features-list">
+        {% for feature in params.features %}
+          <li class="c-product-card__feature--{{ feature.icon }}">
+            {{ twi({
+              label: feature.label,
+              icon: feature.icon
+            }) }}
+          </li>
+        {% endfor %}
+      </ul>
+    {% endif %}
+    {% if params.footer.buttons | length %}
+      <footer class="c-product-card__footer">
+        {% for item in params.footer.buttons %}
+          {{ button({
+            link: item.link,
+            label: item.label,
+            classes: item.classes,
+            colour: 'outline-green' if loop.index0 == 0 else 'green'
+          }) }}
+        {% endfor %}
+      </footer>
+    {% endif %}
+  </div>
+  {% if params.image | length %}
+    <figure class="c-product-card__image">
+      <img src="{{ params.image.src }}" alt="{{ params.image.alt or params.title }}" />
+    </figure>
+    {% endif %}
+</article>
+