mp-design-system 0.9.17 → 0.9.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mp-design-system",
-  "version": "0.9.17",
+  "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/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>

package/src/_includes/components/tabs/tabs.scss

@@ -62,6 +62,10 @@
     margin-bottom: -4px;
     position: relative;
     z-index: 1;
+
+    @media screen and (max-width:55em) {
+      white-space: nowrap;
+    }
     
     &.c-twi {
       display: flex;

package/src/_includes/layout.njk

@@ -35,7 +35,8 @@
         };
       };
       var resizeSidebar = debounce(function() {
-        var headerHeight = document.querySelector('.c-library__header').offsetHeight + 'px';
+        var header = document.querySelector('.c-library__header');
+        var headerHeight = header && header.offsetHeight + 'px';
         document.documentElement.style.setProperty('--headerHeight', headerHeight)
       }, 250); 
     </script>

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

@@ -12,6 +12,7 @@
     {{ libraryList('Typography', '/brand/typography/', page.url) }}
     {{ libraryList('Photography', '/brand/images/', page.url) }}
     {{ libraryList('Illustration', '/brand/illustration/', page.url) }}
+    {{ libraryList('Patterns', '/brand/patterns/', page.url) }}
   </ul>
   {# <h3>Brand identity</h3>
   <ul>

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

@@ -31,6 +31,7 @@
     {{ libraryList('Flow', '/components/flow/', page.url) }}
     {{ libraryList('Iconography', '/components/iconography/', page.url) }}
     {{ libraryList('Approach to CSS', '/components/css/', page.url) }}
+    {{ libraryList('Utilities', '/components/utilities/', page.url) }}
   </ul>
 </div>
 

package/src/assets/js/imports/accordion.js

@@ -9,9 +9,7 @@ function setupAccordions(title) {
 
 function titleClick() {
     return (event) => {
-        console.log(event)
         var item = event.currentTarget.parentElement;
-        console.log(item)
         item.classList.toggle('c-accordion__item--open');
     }
 }

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

@@ -1,5 +1,6 @@
 @import '~comp/accordion/accordion.scss';
 @import '~comp/alert/alert.scss';
+@import '~comp/breadcrumb/breadcrumb.scss';
 @import '~comp/button/button.scss';
 @import '~comp/campaign/campaign.scss';
 @import '~comp/card/card.scss';

package/src/assets/scss/library.scss

@@ -75,7 +75,7 @@
 
   @media only screen and (min-width: 600px) {
     &--components &__body > * {
-      overflow-y: scroll;
+      overflow-y: auto;
       height: calc( 100vh - var(--headerHeight) - 1px );
     }
   }
@@ -253,7 +253,10 @@
       width: 100%;
       left: 0;
       top: 0;
-      transition: all .3s cubic-bezier(0.22, 0.61, 0.36, 1);
+      transition: 
+        padding .3s cubic-bezier(0.22, 0.61, 0.36, 1),
+        background-color .3s cubic-bezier(0.22, 0.61, 0.36, 1);
+      resize: both;
 
       @media only screen and (min-width: 600px) {
         position: absolute;
@@ -579,7 +582,7 @@
       grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
       gap:var(--gutter);
       
-      & :nth-child(odd):nth-last-child(3) {
+      & :nth-child(odd):nth-last-child(5) {
           grid-column: 1/-1;
       }
   }

package/src/assets/scss/objects/syntax-highlighting.scss

@@ -19,6 +19,10 @@ pre[class*="language-"] {
 	-moz-hyphens: none;
 	-ms-hyphens: none;
 	hyphens: none;
+
+	.c-alert & {
+		background: transparent;
+	}
 }
 
 code[class*="language-"]::-moz-selection,