mp-design-system 1.2.62 → 1.2.64

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "mp-design-system",
-  "version": "1.2.62",
+  "version": "1.2.64",
   "description": "",
   "scripts": {
     "dev": "npm-run-all --parallel bundle:*",
     "bundle:eleventy": "eleventy --serve --quiet",
-    "bundle:parcel": "parcel src/assets/js/*.js src/assets/scss/*.scss --dist-dir ./dist/build",
+    "bundle:vite": "vite build",
     "build": "run-s prod:*",
     "prod:eleventy": "eleventy",
-    "prod:parcel": "rimraf dist/build && parcel build src/assets/js/*.js src/assets/scss/*.scss --dist-dir ./dist/build",
-    "prepublishOnly": "rimraf dist && npm run prod:parcel"
+    "prod:vite": "rimraf dist/build && vite build",
+    "prepublishOnly": "rimraf dist && npm run prod:vite"
   },
   "files": [
     "src",
@@ -22,19 +22,25 @@
     "@11ty/eleventy": "^2.0.1",
     "@11ty/eleventy-plugin-syntaxhighlight": "^3.2.2",
     "@parcel/transformer-sass": "^2.4.0",
+    "@vitejs/plugin-vue": "^3.0.0",
     "dotenv": "^8.6.0",
     "html-prettify": "^1.0.6",
     "markdown-it": "^12.3.2",
     "markdown-it-prism": "^2.2.3",
     "npm-run-all": "^4.1.5",
-    "parcel": "^2.4.0",
     "require-glob": "^4.1.0",
     "rimraf": "^3.0.2",
     "sass": "^1.71.0",
-    "slugify": "^1.6.5"
+    "slugify": "^1.6.5",
+    "vite": "^3.0.0",
+    "vite-plugin-sass-dts": "^1.3.29"
   },
   "alias": {
     "mp": "./node_modules/mp-design-system/src/assets/scss",
     "comp": "./src/_includes/components"
+  },
+  "dependencies": {
+    "@vitejs/plugin-vue": "^5.2.1",
+    "vite": "^6.0.3"
   }
 }

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

@@ -240,6 +240,7 @@
     position: absolute;
     right: 0;
     top: 0;
+    z-index: 1;
   }
 
   &__tag + &__wrapper > &__primary {

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

@@ -1,5 +1,6 @@
 {%- from "components/button/macro.njk" import button -%}
 {%- from "components/twi/macro.njk" import twi -%}
+{%- from "components/prose/macro.njk" import prose -%}
 
 {%- set classes = 'mp c-product-card' -%}
 
@@ -15,6 +16,13 @@
     {% if params.description | length %}
       <p class="c-product-card__lede">{{ params.description }}</p>
     {% endif %}
+    {% if params.description | length %}
+        {{ prose({
+            wrap: '',
+            classes: 'u-step--1',
+            content: params.description
+        }) }}
+    {% endif %}
     {% if params.features | length %}
       <p class="c-product-card__features-list-heading">Features include</p>
       <ul class="c-product-card__features-list">

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

@@ -0,0 +1,95 @@
+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

@@ -0,0 +1,169 @@
+{%- 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>

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

@@ -0,0 +1,156 @@
+// 'Breakpoints' for cards - 
+// Basically 'S' is usually portrait, and 'M' is usually landscape
+// This system can be replaced by style queries, when that has
+// better browser support
+$card-s: 25ch;
+$card-m: 45ch;
+$card-l: 70em;
+
+.c-card-new {
+    background-color: color('white');
+    container-name: card;
+    container-type: inline-size;
+    display: flex;
+    @include step(-1);
+    position: relative;
+}
+
+.c-card-new__inner {
+    display: flex;
+    flex-direction: column-reverse;
+    flex-grow: 1;
+    position: relative;
+    --layout: single;
+
+    @container card (width > #{$card-m}) {
+        --layout: multi;
+        flex-direction: row;
+        .c-card-new--product &,
+        .c-card-new--switch & {
+            flex-direction: row-reverse;
+        }
+    }
+
+    & > * {
+        flex: 1;
+    }
+    
+    // Color themes
+    .c-card-new--bordered & {
+        border: 1px solid color("petrol", "step-2");
+    }
+    
+    .c-card-new--alt & {
+        background-color: color('petrol','step-3');
+    }
+    
+    .c-card-new--dark & {
+        background-color: color('petrol');
+        color: color('white');
+
+        .c-card__datetime,
+        .c-card__meta {
+            color: color('petrol', 'step-2');
+        }
+    }
+    
+    .c-card-new--shadowed & {
+        @include space('--shadow-r', 'xs');
+        @include space('--shadow-b', 's');
+        box-shadow: 0 var(--shadow-r) var(--shadow-b) 0 rgba(color('grey'), 20%);
+    }
+}
+
+.c-card-new__header {
+    @include flow('xs');
+}
+
+:not(.c-card-new--resource).c-card-new--small .c-card__meta {
+    @container card (width < #{$card-m}) {
+        display: none;
+    }
+}
+
+.c-card-new__body {
+    @include flow('s');
+    @include padding('s-m');
+
+    display: flex;
+    flex-direction: column;
+
+    @container card (width > #{$card-m}) {
+        min-width: 30ch;
+    }
+
+    @container card (width > #{$card-l}) {
+        @include padding('m-l');
+    }
+    
+    .c-card-new--small & {
+        @include padding('xs');
+    }
+}
+
+.c-card-new__title {
+    @include step(0);
+
+    @container card (width > #{$card-m}) {
+        .c-card-new:not(.c-card-new--small) & {
+            @include step(3);
+        }
+    }
+}
+
+.c-card-new__image {
+    flex-grow: 0;
+    position: relative;
+
+    @container card (width > #{$card-m}) {
+        flex-basis: 33%;
+    }
+    
+    .c-card-new:not(.c-card-new--small) & {
+        @container (width > #{$card-l}) {
+            flex-basis: 61%;
+        }
+    }
+
+    img {
+        height: 100%;
+        object-fit: cover;
+        object-position: center;
+        position: absolute;
+        width: 100%;
+        
+        @container card (width < #{$card-m}) {
+            aspect-ratio: 2;
+            position: static !important;
+            // @include padding('s-m');
+            // padding-bottom: 0;
+        }
+
+        .c-card-new--small:not(.c-card-new--product) & {
+            @container card (width < #{$card-m}) {
+                aspect-ratio: 3;
+            }
+        }
+    }
+
+}
+
+.c-card-new__footer {
+    .o-grid & {
+        margin-top: auto;
+        @include padding-top('s');
+    }
+}
+
+.c-card-new .c-button {
+    @container card (width > #{$card-s}) {
+        white-space: nowrap;
+    }
+
+    @container card (width < #{$card-m}) {
+        flex: 1;
+    }
+}

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

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

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

@@ -0,0 +1,108 @@
+const categories = require('../component/categories');
+
+module.exports = {
+    title: 'NEW Event card',
+    component: {
+        name: 'event-card',
+    },
+    category: categories.card,
+    context: {
+        type: 'event',
+        theme: 'alt',
+        size: 'medium',
+        header: {
+          title: 'Zetium ED X-ray fluorescence SuperQ application course',
+          date: {
+              date: new Date(new Date().getTime() + 24 * 60 * 60 * 1000),
+              time: '11:30 - 12:30',
+              timezone: 'GMT',
+          },
+          location: 'Virtual',
+          meta: ['English']
+        },
+        tag: 'Live webinar',
+        body: {
+          keySpecs: [
+            {
+                title: 'Products',
+                term: 'Zetium'
+            },
+            {
+                title: 'Technologies',
+                terms: ['X-ray fluorescence spectronomy (XRF)','ED-XRF']
+            }
+          ]
+        },
+        footer: {
+          buttons: [
+            {
+                link: '#',
+                label: 'Book your place'
+            }
+          ]
+        },
+        image: {
+          src: 'https://p3.aprimocdn.net/malvernpanalytical/86aad13f-9f20-4a18-8a2e-adea010ae3d9/shutterstock_111870260_Low-res.JPG',
+          alt: 'Alt text'
+        }
+    },
+    variants: [
+      {
+        title: 'Small',
+        context: {
+          size: 'small',
+          specs: false,
+          footer: false,
+        }
+      },
+      {
+        title: 'Dark',
+        context: {
+          theme: 'dark',
+          header: {
+            title: 'Zetium ED X-ray fluorescence SuperQ application course',
+            date: {
+                date: new Date(new Date().getTime() + 24 * 60 * 60 * 1000),
+                time: '11:30 - 12:30',
+                timezone: 'EDT',
+            },
+            location: 'Westborough MA',
+            meta: ['English']
+          },
+          tag: 'User training',
+        }
+      },
+      {
+        title: 'Shadowed',
+        context: {
+          theme: 'shadowed',
+          size: 'small',
+          specs: false,
+          footer: false,
+        }
+      },
+      {
+        title: 'Recorded',
+        context: {
+          header: {
+            title: 'XRF analysis in the process control of battery cathode manufacturing',
+            date: {
+              date: new Date(2017,9,11)
+            },
+            duration: '54:29',
+            meta: ['English']
+          },
+          tag: 'Recorded webinar',
+          footer: {
+              buttons: [
+              {
+                link: '#',
+                label: 'Watch the video',
+                colour: 'outline-green'
+              }
+            ]
+          }
+        }
+      }
+    ]
+  }

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

@@ -0,0 +1 @@
+{% extends "components/card-new/card-new.njk" %}

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

@@ -0,0 +1,49 @@
+// Extend the basic card scss
+@import '../card-new/card-new.scss';
+
+.c-card-new--event {
+
+    // Colour themes
+    &.c-card-new--dark {
+        .c-card__day {
+            color: color('white');
+        }
+        .c-card__specs {
+            color: color('petrol', 'step-2');
+        }
+    }
+    &.c-card-new--alt {
+        .c-card__specs {
+            color: color('petrol', 'step-1');
+        }
+    }
+
+    .c-card__meta {
+        line-height: lh('prose');
+    }
+
+    &:not(.c-card-new--small) .c-card__datetime {
+        @container card (width > #{$card-s}) {
+            .c-card__day {
+                font-size: var(--step-4);
+            }
+            .c-card__month {
+                font-size: var(--step-2);
+            }
+        }
+        @container card (width > #{$card-m}) {
+            .c-card__day {
+                font-size: var(--step-5);
+            }
+            .c-card__month {
+                font-size: var(--step-3);
+            }
+        }
+    }
+
+    @container card (width < #{$card-s}) {
+        .c-card__specs {
+            display: none;
+        }
+    }
+}

package/src/_includes/components/event-card/macro.njk

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

package/src/_includes/components/product-card/macro.njk

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