mp-design-system 1.2.10 → 1.2.12

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

@@ -4,6 +4,7 @@
   color: color('petrol');
   position: relative;
   overflow: hidden;
+  isolation: isolate;
 
   &.mp .u-link {
     color: color('utility-blue');

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,22 @@
+{%- 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>
+</nav>

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

@@ -1,35 +1,65 @@
 .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;
-      }
+  &--stuck {
+    @extend .u-bg-white;
+
+    .c-internal-nav__title {
+      opacity: 1;
     }
   }
 
+  &__wrap {
+    @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;
+    transition: 300ms opacity;
+    opacity: 0;
+  }
+
   &__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/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('c-internal-nav--stuck', !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';

package/src/brand/illustration.md

@@ -25,23 +25,23 @@ We have a library of pre-made characters which can be adapted for new designs, a
 
 <div class="c-library__illustration-grid">
 
-![alt text][login]
+![An illustration of several small people sitting and standing around an oversized laptop][login]
 
-![alt text][thankyou]
+![An illustration of several small people carrying an oversized envelope][thankyou]
 
-![alt text][confirm]
+![An illustration of one person welcoming another through a doorway, with golden light on the other side][confirm]
 
-![alt text][support]
+![An illustration of people helping each other up a staircase][support]
 
-![alt text][opt-in]
+![An illustration of a postal worker delivering a speech bubble to a mother and child][opt-in]
 
-![alt text][404]
+![An illustration of a person stepping through an empty frame of an oversized web browser window][404]
 
-![alt text][500]
+![An illustration of several small people standing around an oversized janitor's warning sign][500]
 
 </div>
 
-[login]: https://www.malvernpanalytical.com/resource/svg/login3.svg
+[login]: https://p3.aprimocdn.net/malvernpanalytical/192d2a88-af78-4670-a752-b0b90110745b/login3_Original%20file.svg
 [thankyou]: https://p3.aprimocdn.net/malvernpanalytical/0cd71419-bc75-4b43-8c4d-af69010bf927/thankyou_Original%20file.svg
 [support]: https://p3.aprimocdn.net/malvernpanalytical/aef489f7-a3cc-4a0c-ad6c-af3300baaa3b/support3_Original%20file.svg
 [opt-in]: https://p3.aprimocdn.net/malvernpanalytical/383c6156-cefd-4d8e-a913-af6d00cebf8a/opt-in%20success%20v02_Original%20file.svg