mp-design-system 1.2.27 → 1.2.30

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

@@ -0,0 +1,88 @@
+.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: cover;
+    }
+  }
+}
+
+.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

@@ -11,7 +11,7 @@ module.exports = {
   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.',
-    url: '/en/products/product-range/mastersizer-range',
+    link: '/en/products/product-range/mastersizer-range',
     tag: 'Product range'
   },
   variants: [
@@ -21,7 +21,7 @@ module.exports = {
       table: [
         ['title', 'string'],
         ['description', 'string'],
-        ['url', 'string'],
+        ['link', 'string'],
         ['tag', 'string'],
       ]
     }

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

@@ -1,24 +1,33 @@
 {%- 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 }}">
+<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>
-        </h2>
-        {% if params.tag | length %}
-          <div class="c-search-result-card__tag">
-            {{ eyebrow({
-              text: params.tag,
-              colour: 'blue'
-            }) }}
-          </div>
+          {% else %}
+            {{ params.title }}
         {% 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>
+      </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.link | length %}
+      <span class="c-search-result-card__url">{{ params.link }}</span>
+    {% endif %}
+  </div>
+</article>

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

@@ -8,7 +8,7 @@
     outline: 2px solid color('petrol');
   }
 
-  &:where(:hover, :focus-within) .c-search-result-card__title {
+  &:where(:hover) .c-search-result-card__title {
     text-decoration: underline;
     text-underline-offset: 0.1em;
   }
@@ -24,10 +24,6 @@
 
     a {
       @include clickable-parent;
-
-      &:focus {
-        outline: 0;
-      }
     }
   }
 
@@ -44,5 +40,9 @@
 
   &__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

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

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

@@ -0,0 +1,56 @@
+.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/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/components/signpost/signpost.config.js

@@ -12,5 +12,18 @@ module.exports = {
     icon: 'large-student',
     title: 'Dive into our knowledge center',
     description: 'Our huge freely-available library of manuals, instrument and application information.'
-  }
+  },
+  variants: [
+    {
+      title: "Vertical",
+      preview: 'cards-three',
+      context: {
+        direction: 'vertical',
+        size: 'l',
+        color: 'blue',
+        icon: 'icon-user-training',
+        description: false
+      }
+    }
+  ]
 }

package/src/_includes/components/signpost/signpost.njk

@@ -1,11 +1,14 @@
-<article class="mp c-signpost">
-  <a class="c-signpost__link" href="{{ params.link }}">
+<article
+  class="mp c-signpost {{ "c-signpost--vertical" if params.direction == "vertical" }} {{ "c-signpost--l" if params.size == "l" }} {{ params.classes }}">
+  <a class="c-signpost__link {{ "u-white u-bg-" if params.color }}{{params.color}}" href="{{ params.link }}">
     <figure class="c-signpost__image">
       <img src="/static/svg/{{ params.icon }}.svg" />
     </figure>
     <div class="c-signpost__content u-flow--2xs">
-      <h3 class="c-h c-h--step--1">{{ params.title }}</h3>
-      <p>{{ params.description }}</p>
+      <h3 class="{{ "c-h c-h--step--1" if params.direction !== "vertical" }}">{{ params.title }}</h3>
+      {% if params.description %}
+        <p>{{ params.description }}</p>
+      {% endif %}
     </div>
   </a>
 </article>

package/src/_includes/components/signpost/signpost.scss

@@ -10,6 +10,11 @@
     max-width: 72px;
     flex-grow: 1;
     flex-shrink: 0;
+
+    .c-signpost--l & {
+      max-width: var(--space-3xl);
+      width: auto;
+    }
   }
 
   &__content {
@@ -19,9 +24,27 @@
       color: color('utility-blue');
       text-decoration: underline;
     }
+
+    .c-signpost--l & {
+      @include step(0);
+    }
   }
 
   &:hover &__content p {
     text-decoration: none;
   }
+}
+
+.c-signpost--vertical {
+  .c-signpost__link {
+    @include cutoff($size: #{var(--space-m)});
+    @include padding('m');
+    flex-direction: column;
+    text-align: center;
+  }
+
+  .c-signpost__image {
+    @include margin-bottom('s-m');
+    margin-right: 0;
+  }
 }

package/src/_includes/components/tabs/tabs.scss

@@ -7,6 +7,10 @@
     }
   }
 
+  .no-js &__content > * + * {
+    @include margin-top('gutter');
+  }
+
   &__content > * {
     display: none;
 

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

@@ -22,4 +22,8 @@
     margin-left: 0;
     order: -1;
   }
+
+  &--small {
+    @include step(-1);
+  }
 }

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/_includes/navigation/corporate.njk

@@ -6,9 +6,6 @@
     <li>
       <a href="/prototype/sections">Solutions</a>
     </li>
-    <li>
-      <a href="">CRO services</a>
-    </li>
     <li>
       <a href="/prototype/webinars">Webinars and events</a>
     </li>

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

@@ -4,9 +4,12 @@
 @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/measurement-type-card.scss';
+@import '~comp/card/product-card.scss';
 @import '~comp/card/search-result-card.scss';
+@import '~comp/card/technology-card.scss';
 @import '~comp/comparison-table/comparison-table.scss';
 @import '~comp/embed/embed.scss';
 @import '~comp/eyebrow/eyebrow.scss';

package/src/assets/scss/components/product-finder.scss

@@ -64,7 +64,7 @@
                 }
             }
 
-            .c-product-comparison-card {
+            .c-product-card {
                 border: 1px solid;
                 border-image-slice: 1;
                 border-image-source: linear-gradient(to right, rgba(color('blue'), 0.5), rgba(color('green'), 0.5));

package/src/assets/scss/tools/cutoff.scss

@@ -41,6 +41,10 @@
     @include cutoff("bottom-left")
 }
 
+.u-cutoff--m {
+    @include cutoff($size: var(--space-m))
+}
+
 .u-cutoff--xl {
     @include cutoff($size: var(--space-xl))
-}
+}

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;
+  }
 }

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

@@ -90,6 +90,9 @@
 .u-pad-s {
   @include padding('s');
 }
+.u-pad-s-m {
+  @include padding('s-m');
+}
 .u-pad-m {
   @include padding('m');
 }
@@ -166,6 +169,9 @@
 .u-margin-top-auto {
   margin-top: auto;
 }
+.u-margin-top-negative-2xl {
+  margin-top: calc(-1 * #{var(--space-2xl)})
+}
 .u-margin-top-2xs {
   @include margin-top('2xs');
 }

package/src/index.njk

@@ -196,7 +196,7 @@ There are two other design systems in use at Malvern Panalytical.
 ## Latest updates
 ##### V1.2.13 - November 2023
 
-- New [product comparison cards](/components/product-comparison-card)
+- New [product comparison cards](/components/product-card-with-features-list)
 - New ["Sticky" internal nav](/components/internal-nav-sticky-on-scroll)
 - Updated [comparison table](/components/comparison-table) design
 {% endset %}