mp-design-system 1.2.64 → 1.2.66

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 %}