mp-design-system 0.5.0 → 0.5.7

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

@@ -5,8 +5,13 @@
   flex-direction: column;
   align-items: stretch;
 
-  &--alt {
+  &--alt,
+  &--event {
     background: color("petrol", "step-3");
+
+    &__specs {
+      color: color("grey", "step-1")
+    }
   }
 
   &--featured {
@@ -156,14 +161,6 @@
     @extend .u-16\/9;
   }
 
-  &--event {
-    background: color("petrol", "step-3");
-  }
-
-  &--event &__specs {
-    color: color("grey", "step-1");
-  }
-
   &__primary {
     @include flow("s");
   }

package/src/_includes/components/filter-search/filter-search.scss

@@ -16,6 +16,11 @@
     max-width: 792px;
     flex-grow: 8;
 
+    fieldset {
+      border: 0;
+      font-size: 0;
+    }
+
     .c-icon {
       font-size: 1.375rem;
     }

package/src/_includes/components/footer/footer.scss

@@ -21,6 +21,9 @@
   }
 
   &__sections {
+    @extend .o-grid, .o-grid--of-four;
+    @include margin-bottom(0);
+
     & > li {
       @include margin-bottom('gutter');
     }
@@ -90,24 +93,6 @@
   }
 
   @media (min-width: 43em) {
-    &__sections {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: space-between;
-
-      & > li {   
-        @include padding-right('s-m');
-
-        &:last-child {
-          padding-right: 0;
-        }
-      }
-
-      ul {
-        max-width: 250px;
-      }
-    }
-
     &__secondary .u-wrap {
       display: flex;
       justify-content: space-between;
@@ -131,3 +116,8 @@
     }
   }
 }
+
+// Temporary fix until RichTextRegion is fixed
+.rich-text-region + .c-footer {
+  @include margin-top('l-xl');
+}

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/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,46 +1,109 @@
+
 *,
 *: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;
 }
 
+// Font styles
+
+cite,
+address {
+  font-style: normal;
+}
+
+// Form
+
 [type="submit"],
 [type="button"],
 button {
@@ -59,4 +122,24 @@ button {
 .mp.c-button[disabled] {
   opacity: 0.5;
   cursor: not-allowed;
-}
+}
+
+label {
+  cursor: pointer;
+}
+
+fieldset {
+  border: 0;
+  padding: 0.01em 0 0 0;
+}
+
+// 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';

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/prototype/index.njk

@@ -20,7 +20,7 @@ tags: prototype
 {% block content %}
   {{ hero({
     title: "We’re BIG on small.",
-    content: '<p>We make scientific instruments and services that make the invisible visible, and the impossible possible.</p>',
+    content: '<p>We make scientific instruments and services that make the invisible visible, so you can make the impossible possible.</p>',
     cta: {
       label: 'About Malvern Panalytical',
       link: ''
@@ -115,16 +115,14 @@ tags: prototype
           <nav class="c-tabs__controls u-scroll-shadows--h">
             <ul class="c-tabs__controls-list">
               <li><a class="c-tabs__control c-tabs__control--active" href="#tab-industry-1">Primary materials</a></li>
-              <li><a class="c-tabs__control" href="#tab-industry-1">Pharmaceuticals and food</a></li>
-              <li><a class="c-tabs__control" href="#tab-industry-1">Advanced materials</a></li>
-              <li><a class="c-tabs__control" href="#tab-industry-1">Contract research services</a></li>
-              <li><a class="c-tabs__control" href="#tab-industry-1">Academia</a></li>
+              <li><a class="c-tabs__control" href="#tab-industry-2">Pharmaceuticals and food</a></li>
+              <li><a class="c-tabs__control" href="#tab-industry-3">Advanced materials</a></li>
             </ul>
           </nav>
           
           <div class="c-tabs__content">
             <div id="tab-industry-1" class="c-tab c-tab--active">
-              <div class="o-grid o-grid--of-four">
+              <div class="o-grid o-grid--of-four o-grid--swipeable">
                 {{ industryCard({
                   title: 'Building materials',
                   link: '',
@@ -165,6 +163,134 @@ tags: prototype
                     alt: ''
                   }
                 }) }}
+                {{ industryCard({
+                  title: 'Academia',
+                  link: '',
+                  image: {
+                    src: '/static/img/sector-1.jpg',
+                    alt: ''
+                  }
+                }) }}
+              </div>
+            </div>
+            <div id="tab-industry-2" class="c-tab">
+              <div class="o-grid o-grid--of-four o-grid--swipeable">
+                {{ industryCard({
+                  title: 'Biologics',
+                  link: '',
+                  image: {
+                    src: '/static/img/sector-3.jpg',
+                    alt: ''
+                  }
+                }) }}
+                {{ industryCard({
+                  title: 'Food and drink analysis',
+                  link: '',
+                  image: {
+                    src: '/static/img/sector-4.jpg',
+                    alt: ''
+                  }
+                }) }}
+                {{ industryCard({
+                  title: 'Pharmaceutical solutions',
+                  link: '',
+                  image: {
+                    src: '/static/img/sector-5.jpg',
+                    alt: ''
+                  }
+                }) }}
+                {{ industryCard({
+                  title: 'Contract research services',
+                  link: '',
+                  image: {
+                    src: '/static/img/sector-1.jpg',
+                    alt: ''
+                  }
+                }) }}
+                {{ industryCard({
+                  title: 'Academia',
+                  link: '',
+                  image: {
+                    src: '/static/img/sector-2.jpg',
+                    alt: ''
+                  }
+                }) }}
+              </div>
+            </div>
+            <div id="tab-industry-3" class="c-tab">
+              <div class="o-grid o-grid--of-four o-grid--swipeable">
+                {{ industryCard({
+                  title: 'Advanced manufacturing',
+                  link: '',
+                  image: {
+                    src: '/static/img/sector-5.jpg',
+                    alt: ''
+                  }
+                }) }}
+                {{ industryCard({
+                  title: 'Aerospace and automotive',
+                  link: '',
+                  image: {
+                    src: '/static/img/sector-1.jpg',
+                    alt: ''
+                  }
+                }) }}
+                {{ industryCard({
+                  title: 'Battery and energy',
+                  link: '',
+                  image: {
+                    src: '/static/img/sector-2.jpg',
+                    alt: ''
+                  }
+                }) }}
+                {{ industryCard({
+                  title: 'Electronics and semiconductors',
+                  link: '',
+                  image: {
+                    src: '/static/img/sector-3.jpg',
+                    alt: ''
+                  }
+                }) }}
+                {{ industryCard({
+                  title: 'Environmental monitoring and analysis',
+                  link: '',
+                  image: {
+                    src: '/static/img/sector-4.jpg',
+                    alt: ''
+                  }
+                }) }}
+                {{ industryCard({
+                  title: 'Forensic analysis',
+                  link: '',
+                  image: {
+                    src: '/static/img/sector-5.jpg',
+                    alt: ''
+                  }
+                }) }}
+                {{ industryCard({
+                  title: 'Nanomaterials',
+                  link: '',
+                  image: {
+                    src: '/static/img/sector-1.jpg',
+                    alt: ''
+                  }
+                }) }}
+                {{ industryCard({
+                  title: 'Polymers, plastics, fibers and elastomers',
+                  link: '',
+                  image: {
+                    src: '/static/img/sector-2.jpg',
+                    alt: ''
+                  }
+                }) }}
+                {{ industryCard({
+                  title: 'Specialty chemicals',
+                  link: '',
+                  image: {
+                    src: '/static/img/sector-3.jpg',
+                    alt: ''
+                  }
+                }) }}
               </div>
             </div>
           </div>

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

@@ -1,123 +0,0 @@
-*,
-*:before,
-*:after {
-  box-sizing: border-box;
-}
-
-body {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: stretch;
-  min-height: 100vh;
-}
-
-body {
-  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
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-ul,
-ol,
-dl {
-  margin: 0
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-  cursor: pointer;
-}
-
-// Lists
-
-.mp ol,
-.mp ul {
-  list-style: none;
-}
-
-// 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] {
-  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;
-  }
-}