mp-design-system 1.2.64 → 1.2.66

package/src/_includes/components/card/product-card.scss

@@ -1,88 +0,0 @@
-.c-product-card {
-  background: color('white');
-  display: flex;
-  flex-flow: column;
-  border: 1px solid color('petrol', 'step-2');
-
-  &__body {
-    @include padding('s-m');
-    display: flex;
-    flex-flow: column;
-    flex-grow: 1;
-    
-    & > * + * {
-      @include margin-top('xs');
-    }
-  }
-
-  &__heading {
-    @extend .c-h, .c-h--step-0;
-  }
-
-  &__lede {
-    @extend .u-step--1;
-  }
-
-  &__footer {
-    @include margin-top('auto');
-    @include padding-top('s');
-    display: flex;
-    flex-flow: row;
-    flex-wrap: wrap;
-    gap: var(--space-2xs);
-    
-    & > * {
-      flex-grow: 1;
-    }
-  }
-
-  &__image {
-    height: 10em;
-    order: -1;
-
-    img {
-      height: 100%;
-      width: 100%;
-      aspect-ratio: 16/9;
-      object-fit: contain;
-    }
-  }
-}
-
-.c-product-card--features-list {
-  .c-product-card {
-    &__heading {
-      @extend .c-h--step-1;
-    }
-
-    &__lede {
-      @extend .u-step-0;
-    }
-
-    &__features-list {
-      @include margin-top('2xs');
-      list-style: none;
-
-      &-heading {
-        @include margin-top('s');
-        font-weight: weight("bold");
-      }
-
-      & > * + * {
-        @include margin-top('3xs');
-      }
-    }
-
-    &__feature {
-      &--tick {
-        svg {
-          color: color('green');
-        }
-      }
-
-      &--cross {
-        color: color('grey', 'step-2');
-      }
-    }
-  }
-}

package/src/_includes/components/card/search-result-card.config.js

@@ -1,29 +0,0 @@
-const categories = require('../component/categories');
-
-module.exports = {
-  title: 'Search result card',
-  category: categories.card,
-  component: {
-    name: 'search-result-card',
-    folder: 'card'
-  },
-  preview: 'content-width',
-  context: {
-    title: 'Mastersizer range',
-    description: 'The Mastersizer range of laser diffraction particle size analyzers set the standard for delivering rapid, accurate particle size distributions for both wet and dry dispersions.',
-    link: '/en/products/product-range/mastersizer-range',
-    tag: 'Product range'
-  },
-  variants: [
-  ],
-  props: [
-    {
-      table: [
-        ['title', 'string'],
-        ['description', 'string'],
-        ['link', 'string'],
-        ['tag', 'string'],
-      ]
-    }
-  ]
-}

package/src/_includes/components/card/search-result-card.njk

@@ -1,33 +0,0 @@
-{%- from "components/eyebrow/macro.njk" import eyebrow -%}
-
-<article class="mp c-search-result-card">
-  <header class="c-search-result-card__header">
-    {% if params.title | length %}
-      <h2 class="c-search-result-card__title">
-        {% if params.link | length %}
-          <a href="{{ params.link }}" aria-label="{{ params.title }}">
-            {{ params.title }}
-          </a>
-          {% else %}
-            {{ params.title }}
-        {% endif %}
-      </h2>
-    {% endif %}
-    {% if params.tag | length %}
-      <div class="c-search-result-card__tag">
-        {{ eyebrow({
-          text: params.tag,
-          colour: 'blue'
-        }) }}
-      </div>
-    {% endif %}
-  </header>
-  <div class="c-search-result-card__body">
-    {% if params.description | length %}
-      <p class="c-search-result-card__description">{{ params.description }}</p>
-    {% endif %}
-    {% if params.link | length %}
-      <span class="c-search-result-card__url">{{ params.link }}</span>
-    {% endif %}
-  </div>
-</article>

package/src/_includes/components/card/search-result-card.scss

@@ -1,48 +0,0 @@
-.c-search-result-card {
-  @extend .u-flow--xs;
-  @include padding-top('m');
-  @include padding-bottom('m');
-  position: relative;
-
-  &:focus-within {
-    outline: 2px solid color('petrol');
-  }
-
-  &:where(:hover) .c-search-result-card__title {
-    text-decoration: underline;
-    text-underline-offset: 0.1em;
-  }
-
-  &__header,
-  &__body {
-    display: flex;
-    flex-direction: column;
-  }
-
-  &__title {
-    @include step(1);
-
-    a {
-      @include clickable-parent;
-    }
-  }
-
-  &__tag,
-  &__description + &__url {
-    @include margin-bottom('2xs');
-    order: -1;
-  }
-
-  &__body {
-    @extend .o-prose;
-    @include step(-1);
-  }
-
-  &__url {
-    color: color('utility-blue');
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-line-clamp: 1;
-    -webkit-box-orient: vertical;
-  }
-}

package/src/_includes/components/card/technology-card.config.js

@@ -1,35 +0,0 @@
-const categories = require('../component/categories');
-
-module.exports = {
-  title: 'Technology card',
-  category: categories.card,
-  component: {
-    name: 'technology-card',
-    folder: 'card'
-  },
-  preview: 'cards-three',
-  context: {
-    title: 'X-ray Diffraction (XRD)',
-    link: '#',
-    description: 'XRD is the only laboratory technique that non-destructively and accurately obtains information such as chemical composition.',
-    image: {
-      src: '/static/img/range-product-1.jpg',
-      alt: ''
-    },
-    footer: {
-      button: {
-        label: 'View technology'
-      }
-    }
-  },
-  variants: [],
-  props: [
-    {
-      table: [
-        ['title', 'string'],
-        ['link', 'string'],
-        ['image', 'object', 'Image object']
-      ]
-    }
-  ]
-}

package/src/_includes/components/card/technology-card.njk

@@ -1,35 +0,0 @@
-{%- from "components/twi/macro.njk" import twi -%}
-
-{%- set classes = 'mp c-technology-card' -%}
-
-{%- if params.classes -%}{% set classes = classes + ' ' + params.classes %}{%- endif -%}
-
-<article class="{{ classes }}" role="article" aria-label="Technology card">
-  <div class="c-technology-card__body">
-    {% if params.title | length %}
-      <h3 class="c-technology-card__heading">
-      {% if params.link | length %}
-        <a href="{{ params.link }}" aria-label="{{ params.title }}">
-          {{ params.title }}
-        </a>
-        {% else %}
-          {{ params.title }}
-        {% endif %}
-      </h3>
-    {% endif %}
-    {% if params.description | length %}
-      <p class="c-technology-card__lede">{{ params.description }}</p>
-    {% endif %}
-    {% if params.footer.button | length %}
-      <footer class="c-technology-card__footer">
-        {{ twi({ label: params.footer.button.label, icon: 'arrow-right', classes: 'c-twi--small u-link' }) }}
-      </footer>
-    {% endif %}
-  </div>
-  {% if params.image | length %}
-    <figure class="c-technology-card__image">
-      <img src="{{ params.image.src }}" alt="{{ params.image.alt or params.title }}" />
-    </figure>
-  {% endif %}
-</article>
-

package/src/_includes/components/card/technology-card.scss

@@ -1,56 +0,0 @@
-.c-technology-card {
-  background: color('white');
-  display: flex;
-  flex-flow: column;
-  border: 1px solid color('petrol', 'step-2');
-  position: relative;
-
-  &:focus-within {
-    outline: 2px solid color('petrol');
-  }
-
-  &:where(:hover) .c-twi.u-link {
-    text-decoration: underline;
-    text-underline-offset: 0.1em;
-  }
-
-  &__body {
-    @include padding('s-m');
-    display: flex;
-    flex-flow: column;
-    flex-grow: 1;
-    
-    & > * + * {
-      @include margin-top('xs');
-    }
-  }
-
-  &__heading {
-    @extend .c-h, .c-h--step-0;
-
-    a {
-      @include clickable-parent;
-    }
-  }
-
-  &__lede {
-    @extend .u-step--1;
-  }
-
-  &__footer {
-    @include margin-top('auto');
-    @include padding-top('s');
-  }
-
-  &__image {
-    height: 10em;
-    order: -1;
-
-    img {
-      height: 100%;
-      width: 100%;
-      aspect-ratio: 16/9;
-      object-fit: cover;
-    }
-  }
-}

package/src/_includes/components/card-new/card-new.config.js

@@ -1,95 +0,0 @@
-const categories = require('../component/categories');
-
-module.exports = {
-  title: 'NEW Card',
-  component: {
-      name: 'card-new',
-  },
-  category: categories.card,
-  context: {
-    type: 'generic',
-    theme: 'bordered',
-    size: 'medium',
-    header: {
-      title: 'Mining and minerals'
-    },
-    body: {
-      content: `<p>Explore the world of iron, base metals, bauxite, clay, coal, industrial minerals and precious metals in 3D.</p>`
-    },
-    image: {
-      src: '/static/img/sector-3.jpg',
-      alt: 'Alt text'
-    },
-    link: {
-      label: 'View industry',
-      url: '#'
-    }
-  },
-  variants: [
-    {
-      title: 'Blog post',
-      context: {
-        theme: 'alt',
-        header: {
-          title: 'The future is 3D',
-          date: {
-            date: new Date(2021,10,18)
-          }
-        },
-        body: {
-          content: `<p>Materials characterisation will help "additive manufacturing" change how we make things forever.</p>`
-        },
-        body: {
-          keySpecs: [
-            {
-              title: 'Products',
-              term: 'Morphologi G3-ID'
-            },
-            {
-              title: 'Technologies',
-              term: 'Morphologically-directed Raman spectroscopy (MDRS)'
-            }
-          ]
-        },
-        image: {
-          src: '/static/img/case-study-1.jpg',
-          alt: 'Alt text'
-        },
-        link: {
-          label: 'Read the blog post',
-          url: '#'
-        }
-      }
-    },
-    {
-      title: 'Software download',
-      context: {
-        theme: 'alt',
-        header: {
-          title: 'NanoSight NTA software update 3.4.4',
-          meta: ['05 October 2020']
-        },
-        body: {
-          content: `<p>Capture</p><ul>
-          <li>USB camera support.</li></ul>
-          <p>Other</p><ul>
-          <li>Improved logging: Instrument log files will no longer be overwritten at the start of each day.</li>
-          <li>Improved handling of corrupt/unreadable video files.</li>
-          <li>New script comman for automated/unattended data export.</li>
-          <li>Resolved HASP issues in Windows 10 (Version 2004)</li>
-          </ul>`
-        },
-        image: false,
-        footer: {
-          buttons: [
-            {
-              link: '#',
-              label: 'Download',
-              classes: 'c-button--inline'
-            },
-          ]
-        }
-      }
-    }
-  ]
-}

package/src/_includes/components/card-new/card-new.njk

@@ -1,169 +0,0 @@
-{%- from "components/button/macro.njk" import button -%}
-{%- from "components/twi/macro.njk" import twi -%}
-{%- from "components/prose/macro.njk" import prose -%}
-
-{% set header = params.header %}
-
-{% set classNames = '' %}
-{% if params.type %}
-    {% set classNames = classNames + ' c-card-new--' + params.type %}
-{% endif %}
-{% if params.theme %}
-    {% set classNames = classNames + ' c-card-new--' + params.theme %}
-{% endif %}
-{% if params.size %}
-    {% set classNames = classNames + ' c-card-new--' + params.size %}
-{% endif %}
-
-{% set buttonSize = 'c-button--small' %}
-{% if params.size == 'large '%}
-    {% set buttonSize = '' %}
-{% endif %}
-
-{% if header.location %}
-    {% if header.location == 'Virtual' %}
-        {% set locationIcon = 'monitor' %}
-    {% else %}
-        {% set locationIcon = 'map-pin' %}
-    {% endif %}
-{% endif %}
-
-{% set isPast = header.date.date | isInPast %}
-{% set footerClass = 'o-button-wrap' if params.footer.buttons | length %}
-
-<article class="mp c-card-new {{classNames}}">
-    {% if params.tag %}<p class="c-card__tag">{{params.tag}}</p>{% endif %}
-    <div class="c-card-new__inner">
-        <div class="c-card-new__body">
-            {% if header %}
-                <header class="c-card-new__header">
-                    {% if header.date and not isPast %}
-                        <time class="c-card__datetime">
-                            <span class="c-card__day">{{header.date.date.getDate()}}</span>
-                            <span class="c-card__month">{{header.date.date.getMonth() | months}}</span>
-                        </time>
-                    {% endif %}
-                    {% if header.time or header.duration or header.location or header.language or header.meta or isPast %}
-                        <p class="c-card__meta">
-                            {% if header.duration %}
-                                {{ twi({
-                                    icon: 'play',
-                                    label: header.duration
-                                }) }}
-                            {% endif %}
-                            {% if isPast %}
-                                <span>{{header.date.date | formatLong}}</span>
-                            {% endif %}
-                            {% if header.date.time and header.date.timezone %}
-                                <span>
-                                    {{header.date.time}} {{header.date.timezone}}
-                                </span>
-                            {% endif %}
-                            {% if header.location %}
-                                {{ twi({
-                                    icon: locationIcon,
-                                    label: header.location
-                                }) }}
-                            {% endif %}
-                            {% if header.language and not header.location %}
-                                <span>{{header.language}}</span>
-                            {% endif %}
-                            {% if header.meta %}
-                                {% for item in header.meta %}
-                                    <span>{{item}}</span>
-                                {% endfor %}
-                            {% endif %}
-                        </p>
-                    {% endif %}
-                    <h2 class="c-h c-card-new__title">
-                        {% if params.link and not params.footer.buttons | length %}<a class="o-clickable-parent" href="{{params.link.url}}">{% endif %}
-                            {{header.title}}
-                        {% if params.link and not params.footer.buttons | length %}</a>{% endif %}
-                    </h2>
-                    {% if header.subtitle %}
-                        <h3 class="c-h c-h--tagline">{{header.subtitle}}</h3>
-                    {% endif %}
-                </header>
-            {% endif %}
-            {% if params.body.content %}
-                {% if not params.body.prose %}
-                    {{ params.body.content | safe }}
-                {% else %}
-                    {{ prose({
-                        wrap: '',
-                        classes: 'u-step--1',
-                        content: params.body.content
-                    }) }}
-                {% endif %}
-            {% endif %}
-            {% if params.list %}
-                <ul class="c-features-list">
-                    {% for item in params.list %}
-                        <li>
-                            {% if item.icon %}
-                                {% if not item.classes %}
-                                    {% if item.icon == "tick" %}
-                                        {% set iconColour = 'c-twi--green' %}
-                                    {% endif %}
-                                    {% if item.icon == "cross" %}
-                                        {% set iconColour = 'c-twi--grey' %}
-                                    {% endif %}
-                                {% endif %}
-                                {{ twi({
-                                    icon: item.icon,
-                                    label: item.label,
-                                    classes: iconColour or item.classes
-                                }) }}
-                            {% else %}
-                                {{item.label}}
-                            {% endif %}
-                        </li>
-                    {% endfor %}
-                </ul>
-            {% endif %}
-            {% if params.body.keySpecs | length %}
-                <div class="c-card__specs">
-                    {% for spec in params.body.keySpecs %}
-                        <dl>
-                        <dt>{{ spec.title }}:</dt>
-                        {% if spec.term %}
-                            <dd>{{ spec.term | safe }}</dd>
-                        {% else %}
-                            {% for term in spec.terms %}
-                                <dd>{{ term | safe }}</dd>
-                            {% endfor %}
-                        {% endif %}
-                        </dl>
-                    {% endfor %}
-                </div>
-            {% endif %}
-            {% if params.footer.buttons %}
-                <footer class="c-card-new__footer {{footerClass}}">
-                    {% for item in params.footer.buttons %}
-                        {{ button({
-                            label: item.label,
-                            colour: item.colour,
-                            classes: buttonSize,
-                            link: item.link
-                        }) }}
-                    {% endfor %}
-                </footer>
-            {% elseif params.link.label %}
-                <footer class="c-card-new__footer ">
-                    {{ twi({
-                        label: params.link.label,
-                        link: params.link.url,
-                        classes: 'u-link'
-                    }) }}
-                </footer>
-            {% endif %}
-        </div>
-        {% if params.image %}
-            {% if params.link or params.type !== 'generic' %}<a class="c-card-new__image" href="{{params.link.url}}">{% endif %}
-            <figure>
-                <img src="{{params.image.src}}" alt="{{params.image.alt or 'Alt'}}">
-            </figure>
-            {% if params.link or params.type !== 'generic' %}</a>{% endif %}
-        {% endif %}
-    </div>
-</article>