mp-design-system 0.6.2 → 0.7.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mp-design-system",
-  "version": "0.6.2",
+  "version": "0.7.3",
   "description": "",
   "main": "app.js",
   "scripts": {

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

@@ -24,19 +24,19 @@ module.exports = {
     {
       title: 'Petrol',
       context: {
-        classes: 'c-campaign__petrol'
+        classes: 'c-campaign--petrol'
       }
     },
     {
       title: 'Blue',
       context: {
-        classes: 'c-campaign__blue'
+        classes: 'c-campaign--blue'
       }
     },
     {
       title: 'Orange',
       context: {
-        classes: 'c-campaign__orange'
+        classes: 'c-campaign--orange'
       }
     }
   ],

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

@@ -170,20 +170,6 @@
     }
   }
 
-  // &--fixed-aspect figure {
-  //   height: 0;
-  //   padding-bottom: 62.5%;
-  //   aspect-ratio: 16/10;
-  //   position: relative;
-  // }
-  // &--image-margin figure {
-  //   @include margin("s-m", "s-m", 0, "s-m");
-  // }
-
-  &--layout-single &__figure {
-    @extend .u-16\/9;
-  }
-
   &__primary {
     @include flow("s");
   }
@@ -418,3 +404,7 @@
     @include gap("s-l");
   }
 }
+
+// IE11 fix
+// This forces IE11 to use display:block instead of flex for single-column cards
+_:-ms-fullscreen, :root .c-card, :root .c-card--layout-single .c-card__wrapper { display:block; }

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

@@ -52,6 +52,11 @@
     }
   }
 
+  thead img {
+    @include space('max-height', '3xl');
+    object-fit: contain;
+  }
+
 }
 
 @media only screen and (min-width: 640px) {

package/src/_includes/components/industry-card/industry-card.njk

@@ -1,7 +1,7 @@
 <article class="mp c-industry-card">
   <a class="c-industry-card__link u-flow--xs" href="{{ params.link }}">
-    <figure class="c-industry-card__image u-16/9">
-      <img class="u-fill" src="{{ params.image.src }}" alt="{{ params.image.alt or params.title }}" />
+    <figure class="c-industry-card__image">
+      <img class="u-2/1" src="{{ params.image.src }}" alt="{{ params.image.alt or params.title }}" />
     </figure>
     <h3 class="c-h c-h--reset">{{ params.title }}</h3>
   </a>

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

@@ -5,11 +5,11 @@
     display: block;
   }
 
-  &__image {
-    @extend .u-16\/9
-  }
-
   &:hover .c-h--reset {
     text-decoration: underline;
   }
+
+  img {
+    width: 100%;
+  }
 }

package/src/_includes/components/meta-box/meta-box.scss

@@ -3,4 +3,8 @@
   @include padding('s-m');
   @include step(-1);
   @include flow('s');
-}
+
+  .u-wrap--fields {
+    @include padding-right(0)
+  }
+}

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

@@ -77,6 +77,10 @@
       color: inherit;
       font-weight: weight();
     }
+
+    tbody td:nth-child(n+2) {
+      text-align: center;
+    }
   }
 
   @media (min-width: 30em) {

package/src/_includes/components/usp/usp.scss

@@ -2,9 +2,7 @@
   @include padding('s-m');
   border: 1px solid;
   border-image-slice: 1;
-  border-image-source: linear-gradient( to right, 
-    rgba(color('blue'), 0.5), 
-    rgba(color('green'), 0.5));
+  border-image-source: linear-gradient(to right, rgba(color('blue'),0.5), rgba(color('green'),0.5));
   position: relative;
 
   &__title {
@@ -12,10 +10,7 @@
     color: color('petrol');
 
     @supports(-webkit-text-fill-color:transparent) {
-      background-image: -webkit-gradient(linear,
-        0% 0%,100% 100%,
-        from(color('petrol')),
-        to(color('blue')));
+      background-image: linear-gradient(to right, color('petrol'), color('blue') );
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       display: inline-block;

package/src/_includes/includes/related-events.njk

@@ -3,7 +3,7 @@
 <aside class="c-slat c-slat--grey c-slat--padded">
   <div class="u-wrap u-flow">
     <h3 class="c-h c-h--upper">Related events</h3>
-    <div class="o-grid o-grid--of-three">
+    <div class="o-grid o-grid--of-three o-grid--swipeable">
       {{ card({
           theme: {
             layout: 'single',

package/src/_includes/includes/resources.njk

@@ -3,7 +3,7 @@
 <aside class="mp c-slat c-slat--grey c-slat--padded">
   <div class="u-wrap u-flow--xl">
     <h2 class="c-h c-h--step-3">Related resources</h2>
-    <div class="o-grid o-grid--of-three">
+    <div class="o-grid o-grid--of-three o-grid--swipeable">
       {{ card({
         theme: {
           layout: 'single',

package/src/_includes/layout.njk

@@ -14,10 +14,31 @@
 		<meta property="og:image:alt" content="{{ config.name }}" />
 		<meta name="twitter:image" content="{{ config.openGraphImage }}" />
     <link rel="preconnect" href="https://fonts.gstatic.com">
-    <script>if(document.documentElement){
-      document.documentElement.classList.add('has-js');
-      document.documentElement.classList.remove('no-js');
-    }</script>
+    <script>
+      if(document.documentElement){
+        document.documentElement.classList.add('has-js');
+        document.documentElement.classList.remove('no-js');
+      }
+      // Calculate the height of the sidebar so it doesn't cause double scrollbars
+      function debounce(func, wait, immediate) {
+        var timeout;
+        return function() {
+          var context = this, args = arguments;
+          var later = function() {
+            timeout = null;
+            if (!immediate) func.apply(context, args);
+          };
+          var callNow = immediate && !timeout;
+          clearTimeout(timeout);
+          timeout = setTimeout(later, wait);
+          if (callNow) func.apply(context, args);
+        };
+      };
+      var resizeSidebar = debounce(function() {
+        var headerHeight = document.querySelector('.c-library__header').offsetHeight + 'px';
+        document.documentElement.style.setProperty('--headerHeight', headerHeight)
+      }, 250); 
+    </script>
     <link rel="icon" type="image/png" sizes="32x32" href="/static/img/favicon-32x32.png">
     <link rel="stylesheet" href="/build/scss/main.css" />
     <script>window.MSInputMethodContext && document.documentMode && document.write('<script src="https://cdn.jsdelivr.net/gh/nuxodin/ie11CustomProperties@4.1.0/ie11CustomProperties.min.js"><\/script>');</script>
@@ -30,12 +51,15 @@
     <script src="/build/js/app.js"></script>
     <script>
       (function() {
+        // Prevent empty links from jumping to the top of page when clicked
         var links = document.querySelectorAll('a[href=""],a[href="#"]');
         for(var i = 0; links.length > i; i++) {
           links[i].addEventListener('click', function(event) {
             event.preventDefault();
           })
         }
+        window.addEventListener('resize', resizeSidebar);
+        resizeSidebar();
       })();
     </script>
   </body>

package/src/assets/js/app.js

@@ -5,6 +5,7 @@ import Gallery from './imports/gallery';
 import HeroPattern from './imports/hero-pattern';
 import ResponsiveTable from './imports/responsive-table';
 import ScrollSpy from './imports/scroll-spy';
+import ScrollbarWidth from './imports/scrollbar-width';
 import Tabs from './imports/tabs';
 
 (() => {
@@ -23,4 +24,5 @@ import Tabs from './imports/tabs';
   Tabs();
   ScrollSpy();
   ResponsiveTable();
+  ScrollbarWidth();
 })();

package/src/assets/js/imports/scrollbar-width.js

@@ -0,0 +1,15 @@
+import { debounce } from './utilities';
+
+function ScrollbarWidth() {
+    setScrollbarWidth();
+    window.addEventListener('resize', debounce(setScrollbarWidth, 250));
+}
+
+function setScrollbarWidth() {
+    document.documentElement.style.setProperty(
+        '--scrollbarWidth', 
+        window.innerWidth - document.body.clientWidth + 'px'
+    );
+}
+
+export default ScrollbarWidth;

package/src/assets/js/imports/utilities.js

@@ -15,6 +15,16 @@ export function userPrefersReducedMotion() {
   return prefersReducedMotion;
 }
 
+export const debounce = (func, limit) => {
+  let wait = false; 
+  return () => {
+      if (wait) return;
+      func();
+      wait = true;
+      setTimeout(() => wait = false, limit);
+  }
+}
+
 export const lerp = (x, y, a) => x * (1 - a) + y * a;
 export const clamp = (a, min = 0, max = 1) => Math.min(max, Math.max(min, a));
 export const invlerp = (x, y, a) => clamp((a - x) / (y - x));

package/src/assets/scss/components/gallery.scss

@@ -10,8 +10,13 @@
       width: 100%;
 
       img {
-        margin: 0 auto;
         display: block;
+        margin: 0 auto;
+
+        @supports (object-fit:contain) {
+          max-height: 500px;
+          object-fit: contain;
+        }
       }
     
       &:not(.active) {
@@ -24,29 +29,22 @@
     @include padding-bottom('s');
     display: flex;
     flex-direction: row;
-    flex-wrap: nowrap;
-    -webkit-overflow-scrolling: touch;
-    scroll-behavior: smooth;
-    scroll-snap-type: x mandatory;
-    overflow-x: auto;
+    flex-wrap: wrap;
+    gap: 2%;
+    gap: max(8px, 2%);
     
     & > * {
       background: color('grey', 'step-3');
-      max-width: 25%;
-      max-height: var(--space-2xl);
-      min-width: var(--space-l);
-      min-height: var(--space-l);
-      width: auto;
-      scroll-snap-align: start;
-
-      & + * {
-        margin-left: var(--space-xs-s);
-      }
+      @include space('min-height', 'l');
+      @include space('max-height', '2xl');
+      @include space('min-width', 'l');
+      max-width: 10.75%;
 
       img {
-        min-height: 100%;
-        opacity: 0.9;
+        height: 100%;
+        opacity: 0.8;
         object-fit: cover;
+        width: 100%;
       }
 
       &.active img {

package/src/assets/scss/library.scss

@@ -71,7 +71,7 @@
   @media only screen and (min-width: 600px) {
     &--components &__body > * {
       overflow-y: scroll;
-      height: calc(100vh - 115px);
+      height: calc( 100vh - var(--headerHeight) - 1px );
     }
   }
 
@@ -212,7 +212,11 @@
   }
 
   &__main {
-    overflow-y: scroll;
+    overflow-y: auto;
+
+    @media only screen and (min-width: 600px) {
+      overflow-y: scroll;
+    }
   }
 
   &__frame {

package/src/assets/scss/objects/grid.scss

@@ -26,7 +26,6 @@ $grid-gutter-width: 36;
   display: flex;
   flex-wrap: wrap;
   justify-content: stretch;
-  align-items: flex-start;
   margin-bottom: calc(-1 * #{space-unit()});
   margin-bottom: calc(-1 * var(--gutter));
   width: 100%;

package/src/assets/scss/tools/breakout.scss

@@ -3,9 +3,11 @@
 
 @mixin breakout($pad: 0) {
     left: 50%;
+    left: calc( 50% + var(--scrollbarWidth)/2.0001 );
     position: relative;
     transform: translateX(-50vw);
     width: 100vw;
+    width: calc( 100vw - var(--scrollbarWidth) );
     padding-left: safe-space($pad);
     padding-right: safe-space($pad);
 }

package/src/assets/scss/utilities/display.scss

@@ -109,10 +109,12 @@
   @include gap("s-l");
 }
 
-.u-16\/9 {
-  height: 0;
-  padding-bottom: 56.25%;
-  position: relative;
+@supports (object-fit: cover) {
+  .u-2\/1 {
+    aspect-ratio: 2 / 1;
+    object-fit: cover;
+    object-position: 75% 50%;
+  }
 }
 
 @media (min-width: 640px) {

package/src/assets/scss/utilities/hr.scss

@@ -12,4 +12,8 @@
 
 .u-border {
   border: 1px solid color('petrol', 'step-2');
+}
+
+.o-prose hr {
+  @extend .u-hr
 }

package/src/assets/scss/utilities/index.scss

@@ -1,3 +1,5 @@
+html body {
+
 @import './typography.scss';
 @import './link.scss';
 @import './colour.scss';
@@ -9,3 +11,5 @@
 @import './hr.scss';
 @import './ellipsis.scss';
 @import './scroll-shadows.scss';
+
+}

package/src/components/utilities.md

@@ -63,17 +63,60 @@ More typography utility classes are documented on the [typography page](/compone
 ```
 
 ```html
-<div class="u-sticky">Sticky positioning at the top of the viewport</div>
+<p class="u-sticky">This will "stick" to the top of the screen while scrolling</p>
 ```
 
 ```html
-<div class="u-sticky--gutter">Sticky positioning with gutter spacing</div>
+<div class="u-sticky--gutter">Sticky positioning, with a gap above</div>
 ```
 
 ```html
 <div class="u-split">
-    <h2>Webinars and events</h2>
-    <a href>View all</a>
+    <p>Split: aligned left</p>
+    <a class="u-link">Aligned right</a>
 </div>
 The two child items will be aligned in a horizontal row
+```
+<div class="u-split u-pad-s u-border">
+    <p>Split: aligned left</p>
+    <a class="u-link">Aligned right</a>
+</div>
+
+## Padding and margins
+
+More padding and margin utility classes are documented on the [space page](/components/space).
+
+#### Syntax: 
+`u`-`(pad or margin)`-`(optional direction)`-`(size)`-`(optional flex size)`
+
+Sizes | Directions
+------|-----------
+3xs | top
+2xs | bottom
+xs | left
+s | right
+m | y
+l | x
+xl | 
+2xl | 
+3xl | 
+4xl | 
+
+N.B. Not all permutations are available in the existing CSS, as that would amount to over 4800 extra lines of code. Currently we've only implemented a handful - but we can add more as needed.
+
+```html
+<div class="u-pad-s">Small padding on all sides</div>
+```
+
+```html
+<div class="u-margin-y-xl">Extra large margin on top and bottom</div>
+```
+
+```html
+<div class="u-margin-left-m">Medium margin on left side only</div>
+```
+
+```html
+<div class="u-pad-x-s-xl">Flexible (small to XL) padding on left and right</div>
+Grows from small padding on small screens, to xl padding on large screens
 ```

package/src/patterns/grid-of-cards.njk

@@ -6,25 +6,61 @@ layout: patterns-page
 {% from "components/card/macro.njk" import card %}
 
 <div class="o-grid o-grid--of-three o-grid--swipeable">
-  {% for _ in [0, 1, 2] %}
-    {{ card({
-      theme: {
-        layout: 'single',
-        size: 'medium',
-        name: 'alt'
-      },
-      image: {
-        src: '/static/img/blog-page-image-1.jpg',
-        alt: ''
-      },
-      header: {
-        title: 'Mixing it with the Mastersizer!'
-      },
-      body: {
-        content: '<p>At a major leading manufacturer of mixing equipment, the Mastersizer particle size analyzer is one of the analytical instruments used by customers during process simulations.</p>'
-      },
-      link: '/prototype/blog-post',
-      tag: 'News'
-    }) }}
-  {% endfor %}
+  {{ card({
+    theme: {
+      layout: 'single',
+      size: 'medium',
+      name: 'alt'
+    },
+    image: {
+      src: '/static/img/blog-page-image-1.jpg',
+      alt: ''
+    },
+    header: {
+      title: 'Mixing it with the Mastersizer!'
+    },
+    body: {
+      content: '<p>At a major leading manufacturer of mixing equipment, the Mastersizer particle size analyzer is one of the analytical instruments used by customers during process simulations.</p>'
+    },
+    link: '/prototype/blog-post',
+    tag: 'News'
+  }) }}
+  {{ card({
+    theme: {
+      layout: 'single',
+      size: 'medium',
+      name: 'alt'
+    },
+    image: {
+      src: '/static/img/blog-page-image-1.jpg',
+      alt: ''
+    },
+    header: {
+      title: 'GPC/SEC standards: making them last'
+    },
+    body: {
+      content: '<p>Earlier this year I highlighted the different types of GPC/SEC standards available and where to find them on our eStore. In this post, I’m going to share some tips and tricks about preparing your standards and making them last. But first, what standard should you be using? In my previous post, I discussed how the […]</p>'
+    },
+    link: '/prototype/blog-post',
+    tag: 'News'
+  }) }}
+  {{ card({
+    theme: {
+      layout: 'single',
+      size: 'medium',
+      name: 'alt'
+    },
+    image: {
+      src: '/static/img/blog-page-image-1.jpg',
+      alt: ''
+    },
+    header: {
+      title: 'Viral Vector Vaccines: A Borrowed Technology from Gene Therapy Advancements'
+    },
+    body: {
+      content: '<p>Advances in recombinant DNA technology, genomics, and immunology have greatly influenced the vaccine development process. The genetic manipulation of viruses makes them suitable as vectors for gene delivery, providing a novel and unique opportunity for vaccine design. Viruses survive and replicate by invading their host’s cells and hijacking their protein-making machinery. These virus particles contain […]</p>'
+    },
+    link: '/prototype/blog-post',
+    tag: 'News'
+  }) }}
 </div>

package/src/prototype/index.njk

@@ -445,7 +445,7 @@ tags: prototype
           </div>
 
           <div id="tab-events" class="c-tab">
-            <div class="o-grid o-grid--of-three">
+            <div class="o-grid o-grid--of-three o-grid--swipeable">
               {{ card({
                 theme: {
                   layout: 'single',