mp-design-system 1.2.64 → 1.2.65

package/src/_includes/components/footer/footer.scss

@@ -1,127 +0,0 @@
-.c-footer {
-  background: color('petrol', 'step--1');
-  color: color('white');
-  @include step(-1);
-  margin-top: auto;
-
-  a:hover {
-    color: color('blue', 'step-1');
-  }
-
-  &__primary {
-    @include padding-bottom(s-m);
-    @include padding-top(s-l);
-  }
-
-  &.mp &__h-links,
-  &.mp &__sections,
-  &.mp &__sections ul,
-  &.mp &__sections h4 {
-    line-height: lh('prose');
-  }
-
-  &__sections {
-    @extend .o-grid, .o-grid--of-four;
-    @include margin-bottom(0);
-
-    & > li {
-      @include margin-bottom('gutter');
-    }
-
-    ul li {
-      @include margin-top('2xs');
-    }
-  }
-
-  &__subtitle {
-    @include padding-bottom('s');
-    position: relative;
-
-    &:after {
-      content: '';
-      width: 15px;
-      height: 1px;
-      background: color('petrol', 'step-1');
-      position: absolute;
-      left: 0;
-      bottom: 4px;
-    }
-  }
-
-  &__identity {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-  }
-
-  &__logo {
-    display: block;
-    max-width: 216px;
-    width: 60%;
-
-    img {
-      @include margin-right('gutter');
-      filter: saturate(0) brightness(10);
-    }
-  }
-
-  &__social {
-    display: flex;
-    @include margin-top('2xs');
-
-    li + li {
-      @include margin-left('s-m');
-    }
-
-    .c-icon {
-      font-size: 1.5rem;
-    }
-  }
-
-  &__secondary {
-    background: color('petrol', 'step--2');
-    @include padding('xs', 0);
-
-    span a {
-      color: color('blue', 'step-1');
-      text-decoration: underline;
-    }
-  }
-
-  .o-prose li a {
-    color: color('blue', 'step-1');
-  }
-
-  &__h-links {
-    margin-bottom: 0.5rem;
-  }
-
-  @media (min-width: 43em) {
-    &__secondary .u-wrap {
-      display: flex;
-      justify-content: space-between;
-      flex-wrap: wrap;
-      align-items: center;
-    }
-
-    &__h-links {
-      display: flex;
-      @include margin(0.5rem, 's-m', 0.5rem, 0);
-      
-      li + li {
-        @include margin-left('s');
-      }
-    }
-  }
-
-  @media (min-width: 1410px) {
-    &__secondary {
-      clip-path: polygon(0% 100%, 68px 0%, 100% 0%, 100% 100%, 68px 100%);
-    }
-  }
-}
-
-// Temporary fix until RichTextRegion is fixed
-.rich-text-region:has( + .c-footer ) {
-  @include margin-bottom('l-xl');
-}

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

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

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

@@ -1,55 +0,0 @@
-module.exports = {
-    title: 'Gallery',
-    component: {
-        name: 'gallery'
-    },
-    docs: true,
-    context: {
-        images: [
-            {
-                src: '/static/img/slide-4.webp',
-                title: 'Zetasizer slide 1'
-            },
-            {
-                src: '/static/img/slide-5.webp',
-                title: 'Zetasizer slide 2'
-            },
-            {
-                src: '/static/img/slide-6.webp',
-                title: 'Zetasizer slide 3'
-            },
-            {
-                src: '/static/img/slide-7.webp',
-                title: 'Zetasizer slide 4'
-            }
-        ],
-        videos: [
-            {
-                title: 'FOCUS ON THE AIR YOU BREATHE - Elemental analysis of air filters according to US EPA Method io-3.3',
-                id: 'Q4H7EdHFghs'
-            }
-        ]
-    },
-    props: [
-        {
-            table: [
-                ['images', 'image[]', 'An array of images'],
-                ['videos','video[]','An array of videos']
-            ]
-        },
-        {
-            title: 'image',
-            table: [
-                ['src','string'],
-                ['title','string']
-            ]
-        },
-        {
-            title: 'video',
-            table: [
-                ['title','string'],
-                ['id','string','Youtube ID']
-            ]
-        }
-    ]
-}

package/src/_includes/components/gallery/gallery.md

@@ -1 +0,0 @@
-Gallery images are displayed at 16:9 ratio, regardless of the image's true size. This prevents the component from unexpectedly changing size when switching between images.

package/src/_includes/components/gallery/gallery.njk

@@ -1,51 +0,0 @@
-{% from "components/embed/macro.njk" import youtube %}
-
-{% set count = 1 %}
-
-<div class="u-flow c-gallery">
-    <div class="c-gallery__main">
-        {% if params.images | length %}
-            {% for image in params.images %}
-                {% set active = (count == 1) %}
-                <figure class="c-gallery__slide {{"active" if active}}" data-slide="{{count}}">
-                    <img src="{{image.src}}" alt="{{image.title}}" >
-                </figure>
-                {% set count = count+1 %}
-            {% endfor %}
-        {% endif %}
-        {% if params.videos | length %}
-            {% for video in params.videos %}
-                <div class="c-gallery__slide c-gallery__video" data-slide="{{count}}">
-                    {{ youtube({
-                        title: video.title,
-                        id: video.id
-                    }) }}
-                </div>
-                {% set count = count+1 %}
-            {% endfor %}
-        {% endif %}
-    </div>
-
-{% set count = 1 %}
-
-    <div class="c-gallery__thumbnails">
-        {% if params.images | length %}
-            {% for image in params.images %}
-                {% set active = (count == 1) %}
-                <figure class="c-gallery__slide {{"active" if active}}" data-slide="{{count}}">
-                    <img src="{{image.src}}" alt="{{image.title}}" loading="lazy" width="102">
-                </figure>
-                {% set count = count+1 %}
-            {% endfor %}
-        {% endif %}
-        {% if params.videos | length %}
-            {% for video in params.videos %}
-                {% set active = (count == 1) %}
-                <figure class="c-gallery__slide {{"active" if active}}" data-slide="{{count}}">
-                    <img src="https://img.youtube.com/vi/{{video.id}}/default.jpg" alt="{{video.title}}" loading="lazy" width="102">
-                </figure>
-                {% set count = count+1 %}
-            {% endfor %}
-        {% endif %}
-    </div>
-</div>

package/src/_includes/components/gallery/gallery.scss

@@ -1,54 +0,0 @@
-.c-gallery {
-  max-height: 95vh;
-
-  img {
-    cursor: pointer;
-  }
-
-  &__main {
-    position: relative;
-
-    & > * {
-      width: 100%;
-
-      img {
-        aspect-ratio: 16 / 9;
-        display: block;
-        margin: 0 auto;
-        max-height: calc(95vh - 90px);
-        object-fit: contain;
-      }
-    
-      &:not(.active) {
-        display: none;
-      }
-    }
-  }
-
-  &__thumbnails {
-    @include padding-bottom('s');
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    gap: 2%;
-    gap: max(8px, 2%);
-    
-    & > * {
-      background: color('grey', 'step-3');
-      max-width: 10.75%;
-      max-width: max(var(--space-xl), 10.75%);
-      aspect-ratio: 16 / 9;
-
-      img {
-        height: 100%;
-        opacity: 0.8;
-        object-fit: cover;
-        width: 100%;
-      }
-
-      &.active img {
-          opacity: 0.25;
-      }
-    }
-  }
-}

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

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

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

@@ -1,38 +0,0 @@
-module.exports = {
-  title: 'Header',
-  component: {
-    name: 'header',
-  },
-  context: {
-    navLeft: [
-      "Products", "Solutions", "Webinars and events", "Resources", "Support & downloads"
-    ],
-    navRight: ["Log in", "Register"],
-  },
-  variants: [
-    {
-      title: 'Blog',
-      context: {
-        siteNav: "blog",
-        navLeft: [
-          "Blog home", "About", "Categories", "Feedback"
-        ],
-        withHome: true
-      }
-    },
-    {
-      title: 'Store',
-      context: {
-        siteNav: "store",
-        navLeft: [
-          "Store home", "Consumables", "Standards", "Accessories", "Contracts and agreements", "Software"
-        ],
-        navRight: ["Log in", "Register"],
-        button: "Basket (0)",
-        withHome: true
-      }
-    },
-  ],
-  figma: 'https://www.figma.com/file/rUQ6aPQAfBX55o3hH0Lqb3/Design-exploration?node-id=66%3A150',
-  docs: true
-}

package/src/_includes/components/header/header.md

@@ -1,4 +0,0 @@
-There were two aim in mind when designing the header:
-
-- To have one consistent visual style for the header.
-- To have a consistent layout that does not shift around when you move between sites.

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

@@ -1,111 +0,0 @@
-{% from "components/icon/macro.njk" import icon %}
-{% from "components/input/macro.njk" import select %}
-
-<header class="mp c-header" id="header">
-  <div class="c-header__wrap u-wrap">
-    <a class="c-header__logo" href="/prototype">
-      <img src="/static/svg/logo.svg" alt="Home" />
-    </a>
-
-    <a class="c-navicon" href="#nav" aria-label="Open Navigation">
-      <i></i>
-      <i></i>
-      <i></i>
-    </a>
-
-    <div class="c-header__primary" id="nav">
-      <a class="c-navicon" href="#header" aria-label="Close Navigation">
-        <i></i>
-        <i></i>
-        <i></i>
-      </a>
-
-      <nav class="c-header__corporate" aria-label="Corporate">
-        <ul>
-          <li>
-            {{ select({
-                label: "Language",
-                name: "select",
-                id: "Language",
-                value: "English",
-                hideLabel: true,
-                required: false,
-                options: [
-                    [
-                        "Deutsch"
-                    ],
-                    [
-                        "English"
-                    ],
-                    [
-                        "Español"
-                    ],
-                    [
-                        "Français"
-                    ],
-                    [
-                        "Português"
-                    ],
-                    [
-                        "Pусский"
-                    ],
-                    [
-                        "한국어"
-                    ],
-                    [
-                        "日本語"
-                    ],
-                    [
-                        "简体中文"
-                    ]
-                ]
-            })}}
-          </li>
-          <li>
-            <a href="">About us</a>
-          </li>
-          <li>
-            <a href="">Careers</a>
-          </li>
-          <li>
-            <a href="/prototype/blog">Blog</a>
-          </li>
-          <li>
-            <a href="/prototype/request-a-quote">Contact us</a>
-          </li>
-        </ul>
-      </nav>
-
-      <form class="c-header__search">
-        <label for="site-search" class="u-hidden">Search</label>
-        <div class="u-flex u-bg-petrol-step-3">
-          <input id="site-search" placeholder="Search" type="search" name="s" class="c-input c-input--alt c-input--with-button" />
-          <button type="button" class="c-button--reset u-blue">
-            {{ icon({ id: 'search' }) }}
-          </button>
-        </div>
-      </form>
-      
-      {#
-      {% set siteNav = params.siteNav %}
-      {% if not siteNav %}
-        {% set siteNav %}{% include "navigation/corporate.njk" %}{% endset %}
-      {% endif %}
-      {{ siteNav | safe }}
-      #}
-
-      {% if params.siteNav == 'blog' %}
-        {% include 'navigation/blog.njk' %}
-      {% elseif params.siteNav == 'store' %}
-        {% include 'navigation/store.njk' %}
-      {% else %}
-        {% set siteNav = params.siteNav %}
-        {% if not siteNav %}
-          {% set siteNav %}{% include "navigation/corporate.njk" %}{% endset %}
-        {% endif %}
-        {{ siteNav | safe }}
-      {% endif %}
-
-    </nav>
-  </div>
-</header>