mp-design-system 0.6.4 → 0.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mp-design-system",
-  "version": "0.6.4",
+  "version": "0.7.2",
   "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/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/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/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/hr.scss

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

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/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',