mp-design-system 1.2.30 → 1.2.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mp-design-system",
-  "version": "1.2.30",
+  "version": "1.2.35",
   "description": "",
   "scripts": {
     "dev": "npm-run-all --parallel bundle:*",

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

@@ -65,7 +65,7 @@
     {% if hasImage %}
       <figure class="c-card__image">
         <a href="{{ link }}">
-          <img src="{{ params.image.src }}" alt="{{ params.image.alt }}" />
+          <img class="{{ params.image.classes }}" src="{{ params.image.src }}" alt="{{ params.image.alt }}" />
         </a>
       </figure>
     {% endif %}

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.config.js

@@ -17,7 +17,7 @@ module.exports = {
     {
       title: 'Sticky on scroll',
       context: {
-        classes: 'u-sticky',
+        classes: 'c-internal-nav--sticky',
         title: 'Mastersizer range',
         links: [
           { link: '#overview', label: 'Overview' },

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

@@ -3,6 +3,11 @@
   border-bottom: 1px solid transparent;
   transition: 200ms all;
 
+  &--sticky {
+    position: sticky;
+    top: -1px;
+  }
+
   &--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

@@ -21,9 +21,16 @@ module.exports = {
         direction: 'vertical',
         size: 'l',
         color: 'blue',
-        icon: 'icon-user-training',
+        icon: 'icon-user-training--white',
         description: false
       }
+    },
+    {
+      title: "Bordered",
+      preview: 'cards-two',
+      context: {
+        name: 'bordered'
+      }
     }
   ]
 }

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

@@ -1,6 +1,13 @@
+{% 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 {{ "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 }}">
+  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>

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 {
@@ -36,15 +48,19 @@
 }
 
 .c-signpost--vertical {
+  @include cutoff($size: #{var(--space-m)});
+  display: flex;
+
   .c-signpost__link {
-    @include cutoff($size: #{var(--space-m)});
-    @include padding('m');
     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/twi/twi.scss

@@ -15,6 +15,7 @@
     margin-left: $twi-space;
     font-size: 1.25em;
     position: static !important;
+    flex-shrink: 0;
   }
 
   &--left svg {

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;
+export default InternalNav;

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

@@ -1,9 +1,14 @@
 function ScrollSpy() {
+  const internalNav = document.querySelector('.c-internal-nav--sticky');
+  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/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/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/prototype/events-hub.njk

@@ -1,7 +1,7 @@
 ---
 title: Events hub
 tags: prototype
-tagTitle: Webinars
+tagTitle: Events hub
 ---
 
 {% from "components/button/macro.njk" import button %}
@@ -19,13 +19,19 @@ tagTitle: Webinars
 
 {{ hero({
     cover: true,
-    title: 'Webinars and events'
+    title: 'Webinars and events',
+    subtitle: 'Science moves faster when we share what we know',
+    strapline: 'Science moves faster when we share what we know',
+    search: {
+        placeholder: 'Search by product type, industry, or measurement type'
+    },
+    classes: 'c-hero--padded c-hero--with-search c-hero--extend u-pad-bottom-3xl',
+    wrapper: false
 }) }}
 
-<div class="u-flow--3xl u-pad-bottom-xl">
-
 {# Big nav cards #}
-<div class="u-wrap u-margin-top-negative-2xl">
+{#
+<div class="u-wrap">
     <div class="o-grid o-grid--of-four o-grid--of-four-early">
         {{ signpost({
             direction: 'vertical',
@@ -65,12 +71,46 @@ tagTitle: Webinars
         }) }}
     </div>
 </div>
+#}
+
+<div class="u-wrap">
+    <div class="o-grid o-grid--of-four o-grid--of-four-early">
+        {{ signpost ({
+            link: '/prototype',
+            icon: 'icon-live-webinars',
+            title: 'Live webinars',
+            name: 'bordered'
+        }) }}
+        {{ signpost ({
+            link: '/prototype',
+            icon: 'icon-recorded-webinars',
+            title: 'Recorded webinars',
+            name: 'bordered'
+        }) }}
+        {{ signpost ({
+            link: '/prototype',
+            icon: 'icon-user-training',
+            title: 'User training',
+            name: 'bordered'
+        }) }}
+        {{ signpost ({
+            link: '/prototype',
+            icon: 'icon-globe-alt',
+            title: 'In-person events',
+            name: 'bordered'
+        }) }}
+    </div>
+</div>
+
+<div class="u-flow--3xl u-pad-bottom-xl u-margin-top-xl ">
 
 {# This week #}
 <div class="c-slat--white">
-    <div id="this-week" class="u-wrap u-flow">
-        <p class="c-h c-h--upper">Featured</p>
-        <h2 class="c-h c-h--step-5">This week</h2>
+    <section id="this-week" class="u-wrap u-flow">
+        <header>
+            <p class="c-h c-h--upper">Featured</p>
+            <h2 class="c-h c-h--step-5">This week</h2>
+        </header>
 
         {{ card({
             theme: {
@@ -115,12 +155,12 @@ tagTitle: Webinars
             tag: 'Live webinar'
         }) }}
         
-    </div>
+    </section>
 </div>
 
 {# Upcoming #}
 <div class="c-slat--white">
-    <div id="upcoming" class="u-wrap u-flow">
+    <section id="upcoming" class="u-wrap u-flow">
         <div class="u-split">
             <h2 class="c-h c-h--step-5">Coming soon</h2>
             {{ twi({ classes: 'u-link', label: "See all upcoming webinars", icon: 'arrow-right', align: 'left', link: "#" }) }}
@@ -207,17 +247,17 @@ tagTitle: Webinars
                 tag: 'Live webinar'
             }) }}
         </div>
-    </div>
+    </section>
 </div>
 
 {# Recorded #}
 <div class="c-slat--white">
-    <div id="recorded" class="u-wrap u-flow">
+    <section id="recorded" class="u-wrap u-flow">
         <div class="u-split">
             <h2 class="c-h c-h--step-5">Recorded webinars</h2>
             {{ twi({ classes: 'u-link', label: "See all recorded webinars", icon: 'arrow-right', align: 'left', link: "#" }) }}
         </div>
-        <div class="o-grid o-grid--of-four o-grid--of-four-early o-grid--swipeable">
+        <div class="o-grid o-grid--of-five o-grid--swipeable">
             {{ card({
                 theme: {
                     layout: 'single',
@@ -298,13 +338,34 @@ tagTitle: Webinars
                 link: '#',
                 tag: 'Recorded webinar'
             }) }}
+            {{ card({
+                theme: {
+                    layout: 'single',
+                    size: 'small',
+                    name: 'alt'
+                },
+                image: {
+                    src: 'https://p3.aprimocdn.net/malvernpanalytical/2af3b8d9-48a0-48ce-a98b-aff800ba4096/placeholder-concentric-rings_Original%20file.svg?quality=60&width=430&crop=2:1',
+                    alt: 'Alt',
+                    classes: 'u-2/1'
+                },
+                header: {
+                    title: 'Malvern Panalytical VIS-NIR Seminar ASD/Malvern Panalytical VIS-NIR Seminarium: Teoria i zastosowania spektrometrów ASD',
+                    date: {
+                        date: '8th Sep',
+                        formatted: true
+                    }
+                },
+                link: '#',
+                tag: 'Recorded webinar'
+            }) }}
         </div>
-    </div>
+    </section>
 </div>
 
 {# Explore #}
 <div class="c-slat--white">
-    <div id="explore" class="u-wrap u-flow">
+    <section id="explore" class="u-wrap u-flow">
         <h2 class="c-h c-h--step-3">Explore topics from over 1,000 expert sessions</h2>
         <div class="o-grid o-grid--of-four">
             {{ productSignpost ({
@@ -356,12 +417,12 @@ tagTitle: Webinars
                 classes: 'c-product-signpost--bordered u-pad-m'
             }) }}
         </div>
-    </div>
+    </section>
 </div>
 
 {# Series #}
 <div class="c-slat u-bg-blue-step-3 c-slat--padded c-slat--concentric">
-    <div id="featured" class="u-wrap u-flow">
+    <section id="featured" class="u-wrap u-flow">
         <div class="o-grid o-grid--layout o-grid--8/4-switch">
             <div class="u-flow">
                 <p class="c-h c-h--upper">Featured</p>
@@ -369,7 +430,7 @@ tagTitle: Webinars
                 <p>Learn everything there is to know about elemental analysis using X-ray fluorescence (XRF) in this series of webinars.</p>
                 {{ twi({ classes: 'u-link', label: "View the complete series", icon: 'arrow-right', align: 'left', link: "#" }) }}
             </div>
-            <div class="o-grid o-grid--of-three">
+            <div class="o-grid o-grid--of-three o-grid--of-three-early">
                 {{ card({
                     theme: {
                         border: false,
@@ -456,7 +517,7 @@ tagTitle: Webinars
                 }) }}
             </div>
         </div>
-    </div>
+    </section>
 </div>
 
 </div>