mp-design-system 1.2.28 → 1.2.34

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;
   }
@@ -40,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/eyebrow/eyebrow.scss

@@ -33,7 +33,7 @@
   }
 
   &--utility-orange {
-    background-color: color('utility-orange');
+    background-color: color('utility-orange', 'step-1');
     color: color('grey');
   }
 }

package/src/_includes/components/hero/hero.njk

@@ -1,7 +1,7 @@
-{% from "components/button/macro.njk" import button %}
 {% from "components/breadcrumb/macro.njk" import breadcrumb %}
 {% from "components/button/macro.njk" import button %}
 {% from "components/icon/macro.njk" import icon %}
+{% from "components/input/macro.njk" import input %}
 
 {%- set classes = 'mp c-hero' -%}
 {% if params.classes %}{%- set classes = classes + ' ' + params.classes -%}{% endif %}
@@ -29,6 +29,23 @@
       <header class="u-flow--m">
         <h1 class="c-h c-h--page-title">{{ params.title }}</h1>
         {% if params.subtitle %}<p class="u-step-1">{{ params.subtitle }}</p>{% endif %}
+        {% if params.search %}
+          <form class="c-hero__search u-split">
+            {{ input({
+              name: 'hero-search',
+              id: 'hero-search',
+              type: 'search',
+              hideLabel: true,
+              placeholder: params.search.placeholder
+            }) }}
+            {{ button({
+              name: 'hero-search-submit',
+              id: 'hero-search-submit',
+              label: params.search.buttonText or 'Search',
+              link: ''
+            }) }}
+          </form>
+        {% endif %}
         {{ params.content | safe }}
       </header>
 

package/src/_includes/components/hero/hero.scss

@@ -34,8 +34,9 @@
       bottom: 0;
       @include space('right', 'gutter');
       z-index: 2;
-    }
 
+    }
+    
     &:after {
       content: '';
       box-shadow: -1px 0 color('white');
@@ -48,6 +49,17 @@
       bottom: 0;
       right: 0;
     }
+    
+    @at-root {
+      .c-hero--extend .u-wrap {
+        &:before {
+          right: 0;
+        }
+        &:after {
+          right: calc(-1 * var(--gutter));
+        }
+      }
+    }
   }
 
   &__content {
@@ -55,6 +67,10 @@
     z-index: 5;
     max-width: 828px;
 
+    .c-hero--padded & {
+      @include padding('m-l', 0)
+    }
+
     & > * + * {
       @include margin-top('m');
     }
@@ -325,4 +341,16 @@
       z-index: 1;
     }
   }
+
+  &:has(+ .u-margin-top-negative-2xl) {
+    .u-wrap {
+      @include space('padding-bottom', '4xl')
+    }
+  }
+
+  &__search {
+    :first-child {
+      flex-grow: 1;
+    }
+  }
 }

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

@@ -10,4 +10,4 @@
   {% if params.button %}
   </div>
   {% endif %}
-{% endinputWrapper %}
+{% endinputWrapper %}

package/src/_includes/components/internal-nav/internal-nav.scss

@@ -3,6 +3,11 @@
   border-bottom: 1px solid transparent;
   transition: 200ms all;
 
+  &--sticky {
+    @extend .u-sticky;
+    top: -1;
+  }
+
   &--stuck {
     @extend .u-bg-white;
     border-bottom-color: color('grey', 'step-2');
@@ -66,8 +71,4 @@
 
 .c-hero + .c-internal-nav {
   margin-top: calc(var(--gutter) * -1);
-}
-
-.c-internal-nav.u-sticky {
-  top: -1px;
 }

package/src/_includes/components/scroll-spy/scroll-spy.scss

@@ -51,4 +51,4 @@
     margin-bottom: 0.5em;
     vertical-align: top;
   }
-}
+}

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

@@ -12,5 +12,25 @@ 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--white',
+        description: false
+      }
+    },
+    {
+      title: "Bordered",
+      preview: 'cards-two',
+      context: {
+        name: 'bordered'
+      }
+    }
+  ]
 }

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

@@ -1,11 +1,21 @@
-<article class="mp c-signpost">
+{% set className %}{{
+"c-signpost--vertical " if params.direction == "vertical" }}{{ 
+"c-signpost--l " if params.size == "l" }}{{ 
+"c-signpost--bordered " if params.name == "bordered" }}{{ 
+"u-white u-bg-" if params.color }}{{params.color}}
+{% endset %}
+
+<article
+  class="mp c-signpost {{ className }} {{ params.classes }}">
   <a class="c-signpost__link" 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

@@ -1,7 +1,19 @@
 .c-signpost {
+  &--bordered {
+    @extend .u-border;
+    display: flex;
+  }
+  
   &__link {
     display: flex;
     align-items: center;
+    
+    .c-signpost--bordered & {
+      @include padding('xs');
+      align-self: stretch;
+      flex-grow: 1;
+      justify-content: center;
+    }
   }
 
   &__image {
@@ -10,6 +22,11 @@
     max-width: 72px;
     flex-grow: 1;
     flex-shrink: 0;
+
+    .c-signpost--l & {
+      max-width: var(--space-3xl);
+      width: auto;
+    }
   }
 
   &__content {
@@ -19,9 +36,31 @@
       color: color('utility-blue');
       text-decoration: underline;
     }
+
+    .c-signpost--l & {
+      @include step(0);
+    }
   }
 
   &:hover &__content p {
     text-decoration: none;
   }
+}
+
+.c-signpost--vertical {
+  @include cutoff($size: #{var(--space-m)});
+  display: flex;
+
+  .c-signpost__link {
+    flex-direction: column;
+    flex-grow: 1;
+    @include padding('m');
+    text-align: center;
+  }
+
+  .c-signpost__image {
+    @include margin-bottom('s-m');
+    flex-grow: 0;
+    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

@@ -15,6 +15,7 @@
     margin-left: $twi-space;
     font-size: 1.25em;
     position: static !important;
+    flex-shrink: 0;
   }
 
   &--left svg {
@@ -22,4 +23,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/js/imports/internal-nav.js

@@ -1,5 +1,5 @@
 function InternalNav() {
-    const internalNav = document.querySelector('.c-internal-nav.u-sticky');
+    const internalNav = document.querySelector('.c-internal-nav--sticky');
 
     if (!internalNav) {
         return;
@@ -18,6 +18,24 @@ function InternalNav() {
 
     const observer = new IntersectionObserver(intersectionCallback, observerOptions);
     observer.observe(internalNav);
+
+    let internalNavHeight = internalNav.offsetHeight;
+
+    const updateInternalNavHeight = () => {
+        internalNavHeight = internalNav.offsetHeight;
+        const anchors = Array.from(internalNav.querySelectorAll('a'));
+        anchors.forEach(anchor => {
+            const id = anchor.getAttribute('href').replace('#', '');
+            const target = document.getElementById(id);
+            if (target) {
+                target.style.scrollMarginTop = `${internalNavHeight}px`;
+            }
+        });
+    };
+
+    window.addEventListener('resize', updateInternalNavHeight);
+
+    updateInternalNavHeight();
 }
 
 export default InternalNav;

package/src/assets/js/imports/scroll-spy.js

@@ -1,9 +1,14 @@
 function ScrollSpy() {
+  const internalNav = document.querySelector('.c-internal-nav');
+  const internalNavHeight = internalNav ? internalNav.offsetHeight : 0;
+
   const spies = Array.from(document.querySelectorAll('.c-scroll-spy'));
-  spies.forEach(setup);
+  spies.forEach(spy => {
+    setup(spy, internalNavHeight);
+  });
 }
 
-function setup(element) {
+function setup(element, internalNavHeight) {
   const anchors = Array.from(element.querySelectorAll('a'));
   const observer = new IntersectionObserver(observation(anchors));
   
@@ -14,6 +19,9 @@ function setup(element) {
 
     observer.observe(target);
   });
+
+  const currentTop = parseFloat(window.getComputedStyle(element).top);
+  element.style.top = `${currentTop + internalNavHeight}px`;
 }
 
 /**

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/objects/grid.scss

@@ -28,7 +28,7 @@ $grid-gutter-width: 36;
   & > * {
     width: calc(($width - (($columns - 1) * space-unit() / $columns)) - 0.1px);
     width: calc(($width - (($columns - 1) * var(--gutter) / $columns)) - 0.1px);
-    @include margin-bottom("gutter");
+    // @include margin-bottom(0);
     
     & + * {
       @include margin-left("gutter");
@@ -79,6 +79,7 @@ $grid-gutter-width: 36;
   }
 
   & > * {
+    @include margin-bottom("gutter");
     width: 100%;
   }
 
@@ -162,6 +163,16 @@ $grid-gutter-width: 36;
     }
   }
 
+  &--of-five {
+    @media (min-width: 22.4em) and (max-width: 64.9375em) {
+      @include o-grid(3)
+    }
+
+    @media (min-width: 65em) {
+      @include o-grid(5)
+    }
+  }
+
   &--swipeable {
     @media (max-width: 54.9375em) {
       @include breakout('gutter');

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/brand/resources.njk

@@ -9,54 +9,59 @@ tags: brand
 {% from "components/card/macro.njk" import card %}
 {% from "components/twi/macro.njk" import twi %}
 
-{% set content %}
-## Figma
-
-Franklin is available as a UI design kit in Figma. It contains text and color styles, grids and spacing, icons, and a complete library of components.
-
-Visit our profile at [figma.com/@malpan](https://www.figma.com/@malpan) and duplicate the project to add it to your account. You can then use Franklin in your own designs.
-
-The Figma project is updated regularly to keep it in line with the CSS/JS/HTML version of Franklin. Also every [component](/components) page on this site has a link to its Figma counterpart.
-{% endset %}
-
 <div class="u-flow--l u-margin-top-xl">
 
+<div class="o-grid o-grid--of-two">
+
 {{ twi({
     link: "/static/zip/MP_logo.zip",
     label: "Malvern Panalytical logo",
-    classes: "u-link",
+    classes: "u-link u-border u-pad-s",
     icon: "file"
 }) }}
 
-<br>
-
 {{ twi({
-link: '/static/pdf/PN12558_Physical_branding_v23.pdf',
-label: 'Brand guidelines quick-start guide',
-classes: 'u-link',
-icon: 'file'
+    link: "/static/pdf/PN12558_Physical_branding_v23.pdf",
+    label: "Brand guidelines quick-start guide",
+    classes: "u-link u-border u-pad-s",
+    icon: "file"
 }) }}
 
-<br>
-
 {{ twi({
     link: "https://malvern.sharepoint.com/:b:/r/sites/Intranet/Shared%20Documents/FINAL%20Tone%20of%20voice%20guidelines%20April%202021.pdf?csf=1&web=1&e=vW1Qzs",
     label: "Tone of voice guidelines",
-    classes: "u-link",
+    classes: "u-link u-border u-pad-s",
     icon: "file"
 }) }}
 
-<br>
-
 {{ twi({
     link: "https://malvern.sharepoint.com/:p:/r/sites/SVP/Shared%20Documents/Elevator%20Pitch%20(different%20languages)/Elevator%20pitch%20PPT%20(internal-external).pptx?d=w5ae5e5afa8c042f9968f95878a910471&csf=1&web=1&e=ui0qAk",
     label: "Elevator pitch - Powerpoint presentation",
-    classes: "u-link",
+    classes: "u-link u-border u-pad-s",
     icon: "file"
 }) }}
 
+{{ twi({
+    link: "/static/pdf/Power of one Content guidance.pdf",
+    label: "Channel Partner & Field Marketing guide - Product rebranding and naming conventions",
+    classes: "u-link u-border u-pad-s",
+    icon: "file"
+}) }}
+
+</div>
+
 <hr>
 
+{% set content %}
+## Figma
+
+Franklin is available as a UI design kit in Figma. It contains a detailed component library, as well as text and color styles, grids, spacing, and icons.
+
+Visit our profile at [figma.com/@malpan](https://www.figma.com/@malpan) and duplicate the project to add it to your account. You can then use Franklin in your own designs.
+
+The Figma project is updated regularly to keep it in line with the CSS/JS/HTML version of Franklin. Also most [component](/components) pages on this site have a link to their Figma counterpart.
+{% endset %}
+
 {{ markdown({ content: content }) }}
 
 </div>

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 %}