mp-design-system 1.2.9 → 1.2.11

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

@@ -0,0 +1,17 @@
+{# <div class="c-combobox">
+  <input type="text" class="c-combobox__input" id="combobox-input" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="combobox-label" autocomplete="off" placeholder="Select an option" role="combobox" aria-owns="combobox-options">
+  <ul class="c-combobox__dropdown" id="combobox-options" role="listbox" aria-labelledby="combobox-input">
+    <li data-value="option1" role="option">Option 1</li>
+    <li data-value="option2" role="option">Option 2</li>
+    <li data-value="option3" role="option">Option 3</li>
+  </ul>
+<div> #}
+
+<div class="c-combobox">
+  <input type="text" id="combobox-input" class="c-combobox__input" placeholder="Type to search..." autocomplete="off" aria-controls="combobox-list" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-owns="combobox-select">
+  <ul id="combobox-select" class="c-combobox__select" role="listbox" aria-label="Options" tabindex="-1">
+    <li role="option" aria-selected="false">Option 1</li>
+    <li role="option" aria-selected="false">Option 2</li>
+    <li role="option" aria-selected="false">Option 3</li>
+  </ul>
+</div>

package/src/_includes/components/input/combobox.scss

@@ -0,0 +1,31 @@
+.c-combobox {
+  position: relative;
+  display: inline-block;
+  
+  &__input {
+    width: 200px;
+    padding: 5px;
+  }
+  
+  &__select {
+    position: absolute;
+    z-index: 1;
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+    background-color: #f9f9f9;
+    border: 1px solid #ccc;
+    border-top: none;
+    display: none;
+    
+    li {
+      padding: 10px;
+      cursor: pointer;
+      
+      &[aria-selected="true"] {
+        background-color: #e6e6e6;
+      }
+    }
+  }
+  
+}

package/src/_includes/components/input/combox.config.js

@@ -0,0 +1,49 @@
+const categories = require('../component/categories');
+
+module.exports = {
+  title: 'Combobox',
+  category: categories.form,
+  component: {
+    name: 'combobox',
+    folder: 'input'
+  },
+  figma: 'https://www.figma.com/file/rUQ6aPQAfBX55o3hH0Lqb3/Design-exploration?node-id=213%3A918',
+  preview: 'form',
+  context: {
+    label: 'Label',
+    name: 'name',
+    id: 'id',
+    type: 'text',
+    placeholder: 'Placeholder',
+    required: true
+  },
+  variants: [
+    {
+      title: 'With error',
+      context: {
+        error: true
+      }
+    },
+    {
+      title: 'With error message',
+      context: {
+        error: 'This field is required'
+      }
+    },
+    {
+      title: 'Disabled',
+      context: {
+        disabled: true
+      }
+    }
+  ],
+  props: [
+    {
+      table: [
+        ['label', 'string'],
+        ['id', 'string', 'ID attribute'],
+        ['name', 'string', 'Name attribute (falls back to ID)'],
+      ]
+    }
+  ]
+}

package/src/_includes/components/internal-nav/internal-nav.config.js

@@ -13,6 +13,24 @@ module.exports = {
       { link: '#our-product-brands', label: 'Our product brands' }
     ]
   },
+  variants: [
+    {
+      title: 'Sticky on scroll',
+      context: {
+        classes: 'u-sticky',
+        title: 'Mastersizer range',
+        links: [
+          { link: '#overview', label: 'Overview' },
+          { link: '#products', label: 'Products' },
+          { link: '#compare', label: 'Compare' },
+        ],
+        button: {
+          link: '#',
+          label: 'Request a quote',
+        }
+      }
+    }
+  ],
   props: [
     {
       table: [

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

@@ -1,9 +1,27 @@
+<figure class="mp c-hero c-hero--image"><div class="u-wrap"><nav class="c-breadcrumb" aria-label="Breadcrumb"><ol class="c-breadcrumb__list" role="list"><li class="c-breadcrumb__item" role="listitem"><a href="/en/products" class="c-breadcrumb__link">Products</a></li><li class="c-breadcrumb__item" role="listitem"><svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--chevron-down"><use xlink:href="/resource/svg/sprite.svg#chevron-down"></use></svg><a href="/en/products/product-range" class="c-breadcrumb__link">Product range</a></li><li class="c-breadcrumb__item" role="listitem"><svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--chevron-down"><use xlink:href="/resource/svg/sprite.svg#chevron-down"></use></svg><span class="c-breadcrumb__current" aria-current="Mastersizer range">Mastersizer range</span></li></ol></nav><div class="c-hero__content"><header class="u-flow--xs"><h1 class="c-h c-h--page-title">Mastersizer range</h1><p class="u-step-1">World's most popular particle size analyzers</p></header><a id="brochureDownload" class="mp c-twi u-link c-twi--left" name="downloadTracking" href="/en/assets/Mastersizer%203000%20Brochure%20%28EN%29_tcm50-58994.pdf" onclick='dataLayer.push({event:"brochure_download",tcmId:"58994",filePath:"/en/products/product-range/mastersizer-range",type:"1"}),_paq.push(["trackEvent","Button click","Download brochure","/en/products/product-range/mastersizer-range"]),stc("1","58994","/en/products/product-range/mastersizer-range")' download="Mastersizer_range" target="_blank"><svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--file"><use xlink:href="/resource/svg/sprite.svg#file"></use></svg><span>Download brochure</span></a></div></div><div class="c-hero__image-bg" style="background-image:url(https://p3.aprimocdn.net/malvernpanalytical/0492be50-1fa5-4f7b-89a6-ad9e00b5d058/636216826573577799SD_Original%20file.jpg?quality=60&amp;width=1920)"></div></figure>
+
+{%- from "components/button/macro.njk" import button -%}
+
 <nav class="mp c-internal-nav {{ params.classes }}" aria-label="In-page">
   <div class="c-internal-nav__wrap">
+    {% if params.title %}
+      <p class="c-internal-nav__title">{{ params.title }}</p>
+    {% endif %}
     <ul class="c-internal-nav__list">
       {% for item in params.links %}
         <li><a href="{{ item.link }}">{{ item.label }}</a></li>
       {% endfor %}
+      {% if params.button %}
+        {{ button({
+          link: params.button.link,
+          label: params.button.label,
+          colour: 'green',
+          classes: 'c-button--small'
+        }) }}
+      {% endif %}
     </ul>
   </div>
 </nav>
+
+
+<div class="mp u-wrap u-pad-top-s u-margin-bottom-l-xl"><div class="o-grid o-grid--of-two-late u-pad-bottom-s"><div><div class="mp o-prose u-flow--prose"><p>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. From assessing product uniformity and solubility, through to optimising packing density to improve final product performance and controlling powder flowability to increase manufacturing efficiency, particle size analysis is critical to understanding and controlling a wide range of properties. The Mastersizer range, with its intuitive software and industry-leading design and ergonomics, enables users to make these particle sizing measurements fast and routine.</p><p><strong><img src="https://p3.aprimocdn.net/malvernpanalytical/a2d29b47-f548-4104-82ad-ada400c38338/637353357645078214LB_Original%20file.png" style="float:left;width:40px;height:48px"> &nbsp;</strong><strong>Works with&nbsp;<a title="Analytical Instrument Qualification" href="/en/industries/pharmaceuticals/compliance-analytical-instrument-qualification">OmniTrust</a>: Malvern Panalytical's compliance solution for the regulated environment</strong></p></div><div class="u-margin-top-m"><a href="/en/products/request-a-quote?product=9446" class="mp c-button mp c-button c-button--inline">Request a quote</a><a href="/en/products/request-a-demonstration?product=9446" class="mp c-button mp c-button c-button--inline c-button--blue">Request a demo</a><a href="/en/about-us/contact-us/sales?product=9446" class="mp c-button mp c-button c-button--inline c-button--outline-green">Contact sales</a></div></div><div><figure class="c-embed"><div class="c-embed__wrapper"><iframe title="Video title" width="640" height="360" src="https://www.youtube.com/embed/Q4H7EdHFghs" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" enablejsapi="true"></iframe></div></figure></div></div><div id="product-comparison-table" class="mp c-comparison u-margin-y-l"><div class="c-comparison__mobile"><article><div class="c-comparison__content"><a href="/en/products/product-range/mastersizer-range/mastersizer-3000" class="c-comparison__link u-flow--prose"><figure><img src="https://p3.aprimocdn.net/malvernpanalytical/39514ce3-3c03-4457-bd60-ad9e000133fb/636216692140429322FO_Original%20file.jpg?quality=60&amp;width=200" alt="Mastersizer 3000" loading="lazy" width="200"></figure><h3 class="c-h c-h--step-0">Mastersizer 3000</h3><p>Delivering the data you need for outcomes you can trust</p><span class="mp c-button u-md-hidden">More details</span></a></div><table class="c-table"><tbody><tr><td>Particle size range</td><td>0.01µm - 3500µm</td></tr><tr class="c-table__title"><th colspan="2">Technology</th></tr><tr><td>Laser Diffraction</td><td><svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--tick"><use xlink:href="/resource/svg/sprite.svg#tick"></use></svg></td></tr><tr class="c-table__title"><th colspan="2">Dispersion type</th></tr><tr><td>Wet</td><td><svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--tick"><use xlink:href="/resource/svg/sprite.svg#tick"></use></svg></td></tr><tr><td>Dry</td><td><svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--tick"><use xlink:href="/resource/svg/sprite.svg#tick"></use></svg></td></tr></tbody></table></article><article><div class="c-comparison__content"><a href="/en/products/product-range/mastersizer-range/mastersizer-3000e" class="c-comparison__link u-flow--prose"><figure><img src="https://p3.aprimocdn.net/malvernpanalytical/c975939f-9b34-4cf8-9c05-ad9e00014d61/636216692720089326GR_Original%20file.jpg?quality=60&amp;width=200" alt="Mastersizer 3000E" loading="lazy" width="200"></figure><h3 class="c-h c-h--step-0">Mastersizer 3000E</h3><p>Entry level particle size analyzer</p><span class="mp c-button u-md-hidden">More details</span></a></div><table class="c-table"><tbody><tr><td>Particle size range</td><td>0.1µm - 1000µm</td></tr><tr class="c-table__title"><th colspan="2">Technology</th></tr><tr><td>Laser Diffraction</td><td><svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--tick"><use xlink:href="/resource/svg/sprite.svg#tick"></use></svg></td></tr><tr class="c-table__title"><th colspan="2">Dispersion type</th></tr><tr><td>Wet</td><td><svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--tick"><use xlink:href="/resource/svg/sprite.svg#tick"></use></svg></td></tr><tr><td>Dry</td><td><svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--tick"><use xlink:href="/resource/svg/sprite.svg#tick"></use></svg></td></tr></tbody></table></article></div><div class="c-comparison__wrapper"><table class="c-table c-table--comparison"><thead><tr><th></th><th><a href="/en/products/product-range/mastersizer-range/mastersizer-3000" class="c-comparison__link u-flow--prose"><figure><img src="https://p3.aprimocdn.net/malvernpanalytical/39514ce3-3c03-4457-bd60-ad9e000133fb/636216692140429322FO_Original%20file.jpg?quality=60&amp;width=200" alt="Mastersizer 3000" loading="lazy" width="200"></figure><h3 class="c-h c-h--step-0">Mastersizer 3000</h3><p>Delivering the data you need for outcomes you can trust</p><span class="mp c-button u-md-hidden">More details</span></a></th><th><a href="/en/products/product-range/mastersizer-range/mastersizer-3000e" class="c-comparison__link u-flow--prose"><figure><img src="https://p3.aprimocdn.net/malvernpanalytical/c975939f-9b34-4cf8-9c05-ad9e00014d61/636216692720089326GR_Original%20file.jpg?quality=60&amp;width=200" alt="Mastersizer 3000E" loading="lazy" width="200"></figure><h3 class="c-h c-h--step-0">Mastersizer 3000E</h3><p>Entry level particle size analyzer</p><span class="mp c-button u-md-hidden">More details</span></a></th></tr><tr><th></th><th><a href="/en/products/product-range/mastersizer-range/mastersizer-3000" class="mp c-button c-button--tight">More details</a></th><th><a href="/en/products/product-range/mastersizer-range/mastersizer-3000e" class="mp c-button c-button--tight">More details</a></th></tr></thead><tbody><tr><td class="title">Particle size range</td><td>0.01µm - 3500µm</td><td>0.1µm - 1000µm</td></tr><tr class="c-table__title"><th colspan="3" class="title">Technology</th></tr><tr><td>Laser Diffraction</td><td><svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--tick"><use xlink:href="/resource/svg/sprite.svg#tick"></use></svg></td><td><svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--tick"><use xlink:href="/resource/svg/sprite.svg#tick"></use></svg></td></tr><tr class="c-table__title"><th colspan="3" class="title">Dispersion type</th></tr><tr><td>Wet</td><td><svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--tick"><use xlink:href="/resource/svg/sprite.svg#tick"></use></svg></td><td><svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--tick"><use xlink:href="/resource/svg/sprite.svg#tick"></use></svg></td></tr><tr><td>Dry</td><td><svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--tick"><use xlink:href="/resource/svg/sprite.svg#tick"></use></svg></td><td><svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--tick"><use xlink:href="/resource/svg/sprite.svg#tick"></use></svg></td></tr></tbody></table></div></div></div>

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

@@ -1,35 +1,55 @@
 .c-internal-nav {
-  color: color('utility-blue');
+  background-color: transparent;
+  border-bottom: 1px solid color('grey', 'step-2');
+  transition: 300ms background-color;
 
   &__wrap {
-    position: relative;
-
-    &:after {
-      content: '';
-      background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
-      position: absolute;
-      z-index: 1;
-      height: 100%;
-      right: 0;
-      top: 0;
-      @include space('width', 'l');
-
-      @media (min-width: $wrapper) {
-        display: none;
-      }
-    }
+    @extend .u-wrap;
+    display: flex;
+    gap: var(--space-l);
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  &__title {
+    @include padding('s', 0);
+    flex-shrink: 0;
+    font-weight: bold;
   }
 
   &__list {
-    @include padding-bottom('m-l');
-    @include margin-bottom('m-l');
-    border-bottom: 1px solid color('petrol', 'step-2');
+    @include padding('s', 0);
+    color: color('utility-blue');
     white-space: nowrap;
     overflow-x: auto;
     display: flex;
+    align-items: center;
+    font-size: var(--step--1);
 
     & > * + * {
-      @include margin-left('m-l');
+      @include margin-left('l');
+    }
+  }
+
+
+
+  @media (max-width: 44em) {
+    &__title,
+    .c-button {
+      display: none;
+    }
+  
+    &__list {
+      @include padding-bottom('s');
     }
   }
 }
+
+
+.c-hero + .c-internal-nav {
+  margin-top: calc(var(--gutter) * -1);
+}
+
+.c-internal-nav.u-sticky {
+  top: -1px;
+}

package/src/assets/js/app.js

@@ -5,6 +5,7 @@ import Comparison from './imports/comparison';
 import Gallery from './imports/gallery';
 import HeroPattern from './imports/hero-pattern';
 import HeroVideo from './imports/hero-video';
+import InternalNav from './imports/internal-nav';
 import OffCanvas from './imports/off-canvas';
 import ResponsiveTable from './imports/responsive-table';
 import ScrollbarWidth from './imports/scrollbar-width';
@@ -26,6 +27,7 @@ import Tabs from './imports/tabs';
   Gallery();
   HeroPattern();
   HeroVideo();
+  InternalNav();
   OffCanvas();
   ResponsiveTable();
   ScrollbarWidth();

package/src/assets/js/imports/combobox.js

@@ -0,0 +1,66 @@
+function Combobox() {
+  const comboboxes = Array.from(document.querySelectorAll('.c-combobox'));
+
+  comboboxes.forEach(function (combobox) {
+    const input = combobox.querySelector('.c-combobox__input');
+    const select = combobox.querySelector('.c-combobox__select');
+    const options = Array.from(select.querySelectorAll('li[role="option"]'));
+
+    // Set initial state
+    input.setAttribute('aria-expanded', 'false');
+    input.setAttribute('aria-owns', select.id);
+    input.setAttribute('aria-controls', select.id);
+
+    // Event listeners
+    input.addEventListener('focus', function () {
+      input.setAttribute('aria-expanded', 'true');
+      select.setAttribute('aria-expanded', 'true');
+    });
+
+    input.addEventListener('blur', function () {
+      input.setAttribute('aria-expanded', 'false');
+      select.setAttribute('aria-expanded', 'false');
+    });
+
+    input.addEventListener('input', function () {
+      const inputValue = input.value.toLowerCase();
+
+      options.forEach(function (option) {
+        const optionText = option.textContent.toLowerCase();
+
+        if (optionText.includes(inputValue)) {
+          option.style.display = '';
+          option.setAttribute('aria-hidden', 'false');
+        } else {
+          option.style.display = 'none';
+          option.setAttribute('aria-hidden', 'true');
+        }
+      });
+    });
+
+    select.addEventListener('click', function (event) {
+      const target = event.target;
+      const isOption = target.getAttribute('role') === 'option';
+
+      if (isOption) {
+        const selectedOption = select.querySelector('[aria-selected="true"]');
+        if (selectedOption) {
+          selectedOption.setAttribute('aria-selected', 'false');
+        }
+
+        target.setAttribute('aria-selected', 'true');
+        input.value = target.textContent;
+
+        input.focus();
+      }
+    });
+
+    // Display options initially
+    options.forEach(function (option) {
+      option.style.display = '';
+      option.setAttribute('aria-hidden', 'false');
+    });
+  });
+}
+
+export default Combobox;

package/src/assets/js/imports/comparison.js

@@ -1,5 +1,4 @@
 function Comparison() {
-  console.log(document.querySelectorAll('.c-comparison-table').parentElement)
   document.querySelectorAll('.c-comparison-table').forEach(extractMobileComparison)
 }
 
@@ -11,10 +10,10 @@ function extractMobileComparison(container) {
 
   if (!body || !head || !mobile) return;
 
-  // Remove empty corner piece
-  const products = Array.from(head.children[0].children)
-    .filter((x, i) => i)
-    .map(x => ({ info: x.innerHTML, table: [] }));
+  // Remove empty corner piece  
+  const productsInfo = Array.from(head.children[0].children).filter((x, i) => i).map(x => ({ info: x.innerHTML }));
+  const productsButtons = Array.from(head.children[1].children).filter((x, i) => i).map(x => ({ buttons: x.innerHTML }));
+  const products = productsInfo.map((info, index) => ({ ...info, ...productsButtons[index], table: [] }));
 
   Array.from(body.children).forEach(row => {
     // For table row headers, push to all products
@@ -45,7 +44,7 @@ function extractMobileComparison(container) {
 
 function createMobileProduct(product) {
   const parent = document.createElement('article');
-  parent.innerHTML = `${product.info}
+  parent.innerHTML = `${product.info}${product.buttons}
   <table class="c-comparison-table">
     ${product.table.map(x => {
       if (x.type === 'title') {

package/src/assets/js/imports/internal-nav.js

@@ -0,0 +1,23 @@
+function InternalNav() {
+    const internalNav = document.querySelector('.c-internal-nav.u-sticky');
+
+    if (!internalNav) {
+        return;
+    }
+
+    const observerOptions = {
+        root: null,
+        rootMargin: '0px',
+        threshold: 1.0
+    };
+
+    const intersectionCallback = (entries, observer) => {
+        const isIntersecting = entries[0].isIntersecting;
+        internalNav.classList.toggle('u-bg-white', !isIntersecting);
+    };
+
+    const observer = new IntersectionObserver(intersectionCallback, observerOptions);
+    observer.observe(internalNav);
+}
+
+export default InternalNav;

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/event-series-card.scss';
 @import '~comp/card/industry-card.scss';
 @import '~comp/card/product-comparison-card.scss';
 @import '~comp/comparison-table/comparison-table.scss';