mp-design-system 1.2.27 → 1.2.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mp-design-system",
-  "version": "1.2.27",
+  "version": "1.2.28",
   "description": "",
   "scripts": {
     "dev": "npm-run-all --parallel bundle:*",
@@ -30,7 +30,7 @@
     "parcel": "^2.4.0",
     "require-glob": "^4.1.0",
     "rimraf": "^3.0.2",
-    "sass": "^1.49.10",
+    "sass": "^1.71.0",
     "slugify": "^1.6.5"
   },
   "alias": {

package/src/_includes/components/card/existing-customer-card.config.js

@@ -0,0 +1,51 @@
+const categories = require('../component/categories');
+
+module.exports = {
+  title: 'Existing customer card',
+  category: categories.card,
+  component: {
+    name: 'existing-customer-card',
+    folder: 'card'
+  },
+  preview: 'cards-two',
+  context: {
+    title: 'Mastersizer accessories',
+    lede: 'Configure your Mastersizer for your application and requirements with our range of accessories.',
+    cta: {
+      link: 'https://www.malvernpanalytical.com/en/products/product-range/mastersizer-range/mastersizer-3000#accessories',
+      label: 'View accessories',
+    },
+    image: {
+      src: 'https://p3.aprimocdn.net/malvernpanalytical/37015a45-6002-4cc3-9650-ad9e00b43396/636216816480633919JL_Original%20file.jpg?quality=60',
+      alt: 'Mastersizer accessories',
+    }
+  },
+  variants: [
+    {
+      title: 'Large',
+      preview: 'fixed-width',
+      context: {
+        width: 'large',
+        title: 'Looking for support?',
+        lede: 'Looking for support, manuals or software? Malvern Panalytical will provide the support for your business.',
+        cta: {
+          link: 'https://www.malvernpanalytical.com/en/support/product-support/mastersizer-range',
+          label: 'Get support',
+        },
+        image: {
+          src: 'https://p3.aprimocdn.net/malvernpanalytical/15fab5ad-6222-460d-aa00-ae0e011438ad/i_110714_063_m3kBROCHURE_w_MV_Original.JPG?quality=60',
+          alt: 'Mastersizer accessories',
+        }
+      }
+    }
+  ],
+  props: [
+    {
+      table: [
+        ['title', 'string'],
+        ['description', 'string'],
+        ['url', 'string'],
+      ]
+    }
+  ]
+}

package/src/_includes/components/card/existing-customer-card.njk

@@ -0,0 +1,36 @@
+{%- from "components/twi/macro.njk" import twi -%}
+
+{%- set classNames = "mp c-existing-customer-card" -%}
+
+{%- if params.width -%}
+  {% set classNames = classNames + " c-existing-customer-card--" + params.width %}
+{% endif -%}
+
+<div class="{{ classNames }}">
+  <div class="c-existing-customer-card__wrapper">
+    <div class="c-existing-customer-card__main-wrapper">
+      {% if params.title | length %}
+      <h3 class="c-existing-customer-card__title">
+        <a href="{{ params.cta.link }}" aria-label="{{ params.title }}">
+          {{ params.title }}
+        </a>
+      </h3>
+      {% endif %}
+      {% if params.lede | length %}
+        <p class="c-existing-customer-card__lede">{{ params.lede }}</p>
+      {% endif %}
+      {% if params.cta | length %}
+        {{ twi({
+          label: params.cta.label,
+          classes: 'u-link',
+          icon: 'arrow-right'
+        }) }}
+      {% endif %}
+    </div>
+    {% if params.image | length %}
+      <figure class="c-existing-customer-card__media-wrapper">
+        <img class="c-existing-customer-card__image" src="{{ params.image.src }}" alt="{{ params.image.alt }}" />
+      </figure>
+    {% endif %}
+  </div>
+</div>

package/src/_includes/components/card/existing-customer-card.scss

@@ -0,0 +1,100 @@
+.c-existing-customer-card {
+  background: color('white');
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 0 var(--space-l) var(--space-l) 0;
+    border-color: transparent color('grey', 'step-3') transparent transparent;
+  }
+
+  &:focus-within {
+    outline: 2px solid color('petrol');
+  }
+
+  &:where(:hover, :focus-within) .u-link {
+    text-decoration: underline;
+  }
+  
+  &__wrapper {
+    @include padding('s-m');
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__main-wrapper {
+    width: auto;
+    @extend .u-flow--s-m;
+    text-align: center;
+  }
+  
+  &__title {
+    @include step(2);
+
+    a {
+      @include clickable-parent;
+    }
+  }
+
+  &__lede {
+    line-height: lh('prose');
+  }
+  
+  &__media-wrapper {
+    @include margin-top('m');
+  }
+  
+  &__image {
+    max-height: 180px;
+    @include margin(0, 'auto');
+  }
+}
+
+.c-existing-customer-card--large {
+  @extend .c-existing-customer-card;
+  
+  @media (min-width: 55em) {
+    .c-existing-customer-card {
+      &__wrapper {
+        @include o-grid(2);
+        @include padding-right('l-3xl');
+        @include padding-left('l-3xl');
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+    
+        & > * {
+          @include margin-bottom(0);
+        }
+      }
+    
+      &__main-wrapper {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        text-align: left;
+      }
+    
+      &__title {
+        @include step(3);
+      }
+    
+      &__media-wrapper {
+        @include margin(0);
+      }
+    
+      &__image {
+        max-height: unset;
+        height: auto;
+        width: auto;
+      }
+    }
+  }
+}

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

@@ -4,6 +4,10 @@
   {{ c({ name: 'card' }, params) }}
 {% endmacro %}
 
+{% macro existingCustomerCard(params) %}
+  {{ c({ name: 'existing-customer-card', folder: 'card' }, params) }}
+{% endmacro %}
+
 {% macro industryCard(params) %}
   {{ c({ name: 'industry-card', folder: 'card' }, params) }}
 {% endmacro %}

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

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

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

@@ -24,10 +24,6 @@
 
     a {
       @include clickable-parent;
-
-      &:focus {
-        outline: 0;
-      }
     }
   }
 

package/src/_includes/components/component/preview-fixed-width.njk

@@ -0,0 +1,5 @@
+<div class="u-wrap u-pad-m">
+  <div>
+    {{ comp | safe }}
+  </div>
+</div>

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

@@ -15,6 +15,20 @@ module.exports = {
                 colour: 'blue'
             }
         },
+        {
+            title: 'Blue step 2',
+            context: {
+                text: 'Product range',
+                colour: 'blue-step-2'
+            }
+        },
+        {
+            title: 'Grey',
+            context: {
+                text: 'Product range',
+                colour: 'grey'
+            }
+        },
         {
             title: 'Petrol',
             context: {

package/src/_includes/components/eyebrow/eyebrow.scss

@@ -11,6 +11,15 @@
     background-color: color('blue');
   }
 
+  &--blue-step-2 {
+    background-color: color('blue', 'step-2');
+    color: color('petrol');
+  }
+
+  &--grey {
+    background-color: color('grey');
+  }
+
   &--petrol {
     background-color: color('petrol');
   }
@@ -25,5 +34,6 @@
 
   &--utility-orange {
     background-color: color('utility-orange');
+    color: color('grey');
   }
 }

package/src/_includes/layout.njk

@@ -16,8 +16,6 @@
 		<meta property="og:image:alt" content="{{ config.name }}" />
 		<meta name="twitter:image" content="{{ config.openGraphImage }}" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link rel="preload" href="/build/Inter-Bold.af5441a3.woff2" as="font" type="font/woff2" crossorigin>
-    <link rel="preload" href="/build/Inter-Regular.ed77b881.woff2" as="font" type="font/woff2" crossorigin>
     <link rel="preload" href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap" as="style">
     <link rel="icon" type="image/png" sizes="32x32" href="/static/img/favicon.svg">
     <link rel="stylesheet" href="/build/scss/main.css" />

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

@@ -4,6 +4,7 @@
 @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/product-comparison-card.scss';
 @import '~comp/card/search-result-card.scss';

package/src/assets/scss/tools/index.scss

@@ -157,11 +157,15 @@
 @mixin clickable-parent {
   position: static;
 
-    &::after {
-      content: '';
-      position: absolute;
-      inset: 0;
-      cursor: pointer !important;
-      display: flex;
-    }
+  &:focus {
+    outline: 0;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    cursor: pointer !important;
+    display: flex;
+  }
 }