mp-design-system 1.2.4 → 1.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mp-design-system",
-  "version": "1.2.4",
+  "version": "1.2.6",
   "description": "",
   "scripts": {
     "dev": "npm-run-all --parallel bundle:*",
@@ -19,7 +19,7 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@11ty/eleventy": "^0.12.1",
+    "@11ty/eleventy": "^2.0.1",
     "@11ty/eleventy-plugin-syntaxhighlight": "^3.2.2",
     "@parcel/transformer-sass": "^2.4.0",
     "dotenv": "^8.6.0",
@@ -28,7 +28,7 @@
     "markdown-it-prism": "^2.2.3",
     "npm-run-all": "^4.1.5",
     "parcel": "^2.4.0",
-    "require-glob": "^3.2.0",
+    "require-glob": "^4.1.0",
     "rimraf": "^3.0.2",
     "sass": "^1.49.10",
     "slugify": "^1.6.5"

package/src/_includes/components/{industry-card → card}/industry-card.config.js

@@ -5,6 +5,7 @@ module.exports = {
   category: categories.card,
   component: {
     name: 'industry-card',
+    folder: 'card'
   },
   preview: 'cards-three',
   context: {

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

@@ -3,3 +3,11 @@
 {% macro card(params) %}
   {{ c({ name: 'card' }, params) }}
 {% endmacro %}
+
+{% macro industryCard(params) %}
+  {{ c({ name: 'industry-card', folder: 'card' }, params) }}
+{% endmacro %}
+
+{% macro productComparisonCard(params) %}
+  {{ c({ name: 'product-comparison-card', folder: 'card' }, params) }}
+{% endmacro %}

package/src/_includes/components/card/product-comparison-card.config.js

@@ -0,0 +1,90 @@
+const categories = require('../component/categories');
+
+module.exports = {
+  title: 'Product comparison card',
+  category: categories.card,
+  component: {
+    name: 'product-comparison-card',
+    folder: 'card'
+  },
+  preview: 'cards-three',
+  context: {
+    title: 'Zetasizer Pro',
+    description: 'The Zetasizer Pro is your go-to instrument to measure a wide range of sample types and concentrations.',
+    image: {
+      src: '/static/img/range-product-1.jpg',
+      alt: ''
+    },
+    features: [
+      {
+        icon: 'cross',
+        label: 'Classic 90° DLS'
+      },
+      {
+        icon: 'tick',
+        label: 'Dynamic light scattering'
+      },
+      {
+        icon: 'tick',
+        label: 'Static light scattering'
+      },
+      {
+        icon: 'tick',
+        label: 'Non-Invasive Back Scatter DLS'
+      },
+      {
+        icon: 'cross',
+        label: 'Multi-Angle Dynamic Light Scattering'
+      }
+    ],
+    footer: {
+      buttons: [
+        {
+          link: '#',
+          label: 'More details'
+        },
+        {
+          link: '#',
+          label: 'Request a quote'
+        }
+      ]
+    }
+  },
+  variants: [
+    {
+      title: 'Without features list',
+      preview: 'cards-three',
+      context: {
+        title: 'Zetasizer Pro',
+        description: 'The Zetasizer Pro is your go-to instrument to measure a wide range of sample types and concentrations.',
+        image: {
+          src: '/static/img/range-product-1.jpg',
+          alt: ''
+        },
+        features: [
+        ],
+        footer: {
+          buttons: [
+            {
+              link: '#',
+              label: 'More details'
+            },
+            {
+              link: '#',
+              label: 'Request a quote'
+            }
+          ]
+        }
+      },
+    }
+  ],
+  props: [
+    {
+      table: [
+        ['title', 'string'],
+        ['link', 'string'],
+        ['image', 'object', 'Image object']
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,37 @@
+{%- from "components/button/macro.njk" import button -%}
+{%- from "components/twi/macro.njk" import twi -%}
+
+<article class="mp c-product-comparison-card" role="article" aria-label="Product card">
+  <div class="c-product-comparison-card__body">
+    <h3 class="c-product-comparison-card__heading">{{ params.title }}</h3>
+    <p>{{ params.description }}</p>
+    {% if params.features | length %}
+      <p class="c-product-comparison-card__features-list-heading">Features include</p>
+      <ul class="c-product-comparison-card__features-list">
+        {% for feature in params.features %}
+          <li class="c-product-comparison-card__feature--{{ feature.icon }}">
+            {{ twi({
+              label: feature.label,
+              icon: feature.icon
+            }) }}
+          </li>
+        {% endfor %}
+      </ul>
+    {% endif %}
+    <footer class="c-product-comparison-card__footer">
+      {% if params.footer.buttons | length %}
+        {% for item in params.footer.buttons %}
+          {{ button({
+            link: item.link,
+            label: item.label,
+            colour: 'outline-green' if loop.index0 == 0 else 'green'
+          }) }}
+        {% endfor %}
+      {% endif %}
+    </footer>
+  </div>
+  <figure class="c-product-comparison-card__image">
+    <img src="{{ params.image.src }}" alt="{{ params.image.alt or params.title }}" />
+  </figure>
+</article>
+

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

@@ -0,0 +1,74 @@
+.c-product-comparison-card {
+  @extend .u-flow--2xs;
+  display: flex;
+  flex-flow: column;
+  border: 1px solid color('petrol', 'step-2');
+    
+  & > * + * {
+    @include margin-top('2xs');
+  }
+
+  &__body {
+    @include padding('s-m');
+    display: flex;
+    flex-flow: column;
+    flex-grow: 1;
+    
+    & > * + * {
+      @include margin-top('xs');
+    }
+  }
+
+  &__heading {
+    @extend .c-h;
+    @extend .c-h--step-1;
+  }
+
+  &__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');
+    }
+  }
+
+  &__footer {
+    @include margin-top('auto');
+    @include padding-top('s');
+    
+    & > * + * {
+      @include margin-top('2xs');
+    }
+  }
+
+  &__image {
+    height: 10em;
+    order: -1;
+    aspect-ratio: 16/9;
+
+    img {
+      height: 100%;
+      width: 100%;
+      object-fit: contain;
+    }
+  }
+}

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

@@ -1,29 +1,25 @@
 {% from "components/component/component.njk" import c %}
 
-{% macro combobox(params, type = 'combobox') %}
-  {{ c({ name: 'combobox', folder: 'input' }, params) }}
+{% macro input(params) %}
+  {{ c({ name: 'input' }, params) }}
 {% endmacro %}
 
-{% macro checkbox(params, type = 'checkbox') %}
-  {{ c({ name: 'checkbox', folder: 'input' }, params) }}
+{% macro select(params) %}
+  {{ c({ name: 'select', folder: 'input' }, params) }}
 {% endmacro %}
 
-{% macro input(params) %}
-  {{ c({ name: 'input' }, params) }}
+{% macro textarea(params) %}
+  {{ c({ name: 'textarea', folder: 'input' }, params) }}
 {% endmacro %}
 
-{% macro radio(params) %}
-  {{ c({ name: 'radio', folder: 'input' }, params) }}
+{% macro checkbox(params, type = 'checkbox') %}
+  {{ c({ name: 'checkbox', folder: 'input' }, params) }}
 {% endmacro %}
 
-{% macro select(params) %}
-  {{ c({ name: 'select', folder: 'input' }, params) }}
+{% macro radio(params) %}
+  {{ c({ name: 'radio', folder: 'input' }, params) }}
 {% endmacro %}
 
 {% macro toggle(params, type='toggle') %}
   {{ c({ name: 'toggle', folder: 'input' }, params) }}
 {% endmacro %}
-
-{% macro textarea(params) %}
-  {{ c({ name: 'textarea', folder: 'input' }, params) }}
-{% endmacro %}

package/src/_includes/components/twi/twi.scss

@@ -8,7 +8,7 @@
 
   &:hover,
   &:focus {
-    text-decoration: underline;
+    text-decoration: inherit;
   }
 
   svg {

package/src/assets/js/app.js

@@ -1,7 +1,6 @@
 import Accordion from './imports/accordion';
 import Carousel from './imports/carousel';
 import ClearForm from './imports/clear-form';
-import Combobox from './imports/combobox';
 import Comparison from './imports/comparison';
 import Gallery from './imports/gallery';
 import HeroPattern from './imports/hero-pattern';
@@ -23,7 +22,6 @@ import Tabs from './imports/tabs';
   Accordion();
   Carousel();
   ClearForm();
-  Combobox();
   Comparison();
   Gallery();
   HeroPattern();

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

@@ -0,0 +1,67 @@
+.mp-dynamicform {
+    .c-form {
+        &__section {
+            padding: 36px;
+            padding: var(--space-l);
+            background: color('petrol', 'step-3');
+        }
+
+        &__section + &__section {
+            border-top: 2px solid color('white');
+        }
+
+        &__section-title {
+            letter-spacing: -.02em;
+            font-size: var(--step-3);
+        }
+
+        .c-label--required:after {
+            content: "*";
+            color: color('red');
+            padding: 0 2px;
+            position: relative;
+            top: -2px;
+        }
+    }
+    
+    .c-input__wrap {
+        align-items: center;
+        gap: var(--space-s);
+        flex-wrap: wrap;
+        display: flex;
+        
+        .c-label {
+            flex-basis: 148px;
+            margin-bottom: 0;
+            
+            &+ * {
+               flex: 1 0 148px;
+           }
+        }
+
+        &--messages {
+            row-gap: 0;
+            margin-top: 0;
+    
+            p {
+                @include margin-top('2xs');
+                letter-spacing: -.01em;
+                font-size: var(--step--1);
+            }
+        }
+    }
+
+    .c-input__spacer {
+        height: 0;
+        flex-basis: 148px;
+    }
+
+    .c-input--select {
+        cursor: pointer;
+    }
+
+    .c-checkbox + label,
+    .c-radio + label {
+        display: inline-block;
+    }
+}

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

@@ -4,6 +4,8 @@
 @import '~comp/button/button.scss';
 @import '~comp/campaign/campaign.scss';
 @import '~comp/card/card.scss';
+@import '~comp/card/industry-card.scss';
+@import '~comp/card/product-comparison-card.scss';
 @import '~comp/comparison-table/comparison-table.scss';
 @import '~comp/embed/embed.scss';
 @import '~comp/featured-article-card/featured-article-card.scss';
@@ -14,7 +16,6 @@
 @import '~comp/header/header.scss';
 @import '~comp/hero/hero.scss';
 @import '~comp/icon/icon.scss';
-@import '~comp/industry-card/industry-card.scss';
 @import '~comp/input/input.scss';
 @import '~comp/input/radio.scss';
 @import '~comp/input/toggle.scss';
@@ -34,5 +35,6 @@
 @import '~comp/twi/twi.scss';
 @import '~comp/usp/usp.scss';
 
+@import './form.scss';
 @import './headings.scss';
 @import './lightbox.scss';

package/src/assets/scss/utilities/space.scss

@@ -163,6 +163,9 @@
 .u-margin-top-0 {
   margin-top: 0;
 }
+.u-margin-top-auto {
+  margin-top: auto;
+}
 .u-margin-top-2xs {
   @include margin-top('2xs');
 }

package/src/brand/logo.md

@@ -6,9 +6,14 @@ tags: brand
 version: 1.0.0
 status: 'Ready'
 ---
+<br>
 
 {% button 'Download the logo' '/static/zip/MP_logo.zip' %}
 
+--- 
+
+## Basic use
+
 The Malvern Panalytical logo is available in three formats: 
 
 - Standard, with the text alongside the 'X' brandmark;
@@ -30,6 +35,8 @@ The Malvern Panalytical logo is available in three formats:
     </figure>
 </div>
 
+---
+
 ## Spacing
 Where it is used in close proximity to other design elements the logo must be separated from them by, at least, multiples of the height of the uppercase M in the word Malvern:
 
@@ -47,11 +54,13 @@ Where it is used in close proximity to other design elements the logo must be se
     </figure>
 </div>
 
+---
+
 ## Colors
-The Malvern Panalytical logo may also be used in a single color black or white to achieve maximum contrast and legibility.
+The logo may be used in a single color black or white to achieve maximum contrast and legibility.
 
 <div class="o-grid o-grid--of-two">
-    <figure style="max-width:320px">
+    <figure  style="max-width:320px">
         <figcaption>Single color black</figcaption>
         <img src="/static/svg/logo-black.svg" alt="Malvern Panalytical logo, black variant">
     </figure>
@@ -61,22 +70,21 @@ The Malvern Panalytical logo may also be used in a single color black or white t
     </figure>
 </div>
 
-The Malvern Panalytical logo may also be used on dark backgrounds with the wordmark and strapline in white to achieve maximum contrast and legibility.
+The logo may also be used on dark backgrounds with the wordmark and strapline in white to achieve maximum contrast and legibility.
 
 <figure style="max-width:640px">
     <figcaption>Colour logo on dark background</figcaption>
     <img src="/static/svg/logo-color-white-text.svg" alt="Malvern Panalytical logo with white text on a dark background">
 </figure>
 
-{% alert 'warning' %}
-- **Do not** alter the proportion of the Malvern Panalytical logo in any way.
-- **Do not** attempt to recreate the Malvern Panalytical logo.
-- **Ask** Marketing for a copy, suited to your requirements.
-- The arms of the 'X' brandmark must be at 90&deg; to each other. You can use the corner of a sheet of paper, diagonally against the top of the 'X' mark, to check if the logo is in proportion.
-{% endalert %}
+---
 
-## Cropping
+## Strapline
+The strapline "a Spectris company" is part of the logo and must be included. It may only be removed if it's not readable: e.g. on a digital screen if the logo is so small that there are not enough pixels to resolve the text, or in a print application if the substrate is too textured to allow a clear print.
+
+---
 
+## Cropping
 <figure style="max-width:640px">
     <img src="/static/svg/crop-diagram-1.svg" alt="Cropping the brandmark: 'X' brandmark is cropped 7% top and bottom when used in a color bar">
 </figure>
@@ -89,4 +97,11 @@ Ensure that the three colors of the brandmark are visible at all times.
 
 <figure style="max-width:640px">
     <img src="/static/svg/crop-diagram-2.svg" alt="Cropping the brandmark: shows maximum and minimum horizontal crop sizes">
-</figure>
+</figure>
+
+{% alert 'warning' %}
+- **Do not** alter the proportion of the Malvern Panalytical logo in any way.
+- **Do not** attempt to recreate the Malvern Panalytical logo.
+- **Ask** Marketing for a copy, suited to your requirements.
+- The arms of the 'X' brandmark must be at 90&deg; to each other. You can use the corner of a sheet of paper, diagonally against the top of the 'X' mark, to check if the logo is in proportion.
+{% endalert %}

package/src/brand/patterns.njk

@@ -3,12 +3,18 @@ title: Patterns
 layout: content-page
 sidebar: brand
 tags: brand
-version: 1.0.0
+version: 1.1.0
 status: 'Ready'
 ---
 {% from "components/header/macro.njk" import header %}
+{% from "components/button/macro.njk" import button %}
 
 <p>We can make our digital designs a bit more visually appealing by adding background patterns and decorative gradients.</p>
+<p>The patterns designs are available to download in SVG format here:</p>
+
+{% button 'Download SVG patterns', '/static/zip/SVG_patterns.zip' %}
+
+<h2>Examples</h2>
 
 <div class="o-grid xo-grid--of-two">
     <div class="c-slat c-slat--concentric vh50 u-bg-blue-step-3">

package/src/prototype/index.njk

@@ -7,7 +7,7 @@ tags: prototype
 {% from "components/prose/macro.njk" import prose %}
 {% from "components/signpost/macro.njk" import signpost %}
 {% from "components/button/macro.njk" import button %}
-{% from "components/industry-card/macro.njk" import industryCard %}
+{% from "components/card/macro.njk" import industryCard %}
 {% from "components/campaign/macro.njk" import campaign %}
 {% from "components/card/macro.njk" import card %}
 {% from "components/option-list/macro.njk" import optionList %}

package/src/prototype/sections.njk

@@ -15,7 +15,7 @@ tagTitle: Industry
 {% from "components/card/macro.njk" import card %}
 {% from "components/hero/macro.njk" import hero %}
 {% from "components/prose/macro.njk" import prose, markdown %}
-{% from "components/industry-card/macro.njk" import industryCard %}
+{% from "components/card/macro.njk" import industryCard %}
 {% from "components/accordion/macro.njk" import accordion %}
 
 {% set siteNav %}{% include "navigation/corporate.njk" %}{% endset %}

package/src/_includes/components/dynamic-form/dynamic-form.config.js

@@ -1,16 +0,0 @@
-module.exports = {
-  title: 'Dynamic form',
-  component: {
-    name: 'dynamic-form'
-  },
-  context: {
-    label: 'Find the perfect event for you'
-  },
-  props: [
-    {
-      table: [
-        ['label', 'string', 'Label the input']
-      ]
-    }
-  ]
-}