mp-design-system 1.2.64 → 1.2.66

package/src/_includes/components/input/toggle.scss

@@ -1,75 +0,0 @@
-.c-toggle {
-  position: relative;
-  @include step(-1);
-  display: inline-block;
-  white-space: nowrap;
-
-  &__checkbox {
-    @extend .u-hidden;
-  }
-
-  &__slider {
-    @include margin-right('2xs');
-    @include margin-left('2xs');
-    position: relative;
-    display: inline-block;
-    height: 1.25rem;
-    width: 2.25rem;
-    border: 1px solid color('petrol', 'step-2');
-    border-radius: 1.25rem;
-    vertical-align: text-bottom;
-
-    &::before {
-      position: absolute;
-      content: "";
-      background-color: color('white');
-      border: 1px solid color('petrol', 'step-2');
-      height: 0.75rem;
-      width: 0.75rem;
-      top: 0;
-      bottom: 0;
-      left: 0.25rem;
-      margin: auto 0;
-      border-radius: 50%;
-      transition: .1s;
-    }
-  }
-
-  &:hover &__slider,
-  &:focus-within &__slider {
-    background-color: color('petrol', 'step-3');
-  }
-  
-  &:focus-within &__slider {
-    outline: 2px solid;
-  }
-
-  &__checkbox:checked + &__slider {
-    background-color: color('utility-blue');
-  }
-
-  &:hover &__checkbox:checked + &__slider,
-  &:focus-within &__checkbox:checked + &__slider {
-    background-color: color('utility-blue', 'step--1');
-  }
-
-  &__checkbox:checked + &__slider::before {
-    transform: translateX(1rem);
-  }
-
-  input[disabled] {
-    & + .c-toggle__slider {
-      background-color: color('petrol', 'step-2');
-      cursor: not-allowed;
-      opacity: 0.6;
-
-      &:before {
-        background-color: color('petrol', 'step-3');
-      }
-    }
-    & ~ .c-toggle__label {
-      cursor: not-allowed;
-      opacity: 0.6;
-    }
-  }
-}

package/src/_includes/components/internal-nav/internal-nav.config.js

@@ -1,41 +0,0 @@
-module.exports = {
-  title: 'Internal nav',
-  component: {
-    name: 'internal-nav'
-  },
-  context: {
-    links: [
-      { link: '#product-categories', label: 'Product categories' },
-      { link: '#product-ranges', label: 'Product ranges' },
-      { link: '#technologies', label: 'Technologies' },
-      { link: '#measurement-types', label: 'Measurement types' },
-      { link: '#industry-standards', label: 'Industry standards' },
-      { link: '#our-product-brands', label: 'Our product brands' }
-    ]
-  },
-  variants: [
-    {
-      title: 'Sticky on scroll',
-      context: {
-        classes: 'c-internal-nav--sticky',
-        title: 'Mastersizer range',
-        links: [
-          { link: '#overview', label: 'Overview' },
-          { link: '#products', label: 'Products' },
-          { link: '#product-comparison-table', label: 'Compare' },
-        ],
-        button: {
-          link: '#',
-          label: 'Request a quote',
-        }
-      }
-    }
-  ],
-  props: [
-    {
-      table: [
-        ['links', 'link[]', '"link" and "label" objects']
-      ]
-    }
-  ]
-}

package/src/_includes/components/internal-nav/internal-nav.njk

@@ -1,24 +0,0 @@
-{%- from "components/button/macro.njk" import button -%}
-
-<nav class="mp c-internal-nav {{ params.classes }}" aria-label="In-page">
-  <div class="c-internal-nav__wrap">
-    {% if params.title %}
-      <p class="c-internal-nav__title">{{ params.title }}</p>
-    {% endif %}
-    <ul class="c-internal-nav__list">
-      {% for item in params.links %}
-        <li><a href="{{ item.link }}">{{ item.label }}</a></li>
-      {% endfor %}
-      {% if params.button %}
-        <li>
-          {{ button({
-            link: params.button.link,
-            label: params.button.label,
-            colour: 'green',
-            classes: 'c-button--small'
-          }) }}
-        </li>
-      {% endif %}
-    </ul>
-  </div>
-</nav>

package/src/_includes/components/internal-nav/internal-nav.scss

@@ -1,74 +0,0 @@
-.c-internal-nav {
-  background-color: transparent;
-  border-bottom: 1px solid transparent;
-  transition: 200ms all;
-
-  &--sticky {
-    position: sticky;
-    top: -1px;
-  }
-
-  &--stuck {
-    @extend .u-bg-white;
-    border-bottom-color: color('grey', 'step-2');
-    z-index: 9999;
-
-    .c-internal-nav__title {
-      opacity: 1;
-    }
-  }
-
-  &__wrap {
-    @extend .u-wrap;
-    display: flex;
-    gap: var(--space-l);
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  &__title {
-    @include padding('s', 0);
-    flex-shrink: 0;
-    font-weight: bold;
-    transition: 200ms opacity;
-    opacity: 0;
-  }
-
-  &__list {
-    @include padding('s', 0);
-    color: color('utility-blue');
-    white-space: nowrap;
-    overflow-x: auto;
-    display: flex;
-    align-items: center;
-    font-size: var(--step--1);
-
-    & > * + * {
-      @include margin-left('l');
-    }
-
-    li {
-      a:not(.c-button) {
-        @extend .u-link;
-      }
-    }
-  }
-
-
-
-  @media (max-width: 44em) {
-    &__title,
-    .c-button {
-      display: none;
-    }
-  
-    &__list {
-      @include padding-bottom('s');
-    }
-  }
-}
-
-
-.c-hero + .c-internal-nav {
-  margin-top: calc(var(--gutter) * -1);
-}

package/src/_includes/components/internal-nav/macro.njk

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

package/src/_includes/components/meta-box/macro.njk

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

package/src/_includes/components/meta-box/meta-box.config.js

@@ -1,74 +0,0 @@
-module.exports = {
-  title: 'Meta box',
-  component: {
-    name: 'meta-box'
-  },
-  preview: 'cards-three',
-  context: {
-    date: {
-      date: new Date(),
-      time: '11:00 – 1200',
-      timezone: 'Eastern Time (US & Canada)'
-    },
-    linkLabel: 'Register for this event',
-    link: '#',
-    meta: [
-      {
-        title: 'Language',
-        term: 'English'
-      },
-      {
-        title: 'Event type',
-        term: 'Webinar - Live'
-      },
-      {
-        title: 'Industry',
-        term: '<a href="/prototype/range/">Pharmaceutical</a>'
-      },
-      {
-        title: 'Products',
-        terms: [
-          '<a href="/prototype/range">Empyrean range</a>',
-          '<a href="/prototype/range">Zetasizer range</a>',
-          '<a href="/prototype/range">X-ray Diffraction (XRD)</a>'
-        ]
-      }
-    ]
-  },
-  variants: [
-    {
-      title: 'Simple',
-      context: {
-        date: null,
-        linkLabel: null
-      }
-    }
-  ],
-  props: [
-    {
-      table: [
-        ['date', 'object', 'dateOptions'],
-        ['linkLabel', 'string', 'Button label'],
-        ['link', 'string'],
-        ['meta', 'termGroup[]']
-      ]
-    },
-    {
-      title: '<code>dateOptions</code>',
-      table: [
-        ['date', 'date', 'Datetime of the instance'],
-        ['time', 'string', 'String-based time'],
-        ['timezone', 'string', 'String-based timezone'],
-        ['duration', 'string', 'Providing this will make it a \'past event\''],
-      ]
-    },
-    {
-      title: '<code>termGroup</code>',
-      table: [
-        ['title', 'string'],
-        ['term', 'string'],
-        ['terms', 'string[]'],
-      ]
-    }
-  ]
-}

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

@@ -1,36 +0,0 @@
-{% from "components/button/macro.njk" import button %}
-
-<div class="mp c-meta-box">
-  {% if params.date %}
-    <h2 class="c-h c-h--event-date">{{ params.date.date | formatLong }}</h2>
-    <div class="u-flow--3xs">
-      <h3 class="c-h c-h--step-0">{{ params.date.time }}</h3>
-      <p>{{ params.date.timezone }}</p>
-    </div>
-  {% endif %}
-
-  {% if params.meta | length %}
-    <div class="u-grey-step-1">
-      <ul class="u-flow--2xs u-link-inside">
-        {% for meta in params.meta %}
-          <li>
-            <strong>{{ meta.title }}:</strong>
-            {% if meta.term %}
-              <span>{{ meta.term | safe }}
-            {% else %}
-              <ul class="u-margin-top-2xs u-margin-left-2xs u-flow--2xs">
-                {% for term in meta.terms %}
-                  <li>{{ term | safe }}</li>
-                {% endfor %}
-              </ul>
-            {% endif %}
-          </li>
-        {% endfor %}
-      </ul>
-    </div>
-  {% endif %}
-
-  {% if params.linkLabel %}
-    {{ button({ label: params.linkLabel, link: params.link, classes: 'c-button--wide c-button--tight' }) }}
-  {% endif %}
-</div>

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

@@ -1,10 +0,0 @@
-.c-meta-box {
-  background: color('petrol', 'step-3');
-  @include padding('s-m');
-  @include step(-1);
-  @include flow('s');
-
-  .u-wrap--fields {
-    @include padding-right(0)
-  }
-}

package/src/_includes/components/off-canvas/macro.njk

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

package/src/_includes/components/off-canvas/off-canvas.config.js

@@ -1,28 +0,0 @@
-module.exports = {
-  title: 'Off-canvas',
-  component: {
-    name: 'off-canvas',
-  },
-  context: {
-    target: {
-      id: 'areasOfInterest',
-      button: {
-        text: 'Update'
-      }
-    },
-    header: 'Areas of interest',
-    toggle: {
-      text: 'Add areas of interest'
-    },    
-  },
-  variants: [
-    {
-      title: 'Mobile only',
-      context: {
-        classes: 'c-off-canvas--mobile'
-      }
-    }
-  ],
-  props: [
-  ]
-}

package/src/_includes/components/off-canvas/off-canvas.njk

@@ -1,28 +0,0 @@
-{% from "components/input/macro.njk" import checkbox %}
-
-{%- set classNames = "mp c-button c-off-canvas__toggle" -%}
-
-{%- if params.classes -%}
-  {% set classNames = classNames + " " + params.classes %}
-{% endif %}
-
-<div>
-  <div id="{{ params.target.id }}" class="c-checkbox-group u-flow--m">
-    <label class="c-label" data-off-canvas="header">{{ params.header }}</label>
-    <div class="o-grid o-grid--of-three" data-off-canvas="main">
-      {% for _ in ["3D structure / imaging", "Binding affinity", "Binding kinetics", "Chemical identification", "Contaminant detection and analysis", "Crystal structure determination", "Elemental analysis", "Elemental quantification", "Enzyme kinetics", "Epitaxy analysis"] %}
-        <div>
-          {{ checkbox({
-            label: _,
-            name: params.target.id,
-            id: _,
-            value: _
-          })}}
-        </div>
-      {% endfor %}
-    </div>
-    <button class="mp c-button o-off-canvas__update" data-off-canvas="footer" data-off-canvas-close="true" onclick="return false">{{ params.target.button.text }}</button>
-  </div>
-
-  <button class="{{ classNames }}" data-target="{{ params.target.id }}" aria-controls="{{ params.target.id }}" aria-expanded="false" aria-label="Toggle {{ params.header }}" onclick="return false">{{ params.toggle.text }}</button>
-</div>

package/src/_includes/components/off-canvas/off-canvas.scss

@@ -1,102 +0,0 @@
-.c-off-canvas {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: transparent;
-  opacity: 0;
-  visibility: hidden;
-  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
-  z-index: 9999;
-
-  &> * + * {
-    margin: 0 !important;
-  }
-
-  &__backdrop {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(color("grey"), 0.5);
-    opacity: 0;
-    visibility: hidden;
-    transition: opacity 0.3s ease;
-    backdrop-filter: blur(5px);
-  }
-
-  &__content {
-    position: fixed;
-    top: 0;
-    right: -100%;
-    width: calc(100% - var(--space-m));
-    height: 100%;
-    background-color: color("white");
-    transition: right 0.3s ease;
-    display: flex;
-    flex-direction: column;
-  }
-
-  &__header {
-    @extend .c-h--step-3;
-    @include padding('s', 's', 0);
-
-    & > * {
-      margin-bottom: 0 !important;
-    }
-  }
-
-  &__header + &__main {
-    @include margin-top('m');
-  }
-
-  &__main {
-    @include margin-bottom('m');
-    @include padding('3xs', 's');
-    overflow-y: scroll;
-  }
-
-  &__footer {
-    @include margin-top('auto');
-    @include padding(0, 's', 's');
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  &__close {
-    @extend .u-link;
-    @include margin(0, 'auto');
-    @include padding('s');
-  }
-
-  &--active {
-    opacity: 1;
-    visibility: visible;
-    transition: opacity 0.3s ease;
-
-    .c-off-canvas__backdrop {
-      opacity: 1;
-      visibility: visible;
-    }
-
-    .c-off-canvas__content {
-      right: 0;
-    }
-  }
-}
-
-@media only screen and (min-width: 40em) {
-  .c-off-canvas--mobile {
-    display: none !important;
-  }
-
-  .c-checkbox-group {
-    [data-off-canvas="header"],
-    [data-off-canvas="footer"] {
-      display: none;
-    }
-  }
-}

package/src/_includes/components/option-list/macro.njk

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

package/src/_includes/components/option-list/option-list.config.js

@@ -1,51 +0,0 @@
-module.exports = {
-  title: 'Option list',
-  component: {
-    name: 'option-list'
-  },
-  context: {
-    links: [
-      { link: '', label: 'Automation solutions' },
-      { link: '', label: 'Calibration standards' },
-      { link: '', label: 'CNA cross-belt analyzers' },
-      { link: '', label: 'Consumables' },
-      { link: '', label: 'Handheld spectrometers' },
-      { link: '', label: 'Image analyzers' },
-      { link: '', label: 'Liquid chromatography' },
-      { link: '', label: 'Microcalorimeters' },
-      { link: '', label: 'Near-infrared spectrometers (NIR)' },
-      { link: '', label: 'Particle size analyzers' },
-      { link: '', label: 'Sample preparation for XRF and ICP' },
-      { link: '', label: 'Software for XRF and XRD applications' },
-      { link: '', label: 'Spectroradiometers' },
-      { link: '', label: 'X-ray components' },
-      { link: '', label: 'X-ray diffractometers (XRD)' },
-      { link: '', label: 'X-ray fluorescence spectrometers (XRF)' },
-      { link: '', label: 'X-ray metrology' },
-      { link: '', label: 'X-ray scattering platform' },
-      { link: '', label: 'X-ray tubes' }
-    ]
-  },
-  variants: [
-    {
-      title: 'In columns',
-      context: {
-        columns: true
-      }
-    }
-  ],
-  props: [
-    {
-      table: [
-        ['links', 'link[]', '"link" and "label" objects'],
-        ['columns', 'bool', 'Should the list be displayed in columns']
-      ]
-    },
-    {
-      title: 'CSS modifiers',
-      table: [
-        ['c-option-list--columns', '', 'Break the content into columns']
-      ]
-    }
-  ]
-}

package/src/_includes/components/option-list/option-list.njk

@@ -1,10 +0,0 @@
-{% if params.title %}
-  <h3 class="c-h c-h--step-0 c-option-list__title">{{ params.title }}
-    {% if params.viewAllLink != null %}<a class="u-step--1" href="{{ params.viewAllLink }}">View all</a>{% endif %}
-  </h3>
-{% endif %}
-<ol class="mp c-option-list {{ 'c-option-list--columns' if params.columns }}">
-  {% for item in params.links %}
-    <li><a href="{{ item.link }}">{{ item.label }}</a></li>
-  {% endfor %}
-</ol>

package/src/_includes/components/option-list/option-list.scss

@@ -1,39 +0,0 @@
-.c-option-list {
-  .mp & {
-    line-height: lh('prose');
-  }
-
-  a {
-    color: color('utility-blue');
-    
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-
-  li {
-    @include margin-bottom('2xs');
-    break-inside: avoid;
-  }  
-
-  &--columns {
-    @include space('column-gap', 'gutter');
-    column-width: 200px;
-
-    @media (min-width: 60em) {
-      column-width: 260px;
-    }
-  }
-
-  &__title {
-    a {
-      font-weight: weight();
-      color: color('utility-blue');
-      @include margin-left('2xs');
-    
-      &:hover {
-        text-decoration: underline;
-      }
-    }
-  }
-}

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

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

package/src/_includes/components/post-meta/post-meta.config.js

@@ -1,44 +0,0 @@
-module.exports = {
-  title: 'Post meta',
-  component: {
-    name: 'post-meta',
-  },
-  context: {
-    content: '<p>By Malvern Panalytical, Wednesday 6 January 2021</p>',
-  },
-  variants: [
-    {
-      title: 'With series',
-      context: {
-        series: [{
-          link: '/prototype/webinar',
-          label: 'Part 2 of 3',
-          active: true
-        },{
-          link: '/prototype/webinar',
-          label: 'Watch part 1'
-        },
-        {
-          link: '/prototype/webinar',
-          label: 'Register for part 3'
-        }]
-      }
-    },
-    {
-      title: 'With author link',
-      context: {
-        author: {
-          link: '/',
-          label: 'Lauren Ipson'
-        }
-      }
-    }
-  ],
-  props: [
-    {
-      table: [
-        ['content', 'html']
-      ]
-    }
-  ]
-}