mp-design-system 1.2.64 → 1.2.65

package/src/assets/js/imports/tabs.js

@@ -1,58 +0,0 @@
-function Tabs() {
-  const tabs = Array.from(document.querySelectorAll('.c-tabs--anchor'));
-  tabs.forEach(setupTabs);
-}
-
-function setupTabs(parent) {
-  const controls = Array.from(parent.querySelectorAll('.c-tabs__control'));
-  const content = Array.from(parent.querySelectorAll('.c-tab'));
-  const persist = parent.classList.contains('c-tabs--persist');
-  
-  if (!controls.length || !content.length) return;
-
-  controls.forEach(control => {
-    control.addEventListener('click', controlClick(controls, content, persist))
-  })
-
-  if (persist && window.location.hash) {
-    const control = parent.querySelector('[href="' + window.location.hash + '"]');
-    if (control) control.dispatchEvent(new Event('click'));
-  }
-}
-
-function controlClick(controls, contents, persist) {
-  return (event) => {
-    const control = event.currentTarget;
-    const content = contents.find(x => x.id === control.getAttribute('href').replace('#', ''));
-    
-    if (!content) {
-      return true;
-    };
-
-    event.preventDefault();
-    
-    if (persist) {
-      history.pushState(null, null, control.getAttribute('href'));
-    }
-
-    controls.forEach(c => c.classList.toggle('c-tabs__control--active', c === control));
-    contents.forEach(c => {
-      const isCurrent = c === content;
-      c.classList.toggle('c-tab--active', isCurrent);
-      
-      if (persist) return;
-
-      if (isCurrent) {
-        c.setAttribute('tabIndex', -1);
-        
-        const y = window.scrollY;
-        c.focus();
-        window.scrollTo({ behavior: "auto", top: y })
-      } else {
-        c.removeAttribute('tabIndex');
-      }
-    });
-  }
-}
-
-export default Tabs;

package/src/assets/js/imports/utilities.js

@@ -1,31 +0,0 @@
-export function shuffle(array) {
-  const arr = [...array];
-  for (let i = arr.length - 1; i > 0; i--) {
-    let j = Math.floor(Math.random() * (i + 1));
-    [arr[i], arr[j]] = [arr[j], arr[i]];
-  }
-
-  return arr;
-}
-
-export function userPrefersReducedMotion() {
-  const QUERY = '(prefers-reduced-motion: no-preference)';
-  const mediaQueryList = window.matchMedia(QUERY);
-  const prefersReducedMotion = !mediaQueryList.matches;
-  return prefersReducedMotion;
-}
-
-export const debounce = (func, limit) => {
-  let wait = false; 
-  return () => {
-      if (wait) return;
-      func();
-      wait = true;
-      setTimeout(() => wait = false, limit);
-  }
-}
-
-export const lerp = (x, y, a) => x * (1 - a) + y * a;
-export const clamp = (a, min = 0, max = 1) => Math.min(max, Math.max(min, a));
-export const invlerp = (x, y, a) => clamp((a - x) / (y - x));
-export const range = (x1, y1, x2, y2, a) => lerp(x2, y2, invlerp(x1, y1, a));

package/src/assets/scss/components/form.scss

@@ -1,306 +0,0 @@
-.mp-dynamicform {
-  .c-form {
-    &__header {
-      @extend .o-prose;
-      @include flow('s');
-      @include padding-bottom('m');
-    }
-
-    &__title {
-      font-size: var(--step-4) !important;
-      letter-spacing: -0.02em;
-    }
-
-    &__row.o-grid {
-      flex-wrap: wrap;
-      gap: var(--space-s);
-
-      .c-form__input {
-        flex: 1 0 298px;
-
-        @media only screen and (max-width: 31.25em) {
-          flex-shrink: 1;
-        }
-      }
-
-      .c-input {
-        flex-shrink: 1;
-      }
-    }
-
-    &__input-wrap {
-      display: flex;
-      gap: var(--space-3xs) var(--space-s);
-      flex-wrap: wrap;
-      align-items: flex-start;
-
-      .c-label {
-        min-width: 115px;
-        flex-basis: 115px;
-        @include margin-bottom(0);
-        word-wrap: break-word;
-
-        @media only screen and (max-width: 31.25em) {
-          flex-basis: 100%;
-        }
-
-        & + * {
-          flex: 1 0 115px;
-        }
-      }
-
-      .c-input--textarea {
-        flex-basis: 100%;
-      }
-    }
-
-    &__messages-wrap {
-      row-gap: 0;
-      flex-basis: 100%;
-
-      p {
-        @include margin-top('2xs');
-        letter-spacing: -0.01em;
-        font-size: var(--step--1);
-      }
-    }
-  }
-
-  & > .c-fieldset,
-  & > .c-tab > .c-fieldset {
-    & > * + *:not(:has(> .u-hidden)) {
-      @include padding-top('s');
-    }
-  }
-
-  .c-label--required:after {
-    content: '*';
-    color: color('red');
-    padding: 0 2px;
-    position: relative;
-    top: -2px;
-  }
-
-  .c-input__spacer {
-    height: 0;
-    flex-basis: 148px;
-  }
-
-  .c-input--select {
-    cursor: pointer;
-  }
-
-  .c-checkbox + label,
-  .c-radio + label {
-    display: inline-block;
-  }
-}
-
-.c-fieldset {
-  border: 0;
-  padding: 0.01em 0 var(--space-s) 0;
-  margin: 0;
-  min-width: 0;
-
-  legend {
-    @extend .c-h--step-1;
-    font-weight: weight('bold');
-    letter-spacing: ls('-3%');
-    display: table;
-    float: left;
-    padding: 0;
-    width: 100%;
-
-    + * {
-      clear: both;
-    }
-  }
-
-  & + & {
-    @include padding-top('s');
-    position: relative;
-
-    &::before {
-      content: '';
-      position: absolute;
-      height: 1px;
-      width: 100%;
-      background: color('petrol', 'step-2');
-      top: 0;
-    }
-  }
-
-  & > .o-grid,
-  & > .o-grid > * {
-    @include margin(0);
-    @include padding(0);
-  }
-}
-
-.c-label {
-  @include margin-bottom('2xs');
-  display: block;
-  align-self: center;
-  font-size: var(--step--1);
-  font-weight: weight('bold');
-}
-
-/* === MP FORM === */
-.mp-dynamicform {
-  &.c-form {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-s);
-
-    &:not(.c-tabs__content) {
-      background: color('blue', 'step-3');
-      @include padding('s-l');
-    }
-  }
-
-  .c-form {
-    &__header {
-      @extend .o-prose;
-      @include flow('s');
-      @include padding-bottom('2xs');
-    }
-
-    &__heading {
-      font-size: var(--step-4) !important;
-      letter-spacing: -0.02em;
-    }
-
-    // &__lede {
-    // }
-
-    &__section {
-      min-width: 0;
-      margin: 0;
-      border: 0;
-      display: flex;
-      flex-flow: column;
-      gap: var(--space-s);
-
-      &--submit {
-        align-items: flex-start;
-
-        .c-button {
-          @include margin(0);
-        }
-      }
-
-      & > .o-grid,
-      & > .o-grid > * {
-        @include margin(0);
-        @include padding(0);
-      }
-    }
-
-    &__section + .c-form__section:not(.c-form__section--submit) {
-      @include padding-top('s');
-      position: relative;
-
-      &::before {
-        content: '';
-        position: absolute;
-        height: 1px;
-        width: 100%;
-        background: color('petrol', 'step-2');
-        top: 0;
-      }
-    }
-
-    &__section-title {
-      @extend .c-h--step-1;
-      font-weight: weight('bold');
-      letter-spacing: ls('-3%');
-      display: table;
-      float: left;
-      padding: 0;
-      width: 100%;
-    }
-
-    &__group {
-      &.o-grid {
-        @include margin(0);
-        @include padding(0);
-        flex-wrap: wrap;
-        gap: var(--space-s);
-
-        .c-form__field {
-          flex: 1 0 298px;
-
-          @media only screen and (max-width: 31.25em) {
-            flex-shrink: 1;
-          }
-        }
-
-        .c-form__input {
-          flex-shrink: 1;
-        }
-      }
-    }
-
-    &__field {
-      @include margin-bottom(0);
-    }
-
-    &__input-wrap {
-      display: flex;
-      gap: var(--space-3xs) var(--space-s);
-      flex-wrap: wrap;
-      align-items: flex-start;
-    }
-
-    &__label {
-      @extend .c-label;
-      min-width: 115px;
-      flex-basis: 115px;
-      word-wrap: break-word;
-
-      @media only screen and (max-width: 31.25em) {
-        flex-basis: 100%;
-      }
-
-      &--required:after {
-        content: '*';
-        color: color('red');
-        padding: 0 2px;
-        position: relative;
-        top: -2px;
-      }
-
-      & + * {
-        flex: 1 0 115px;
-      }
-    }
-
-    &__input {
-      @extend .c-input;
-
-      &--checkbox {
-        @extend .c-checkbox;
-      }
-
-      &--select {
-        @extend .c-input, .c-input--select;
-      }
-
-      &--textarea {
-        @extend .c-input, .c-input--textarea;
-        flex-basis: 100%;
-      }
-    }
-
-    &__messages-wrap {
-      row-gap: 0;
-      flex-basis: 100%;
-
-      p {
-        @include margin-top('2xs');
-        letter-spacing: -0.01em;
-        font-size: var(--step--1);
-      }
-    }
-  }
-}

package/src/assets/scss/components/headings.scss

@@ -1,68 +0,0 @@
-.c-h {
-  font-weight: 700;
-  font-family: $font-stack;
-  line-height: lh();
-
-  &--page-subtitle {
-    @include step(1);
-    color: color('green');
-    font-weight: weight('semi');
-  }
-
-  &--step-6,
-  &--page-title {
-    @include hyphenated;
-    @include step(6);
-  }
-
-  &--step-5 {
-    @include hyphenated;
-    @include step(5);
-  }
-
-  &--step-4 {
-    @include step(4);
-  }
-
-  &--step-3 {
-    @include step(3);
-  }
-
-  &--step-2 {
-    @include step(2);
-  }
-
-  &--step-1 {
-    @include step(1);
-  }
-
-  &--step-0 {
-    @include step();
-  }
-
-  &--step--1 {
-    @include step(-1);
-  }
-
-  &--reset {
-    font-weight: weight();
-    @include step();
-  }
-
-  &--upper {
-    text-transform: uppercase;
-    color: color('petrol');
-    @include step(-1);
-    letter-spacing: ls('2%');
-  }
-
-  &--event-date {
-    @include step(1);
-    color: color('petrol', 'step-1');
-  }
-
-  &--tagline {
-    @include step();
-    color: color('green');
-  }
-}

package/src/assets/scss/components/index.scss

@@ -1,52 +0,0 @@
-@import '~comp/accordion/accordion.scss';
-@import '~comp/alert/alert.scss';
-@import '~comp/back-to-top/back-to-top.scss';
-@import '~comp/breadcrumb/breadcrumb.scss';
-@import '~comp/button/button.scss';
-@import '~comp/campaign/campaign.scss';
-@import '~comp/card/card.scss';
-@import '~comp/card/existing-customer-card.scss';
-@import '~comp/card/industry-card.scss';
-@import '~comp/card/measurement-type-card.scss';
-@import '~comp/card/product-card.scss';
-@import '~comp/card/search-result-card.scss';
-@import '~comp/card/technology-card.scss';
-@import '~comp/card-new/card-new.scss';
-@import '~comp/comparison-table/comparison-table.scss';
-@import '~comp/embed/embed.scss';
-@import '~comp/event-card/event-card.scss';
-@import '~comp/eyebrow/eyebrow.scss';
-@import '~comp/facet/facet.scss';
-@import '~comp/featured-article-card/featured-article-card.scss';
-@import '~comp/features-table/features-table.scss';
-@import '~comp/filter-search/filter-search.scss';
-@import '~comp/footer/footer.scss';
-@import '~comp/gallery/gallery.scss';
-@import '~comp/header/header.scss';
-@import '~comp/hero/hero.scss';
-@import '~comp/hotspot-image/hotspot-image.scss';
-@import '~comp/icon/icon.scss';
-@import '~comp/input/input.scss';
-@import '~comp/input/radio.scss';
-@import '~comp/input/toggle.scss';
-@import '~comp/internal-nav/internal-nav.scss';
-@import '~comp/meta-box/meta-box.scss';
-@import '~comp/off-canvas/off-canvas.scss';
-@import '~comp/option-list/option-list.scss';
-@import '~comp/post-meta/post-meta.scss';
-@import '~comp/product-card/product-card.scss';
-@import '~comp/product-signpost/product-signpost.scss';
-@import '~comp/quote/quote.scss';
-@import '~comp/scroll-spy/scroll-spy.scss';
-@import '~comp/series/series.scss';
-@import '~comp/signpost/signpost.scss';
-@import '~comp/slat/slat.scss';
-@import '~comp/table/table.scss';
-@import '~comp/tabs/tabs.scss';
-@import '~comp/twi/twi.scss';
-@import '~comp/usp/usp.scss';
-
-@import './form.scss';
-@import './headings.scss';
-@import './lightbox.scss';
-@import './product-finder.scss';

package/src/assets/scss/components/lightbox.scss

@@ -1,64 +0,0 @@
-.c-lightbox {
-  position: fixed;
-  z-index: 1000;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(color('grey', 'step--1'), .9);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  &__slide {
-    max-width: 90vw;
-    margin: auto;
-    display: none;
-
-    &.active {
-      display: block;
-
-      img {
-        max-width: 85vw;
-        max-height: 90vh;
-        margin: auto;
-        display: block;
-        object-fit: contain;
-      }
-    }
-  }
-
-  &__prev,
-  &__next {
-    position: absolute;
-    height: 2rem;
-    width: 2rem;
-    background-repeat: no-repeat;
-    background-position: center;
-    padding: 0.5rem;
-    cursor: pointer;
-  }
-
-  &__prev {
-    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="arrow-left" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12H2M2 12L9 5M2 12L9 19" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>');
-    left: 0.5rem;
-  }
-
-  &__next {
-    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="arrow-right" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12H22M22 12L15 5M22 12L15 19" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>');
-    right: 0.5rem;
-  }
-
-  &__close {
-    position: absolute;
-    top: 0.6rem;
-    right: 0.6rem;
-    color: color('white');
-    font-size: 1.6rem;
-    cursor: pointer;
-  }
-
-  &__video {
-    width: 100%;
-    max-height: 80vh;
-  }
-}

package/src/assets/scss/components/product-finder.scss

@@ -1,75 +0,0 @@
-.c-product-finder {
-    &__panel {
-        background: color('petrol', 'step-3');
-        @include padding('xl-2xl', 'm-xl');
-        position: relative;
-
-        &--intro {
-            background: radial-gradient(circle at top right, color('petrol', 'step-3') 0%, color('petrol', 'step-3') 30%, color('blue', 'step-2') 100%);
-
-            .c-h {
-                font-size: var(--step-5);
-            }
-        }
-
-        &:after {
-            content: '';
-            position: absolute;
-            width: 0;
-            height: 0;
-            border-style: solid;
-            @include space('border-width', 'xl', 'xl', 0, 0);
-            border-color: transparent color('white') transparent transparent;
-            bottom: 0;
-            right: 0;
-            display: none;
-        }
-        
-        @media (min-width: 48em) {
-            &:after {
-                display: block;
-            }
-        }
-
-        .c-h,
-        figure {
-            @include margin-bottom(0);
-        }
-    }
-
-    &__result {
-        display: flex;
-        flex-flow: column;
-        flex: 1;
-        @include flow('s');
-
-        &>.c-h {
-            font-size: var(--step--1);
-            text-transform: uppercase;
-        }
-
-        &--upgrade {
-            &>.c-h {
-                color: color('petrol');
-
-                @supports(-webkit-text-fill-color:transparent) {
-                    background-image: linear-gradient(to right, color('petrol'), color('blue'));
-                    -webkit-background-clip: text;
-                    -webkit-text-fill-color: transparent;
-                    display: inline-block;
-
-                    &::selection {
-                        -webkit-background-clip: none;
-                    }
-                }
-            }
-
-            .c-product-card {
-                border: 1px solid;
-                border-image-slice: 1;
-                border-image-source: linear-gradient(to right, rgba(color('blue'), 0.5), rgba(color('green'), 0.5));
-            }
-        }
-
-    }
-}

package/src/assets/scss/elements/index.scss

@@ -1,2 +0,0 @@
-@import './reset.scss';
-@import './typography.scss';