mp-design-system 1.2.35 → 1.2.36

package/package.json

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

package/src/_includes/components/card/product-card.scss

@@ -44,7 +44,7 @@
       height: 100%;
       width: 100%;
       aspect-ratio: 16/9;
-      object-fit: cover;
+      object-fit: contain;
     }
   }
 }

package/src/_includes/components/component/preview-sidebar.njk

@@ -0,0 +1,5 @@
+<div class="o-grid o-grid--layout o-grid--3/8 o-grid--push u-pad-m">
+  <aside>
+    {{ comp | safe }}
+  </aside>
+</div>

package/src/_includes/components/eyebrow/eyebrow.config.js

@@ -50,6 +50,21 @@ module.exports = {
                 colour: 'utility-blue'
             }
         },
+        {
+            title: 'Utility blue step 3',
+            context: {
+                text: 'Product range',
+                colour: 'utility-blue-step-3'
+            }
+        },
+        {
+            title: 'Utility blue step 3 with icon',
+            context: {
+                text: 'Product range',
+                colour: 'utility-blue-step-3',
+                icon: 'cross'
+            }
+        },
         {
             title: 'Utility orange',
             context: {

package/src/_includes/components/eyebrow/eyebrow.njk

@@ -1,7 +1,24 @@
+{%- from "components/icon/macro.njk" import icon -%}
+
 {%- set classNames = "mp c-eyebrow" -%}
 
 {%- if params.colour -%}
   {% set classNames = classNames + " c-eyebrow--" + params.colour %}
 {% endif -%}
 
-<span class="{{ classNames }}">{{ params.text }}</span>
+{%- if params.icon -%}
+  <button class="{{ classNames }}">
+{%- else -%}
+  <span class="{{ classNames }}">
+{% endif -%}
+  {%- if params.text -%}
+    {{ params.text }}
+  {% endif -%}
+  {%- if params.icon -%}
+    {{ icon({ id: params.icon }) }}
+  {% endif -%}
+{%- if params.icon -%}
+  </button>
+{%- else -%}
+  </span>
+{% endif -%}

package/src/_includes/components/eyebrow/eyebrow.scss

@@ -2,38 +2,63 @@
   background-color: color('green');
   color: color('white');  
   @include padding('3xs', 'xs');
+  border: 1px solid color('green');
   border-radius: 2em;
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
   @include step(-1);
   letter-spacing: -.01em;
 
   &--blue {
     background-color: color('blue');
+    border-color: color('blue');
   }
 
   &--blue-step-2 {
     background-color: color('blue', 'step-2');
     color: color('petrol');
+    border-color: color('blue', 'step-2');
   }
 
   &--grey {
     background-color: color('grey');
+    border-color: color('grey');
   }
 
   &--petrol {
     background-color: color('petrol');
+    border-color: color('petrol');
   }
 
   &--red {
     background-color: color('red');
+    border-color: color('red');
   }
 
   &--utility-blue {
     background-color: color('utility-blue');
+    border-color: color('utility-blue');
+  }
+
+  &--utility-blue-step-3 {
+    background-color: color('utility-blue', 'step-3');
+    color: color('utility-blue');
+    border-color: color('utility-blue', 'step-2');
   }
 
   &--utility-orange {
     background-color: color('utility-orange', 'step-1');
     color: color('grey');
+    border-color: color('utility-orange', 'step-1');
+  }
+}
+
+button.c-eyebrow {
+  &--utility-blue-step-3:where(:hover, :focus) {
+    border-color: color('utility-blue', 'step-1');
+  }
+
+  svg {
+    @include margin-left('2xs');
   }
 }

package/src/_includes/components/facet/facet.config.js

@@ -0,0 +1,110 @@
+module.exports = {
+  title: 'Facet',
+  component: {
+    name: 'facet'
+  },
+  figma: '',
+  preview: 'sidebar',
+  context: {
+    facets: [
+      {
+        id: 'products',
+        heading: 'Products',
+        options: [
+          {
+            id: 'mastersizer-3000-lab',
+            value: 'Mastersizer 3000+ Lab',
+            label: 'Mastersizer 3000+ Lab (20)',
+          },
+          {
+            id: 'mastersizer-3000-pro',
+            value: 'Mastersizer 3000+ Pro',
+            label: 'Mastersizer 3000+ Pro (5)',
+          },
+          {
+            id: 'mastersizer-3000-ultra',
+            value: 'Mastersizer 3000+ Ultra',
+            label: 'Mastersizer 3000+ Ultra (1)',
+          }
+        ]
+      }
+    ]
+  },
+  variants: [
+    {
+      title: 'Multiple',
+      context: {
+        facets: [
+          {
+            id: 'products',
+            heading: 'Products',
+            options: [
+              {
+                id: 'mastersizer-3000-lab',
+                value: 'Mastersizer 3000+ Lab',
+                label: 'Mastersizer 3000+ Lab (20)',
+              },
+              {
+                id: 'mastersizer-3000-pro',
+                value: 'Mastersizer 3000+ Pro',
+                label: 'Mastersizer 3000+ Pro (5)',
+              },
+              {
+                id: 'mastersizer-3000-ultra',
+                value: 'Mastersizer 3000+ Ultra',
+                label: 'Mastersizer 3000+ Ultra (1)',
+              }
+            ]
+          },
+          {
+            id: 'technologies',
+            heading: 'Technologies',
+            options: [
+              {
+                id: 'borate-fusion',
+                value: 'Borate fusion',
+                label: 'Borate fusion (16)',
+              },
+              {
+                id: 'differential-scanning-calorimetry',
+                value: 'Differential Scanning Calorimetry (DSC)',
+                label: 'Differential Scanning Calorimetry (DSC) (18)',
+              },
+              {
+                id: 'dynamic-light-scattering',
+                value: 'Dynamic Light Scattering',
+                label: 'Dynamic Light Scattering (72)',
+              }
+            ]
+          },
+          {
+            id: 'measurementTypes',
+            heading: 'Measurement types',
+            options: [            
+              {
+                id: 'structure-imaging',
+                value: '3D structure / imaging',
+                label: '3D structure / imaging (2)',
+              },
+              {
+                id: 'binding-affinity',
+                value: 'Binding affinity',
+                label: 'Binding affinity (10)',
+              },
+              {
+                id: 'binding-kinetics',
+                value: 'Binding kinetics',
+                label: 'Binding kinetics (11)',
+              }
+            ]
+          }
+        ]
+      }
+    }
+  ],
+  props: [
+    {
+      table: []
+    }
+  ]
+}

package/src/_includes/components/facet/facet.njk

@@ -0,0 +1,25 @@
+{% from "components/icon/macro.njk" import icon %}
+{% from "components/input/macro.njk" import checkbox %}
+
+<ul class="u-remove-bullets">
+  {% for facet in params.facets %}
+    <li class="c-facet">
+      <button class="c-facet__toggle" aria-expanded="false" aria-controls="{{ facet.id }}">
+        {{ facet.heading }}
+        {{ icon({ id: 'chevron-down' }) }}
+      </button>
+      <ul id="{{ facet.id }}" class="c-facet__list">
+        {% for option in facet.options %}
+          <li>
+            {{ checkbox({
+                name: facet.id,
+                id: option.id,
+                value: option.value,
+                label: option.label
+            }) }}
+          </li>
+        {% endfor %}
+      </ul>
+    </li>
+  {% endfor %}
+</ul>

package/src/_includes/components/facet/facet.scss

@@ -0,0 +1,47 @@
+.c-facet {
+  border-top: 1px solid color('petrol', 'step-2');
+
+  &:last-child {
+    border-bottom: 1px solid color('petrol', 'step-2');
+  }
+
+  &__toggle {
+    width: 100%;
+    @include padding('s', 0);
+    display: inline-flex;
+    justify-content: space-between;
+    align-items: center;
+    @include step(-1);
+    font-weight: bold;
+    text-transform: uppercase;
+
+    svg {
+      color: color('utility-blue');
+      line-height: 1;
+      font-size: 1rem;
+    }
+  }
+
+  &__list {
+    @extend .u-remove-bullets, .u-flow--s;
+    @include padding('s');
+    display: none;
+  }
+
+  &--open {
+    .c-facet {
+      &__toggle {
+        color: color('utility-blue');
+        border-bottom: 1px solid color('petrol', 'step-2');
+
+        svg {
+          transform: rotate(180deg);
+        }
+      }
+
+      &__list {
+        display: block;
+      }
+    }
+  }
+}

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

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

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

@@ -1,9 +1,17 @@
 {% from "components/component/component.njk" import c %}
 
+{% 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 %}
@@ -12,14 +20,6 @@
   {{ c({ name: 'textarea', folder: 'input' }, params) }}
 {% endmacro %}
 
-{% macro checkbox(params, type = 'checkbox') %}
-  {{ c({ name: 'checkbox', folder: 'input' }, params) }}
-{% endmacro %}
-
-{% macro radio(params) %}
-  {{ c({ name: 'radio', folder: 'input' }, params) }}
-{% endmacro %}
-
 {% macro toggle(params, type='toggle') %}
   {{ c({ name: 'toggle', folder: 'input' }, params) }}
 {% endmacro %}

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

@@ -10,12 +10,14 @@
         <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'
-        }) }}
+        <li>
+          {{ button({
+            link: params.button.link,
+            label: params.button.label,
+            colour: 'green',
+            classes: 'c-button--small'
+          }) }}
+        </li>
       {% endif %}
     </ul>
   </div>

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

@@ -48,7 +48,7 @@
     }
 
     li {
-      a {
+      a:not(.c-button) {
         @extend .u-link;
       }
     }

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

@@ -100,11 +100,31 @@
         name: 'MP Rubine',
         key: 'Red',
         steps: [
+            {
+                name: '-1',    
+                hex: '9b0042',
+                cmyk: ''
+            },
             {
                 name: 0,    
                 hex: 'ce0058',
                 cmyk: '14.100.50.2',
                 pantone: 'PAN Rubine Red'
+            },
+            {
+                name: 1,    
+                hex: 'dc4787',
+                cmyk: ''
+            },
+            {
+                name: 2,    
+                hex: 'f3c2d7',
+                cmyk: ''
+            },
+            {
+                name: 3,    
+                hex: 'fbebf2',
+                cmyk: ''
             }
         ]
     },
@@ -114,7 +134,7 @@
         steps: [
             
             {
-                name: "-1",
+                name: '-1',
                 hex: '1c1c1c',
                 cmyk: '00.00.00.95'
             },
@@ -177,10 +197,30 @@
         name: 'MP Utility Blue',
         key: 'Utility-Blue',
         steps: [
+            {
+                name: '-1',    
+                hex: '004e7e',
+                cmyk: ''
+            },
             {
                 name: 0,    
                 hex: '006daf',
                 cmyk: '86.48.3.5'
+            },
+            {
+                name: 1,    
+                hex: '4796c5',
+                cmyk: ''
+            },
+            {
+                name: 2,    
+                hex: 'c2dcec',
+                cmyk: ''
+            },
+            {
+                name: 3,    
+                hex: 'ebf3f9',
+                cmyk: ''
             }
         ]
     }

package/src/assets/js/app.js

@@ -2,6 +2,7 @@ import Accordion from './imports/accordion';
 import Carousel from './imports/carousel';
 import ClearForm from './imports/clear-form';
 import Comparison from './imports/comparison';
+import Facet from './imports/facet';
 import Gallery from './imports/gallery';
 import HeroPattern from './imports/hero-pattern';
 import HeroVideo from './imports/hero-video';
@@ -24,6 +25,7 @@ import Tabs from './imports/tabs';
   Carousel();
   ClearForm();
   Comparison();
+  Facet();
   Gallery();
   HeroPattern();
   HeroVideo();

package/src/assets/js/imports/facet.js

@@ -0,0 +1,23 @@
+function Facet() {
+    const facetAccordions = Array.from(document.querySelectorAll('.c-facet__toggle'));
+    facetAccordions.forEach(setupFacetAccordions);
+}
+
+function setupFacetAccordions(toggle) {
+    toggle.addEventListener('click', titleClick())
+}
+
+function titleClick() {
+    return (event) => {
+        event.preventDefault();
+        
+        var toggle = event.currentTarget;
+        var facet = toggle.parentElement;
+
+        facet.classList.toggle('c-facet--open');
+        const expanded = facet.classList.contains('c-facet--open') ? 'true' : 'false';
+        toggle.setAttribute('aria-expanded', expanded);
+    }
+}
+
+export default Facet;

package/src/assets/scss/components/index.scss

@@ -13,6 +13,7 @@
 @import '~comp/comparison-table/comparison-table.scss';
 @import '~comp/embed/embed.scss';
 @import '~comp/eyebrow/eyebrow.scss';
+@import '~comp/facet/facet.scss';
 @import '~comp/featured-article-card/featured-article-card.scss';
 @import '~comp/features-table/features-table.scss';
 @import '~comp/filter-search/filter-search.scss';

package/src/components/colour.njk

@@ -15,7 +15,7 @@ A limited set of color tints and shades are available for element backgrounds, b
 
 <div class="u-flow--l">
   {{ alert({
-    content: "<p>This page explains how to use color on the web. For print or other uses, see the <a href='/brand/visual/colors'>Brand ➝ colors</a> page.</p>",
+    content: "<p>This page explains how to use color on the web. For print or other uses, see the <a href='/brand/colors'>Brand ➝ colors</a> page.</p>",
     type: "info"
   })}}