mp-design-system 1.2.63 → 1.2.65

package/src/_includes/components/post-meta/post-meta.njk

@@ -1,16 +0,0 @@
-{%- from "components/series/macro.njk" import series -%}
-
-<div class="mp c-post-meta {{ "u-link-inside" if params.author }}">
-  {% if params.series %}
-    {{ series({
-      links: params.series
-    }) }}
-  {% endif %}
-  {% if params.author %}
-    <p>By <a href="{{ params.author.link }}">{{ params.author.label | safe }}</a>, Wednesday 6 January 2021</p>
-  {% else %}
-    {{ params.content | safe }}
-  {% endif %}
-</div>
-
-{# test #}

package/src/_includes/components/post-meta/post-meta.scss

@@ -1,7 +0,0 @@
-.c-post-meta {
-  color: color('grey', 'step-1');
-  border-bottom: 1px solid color('petrol', 'step-2');
-  border-top: 1px solid color('petrol', 'step-2');
-  padding: 1.25rem 0;
-  @include flow('xs');
-}

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

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

package/src/_includes/components/product-card/product-card.config.js

@@ -1,84 +0,0 @@
-const categories = require('../component/categories');
-
-module.exports = {
-  title: 'NEW Product card',
-  component: {
-      name: 'product-card',
-  },
-  category: categories.card,
-  context: {
-    type: 'product',
-    theme: 'bordered',
-    size: 'medium',
-    header: {
-      title: 'Product card medium',
-      subtitle: 'Lorem ipsum dolor sit amet'
-    },
-    body: {
-      content: `<p>Nam duis leo phasellus quisque ac a volutpat euismod ultrices condimentum sociosqu et natoque volutpat eros.</p>`
-    },
-    footer: {
-      buttons: [
-        {
-          link: '#',
-          label: 'View product'
-        },
-        {
-          link: '#',
-          label: 'Request a quote',
-          colour: 'outline-green'
-        }
-      ]
-    },
-    image: {
-      src: '/static/img/aeris.jpg',
-      alt: 'Alt text'
-    }
-  },
-  variants: [
-    {
-      title: 'With features list',
-      context: {
-        list: [
-          {
-            label: 'Classic 90° DLS',
-            icon: 'cross',
-            classes: 'c-twi--grey'
-          },
-          {
-            label: 'Dynamic light scattering',
-            icon: 'tick',
-            classes: 'c-twi--green'
-          },
-          {
-            label: 'Static light scattering',
-            icon: 'tick',
-            classes: 'c-twi--green'
-          },
-          {
-            label: 'Non-invasive back scatter DLS',
-            icon: 'tick',
-            classes: 'c-twi--green'
-          },
-          {
-            label: 'Multi-angle dynamic light scattering',
-            icon: 'cross',
-            classes: 'c-twi--grey'
-          }
-        ],
-      }
-    },
-    {
-      title: 'Small',
-      context: {
-        size: 'small',
-        url: '#',
-        footer: false,
-        header: {
-          title: 'Product card small',
-          subtitle: 'Lorem ipsum dolor sit amet'
-        },
-      },
-    },
-  ]
-}

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

@@ -1 +0,0 @@
-{% extends "components/card-new/card-new.njk" %}

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

@@ -1,36 +0,0 @@
-// Extend the basic card scss
-@import '../card-new/card-new.scss';
-
-// Complex CSS to make images work in both portrait and landscape
-// Separate it out into a li'l mixin
-@mixin productCardImage($size: 's-m') {
-    @include space('top', $size);
-    @include space('left', $size);
-    position: absolute;
-    // height: 100%;
-    height: calc(100% - (var(--space-#{$size}) *2) );
-    // width: 100%;
-    width: calc(100% - var(--space-#{$size}));
-}
-
-.c-card-new--product {
-    .c-card-new__image {
-        img {
-            margin-inline: auto;
-            object-fit: contain;
-            object-position: top center;
-        }
-
-        @container card (width > #{$card-m}) {
-            flex-basis: 50%;
-            
-            img {
-                @include productCardImage('s-m');
-
-                .c-card-new--small & {
-                    @include productCardImage('xs')
-                }
-            }
-        }
-    }
-}

package/src/_includes/components/product-signpost/macro.njk

@@ -1,3 +0,0 @@
-{% macro productSignpost(params) %}
-  {%- include "./product-signpost.njk" -%}
-{% endmacro %}

package/src/_includes/components/product-signpost/product-signpost.config.js

@@ -1,43 +0,0 @@
-const categories = require('../component/categories');
-
-module.exports = {
-  title: 'Product signpost',
-  category: categories.card,
-  component: {
-    name: 'product-signpost'
-  },
-  context: {
-    title: 'Particle size analyzers',
-    description: '<p>The world’s leading particle size analyzers</p>',
-    image: {
-      src: '/static/img/products-4.jpg',
-      alt: 'Product image alt'
-    },
-    link: ''
-  },
-  variants: [
-    {
-      title: 'Bordered',
-      context: {
-        classes: 'c-product-signpost--bordered'
-      }
-    }
-  ],
-  props: [
-    {
-      table: [
-        ['title', 'string'],
-        ['description', 'string'],
-        ['image', 'object', 'Image object'],
-        ['link', 'string'],
-        ['classes', 'string']
-      ]
-    },
-    {
-      title: 'CSS modifiers',
-      table: [
-        ['c-product-signpost--bordered', '', 'Add a border and padding']
-      ]
-    }
-  ]
-}

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

@@ -1,16 +0,0 @@
-<article class="mp c-product-signpost {{ params.classes }}">
-  <a class="c-product-signpost__link" href="{{ params.link }}">{{ params.title }}</a>
-  <div class="c-product-signpost__wrapper">
-    {% if params.image.src %}
-      <figure class="c-product-signpost__image">
-        <img src="{{ params.image.src }}" alt="{{ params.image.alt }}" />
-      </figure>
-    {% endif %}
-    <div class="u-flow--3xs">
-      <h2 class="c-h c-h--step-0">{{ params.title }}</h2>
-      <div class="o-prose">
-        {{ params.description | safe }}
-      </div>
-    </div>
-  </div>
-</article>

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

@@ -1,61 +0,0 @@
-.c-product-signpost {
-  position: relative;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  max-width: 440px;
-  @include padding("2xs");
-  word-break: break-word;
-
-  &__link {
-    @extend .u-fill, .u-fill--link;
-  }
-
-  &:hover .c-h {
-    text-decoration: underline;
-  }
-
-  &__image {
-    margin-bottom: 0;
-    // @include padding-right("s");
-    flex-shrink: 0;
-  }
-
-  &__content {
-    flex-grow: 1;
-  }
-
-  &__wrapper {
-    display: flex;
-    flex-direction: column;
-    @include space('gap', 'xs-s');
-  }
-
-  .o-prose p {
-    line-height: lh();
-    @include step(-1);
-  }
-
-  &--bordered {
-    @include padding("xs");
-    border: 1px solid color("petrol", "step-2");
-  }
-
-  &--float-right {
-    @extend .u-float-right;
-    @include margin(0, 0, "xs-l", "xs-l");
-    min-width: 9rem;
-    width: 30%;
-  }
-
-  @media (min-width: 55em) {
-    &--float-right,
-    &__image {
-      width: 40%;
-    }
-
-    &__wrapper {
-      flex-direction: row;
-    }
-  }
-}

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

@@ -1,11 +0,0 @@
-{% from "components/component/component.njk" import c %}
-
-{% macro prose(params) %}
-  {{ c({ name: 'prose' }, params) }}
-{% endmacro %}
-
-{% macro markdown(params) %}
-  {{ prose({
-    content: params.content | markdown
-  }) }}
-{% endmacro %}

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

@@ -1,65 +0,0 @@
-module.exports = {
-  title: 'Prose',
-  component: {
-    name: 'prose'
-  },
-  figma: 'https://www.figma.com/file/rUQ6aPQAfBX55o3hH0Lqb3/Design-exploration?node-id=745%3A173',
-  context: {
-    content: `<h2>Heading two</h2>
-    <p>Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
-    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur.</p>
-    <h3>Heading three</h3>
-    <p>Curabitur blandit tempus porttitor. Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
-    <blockquote>
-      <p>Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
-    </blockquote>
-    <p>Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
-    <ul>
-      <li>Donec sed odio dui.</li>
-      <li>Maecenas sed diam eget risus varius blandit sit amet non magna.</li>
-      <li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>
-    </ul>
-    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur.</p>
-    <ol>
-      <li>Donec sed odio dui.</li>
-      <li>Maecenas sed diam eget risus varius blandit sit amet non magna.</li>
-      <li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>
-    </ol>
-    <p>Curabitur <code>blandit tempus</code> porttitor. Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
-    <pre>
-{
-  "title": "Prose"
-}</pre>
-    <p>Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>`
-  },
-  variants: [
-    {
-      title: 'With lede',
-      context: {
-        classes: 'o-prose--with-lede'
-      }
-    },
-    {
-      title: 'Left blockquote',
-      context: {
-        classes: 'o-prose--left-blockquote'
-      }
-    }
-  ],
-  docs: true,
-  props: [
-    {
-      table: [
-        ['content', 'html', 'HTML from a WYSIWYG editor'],
-        ['classes', 'Addtional class attributes']
-      ]
-    },
-    {
-      title: 'CSS modifiers',
-      table: [
-        ['o-prose--left-blockquote', 'Remove the indentation of the blockquote'],
-        ['o-prose--with-lede', '', 'Emphasise the first paragraph of the prose']
-      ]
-    }
-  ]
-}

package/src/_includes/components/prose/prose.md

@@ -1 +0,0 @@
-The prose component assumes it will be passed WYSIWG content from a CMS. For this reasons, it is quite opinionated about how it styles child elements. For example: where as in most components a `<h2>` will be `1em` until we provide a sizing class, a `<h2>` in prose will be given a set size. This means we don't have to filter our CMS output and add additional styling classes.

package/src/_includes/components/prose/prose.njk

@@ -1,17 +0,0 @@
-{%- set classNames = "mp o-prose u-flow--prose" -%}
-
-{%- if params.classes -%}
-  {% set classNames = classNames + " " + params.classes %}
-{% endif %}
-
-{% if params.wrap != null %}
-  {% if params.wrap != '' %}
-    {% set classNames = classNames + " " + params.wrap %}
-  {% endif %}
-{% else %}
-  {% set classNames = classNames + " u-wrap--content" %}
-{% endif %}
-
-<div class="{{ classNames }}">
-  {{ params.content | safe }}
-</div>

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

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

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

@@ -1,19 +0,0 @@
-module.exports = {
-    title: 'Quote',
-    component: {
-        name: 'quote',
-    },
-    context: {
-        text: 'Data generated on the instrument is very reliable and accurate. Method development on the instrument is very simple and gives reproducible results time and again...',
-        name: 'Tyrone T.',
-        org: 'Oil processing'
-    },
-    variants: [
-        {
-            title: 'With logo',
-            context: {
-                logo: 'selectscience'
-            }
-        }
-    ]
-}

package/src/_includes/components/quote/quote.njk

@@ -1,9 +0,0 @@
-<blockquote class="mp c-quote u-flow--s">
-    <p>{{ params.text }}</p>
-    <div class="u-split">
-        <cite><strong>{{ params.name }}</strong> &mdash; {{ params.org }}</cite>
-        {% if params.logo %}
-            <img class="c-quote__image" src="https://malvern.dist.sdlmedia.com/distributions/?o=e46b13ba-66ec-4f45-82ad-d922a2bb2733">
-        {% endif %}
-    </div>
-</blockquote>

package/src/_includes/components/quote/quote.scss

@@ -1,51 +0,0 @@
-.c-quote {
-    color: color('petrol', 'step-1');
-    padding-top: 74px;
-    @include padding('2xl', 0, 'l', 'xl');
-    position: relative;
-
-    &:before {
-      content: '“';
-      color: color('petrol', 'step-3');
-      position: absolute;
-      height: 57px;
-      width: 45px;
-      left: 0;
-      top: 0.1em;
-      font-family: "Arial", sans-serif;
-      font-size: 10em;
-      font-weight: 900;
-      line-height: 0.9;
-      margin-left: -0.025em;
-      z-index: -1;
-    }
-
-    p {
-      @include step(2);
-      line-height: lh('prose');
-    }
-
-    p + p {
-      margin-top: 1em;
-    }
-
-    cite {
-      display: block;
-      @include step(-1);
-      @include margin-top('s');
-    }
-
-    &__image {
-      max-height: 3em;
-    }
-
-    &--bordered {
-      border: 1px solid color("petrol", "step-2");
-      @include padding('xl', 'xl', 'xl', '4xl');
-
-      &:before {
-        @include space('left', 'xl');
-        @include space('top', 'l');
-      }
-    }
-}

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

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

package/src/_includes/components/resource-card/resource-card.config.js

@@ -1,59 +0,0 @@
-const categories = require('../component/categories');
-
-module.exports = {
-  title: 'NEW Resource card',
-  component: {
-      name: 'resource-card',
-  },
-  category: categories.card,
-  context: {
-    type: 'resource',
-    theme: 'bordered',
-    size: 'medium',
-    tag: 'Whitepaper',
-    header: {
-      title: 'Accelerating the deformation workflow for oral solid dosage forms',
-      date: {
-        date: new Date(2015,0,12)
-      },
-      language: 'English'
-    },
-    body: {
-      content: `<p>This whitepaper on Oral Solid Dose (OSD) deformulation demonstrates how the analytical technique of Morphologically Directed Raman Spectroscopy (MDRS) can be used to accelerate the development of generic products to a successful conclusion.</p>`
-    },
-    body: {
-      keySpecs: [
-        {
-          title: 'Products',
-          term: 'Epsilon 4'
-        },
-        {
-          title: 'Technology',
-          term: 'X-ray fluorescence (XRF)'
-        },
-        {
-          title: 'Industry',
-          term: 'Metals, Advanced manufacturing'
-        },
-      ]
-    },
-    link: {
-      url: '#',
-      label: 'Read the whitepaper'
-    }
-  },
-  variants: [
-    {
-      title: 'Small',
-      context: {
-        size: 'small',
-        url: '#',
-        footer: false,
-        specs: false,
-        link: {
-          label: false
-        }
-      },
-    },
-  ]
-}

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

@@ -1 +0,0 @@
-{% extends "components/card-new/card-new.njk" %}

package/src/_includes/components/scroll-spy/macro.njk

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

package/src/_includes/components/scroll-spy/scroll-spy.config.js

@@ -1,24 +0,0 @@
-module.exports = {
-  title: 'Scroll spy',
-  component: {
-    name: 'scroll-spy'
-  },
-  context: {
-    links: [
-      { link: '#features-and-benefits', label: 'Features and benefits' },
-      { link: '#key-components', label: 'Key components' },
-      { link: '#use-cases', label: 'Use cases' },
-      { link: '#specifications', label: 'Specifications' },
-      { link: '#accessories', label: 'Accessories' },
-      { link: '#support', label: 'Support' }
-    ]
-  },
-  docs: true,
-  props: [
-    {
-      table: [
-        ['links', 'link[]', '"link" and "label" objects']
-      ]
-    }
-  ]
-}

package/src/_includes/components/scroll-spy/scroll-spy.md

@@ -1,3 +0,0 @@
-The scroll spy component takes a list of in-page anchor links and searches for their corresponding headings on the page. It is set to be `position: sticky` and follow you down the page, allowing you to traverse the content with a persistent navigation.
-
-There is a small 'nubbin' that appears to the left of the current 'active' item.

package/src/_includes/components/scroll-spy/scroll-spy.njk

@@ -1,5 +0,0 @@
-<ol class="mp c-scroll-spy u-flow--xs {{ params.classes }}">
-  {% for item in params.links %}
-    <li><a href="{{ item.link }}">{{ item.label }}</a></li>
-  {% endfor %}
-</ol>

package/src/_includes/components/scroll-spy/scroll-spy.scss

@@ -1,54 +0,0 @@
-.c-scroll-spy {
-  position: sticky;
-  @include space("top", "gutter");
-  overflow: hidden;
-
-  a:not(.c-button) {
-    color: color("utility-blue");
-    position: relative;
-    display: block;
-    transition: 300ms transform;
-
-    &:hover {
-      color: color("grey");
-    }
-
-    &::before {
-      content: "▸ ";
-      position: absolute;
-      left: -17px;
-      top: 0;
-    }
-  }
-
-  &-active {
-    transform: translateX(17px);
-  }
-}
-
-/*below additions added to allow for buttons to be displayed under the list items but remain sticky */
-.c-scroll-spy-buttons a:before {
-  content: "" !important;
-}
-
-@media only screen and (min-width: 880px) {
-  .c-scroll-spy-buttons {
-    margin-right: 54px;
-    margin-right: var(--space-xl);
-  }
-
-  .c-scroll-spy-buttons .c-button {
-    width: 100%;
-    margin-bottom: 18px;
-    margin-bottom: var(--space-s);
-  }
-}
-
-@media only screen and (max-width: 879px) {
-  .c-scroll-spy-buttons .c-button {
-    display: inline-flex;
-    margin-right: 0.5em;
-    margin-bottom: 0.5em;
-    vertical-align: top;
-  }
-}

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

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