mp-design-system 1.2.63 → 1.2.65

package/src/_includes/components/component/preview-card-example.njk

@@ -1,347 +0,0 @@
-{% from "components/card/macro.njk" import card %}
-{% from "components/prose/macro.njk" import markdown %}
-
-
-{% set content %}
-A card is like a website within a website. A card generally represents an item or article which exists elsewhere and offers the user a way to engage with that content, usually by discovering more information or performing a related action like adding a product to a shopping basket.
-
-Depending on the content it represents, a card can include a range of information like a title, tagline, date, description, features or specs list, content tags, links, calls-to-action, etc.
-
-Our main card component is organised into header, body and footer sections and can use a single- or multi-column layout, with an optional image and content-type tag.
-
-Using a single structured main card component to build most of our cards ensures visual consistency but also allows enough variation to differentiate between content types.
-
-There are also specific types of cards which are not generated from the main card component, including promotional and signpost cards. In order to keep the design system trim, it is preferred to build cards using the main card component options where possible.
-{% endset %}
-
-<div class="mp u-flow--xl u-wrap">
-  <div class="mp">
-    {{ markdown({
-      content: content
-    }) }}
-  </div>
-
-  <div class="o-grid o-grid--layout o-grid--8/3">
-    {{ card({
-      theme: {
-        layout: 'multi',
-        size: 'large',
-        border: true
-      },
-      image: {
-        src: '/static/img/product-image.jpg',
-        alt: 'Product image alt'
-      },
-      header: {
-        title: 'Hydro SV',
-        subtitle: 'Small volume wet sample dispersion'
-      },
-      body: {
-        content: '<p>The Hydro SV is a simple, cost effective liquid dispersion unit designed to enable particle size analysis using small volumes of sample and dispersant.</p>'
-      },
-      footer: {
-        cta: {
-          link: '#',
-          label: 'View full details'
-        }
-      }
-    }) }}
-  </div>
-
-  <div class="o-grid o-grid--layout o-grid--8/3">
-    {{ card({
-      theme: {
-        layout: 'multi',
-        name: 'alt'
-      },
-      image: {
-        src: '/static/img/case-study-1.jpg',
-        alt: 'Product image alt'
-      },
-      header: {
-        title: 'The future is 3D'
-      },
-      body: {
-        content: '<p>Materials characterisation will help ‘additive manufacturing’ change how we make things forever.</p>',
-        keySpecs: [
-          {
-            title: 'Products',
-            term: 'Morphologi G3-ID'
-          },
-          {
-            title: 'Technologies',
-            term: 'Morphologically-Directed Raman Spectroscopy'
-          }
-        ]
-      },
-      link: '#',
-      tag: 'Blog post'
-    })}}
-  </div>
-
-  <div class="o-grid o-grid--layout o-grid--8/3">
-    {{ card({
-      theme: {
-        border: true,
-        size: 'medium',
-        layout: 'multi',
-        noFullLink: true,
-        inlineSpecs: true
-      },
-      image: {
-        src: '/static/img/range-product-1.jpg',
-        alt: 'Product image alt'
-      },
-      header: {
-        title: 'Scirocco 2000 Consumable Kit'
-      },
-      body: {
-        content: '<p>Kit includes: Flow Diffusing Sphere Stainless Steel for DPFs, Sample Tubing 300mm Long 5/16" i/d x ½" o/d, Scirocco 2000 Set of Spare Fuses, Packet of Lens Tissues, Fine Sieve Basket Assembly 0.8mm small mesh, Coarse Sieve Basket Assembly 1.6mm large mesh, Quality Audit Standard Pack of Ten 2.5g Bottles, 1/2in wide paint brush.</p>',
-        keySpecs: [
-          {
-            title: 'Product number',
-            term: 'ADA4005'
-          },
-          {
-            title: 'Compatible with',
-            terms: [
-              'Mastersizer 3000',
-              'Mastersizer 3000E'
-            ]
-          }
-        ]
-      },
-      footer: {
-        cta: {
-          link: '#',
-          label: 'View full details'
-        }
-      },
-      shop: {
-        labels: [
-          { key: 'List price', value: '£326.00' },
-          { key: 'Lead time', value: '1-2 weeks' }
-        ],
-        small: 'Discount will be applied at checkout',
-        productId: '1234'
-      }
-    }) }}
-  </div>
-  
-  <div class="o-grid o-grid--layout o-grid--of-three">
-    {{ card({
-      theme: {
-        layout: 'single',
-        size: 'medium',
-        name: 'alt',
-        corner: true
-      },
-      header: {
-        title: 'Discover how on-line particle sizing optimises mining analytics.',
-        meta: ['English'],
-        date: {
-          date: '2021-02-09' | createDate,
-          time: '11:00 – 1200',
-          timezone: 'EST'
-        }
-      },
-      link: '#'
-    }) }}
-  </div>
-
-  <div class="o-grid o-grid--layout o-grid--of-three">
-    {{ card({
-      theme: {
-        layout: 'single',
-        size: 'medium',
-        name: 'featured'
-      },
-      image: {
-        src: '/static/img/featured-event-1.jpg',
-        alt: 'Alt'
-      },
-      header: {
-        title: 'Achieving method transfer from Mastersizer 2000 to Mastersizer 3000',
-        meta: ['English'],
-        date: {
-          date: '2020-08-01' | createDate,
-          duration: '36:01'
-        }
-      },
-      body: {
-        keySpecs: [
-          {
-            title: 'Products',
-            term: 'Mastersizer 3000'
-          },
-          {
-            title: 'Technologies',
-            term: 'Morphologically-Directed Raman Spectroscopy'
-          }
-        ]
-      },
-      footer: {
-        buttons: [
-          {
-            label: 'Watch now',
-            link: '#',
-            colour: 'outline-white'
-          }
-        ]
-      },
-      tag: 'Recorded webinar'
-    }) }}
-
-    {{ card({
-      theme: {
-        layout: 'single',
-        size: 'medium',
-        name: 'featured'
-      },
-      image: {
-        src: '/static/img/featured-event-2.jpg',
-        alt: 'Alt'
-      },
-      header: {
-        title: 'Zetium ED X-ray fluorescence SuperQ application course',
-        meta: ['English'],
-        date: {
-          date: '2021-02-09' | createDate,
-          time: '11:00 – 1200',
-          timezone: 'EST'
-        }
-      },
-      body: {
-        keySpecs: [
-          {
-            title: 'Products',
-            term: 'Mastersizer 3000'
-          },
-          {
-            title: 'Technologies',
-            term: 'Morphologically-Directed Raman Spectroscopy'
-          }
-        ]
-      },
-      footer: {
-        buttons: [
-          {
-            label: 'Book your place',
-            link: '#'
-          }
-        ]
-      },
-      tag: 'Training course'
-    }) }}
-  </div>
-
-  <div class="o-grid o-grid--of-three">
-    {{ card({
-      theme: {
-        layout: 'single',
-        size: 'medium',
-        name: 'alt'
-      },
-      image: {
-        src: '/static/img/blog-page-image-1.jpg',
-        alt: ''
-      },
-      header: {
-        title: 'Mixing it with the Mastersizer!'
-      },
-      body: {
-        content: '<p>At a major leading manufacturer of mixing equipment, the Mastersizer particle size analyzer is one of the analytical instruments used by customers during process simulations.</p>'
-      },
-      link: '#',
-      tag: 'News'
-    }) }}
-  </div>
-
-  <div class="o-grid o-grid--layout o-grid--8/3">
-    {{ card({
-      theme: {
-        layout: 'multi',
-        name: 'featured',
-        switch: true
-      },
-      image: {
-        src: '/static/img/featured-event-1.jpg',
-        alt: 'Alt'
-      },
-      header: {
-        title: 'Achieving method transfer from Mastersizer 2000 to Mastersizer 3000',
-        meta: ['English'],
-        date: {
-          date: '2020-08-01' | createDate,
-          duration: '36:01'
-        }
-      },
-      body: {
-        keySpecs: [
-          {
-            title: 'Products',
-            term: 'Mastersizer 3000'
-          },
-          {
-            title: 'Technologies',
-            term: 'Morphologically-Directed Raman Spectroscopy'
-          }
-        ]
-      },
-      footer: {
-        buttons: [
-          {
-            label: 'Watch now',
-            link: '/prototype/oma/',
-            colour: 'outline-white'
-          }
-        ]
-      },
-      tag: 'Recorded webinar'
-    }) }}
-  </div>
-
-  {{ card({
-    theme: {
-      layout: 'multi c-card--layout-multi-40-60',
-      name: 'featured',
-      switch: true
-    },
-    image: {
-      src: '/static/img/featured-event-2.jpg',
-      alt: 'Alt'
-    },
-    header: {
-      title: 'Zetium ED X-ray fluorescence SuperQ application course',
-      meta: ['English'],
-      date: {
-        date: '2021-02-09' | createDate,
-        time: '11:00 – 1200',
-        timezone: 'EST'
-      }
-    },
-    body: {
-      keySpecs: [
-        {
-          title: 'Products',
-          term: 'Mastersizer 3000'
-        },
-        {
-          title: 'Technologies',
-          term: 'Morphologically-Directed Raman Spectroscopy'
-        }
-      ]
-    },
-    footer: {
-      buttons: [
-        {
-          label: 'Book your place',
-          link: '/prototype/webinar'
-        }
-      ]
-    },
-    tag: 'Training course'
-  }) }}
-
-  <br>
-</div>

package/src/_includes/components/component/preview-cards-three-alt.njk

@@ -1,3 +0,0 @@
-<div class="o-grid o-grid--of-three u-bg-petrol-step-3 u-pad-m">
-  {{ comp | safe }}
-</div>

package/src/_includes/components/component/preview-cards-three.njk

@@ -1,3 +0,0 @@
-<div class="o-grid o-grid--of-three u-pad-m">
-  {{ comp | safe }}
-</div>

package/src/_includes/components/component/preview-cards-two.njk

@@ -1,3 +0,0 @@
-<div class="o-grid o-grid--of-two u-pad-m">
-  {{ comp | safe }}
-</div>

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

@@ -1,5 +0,0 @@
-<div class="o-grid o-grid--layout o-grid--8/3 u-pad-m">
-  <div>
-    {{ comp | safe }}
-  </div>
-</div>

package/src/_includes/components/component/preview-default.njk

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

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

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

package/src/_includes/components/component/preview-form.njk

@@ -1,3 +0,0 @@
-<form class="mp o-grid o-grid--of-two u-pad-m">
-  {{ comp | safe }}
-</form>

package/src/_includes/components/component/preview-icons.njk

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

package/src/_includes/components/component/preview-sidebar.njk

@@ -1,5 +0,0 @@
-<div class="o-grid o-grid--layout o-grid--3/8 o-grid--push u-pad-m">
-  <aside>
-    {{ comp | safe }}
-  </aside>
-</div>

package/src/_includes/components/embed/embed.njk

@@ -1,11 +0,0 @@
-{%- set classNames = "c-embed" -%}
-
-{%- if params.classes %}
-  {% set classNames = classNames + " " + params.classes %}
-{%- endif -%}
-
-<figure class="{{ classNames }}">
-  <div class="c-embed__wrapper">
-    {{ params.content | safe }}
-  </div>
-</figure>

package/src/_includes/components/embed/embed.scss

@@ -1,17 +0,0 @@
-.c-embed {
-  position: relative;
-
-  &__wrapper {
-    padding-bottom: 56.625%;
-    position: relative;
-    height: 0;
-
-    & > * {
-      position: absolute;
-      height: 100%;
-      width: 100%;
-      left: 0;
-      top: 0;
-    }
-  }
-}

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

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

package/src/_includes/components/embed/youtube.config.js

@@ -1,19 +0,0 @@
-module.exports = {
-  title: 'YouTube',
-  component: {
-    name: 'youtube',
-    folder: 'embed'
-  },
-  context: {
-    title: 'Video title',
-    id: 'Q4H7EdHFghs'
-  },
-  props: [
-    {
-      table: [
-        ['title', 'string', 'Video title'],
-        ['id', 'string', 'YouTube video ID']
-      ]
-    }
-  ]
-}

package/src/_includes/components/embed/youtube.njk

@@ -1,5 +0,0 @@
-{% from "components/embed/macro.njk" import embed %}
-
-{{ embed({
-  content: '<iframe title="' + (params.title or '') + '" width="640" height="360" src="https://www.youtube.com/embed/' + params.id + '?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>'
-}) }}

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

@@ -1,108 +0,0 @@
-const categories = require('../component/categories');
-
-module.exports = {
-    title: 'NEW Event card',
-    component: {
-        name: 'event-card',
-    },
-    category: categories.card,
-    context: {
-        type: 'event',
-        theme: 'alt',
-        size: 'medium',
-        header: {
-          title: 'Zetium ED X-ray fluorescence SuperQ application course',
-          date: {
-              date: new Date(new Date().getTime() + 24 * 60 * 60 * 1000),
-              time: '11:30 - 12:30',
-              timezone: 'GMT',
-          },
-          location: 'Virtual',
-          meta: ['English']
-        },
-        tag: 'Live webinar',
-        body: {
-          keySpecs: [
-            {
-                title: 'Products',
-                term: 'Zetium'
-            },
-            {
-                title: 'Technologies',
-                terms: ['X-ray fluorescence spectronomy (XRF)','ED-XRF']
-            }
-          ]
-        },
-        footer: {
-          buttons: [
-            {
-                link: '#',
-                label: 'Book your place'
-            }
-          ]
-        },
-        image: {
-          src: 'https://p3.aprimocdn.net/malvernpanalytical/86aad13f-9f20-4a18-8a2e-adea010ae3d9/shutterstock_111870260_Low-res.JPG',
-          alt: 'Alt text'
-        }
-    },
-    variants: [
-      {
-        title: 'Small',
-        context: {
-          size: 'small',
-          specs: false,
-          footer: false,
-        }
-      },
-      {
-        title: 'Dark',
-        context: {
-          theme: 'dark',
-          header: {
-            title: 'Zetium ED X-ray fluorescence SuperQ application course',
-            date: {
-                date: new Date(new Date().getTime() + 24 * 60 * 60 * 1000),
-                time: '11:30 - 12:30',
-                timezone: 'EDT',
-            },
-            location: 'Westborough MA',
-            meta: ['English']
-          },
-          tag: 'User training',
-        }
-      },
-      {
-        title: 'Shadowed',
-        context: {
-          theme: 'shadowed',
-          size: 'small',
-          specs: false,
-          footer: false,
-        }
-      },
-      {
-        title: 'Recorded',
-        context: {
-          header: {
-            title: 'XRF analysis in the process control of battery cathode manufacturing',
-            date: {
-              date: new Date(2017,9,11)
-            },
-            duration: '54:29',
-            meta: ['English']
-          },
-          tag: 'Recorded webinar',
-          footer: {
-              buttons: [
-              {
-                link: '#',
-                label: 'Watch the video',
-                colour: 'outline-green'
-              }
-            ]
-          }
-        }
-      }
-    ]
-  }

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

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

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

@@ -1,49 +0,0 @@
-// Extend the basic card scss
-@import '../card-new/card-new.scss';
-
-.c-card-new--event {
-
-    // Colour themes
-    &.c-card-new--dark {
-        .c-card__day {
-            color: color('white');
-        }
-        .c-card__specs {
-            color: color('petrol', 'step-2');
-        }
-    }
-    &.c-card-new--alt {
-        .c-card__specs {
-            color: color('petrol', 'step-1');
-        }
-    }
-
-    .c-card__meta {
-        line-height: lh('prose');
-    }
-
-    &:not(.c-card-new--small) .c-card__datetime {
-        @container card (width > #{$card-s}) {
-            .c-card__day {
-                font-size: var(--step-4);
-            }
-            .c-card__month {
-                font-size: var(--step-2);
-            }
-        }
-        @container card (width > #{$card-m}) {
-            .c-card__day {
-                font-size: var(--step-5);
-            }
-            .c-card__month {
-                font-size: var(--step-3);
-            }
-        }
-    }
-
-    @container card (width < #{$card-s}) {
-        .c-card__specs {
-            display: none;
-        }
-    }
-}

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

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