mp-design-system 1.2.28 → 1.2.30

package/package.json

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

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

@@ -10,9 +10,9 @@ module.exports = {
   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: {
-      link: 'https://www.malvernpanalytical.com/en/products/product-range/mastersizer-range/mastersizer-3000#accessories',
       label: 'View accessories',
     },
     image: {
@@ -27,9 +27,9 @@ module.exports = {
       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: {
-          link: 'https://www.malvernpanalytical.com/en/support/product-support/mastersizer-range',
           label: 'Get support',
         },
         image: {

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

@@ -11,9 +11,13 @@
     <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>
+        {% 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 %}

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

@@ -12,10 +12,18 @@
   {{ 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>
+

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

@@ -0,0 +1,88 @@
+.c-product-card {
+  background: color('white');
+  display: flex;
+  flex-flow: column;
+  border: 1px solid color('petrol', 'step-2');
+
+  &__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;
+  }
+
+  &__lede {
+    @extend .u-step--1;
+  }
+
+  &__footer {
+    @include margin-top('auto');
+    @include padding-top('s');
+    display: flex;
+    flex-flow: row;
+    flex-wrap: wrap;
+    gap: var(--space-2xs);
+    
+    & > * {
+      flex-grow: 1;
+    }
+  }
+
+  &__image {
+    height: 10em;
+    order: -1;
+
+    img {
+      height: 100%;
+      width: 100%;
+      aspect-ratio: 16/9;
+      object-fit: cover;
+    }
+  }
+}
+
+.c-product-card--features-list {
+  .c-product-card {
+    &__heading {
+      @extend .c-h--step-1;
+    }
+
+    &__lede {
+      @extend .u-step-0;
+    }
+
+    &__features-list {
+      @include margin-top('2xs');
+      list-style: none;
+
+      &-heading {
+        @include margin-top('s');
+        font-weight: weight("bold");
+      }
+
+      & > * + * {
+        @include margin-top('3xs');
+      }
+    }
+
+    &__feature {
+      &--tick {
+        svg {
+          color: color('green');
+        }
+      }
+
+      &--cross {
+        color: color('grey', 'step-2');
+      }
+    }
+  }
+}

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

@@ -11,7 +11,7 @@ module.exports = {
   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',
+    link: '/en/products/product-range/mastersizer-range',
     tag: 'Product range'
   },
   variants: [
@@ -21,7 +21,7 @@ module.exports = {
       table: [
         ['title', 'string'],
         ['description', 'string'],
-        ['url', 'string'],
+        ['link', 'string'],
         ['tag', 'string'],
       ]
     }

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

@@ -4,9 +4,13 @@
   <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>
+        {% if params.link | length %}
+          <a href="{{ params.link }}" aria-label="{{ params.title }}">
+            {{ params.title }}
+          </a>
+          {% else %}
+            {{ params.title }}
+        {% endif %}
       </h2>
     {% endif %}
     {% if params.tag | length %}
@@ -22,8 +26,8 @@
     {% 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>
+    {% if params.link | length %}
+      <span class="c-search-result-card__url">{{ params.link }}</span>
     {% endif %}
   </div>
 </article>

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

@@ -8,7 +8,7 @@
     outline: 2px solid color('petrol');
   }
 
-  &:where(:hover, :focus-within) .c-search-result-card__title {
+  &:where(:hover) .c-search-result-card__title {
     text-decoration: underline;
     text-underline-offset: 0.1em;
   }
@@ -40,5 +40,9 @@
 
   &__url {
     color: color('utility-blue');
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
   }
 }