mp-design-system 1.2.62 → 1.2.64

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

@@ -0,0 +1,84 @@
+const categories = require('../component/categories');
+
+module.exports = {
+  title: 'NEW Product card',
+  component: {
+      name: 'product-card',
+  },
+  category: categories.card,
+  context: {
+    type: 'product',
+    theme: 'bordered',
+    size: 'medium',
+    header: {
+      title: 'Product card medium',
+      subtitle: 'Lorem ipsum dolor sit amet'
+    },
+    body: {
+      content: `<p>Nam duis leo phasellus quisque ac a volutpat euismod ultrices condimentum sociosqu et natoque volutpat eros.</p>`
+    },
+    footer: {
+      buttons: [
+        {
+          link: '#',
+          label: 'View product'
+        },
+        {
+          link: '#',
+          label: 'Request a quote',
+          colour: 'outline-green'
+        }
+      ]
+    },
+    image: {
+      src: '/static/img/aeris.jpg',
+      alt: 'Alt text'
+    }
+  },
+  variants: [
+    {
+      title: 'With features list',
+      context: {
+        list: [
+          {
+            label: 'Classic 90° DLS',
+            icon: 'cross',
+            classes: 'c-twi--grey'
+          },
+          {
+            label: 'Dynamic light scattering',
+            icon: 'tick',
+            classes: 'c-twi--green'
+          },
+          {
+            label: 'Static light scattering',
+            icon: 'tick',
+            classes: 'c-twi--green'
+          },
+          {
+            label: 'Non-invasive back scatter DLS',
+            icon: 'tick',
+            classes: 'c-twi--green'
+          },
+          {
+            label: 'Multi-angle dynamic light scattering',
+            icon: 'cross',
+            classes: 'c-twi--grey'
+          }
+        ],
+      }
+    },
+    {
+      title: 'Small',
+      context: {
+        size: 'small',
+        url: '#',
+        footer: false,
+        header: {
+          title: 'Product card small',
+          subtitle: 'Lorem ipsum dolor sit amet'
+        },
+      },
+    },
+  ]
+}

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

@@ -0,0 +1 @@
+{% extends "components/card-new/card-new.njk" %}

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

@@ -0,0 +1,36 @@
+// Extend the basic card scss
+@import '../card-new/card-new.scss';
+
+// Complex CSS to make images work in both portrait and landscape
+// Separate it out into a li'l mixin
+@mixin productCardImage($size: 's-m') {
+    @include space('top', $size);
+    @include space('left', $size);
+    position: absolute;
+    // height: 100%;
+    height: calc(100% - (var(--space-#{$size}) *2) );
+    // width: 100%;
+    width: calc(100% - var(--space-#{$size}));
+}
+
+.c-card-new--product {
+    .c-card-new__image {
+        img {
+            margin-inline: auto;
+            object-fit: contain;
+            object-position: top center;
+        }
+
+        @container card (width > #{$card-m}) {
+            flex-basis: 50%;
+            
+            img {
+                @include productCardImage('s-m');
+
+                .c-card-new--small & {
+                    @include productCardImage('xs')
+                }
+            }
+        }
+    }
+}

package/src/_includes/components/resource-card/macro.njk

@@ -0,0 +1,5 @@
+{%- from "components/component/component.njk" import c -%}
+
+{%- macro resourceCardNew(params) -%}
+    {{ c({ name: 'resource-card'}, params) }}
+{%- endmacro -%}

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

@@ -0,0 +1,59 @@
+const categories = require('../component/categories');
+
+module.exports = {
+  title: 'NEW Resource card',
+  component: {
+      name: 'resource-card',
+  },
+  category: categories.card,
+  context: {
+    type: 'resource',
+    theme: 'bordered',
+    size: 'medium',
+    tag: 'Whitepaper',
+    header: {
+      title: 'Accelerating the deformation workflow for oral solid dosage forms',
+      date: {
+        date: new Date(2015,0,12)
+      },
+      language: 'English'
+    },
+    body: {
+      content: `<p>This whitepaper on Oral Solid Dose (OSD) deformulation demonstrates how the analytical technique of Morphologically Directed Raman Spectroscopy (MDRS) can be used to accelerate the development of generic products to a successful conclusion.</p>`
+    },
+    body: {
+      keySpecs: [
+        {
+          title: 'Products',
+          term: 'Epsilon 4'
+        },
+        {
+          title: 'Technology',
+          term: 'X-ray fluorescence (XRF)'
+        },
+        {
+          title: 'Industry',
+          term: 'Metals, Advanced manufacturing'
+        },
+      ]
+    },
+    link: {
+      url: '#',
+      label: 'Read the whitepaper'
+    }
+  },
+  variants: [
+    {
+      title: 'Small',
+      context: {
+        size: 'small',
+        url: '#',
+        footer: false,
+        specs: false,
+        link: {
+          label: false
+        }
+      },
+    },
+  ]
+}

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

@@ -0,0 +1 @@
+{% extends "components/card-new/card-new.njk" %}

package/src/_includes/components/twi/twi.scss

@@ -28,3 +28,17 @@
     @include step(-1);
   }
 }
+
+.c-twi--grey {
+  color: color('grey', 'step-1');
+
+  svg {
+    color: color('grey', 'step-2');
+  }
+}
+
+.c-twi--green {
+  svg {
+    color: color('green');
+  }
+}

package/src/_includes/includes/system-scripts.njk

@@ -71,5 +71,18 @@
           iframe.classList.toggle('u-pad-s');
         }
       }
+
+      // Show iframe width
+      const iframeWrap = document.getElementById('iframe-wrap');
+      function reportIframeWidth(entry){
+        const width = (entry.contentBoxSize) ? entry.contentBoxSize[0].inlineSize : entry.contentRect.width;
+        iframeWrap.style.setProperty('--width',width);
+      };
+      const resizeObserver = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          reportIframeWidth(entry);
+        }
+      });
+      resizeObserver.observe(iframeWrap);
     })();
   </script>

package/src/_includes/layout.njk

@@ -1,4 +1,4 @@
-{%- set fullTitle = (renderData.title or title) + " | " + config.name + " | " + config.creator -%}
+{%- set fullTitle = title + " | " + config.name + " | " + config.creator -%}
 <!DOCTYPE html>
 <html lang="en" class="no-js">
   <head>

package/src/_includes/system-home-page.njk

@@ -10,7 +10,7 @@ index: true
 {% block content %}
   <div class="u-pad-bottom-xl">
     {{ hero({
-      title: renderData.title or title,
+      title: title,
       subtitle: subtitle,
       cover: true,
       gradient: true,

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

@@ -11,8 +11,10 @@
 @import '~comp/card/product-card.scss';
 @import '~comp/card/search-result-card.scss';
 @import '~comp/card/technology-card.scss';
+@import '~comp/card-new/card-new.scss';
 @import '~comp/comparison-table/comparison-table.scss';
 @import '~comp/embed/embed.scss';
+@import '~comp/event-card/event-card.scss';
 @import '~comp/eyebrow/eyebrow.scss';
 @import '~comp/facet/facet.scss';
 @import '~comp/featured-article-card/featured-article-card.scss';
@@ -32,6 +34,7 @@
 @import '~comp/off-canvas/off-canvas.scss';
 @import '~comp/option-list/option-list.scss';
 @import '~comp/post-meta/post-meta.scss';
+@import '~comp/product-card/product-card.scss';
 @import '~comp/product-signpost/product-signpost.scss';
 @import '~comp/quote/quote.scss';
 @import '~comp/scroll-spy/scroll-spy.scss';

package/src/assets/scss/library.scss

@@ -11,7 +11,7 @@
   display: grid;
   min-height: 100vh;
   grid-template-rows: auto 1fr auto;
-  
+
   &--components {
     grid-template-rows: auto 1fr;
   }
@@ -21,18 +21,18 @@
     @include padding('2xs');
     flex-direction: column;
     align-items: flex-start;
-    
+
     background: color('petrol');
     color: color('white');
     font-weight: weight('bold');
-    
-    @media only screen and (min-width:650px) {
+
+    @media only screen and (min-width: 650px) {
       @include step(-2);
       flex-direction: row;
       align-items: center;
     }
 
-    @media only screen and (min-width:1000px) {
+    @media only screen and (min-width: 1000px) {
       @include step(-1);
       @include padding('s', 's-l');
     }
@@ -57,7 +57,8 @@
 
   &__hero {
     color: white;
-    background: linear-gradient(color('petrol'), transparent), linear-gradient(45deg, color('blue'), color('petrol'));
+    background: linear-gradient(color('petrol'), transparent),
+      linear-gradient(45deg, color('blue'), color('petrol'));
   }
 
   &__body {
@@ -67,7 +68,7 @@
     @media only screen and (min-width: 600px) {
       grid-template-columns: 10em 1fr;
     }
-    
+
     @media only screen and (min-width: 800px) {
       grid-template-columns: 17em 1fr;
     }
@@ -76,7 +77,7 @@
   @media only screen and (min-width: 600px) {
     &--components &__body > * {
       overflow-y: auto;
-      height: calc( 100vh - var(--headerHeight) - 1px );
+      height: calc(100vh - var(--headerHeight) - 1px);
     }
   }
 
@@ -85,7 +86,7 @@
     border-right: 1px solid color('petrol', 'step-3');
     grid-row: -1;
     scroll-behavior: none;
-  
+
     @media only screen and (min-width: 600px) {
       grid-row: auto;
     }
@@ -119,7 +120,7 @@
       @include padding('xs');
       padding-bottom: 0;
 
-      li + li  {
+      li + li {
         @include margin-top('2xs');
       }
     }
@@ -127,7 +128,7 @@
 
   &__skip-link {
     @include padding('xs');
-    
+
     @media only screen and (min-width: 600px) {
       display: none;
     }
@@ -140,10 +141,10 @@
     max-width: 15%;
     min-width: 100px;
 
-    @media only screen and (min-width:650px) {
+    @media only screen and (min-width: 650px) {
       justify-content: flex-start;
     }
-    
+
     &-name {
       @include padding-left('xs-s');
       @include margin-left('xs-s');
@@ -167,7 +168,7 @@
         }
 
         // &:nth-last-child(3) {
-          // color: color('petrol', 'step-1');
+        // color: color('petrol', 'step-1');
         // }
       }
     }
@@ -198,7 +199,7 @@
     padding: 0.25rem;
   }
 
-  &-menu-active  {
+  &-menu-active {
     font-weight: weight('bold');
     position: relative;
 
@@ -227,14 +228,15 @@
   &__frame {
     position: relative;
     width: 100%;
-    
+
     &-links {
       position: absolute;
       right: 0;
       top: calc(-1 * (var(--space-m) + var(--space-s)));
       z-index: 1;
 
-      a, button {
+      a,
+      button {
         border-radius: 0 0 0.25em 0.25em;
         @include step(-1);
         padding: 0.25em 0.666em;
@@ -248,25 +250,42 @@
       top: 0;
     }
 
-    iframe {
-      --negative-padding: calc( var(--space-m) * -1 );
+    &-wrap {
+      --width: '';
       height: 100%;
-      width: 100%;
-      width: calc( 100% - var(--negative-padding) *2 );
-      left: var(--negative-padding);
-      top: var(--negative-padding);
-      transition: 
-        padding .3s cubic-bezier(0.22, 0.61, 0.36, 1),
-        background-color .3s cubic-bezier(0.22, 0.61, 0.36, 1);
+      overflow: hidden;
+      position: relative;
       resize: both;
 
-      @media only screen and (min-width: 600px) {
+      &:after {
+        background: color('petrol', 'step-3');
+        bottom: 0;
+        color: color('petrol', 'step-1');
+        counter-reset: width var(--width);
+        content: counter(width);
+        @include step(-2);
+        mix-blend-mode: multiply;
+        padding: 0.5ch 1ch;
         position: absolute;
+        right: 0;
       }
+    }
 
-      body {
-        border: 2px solid red;
-      }
+    iframe {
+      --negative-padding: calc(var(--space-m) * -1);
+      height: 100%;
+      width: 100%;
+      width: calc(100% - var(--negative-padding) * 2);
+      left: var(--negative-padding);
+      top: var(--negative-padding);
+      position: relative;
+      transition:
+        padding 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
+        background-color 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
+
+      // @media only screen and (min-width: 600px) {
+      //   position: absolute;
+      // }
     }
   }
 
@@ -321,51 +340,51 @@
     gap: 0 1em;
     grid-auto-rows: minmax(4em, auto);
     margin-bottom: var(--space-m);
-    
+
     @media only screen and (min-width: 680px) {
       gap: 0;
       grid-template-columns: repeat(5, auto);
       grid-template-rows: 5em auto;
     }
   }
-  
+
   &__swatch-grid--has-labels {
     grid-auto-flow: row;
-    
+
     @media only screen and (min-width: 40em) {
       grid-template-columns: minmax(15%, 15em) auto;
       grid-template-rows: auto;
     }
-    
-    @media only screen and (min-width:1000px) {
+
+    @media only screen and (min-width: 1000px) {
       grid-auto-flow: column;
       grid-template-columns: repeat(5, 1fr);
       grid-template-rows: 5em auto;
     }
   }
-  
+
   &__swatches,
   &__swatch-labels {
     display: grid;
     grid-template-columns: repeat(auto-fit, 165px);
   }
-  
+
   &__swatch {
     display: flex;
-    
+
     & > * {
       justify-content: center;
       font-weight: weight('bold');
       margin: auto;
     }
   }
-  
+
   &__swatches {
     & > * {
       height: 0;
       padding-bottom: 50%;
       position: relative;
-      
+
       & > * {
         display: flex;
         justify-content: center;
@@ -381,16 +400,16 @@
       }
     }
   }
-  
+
   &__swatch-grid table {
     @include step(-2);
-    
+
     td,
     th {
       @include padding('2xs', 0, '2xs', '3xs');
     }
     th {
-      widtH: 3em;
+      width: 3em;
     }
     td {
       font-family: monospace;
@@ -417,7 +436,12 @@
     display: block;
 
     span {
-      background: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%), rgba(206, 0, 88, 0.5);
+      background: linear-gradient(
+          45deg,
+          rgba(255, 255, 255, 0.2) 0%,
+          rgba(255, 255, 255, 0) 100%
+        ),
+        rgba(206, 0, 88, 0.5);
       height: 0;
       padding-bottom: 100%;
       position: relative;
@@ -447,7 +471,7 @@
     &--alt {
       background: color('petrol', 'step-1');
       padding: 2rem 1rem;
-  
+
       &:before {
         content: '\00a0';
         display: block;
@@ -457,7 +481,7 @@
     &--first {
       background: color('petrol');
       padding: 2rem 1rem;
-  
+
       &:before {
         content: 'First on mobile';
       }
@@ -476,7 +500,7 @@
       @include step(-1);
       @include padding('3xs', '2xs');
       letter-spacing: ls('2%');
-      
+
       &:hover {
         color: color('red');
       }
@@ -484,22 +508,20 @@
   }
 
   hr {
-    @extend .u-hr
+    @extend .u-hr;
   }
 
   &__typo {
-
     &__sidebar {
       width: grid-column(2);
 
       span {
         display: block;
-
       }
 
       .x2 {
         margin-top: 4.25em;
-        border: 1px solid color("grey");
+        border: 1px solid color('grey');
         border-width: 1px 0;
         height: 2em;
         line-height: 2em;
@@ -545,17 +567,17 @@
         grid-template-columns: 40% 20% 40%;
         grid-template-rows: var(--space-2xl) 400px 400px;
 
-        img {  
+        img {
           &:nth-child(2) {
             grid-row: 2/3;
             grid-column: 1/3;
           }
-  
+
           &:nth-child(3) {
             grid-column: 3/4;
             grid-row: 1/3;
           }
-  
+
           &:nth-child(5) {
             grid-column: 2/4;
           }
@@ -580,21 +602,21 @@
         }
       }
     }
-
   }
 
   &__illustration-grid {
-      display:grid;
-      grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
-      gap:var(--gutter);
-      
-      & :nth-child(odd):nth-last-child(5) {
-          grid-column: 1/-1;
-      }
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+    gap: var(--gutter);
+
+    & :nth-child(odd):nth-last-child(5) {
+      grid-column: 1/-1;
+    }
   }
 
   .c-alert ul li {
-    list-style: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="20" viewBox="0 0 10 20"><circle cx="5" cy="14" r="3.5" fill="%2313AA13" fill-rule="evenodd"/></svg>') outside;    
+    list-style: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="20" viewBox="0 0 10 20"><circle cx="5" cy="14" r="3.5" fill="%2313AA13" fill-rule="evenodd"/></svg>')
+      outside;
     margin-left: 1em;
     padding-left: 0.5rem;
 
@@ -624,7 +646,7 @@
 }
 
 @media only screen and (min-width: 650px) and (max-width: 700px),
-            screen and (max-width: 450px) {
+  screen and (max-width: 450px) {
   .c-library__header nav .u-row {
     @include space('gap', '2xs');
     @include step(-2);
@@ -634,12 +656,17 @@
 .c-library__header {
   @media only screen and (max-width: 650px) {
     nav a {
-      @include padding('2xs',0);
+      @include padding('2xs', 0);
       display: block;
     }
 
     .c-library-page-active:after {
-      @include space('bottom','3xs');
+      @include space('bottom', '3xs');
     }
   }
-}
+}
+
+.u-resize {
+  overflow: hidden;
+  resize: both;
+}