mp-design-system 0.9.8 → 0.9.17

package/src/_includes/components/gallery/gallery.njk

@@ -0,0 +1,52 @@
+{% from "components/embed/macro.njk" import youtube %}
+
+{% set count = 1 %}
+
+<div class="u-flow c-gallery">
+    <div class="c-gallery__main">
+        {% if params.images | length %}
+            {% for image in params.images %}
+                {% set active = (count == 1) %}
+                <figure class="c-gallery__slide {{"active" if active}}" data-slide="{{count}}">
+                    <img src="{{image.src}}" alt="{{image.title}}" >
+                </figure>
+                {% set count = count+1 %}
+            {% endfor %}
+        {% endif %}
+        {% if params.videos | length %}
+            {% for video in params.videos %}
+                <div class="c-gallery__slide c-gallery__video" data-slide="{{count}}">
+                    {{ youtube({
+                        title: video.title,
+                        id: video.id
+                    }) }}
+                </div>
+                {% set count = count+1 %}
+            {% endfor %}
+        {% endif %}
+    </div>
+
+{% set count = 1 %}
+
+    <div class="c-gallery__thumbnails">
+        {% if params.images | length %}
+            {% for image in params.images %}
+                {% set active = (count == 1) %}
+                <figure class="c-gallery__slide {{"active" if active}}" data-slide="{{count}}">
+                    <img src="{{image.src}}" alt="{{image.title}}" loading="lazy" width="102">
+                </figure>
+                {% set count = count+1 %}
+            {% endfor %}
+        {% endif %}
+        {% if params.videos | length %}
+            {% for video in params.videos %}
+                {% set active = (count == 1) %}
+                <figure class="c-gallery__slide {{"active" if active}}" data-slide="{{count}}">
+                    <img src="https://img.youtube.com/vi/{{video.id}}/default.jpg" alt="{{video.title}}" loading="lazy" width="102">
+                </figure>
+                {% set count = count+1 %}
+            {% endfor %}
+        {% endif %}
+    </div>
+    </div>
+</div>

package/src/_includes/components/gallery/macro.njk

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

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

@@ -183,7 +183,12 @@
       width: 100%;      
       
       &:after {
-        background: linear-gradient(270deg, color('green') -12.4%, color('blue') 11.22%, color('petrol') 43.74%, color('petrol') 70%, color('petrol', 'step--1') 100%);
+        background: linear-gradient(270deg, 
+          color('green') -12%, 
+          color('blue') 11%, 
+          color('petrol') 43%, 
+          color('petrol') 70%, 
+          color('petrol', 'step--1') 100%);
         content: '';
         position: absolute;
         width: 100vw;
@@ -192,6 +197,15 @@
         top: 0;
         transform: translateX(-50%);
         z-index: -2;
+
+        // Hack for IE11
+        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
+          background: linear-gradient(270deg, 
+          color('green') -12%, 
+          color('blue') 11%, 
+          color('petrol') 43%, 
+          color('petrol', 'step--1') 100%);
+        }
       }
 
       ul {

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

@@ -83,6 +83,19 @@
     }
   }
 
+  &--features {
+    thead th,
+    tbody td,
+    tfoot td {
+      background: transparent;
+    }
+
+    thead th {
+      color: inherit;
+      font-weight: weight();
+    }
+  }
+
   @media (min-width: 30em) {
     .c-icon {
       font-size: 1.5rem;

package/src/_includes/library-navigation/brand-nav.njk

@@ -10,7 +10,8 @@
     {{ libraryList('Logo', '/brand/logo/', page.url) }}
     {{ libraryList('Colors', '/brand/colors/', page.url) }}
     {{ libraryList('Typography', '/brand/typography/', page.url) }}
-    {{ libraryList('Images', '/brand/images/', page.url) }}
+    {{ libraryList('Photography', '/brand/images/', page.url) }}
+    {{ libraryList('Illustration', '/brand/illustration/', page.url) }}
   </ul>
   {# <h3>Brand identity</h3>
   <ul>

package/src/_includes/navigation/corporate.njk

@@ -4,10 +4,10 @@
       <a href="/prototype/products">Products</a>
     </li>
     <li>
-      <a href="/prototype/products">Industries</a>
+      <a href="/prototype/sections">Solutions</a>
     </li>
     <li>
-      <a href="">Services and support</a>
+      <a href="">CRO services</a>
     </li>
     <li>
       <a href="/prototype/webinars">Webinars and events</a>
@@ -15,6 +15,9 @@
     <li>
       <a href="">Resources</a>
     </li>
+    <li>
+      <a href="">Support & downloads</a>
+    </li>
     <li class="c-header__push">
       <a href="">Log in</a>
     </li>

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

@@ -1,34 +1,35 @@
+@import '~comp/accordion/accordion.scss';
+@import '~comp/alert/alert.scss';
 @import '~comp/button/button.scss';
-@import '~comp/icon/icon.scss';
-@import '~comp/twi/twi.scss';
-@import '~comp/table/table.scss';
-@import '~comp/post-meta/post-meta.scss';
-@import '~comp/header/header.scss';
-@import '~comp/footer/footer.scss';
-@import '~comp/input/input.scss';
-@import '~comp/product-signpost/product-signpost.scss';
-@import '~comp/usp/usp.scss';
 @import '~comp/campaign/campaign.scss';
-@import '~comp/signpost/signpost.scss';
-@import '~comp/industry-card/industry-card.scss';
-@import '~comp/alert/alert.scss';
+@import '~comp/card/card.scss';
+@import '~comp/comparison-table/comparison-table.scss';
+@import '~comp/embed/embed.scss';
 @import '~comp/featured-article-card/featured-article-card.scss';
-@import '~comp/internal-nav/internal-nav.scss';
-@import '~comp/input/radio.scss';
+@import '~comp/features-table/features-table.scss';
 @import '~comp/filter-search/filter-search.scss';
-@import '~comp/embed/embed.scss';
-@import '~comp/tabs/tabs.scss';
+@import '~comp/footer/footer.scss';
+@import '~comp/gallery/gallery.scss';
+@import '~comp/header/header.scss';
+@import '~comp/hero/hero.scss';
+@import '~comp/icon/icon.scss';
+@import '~comp/industry-card/industry-card.scss';
+@import '~comp/input/input.scss';
+@import '~comp/input/radio.scss';
+@import '~comp/internal-nav/internal-nav.scss';
+@import '~comp/meta-box/meta-box.scss';
 @import '~comp/option-list/option-list.scss';
-@import '~comp/card/card.scss';
+@import '~comp/post-meta/post-meta.scss';
+@import '~comp/product-signpost/product-signpost.scss';
+@import '~comp/quote/quote.scss';
 @import '~comp/scroll-spy/scroll-spy.scss';
 @import '~comp/series/series.scss';
-@import '~comp/comparison-table/comparison-table.scss';
-@import '~comp/meta-box/meta-box.scss';
+@import '~comp/signpost/signpost.scss';
 @import '~comp/slat/slat.scss';
-@import '~comp/hero/hero.scss';
-@import '~comp/quote/quote.scss';
-@import '~comp/accordion/accordion.scss';
+@import '~comp/table/table.scss';
+@import '~comp/tabs/tabs.scss';
+@import '~comp/twi/twi.scss';
+@import '~comp/usp/usp.scss';
 
 @import './headings.scss';
-@import './gallery.scss';
 @import './lightbox.scss';

package/src/assets/scss/components/lightbox.scss

@@ -22,6 +22,7 @@
         max-height: 90vh;
         margin: auto;
         display: block;
+        object-fit: contain;
       }
     }
   }

package/src/assets/scss/library.scss

@@ -321,10 +321,13 @@
   }
   
   &__swatch-grid--has-labels {
-    grid-template-columns: 15em auto;
-    grid-template-rows: auto;
     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) {
       grid-auto-flow: column;
       grid-template-columns: repeat(5, 1fr);
@@ -571,6 +574,16 @@
 
   }
 
+  &__illustration-grid {
+      display:grid;
+      grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
+      gap:var(--gutter);
+      
+      & :nth-child(odd):nth-last-child(3) {
+          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;    
     margin-left: 1em;

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

@@ -22,6 +22,23 @@ $grid-gutter-width: 36;
   @return (($count * $grid-column-width) + (($count - 1) * $grid-gutter-width)) * 1px;
 }
 
+@mixin o-grid($columns) {
+  $width: math.div(100%, $columns);
+  
+  & > * {
+    width: calc(($width - (($columns - 1) * #{space-unit()} / $columns)) - 0.1px);
+    width: calc(($width - (($columns - 1) * var(--gutter) / $columns)) - 0.1px);
+    
+    & + * {
+      @include margin-left("gutter");
+    }
+
+    &:nth-child(#{$columns}n + 1) {
+      margin-left: 0;
+    }
+  }
+}
+
 .o-grid {
   display: flex;
   flex-wrap: wrap;
@@ -51,131 +68,69 @@ $grid-gutter-width: 36;
 
   &--of-two {
     @media (min-width: 40em) {
-      & > * {
-        width: calc((50% - (1 * #{space-unit()} / 2)) - 0.1px);
-        width: calc((50% - (1 * var(--gutter) / 2)) - 0.1px);
-
-        & + * {
-          @include margin-left("gutter");
-        }
-
-        &:nth-child(2n + 1) {
-          margin-left: 0;
-        }
-      }
+      @include o-grid(2)
     }
   }
 
   &--of-two-late {
     @media (min-width: 55em) {
-      & > * {
-        width: calc((50% - (1 * #{space-unit()} / 2)) - 0.1px);
-        width: calc((50% - (1 * var(--gutter) / 2)) - 0.1px);
-
-        & + * {
-          @include margin-left("gutter");
-        }
+      @include o-grid(2)
+    }
+  }
 
-        &:nth-child(2n + 1) {
-          margin-left: 0;
-        }
-      }
+  &--of-two-early {
+    @media (min-width: 22.4em) {
+      @include o-grid(2)
     }
   }
 
   &--of-three {
     @media (min-width: 38em) and (max-width: 54.9375em) { // 608 - 1087
-      & > * {
-        width: calc((50% - (1 * #{space-unit()} / 2)) - 0.1px);
-        width: calc((50% - (1 * var(--gutter) / 2)) - 0.1px);
-
-        & + * {
-          @include margin-left("gutter");
-        }
-
-        &:nth-child(2n + 1) {
-          margin-left: 0;
-        }
-      }
+      @include o-grid(2)
     }
 
     @media (min-width: 55em) {
-      & > * {
-        width: calc((33.333% - (2 * #{space-unit()} / 3)) - 0.1px);
-        width: calc((33.333% - (2 * var(--gutter) / 3)) - 0.1px);
-
-        & + * {
-          @include margin-left("gutter");
-        }
-
-        &:nth-child(3n + 1) {
-          margin-left: 0;
-        }
-      }
+      @include o-grid(3)
     }
   }
 
   &--of-three-late {
     @media (min-width: 38em) and (max-width: 67.9375em) {
-      & > * {
-        width: calc((50% - (1 * #{space-unit()} / 2)) - 0.1px);
-        width: calc((50% - (1 * var(--gutter) / 2)) - 0.1px);
-
-        & + * {
-          @include margin-left("gutter");
-        }
-
-        &:nth-child(2n + 1) {
-          margin-left: 0;
-        }
-      }
+      @include o-grid(2)
     }
 
     @media (min-width: 68em) {
-      & > * {
-        width: calc((33.333% - (2 * #{space-unit()} / 3)) - 0.1px);
-        width: calc((33.333% - (2 * var(--gutter) / 3)) - 0.1px);
+      @include o-grid(3)
+    }
+  }
 
-        & + * {
-          @include margin-left("gutter");
-        }
+  &--of-three-early {
+    @media (min-width: 22.4em) and (max-width: 54.9375em) {
+      @include o-grid(2)
+    }
 
-        &:nth-child(3n + 1) {
-          margin-left: 0;
-        }
-      }
+    @media (min-width: 55em) {
+      @include o-grid(3)
     }
   }
 
   &--of-four {
     @media (min-width: 38em) and (max-width: 59.9375em) {
-      & > * {
-        width: calc((50% - (1 * #{space-unit()} / 2)) - 0.1px);
-        width: calc((50% - (1 * var(--gutter) / 2)) - 0.1px);
-
-        & + * {
-          @include margin-left("gutter");
-        }
-
-        &:nth-child(2n + 1) {
-          margin-left: 0;
-        }
-      }
+      @include o-grid(2)
     }
 
     @media (min-width: 60em) {
-      & > * {
-        width: calc((25% - (3 * #{space-unit()} / 4)) - 0.1px);
-        width: calc((25% - (3 * var(--gutter) / 4)) - 0.1px);
+      @include o-grid(4)
+    }
+  }
 
-        & + * {
-          @include margin-left("gutter");
-        }
+  &--of-four-early {
+    @media (min-width: 22.4em) and (max-width: 59.9375em) {
+      @include o-grid(2)
+    }
 
-        &:nth-child(4n + 1) {
-          margin-left: 0;
-        }
-      }
+    @media (min-width: 60em) {
+      @include o-grid(4)
     }
   }
 

package/src/assets/scss/objects/prose.scss

@@ -20,7 +20,8 @@
   }
 
   p a:not(.c-button),
-  li a:not(.c-button) {
+  li a:not(.c-button),
+  td a:not(.c-button) {
     color: color('utility-blue');
     text-decoration: underline;
     text-underline-offset: 3px;

package/src/assets/scss/utilities/space.scss

@@ -307,6 +307,18 @@
   @include margin-bottom('xl');
 }
 
+.u-margin-x-3xs {
+  @include margin-left('3xs');
+  @include margin-right('3xs');
+}
+.u-margin-x-2xs {
+  @include margin-left('2xs');
+  @include margin-right('2xs');
+}
+.u-margin-x-xs {
+  @include margin-left('xs');
+  @include margin-right('xs');
+}
 .u-margin-x-s {
   @include margin-left('s');
   @include margin-right('s');

package/src/assets/scss/utilities/typography.scss

@@ -29,3 +29,7 @@
 .u-text-center {
   text-align: center;
 }
+
+.u-remove-bullets {
+  list-style-type: none;
+}

package/src/brand/colors.njk

@@ -35,12 +35,14 @@ Step 0 is the 'default' shade for each color."
             {
                 name: "-1",
                 hex: '003039',
-                cmyk: '93.65.57.57'
+                cmyk: '93.65.57.57',
+                pantone: 'PAN 547'
             },
             {
                 name: 0,
                 hex: '005461',
-                cmyk: '93.54.49.27'
+                cmyk: '93.54.49.27',
+                pantone: 'PAN 3165'
             },
             {
                 name: 1,
@@ -71,7 +73,8 @@ Step 0 is the 'default' shade for each color."
             {
                 name: 0,
                 hex: '00a2c2',
-                cmyk: '77.17.17.00'
+                cmyk: '77.17.17.00',
+                pantone: 'PAN 312'
             },
             {
                 name: 1,
@@ -102,7 +105,8 @@ Step 0 is the 'default' shade for each color."
             {
                 name: 0,    
                 hex: '13aa13',
-                cmyk: '81.04.100.01'
+                cmyk: '81.04.100.01',
+                pantone: 'PAN 354'
             },
             {
                 name: 1,
@@ -128,7 +132,8 @@ Step 0 is the 'default' shade for each color."
             {
                 name: 0,    
                 hex: 'ce0058',
-                cmyk: '14.100.50.2'
+                cmyk: '14.100.50.2',
+                pantone: 'PAN Rubine Red'
             }
         ]
     },
@@ -145,7 +150,8 @@ Step 0 is the 'default' shade for each color."
             {
                 name: 0,    
                 hex: '333333',
-                cmyk: '00.00.00.91'
+                cmyk: '00.00.00.91',
+                pantone: 'PAN 447'
             },
             {
                 name: 1,
@@ -228,6 +234,9 @@ Step 0 is the 'default' shade for each color."
                     <tbody>
                         <tr><td>Hex</td><td>#{{step.hex | upper}}</td></tr>
                         <tr><td>CMYK</td><td>{{step.cmyk}}</td></tr>
+                        <tr class="{{ "u-petrol-step-3" if not step.pantone }}">
+                            <td>Pantone</td><td>{{step.pantone if step.pantone}}</td>
+                        </tr>
                     </tbody>
                 </table>
             {% endfor %}

package/src/brand/illustration.md

@@ -0,0 +1,44 @@
+---
+title: Illustration
+layout: content-page
+sidebar: brand
+tags: brand
+version: 1.0.0
+status: 'Ready'
+---
+Photography covers most of our needs for visual imagery, but there are times when photography isn't a good fit. For example when dealing with more abstract transactional concepts like "log in" or "verify your account". In these cases, we use illustration to add some vibrance to our designs.
+
+## Guidelines
+Our illustration style is still a work-in-progress; currently it follows a few simple guidelines.
+
+- Vector
+- Isometric perspective
+- Simple details
+- Small characters (usually) around a large object
+- Limited color palette
+- White background
+
+## Resources
+We have a library of pre-made characters which can be adapted for new designs, and an Adobe Illustrator color palette. Contact Will Wallace for access to both of these; I'll aim to make the available on this site in future.
+
+## Examples
+
+<div class="c-library__illustration-grid">
+
+![alt text][login]
+
+![alt text][thankyou]
+
+![alt text][confirm]
+
+![alt text][support]
+
+![alt text][opt-in]
+
+</div>
+
+[login]: https://www.malvernpanalytical.com/resource/svg/login3.svg
+[thankyou]: https://p3.aprimocdn.net/malvernpanalytical/0cd71419-bc75-4b43-8c4d-af69010bf927/thankyou_Original%20file.svg
+[support]: https://p3.aprimocdn.net/malvernpanalytical/aef489f7-a3cc-4a0c-ad6c-af3300baaa3b/support3_Original%20file.svg
+[opt-in]: https://p3.aprimocdn.net/malvernpanalytical/383c6156-cefd-4d8e-a913-af6d00cebf8a/opt-in%20success%20v02_Original%20file.svg
+[confirm]: https://p3.aprimocdn.net/malvernpanalytical/68ccc179-959e-4b2e-b1c1-af7100be26af/get-started_Original%20file.svg

package/src/brand/images.md

@@ -4,7 +4,7 @@ layout: system-page
 sidebar: brand
 tags: brand
 version: 1.0.0
-status: 'In production'
+status: 'Ready'
 ---
 
 <div class="mp o-prose u-flow--prose">

package/src/components/grid/generic.njk

@@ -6,8 +6,10 @@ crumb: ["/components/grid/", "Grid"]
 ---
 
 <div class="u-flow--l">
+  <p>All <code>o-grid</code>s are single-column, full width, below 22.4em/358px. Three- and four-column grids begin to split into columns above 38em/608px, and two-column grids split into columns above 40em/640px.</p>
   <div class="u-flow--xs">
     <p class="u-step--1"><code>.o-grid .o-grid--of-two</code></p>
+    <p class="u-step--1 u-grey-step-1">Two columns above 40em/640px</p>
     <div class="o-grid o-grid--of-two">
       <div>
         <div class="c-library-grid"></div>
@@ -18,8 +20,35 @@ crumb: ["/components/grid/", "Grid"]
     </div>
   </div>
 
+  <div class="u-flow--xs">
+    <p class="u-step--1"><code>.o-grid .o-grid--of-two-late</code></p>
+    <p class="u-step--1 u-grey-step-1">Two columns above 55em/880px</p>
+    <div class="o-grid o-grid--of-two-late">
+      <div>
+        <div class="c-library-grid"></div>
+      </div>
+      <div>
+        <div class="c-library-grid"></div>
+      </div>
+    </div>
+  </div>
+
+  <div class="u-flow--xs">
+    <p class="u-step--1"><code>.o-grid .o-grid--of-two-early</code></p>
+    <p class="u-step--1 u-grey-step-1">Two columns above 22.4em/358px</p>
+    <div class="o-grid o-grid--of-two-early">
+      <div>
+        <div class="c-library-grid"></div>
+      </div>
+      <div>
+        <div class="c-library-grid"></div>
+      </div>
+    </div>
+  </div>
+
   <div class="u-flow--xs">
     <p class="u-step--1"><code>.o-grid .o-grid--of-three</code></p>
+    <p class="u-step--1 u-grey-step-1">Two columns above 38em/608px, then three columns above 55em/880px</p>
     <div class="o-grid o-grid--of-three">
       <div>
         <div class="c-library-grid"></div>
@@ -35,6 +64,7 @@ crumb: ["/components/grid/", "Grid"]
 
   <div class="u-flow--xs">
     <p class="u-step--1"><code>.o-grid .o-grid--of-three-late</code></p>
+    <p class="u-step--1 u-grey-step-1">Two columns above 38em/608px, then three columns above 68em/1088px</p>
     <div class="o-grid o-grid--of-three-late">
       <div>
         <div class="c-library-grid"></div>
@@ -50,6 +80,7 @@ crumb: ["/components/grid/", "Grid"]
   
   <div class="u-flow--xs">
     <p class="u-step--1"><code>.o-grid .o-grid--of-four</code></p>
+    <p class="u-step--1 u-grey-step-1">Two columns above 38em/608px, then three columns above 60em/960px</p>
     <div class="o-grid o-grid--of-four">
       <div>
         <div class="c-library-grid"></div>