mp-design-system 1.2.28 → 1.2.30

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/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/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

@@ -6,8 +6,10 @@
 @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/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 %}