mp-design-system 0.4.12 → 0.5.3

package/src/_includes/components/input/input.scss

@@ -30,6 +30,10 @@
     background-position: center right 1rem;
     background-repeat: no-repeat;
     background-size: 0.875em auto;
+
+    &::-webkit-calendar-picker-indicator {
+      display: none !important;
+    }
   }
 
   &--textarea {

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

@@ -21,7 +21,7 @@
     color: inherit;
   }
 
-  thead th {
+  th {
     background: color('petrol');
     color: color('white');
   }

package/src/_includes/components/usp/usp.scss

@@ -2,14 +2,20 @@
   @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 {
     max-width: 300px;
     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: -webkit-gradient(linear,
+        0% 0%,100% 100%,
+        from(color('petrol')),
+        to(color('blue')));
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       display: inline-block;

package/src/_includes/page.njk

@@ -3,10 +3,6 @@
 
 {% extends "layout.njk" %}
 
-{% block head %}
-    <link rel="stylesheet" href="https://www.malvernpanalytical.com/resource/css/malvernpanalytical.min.css?v=637466523520000000" />
-{% endblock %}
-
 {% block inner %}
     {{ header({
         siteNav: siteNav

package/src/assets/scss/elements/reset.scss

@@ -1,47 +1,140 @@
+
 *,
 *:before,
 *:after {
   box-sizing: border-box;
 }
 
+body {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: stretch;
+  min-height: 100vh;
+  margin: 0;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+blockquote,
+pre,
+ol,
+ul,
+figure {
+  padding: 0;
+  margin: 0;
+}
+
+img {
+  max-width: 100%;
+  display: block;
+  height: auto;
+  border: none;
+}
+
+article,
+aside,
+figure,
+footer,
+header,
+aside,
+main,
+nav {
+  display: block;
+}
+
+iframe {
+  border: none;
+}
+
+// Typography
+
 @mixin mp-reset-base {
   font: weight() #{1.125rem}/lh() $font-stack;
   @include step();
   color: color('grey');
 }
 
-.mp {
+body {
   @include mp-reset-base();
+}
 
-  a,
-  a:hover {
-    cursor: pointer;
-    color: inherit;
-  }
-
-  p {
-    margin-bottom: 0;
-  }
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+ol,
+dl {
+  margin: 0
+}
 
-  ul, ol {
-    line-height: lh();
-  }
+ul, ol, p {
+  line-height: lh();
+}
 
-  ol, p, ul {
-    line-height: lh();
-  }
+a {
+  text-decoration: none;
 }
 
-html {
-  scroll-behavior: smooth;
+a,
+a:hover {
+  cursor: pointer;
+  color: inherit;
 }
 
+// Lists
+
 .mp ol,
 .mp ul {
   list-style: none;
 }
 
-[disabled] {
+// Font styles
+
+cite,
+address {
+  font-style: normal;
+}
+
+// Form
+
+[type="submit"],
+[type="button"],
+button {
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  appearance: none;
+  padding: 0;
+  cursor: pointer;
+  border: none;
+  color: inherit;
+  font: inherit;
+}
+
+[disabled],
+.mp.c-button[disabled] {
   opacity: 0.5;
   cursor: not-allowed;
-}
+}
+
+label {
+  cursor: pointer;
+}
+
+// Animation
+
+@media (prefers-reduced-motion:reduce) {
+  * {
+    -webkit-animation: none!important;
+    animation: none!important;
+    transition: none!important;
+    scroll-behavior: auto!important;
+  }
+}

package/src/assets/scss/library.scss

@@ -1,6 +1,6 @@
 @import './tools';
 @import './foundations';
-@import './elements/reset-full';
+@import './elements/reset';
 @import './objects/syntax-highlighting';
 @import './utilities/hr.scss';
 @import './objects/grid';
@@ -26,13 +26,13 @@
     color: color('white');
     font-weight: weight('bold');
     
-    @media only screen and (min-width:600px) {
+    @media only screen and (min-width:650px) {
       @include step(-2);
       flex-direction: row;
       align-items: center;
     }
 
-    @media only screen and (min-width:900px) {
+    @media only screen and (min-width:1000px) {
       @include step(-1);
       @include padding('s', 's-l');
     }
@@ -565,7 +565,7 @@
 }
 
 // Header responsive styles
-@media only screen and (max-width: 900px) {
+@media only screen and (max-width: 1050px) {
   .c-library__logo-name span:nth-last-child(3),
   .c-library__logo-name span:nth-last-child(1) {
     @include step(-2);
@@ -580,7 +580,7 @@
   }
 }
 
-@media only screen and (min-width: 600px) and (max-width: 650px),
+@media only screen and (min-width: 650px) and (max-width: 700px),
             screen and (max-width: 450px) {
   .c-library__header nav .u-row {
     @include space('gap', '2xs');
@@ -589,7 +589,7 @@
 }
 
 .c-library__header {
-  @media only screen and (max-width: 600px) {
+  @media only screen and (max-width: 650px) {
     nav a {
       @include padding('2xs',0);
       display: block;

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

@@ -179,6 +179,27 @@ $grid-gutter-width: 36;
     }
   }
 
+  &--swipeable {
+    @media (max-width: 54.9375em) {
+      @include breakout('gutter');
+      flex-wrap: nowrap;
+      overflow-x: scroll;
+      scroll-snap-type: x mandatory;
+      -webkit-overflow-scrolling: touch;
+
+      & > * {
+        flex: 0 0 auto;
+        max-width: 23em;
+        width: calc(85vw - var(--gutter)*2.333); // !important
+        scroll-snap-align: center;
+      }
+
+      & > * + * {
+        margin-left: var(--gutter) !important;
+      }
+    }
+  }
+
   @media (min-width: 55em) {
     &--4\/7 > :nth-child(2n + 2),
     &--4\/7-switch > :nth-child(2n + 2) {

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

@@ -13,9 +13,9 @@
     @extend .c-h,.c-h--step-1;
   }
 
-  &.mp p,
-  &.mp ul,
-  &.mp ol {
+  p,
+  ul,
+  ol {
     line-height: lh('prose');
   }
 

package/src/assets/scss/tools/breakout.scss

@@ -0,0 +1,15 @@
+// Breakout
+// Force an element to fill 100% of the window width, ignoring its container
+
+@mixin breakout($pad: 0) {
+    left: 50%;
+    position: relative;
+    transform: translateX(-50vw);
+    width: 100vw;
+    padding-left: safe-space($pad);
+    padding-right: safe-space($pad);
+}
+
+.u-breakout {
+    @include breakout
+}

package/src/assets/scss/tools/index.scss

@@ -1,3 +1,5 @@
+@import './breakout.scss';
+
 @function color($palette, $tone: 'step-0') {
   @return map-get(map-get($colours, $palette), $tone);
 }

package/src/brand/visual/colors.njk

@@ -130,6 +130,38 @@ status: 'In production'
             }
         ]
     },
+    {
+        name: 'MP21UtilGold',
+        key: 'Utility-Orange',
+        steps: [
+            
+            {
+                name: "-1",
+                hex: 'AE7809',
+                cmyk: '29.51.100.10'
+            },
+            {
+                name: 0,    
+                hex: 'F2A60D',
+                cmyk: '04.38.100.00'
+            },
+            {
+                name: 1,
+                hex: 'F6BF51',
+                cmyk: '03.26.79.00'
+            },                
+            {
+                name: 2,
+                hex: 'FCEAC5',
+                cmyk: '01.07.25.00'
+            },
+            {
+                name: 3,
+                hex: 'FEF8EC',
+                cmyk: '00.02.06.00'
+            }
+        ]
+    },
     {
         name: 'MP21Charcoal',
         key: 'Grey',
@@ -181,8 +213,8 @@ status: 'In production'
                 </div>
                 <table class="c-table">
                     <tbody>
-                        <tr><th>Hex</th><td>#{{step.hex | upper}}</td></tr>
-                        <tr><th>CMYK</th><td>{{step.cmyk}}</td></tr>
+                        <tr><td>Hex</td><td>#{{step.hex | upper}}</td></tr>
+                        <tr><td>CMYK</td><td>{{step.cmyk}}</td></tr>
                     </tbody>
                 </table>
             {% endfor %}
@@ -190,6 +222,27 @@ status: 'In production'
     {% endfor%}
 </div>
 
+{{ markdown({
+    content: "# When to use color
+    
+The color palette works best when it's used in a balanced way; too much of a strong color can make a design feel crowded or busy. Instead, try to keep your designs to mainly white backgrounds, with Grey text, and splashes of color to highlight important elements.
+
+**Petrol** is our primary color - it represents Malvern Panalytical's spirit and personality. Along with **Blue** it is the color you will use most often in your designs.
+
+**Green** is reserved for _calls to action_ - the single most important action that we want a reader or viewer to take next. On a web page for example, this would be the \"buy now\" button.
+
+**Rubine** is reserved for important notices or warnings. It's such an eye-catching color that it must be used sparingly.
+
+**Utility Gold** is intended for notices which are less urgent than Rubine. It can also be used sparingly as an accent color, to contrast against Petrol and Blue.
+
+**Grey** is widely used for text in all designs.
+
+## Tints and shades
+Each color is provided in _steps_. Step 0 is the \"default\" for each color. If you need a colored background, consider using step 2 or 3, as step 0 or 1 will often be too overpowering.
+
+Using Petrol step 3 as a background color (instead of grey) can be a nice way to introduce a bit of our personality into a design."
+}) }}
+
 {{ alert({
     type: 'warning',
     content: '<ul>

package/src/patterns/grid-of-cards.njk

@@ -5,7 +5,7 @@ layout: patterns-page
 
 {% from "components/card/macro.njk" import card %}
 
-<div class="o-grid o-grid--of-three">
+<div class="o-grid o-grid--of-three o-grid--swipeable">
   {% for _ in [0, 1, 2] %}
     {{ card({
       theme: {

package/src/prototype/index.njk

@@ -20,12 +20,20 @@ tags: prototype
 {% block content %}
   {{ hero({
     title: "We’re BIG on small.",
-    content: '<p>We make scientific instruments that make the invisible visible, and the impossible possible. For over 30 years, we’ve partnered with many of the world’s most pioneering companies, universities and research organizations so they can improve everything from the energies that power us and the materials we create with, to medicines that cure us and the food we enjoy.</p>',
+    content: '<p>We make scientific instruments and services that make the invisible visible, and the impossible possible.</p>',
     cta: {
       label: 'About Malvern Panalytical',
       link: ''
     },
-    noCover: true
+    homepage: "dark",
+    images: [
+      { "src": "/static/img/homepage_1_back_alt.webp" },
+      { "src": "/static/img/homepage_2_back_alt.webp" }
+    ],
+    frontimages: [
+      { "src": "/static/img/homepage_1_front_full.webp" },
+      { "src": "/static/img/homepage_2_front_full.webp" }
+    ]
   }) }}
 
   <section class="mp c-slat c-slat--padded c-slat--white u-flow--l-2xl">
@@ -191,7 +199,7 @@ tags: prototype
 
         <div class="c-tabs__content">
           <div id="tab-webinars" class="c-tab c-tab--active">
-            <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/prototype/webinars-3-2-1.njk

@@ -1,7 +1,7 @@
 ---
 title: Webinars and events
 tags: prototype
-tagTitle: Webinars
+tagTitle: Webinars - featured layout
 ---
 
 {% from "components/button/macro.njk" import button %}
@@ -22,7 +22,7 @@ tagTitle: Webinars
 
     <aside class="u-flow">
       <h3 class="c-h c-h--upper">Featured 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/prototype/webinars.njk

@@ -8,6 +8,7 @@ tagTitle: Webinars
 {% from "components/filter-search/macro.njk" import filterSearch %}
 {% from "components/tabs/macro.njk" import tabsRadio %}
 {% from "components/card/macro.njk" import card %}
+{% from "components/twi/macro.njk" import twi %}
 
 {% set siteNav %}{% include "navigation/corporate.njk" %}{% endset %}
 
@@ -23,7 +24,7 @@ tagTitle: Webinars
 
     <aside class="u-flow">
       <h3 class="c-h c-h--upper">Featured 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',
@@ -183,7 +184,7 @@ tagTitle: Webinars
         </aside>
         <main class="u-flow">
           <header class="u-split u-step--1">
-            <span>Results (12)</span>
+            <span>12 results</span>
             <span>Sorted by nearest date</span>
           </header>
 
@@ -313,6 +314,86 @@ tagTitle: Webinars
             link: '/prototype/webinar'
           }) }}
 
+          {{ card({
+            theme: {
+              layout: 'single',
+              size: 'medium',
+              name: 'alt',
+              corner: true
+            },
+            header: {
+              title: 'Discover how on-line particle sizing optimises mining analytics.',
+              meta: ['English'],
+              date: {
+                date: '2021-05-13' | createDate,
+                time: '11:00 – 1200',
+                timezone: 'EST'
+              }
+            },
+            link: '/prototype/webinar'
+          }) }}
+
+          {{ card({
+            theme: {
+              layout: 'single',
+              size: 'medium',
+              name: 'alt',
+              corner: true
+            },
+            header: {
+              title: 'Ask us Anything: The API Edition - API Characterization & Developability',
+              meta: ['English'],
+              date: {
+                date: '2021-05-18' | createDate,
+                time: '11:00 – 1200',
+                timezone: 'EST'
+              }
+            },
+            link: '/prototype/webinar'
+          }) }}
+
+          {{ card({
+            theme: {
+              layout: 'single',
+              size: 'medium',
+              name: 'alt',
+              corner: true
+            },
+            header: {
+              title: 'Zetium ED X-ray fluorescence SuperQ application course',
+              meta: ['English'],
+              date: {
+                date: '2021-06-01' | createDate,
+                time: '11:00 – 1200',
+                timezone: 'EST'
+              }
+            },
+            link: '/prototype/webinar'
+          }) }}
+
+          {{ card({
+            theme: {
+              layout: 'single',
+              size: 'medium',
+              name: 'alt',
+              corner: true
+            },
+            header: {
+              title: 'Discover how on-line particle sizing optimises mining analytics.',
+              meta: ['English'],
+              date: {
+                date: '2021-06-07' | createDate,
+                time: '11:00 – 1200',
+                timezone: 'EST'
+              }
+            },
+            link: '/prototype/webinar'
+          }) }}
+
+        <footer class="u-split u-step--1 u-margin-top-m">
+          <span>Page 1 of 2</span>
+          {{ twi({ classes: 'u-link u-step--1', label: "Next page", icon: 'arrow-right', align: 'right', link: "#" }) }}
+        </footer>
 
         </main>
       </div>