mp-design-system 1.2.64 → 1.2.66

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

@@ -1,35 +0,0 @@
-module.exports = {
-  title: 'Series',
-  component: {
-    name: 'series',
-  },
-  context: {
-    links: [{
-      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'
-    }]
-  },
-  props: [
-    {
-      table: [
-        ['links', 'link[]', 'Array of links']
-      ]
-    },
-    {
-      title: '<code>link</code>',
-      table: [
-        ['link', 'string'],
-        ['label', 'string'],
-        ['active', 'bool']
-      ]
-    }
-  ]
-}

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

@@ -1,15 +0,0 @@
-{%- from "components/twi/macro.njk" import twi -%}
-
-<ul class="mp c-series">
-  {% for item in params.links %}
-    {% if item.active %}
-      <li>
-        <a href="{{ item.link }}" class="u-link u-link--red">{{ item.label }}</a>
-      </li>
-    {% else %}
-      <li>
-        {{ twi({ label: item.label, link: item.link, classes: 'u-link', icon: 'arrow-right' }) }}
-      </li>
-    {% endif %}
-  {% endfor %}
-</ul>

package/src/_includes/components/series/series.scss

@@ -1,20 +0,0 @@
-.c-series {
-  @include step(-1);
-  list-style: none;
-  flex-wrap: wrap;
-  display: flex;
-  @include gap('2xs', 's');
-  align-items: center;
-
-  .mp {
-    font-size: inherit;
-  }
-
-  li {
-    padding-right: 1rem;
-
-    @supports (gap: 1rem) {
-      padding-right: 0;
-    }
-  }
-}

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

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

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

@@ -1,36 +0,0 @@
-const categories = require('../component/categories');
-
-module.exports = {
-  title: 'Signpost',
-  category: categories.card,
-  component: {
-    name: 'signpost',
-  },
-  figma: 'https://www.figma.com/file/rUQ6aPQAfBX55o3hH0Lqb3/Design-exploration?node-id=478%3A12704',
-  context: {
-    link: '',
-    icon: 'large-student',
-    title: 'Dive into our knowledge center',
-    description: 'Our huge freely-available library of manuals, instrument and application information.'
-  },
-  variants: [
-    {
-      title: "Vertical",
-      preview: 'cards-three',
-      context: {
-        direction: 'vertical',
-        size: 'l',
-        color: 'blue',
-        icon: 'icon-user-training--white',
-        description: false
-      }
-    },
-    {
-      title: "Bordered",
-      preview: 'cards-two',
-      context: {
-        name: 'bordered'
-      }
-    }
-  ]
-}

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

@@ -1,21 +0,0 @@
-{% set className %}{{
-"c-signpost--vertical " if params.direction == "vertical" }}{{ 
-"c-signpost--l " if params.size == "l" }}{{ 
-"c-signpost--bordered " if params.name == "bordered" }}{{ 
-"u-white u-bg-" if params.color }}{{params.color}}
-{% endset %}
-
-<article
-  class="mp c-signpost {{ className }} {{ params.classes }}">
-  <a class="c-signpost__link" href="{{ params.link }}">
-    <figure class="c-signpost__image">
-      <img src="/static/svg/{{ params.icon }}.svg" />
-    </figure>
-    <div class="c-signpost__content u-flow--2xs">
-      <h3 class="{{ "c-h c-h--step--1" if params.direction !== "vertical" }}">{{ params.title }}</h3>
-      {% if params.description %}
-        <p>{{ params.description }}</p>
-      {% endif %}
-    </div>
-  </a>
-</article>

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

@@ -1,66 +0,0 @@
-.c-signpost {
-  &--bordered {
-    @extend .u-border;
-    display: flex;
-  }
-  
-  &__link {
-    display: flex;
-    align-items: center;
-    
-    .c-signpost--bordered & {
-      @include padding('xs');
-      align-self: stretch;
-      flex-grow: 1;
-      justify-content: center;
-    }
-  }
-
-  &__image {
-    @include margin-right('s-m');
-    width: 20%;
-    max-width: 72px;
-    flex-grow: 1;
-    flex-shrink: 0;
-
-    .c-signpost--l & {
-      max-width: var(--space-3xl);
-      width: auto;
-    }
-  }
-
-  &__content {
-    @include step(-1);
-
-    p {
-      color: color('utility-blue');
-      text-decoration: underline;
-    }
-
-    .c-signpost--l & {
-      @include step(0);
-    }
-  }
-
-  &:hover &__content p {
-    text-decoration: none;
-  }
-}
-
-.c-signpost--vertical {
-  @include cutoff($size: #{var(--space-m)});
-  display: flex;
-
-  .c-signpost__link {
-    flex-direction: column;
-    flex-grow: 1;
-    @include padding('m');
-    text-align: center;
-  }
-
-  .c-signpost__image {
-    @include margin-bottom('s-m');
-    flex-grow: 0;
-    margin-right: 0;
-  }
-}

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

@@ -1,59 +0,0 @@
-module.exports = {
-  title: 'Slat',
-  component: {
-    name: 'slat',
-  },
-  context: {
-    classes: 'c-slat'
-  },
-  variants: [
-    {
-      title: 'White - spaced',
-      context: {
-        classes: 'c-slat c-slat--white'
-      }
-    },
-    {
-      title: 'White - no spacing',
-      context: {
-        classes: 'c-slat--white'
-      }
-    },
-    {
-      title: 'Grey',
-      context: {
-        classes: 'c-slat c-slat--grey'
-      }
-    },
-    {
-      title: 'Concentric',
-      context: {
-        classes: 'c-slat c-slat--grey c-slat--concentric'
-      }
-    },
-    {
-      title: 'Dots',
-      context: {
-        classes: 'c-slat c-slat--grey c-slat--dots'
-      }
-    },
-    {
-      title: 'Crystal',
-      context: {
-        classes: 'c-slat c-slat--grey c-slat--crystal'
-      }
-    },
-    {
-      title: 'Arc',
-      context: {
-        classes: 'c-slat c-slat--grey c-slat--arc'
-      }
-    },
-    {
-      title: 'Large padding',
-      context: {
-        classes: 'c-slat c-slat--padded'
-      }
-    }
-  ]
-}

package/src/_includes/components/slat/slat.njk

@@ -1,15 +0,0 @@
-{% from "components/usp/macro.njk" import usp %}
-
-<pre class="c-library-pre c-library-pre--bordered"><code>{{ params.classes }}</code></pre>
-
-<div class="{{ params.classes }}">
-  <div class="o-grid o-grid--of-three">
-    <span></span>
-    {{ usp({
-      title: 'Example content',
-      content: '<p>This content is centered for effect, to show any graphics appearing on the right, or left of this slat.</p>',
-      classes: 'c-usp c-usp--bordered'
-    }) }}
-    <span></span>
-  </div>
-</div>

package/src/_includes/components/slat/slat.scss

@@ -1,53 +0,0 @@
-.c-slat {
-  @include padding-bottom('m-l');
-  @include padding-top('m-l');
-
-  &--grey {
-    background-color: color('petrol', 'step-3');
-  }
-
-  &--white {
-    background-color: color('white');
-  }
-
-  &--concentric {
-    background-image: url('../svg/concentric.svg');
-    background-repeat: no-repeat;
-    background-position: right top;
-    background-size: auto 50%;
-
-    @media (min-width: 40em) {
-      background-size: auto 100%;
-    }
-  }
-
-  &--dots {
-    background-image: url('../svg/dots-pattern.svg');
-    background-repeat: no-repeat;
-    background-position: left top;
-    background-size: auto 100%;
-  }
-  
-  &--crystal {
-    background-image: url('../svg/crystal.svg');
-    background-repeat: no-repeat;
-    background-position: right bottom;
-    background-size: auto 100%;
-  }
-  
-  &--arc {
-    background-image: url('../svg/arc.svg');
-    background-repeat: no-repeat;
-    background-position: right bottom;
-    background-size: auto 100%;
-  }
-
-  &--padded {
-    @include padding-bottom('l-2xl');
-    @include padding-top('l-2xl');
-  }
-
-  &__title {
-    @include step(5);
-  }
-}

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

@@ -1,11 +0,0 @@
-{% macro tableRow(rows) %}
-  <tr>
-    {% for item in rows %}
-      {% if loop.index == 1 %}
-        <th>{{ item }}</th>
-      {% else %}
-        <td>{{ item }}</td>
-      {% endif %}
-    {% endfor %}
-  </tr>
-{% endmacro %}

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

@@ -1,68 +0,0 @@
-module.exports = {
-  title: 'Table',
-  docs: true,
-  component: {
-    name: 'table'
-  },
-  context: {
-    headers: ['Name', 'Description'],
-    rows: [
-      ['Aeris', 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.'],
-      ['OMNISEC', 'Nullam quis risus eget urna mollis ornare vel eu leo.']
-    ]
-  },
-  variants: [
-    {
-      title: 'Fixed Layout',
-      context: {
-        classes: 'c-table--fixed'
-      }
-    },
-    {
-      title: 'Vertical headers',
-      context: {
-        theme: 'vertical'
-      }
-    },
-    {
-      title: 'No headers',
-      context: {
-        theme: 'none'
-      }
-    },
-    {
-      title: 'Center',
-      context: {
-        classes: 'c-table--center',
-        rows: [
-          ['Aeris', 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.<br />Vestibulum id ligula porta felis euismod semper.<br />Sed posuere consectetur est at lobortis.'],
-          ['OMNISEC', 'Nullam quis risus eget urna mollis ornare vel eu leo.']
-        ]
-      }
-    },
-    {
-      title: 'Responsive',
-      context: {
-        classes: 'c-table--responsive'
-      }
-    },
-    {
-      title: 'Responsive 3 rows',
-      context: {
-        classes: 'c-table--responsive',
-        headers: ['Name', 'Type', 'Description'],
-        rows: [
-          ['Aeris', 'Value 1.1', 'Value 1.2'],
-          ['OMNISEC', 'Value 2.1', 'Value 2.2'],
-        ]
-      }
-    },
-    {
-      title: 'Non-responsive 3 rows',
-      context: {
-        classes: 'c-table--responsive',
-        attrs: 'data-columns=3'
-      }
-    }
-  ]
-}

package/src/_includes/components/table/table.md

@@ -1,16 +0,0 @@
-## Responsive variant
-
-For the `.c-table--responsive` variant to display correctly, give each `<td>` element a `data-responsive-title` attribute, corresponding to the column headers. E.g. for a two-column table where the column headers are "Name" and "Description", the `<td>`s should be marked up as follows:
-
-```html
-<tbody>
-    <tr>
-        <td data-responsive-title="Name">Aeris</td>
-        <td data-responsive-title="Description">Vivamus sagittis lacus vel</td>
-    </tr>
-    <tr>
-        <td data-responsive-title="Name">OMNISEC</td>
-        <td data-responsive-title="Description">Nullam quis risus eget urna</td>
-    </tr>
-</tbody>
-```

package/src/_includes/components/table/table.njk

@@ -1,28 +0,0 @@
-<table class="mp c-table {{ params.classes }}" {{ params.attrs }}>
-  {% if params.theme != 'none'%}
-  <thead>
-    <tr>
-      {% for header in params.headers %}
-        {% if (params.theme != 'vertical') or ((params.theme == 'vertical') and (loop.index0 == 0)) %}
-          <th>{{ header | safe }}</th>
-        {% else %}
-          <td>{{ header | safe }}</td>
-        {% endif %}
-      {% endfor %}
-    </tr>
-  </thead>
-  {% endif %}
-  <tbody>
-    {% for row in params.rows %}
-      <tr>
-        {% for cell in row %}
-          {% if (params.theme == 'vertical') and (loop.index0 == 0) %}
-            <th>{{ cell | safe }}</th>
-          {% else %}
-            <td>{{ cell | safe }}</td>
-          {% endif %}
-        {% endfor %}
-      </tr>
-    {% endfor %}
-  </tbody>
-</table>

package/src/_includes/components/table/table.scss

@@ -1,157 +0,0 @@
-.c-table {
-  text-align: left;
-  border: none;
-  width: 100%;
-  border-collapse: collapse;
-  background: transparent;
-  @include step(-1);
-
-  th {
-    font-weight: weight('semi');
-  }
-
-  td,
-  th {
-    padding: 12px;
-    background: color('petrol', 'step-3');
-    border: none;
-    border-bottom: 2px solid color('white');
-    border-top: 2px solid color('white');
-    vertical-align: top;
-    color: inherit;
-
-  }
-
-  // Allow setting 'u-bg' background colours on table rows
-  tr[class*='u-bg'] {
-    td,
-    th {
-      background-color: inherit;
-    }
-  }
-
-  th {
-    background: color('petrol');
-    color: color('white');
-  }
-
-  img {
-    height: auto !important;
-  }
-
-  &--center {
-    td,
-    th {
-      vertical-align: middle;
-    }
-  }
-
-  @media (max-width: 768px) {
-    &--ellipsis {
-      td {
-        width: auto;
-
-        &.u-ellipsis {
-          width: 100%;
-        }
-      }
-    }
-  }
-
-  &--wide {
-    width: 100%;
-  }
-
-  .c-icon--dash {
-    color: color('petrol', 'step-2');
-  }
-
-  .c-icon--tick {
-    color: color('green');
-  }
-
-  &__title th,
-  &__title td {
-    background: color('white');
-    color: inherit;
-  }
-
-  a:hover {
-    text-decoration: none;
-  }
-
-  &--comparison {
-    thead th {
-      background: transparent;
-      color: inherit;
-      font-weight: weight();
-    }
-
-    tbody td:nth-child(n+2) {
-      text-align: center;
-    }
-  }
-
-  &--features {
-    thead th,
-    tbody td,
-    tfoot td {
-      background: transparent;
-    }
-
-    thead th {
-      color: inherit;
-      font-weight: weight();
-    }
-  }
-
-  @media (min-width: 30em) {
-    .c-icon {
-      font-size: 1.5rem;
-    }
-  }
-
-  &--fixed {
-    table-layout: fixed;
-
-    @media (min-width: 40em) {
-      th {
-        width: 40%;
-      }
-    }
-  }
-
-  @media (max-width: 40em) {
-    &--responsive {
-      tbody,
-      tfoot,
-      tr,
-      td,
-      th {
-        display: block;
-      }
-
-      thead {
-        display: none;
-      }
-      
-      tr + tr {
-        border-top: 2px solid color('petrol', 'step-2');
-        @include padding-top('s');
-        @include margin-top('s');
-      }
-  
-      tbody [data-responsive-title] {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        @include grid-gap('s');
-  
-        &:before {
-          content: attr(data-responsive-title);
-          font-weight: 700;
-        }
-      }
-    }
-  }
-}
-

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

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

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

@@ -1,32 +0,0 @@
-module.exports = {
-  title: 'Tabs - radio',
-  component: {
-    name: 'tabs-radio',
-    folder: 'tabs'
-  },
-  context: {
-    name: 'tab',
-    links: [
-      { id: 'tab-1', value: 'webinars', label: 'Webinars' },
-      { id: 'tab-2', value: 'events', label: 'Events', active: true },
-      { id: 'tab-3', value: 'training', label: 'Training' },
-    ]
-  },
-  props: [
-    {
-      table: [
-        ['name', 'string', 'HTML name attribte']
-        ['tabs', 'radioTab[]', 'An array of radio tabs']
-      ]
-    },
-    {
-      title: '<code>radioTab</code>',
-      table: [
-        ['id', 'string', 'Unique ID for each tab'],
-        ['label', 'string', 'Label for the tab control'],
-        ['value', 'string', 'Value attribute for each radio button'],
-        ['active', 'bool', 'Is this tab active?']
-      ]
-    }
-  ]
-}

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

@@ -1,9 +0,0 @@
-<div class="mp c-tabs">
-  <nav class="c-tabs__controls">
-    <ul class="c-tabs__controls-list">
-      {% for item in params.links %}
-        <li><input type="radio" class="u-hidden" id="{{ item.id }}" name="{{ params.name }}" value="{{ item.value }}" {{ 'checked' if item.active }} /><label for="{{ item.id }}" class="c-tabs__control">{{ item.label }}</label></li>  
-      {% endfor %}
-    </ul>
-  </nav>
-</div>