mp-design-system 1.2.64 → 1.2.66

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

@@ -1,57 +0,0 @@
-module.exports = {
-  title: 'Tabs',
-  component: {
-    name: 'tabs',
-    folder: 'tabs'
-  },
-  figma: 'https://www.figma.com/file/rUQ6aPQAfBX55o3hH0Lqb3/Design-exploration?node-id=678%3A21661',
-  context: {
-    type: 'anchor',
-    tabs: [
-      { id: 'tab-1', label: 'Primary materials', content: '<strong>Primary materials</strong> lorem ipsum a maecenas parturient ipsum at nisl id nisi a imperdiet platea dui venenatis sit euismod.', active: true },
-      { id: 'tab-2', label: 'Pharmaceuticals', content: '<strong>Pharmaceuticals</strong> lorem ipsum parturient a ullamcorper nisl parturient cum ullamcorper augue arcu a feugiat mus imperdiet curae suspendisse rhoncus sit id parturient cubilia adipiscing ad ullamcorper aliquet mi.' },
-      { id: 'tab-3', label: 'Advanced materials', content: '<strong>Advanced materials</strong> lorem ipsum fringilla eros cum facilisis id ullamcorper pretium sociosqu a eu vestibulum cras vivamus inceptos sed potenti a.' },
-      { id: 'tab-4', label: 'Academia', content: '<strong>Academia</strong> lorem ipsum augue et vestibulum ut luctus ut vestibulum proin eros mauris sodales penatibus euismod a sem eleifend suspendisse litora fringilla habitasse suspendisse.' },
-      { id: 'tab-5', label: 'Connected world', content: '<strong>Connected world</strong> lorem ipsum eros a parturient libero ullamcorper natoque vestibulum turpis egestas suspendisse parturient et adipiscing arcu a.' },
-    ]
-  },
-  props: [
-    {
-      table: [
-        ['type', 'string', 'The type of tab, eg: "anchor"'],
-        ['tabs', 'tab[]', 'An array of tabs']
-      ]
-    },
-    {
-      title: '<code>tab</code>',
-      table: [
-        ['id', 'string', 'Unique ID for each tab'],
-        ['label', 'string', 'Label for the tab control'],
-        ['content', 'html', 'HTML for the tab content'],
-        ['active', 'bool', 'Is this tab active?']
-      ]
-    },
-    {
-      title: 'CSS modifiers',
-      table: [
-        ['c-tabs--flex', '', 'Instead of \'block\', display the active tabs as \'flex\''],
-        ['c-tabs--persist', '', 'Add a URL fragment (aka hashtag) to the browser URL']
-      ]
-    },
-    {
-      title: 'Utilities',
-      table: [
-        ['u-scroll-shadows--h','','When the tab row is too wide for the screen, scroll indicators are displayed']
-      ]
-    }
-  ],
-  variants: [
-    {
-      title: 'Scroll shadows',
-      context: {
-        shadows: true
-      },
-      preview: 'cards-three'
-    }
-  ]
-}

package/src/_includes/components/tabs/tabs.njk

@@ -1,17 +0,0 @@
-<div class="mp c-tabs {{ 'c-tabs--' + params.type if params.type }}">
-  <nav class="c-tabs__controls {{ "u-scroll-shadows--h" if params.shadows }}">
-    <ul class="c-tabs__controls-list">
-      {% for tab in params.tabs %}
-        <li><a class="c-tabs__control {{ 'c-tabs__control--active' if tab.active }}" href="#{{ tab.id }}">{{ tab.label }}</a></li>
-      {% endfor %}
-    </ul>
-  </nav>
-
-  <div class="c-tabs__content">
-    {% for tab in params.tabs %}
-      <div id="{{ tab.id }}" class="c-tab {{ 'c-tab--active' if tab.active }}">
-        <div class="o-prose"><p>{{ tab.content | safe }}</p></div>
-      </div>
-    {% endfor %}
-  </div>
-</div>

package/src/_includes/components/tabs/tabs.scss

@@ -1,105 +0,0 @@
-.c-tabs {
-  .no-js &__content > * {
-    display: none;
-
-    &:target {
-      display: block;
-    }
-  }
-
-  .no-js &__content > * + * {
-    @include margin-top('gutter');
-  }
-
-  &__content > * {
-    display: none;
-
-    &.c-tab--active {
-      display: block;
-    }
-  }
-
-  .no-js &--flex &__content > * {
-    display: none;
-
-    &:target {
-      display: flex;
-    }
-  }
-  
-  &--flex &__content > * {
-    display: none;
-
-    &.c-tab--active {
-      display: flex;
-      justify-content: stretch;
-    }
-  }
-  
-  &__controls {
-    @include margin-bottom('m');
-    overflow-x: auto;
-    
-    &-list {
-      border-bottom: 4px solid color('utility-blue', 'step-3');
-      display: flex;
-      width: 100%;
-      min-width: min-content;
-
-      li {
-        display: flex;
-      }
-    }
-  }
-
-  &__control {
-    .mp & {
-      color: color('utility-blue');
-    }
-
-    font-weight: weight('bold');
-    @include step(-1);
-    @include padding(0, 0 , 's-m');
-    @include margin-right('m');
-    display: block;
-    border-bottom: 4px solid color('utility-blue', 'step-3');
-    margin-bottom: -4px;
-    position: relative;
-    z-index: 1;
-
-    @media screen and (max-width:55em) {
-      white-space: nowrap;
-    }
-
-    .c-tabs__controls-list > li:last-child & {
-      @include margin-right(0);
-    }
-    
-    &.c-twi {
-      display: flex;
-      padding-right: 1.875rem;
-
-      svg {
-        position: absolute;
-        right: 0;
-      }
-    }
-  }
-  
-  :checked + &__control,
-  &__control--active {
-    border-bottom-color: color('utility-blue');
-  }
-
-  :focus + &__control {
-    outline: 2px solid;
-  }
-
-  .c-tab {
-    width: 100%;
-
-    &:focus {
-      outline: none;
-    }
-  }
-}

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

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

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

@@ -1,46 +0,0 @@
-module.exports = {
-  title: 'Text with icon',
-  component: {
-    name: 'twi',
-  },
-  figma: 'https://www.figma.com/file/rUQ6aPQAfBX55o3hH0Lqb3/Design-exploration?node-id=312%3A341',
-  docs: true,
-  context: {
-    label: 'Test',
-    icon: 'arrow-right',
-  },
-  // version: '0.6',
-  status: 'Ready',
-  variants: [
-    {
-      title: 'As link',
-      context: {
-        classes: 'u-link',
-        link: '#',
-      }
-    },
-    {
-      title: 'Align right',
-      context: {
-        align: 'right'
-      }
-    }
-  ],
-  props: [
-    {
-      table: [
-        ['label', 'string'],
-        ['link', 'string'],
-        ['icon', 'string', 'The id for the <a href="/components/icons">icon</a> component'],
-        ['classes', 'string', 'Additional class attributes'],
-        ['align', 'string', '"left" or "right"']
-      ]
-    },
-    {
-      title: 'CSS modifiers',
-      table: [
-        ['c-twi--[align]', 'left, right', 'Which side is the icon rendered? (defaults to right)']
-      ]
-    }
-  ]
-}

package/src/_includes/components/twi/twi.md

@@ -1 +0,0 @@
-Text with icon, or `twi` is a helper component to compose an icon with a label. Commonly used for [breadcrumbs](/components/breadcrumb), this pattern allows you to pass in an icon `id` and a `label`, along with a few additional styling options.

package/src/_includes/components/twi/twi.njk

@@ -1,30 +0,0 @@
-{%- from "components/icon/macro.njk" import icon -%}
-
-{%- set classNames = "mp c-twi" -%}
-{%- set align = params.align or 'left' -%}
-
-{%- if params.classes %}
-  {% set classNames = classNames + " " + params.classes %}
-{%- endif -%}
-
-{%- set classNames = classNames + " c-twi--" + align -%}
-
-{%- set attrs = '' -%}
-{%- if params.attrs -%}
-  {% set attrs = ' ' + params.attrs %}
-{%- endif -%}
-
-{%- if params.link != null -%}
-  <a href="{{ params.link }}" class="{{ classNames }}"{{ attrs }}>
-{%- else -%}
-  <span class="{{ classNames }}" {{ attrs }}>
-{%- endif -%}
-
-  <span>{{ params.label }}</span>
-  {{ icon({ id: params.icon or 'arrow-right' }) }}
-
-{%- if params.link != null -%}
-  </a>
-{%- else -%}
-  </span>
-{%- endif -%}

package/src/_includes/components/twi/twi.scss

@@ -1,44 +0,0 @@
-.c-twi {
-  $twi-space: 0.5em;
-  display: inline-flex;
-  justify-content: flex-start;
-  align-items: center;
-  color: inherit;
-  text-decoration: none;
-
-  &:hover,
-  &:focus {
-    text-decoration: inherit;
-  }
-
-  svg {
-    margin-left: $twi-space;
-    font-size: 1.25em;
-    position: static !important;
-    flex-shrink: 0;
-  }
-
-  &--left svg {
-    margin-right: $twi-space;
-    margin-left: 0;
-    order: -1;
-  }
-
-  &--small {
-    @include step(-1);
-  }
-}
-
-.c-twi--grey {
-  color: color('grey', 'step-1');
-
-  svg {
-    color: color('grey', 'step-2');
-  }
-}
-
-.c-twi--green {
-  svg {
-    color: color('green');
-  }
-}

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

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

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

@@ -1,55 +0,0 @@
-module.exports = {
-  title: 'USP',
-  component: {
-    name: 'usp',
-  },
-  docs: true,
-  figma: 'https://www.figma.com/file/rUQ6aPQAfBX55o3hH0Lqb3/Design-exploration?node-id=686%3A17868',
-  preview: 'cards-three',
-  context: {
-    title: 'Superior speed. Peerless precision.',
-    content: '<p>Class-leading particle sizing performance that generates the robust, reliable data you need</p>'
-  },
-  variants: [
-    {
-      title: 'Bordered',
-      context: {
-        classes: 'c-usp c-usp--bordered'
-      }
-    },
-    {
-      title: 'With icon',
-      context: {
-        classes: 'c-usp c-usp--center',
-        content: false,
-        icon: {
-          url: 'https://p3.aprimocdn.net/malvernpanalytical/7da9e7e5-edca-4d49-bc7f-b11401123c52/icon-stopwatch_Original%20file.svg'
-        }
-      }
-    },
-    {
-      title: 'With eyebrow',
-      context: {
-        eyebrow: 'Improve efficiency'
-      }
-    },
-    {
-      title: 'With link',
-      context: {
-        link: 'https://www.brand.malvernpanalytical.com'
-      }
-    }
-  ],
-  props: [
-    {
-      table: [
-        ['title', 'string'],
-        ['content', 'html', 'HTML passed to the prose field'],
-        ['link', 'string (deprecated)'],
-        ['eyebrow', 'string'],
-        ['icon.svg', 'svg', 'HTML/SVG which is output raw'],
-        ['icon.url', 'string', 'image url']
-      ]
-    }
-  ]
-}

package/src/_includes/components/usp/usp.md

@@ -1,101 +0,0 @@
-# Blank HTML templates
-
-{% accordion %}
-
-{% accordionItem "Grid of four, icon & text, left-aligned" %}
-
-```html
-<div class="o-grid o-grid--of-four">
-
-  <!-- First USP block: duplicate this -->
-  <div class="mp c-usp">
-    <div class="u-flow">
-      <div class="c-usp__icon">
-        <img src="https://p3.aprimocdn.net/malvernpanalytical/etc" />
-      </div>
-      <h3 class="c-h c-h--step-1 c-usp__title">Handles the toughest conditions</h3>
-      <div class="mp o-prose u-step--1">
-        <p>FORJ is designed for less thermal stress and reduced risk of contamination - which means low maintenance and high productivity.</p>
-      </div>
-    </div>
-  </div>
-
-  <!-- etc. -->
-
-</div>
-```
-
-{% endaccordionItem %}
-
-{% accordionItem "Grid of three, eyebrow & text, left-aligned" %}
-
-```html
-<div class="o-grid o-grid--of-three">
-
-  <!-- First USP block: duplicate this -->
-  <div class="mp c-usp">
-    <div class="u-flow ">
-      <span class="c-usp__eyebrow">Greater flexibility</span>
-      <h3 class="c-h c-h--step-2 c-usp__title">Impressive particle sizing performance</h3>
-      <div class="mp o-prose u-step--1">
-        <p>High sample throughput and a measurement size range from 10nm to 3.5mm</p>
-      </div>
-    </div>
-  </div>
-
-  <!-- etc. -->
-
-</div>
-```
-
-{% endaccordionItem %}
-
-  {% accordionItem "Grid of seven (or more), icons only, centered" %}
-
-```html
-<div class="o-grid o-grid--of-three u-justify-center">
-
-  <!-- First USP block: duplicate this -->
-  <div class="mp c-usp c-usp c-usp--center">
-    <div class="u-flow u-text-center">
-      <div class="c-usp__icon">
-        <img src="https://p3.aprimocdn.net/malvernpanalytical/etc" />
-      </div>
-      <h3 class="c-h c-h--step-1 c-usp__title">Handles the toughest conditions</h3>
-    </div>
-  </div>
-
-  <!-- etc. -->
-
-</div>
-```
-
-{% endaccordionItem %}
-
-{% endaccordion %}
-
----
-
-A USP can include a few elements:
-- Icon (optional)
-- Eyebrow (optional)
-- Title (required)
-- Body text (optional)
-
-When using USPs, please follow these guidelines:
-
-- Keep the same layout for all USPs within a group
-- Icon and eyebrow are mutually exclusive - you can have one or the other, not both
-- **Grid**
-  - Use a three- or four-column grid depending on the number of USPs
-  - 2, 3, 5, or 6 USPs: three columns
-  - 4, 7, or 7+ USPs: four columns
-- **Alignment**
-  - If body text or eyebrow is present, all elements in the USP are left-aligned
-  - If there's no body text or eyebrow, the USP may be centered
-- **Font size**
-  - Body text font size is always step -1
-  - Title text is step 2 when using a three-column grid
-  - or step 1 when using a four-column grid
-
----

package/src/_includes/components/usp/usp.njk

@@ -1,42 +0,0 @@
-{% set classNames = "c-usp" %}
-{%- if params.classes -%}
-  {% set classNames = classNames + " " + params.classes %}
-{%- endif -%}
-
-{% set align = "" %}
-{% if not params.content %}
-  {% set align = "u-text-center" %}
-{% endif %}
-
-{% set size = "c-h--step-2" %}
-{% if params.size %}
-  {% set size = params.size %}
-{% endif %}
-
-<div class="mp {{classNames}}">
-  <div class="u-flow {{align}}">
-    {% if params.eyebrow %}
-      <span class="c-usp__eyebrow">
-        {{ params.eyebrow }}
-      </span>
-    {% endif %}
-    {% if params.icon %}
-      <div class="c-usp__icon">
-        {% if params.icon.svg %}
-          {{params.icon.svg | safe}}
-        {% elseif params.icon.url %}
-          <img src="{{params.icon.url}}"/>
-        {% endif %}
-      </div>
-    {% endif %}
-    <h3 class="c-h {{size}} c-usp__title">{{ params.title }}</h3>
-    {% if params.content %}
-      <div class="mp o-prose u-step--1">
-        {{ params.content | safe }}
-      </div>
-    {% endif %}
-  </div>
-  {% if params.link %}
-    <a href="{{ params.link }}" class="c-usp__link">{{ params.title }}</a>
-  {% endif %}
-</div>

package/src/_includes/components/usp/usp.scss

@@ -1,60 +0,0 @@
-.c-usp {
-  @include padding-top('s-m');
-  @include padding-bottom('s-m');
-  position: relative;
-  
-  &--bordered {
-    @include padding('s-m');
-    border: 1px solid;
-    border-image-slice: 1;
-    border-image-source: linear-gradient(to right, rgba(color('blue'),0.5), rgba(color('green'),0.5));
-  }
-
-  &--center {
-    .c-usp__icon,
-    .c-usp__title {
-      margin-left: auto;
-      margin-right: auto;
-    }
-  }
-
-  &__title {
-    max-width: 300px;
-    color: color('petrol');
-
-    @supports(-webkit-text-fill-color:transparent) {
-      background-image: linear-gradient(to right, color('petrol'), color('blue') );
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      // display: inline-block;
-
-      &::selection {
-        -webkit-background-clip: none;
-      }
-    }
-  }
-
-  &__link {
-    @extend .u-fill, .u-fill--link;
-    margin-top: 0;
-  }
-
-  &__icon {
-    @include space('height','l');
-    @include space('width','l');
-
-    .c-usp--center & {
-      @include space('height','xl');
-      @include space('width','xl');
-    }
-  }
-
-  &__eyebrow {
-    @include padding('3xs', 'xs');
-    @include step(-1);
-    border-radius: 2em;
-    background: #c2e9f0;
-    color: #005461;
-    display: inline-block;
-  }
-}

package/src/_includes/content-page.njk

@@ -1,53 +0,0 @@
----
-sidebar: components
----
-
-{% from "components/twi/macro.njk" import twi %}
-
-{% extends "library.njk" %}
-
-{% block content %}
-  <div class="u-wrap u-flow u-pad-y-m-l">
-    <div class="u-split">
-      <h1 class="c-h c-h--page-title">{{ title }}</h1>
-      {% if version or status %}
-        <div>
-          {% if version %}<span class="c-library-version">Version {{ version }}</span>{% endif %}
-          {% if status %}<span class="u-margin-left-xs c-library-status c-library-status--{{ status | slug }}">{{ status }}</span>{% endif %}
-        </div>
-      {% endif %}
-    </div>
-    
-    <div class="mp o-prose o-prose--left-blockquote u-flow--prose u-wrap--content">
-      {{ content | safe }}
-    </div>
-
-    <div class="u-wrap--content">
-    {% if sidebar == 'content' %}
-      {% set previousPost = collections.content | getPreviousCollectionItem(page) %}
-      {% set nextPost = collections.content | getNextCollectionItem(page) %}
-
-      <div class="u-split u-pad-top-l">
-        {% if previousPost %}
-          {{ twi({
-            link: previousPost.url,
-            label: previousPost.data.title,
-            classes: "u-link u-step--1",
-            icon: "arrow-left"
-          })}}
-        {% endif %}
-        {% if nextPost %}
-          {{ twi({
-            link: nextPost.url,
-            label: nextPost.data.title,
-            classes: "u-link u-step--1",
-            icon: "arrow-right",
-            align: 'right'
-          })}}
-        {% endif %}
-      </div>
-    {% endif %}
-    </div>
-
-  </div>
-{% endblock %}