mp-design-system 0.9.16 → 0.9.24

package/package.json

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

package/src/_includes/components/accordion/accordion.md

@@ -1,5 +1,5 @@
 ## Blank HTML template
-```
+```html
 <dl class="c-accordion">
     <div class="c-accordion__item">
         <dt class="c-accordion__title">Title one</dt>

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

@@ -4,14 +4,16 @@ module.exports = {
     name: 'breadcrumb',
   },
   context: {
-    label: 'The Mastersizer Range',
-    link: '#'
+    links: [
+      { link: '/en/services', label: 'Contract Research and Manufacturing...' },
+      { link: '/en/services/pharmaceutical-drug-development', label: 'Pharmaceutical drug development...' },
+      { link: '', label: 'Pre-clinical process research and...' },
+    ]
   },
   props: [
     {
       table: [
-        ['label', 'string'],
-        ['link', 'string'],
+        ['links', 'link[]', '"link" and "label" objects']
       ]
     }
   ]

package/src/_includes/components/breadcrumb/breadcrumb.njk

@@ -1,3 +1,19 @@
-{% from "components/twi/macro.njk" import twi %}
+{% from "components/icon/macro.njk" import icon %}
+
+<nav class="c-breadcrumb {{ params.classes }}" aria-label="Breadcrumb">
+    <ol class="c-breadcrumb__list" role="list">
+      {% for item in params.links %}
+        {% if loop.index < loop.length %}
+          <li class="c-breadcrumb__item" role="listitem">
+              <a href="{{ item.link }}" class="c-breadcrumb__link">{{ item.label }}</a>
+              {{ icon({ id: 'chevron-down' }) }}
+          </li>
+        {% else %}
+          <li class="c-breadcrumb__item" role="listitem">
+              <span class="c-breadcrumb__current" aria-current={{ item.label }}>{{ item.label}}</span>
+          </li>
+        {% endif %}
+      {% endfor %}
+    </ol>
+</nav>
 
-{{ twi({ icon: 'arrow-left', link: params.link, label: params.label, classes: 'u-link' }) }}

package/src/_includes/components/breadcrumb/breadcrumb.scss

@@ -0,0 +1,69 @@
+.c-breadcrumb {
+  &__list {
+    @include padding-bottom("s-m");
+    display: flex;
+    overflow-x: auto;
+  }
+
+  &__item {
+    font-size: var(--step--2);
+    display: inline-flex;
+    align-items: center;
+    white-space: nowrap;
+
+    .c-icon {
+      @include margin-right("3xs");
+      @include margin-left("3xs");
+      color: color('grey', 'step-1');
+      transform: rotate(270deg);
+    }
+  }
+
+  &__link {
+    color: color('utility-blue', 'step-1');
+    text-decoration: underline;
+  
+    &:hover {
+      color: color('utility-blue', 'step-1');
+      text-decoration: none;
+    }
+  }
+
+  &__current {
+    color: color('grey', 'step-1');
+  }
+
+  // color: color('utility-blue');
+
+  // &__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;
+  //     }
+  //   }
+  // }
+
+  // &__list {
+  //   @include padding-bottom('m-l');
+  //   @include margin-bottom('m-l');
+  //   border-bottom: 1px solid color('petrol', 'step-2');
+  //   white-space: nowrap;
+  //   overflow-x: auto;
+  //   display: flex;
+
+  //   & > * + * {
+  //     @include margin-left('m-l');
+  //   }
+  // }
+}

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

@@ -26,6 +26,12 @@ module.exports = {
         colour: 'white'
       }
     },
+    {
+      title: 'Utility blue',
+      context: {
+        colour: 'utility-blue'
+      }
+    },
     {
       title: 'Outline green',
       context: {

package/src/_includes/components/button/button.scss

@@ -106,6 +106,15 @@
     }
   }
 
+  &--utility-blue {
+    background-color: color("utility-blue");
+
+    &:focus,
+    &:hover {
+      background-color: color("utility-blue", "step--1");
+    }
+  }
+
   &--outline-white {
     background: transparent;
     color: color("white");

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

@@ -3,7 +3,6 @@ module.exports = {
   component: {
     name: 'campaign',
   },
-  docs: true,
   context: {
     title: 'OmniTrust: Analytics you can trust.',
     content: '<p>At last, a compliance breakthrough: Omnitrust joins up all your instruments and platforms, authorizes users, keeps all your data audit-ready – and is completely configurable to your workflow.</p>',
@@ -59,7 +58,10 @@ module.exports = {
     {
       title: 'CSS modifiers',
       table: [
-        ['c-campaign--switch', '', 'Switches the image from left to right']
+        ['c-campaign--switch', '', 'Switches the image from left to right'],
+        ['c-campaign--petrol', '', 'Petrol colour variant'],
+        ['c-campaign--blue', '', 'Blue colour variant'],
+        ['c-campaign--orange', '', 'Orange colour variant']
       ]
     }
   ]

package/src/_includes/components/component/component.njk

@@ -46,7 +46,7 @@
     <thead>
       <tr>
         <th>Name</th>
-        <th>Type</th>
+        {% if propRows[0][1] %}<th>Type</th>{% endif %}
         <th>Description</th>
       </tr>
     </thead>
@@ -54,7 +54,7 @@
       {% for row in propRows %}
         <tr>
           <th>{{ row[0] }}</th>
-          <td>{{ row[1] }}</td>
+          {% if row[1] %}<td>{{ row[1] }}</td>{% endif %}
           <td>{{ row[2] | safe }}</td>
         </tr>
       {% endfor %}

package/src/_includes/components/features-table/features-table.config.js

@@ -1,4 +1,122 @@
 const products = [
+  {
+    title: 'Mastersizer 3000',
+    link: '/prototype/product/',
+    image: {
+      src: '/static/img/range-product-1.jpg',
+      alt: 'Mastersizer 3000'
+    },
+    description: 'Delivering the data you need for outcomes you can trust',
+    range: '0.01µm - 3500µm',
+    checklist: [
+      {
+        title: 'Automated wet',
+        value: true,
+      },
+      {
+        title: 'Automated dry powder',
+        value: true,
+      },
+      {
+        title: 'Manual wet',
+        value: true,
+      },
+      {
+        title: 'Manual dry powder',
+        value: false,
+      },
+      {
+        title: '21 CFR Part 11 support',
+        value: true,
+      },
+      {
+        title: 'IQ/OQ validation',
+        value: true,
+      },
+      {
+        title: 'Data quality assessment',
+        value: true,
+      }
+    ]
+  },
+  {
+    title: 'Mastersizer 3000E',
+    link: '/prototype/product/',
+    image: {
+      src: '/static/img/range-product-2.jpg',
+      alt: 'Mastersizer 3000E'
+    },
+    description: 'Entry level particle size analyzer',
+    checklist: [
+      {
+        title: 'Automated wet',
+        value: true,
+      },
+      {
+        title: 'Automated dry powder',
+        value: true,
+      },
+      {
+        title: 'Manual wet',
+        value: true,
+      },
+      {
+        title: 'Manual dry powder',
+        value: false,
+      },
+      {
+        title: '21 CFR Part 11 support',
+        value: true,
+      },
+      {
+        title: 'IQ/OQ validation',
+        value: true,
+      },
+      {
+        title: 'Data quality assessment',
+        value: true,
+      }
+    ]
+  },
+  {
+    title: 'Mastersizer 3000E',
+    link: '/prototype/product/',
+    image: {
+      src: '/static/img/range-product-2.jpg',
+      alt: 'Mastersizer 3000E'
+    },
+    description: 'Entry level particle size analyzer',
+    checklist: [
+      {
+        title: 'Automated wet',
+        value: true,
+      },
+      {
+        title: 'Automated dry powder',
+        value: true,
+      },
+      {
+        title: 'Manual wet',
+        value: true,
+      },
+      {
+        title: 'Manual dry powder',
+        value: false,
+      },
+      {
+        title: '21 CFR Part 11 support',
+        value: true,
+      },
+      {
+        title: 'IQ/OQ validation',
+        value: true,
+      },
+      {
+        title: 'Data quality assessment',
+        value: true,
+      }
+    ]
+  }
 ]
 
 module.exports = {
@@ -8,6 +126,9 @@ module.exports = {
   },
   context: {
     sections: [
+      {
+        title: 'Compatible sample dispersions',
+      }
     ],
     products: [
       ...products

package/src/_includes/components/features-table/features-table.njk

@@ -143,7 +143,7 @@
             <tfoot>
               <tr>
                 <td>
-                  <a href="/en/products/product-range/mastersizer-range/mastersizer-3000" class="mp c-button c-button--inline">Request a quote</a>
+                  <a href="/en/products/product-range/mastersizer-range/mastersizer-3000e" class="mp c-button c-button--inline">Request a quote</a>
                 </td>
               </tr>
             </tfoot>
@@ -197,7 +197,7 @@
             <tfoot>
               <tr>
                 <td>
-                  <a href="/en/products/product-range/mastersizer-range/mastersizer-3000" class="mp c-button c-button--inline">Request a quote</a>
+                  <a href="/en/products/product-range/mastersizer-range/mastersizer-3000e" class="mp c-button c-button--inline">Request a quote</a>
                 </td>
               </tr>
             </tfoot>
@@ -348,11 +348,15 @@
       </tbody>
       <tfoot>
         <tr>
-          {% for product in params.products %}
-            <td>
-              {{ button({ label: 'Request a quote', type: 'span', inline: true }) }}
-            </td>
-          {% endfor %}
+          <td>
+            <a href="/en/products/product-range/mastersizer-range/mastersizer-3000" class="mp c-button c-button--inline">Request a quote</a>
+          </td>
+          <td>
+            <a href="/en/products/product-range/mastersizer-range/mastersizer-3000e" class="mp c-button c-button--inline">Request a quote</a>
+          </td>
+          <td>
+            <a href="/en/products/product-range/mastersizer-range/mastersizer-3000e" class="mp c-button c-button--inline">Request a quote</a>
+          </td>
         </tr>
       </tfoot>
     </table>

package/src/_includes/components/features-table/features-table.scss

@@ -39,20 +39,15 @@
   }
 
   &__checklist-title th {
-    color: inherit;
+    color: color('grey') !important;
     background: transparent !important;
     padding-bottom: 0 !important;
   }
 
-  tr.c-features__checklist:nth-last-child {
-    background: red;
-    @include padding-bottom('m');
-  }
-
   &__checklist {
     td {
-      @include padding-top('3xs');
-      padding-bottom: 0;
+      padding-top: var(--space-3xs) !important;
+      padding-bottom: 0 !important;
       vertical-align: middle;
       line-height: 20px;
 
@@ -67,7 +62,7 @@
 
     &--last {
       td {
-        @include padding-bottom('m');
+        padding-bottom: var(--space-s) !important;
       }
     }
   }

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

@@ -0,0 +1,55 @@
+module.exports = {
+    title: 'Gallery',
+    component: {
+        name: 'gallery'
+    },
+    docs: true,
+    context: {
+        images: [
+            {
+                src: '/static/img/slide-4.webp',
+                title: 'Zetasizer slide 1'
+            },
+            {
+                src: '/static/img/slide-5.webp',
+                title: 'Zetasizer slide 2'
+            },
+            {
+                src: '/static/img/slide-6.webp',
+                title: 'Zetasizer slide 3'
+            },
+            {
+                src: '/static/img/slide-7.webp',
+                title: 'Zetasizer slide 4'
+            }
+        ],
+        videos: [
+            {
+                title: 'FOCUS ON THE AIR YOU BREATHE - Elemental analysis of air filters according to US EPA Method io-3.3',
+                id: 'Q4H7EdHFghs'
+            }
+        ]
+    },
+    props: [
+        {
+            table: [
+                ['images', 'image[]', 'An array of images'],
+                ['videos','video[]','An array of videos']
+            ]
+        },
+        {
+            title: 'image',
+            table: [
+                ['src','string'],
+                ['title','string']
+            ]
+        },
+        {
+            title: 'video',
+            table: [
+                ['title','string'],
+                ['id','string','Youtube ID']
+            ]
+        }
+    ]
+}

package/src/_includes/components/gallery/gallery.md

@@ -0,0 +1 @@
+Gallery images are displayed at 16:9 ratio, regardless of the image's true size. This prevents the component from unexpectedly changing size when switching between images.

package/src/_includes/components/gallery/gallery.njk

@@ -0,0 +1,51 @@
+{% from "components/embed/macro.njk" import youtube %}
+
+{% set count = 1 %}
+
+<div class="u-flow c-gallery">
+    <div class="c-gallery__main">
+        {% if params.images | length %}
+            {% for image in params.images %}
+                {% set active = (count == 1) %}
+                <figure class="c-gallery__slide {{"active" if active}}" data-slide="{{count}}">
+                    <img src="{{image.src}}" alt="{{image.title}}" >
+                </figure>
+                {% set count = count+1 %}
+            {% endfor %}
+        {% endif %}
+        {% if params.videos | length %}
+            {% for video in params.videos %}
+                <div class="c-gallery__slide c-gallery__video" data-slide="{{count}}">
+                    {{ youtube({
+                        title: video.title,
+                        id: video.id
+                    }) }}
+                </div>
+                {% set count = count+1 %}
+            {% endfor %}
+        {% endif %}
+    </div>
+
+{% set count = 1 %}
+
+    <div class="c-gallery__thumbnails">
+        {% if params.images | length %}
+            {% for image in params.images %}
+                {% set active = (count == 1) %}
+                <figure class="c-gallery__slide {{"active" if active}}" data-slide="{{count}}">
+                    <img src="{{image.src}}" alt="{{image.title}}" loading="lazy" width="102">
+                </figure>
+                {% set count = count+1 %}
+            {% endfor %}
+        {% endif %}
+        {% if params.videos | length %}
+            {% for video in params.videos %}
+                {% set active = (count == 1) %}
+                <figure class="c-gallery__slide {{"active" if active}}" data-slide="{{count}}">
+                    <img src="https://img.youtube.com/vi/{{video.id}}/default.jpg" alt="{{video.title}}" loading="lazy" width="102">
+                </figure>
+                {% set count = count+1 %}
+            {% endfor %}
+        {% endif %}
+    </div>
+</div>

package/src/{assets/scss/components → _includes/components/gallery}/gallery.scss

@@ -1,4 +1,6 @@
 .c-gallery {
+  max-height: 95vh;
+
   img {
     cursor: pointer;
   }
@@ -10,13 +12,11 @@
       width: 100%;
 
       img {
+        aspect-ratio: 16 / 9;
         display: block;
         margin: 0 auto;
-
-        @supports (object-fit:contain) {
-          max-height: 500px;
-          object-fit: contain;
-        }
+        max-height: calc(95vh - 90px);
+        object-fit: contain;
       }
     
       &:not(.active) {
@@ -35,10 +35,9 @@
     
     & > * {
       background: color('grey', 'step-3');
-      @include space('min-height', 'l');
-      @include space('max-height', '2xl');
-      @include space('min-width', 'l');
       max-width: 10.75%;
+      max-width: max(var(--space-xl), 10.75%);
+      aspect-ratio: 16 / 9;
 
       img {
         height: 100%;

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

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

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

@@ -32,7 +32,7 @@
   &:checked + input[type=hidden] + label:before {
     background: color('utility-blue');
   }
-
+  
   &:checked + label:after,
   &:checked + input[type=hidden] + label:after {
     transform: translateX(6.5px) translateY(-1.5px) translateY(-50%) rotate(45deg);
@@ -47,6 +47,21 @@
   }
 }
 
+.c-radio,
+.c-checkbox {
+  & + label:hover:before,
+  & + input[type=hidden] + label:hover:before {
+    background-color: color('utility-blue','step-3');
+  }
+}
+
+.c-checkbox {  
+  &:checked + label:hover:before,
+  &:checked + input[type=hidden] + label:hover:before {
+    background: color('utility-blue', 'step--1');
+  }
+}
+
 .c-radio {
   & + label:before,
   & + input[type=hidden] + label:before {
@@ -57,4 +72,9 @@
   &:checked + input[type=hidden] + label:before {
     box-shadow: inset 0 0 0 5px color('utility-blue');
   }
+  
+  &:checked + label:hover:before,
+  &:checked + input[type=hidden] + label:hover:before {
+    box-shadow: inset 0 0 0 5px color('utility-blue', 'step--1');
+  }
 }

package/src/_includes/components/post-meta/post-meta.njk

@@ -1,13 +1,13 @@
 {%- from "components/series/macro.njk" import series -%}
 
-<div class="mp c-post-meta">
+<div class="mp c-post-meta {{ "u-link-inside" if params.author }}">
   {% if params.series %}
     {{ series({
       links: params.series
     }) }}
   {% endif %}
   {% if params.author %}
-    <p>By <a class="u-link u-link--underline" href="{{ params.author.link }}">{{ params.author.label | safe }}</a>, Wednesday 6 January 2021</p>
+    <p>By <a href="{{ params.author.link }}">{{ params.author.label | safe }}</a>, Wednesday 6 January 2021</p>
   {% else %}
     {{ params.content | safe }}
   {% endif %}

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

@@ -37,6 +37,18 @@ module.exports = {
         classes: 'c-slat c-slat--grey c-slat--dots'
       }
     },
+    {
+      title: 'Crystal',
+      context: {
+        classes: 'c-slat c-slat--grey c-slat--crystal'
+      }
+    },
+    {
+      title: 'Arc',
+      context: {
+        classes: 'c-slat c-slat--grey c-slat--arc'
+      }
+    },
     {
       title: 'Large padding',
       context: {

package/src/_includes/components/slat/slat.scss

@@ -27,6 +27,20 @@
     background-position: left top;
     background-size: auto 100%;
   }
+  
+  &--crystal {
+    background-image: url('../svg/crystal.svg');
+    background-repeat: no-repeat;
+    background-position: right bottom;
+    background-size: auto 100%;
+  }
+  
+  &--arc {
+    background-image: url('../svg/arc.svg');
+    background-repeat: no-repeat;
+    background-position: right bottom;
+    background-size: auto 100%;
+  }
 
   &--padded {
     @include padding-bottom('l-2xl');