mp-design-system 1.2.64 → 1.2.66

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

@@ -1,51 +0,0 @@
-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

@@ -1,40 +0,0 @@
-{%- 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

@@ -1,100 +0,0 @@
-.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

@@ -1,51 +0,0 @@
-const categories = require('../component/categories');
-
-module.exports = {
-  title: 'Industry card',
-  category: categories.card,
-  component: {
-    name: 'industry-card',
-    folder: 'card'
-  },
-  preview: 'cards-three',
-  context: {
-    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-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: [
-        ['title', 'string'],
-        ['link', 'string'],
-        ['image', 'object', 'Image object']
-      ]
-    }
-  ]
-}

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

@@ -1,34 +0,0 @@
-{%- 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 src="{{ params.image.src }}" alt="{{ params.image.alt or params.title }}" />
-    </figure>
-  {% endif %}
-</article>

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

@@ -1,85 +0,0 @@
-.c-industry-card {
-  background: color('white');
-  display: flex;
-  flex-flow: column;
-  border: none;
-  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 {
-    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

@@ -1,29 +0,0 @@
-{% from "components/component/component.njk" import c %}
-
-{% macro card(params) %}
-  {{ 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 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

@@ -1,35 +0,0 @@
-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

@@ -1,35 +0,0 @@
-{%- 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

@@ -1,56 +0,0 @@
-.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-card.config.js

@@ -1,91 +0,0 @@
-const categories = require('../component/categories');
-
-module.exports = {
-  title: 'Product card',
-  category: categories.card,
-  component: {
-    name: 'product-card',
-    folder: 'card'
-  },
-  preview: 'cards-three',
-  context: {
-    title: 'Zetasizer Pro',
-    description: 'The Zetasizer Pro is your go-to instrument to measure a wide range of sample types and concentrations.',
-    image: {
-      src: '/static/img/range-product-1.jpg',
-      alt: ''
-    },
-    footer: {
-      buttons: [
-        {
-          link: '#',
-          label: 'More details',
-          classes: 'c-button--small'
-        },
-        {
-          link: '#',
-          label: 'Request a quote',
-          classes: 'c-button--small'
-        }
-      ]
-    }
-  },
-  variants: [
-    {
-      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: {
-          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'
-            },
-            {
-              link: '#',
-              label: 'Request a quote'
-            }
-          ]
-        }
-      },
-    }
-  ],
-  props: [
-    {
-      table: [
-        ['title', 'string'],
-        ['link', 'string'],
-        ['image', 'object', 'Image object']
-      ]
-    }
-  ]
-}

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

@@ -1,58 +0,0 @@
-{%- from "components/button/macro.njk" import button -%}
-{%- from "components/twi/macro.njk" import twi -%}
-{%- from "components/prose/macro.njk" import prose -%}
-
-{%- 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.description | length %}
-        {{ prose({
-            wrap: '',
-            classes: 'u-step--1',
-            content: params.description
-        }) }}
-    {% 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>
-