mp-design-system 0.5.14 → 0.6.2

package/package.json

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

package/src/_includes/components/button/button.njk

@@ -17,10 +17,6 @@
   {% set attrs = ' ' + params.attrs %}
 {% endif %}
 
-{% if params.colour == 'white' or params.colour == 'outline-white'%}
-<div class="u-bg-petrol-step-2 u-pad-xl">
-{% endif %}
-
 {%- if params.link -%}
 <a href="{{ params.link }}" class="{{ classNames }}" {{ attrs }}>
 {%- elseif params.type == 'span' -%}
@@ -39,8 +35,4 @@
 </span>
 {%- else -%}
 </button>
-{%- endif -%}
-
-{% if params.colour == 'white' or params.colour == 'outline-white'%}
-</div>
-{% endif %}
+{%- endif -%}

package/src/_includes/components/button/button.scss

@@ -11,7 +11,8 @@
   font-family: $font-stack;
 }
 
-.mp.c-button {
+.mp.c-button,
+.c-button {
   // Reset
   border-radius: 0;
   background: transparent;

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

@@ -382,54 +382,6 @@ module.exports = {
         tag: 'Live webinar',
       }
     },
-    {
-      title: 'Featured event card - Wide',
-      preview: 'default',
-      context: {
-        theme: {
-          border: false,
-          layout: 'wide',
-          name: 'featured',
-          switch: true
-        },
-        header: {
-          title: 'Discover how on-line particle sizing optimises mining analytics.',
-          date: {
-            date: new Date(),
-            duration: '36:01'
-          },
-          meta: [
-            'English'
-          ]
-        },
-        image: {
-          src: '/static/img/featured-event-1.jpg',
-          alt: 'Alt'
-        },
-        body: {
-          keySpecs: [
-            {
-              title: 'Products',
-              term: 'Morphologi G3-ID'
-            },
-            {
-              title: 'Technologies',
-              term: 'Morphologically-Directed Raman Spectroscopy'
-            }
-          ],
-        },
-        footer: {
-          buttons: [
-            {
-              link: '#',
-              label: 'Watch now',
-              colour: 'outline-white'
-            }
-          ],
-        },
-        tag: 'Live webinar',
-      }
-    },
     {
       title: 'Event card - Future (home)',
       preview: 'content-width',
@@ -729,6 +681,56 @@ module.exports = {
         },
         tag: 'Whitepaper',
       }
+    },
+    {
+      title: 'Career card',
+      preview: 'cards-three',
+      context: {
+        theme: {
+          layout: 'single',
+          name: 'alt',
+          metaLast: true
+        },
+        header: {
+          title: 'Account Manager - MX',
+          meta: [
+            'Mexico City, MX',
+            'Posted 30+ days ago'
+          ],
+        },
+        body: {
+          content: '<p>Do you want to be part of a business that genuinely values entrepreneurialism, innovation and individual accountability? We focus on our customers and are proud of the difference our technology makes. We partner with some of the biggest...</p>'
+        },
+        footer: {
+          buttons: [
+            {
+              link: '#',
+              label: 'More details',
+              inline: false
+            }
+          ]
+        }
+      }
+    },
+    {
+      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.njk

@@ -33,6 +33,24 @@
 {%- if tag -%}{% set classes = classes + ' c-card--has-tag' %}{%- endif -%}
 {%- if hasImage -%}{% set classes = classes + ' c-card--has-image' %}{%- endif -%}
 
+{% macro meta() %}
+  {% if hasTime or hasTimezone or isInPast or hasMeta %}
+    <p class="c-card__meta">
+      {% if isInPast %}
+        {{ twi({ icon: 'play', label: header.date.duration }) }}
+        {% if hasDate %}<span>{{ header.date.date.getMonth() | months }} {{ header.date.date.getFullYear() }}</span>{% endif %}
+      {% else %}
+        {% if hasTime %}
+          <span>{{ header.date.time }} {{ header.date.timezone }}</span>
+        {% endif %}
+      {% endif %}
+      {% for item in header.meta %}
+        <span>{{ item }}</span>
+      {% endfor %}
+    </p>
+  {% endif %}
+{% endmacro %}
+
 <article class="{{ classes }}">
   {% if tag %}
     <span class="c-card__tag">{{ tag }}</span>
@@ -62,24 +80,17 @@
             </time>
           {% endif %}
           
-          {% if hasTime or hasTimezone or isInPast or hasMeta %}
-            <p class="c-card__meta">
-              {% if isInPast %}
-                {{ twi({ icon: 'play', label: header.date.duration }) }}
-                {% if hasDate %}<span>{{ header.date.date.getMonth() | months }} {{ header.date.date.getFullYear() }}</span>{% endif %}
-              {% else %}
-                {% if hasTime %}
-                  <span>{{ header.date.time }} {{ header.date.timezone }}</span>
-                {% endif %}
-              {% endif %}
-              {% for item in header.meta %}
-                <span>{{ item }}</span>
-              {% endfor %}
-            </p>
+          {% if not params.theme.metaLast and (hasTime or hasTimezone or isInPast or hasMeta) %}
+            {{ meta() }}
           {% endif %}
 
           {% if header.title %}<h2 class="c-h c-card__title"><a href="{{ link }}">{{ header.title }}</a></h2>{% endif %}
           {% if header.subtitle %}<h3 class="c-h c-h--tagline">{{ header.subtitle }}</h2>{% endif %}
+
+          {% if params.theme.metaLast and (hasTime or hasTimezone or isInPast or hasMeta) %}
+            {{ meta() }}
+          {% endif %}
+
         </header>
       {% endif %}
 
@@ -142,7 +153,7 @@
     </div>
 
     {% if hasFullLink %}
-      <a class="c-card__full-link u-fill u-fill--link" href="{{ link }}">{{ header.title }}</a>
+      <a class="u-fill u-fill--link" href="{{ link }}">{{ header.title }}</a>
     {% endif %}
     </div>
 

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

@@ -43,7 +43,7 @@
 
   &--featured &__wrapper,
   &--featured &__primary {
-    flex: 1;
+    flex-grow: 1;
   }
 
   &--featured {
@@ -64,10 +64,27 @@
     flex-direction: column;
   }
 
+  &--layout-multi .c-card__wrapper,
+  &__primary {
+    // Required for IE
+    flex-shrink: 0;
+    width: 100%;
+  }
+
   &--layout-multi {
     .c-card__wrapper {
       @include gap("s-l");
     }
+    
+    &.c-card--featured.c-card--size-large.c-card--has-image {
+      .c-card__wrapper {
+        padding: 0;
+      }
+
+      .c-card__primary {
+        @include padding('s-m');
+      }
+    }
 
     @media (min-width: 55em) {
       .c-card__wrapper {
@@ -120,21 +137,27 @@
   &--layout-multi-30-70 {
     .c-card__image {
       width: calc(30% - 18px) !important;
+      width: calc(30% - var(--space-s-m)) !important;
     }
 
     @media (min-width: 55em) {
       .c-card__primary:nth-child(2) {
         width: calc(70% - 18px) !important;
+        width: calc(70% - var(--space-s-m)) !important;
       }
     }
   }
 
-  &--layout-wide {
-    @extend .c-card--layout-multi;
-
+  &--layout-multi-40-60 {
     @media (min-width: 55em) {
       .c-card__image {
-        width: calc(61.8% - 18px) !important;
+        width: calc(60% - 18px) !important;
+        width: calc(60% - var(--space-s-m)) !important;
+      }
+
+      .c-card__primary {
+        width: calc(40% - 18px) !important;
+        width: calc(40% - var(--space-s-m)) !important;
       }
     }
   }
@@ -166,10 +189,10 @@
   }
 
   &--layout-single &__primary,
-  &--layout-multi.c-card--size-large.c-card--featured &__primary,
-  &--layout-multi:not(&--size-large.c-card--featured) &__wrapper {
+  &--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 {
@@ -274,6 +297,23 @@
     }
   }
 
+  &--2-column-specs &__specs {
+    dl {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(min-content, max-content));
+      @include space('gap', '3xs', '2xs');
+    }
+    dt, dd {
+      margin: 0;
+    }
+    dt {
+      grid-column: 1;
+    }
+    dd {
+      grid-column: 2;
+    }
+  }
+
   .o-prose li + li {
     @include margin-top("3xs");
   }
@@ -315,18 +355,23 @@
   }
 
   &__corner {
-    clip-path: polygon(100% 0, 0 0, 100% 100%);
     position: absolute;
-    background: color("green");
-    padding: 0.625rem;
     color: color("white");
     right: 0;
     top: 0;
-    @include space("height", "2xl");
-    @include space("width", "2xl");
+    @include space("border-width", "l");
+    border-color: color("green") color("green") transparent transparent;
+    border-style: solid;
+    width: 0;
+    height: 0;
     text-align: right;
     font-size: 1.5rem;
     transition: 300ms color;
+
+    .c-icon {
+      position: relative;
+      top: -27px;
+    }
   }
 
   &:hover &__corner {

package/src/_includes/components/component/preview-card-example.njk

@@ -303,7 +303,7 @@ There are also specific types of cards which are not generated from the main car
 
   {{ card({
     theme: {
-      layout: 'wide',
+      layout: 'multi c-card--layout-multi-40-60',
       name: 'featured',
       switch: true
     },

package/src/_includes/components/featured-article-card/featured-article-card.scss

@@ -1,8 +1,8 @@
 .c-featured-article-card {
   position: relative;
+  background: color('petrol', 'step-3');
 
   &__content {
-    background: color('petrol', 'step-3');
     @include padding('s-l');
   }
 

package/src/_includes/components/header/header.njk

@@ -78,10 +78,12 @@
 
       <form class="c-header__search">
         <label for="site-search" class="u-hidden">Search</label>
-        <input id="site-search" placeholder="Search" type="search" name="s" class="c-input c-input--alt c-input--with-button" />
-        <button type="button" class="c-button--reset u-blue">
-          {{ icon({ id: 'search' }) }}
-        </button>
+        <div class="u-flex u-bg-petrol-step-3">
+          <input id="site-search" placeholder="Search" type="search" name="s" class="c-input c-input--alt c-input--with-button" />
+          <button type="button" class="c-button--reset u-blue">
+            {{ icon({ id: 'search' }) }}
+          </button>
+        </div>
       </form>
       
       {% set siteNav = params.siteNav %}

package/src/_includes/components/header/header.scss

@@ -20,6 +20,11 @@
 
   &__search {
     position: relative;
+
+    button:hover,
+    button:focus {
+      background-color: color('petrol', 'step-2');
+    }
   }
 
   @media (min-width: 500px) {
@@ -218,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/product-signpost/product-signpost.scss

@@ -5,6 +5,7 @@
   align-items: center;
   max-width: 440px;
   @include padding("2xs");
+  word-break: break-word;
 
   &__link {
     @extend .u-fill, .u-fill--link;
@@ -17,7 +18,6 @@
   &__image {
     margin-bottom: 0;
     @include padding-right("s");
-    width: 100%;
     flex-shrink: 0;
   }
 

package/src/_includes/components/quote/quote.scss

@@ -42,8 +42,8 @@
       @include padding('xl', 'xl', 'xl', '4xl');
 
       &:before {
-        left: space('xl');
-        top: space('l');
+        @include space('left', 'xl');
+        @include space('top', 'l');
       }
     }
 }

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

@@ -58,5 +58,18 @@
           });
         }
       }
+
+      // Toggle iframe background colour
+      Array.from(document.querySelectorAll('.c-library__frame-background')).forEach(t => {
+        t.addEventListener('click', toggleBackgroundColour);
+      });
+
+      function toggleBackgroundColour(event) {
+        const iframe = event.currentTarget.parentNode.parentNode.querySelector('iframe');
+        if (iframe) {
+          iframe.classList.toggle('u-bg-petrol-step-2');
+          iframe.classList.toggle('u-pad-s');
+        }
+      }
     })();
   </script>

package/src/assets/scss/library.scss

@@ -218,17 +218,25 @@
   &__frame {
     position: relative;
     width: 100%;
-
-    &-link {
-      @include step(-1);
-      padding: 0.25em 0.666em;
-      border-radius: 0 0 0.25em 0.25em;
-      background: color('petrol', 'step-2');
-      color: color('grey', 'step-1');
+    
+    &-links {
       position: absolute;
-      z-index: 1;
       right: 0;
       top: calc(-1 * (var(--space-m) + var(--space-s)));
+      z-index: 1;
+
+      a, button {
+        border-radius: 0 0 0.25em 0.25em;
+        @include step(-1);
+        padding: 0.25em 0.666em;
+        background: color('petrol', 'step-2');
+        color: color('grey', 'step-1');
+      }
+    }
+
+    &-background {
+      border-radius: 0 0 0 0.25em;
+      top: 0;
     }
 
     iframe {
@@ -237,6 +245,7 @@
       width: 100%;
       left: 0;
       top: 0;
+      transition: all .3s cubic-bezier(0.22, 0.61, 0.36, 1);
     }
   }
 

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

@@ -26,6 +26,7 @@ $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/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/flow.scss

@@ -48,7 +48,9 @@
     @include flow('3xl');
   }
 
-  &--prose > * + * {
+  &--prose > * + *,
+  // Fix for Tridion XPM markup interrupting u-flow--prose spacing
+  &--prose > [property='a:Content'] > * + * {
     margin-top: var(--flow, 1em);
   }
 

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.