mp-design-system 1.2.64 → 1.2.65

package/src/_includes/components/hero/hero.scss

@@ -1,356 +0,0 @@
-:root {
-  --body-width: min(100vw, calc(78.75rem + var(--gutter) + var(--gutter) ) );
-  --gutter-width: calc( (100vw - var(--body-width)) / 2 );
-  --text-width: min(100vw, 51.75rem);
-  --hero-gap: calc( var(--body-width) - var(--text-width));
-  --stop: calc( ( var(--hero-gap) + var(--gutter-width) ) *.8 );
-}
-
-.c-hero {
-  background-color: color('blue', 'step-2');
-  background: linear-gradient(to top right, color('petrol', 'step-3'), color('blue', 'step-2'));
-  color: color('petrol');
-  position: relative;
-  overflow: hidden;
-  isolation: isolate;
-
-  &.mp .u-link {
-    color: color('utility-blue');
-  }
-  
-  .u-wrap {
-    @include padding-top('m-xl');
-    @include padding-bottom('xl-3xl');
-    position: relative;
-    z-index: 2;
-
-    &:before {
-      content: '';
-      box-shadow: 1px 1px color('white');
-      @include space('height', 'gutter');
-      width: 100vw;
-      background: color('white');
-      position: absolute;
-      bottom: 0;
-      @include space('right', 'gutter');
-      z-index: 2;
-
-    }
-    
-    &:after {
-      content: '';
-      box-shadow: -1px 0 color('white');
-      position: absolute;
-      width: 0;
-      height: 0;
-      border-style: solid;
-      @include space('border-width', 'gutter', 0, 0, 'gutter');
-      border-color: transparent transparent transparent color('white');
-      bottom: 0;
-      right: 0;
-    }
-    
-    @at-root {
-      .c-hero--extend .u-wrap {
-        &:before {
-          right: 0;
-        }
-        &:after {
-          right: calc(-1 * var(--gutter));
-        }
-      }
-    }
-  }
-
-  &__content {
-    position: relative;
-    z-index: 5;
-    max-width: 828px;
-
-    .c-hero--padded & {
-      @include padding('m-l', 0)
-    }
-
-    & > * + * {
-      @include margin-top('m');
-    }
-
-    .c-h {
-      color: inherit;
-      margin: inherit;
-    }
-
-    p {
-      line-height: lh('prose');
-    }
-
-    .c-hero__button-wrap {
-      display: flex;
-      flex-wrap: wrap;
-      gap: var(--space-s);
-
-      &> .c-button {
-        margin: 0 !important;
-      }
-    }
-  }
-
-  &--image {
-    background: color('grey', 'step--1');
-    color: color('white');
-
-    &.mp .u-link {
-      color: color('utility-blue', 'step-1');
-    }
-  }
-  
-  &__image-bg {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background-position: 50% 50%;
-    background-size: cover;
-    background-repeat: no-repeat;
-
-    &:after {
-      position: absolute;
-      content: '';
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: radial-gradient(ellipse farthest-side at bottom right, rgba(color('grey'), 60%), rgba(color('grey', 'step--1'), 90%));
-    }
-
-    @media (min-width: 55em) {
-      left: 33.33%;
-
-      &:after {
-        background: radial-gradient(circle farthest-side at top right, rgba(color('grey', 'step--1'), 30%), color('grey', 'step--1'));
-      }
-    }
-
-    @media (min-width:70em) {
-      &:after {
-        background: linear-gradient(270deg, rgba(color('grey','step--1'),0%) var(--gutter-width), rgba(color('grey','step--1'),62%) var(--stop), color('grey','step--1'));
-      }
-    }    
-  }
-
-  &--homepage {
-    background: linear-gradient(79.62deg, color('petrol', 'step--1') 0%, color('petrol') 100%);
-
-    @media (min-width: 38em) {
-      background: linear-gradient(84.46deg, color('petrol', 'step--1') 7.52%, color('petrol') 44.84%, rgba(35, 80, 87, 0.8) 51.02%, rgba(52, 82, 87, 0.62) 54.99%, rgba(78, 86, 87, 0.2209) 59.54%, rgba(87, 87, 87, 0) 65.59%);
-    }
-    
-    &::after {
-      position: absolute;
-      content: '';
-      top: 0;
-      left: 0;
-      background: rgba(black, 0.33);
-      width: 100%;
-      height: 100%;
-
-      @media (min-width: 38em) {
-        background: radial-gradient(circle farthest-side at top right, rgba(46, 50, 51, 0) 0%, rgba(46, 50, 51, 0) 15.16%, rgba(46, 50, 51, 0.2) 27.66%, rgba(41, 54, 56, 0.55) 39.61%, rgba(35, 66, 71, 0.8) 49.78%, #005461 59.87%, #003039 100%);
-      }
-    }
-
-    .u-wrap {
-      @include padding-bottom('l-3xl');
-  
-      // &:before,
-      // &:after {
-      //   display: none;
-      // }
-    }
-
-    .c-hero {
-      &__content {
-        @media (min-width: 38em) {
-          width: calc((41.666% - (2 * var(--gutter) / 5)) - 0.1px);
-        }
-
-        .c-h {
-          color: color('white');
-        }
-
-        p {
-          color: color('petrol', 'step-2');
-        }
-
-        .u-link {
-          color: color('blue', 'step-1');
-        }
-      }
-
-      &__image-bg {
-        display: none;
-        
-        @media (min-width: 38em) {
-          max-width: 65%;
-          left: 35%;
-          display: block;
-          z-index: -1;
-          transition: opacity 3s ease;
-          background-position: 60% 40%;
-
-          &:after {
-            display: none;
-          }
-
-          &+ [class^='c-hero__image-'] {
-            opacity: 0;
-          }
-        }
-      }
-
-      &__image-fg {
-        @extend .c-hero__image-bg;
-        z-index: 1;
-      }
-    }
-  }
-
-  &--homepage-video {
-    position: relative;
-
-    &::after {
-      position: absolute;
-      content: '';
-      top: 0;
-      left: 0;
-      background: rgba(black, 0.33);
-      width: 100%;
-      height: 100%;
-
-      @media (min-width: 38em) {
-        background: radial-gradient(circle farthest-side at top right, rgba(46, 50, 51, 0) 0%, rgba(46, 50, 51, 0) 15.16%, rgba(46, 50, 51, 0.2) 27.66%, rgba(41, 54, 56, 0.55) 39.61%, rgba(35, 66, 71, 0.8) 49.78%, #005461 59.87%, #003039 100%);
-      }
-    }
-
-    .u-wrap {
-      &::before,
-      &::after {
-        display: none;
-
-        @media (min-width: 38em) {
-          display: inline;
-        }
-      }
-    }
-
-    .c-hero {
-        &__video-bg {
-        width: 100%;
-        height: auto;
-        margin-bottom: -6px;
-        background-size: cover;
-
-        @media (min-width: 38em) {
-          position: absolute;
-          top: 50%;
-          right: 0;
-          left: 40%;
-          max-width: 60%;
-          height: 100%;
-          transform: translateY(-50%);
-        }
-
-        video {
-          width: 100%;
-          height: 100%;
-          object-fit: cover;
-        }
-      }
-
-      &__video-button-wrap {
-        position: absolute;
-        z-index: 2;
-        right: 0;
-        bottom: calc(56.25% / 2 - 25px);
-        left: 0;
-        margin: 0 auto;
-        display: flex;
-        justify-content: center;
-
-        @media (min-width: 38em) {
-          position: absolute;
-          top: 45%;
-          right: 20%;
-          bottom: unset;
-          left: unset;
-        }
-
-        .c-button {
-          position: relative;
-
-          &::before {
-            content: '';
-            position: absolute;
-            background: rgba(black, 0.2);
-            height: 100%;
-            width: 100%;
-            top: 0;
-            left: 0;
-            border-radius: inherit;
-          }
-        }
-      }
-    }
-  }
-
-  &--homepage-light {
-    @extend .c-hero--homepage;
-    background: linear-gradient(79.62deg, color('petrol', 'step-3') 0%, color('blue', 'step-2') 100%), color('petrol', 'step-3');
-
-    @media (min-width: 38em) {
-      background: linear-gradient(86.37deg, color('petrol', 'step-3') 7.52%, color('petrol', 'step-3') 44.84%, rgba(color('petrol', 'step-3'), 0.8) 51.02%, rgba(color('petrol', 'step-3'), 0.6) 52.38%, rgba(color('petrol', 'step-3'), 0) 65.41%), color('petrol', 'step-3');
-    }
-
-    .c-hero {
-      &__content {
-        .c-h {
-          color: color('grey', 'step--1');
-        }
-
-        p {
-          color: color('grey');
-        }
-
-        .u-link {
-          color: color('blue');
-        }
-      }
-    }
-  }
-
-  &__canvas {
-    position: absolute;
-    z-index: -1;
-    height: 100%;
-    width: 100%;
-    left: 0;
-    top: 0;
-
-    @media (min-width: 38em) { 
-      z-index: 1;
-    }
-  }
-
-  &:has(+ .u-margin-top-negative-2xl) {
-    .u-wrap {
-      @include space('padding-bottom', '4xl')
-    }
-  }
-
-  &__search {
-    :first-child {
-      flex-grow: 1;
-    }
-  }
-}

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

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

package/src/_includes/components/hotspot-image/hotspot-image.config.js

@@ -1,55 +0,0 @@
-module.exports = {
-  title: 'Hotspot image',
-  component: {
-    name: 'hotspot-image',
-  },
-  context: {
-    image: {
-      src: 'https://dam.malvernpanalytical.com/3f407d1c-a153-4806-ab9e-b1bf00d41bc5/2524009%20MALV%20Infographic%20Analycial%20process_WITHOUT_TEXT_ModAW_Original%20file.jpg',
-      alt: 'Description of the image',
-    },
-    heading: {
-      position: 'top: 2.75%; left: 2.75%;',
-      content: 'All the elements of an integrated analytical workflow',
-    },
-    hotspots: [
-      {
-        position: 'top: 46%; left: 29%;',
-        button: {
-          label: 'Preparing your sample',
-        },
-        tooltip: {
-          content:
-            '<ul class="o-grid o-grid--of-two"><li class="u-bg-white u-pad-2xs">Sample preparation methods & advice</li><li class="u-bg-white u-pad-2xs">Labware and accessories</li><li class="u-bg-white u-pad-2xs">Instruments for flux dosing and fusion</li><li class="u-bg-white u-pad-2xs">Methods and advice</li></ul>',
-        },
-      },
-      {
-        position: 'top: 28.75%; left: 70%;',
-        button: {
-          label: 'Analysis with XRF',
-        },
-        tooltip: {
-          content:
-            '<ul class="o-grid o-grid--of-two"><span class="u-margin-0"></span><li class="o-grid o-grid--of-two u-align-items-start u-margin-0" style="flex-basis: 100%;"><span class="u-bg-white u-pad-2xs">XRF application methods</span><ul class="u-flow--2xs"><li class="u-bg-petrol u-petrol-step-3 u-pad-2xs">Templates in i.e., Wroxi</li><li class="u-bg-petrol u-petrol-step-3 u-pad-2xs">Application Support</li></ul></li><span class="u-margin-0"></span><li class="o-grid o-grid--of-two u-align-items-start u-margin-0" style="flex-basis: 100%;"><span class="u-bg-white u-pad-2xs">Certified reference materials</span><ul><li class="u-bg-petrol u-petrol-step-3 u-pad-2xs">Off-the-shelf and customized</li></ul></li><li class="u-bg-white u-pad-2xs">Expertise support</li><li class="u-bg-white u-pad-2xs">Pre-calibration</li><li class="u-bg-white u-pad-2xs">XRF instruments and maintenance</li></ul>',
-        },
-      },
-      {
-        position: 'top: 67.75%; left: 76%;',
-        button: {
-          label: 'Reporting results',
-        },
-        tooltip: {
-          content:
-            '<ul class="o-grid o-grid--of-two"><li class="u-bg-white u-pad-2xs">Seamless connection to LIMS</li><li class="u-bg-white u-pad-2xs">Training Instrument operation training</li><li class="u-bg-white u-pad-2xs">Data interpretation</li><li class="u-bg-white u-pad-2xs">XRF Application training</li><li class="u-bg-white u-pad-2xs">Sample preparation training</li></ul>',
-        },
-      },
-      {
-        position: 'top: 85%; left: 48.5%;',
-        button: {
-          label: 'Training',
-        },
-      },
-    ],
-  },
-  variants: [],
-};

package/src/_includes/components/hotspot-image/hotspot-image.njk

@@ -1,41 +0,0 @@
-{% set classNames = "mp c-hotspot-image" %}
-
-<div class="{{ classNames }}" role="img" aria-label="Interactive image with hotspots">
-  {% if params.image %}
-    <img src="{{ params.image.src }}" alt="{{ params.image.alt }}" role="presentation">
-  {% endif %}
-  
-  {% if params.heading %}
-    <p class="{{ classNames }}__heading" style="{{ params.heading.position }}" aria-labelledby="image-heading">
-      {{ params.heading.content }}
-    </p>
-  {% endif %}
-
-  {% if params.hotspots | length %}
-    {% for hotspot in params.hotspots %}
-      <div class="{{ classNames }}__hotspot" style="{{ hotspot.position }}" aria-live="polite">
-        {% if hotspot.button and hotspot.tooltip %}
-          <button class="{{ classNames }}__button"
-                  role="button"
-                  aria-expanded="false"
-                  aria-controls="tooltip-{{ loop.index }}"
-                  aria-label="{{ hotspot.button.label }}">
-            {{ hotspot.button.label }}
-          </button>
-          <div id="tooltip-{{ loop.index }}"
-               class="c-hotspot-image__tooltip"
-               role="tooltip"
-               aria-hidden="true">
-            {{ hotspot.tooltip.content | safe }}
-          </div>
-        {% elseif hotspot.button %}
-          <span class="{{ classNames }}__button c-hotspot-image__button--no-tooltip"
-                role="button"
-                aria-label="{{ hotspot.button.label }}">
-            {{ hotspot.button.label }}
-          </span>
-        {% endif %}
-      </div>
-    {% endfor %}
-  {% endif %}
-</div>

package/src/_includes/components/hotspot-image/hotspot-image.scss

@@ -1,103 +0,0 @@
-.c-hotspot-image {
-  position: relative;
-  counter-reset: hotspot-counter;
-
-  &__heading,
-  &__hotspot {
-    position: absolute;
-  }
-
-  &__heading {
-    background: color('petrol', 'step--1');
-    color: color('petrol', 'step-3');
-    @include padding('s', 'm');
-    border-radius: 1em;
-    font-size: var(--step-1);
-  }
-
-  &__hotspot {
-    isolation: isolate;
-
-    &:has([aria-expanded='true']) {
-      z-index: 1;
-    }
-  }
-
-  &__button {
-    position: relative;
-    background: color('petrol');
-    color: color('petrol', 'step-3');
-    @include padding('2xs');
-    display: flex;
-    gap: var(--space-2xs);
-    align-items: center;
-    border: none;
-    border-radius: 1em;
-    font-size: var(--step--1);
-
-    &:not(&--no-tooltip) {
-      cursor: pointer;
-      transition: 300ms background-color;
-
-      &:where(:hover, :focus) {
-        background: color('petrol', 'step--1');
-      }
-    }
-
-    &::before,
-    &::after {
-      --number-size: calc(var(--step-1) * 1.5);
-      height: var(--number-size);
-      width: var(--number-size);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      border-radius: 2em;
-      font-size: var(--step-1);
-      font-weight: 600;
-    }
-
-    &::before {
-      counter-increment: hotspot-counter;
-      content: counter(hotspot-counter);
-      background: color('red');
-      color: color('white');
-    }
-
-    &::after {
-      content: '+';
-      background: color('petrol', 'step--1');
-      color: color('white');
-      @include padding('3xs');
-    }
-
-    &--no-tooltip::after {
-      display: none;
-    }
-  }
-
-  &__tooltip {
-    --gutter: var(--space-2xs);
-    display: none;
-    position: absolute;
-    background: color('petrol', 'step-1');
-    margin-top: -1em;
-    padding-top: calc(var(--space-2xs) + 1em);
-    @include padding-right('2xs');
-    @include padding-bottom('2xs');
-    @include padding-left('2xs');
-    border-bottom-right-radius: 1em;
-    border-bottom-left-radius: 1em;
-    z-index: -1;
-    font-size: var(--step--2);
-
-    .u-bg-white,
-    .u-bg-petrol {
-      border-radius: calc(1em / 2);
-    }
-
-    &--open {
-      display: block;
-    }
-  }
-}

package/src/_includes/components/hotspot-image/macro.njk

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

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

@@ -1,18 +0,0 @@
-module.exports = {
-  title: 'Icons',
-  preview: 'icons',
-  docs: true,
-  component: {
-    name: 'icon',
-  },
-  context: {
-    id: 'info'
-  },
-  props: [
-    {
-      table: [
-        ['id', 'string', 'ID for the SVG sprite']
-      ]
-    }
-  ]
-}

package/src/_includes/components/icon/icon.md

@@ -1 +0,0 @@
-Read about the design decisions for iconography [here](/components/iconography).

package/src/_includes/components/icon/icon.njk

@@ -1,13 +0,0 @@
-{%- set classNames = "mp c-icon" -%}
-
-{%- if params.id -%}
-  {% set classNames = classNames + " c-icon--" + params.id %}
-{% endif -%}
-
-{%- if params.class -%}
-  {% set classNames = classNames + " " + params.class %}
-{% endif -%}
-
-<svg role="img" aria-hidden="true" focusable="false" class="{{ classNames }}">
-  <use xlink:href="/static/svg/sprite.svg#{{ params.id }}"></use>
-</svg>

package/src/_includes/components/icon/icon.scss

@@ -1,6 +0,0 @@
-.c-icon {
-  width: 1em;
-  height: 1em;
-  color: inherit;
-  font-size: inherit;
-}

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

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

package/src/_includes/components/input/checkbox.config.js

@@ -1,41 +0,0 @@
-const categories = require('../component/categories');
-
-module.exports = {
-  title: 'Checkbox',
-  category: categories.form,
-  component: {
-    name: 'checkbox',
-    folder: 'input'
-  },
-  figma: 'https://www.figma.com/file/rUQ6aPQAfBX55o3hH0Lqb3/Design-exploration?node-id=213%3A579',
-  preview: 'form',
-  context: {
-    label: 'Label',
-    name: 'name',
-    id: 'id'
-  },
-  variants: [
-    {
-      title: 'Checked',
-      context: {
-        checked: true
-      }
-    },
-    {
-      title: 'Disabled',
-      context: {
-        disabled: true
-      }
-    }
-  ],
-  props: [
-    {
-      table: [
-        ['label', 'string'],
-        ['id', 'string', 'ID attribute'],
-        ['name', 'string', 'Name attribute (falls back to ID)'],
-        ['checked', 'bool', 'Is this input checked?']
-      ]
-    }
-  ]
-}

package/src/_includes/components/input/checkbox.njk

@@ -1,2 +0,0 @@
-<input type="checkbox" class="c-checkbox" name="{{ params.name or params.id }}" id="{{ params.id }}" value="{{ params.value }}" {{ 'checked' if params.checked }} {{ 'required' if params.required }} {{ 'disabled' if params.disabled }} />
-<label for="{{ params.id }}">{{ params.label }}</label>