mp-design-system 1.0.3 → 1.2.1

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.scss

@@ -86,7 +86,7 @@
 
   &[disabled],
   [disabled],
-  .u-disabled & {
+  &--disabled {
     background-color: color('petrol', 'step-2');
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="lock" viewBox="0 0 25 24" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.45 4.17A4 4 0 0 1 16.28 7v3h-8V7a4 4 0 0 1 1.17-2.83ZM6.28 10V7a6 6 0 1 1 12 0v3h.22c1.64 0 2.78 1.46 2.78 3v7c0 1.54-1.14 3-2.78 3H6.06c-1.65 0-2.78-1.46-2.78-3v-7c0-1.54 1.13-3 2.78-3h.22Zm1 2H6.06c-.33 0-.78.33-.78 1v7c0 .67.45 1 .78 1H18.5c.32 0 .78-.33.78-1v-7c0-.67-.46-1-.78-1H7.28Zm3 3.35a2 2 0 1 1 3 1.73v1.77a1 1 0 1 1-2 0v-1.77a2 2 0 0 1-1-1.73Z"/></svg>');
     background-position: right var(--space-2xs) center;
@@ -97,6 +97,10 @@
   }
 }
 
+.u-disabled > .c-input {
+  @extend .c-input--disabled;
+}
+
 .c-input--with-button {
   // padding-right: 44px;
   border: 0;

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

@@ -91,3 +91,12 @@
     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="u-flow--m">
+    <label class="c-label" data-off-canvas="header">{{ params.header }}</label>
+    <div class="o-grid o-grid--of-three c-checkbox-group" 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", "Ground truthing", "Interface roughness", "Label-free analysis", "Microrheology", "Moisture content", "Molecular size", "Molecular structure", "Molecular weight", "Particle concentration", "Particle shape", "Particle size", "Phase identification", "Phase quantification", "Pore size distribution", "Powder flow", "Protein aggregation", "Protein mobility", "Protein stability", "Reciprocal space analysis", "Remote sensing", "Residual stress", "Texture analysis", "Thin film metrology", "Viscosity", "Zeta potential"] %}
+        <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;
@@ -50,7 +54,7 @@
 
   &__main {
     @include margin-bottom('m');
-    @include padding(0, 's');
+    @include padding('3xs', 's');
     overflow-y: scroll;
   }
 
@@ -68,18 +72,24 @@
     @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;
+  }
 }

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;