mp-design-system 1.0.4 → 1.2.2

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

@@ -39,7 +39,7 @@ module.exports = {
     {
       title: 'Disabled',
       context: {
-        disabled: false
+        disabled: true
       }
     }
   ],

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

@@ -1,5 +1,4 @@
 {% inputWrapper params.error %}
-<div class="c-form-row u-disabled">
   <label class="{{ 'u-hidden' if params.hideLabel else 'c-label' }}" for="{{ params.id }}">{{ params.label }}</label>
   {% if params.button %}
   <div class="u-flex u-border">
@@ -11,5 +10,4 @@
   {% if params.button %}
   </div>
   {% endif %}
-  </div>
 {% endinputWrapper %}

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

@@ -1,25 +1,29 @@
 {% from "components/component/component.njk" import c %}
 
-{% macro input(params) %}
-  {{ c({ name: 'input' }, params) }}
-{% endmacro %}
-
-{% macro select(params) %}
-  {{ c({ name: 'select', folder: 'input' }, params) }}
-{% endmacro %}
-
-{% macro textarea(params) %}
-  {{ c({ name: 'textarea', folder: 'input' }, params) }}
+{% macro combobox(params, type = 'combobox') %}
+  {{ c({ name: 'combobox', folder: 'input' }, params) }}
 {% endmacro %}
 
 {% macro checkbox(params, type = 'checkbox') %}
   {{ c({ name: 'checkbox', folder: 'input' }, params) }}
 {% endmacro %}
 
+{% macro input(params) %}
+  {{ c({ name: 'input' }, params) }}
+{% endmacro %}
+
 {% macro radio(params) %}
   {{ c({ name: 'radio', folder: 'input' }, params) }}
 {% endmacro %}
 
+{% macro select(params) %}
+  {{ c({ name: 'select', folder: 'input' }, params) }}
+{% endmacro %}
+
 {% macro toggle(params, type='toggle') %}
   {{ c({ name: 'toggle', folder: 'input' }, params) }}
 {% endmacro %}
+
+{% macro textarea(params) %}
+  {{ c({ name: 'textarea', folder: 'input' }, params) }}
+{% endmacro %}

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

@@ -7,6 +7,8 @@
     @include padding-left('l');
     position: relative;
     @include step(-1);
+    box-decoration-break: clone;
+    -webkit-box-decoration-break: clone;
 
     &:before {
       transform: translateY(-50%);
@@ -91,3 +93,10 @@
     box-shadow: inset 0 0 0 5px color('utility-blue', 'step--1');
   }
 }
+
+.c-off-canvas .c-checkbox-group {
+  &> * {
+    width: 100%;
+    margin-left: 0;
+  }
+}

package/src/_includes/components/off-canvas/macro.njk

@@ -0,0 +1,5 @@
+{% from "components/component/component.njk" import c %}
+
+{% macro off-canvas(params) %}
+  {{ c({ name: 'off-canvas' }, params) }}
+{% endmacro %}

package/src/_includes/components/off-canvas/off-canvas.config.js

@@ -0,0 +1,28 @@
+module.exports = {
+  title: 'Off-canvas',
+  component: {
+    name: 'off-canvas',
+  },
+  context: {
+    target: {
+      id: 'areasOfInterest',
+      button: {
+        text: 'Update'
+      }
+    },
+    header: 'Areas of interest',
+    toggle: {
+      text: 'Add areas of interest'
+    },    
+  },
+  variants: [
+    {
+      title: 'Mobile only',
+      context: {
+        classes: 'c-off-canvas--mobile'
+      }
+    }
+  ],
+  props: [
+  ]
+}

package/src/_includes/components/off-canvas/off-canvas.njk

@@ -0,0 +1,28 @@
+{% from "components/input/macro.njk" import checkbox %}
+
+{%- set classNames = "mp c-button c-off-canvas__toggle" -%}
+
+{%- if params.classes -%}
+  {% set classNames = classNames + " " + params.classes %}
+{% endif %}
+
+<div>
+  <div id="{{ params.target.id }}" class="c-checkbox-group u-flow--m">
+    <label class="c-label" data-off-canvas="header">{{ params.header }}</label>
+    <div class="o-grid o-grid--of-three" data-off-canvas="main">
+      {% for _ in ["3D structure / imaging", "Binding affinity", "Binding kinetics", "Chemical identification", "Contaminant detection and analysis", "Crystal structure determination", "Elemental analysis", "Elemental quantification", "Enzyme kinetics", "Epitaxy analysis"] %}
+        <div>
+          {{ checkbox({
+            label: _,
+            name: params.target.id,
+            id: _,
+            value: _
+          })}}
+        </div>
+      {% endfor %}
+    </div>
+    <button class="mp c-button o-off-canvas__update" data-off-canvas="footer" data-off-canvas-close="true">{{ params.target.button.text }}</button>
+  </div>
+
+  <button class="{{ classNames }}" data-target="{{ params.target.id }}" aria-controls="{{ params.target.id }}" aria-expanded="false" aria-label="Toggle {{ params.header }}" onclick="return false">{{ params.toggle.text }}</button>
+</div>

package/src/{assets/scss/objects → _includes/components/off-canvas}/off-canvas.scss

@@ -1,4 +1,4 @@
-.o-off-canvas {
+.c-off-canvas {
   position: fixed;
   top: 0;
   left: 0;
@@ -10,6 +10,10 @@
   transition: opacity 0.3s ease, visibility 0s linear 0.3s;
   z-index: 9999;
 
+  &> * + * {
+    margin: 0 !important;
+  }
+
   &__backdrop {
     position: fixed;
     top: 0;
@@ -68,18 +72,31 @@
     @include padding('s');
   }
 
-  &--open {
+  &--active {
     opacity: 1;
     visibility: visible;
     transition: opacity 0.3s ease;
 
-    .o-off-canvas__backdrop {
+    .c-off-canvas__backdrop {
       opacity: 1;
       visibility: visible;
     }
 
-    .o-off-canvas__content {
+    .c-off-canvas__content {
       right: 0;
     }
   }
+}
+
+@media only screen and (min-width: 40em) {
+  .c-off-canvas--mobile {
+    display: none !important;
+  }
+
+  .c-checkbox-group {
+    [data-off-canvas="header"],
+    [data-off-canvas="footer"] {
+      display: none;
+    }
+  }
 }

package/src/_includes/includes/color-swatches.njk

@@ -0,0 +1,220 @@
+{% set colors = [
+    {
+        name: 'MP Petrol',
+        key: 'Petrol',
+        steps: [
+            {
+                name: "-1",
+                hex: '003039',
+                cmyk: '93.65.57.57',
+                pantone: 'PAN 547'
+            },
+            {
+                name: 0,
+                hex: '005461',
+                cmyk: '93.54.49.27',
+                pantone: 'PAN 3165'
+            },
+            {
+                name: 1,
+                hex: '3d7b87',
+                cmyk: '78.39.40.08'
+            },                
+            {
+                name: 2,
+                hex: 'bfd3d6',
+                cmyk: '24.09.13.00'
+            },
+            {
+                name: 3,
+                hex: 'ebf1f2',
+                cmyk: '06.02.03.00'
+            }
+        ]
+    },
+    {
+        name: 'MP Blue',
+        key: 'Blue',
+        steps: [
+            {
+                name: "-1",
+                hex: '00758c',
+                cmyk: '89.42.35.07'
+            },
+            {
+                name: 0,
+                hex: '00a2c2',
+                cmyk: '77.17.17.00',
+                pantone: 'PAN 312'
+            },
+            {
+                name: 1,
+                hex: '47bcd3',
+                cmyk: '64.04.15.00'
+            },                
+            {
+                name: 2,
+                hex: 'c2e9f0',
+                cmyk: '22.00.05.00'
+            },
+            {
+                name: 3,
+                hex: 'ebf8fa',
+                cmyk: '06.00.01.00'
+            }
+        ]
+    },
+    {
+        name: 'MP Green',
+        key: 'Green',
+        steps: [
+            {
+                name: "-1",
+                hex: '0e7a0e',
+                cmyk: '87.27.100.16'
+            },
+            {
+                name: 0,    
+                hex: '13aa13',
+                cmyk: '81.04.100.01',
+                pantone: 'PAN 354'
+            },
+            {
+                name: 1,
+                hex: '55c255',
+                cmyk: '66.00.89.00'
+            },                
+            {
+                name: 2,
+                hex: 'c6ebc6',
+                cmyk: '22.00.28.00'
+            },
+            {
+                name: 3,
+                hex: 'ecf8ec',
+                cmyk: '06.00.08.00'
+            }
+        ]
+    },
+    {
+        name: 'MP Rubine',
+        key: 'Red',
+        steps: [
+            {
+                name: 0,    
+                hex: 'ce0058',
+                cmyk: '14.100.50.2',
+                pantone: 'PAN Rubine Red'
+            }
+        ]
+    },
+    {
+        name: 'MP Charcoal',
+        key: 'Grey',
+        steps: [
+            
+            {
+                name: "-1",
+                hex: '1c1c1c',
+                cmyk: '00.00.00.95'
+            },
+            {
+                name: 0,    
+                hex: '333333',
+                cmyk: '00.00.00.91',
+                pantone: 'PAN 447'
+            },
+            {
+                name: 1,
+                hex: '959595',
+                cmyk: '00.00.00.70'
+            },                
+            {
+                name: 2,
+                hex: 'cecece',
+                cmyk: '00.00.00.22'
+            },
+            {
+                name: 3,
+                hex: 'efefef',
+                cmyk: '00.00.00.08'
+            }
+        ]
+    },
+    {
+        name: 'MP Utility Gold',
+        key: 'Utility-Orange',
+        steps: [
+            
+            {
+                name: "-1",
+                hex: 'AE7809',
+                cmyk: '29.51.100.10'
+            },
+            {
+                name: 0,    
+                hex: 'F2A60D',
+                cmyk: '04.38.100.00'
+            },
+            {
+                name: 1,
+                hex: 'F6BF51',
+                cmyk: '03.26.79.00'
+            },                
+            {
+                name: 2,
+                hex: 'FCEAC5',
+                cmyk: '01.07.25.00'
+            },
+            {
+                name: 3,
+                hex: 'FEF8EC',
+                cmyk: '00.02.06.00'
+            }
+        ]
+    },
+    {
+        name: 'MP Utility Blue',
+        key: 'Utility-Blue',
+        steps: [
+            {
+                name: 0,    
+                hex: '006daf',
+                cmyk: '86.48.3.5'
+            }
+        ]
+    }
+] %}
+
+{% macro swatches(params) %}
+<div class="u-flow--2xs">
+    {% for color in colors %}
+        <h3 class="c-h c-h--step-1">{{ color.name }}</h3>
+        <div class="c-library__swatch-grid c-library__swatch-grid--has-labels ">
+            {% for step in color.steps %}
+                {% set classname %}
+                    {{- 'c-library__swatch'}}{# Let's build a string #}
+                    {{ 'u-bg-'+color.key | slug}}{# Set the background color to color.key -#}
+                    {{ '-step-'+step.name if step.name!=0 }} {# If it's not step zero, add the -step-x suffix -#}
+                    {# Set the text color to white, or a dark color #}
+                    {{ 'u-'+color.key|slug+'-step--1' if (step.name==2) or (step.name==3) else 'u-white' -}}
+                {% endset %}
+                <div class="{{classname}}">
+                    <span>Step {{step.name}}</span>
+                </div>
+                <table class="c-table">
+                    <tbody>
+                        <tr><td>Hex</td><td>#{{step.hex | upper}}</td></tr>
+                        {% if params.print %}
+                        <tr><td>CMYK</td><td>{{step.cmyk}}</td></tr>
+                        <tr class="{{ "u-petrol-step-3" if not step.pantone }}">
+                            <td>Pantone</td><td>{{step.pantone if step.pantone}}</td>
+                        </tr>
+                        {% endif %}
+                    </tbody>
+                </table>
+            {% endfor %}
+        </div>
+    {% endfor%}
+</div>
+{% endmacro %}

package/src/_includes/includes/system-footer.njk

@@ -5,7 +5,7 @@
     <div class="o-grid o-grid--8/3-switch o-grid--push">
       <ol class="u-flow--xs u-margin-top-2xs">
         <li><h3>Quick links</h3></li>
-        <li><a href="/brand/downloads">Popular downloads</a></li>
+        <li><a href="/brand/resources">Brand resources</a></li>
         <li><a href="/checklist">Franklin checklist</a></li>
       </ol>
       <div class="mp o-prose u-flow--prose u-step--1">

package/src/_includes/library-navigation/brand-nav.njk

@@ -5,8 +5,9 @@
   <h3>Brand & visual identity</h3>
   <ul>
     {{ libraryList('Overview', '/brand/', page.url) }}
-    {{ libraryList('The basics', '/brand/basics/', page.url) }}
-    {{ libraryList('Downloads', '/brand/downloads/', page.url) }}
+    {{ libraryList('Quick start', '/quickstart/', page.url) }}
+    {{ libraryList('Requirements', '/brand/requirements/', page.url) }}
+    {{ libraryList('Resources', '/brand/resources/', page.url) }}
     {{ libraryList('Logo', '/brand/logo/', page.url) }}
     {{ libraryList('Colors', '/brand/colors/', page.url) }}
     {{ libraryList('Typography', '/brand/typography/', page.url) }}

package/src/_includes/navigation/store.njk

@@ -0,0 +1,29 @@
+<nav class="c-header__site c-header__site--with-home" aria-label="Site">
+  <ul>
+    <li>
+      <a href="/prototype/products">Store home</a>
+    </li>
+    <li>
+      <a href="/prototype/sections">Consumables</a>
+    </li>
+    <li>
+      <a href="">Standards</a>
+    </li>
+    <li>
+      <a href="/prototype/webinars">Accessories</a>
+    </li>
+    <li>
+      <a href="">Contracts & agreements</a>
+    </li>
+    <li>
+      <a href="">Software</a>
+    </li>
+    <a class="mp c-button c-button--small c-button--tight c-button--outline-white c-header__push u-margin-right-m" href="">Basket (0)</a>
+    <li>
+      <a href="">Log in</a>
+    </li>
+    <li>
+      <a href="">Register</a>
+    </li>
+  </ul>
+</nav>

package/src/_includes/system.njk

@@ -17,7 +17,7 @@
     {% if sidebar %}
       <div class="c-library__body">
         <nav class="c-library__sidebar c-library-stretch" id="sidebar">
-          <div class="u-flow--m">
+          <div class="u-flow--m u-sticky">
             {% block sidebar %}{% endblock %}
           </div>
         </nav>

package/src/assets/js/app.js

@@ -1,6 +1,7 @@
 import Accordion from './imports/accordion';
 import Carousel from './imports/carousel';
 import ClearForm from './imports/clear-form';
+import Combobox from './imports/combobox';
 import Comparison from './imports/comparison';
 import Gallery from './imports/gallery';
 import HeroPattern from './imports/hero-pattern';
@@ -22,6 +23,7 @@ import Tabs from './imports/tabs';
   Accordion();
   Carousel();
   ClearForm();
+  Combobox();
   Comparison();
   Gallery();
   HeroPattern();

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;