mp-design-system 1.2.64 → 1.2.65

package/src/_includes/components/breadcrumb/breadcrumb.scss

@@ -1,69 +0,0 @@
-.c-breadcrumb {
-  &__list {
-    @include padding-bottom("s-m");
-    display: flex;
-    overflow-x: auto;
-  }
-
-  &__item {
-    font-size: var(--step--2);
-    display: inline-flex;
-    align-items: center;
-    white-space: nowrap;
-
-    .c-icon {
-      @include margin-right("3xs");
-      @include margin-left("3xs");
-      color: color('grey', 'step-1');
-      transform: rotate(270deg);
-    }
-  }
-
-  &__link {
-    color: color('utility-blue', 'step-1');
-    text-decoration: underline;
-  
-    &:hover {
-      color: color('utility-blue', 'step-1');
-      text-decoration: none;
-    }
-  }
-
-  &__current {
-    color: color('grey', 'step-1');
-  }
-
-  // color: color('utility-blue');
-
-  // &__wrap {
-  //   position: relative;
-
-  //   &:after {
-  //     content: '';
-  //     background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
-  //     position: absolute;
-  //     z-index: 1;
-  //     height: 100%;
-  //     right: 0;
-  //     top: 0;
-  //     @include space('width', 'l');
-
-  //     @media (min-width: $wrapper) {
-  //       display: none;
-  //     }
-  //   }
-  // }
-
-  // &__list {
-  //   @include padding-bottom('m-l');
-  //   @include margin-bottom('m-l');
-  //   border-bottom: 1px solid color('petrol', 'step-2');
-  //   white-space: nowrap;
-  //   overflow-x: auto;
-  //   display: flex;
-
-  //   & > * + * {
-  //     @include margin-left('m-l');
-  //   }
-  // }
-}

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

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

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

@@ -1,89 +0,0 @@
-module.exports = {
-  title: 'Button',
-  component: {
-    name: 'button',
-  },
-  figma: 'https://www.figma.com/file/rUQ6aPQAfBX55o3hH0Lqb3/Design-exploration?node-id=225%3A6779',
-  context: {
-    label: 'Button',
-  },
-  variants: [
-    {
-      title: 'Red',
-      context: {
-        colour: 'red'
-      }
-    },
-    {
-      title: 'Blue',
-      context: {
-        colour: 'blue'
-      }
-    },
-    {
-      title: 'White',
-      context: {
-        colour: 'white'
-      }
-    },
-    {
-      title: 'Utility blue',
-      context: {
-        colour: 'utility-blue'
-      }
-    },
-    {
-      title: 'Outline green',
-      context: {
-        colour: 'outline-green'
-      }
-    },
-    {
-      title: 'Outline white',
-      context: {
-        colour: 'outline-white'
-      }
-    },
-    {
-      title: 'Small',
-      context: {
-        classes: 'c-button--small'
-      }
-    },
-    {
-      title: 'Loading',
-      context: {
-        classes: 'c-button--loading'
-      }
-    },
-    {
-      title: 'Disabled',
-      context: {
-        attrs: 'disabled'
-      }
-    }
-  ],
-  props: [
-    {
-      table: [
-        ['label', 'string'],
-        ['link', 'string', 'Converts from a button an anchor'],
-        ['colour', 'string', 'eg. "red", "outline-green"'],
-        ['inline', 'bool', 'Is the button inline-flex or flex?'],
-        ['classes', 'string', 'Additional class attributes'],
-        ['attrs', 'string', 'Addtional HTML attributes']
-      ]
-    },
-    {
-      title: 'CSS modifiers',
-      table: [
-        ['c-button--inline', '', 'Makes the button inline-flex'],
-        ['c-button--[colour]', 'petrol, red, blue, white, outline-green, outline-white'],
-        ['c-button--small', '', 'Shrinks the button'],
-        ['c-button--wide', '', 'Makes the button 100% width'],
-        ['c-button--tight', '', 'Reduces the left/right padding'],
-        ['c-button--loading', '', 'Replace the button text with a loading indicator']
-      ]
-    }
-  ]
-}

package/src/_includes/components/button/button.njk

@@ -1,38 +0,0 @@
-{% from "components/twi/macro.njk" import twi %}
-
-{%- set classNames = "mp c-button" -%}
-
-{%- if params.classes -%}
-  {% set classNames = classNames + " " + params.classes %}
-{% endif %}
-{%- if params.inline -%}
-  {% set classNames = classNames + " c-button--inline" %}
-{%- endif -%}
-{%- if params.colour -%}
-  {% set classNames = classNames + " c-button--" + params.colour %}
-{% endif -%}
-
-{%- set attrs = '' -%}
-{%- if params.attrs -%}
-  {% set attrs = ' ' + params.attrs %}
-{% endif %}
-
-{%- if params.link -%}
-<a href="{{ params.link }}" class="{{ classNames }}" {{ attrs }}>
-{%- elseif params.type == 'span' -%}
-<span class="{{ classNames }}" {{ attrs }}>
-{%- else -%}
-<button type="{{ params.type or 'button' }}" class="{{ classNames}}" {{ attrs }}>
-{%- endif -%}
-  {%- if params.icon -%}
-    {{ twi({ icon: params.icon, align: params.align, label: params.label }) }}
-  {%- else -%}
-    {{ params.label }}
-  {%- endif -%}
-{%- if params.link -%}
-</a>
-{%- elseif params.type == 'span' -%}
-</span>
-{%- else -%}
-</button>
-{%- endif -%}

package/src/_includes/components/button/button.scss

@@ -1,178 +0,0 @@
-.c-button--reset {
-  border-radius: 0;
-  background: transparent;
-  box-shadow: none;
-  appearance: none;
-  padding: 0;
-  cursor: pointer;
-  border: none;
-  color: inherit;
-  font: inherit;
-  font-family: $font-stack;
-}
-
-%c-button {
-  // Reset
-  border-radius: 0;
-  background: transparent;
-  box-shadow: none;
-  appearance: none;
-  padding: 0;
-  cursor: pointer;
-  border: none;
-  color: inherit;
-  font: inherit;
-  font-family: $font-stack;
-  text-align: center;
-
-  // Styles
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 6px;
-  background-color: color("green");
-  font-weight: weight("bold");
-  font-size: 1.125rem;
-  padding: 0.777em 1.5em;
-  transition: 300ms background-color, 300ms color, 300ms box-shadow;
-  letter-spacing: ls("base");
-  color: color("white");
-
-  &:focus,
-  &:hover {
-    background-color: color("green", "step--1");
-    text-decoration: none;
-    color: color("white");
-  }
-
-  &[disabled],
-  [disabled] & {
-    filter: saturate( 0.4 );
-    cursor: not-allowed;
-    opacity: 0.6;
-  }
-}
-
-.mp.c-button,
-.c-button {
-  @extend %c-button;
-
-  &--wide {
-    width: 100%;
-  }
-
-  &--tight {
-    padding-right: 0.75em;
-    padding-left: 0.75em;
-  }
-
-  &--inline {
-    display: inline-flex;
-    margin-right: 0.5em;
-    margin-bottom: 0.5em;
-    vertical-align: top;
-  }
-
-  &--petrol {
-    background-color: color("petrol");
-
-    &:focus,
-    &:hover {
-      background-color: color("petrol", "step-1");
-    }
-  }
-
-  &--blue {
-    background-color: color("blue");
-
-    &:focus,
-    &:hover {
-      background-color: color("blue", "step--1");
-    }
-  }
-
-  &--red {
-    background-color: color("red");
-
-    &:focus,
-    &:hover {
-      background-color: color("red", "step--1");
-    }
-  }
-
-  &--white {
-    background-color: color("white");
-    font-weight: weight();
-    color: color("utility-blue");
-    padding: 0.777em 1em;
-
-    &:focus,
-    &:hover {
-      background-color: color("petrol", "step-3");
-      color: color("utility-blue", "step--1");
-    }
-  }
-
-  &--utility-blue {
-    background-color: color("utility-blue");
-
-    &:focus,
-    &:hover {
-      background-color: color("utility-blue", "step--1");
-    }
-  }
-
-  &--outline-white {
-    background: transparent;
-    color: color("white");
-    box-shadow: inset 0 0 0 1px color("white");
-
-    &:focus,
-    &:hover {
-      background-color: color("white");
-      color: color("petrol");
-    }
-  }
-
-  &--outline-green {
-    background: transparent;
-    color: color("green");
-    box-shadow: inset 0 0 0 1px color("green");
-
-    &:focus,
-    &:hover {
-      box-shadow: inset 0 0 0 1px color("green", "step--1");
-      background-color: color("green", "step--1");
-      color: color("white");
-    }
-  }
-
-  &--small {
-    @include step(-1);
-    padding: 0.75em 1em;
-  }
-
-  &--loading {
-    color: transparent;
-    transition: color .3s ease;
-
-    &:after {
-      content: '⌛';
-      color: color("white");
-      position: absolute;
-    }
-
-    @media (prefers-reduced-motion:no-preference) {
-      &:after {
-        content: '';
-        animation: spin 1.2s ease infinite;
-        border-radius: 50%;
-        border: 3px solid #3336;
-        border-top-color: color("white");
-        display: block;
-        height: 1em;
-        width: 1em;
-      }
-    }
-  }
-}

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

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

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

@@ -1,68 +0,0 @@
-module.exports = {
-  title: 'Campaign',
-  component: {
-    name: 'campaign',
-  },
-  context: {
-    title: 'OmniTrust: Analytics you can trust.',
-    content: '<p>At last, a compliance breakthrough: Omnitrust joins up all your instruments and platforms, authorizes users, keeps all your data audit-ready – and is completely configurable to your workflow.</p>',
-    linkLabel: 'Find out more',
-    link: '',
-    image: {
-      src: '/static/img/campaign.jpg',
-      alt: 'alt'
-    }
-  },
-  variants: [
-    {
-      title: 'Switch',
-      context: {
-        switch: true
-      }
-    },
-    {
-      title: 'Petrol',
-      context: {
-        classes: 'c-campaign--petrol'
-      }
-    },
-    {
-      title: 'Blue',
-      context: {
-        classes: 'c-campaign--blue'
-      }
-    },
-    {
-      title: 'Orange',
-      context: {
-        classes: 'c-campaign--orange'
-      }
-    },
-    {
-      title: 'No image',
-      context: {
-        image: false
-      }
-    }
-  ],
-  props: [
-    {
-      table: [
-        ['title', 'string'],
-        ['content', 'html'],
-        ['link', 'string'],
-        ['linkLabel', 'string', 'Label for the button'],
-        ['image', 'object', 'Image object']
-      ]
-    },
-    {
-      title: 'CSS modifiers',
-      table: [
-        ['c-campaign--switch', '', 'Switches the image from left to right'],
-        ['c-campaign--petrol', '', 'Petrol colour variant'],
-        ['c-campaign--blue', '', 'Blue colour variant'],
-        ['c-campaign--orange', '', 'Orange colour variant']
-      ]
-    }
-  ]
-}

package/src/_includes/components/campaign/campaign.njk

@@ -1,26 +0,0 @@
-{% from "components/twi/macro.njk" import twi %}
-
-{%- set classNames = "mp c-campaign" -%}
-
-{%- if params.classes -%}
-  {% set classNames = classNames + " " + params.classes %}
-{% endif %}
-{%- if params.switch -%}
-  {% set classNames = classNames + " c-campaign--switch" %}
-{%- endif -%}
-
-<aside class="{{ classNames }}">
-  <a href="" class="c-campaign__link">{{ params.title }}</a>
-  {% if params.image %}
-    <figure class="c-campaign__image">
-      <img src="{{ params.image.src }}" alt="{{ params.image.alt }}" />
-    </figure>
-  {% endif %}
-  <div class="c-campaign__content u-flow">
-    <h2 class="c-h c-h--step-2">{{ params.title }}</h2>
-    <div class="mp o-prose u-flow--prose">
-      {{ params.content | safe }}
-      {{ twi({ classes: 'u-link', label: params.linkLabel, icon: 'arrow-right' }) }}
-    </div>
-  </div>
-</aside>

package/src/_includes/components/campaign/campaign.scss

@@ -1,108 +0,0 @@
-$angle: 225deg;
-
-.c-campaign {
-  @include cutoff;
-  
-  position: relative;
-  max-width: calc(#{$wrapper}) !important;
-  padding: 0 !important;
-
-  &__link {
-    @extend .u-fill, .u-fill--link;
-  }
-  
-  &__content {
-    background: color('grey');
-    background: linear-gradient($angle, color('grey', 'step--2'), color('grey'));
-    color: color('white');
-    width: 100%;
-    @include padding('m-l');
-    align-self: center;
-  }
-
-  &__video {
-    z-index: 1;
-    align-self: center;
-  }
-
-  &__image {
-    z-index: 0;
-
-    img {
-      width: 100%;
-    }
-  }
-
-  &.mp .u-link {
-    color: color('blue', 'step-1');
-  }
-
-  &--petrol {
-    
-    .c-campaign__content {
-      background: color('petrol', 'step-2');
-      background: linear-gradient($angle, color('petrol', 'step-2'), color('petrol', 'step-3'));
-      color: color('grey');
-    }
-
-    &.mp .u-link {
-      color: color('petrol');
-    }
-  }
-
-  &--blue {
-    
-    .c-campaign__content {
-      background: color('blue', 'step-3');
-      background: linear-gradient($angle, color('blue', 'step-2'), color('blue', 'step-3'));
-      color: color('grey');
-    }
-
-    &.mp .u-link {
-      color: color('blue', 'step--1');
-    }
-  }
-
-  &--orange {
-    
-    .c-campaign__content {
-      background: color('utility-orange', 'step-2');
-      background: linear-gradient($angle, color('utility-orange', 'step-2'), color('utility-orange', 'step-3'));
-      color: color('grey', 'step--1');
-    }
-
-    &.mp .u-link {
-      color: color('utility-orange', 'step--1');
-    }
-  }
-
-  @media (min-width:35em) {
-    display: flex;
-
-    &--switch &__content {
-      order: -1;
-    }
-
-    &__video,
-    &__image {
-      position: relative;
-      width: 50%;
-
-      & + .c-campaign__content {
-        width: 50%;
-      }
-    }
-
-    &__image {
-      img {
-        position: absolute;
-        height: 100%;
-        width: 100%;
-        left: 0;
-        top: 0;
-        z-index: 1;
-        object-fit: cover;
-      }
-    }
-  }
-}

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

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