mp-design-system 1.2.63 → 1.2.65

package/src/_includes/components/header/header.scss

@@ -1,273 +0,0 @@
-.c-header {
-  background-color: color('white');
-
-  &__wrap {
-    @include padding-top('gutter');
-    position: relative;
-  }
-
-  &__logo {
-    position: relative;
-    z-index: 50;
-    display: block;
-    max-width: 216px;
-    width: 60%;
-
-    img {
-      width: 100%;
-    }
-  }
-
-  &__search {
-    position: relative;
-
-    button:hover,
-    button:focus {
-      background-color: color('petrol', 'step-2');
-    }
-  }
-
-  @media (min-width: 500px) {
-    &__corporate ul {
-      justify-content: center;
-    }
-  }
-
-  @media (max-width: 767px) {
-    &__wrap {
-      @include padding-bottom('gutter');
-    }
-
-    &__primary {
-      flex-direction: column;
-      align-items: stretch;
-      background: color('petrol');
-      color: color('white');
-      position: fixed;
-      @include padding('s-m');
-      z-index: 100;
-      display: flex;
-      height: 100%;
-      width: 100%;
-      left: 0;
-      top: 0;
-      padding-top: 80px;
-      padding-top: calc(60px + var(--space-s-m));
-
-      opacity: 0;
-      visibility: hidden;
-
-      &:target {
-        opacity: 1;
-        visibility: visible;
-        transition: 300ms opacity, 300ms visibility;
-      }
-
-      .c-navicon i {
-        background: color('white');
-      }
-    }
-
-    &__corporate {
-      order: 1;
-      @include margin('s', 0);
-      @include step(-2);
-      font-weight: weight('semi');
-
-      ul {
-        align-items: center;
-        display: flex;
-        flex-wrap: wrap;
-        margin-left:-6px;
-        margin-right:-6px;
-      }
-
-      li {
-        @include margin('xs-s', '3xs-m');
-      }
-
-      .c-input--select {
-        width: auto;
-        color: inherit;
-        background-color: transparent;
-        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="10"><path fill="%23ffffff" fill-rule="nonzero" d="M9 7.59L1.7.29A1 1 0 10.3 1.71l8 8a1 1 0 001.4 0l8-8A1 1 0 1016.3.29L9 7.6z"/></svg>');
-        background-position: center right .4em;
-        @include padding(0, 'm', '3xs', 0);
-        display: inline-block;
-        border: none;
-        border-bottom: 1px solid #3D7B87;
-        margin-bottom: -4.5px;
-        font-size: inherit;
-
-        option {
-          color:  color('grey');
-        }
-      }
-    }
-
-    &__search {
-      order: 2;
-      color: color('grey');
-    }
-
-    &__site {
-      order: -1;
-      flex: 1;
-      @include step(1);
-
-      li + li {
-        @include margin-top('s');
-      }
-    }
-  }
-
-  @media (min-width: 768px) {
-    overflow: hidden;
-    
-    .c-navicon {
-      display: none;
-    }
-
-    &__primary {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-end;
-      margin-top: -71px;
-    }
-
-    &__search {
-      margin-bottom: 8px;
-      margin-bottom: calc(var(--gutter) - 10px);
-      width: 288px;
-    }
-
-    &__corporate {
-      color: color('petrol');
-      @include step(-1);
-      margin-bottom: 8px;
-      margin-bottom: calc(var(--space-xs) + 3px);
-
-      a:hover {
-        text-decoration: underline;
-      }
-
-      ul {
-        display: flex;
-      }
-
-      li + li {
-        @include margin-left('s');
-      }
-
-      .c-input--select {
-        width: auto;
-        color: inherit;
-        background-color: transparent;
-        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="10"><path fill="%2300768d" fill-rule="nonzero" d="M9 7.59L1.7.29A1 1 0 10.3 1.71l8 8a1 1 0 001.4 0l8-8A1 1 0 1016.3.29L9 7.6z"/></svg>');
-        @include padding(0, 'l', 0, 0);
-        display: inline-block;
-        border: none;
-        @include step(-1);
-      }
-    }
-
-    &__site {
-      color: color('white');
-      font-weight: weight('semi');
-      position: relative;
-      z-index: 1;
-      padding: 14px 0;
-      padding: calc(var(--space-xs) + 2px) 0;
-      @include step(-1);
-      align-self: flex-start;
-      width: 100%;      
-      
-      &:after {
-        background: linear-gradient(270deg, 
-          color('green') -12%, 
-          color('blue') 11%, 
-          color('petrol') 43%, 
-          color('petrol') 70%, 
-          color('petrol', 'step--1') 100%);
-        content: '';
-        position: absolute;
-        width: 100vw;
-        height: 100%;
-        left: 50%;
-        top: 0;
-        transform: translateX(-50%);
-        z-index: -2;
-
-        // Hack for IE11
-        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
-          background: linear-gradient(270deg, 
-          color('green') -12%, 
-          color('blue') 11%, 
-          color('petrol') 43%, 
-          color('petrol', 'step--1') 100%);
-        }
-      }
-
-      ul {
-        display: flex;
-      }
-
-      li + li {
-        @include margin-left('s-m');
-      }
-
-      &--with-home > ul > li:first-child {
-        border-right: 1px solid rgba(255, 255, 255, 0.25);
-        @include padding-right('s');
-      }
-
-      a {
-        @include padding('xs', 0);
-        display: block;
-
-        &:hover,
-        &:focus {
-          opacity: 0.75;
-        }
-      }
-    }
-
-    &__site li + &__push {
-      margin-left: auto;
-    }
-  }
-
-  @media (min-width: 1500px) {
-    &__site:after {
-      clip-path: polygon(0% 101%, 78px 0%, 100% 0%, 100% 101%, 78px 101%);
-    }
-  }
-}
-
-.c-navicon {
-  position: absolute;
-  @include space('right', 's-m');
-  @include space('top', 's-m');
-  transform: translateX(25%);
-  height: 60px;
-  width: 60px;
-
-  i {
-    position: absolute;
-    transform: translate3d(-50%, -50%, 0);
-    background: color('blue', 'step--1');
-    border-radius: 2px;
-    height: 2px;
-    width: 22px;
-    left: 50%;
-    top: 50%;
-
-    &:nth-child(1) {
-      transform: translate3d(-50%, -50%, 0) translateY(-7px);
-    }
-
-    &:nth-child(3) {
-      transform: translate3d(-50%, -50%, 0) translateY(7px);
-    }
-  }
-}

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

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

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

@@ -1,144 +0,0 @@
-module.exports = {
-  title: 'Hero',
-  component: {
-    name: 'hero',
-  },
-  context: {
-    title: 'Products',
-    subtitle: 'Laboratory equipment and process solutions'
-  },
-  variants: [
-    {
-      title: 'With content',
-      context: {
-        subtitle: null,
-        content: '<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nulla vitae elit libero, a pharetra augue.</p>'
-      }
-    },
-    {
-      title: 'With background image',
-      context: {
-        title: 'The Mastersizer',
-        subtitle: 'The world’s most popular particle size analyzers',
-        image: {
-          src: '/static/img/range.jpg'
-        }
-      }
-    },
-    {
-      title: 'With breadcrumb',
-      context: {
-        breadcrumb: {
-          link: '',
-          label: 'All products'
-        }
-      }
-    },
-    {
-      title: 'With call to action',
-      context: {
-        title: 'The Mastersizer',
-        subtitle: 'The world’s most popular particle size analyzers',
-        image: {
-          src: '/static/img/range.jpg'
-        },
-        breadcrumb: {
-          link: '/prototype/products/',
-          label: 'All products'
-        },
-        cta: {
-          label: 'Download brochure',
-          link: 'https://www.malvernpanalytical.com/en/assets/Mastersizer%203000%20Brochure%20%28EN%29_tcm50-58994.pdf',
-          attrs: 'download',
-          icon: 'file'
-        }
-      }
-    },
-    {
-      title: 'Homepage',
-      context: {
-        title: "We’re big on small.",
-        subtitle: null,
-        content: '<p>We make scientific instruments and services that make the invisible visible, and the impossible possible.</p>',
-        images: [
-          { src: '/static/img/homepage_1_back.webp' },
-          { src: '/static/img/homepage_2_back.webp' },
-        ],
-        frontimages: [
-          { src: '/static/img/homepage_1_front_full.webp' },
-          { src: '/static/img/homepage_2_front_full.webp' },
-        ],
-        cta: {
-          label: 'About Malvern Panalytical',
-          link: ''
-        },
-        homepage: 'dark'
-      }
-    },
-    {
-      title: 'Homepage (light)',
-      context: {
-        title: "We’re big on small.",
-        subtitle: null,
-        content: '<p>We make scientific instruments and services that make the invisible visible, and the impossible possible.</p>',
-        images: [
-          { src: '/static/img/homepage_1_back.webp' },
-          { src: '/static/img/homepage_2_back.webp' },
-        ],
-        frontimages: [
-          { src: '/static/img/homepage_1_front_full.webp' },
-          { src: '/static/img/homepage_2_front_full.webp' },
-        ],
-        cta: {
-          label: 'About Malvern Panalytical',
-          link: ''
-        },
-        homepage: 'light'
-      }
-    },
-    {
-      title: 'Homepage with video',
-      context: {
-        title: 'We\'re big on small.',
-        subtitle: null,
-        content: '<p>We make scientific instruments and services that make the invisible visible, and the impossible possible.</p>',
-        videoplaceholder: {
-          src: 'https://p3.aprimocdn.net/malvernpanalytical/bf169dc6-9edb-4609-9ba8-add301206d1e/bridge-bg_Original%20file.webp?quality=60'
-        },
-        shortvideo: [
-          { src: '' },
-          { type: 'video/mp4' },
-        ],
-        longvideo: [
-          { src: '' },
-          { type: 'video/mp4' },
-        ],
-        cta: {
-          label: 'About Malvern Panalytical',
-          link: ''
-        },
-        homepage: 'dark'
-      }
-    }
-  ],
-  props: [
-    {
-      table: [
-        ['title', 'string'],
-        ['subtitle', 'string'],
-        ['content', 'html'],
-        ['classes', 'string'],
-        ['cta', 'object', 'Add <a href="/components/text-with-icon/">text with icon</a> component'],
-        ['breadcrumb', 'object', 'Add <a href="/components/breadcrumb/">breadcrumb</a> component'],
-        ['image', 'object', 'Add background image']
-      ]
-    },
-    {
-      title: 'CSS modifiers',
-      table: [
-        ['c-hero--no-cover', '', 'Remove cover beneath the hero'],
-        ['c-hero--image', '', 'Increse padding to allow for image']
-      ]
-    }
-  ]
-}

package/src/_includes/components/hero/hero.njk

@@ -1,109 +0,0 @@
-{% from "components/breadcrumb/macro.njk" import breadcrumb %}
-{% from "components/button/macro.njk" import button %}
-{% from "components/icon/macro.njk" import icon %}
-{% from "components/input/macro.njk" import input %}
-
-{%- set classes = 'mp c-hero' -%}
-{% if params.classes %}{%- set classes = classes + ' ' + params.classes -%}{% endif %}
-{% if params.image %}{%- set classes = classes + ' c-hero--image' -%}{% endif %}
-
-{% if params.homepage == 'dark' %}
-  {%- set classes = classes + ' c-hero--homepage' -%}
-{% elif  params.homepage == 'light' %}
-  {%- set classes = classes + ' c-hero--homepage-light' -%}
-{% endif %}
-
-{% if params.shortvideo %}
-  {%- set classes = classes + ' c-hero--homepage-video' -%}
-{% endif %}
-
-<figure class="{{ classes }}">
-  <div class="u-wrap">
-    <div class="c-hero__content">
-      {% if params.breadcrumb %}
-        <nav>
-          {{ breadcrumb(params.breadcrumb) }}
-        </nav>
-      {% endif %}
-
-      <header class="u-flow--m">
-        <h1 class="c-h c-h--page-title">{{ params.title }}</h1>
-        {% if params.subtitle %}<p class="u-step-1">{{ params.subtitle }}</p>{% endif %}
-        {% if params.search %}
-          <form class="c-hero__search u-split">
-            {{ input({
-              name: 'hero-search',
-              id: 'hero-search',
-              type: 'search',
-              hideLabel: true,
-              placeholder: params.search.placeholder
-            }) }}
-            {{ button({
-              name: 'hero-search-submit',
-              id: 'hero-search-submit',
-              label: params.search.buttonText or 'Search',
-              link: ''
-            }) }}
-          </form>
-        {% endif %}
-        {{ params.content | safe }}
-      </header>
-
-      {% if params.cta %}
-        <div class="c-hero__button-wrap">
-          {{ button({
-            link: params.cta.link,
-            inline: true,
-            label: params.cta.label,
-            color: 'green'
-          }) }}
-        </div>
-      {% endif %}
-    </div>
-  </div>
-
-  {% if params.image %}
-    <div class="c-hero__image-bg" style="background-image:url({{ params.image.src }});"></div>
-  {% elif params.images %}
-    {% for image in params.images %}
-      <div class="c-hero__image-bg" style="background-image:url({{ image.src }});"></div>
-    {% endfor %}
-  {% endif %}
-
-  {% if params.shortvideo %}
-    <div class="c-hero__video-bg" style="background-image:url({{ params.videoplaceholder.src }});">
-      <video id="videoBackground" autoplay loop>
-        <source src="https://p3.aprimocdn.net/malvernpanalytical/304f04aa-ae04-4bed-9946-ae3101152327/PN12593_Brand_Movie_Malvern_Panalytical_MIX_0dBfs_website_header_Original%20file.mp4" type="video/mp4">
-      </video>
-    </div>
-  {% endif %}
-
-  {% if params.homepage %}
-    <canvas class="c-hero__canvas"></canvas>
-  {% endif %}
-  
-  {% if params.frontimages %}
-    {% for image in params.frontimages %}
-      <div class="c-hero__image-fg" style="background-image:url({{ image.src }});"></div>
-    {% endfor %}
-  {% endif %}
-
-  {% if params.longvideo %}
-    <div class="c-hero__video-button-wrap">
-      {{ button({ link: '', label: 'Play video', colour: 'outline-white', attrs: 'id=playVideo' }) }}
-    </div>
-  {% endif %}
-</figure>
-
-{% if params.longvideo %}
-<div id="lightboxVideo" class="c-lightbox u-hidden">
-  <div class="c-lightbox__close">
-    {{ icon({ id: 'cross' }) }}
-  </div>
-  <div class="c-lightbox__slide active">
-    <video class="c-lightbox__video" controls controlslist="nodownload">
-      <source src="https://p3.aprimocdn.net/malvernpanalytical/304f04aa-ae04-4bed-9946-ae3101152327/PN12593_Brand_Movie_Malvern_Panalytical_MIX_0dBfs_website_header_Original%20file.mp4" type="video/mp4">
-    </video>
-  </div>
-</div>
-{% endif %}