mp-design-system 0.6.1 → 0.7.2

package/package.json

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

@@ -22,6 +22,10 @@
 
   &__image {
     z-index: 0;
+
+    img {
+      width: 100%;
+    }
   }
 
   &.mp .u-link {
@@ -64,7 +68,7 @@
     }
   }
 
-  @media (min-width:50em) {
+  @media (min-width:35em) {
     display: flex;
 
     &--switch &__content {

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

@@ -711,6 +711,26 @@ module.exports = {
           ]
         }
       }
+    },
+    {
+      title: 'Product card - single',
+      preview: 'cards-three',
+      context: {
+        theme: {
+          layout: 'single',
+          border: true
+        },
+        image: {
+          src: '/static/img/blog-page-image-1.jpg',
+          alt: 'Product image alt'
+        },
+        header: {
+          title: '凝胶渗透色谱仪OMNISEC系统'
+        },
+        body: {
+          content: '<p>确定聚合物材料的分子量、粒度和结构</p>'
+        }
+      }
     }
   ],
 

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

@@ -62,14 +62,13 @@
   &__primary {
     display: flex;
     flex-direction: column;
+  }
 
-    & > * {
-      // Required for IE
-      flex-grow: 0;
-      flex-shrink: 0;
-      flex-basis: auto;
-      width: 100%;
-    }
+  &--layout-multi .c-card__wrapper,
+  &__primary {
+    // Required for IE
+    flex-shrink: 0;
+    width: 100%;
   }
 
   &--layout-multi {
@@ -193,6 +192,7 @@
   &--layout-multi &__wrapper {
     @include padding("s-m");
     width: 100%;
+    justify-content: space-between;
   }
 
   &--layout-single.c-card--has-tag:not(.c-card--has-image) &__primary {
@@ -418,3 +418,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/header/header.scss

@@ -223,7 +223,7 @@
     }
   }
 
-  @media (min-width: 1410px) {
+  @media (min-width: 1500px) {
     &__site:after {
       clip-path: polygon(0% 101%, 78px 0%, 100% 0%, 100% 101%, 78px 101%);
     }

package/src/_includes/components/product-signpost/product-signpost.njk

@@ -1,14 +1,16 @@
 <article class="mp c-product-signpost {{ params.classes }}">
   <a class="c-product-signpost__link" href="{{ params.link }}">{{ params.title }}</a>
-  {% if params.image.src %}
-    <figure class="c-product-signpost__image">
-      <img src="{{ params.image.src }}" alt="{{ params.image.alt }}" />
-    </figure>
-  {% endif %}
-  <div class="u-flow--3xs">
-    <h2 class="c-h c-h--step-0">{{ params.title }}</h2>
-    <div class="o-prose">
-      {{ params.description | safe }}
+  <div class="c-product-signpost__wrapper">
+    {% if params.image.src %}
+      <figure class="c-product-signpost__image">
+        <img src="{{ params.image.src }}" alt="{{ params.image.alt }}" />
+      </figure>
+    {% endif %}
+    <div class="u-flow--3xs">
+      <h2 class="c-h c-h--step-0">{{ params.title }}</h2>
+      <div class="o-prose">
+        {{ params.description | safe }}
+      </div>
     </div>
   </div>
 </article>

package/src/_includes/components/scroll-spy/scroll-spy.scss

@@ -9,6 +9,10 @@
     display: block;
     transition: 300ms transform;
 
+    &:hover {
+      color: color("grey");
+    }
+
     &::before {
       content: "▸ ";
       position: absolute;

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/includes/system-header.njk

@@ -2,7 +2,7 @@
 
 <header class="c-library__header u-split">
   <a class="c-library__logo" href="/">
-    <img src="/static/svg/logo.svg" alt="Home" />
+    <img src="/static/svg/logo-small.svg" alt="Home" />
     <span class="c-library__logo-name">
       {% for item in config.logo %}
         <span>{{ item }}</span>

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/tools/index.scss

@@ -137,6 +137,7 @@
 
 @mixin hyphenated {
   @media only screen and (max-width: 28rem) {
+    word-break: break-word;
     -webkit-hyphens: auto;
     -ms-hyphens: auto;
     hyphens: auto;
@@ -144,6 +145,7 @@
 
   @media only screen and (max-width: 70rem) {
     [lang='de-DE'] & {
+      word-break: break-word;
       -webkit-hyphens: auto;
       -ms-hyphens: auto;
       hyphens: auto;

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/css.md

@@ -31,8 +31,7 @@ Most of the CSS lives in this group. Each component is an encapsulated 'block' (
 Utilities are classes that do one thing really well. For example: `.u-hidden` hides elements on the page in a non destructive way (still visible to screenreaders). There are auto-generated spacing, typography and colour classes to help compose a page (and prototype new components before refactoring them into the above groups). The `u-` prefix is used for utilities.
 
 ## BEM
-
-BEM is used as a naming methodology, with `__` used for elements, and `--` used for modifiers.
+We use BEM as a naming methodology, with `__` used for elements, and `--` used for modifiers.
 
 ```scss
 /* Pattern */
@@ -57,6 +56,8 @@ BEM is used as a naming methodology, with `__` used for elements, and `--` used
 }
 ```
 
+For more information about BEM see [getbem.com](http://getbem.com/)
+
 ### SCSS variables vs. CSS custom properties
 
 {{ config.name }} is designed to support IE11+, which leaves a large support gap for custom properties—sadly, polyfilling is patchy at best. For this reason, the design system relies more on SCSS variables than custom properties.

package/src/components/utilities.md

@@ -0,0 +1,122 @@
+---
+title: Utilities
+layout: content-page
+sidebar: components
+---
+
+These utility classes each do a single, simple job. They can be applied to any HTML element, and are designed to be used in a wide variety of contexts, when creating a new component or variant might not be required.
+
+## Typography
+
+More typography utility classes are documented on the [typography page](/components/typography).
+
+```html
+<div class="u-strong">Bold text</div>
+```
+
+```html
+<div class="u-normal">Regular-weight (non-bold) text</div>
+```
+
+```html
+<div class="u-text-center">Center-aligned text</div>
+```
+
+```html
+<div class="u-ls">Standard letter-spacing (-0.01em)</div>
+```
+
+## Display
+
+```html
+<div class="u-hidden">Visually hidden, but still accessible to screenreaders</div>
+```
+
+```html
+<div class="u-display-none">Entirely hidden</div>
+```
+
+```html
+<div class="u-display-block">Block-level layout</div>
+```
+
+```html
+<div class="u-display-inline-block">Inline-block-level layout</div>
+```
+
+```html
+<div class="u-revealed">The opposite of u-hidden, useful for e.g. accordions</div>
+```
+
+## Layout
+
+```html
+<div class="u-float-right">Floated right</div>
+```
+
+```html
+<div class="u-clear-both">Cleared from floats</div>
+```
+
+```html
+<div class="u-relative">Relative positioning</div>
+```
+
+```html
+<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 a gap above</div>
+```
+
+```html
+<div class="u-split">
+    <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
+```