mp-design-system 0.9.17 → 0.9.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mp-design-system",
-  "version": "0.9.17",
+  "version": "0.9.25",
   "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: {
@@ -43,6 +49,12 @@ module.exports = {
       context: {
         classes: 'c-button--small'
       }
+    },
+    {
+      title: 'Loading',
+      context: {
+        classes: 'c-button--loading'
+      }
     }
   ],
   props: [
@@ -63,7 +75,8 @@ module.exports = {
         ['c-button--[colour]', 'petrol, red, blue, white, outline-green, outline-white'],
         ['c-button--small', '', 'Shrinks the button'],
         ['c-button--wide', '', 'Makes the button 100% width'],
-        ['c-button--tight', '', 'Reduces the left/right padding']
+        ['c-button--tight', '', 'Reduces the left/right padding'],
+        ['c-button--loading', '', 'Replace the button text with a loading indicator']
       ]
     }
   ]

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");
@@ -135,4 +144,28 @@
     @include step(-1);
     padding: 0.5em 1em;
   }
-}
+
+  &--loading {
+    color: transparent;
+    transition: color .3s ease;
+
+    &:after {
+      content: '⌛';
+      color: color("white");
+      position: absolute;
+    }
+
+    @media (prefers-reduced-motion:no-preference) {
+      &:after {
+        content: '';
+        animation: spin 1.2s ease infinite;
+        border-radius: 50%;
+        border: 3px solid #3336;
+        border-top-color: color("white");
+        display: block;
+        height: 1em;
+        width: 1em;
+      }
+    }
+  }
+}

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

@@ -731,7 +731,49 @@ module.exports = {
           content: '<p>确定聚合物材料的分子量、粒度和结构</p>'
         }
       }
-    }
+    },
+    {
+      title: 'Event card (with image)',
+      preview: 'content-width',
+      context: {
+        theme: {
+          border: false,
+          size: 'small',
+          layout: 'multi',
+          name: 'event',
+          inlineSpecs: true,
+          corner: true,
+        },
+        image: {
+          src: '/static/img/blog-page-image-1.jpg',
+          alt: 'Product image alt'
+        },
+        header: {      
+          title: 'Discover how on-line particle sizing optimises mining analytics.',
+          date: {
+            date: new Date(),
+            time: '11:00 – 12:00',
+            timezone: 'EST'
+          },
+          meta: [
+            'English'
+          ],
+        },
+        body: {
+          keySpecs: [
+            {
+              title: 'Products',
+              term: 'Morphologi G3-ID'
+            },
+            {
+              title: 'Technologies',
+              term: 'Morphologically-Directed Raman Spectroscopy'
+            }
+          ]
+        },
+        link: '#'
+      }
+    },
   ],
 
   props: [

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

@@ -403,6 +403,38 @@
     flex-wrap: wrap;
     @include gap("s-l");
   }
+
+  &--event.c-card--has-image {
+    @extend .c-card--switch;
+    
+    .c-card__wrapper {
+      @include padding(0);
+
+      .c-card__primary {
+        @include padding("s-m");
+      }
+
+      .c-card__image {
+        img {
+          height: 100%;
+          width: auto;
+          object-fit: cover;
+        }
+      }
+
+      @media (min-width: 55em) {
+        .c-card__primary {
+          width: calc(60% - 18px) !important;
+          width: calc(60% - var(--space-s-m)) !important;
+        }
+
+        .c-card__image {
+          width: calc(40% - 18px) !important;
+          width: calc(40% - var(--space-s-m)) !important;
+        }
+      }
+    }
+  }
 }
 
 // IE11 fix

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

@@ -3,20 +3,24 @@ module.exports = {
     component: {
         name: 'gallery'
     },
-    // docs: true,
+    docs: true,
     context: {
         images: [
             {
-                src: '/static/img/slide-1.jpg',
-                title: 'Mastersizer slide 1'
+                src: '/static/img/slide-4.webp',
+                title: 'Zetasizer slide 1'
             },
             {
-                src: '/static/img/slide-2.jpg',
-                title: 'Mastersizer slide 2'
+                src: '/static/img/slide-5.webp',
+                title: 'Zetasizer slide 2'
             },
             {
-                src: '/static/img/slide-3.jpg',
-                title: 'Mastersizer slide 3'
+                src: '/static/img/slide-6.webp',
+                title: 'Zetasizer slide 3'
+            },
+            {
+                src: '/static/img/slide-7.webp',
+                title: 'Zetasizer slide 4'
             }
         ],
         videos: [
@@ -25,5 +29,27 @@ module.exports = {
                 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

@@ -48,5 +48,4 @@
             {% endfor %}
         {% endif %}
     </div>
-    </div>
 </div>

package/src/_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/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');

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

@@ -1,13 +1,14 @@
 module.exports = {
   title: 'Table',
+  docs: true,
   component: {
     name: 'table'
   },
   context: {
     headers: ['Name', 'Description'],
     rows: [
-      ['Name 1', 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.'],
-      ['Name 2', 'Nullam quis risus eget urna mollis ornare vel eu leo.']
+      ['Aeris', 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.'],
+      ['OMNISEC', 'Nullam quis risus eget urna mollis ornare vel eu leo.']
     ]
   },
   variants: [
@@ -34,8 +35,8 @@ module.exports = {
       context: {
         classes: 'c-table--center',
         rows: [
-          ['Name 1', 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.<br />Vestibulum id ligula porta felis euismod semper.<br />Sed posuere consectetur est at lobortis.'],
-          ['Name 2', 'Nullam quis risus eget urna mollis ornare vel eu leo.']
+          ['Aeris', 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.<br />Vestibulum id ligula porta felis euismod semper.<br />Sed posuere consectetur est at lobortis.'],
+          ['OMNISEC', 'Nullam quis risus eget urna mollis ornare vel eu leo.']
         ]
       }
     },
@@ -51,8 +52,8 @@ module.exports = {
         classes: 'c-table--responsive',
         headers: ['Name', 'Type', 'Description'],
         rows: [
-          ['Name 1', 'Value 1.1', 'Value 1.2'],
-          ['Name 2', 'Value 2.1', 'Value 2.2'],
+          ['Aeris', 'Value 1.1', 'Value 1.2'],
+          ['OMNISEC', 'Value 2.1', 'Value 2.2'],
         ]
       }
     },

package/src/_includes/components/table/table.md

@@ -0,0 +1,16 @@
+## Responsive variant
+
+For the `.c-table--responsive` variant to display correctly, give each `<td>` element a `data-responsive-title` attribute, corresponding to the column headers. E.g. for a two-column table where the column headers are "Name" and "Description", the `<td>`s should be marked up as follows:
+
+```html
+<tbody>
+    <tr>
+        <td data-responsive-title="Name">Aeris</td>
+        <td data-responsive-title="Description">Vivamus sagittis lacus vel</td>
+    </tr>
+    <tr>
+        <td data-responsive-title="Name">OMNISEC</td>
+        <td data-responsive-title="Description">Nullam quis risus eget urna</td>
+    </tr>
+</tbody>
+```

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

@@ -19,6 +19,15 @@
     border-top: 2px solid color('white');
     vertical-align: top;
     color: inherit;
+
+  }
+
+  // Allow setting 'u-bg' background colours on table rows
+  tr[class*='u-bg'] {
+    td,
+    th {
+      background-color: inherit;
+    }
   }
 
   th {

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

@@ -8,8 +8,11 @@ module.exports = {
   context: {
     type: 'anchor',
     tabs: [
-      { id: 'tab-1', label: 'Tab 1', content: '<h2 class="c-h c-h--step-3">Tab 1</h2>', active: true },
-      { id: 'tab-2', label: 'Tab 2', content: '<h2 class="c-h c-h--step-3">Tab 2</h2>' }
+      { id: 'tab-1', label: 'Primary materials', content: '<h2 class="c-h c-h--step-3">Primary materials</h2>', active: true },
+      { id: 'tab-2', label: 'Pharmaceuticals', content: '<h2 class="c-h c-h--step-3">Pharmaceuticals</h2>' },
+      { id: 'tab-3', label: 'Advanced materials', content: '<h2 class="c-h c-h--step-3">Advanced materials</h2>' },
+      { id: 'tab-4', label: 'Academia', content: '<h2 class="c-h c-h--step-3">Academia</h2>' },
+      { id: 'tab-5', label: 'Connected world', content: '<h2 class="c-h c-h--step-3">Connected world</h2>' },
     ]
   },
   props: [
@@ -31,8 +34,24 @@ module.exports = {
     {
       title: 'CSS modifiers',
       table: [
-        ['c-tabs--flex', '', 'Instead of \'block\', display the active tabs as \'flex\'']
+        ['c-tabs--flex', '', 'Instead of \'block\', display the active tabs as \'flex\''],
+        ['c-tabs--persist', '', 'Add a URL fragment (aka hashtag) to the browser URL']
       ]
+    },
+    {
+      title: 'Utilities',
+      table: [
+        ['u-scroll-shadows--h','','When the tab row is too wide for the screen, scroll indicators are displayed']
+      ]
+    }
+  ],
+  variants: [
+    {
+      title: 'Scroll shadows',
+      context: {
+        shadows: true
+      },
+      preview: 'cards-three'
     }
   ]
 }

package/src/_includes/components/tabs/tabs.njk

@@ -1,5 +1,5 @@
 <div class="mp c-tabs {{ 'c-tabs--' + params.type if params.type }}">
-  <nav class="c-tabs__controls">
+  <nav class="c-tabs__controls {{ "u-scroll-shadows--h" if params.shadows }}">
     <ul class="c-tabs__controls-list">
       {% for tab in params.tabs %}
         <li><a class="c-tabs__control {{ 'c-tabs__control--active' if tab.active }}" href="#{{ tab.id }}">{{ tab.label }}</a></li>