mp-design-system 1.2.64 → 1.2.66

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

@@ -1,84 +0,0 @@
-module.exports = {
-    title: 'Eyebrow',
-    component: {
-        name: 'eyebrow',
-    },
-    context: {
-        text: 'Product range',
-        colour: ''
-    },
-    variants: [
-        {
-            title: 'Blue',
-            context: {
-                text: 'Product range',
-                colour: 'blue'
-            }
-        },
-        {
-            title: 'Blue step 2',
-            context: {
-                text: 'Product range',
-                colour: 'blue-step-2'
-            }
-        },
-        {
-            title: 'Grey',
-            context: {
-                text: 'Product range',
-                colour: 'grey'
-            }
-        },
-        {
-            title: 'Petrol',
-            context: {
-                text: 'Product range',
-                colour: 'petrol'
-            }
-        },
-        {
-            title: 'Red',
-            context: {
-                text: 'Product range',
-                colour: 'red'
-            }
-        },
-        {
-            title: 'Utility blue',
-            context: {
-                text: 'Product range',
-                colour: 'utility-blue'
-            }
-        },
-        {
-            title: 'Utility blue step 3',
-            context: {
-                text: 'Product range',
-                colour: 'utility-blue-step-3'
-            }
-        },
-        {
-            title: 'Utility blue step 3 with icon',
-            context: {
-                text: 'Product range',
-                colour: 'utility-blue-step-3',
-                icon: 'cross'
-            }
-        },
-        {
-            title: 'Utility orange',
-            context: {
-                text: 'Product range',
-                colour: 'utility-orange'
-            }
-        },
-        {
-            title: 'White',
-            context: {
-                text: 'Store',
-                colour: 'white',
-                icon: 'shopping-cart'
-            }
-        }
-    ]
-}

package/src/_includes/components/eyebrow/eyebrow.njk

@@ -1,24 +0,0 @@
-{%- from "components/icon/macro.njk" import icon -%}
-
-{%- set classNames = "mp c-eyebrow" -%}
-
-{%- if params.colour -%}
-  {% set classNames = classNames + " c-eyebrow--" + params.colour %}
-{% endif -%}
-
-{%- if params.icon -%}
-  <button class="{{ classNames }}">
-{%- else -%}
-  <span class="{{ classNames }}">
-{% endif -%}
-  {%- if params.text -%}
-    {{ params.text }}
-  {% endif -%}
-  {%- if params.icon -%}
-    {{ icon({ id: params.icon }) }}
-  {% endif -%}
-{%- if params.icon -%}
-  </button>
-{%- else -%}
-  </span>
-{% endif -%}

package/src/_includes/components/eyebrow/eyebrow.scss

@@ -1,71 +0,0 @@
-.c-eyebrow {
-  background-color: color('green');
-  color: color('white');
-  @include padding('3xs', 'xs');
-  border: 1px solid color('green');
-  border-radius: 2em;
-  display: inline-flex;
-  align-items: center;
-  @include step(-1);
-  letter-spacing: -0.01em;
-  text-wrap: nowrap;
-
-  &--blue {
-    background-color: color('blue');
-    border-color: color('blue');
-  }
-
-  &--blue-step-2 {
-    background-color: color('blue', 'step-2');
-    color: color('petrol');
-    border-color: color('blue', 'step-2');
-  }
-
-  &--grey {
-    background-color: color('grey');
-    border-color: color('grey');
-  }
-
-  &--petrol {
-    background-color: color('petrol');
-    border-color: color('petrol');
-  }
-
-  &--red {
-    background-color: color('red');
-    border-color: color('red');
-  }
-
-  &--utility-blue {
-    background-color: color('utility-blue');
-    border-color: color('utility-blue');
-  }
-
-  &--utility-blue-step-3 {
-    background-color: color('utility-blue', 'step-3');
-    color: color('utility-blue');
-    border-color: color('utility-blue', 'step-2');
-  }
-
-  &--utility-orange {
-    background-color: color('utility-orange', 'step-1');
-    color: color('grey');
-    border-color: color('utility-orange', 'step-1');
-  }
-
-  &--white {
-    background-color: color('white');
-    color: color('petrol');
-    border-color: color('petrol');
-  }
-}
-
-button.c-eyebrow {
-  &--utility-blue-step-3:where(:hover, :focus) {
-    border-color: color('utility-blue', 'step-1');
-  }
-
-  svg {
-    @include margin-left('2xs');
-  }
-}

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

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

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

@@ -1,110 +0,0 @@
-module.exports = {
-  title: 'Facet',
-  component: {
-    name: 'facet'
-  },
-  figma: '',
-  preview: 'sidebar',
-  context: {
-    facets: [
-      {
-        id: 'products',
-        heading: 'Products',
-        options: [
-          {
-            id: 'mastersizer-3000-lab',
-            value: 'Mastersizer 3000+ Lab',
-            label: 'Mastersizer 3000+ Lab (20)',
-          },
-          {
-            id: 'mastersizer-3000-pro',
-            value: 'Mastersizer 3000+ Pro',
-            label: 'Mastersizer 3000+ Pro (5)',
-          },
-          {
-            id: 'mastersizer-3000-ultra',
-            value: 'Mastersizer 3000+ Ultra',
-            label: 'Mastersizer 3000+ Ultra (1)',
-          }
-        ]
-      }
-    ]
-  },
-  variants: [
-    {
-      title: 'Multiple',
-      context: {
-        facets: [
-          {
-            id: 'products',
-            heading: 'Products',
-            options: [
-              {
-                id: 'mastersizer-3000-lab',
-                value: 'Mastersizer 3000+ Lab',
-                label: 'Mastersizer 3000+ Lab (20)',
-              },
-              {
-                id: 'mastersizer-3000-pro',
-                value: 'Mastersizer 3000+ Pro',
-                label: 'Mastersizer 3000+ Pro (5)',
-              },
-              {
-                id: 'mastersizer-3000-ultra',
-                value: 'Mastersizer 3000+ Ultra',
-                label: 'Mastersizer 3000+ Ultra (1)',
-              }
-            ]
-          },
-          {
-            id: 'technologies',
-            heading: 'Technologies',
-            options: [
-              {
-                id: 'borate-fusion',
-                value: 'Borate fusion',
-                label: 'Borate fusion (16)',
-              },
-              {
-                id: 'differential-scanning-calorimetry',
-                value: 'Differential Scanning Calorimetry (DSC)',
-                label: 'Differential Scanning Calorimetry (DSC) (18)',
-              },
-              {
-                id: 'dynamic-light-scattering',
-                value: 'Dynamic Light Scattering',
-                label: 'Dynamic Light Scattering (72)',
-              }
-            ]
-          },
-          {
-            id: 'measurementTypes',
-            heading: 'Measurement types',
-            options: [            
-              {
-                id: 'structure-imaging',
-                value: '3D structure / imaging',
-                label: '3D structure / imaging (2)',
-              },
-              {
-                id: 'binding-affinity',
-                value: 'Binding affinity',
-                label: 'Binding affinity (10)',
-              },
-              {
-                id: 'binding-kinetics',
-                value: 'Binding kinetics',
-                label: 'Binding kinetics (11)',
-              }
-            ]
-          }
-        ]
-      }
-    }
-  ],
-  props: [
-    {
-      table: []
-    }
-  ]
-}

package/src/_includes/components/facet/facet.njk

@@ -1,25 +0,0 @@
-{% from "components/icon/macro.njk" import icon %}
-{% from "components/input/macro.njk" import checkbox %}
-
-<ul class="u-remove-bullets">
-  {% for facet in params.facets %}
-    <li class="c-facet">
-      <button class="c-facet__toggle" aria-expanded="false" aria-controls="{{ facet.id }}">
-        {{ facet.heading }}
-        {{ icon({ id: 'chevron-down' }) }}
-      </button>
-      <ul id="{{ facet.id }}" class="c-facet__list">
-        {% for option in facet.options %}
-          <li>
-            {{ checkbox({
-                name: facet.id,
-                id: option.id,
-                value: option.value,
-                label: option.label
-            }) }}
-          </li>
-        {% endfor %}
-      </ul>
-    </li>
-  {% endfor %}
-</ul>

package/src/_includes/components/facet/facet.scss

@@ -1,49 +0,0 @@
-.c-facet {
-  border-top: 1px solid color('petrol', 'step-2');
-
-  &:last-child {
-    border-bottom: 1px solid color('petrol', 'step-2');
-  }
-
-  &__toggle {
-    width: 100%;
-    @include padding('s', 0);
-    display: inline-flex;
-    justify-content: space-between;
-    align-items: center;
-    @include step(-1);
-    font-weight: bold;
-    text-transform: uppercase;
-
-    svg {
-      color: color('utility-blue');
-      line-height: 1;
-      font-size: 1rem;
-    }
-  }
-
-  &__list {
-    @extend .u-remove-bullets, .u-flow--s;
-    @include padding('s');
-    display: none;
-    max-height: 215px;
-    overflow-y: auto;
-  }
-
-  &--open {
-    .c-facet {
-      &__toggle {
-        color: color('utility-blue');
-        border-bottom: 1px solid color('petrol', 'step-2');
-
-        svg {
-          transform: rotate(180deg);
-        }
-      }
-
-      &__list {
-        display: block;
-      }
-    }
-  }
-}

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

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

package/src/_includes/components/featured-article-card/featured-article-card.config.js

@@ -1,32 +0,0 @@
-const categories = require('../component/categories');
-
-module.exports = {
-  title: 'Featured article card',
-  category: categories.card,
-  component: {
-    name: 'featured-article-card'
-  },
-  figma: '',
-  docs: false,
-  context: {
-    title: 'Low molecular weight analysis with OMNISEC',
-    description: '<p>When you think of gel permeation chromatography / size exclusion chromatography (GPC/SEC) you probably associate the technique with the analysis of macromolecules such as proteins and polymers. After all, that’s what it does best!</p>',
-    meta: '<p>By Malvern Panalytical, Wednesday 6 January 2021</p>',
-    image: {
-      src: '/static/img/featured-blog-post.jpg',
-      alt: ''
-    },
-    link: '/prototype/blog-post'
-  },
-  props: [
-    {
-      table: [
-        ['title', 'string'],
-        ['description', 'html'],
-        ['meta', 'string', 'Passed to PostMeta component'],
-        ['image', 'object', 'Image object'],
-        ['link', 'string']
-      ]
-    }
-  ]
-}

package/src/_includes/components/featured-article-card/featured-article-card.njk

@@ -1,24 +0,0 @@
-{% from "components/post-meta/macro.njk" import postMeta %}
-{% from "components/twi/macro.njk" import twi %}
-
-{%- set classNames = "mp c-featured-article-card" -%}
-
-{%- if params.classes -%}
-  {% set classNames = classNames + " " + params.classes %}
-{% endif %}
-
-<article class="{{ classNames }}">
-  <a class="u-fill u-fill--link" href="{{ params.link }}">{{ params.title }}</a>
-  {% if params.image.src %}
-    <figure class="c-featured-article-card__image">
-      <img src="{{ params.image.src }}" alt="{{ params.image.alt }}" />
-    </figure>
-  {% endif %}
-  <div class="c-featured-article-card__content u-flow">
-    <h2 class="c-h c-h--step-4 c-featured-article-card__title">{{ params.title }}</h2>
-    {{ postMeta({ content: params.meta }) }}
-    <div class="u-lede mp o-prose u-flow--prose">
-      {{ params.description | safe }}
-    </div>
-  </div>
-</article>

package/src/_includes/components/featured-article-card/featured-article-card.scss

@@ -1,34 +0,0 @@
-.c-featured-article-card {
-  position: relative;
-  background: color('petrol', 'step-3');
-
-  &__content {
-    @include padding('s-l');
-  }
-
-  .c-post-meta {
-    @include margin('s', 0);
-  }
-
-  @media (min-width: 45em) {
-    display: flex;
-
-    &__content {
-      flex-basis: 50%;
-    }
-
-    &__image {
-      position: relative;
-      flex-basis: 50%;
-
-      img {
-        position: absolute;
-        height: 100%;
-        width: 100%;
-        left: 0;
-        top: 0;
-        object-fit: cover;
-      }
-    }
-  }
-}

package/src/_includes/components/featured-article-card/macro.njk

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

package/src/_includes/components/features-table/features-table.config.js

@@ -1,137 +0,0 @@
-const products = [
-  {
-    title: 'Mastersizer 3000',
-    link: '/prototype/product/',
-    image: {
-      src: '/static/img/range-product-1.jpg',
-      alt: 'Mastersizer 3000'
-    },
-    description: 'Delivering the data you need for outcomes you can trust',
-    range: '0.01µm - 3500µm',
-    checklist: [
-      {
-        title: 'Automated wet',
-        value: true,
-      },
-      {
-        title: 'Automated dry powder',
-        value: true,
-      },
-      {
-        title: 'Manual wet',
-        value: true,
-      },
-      {
-        title: 'Manual dry powder',
-        value: false,
-      },
-      {
-        title: '21 CFR Part 11 support',
-        value: true,
-      },
-      {
-        title: 'IQ/OQ validation',
-        value: true,
-      },
-      {
-        title: 'Data quality assessment',
-        value: true,
-      }
-    ]
-  },
-  {
-    title: 'Mastersizer 3000E',
-    link: '/prototype/product/',
-    image: {
-      src: '/static/img/range-product-2.jpg',
-      alt: 'Mastersizer 3000E'
-    },
-    description: 'Entry level particle size analyzer',
-    checklist: [
-      {
-        title: 'Automated wet',
-        value: true,
-      },
-      {
-        title: 'Automated dry powder',
-        value: true,
-      },
-      {
-        title: 'Manual wet',
-        value: true,
-      },
-      {
-        title: 'Manual dry powder',
-        value: false,
-      },
-      {
-        title: '21 CFR Part 11 support',
-        value: true,
-      },
-      {
-        title: 'IQ/OQ validation',
-        value: true,
-      },
-      {
-        title: 'Data quality assessment',
-        value: true,
-      }
-    ]
-  },
-  {
-    title: 'Mastersizer 3000E',
-    link: '/prototype/product/',
-    image: {
-      src: '/static/img/range-product-2.jpg',
-      alt: 'Mastersizer 3000E'
-    },
-    description: 'Entry level particle size analyzer',
-    checklist: [
-      {
-        title: 'Automated wet',
-        value: true,
-      },
-      {
-        title: 'Automated dry powder',
-        value: true,
-      },
-      {
-        title: 'Manual wet',
-        value: true,
-      },
-      {
-        title: 'Manual dry powder',
-        value: false,
-      },
-      {
-        title: '21 CFR Part 11 support',
-        value: true,
-      },
-      {
-        title: 'IQ/OQ validation',
-        value: true,
-      },
-      {
-        title: 'Data quality assessment',
-        value: true,
-      }
-    ]
-  }
-]
-
-module.exports = {
-  title: 'Features table',
-  component: {
-    name: 'features-table',
-  },
-  context: {
-    sections: [
-      {
-        title: 'Compatible sample dispersions',
-      }
-    ],
-    products: [
-      ...products
-    ]
-  }
-}