mp-design-system 1.2.23 → 1.2.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mp-design-system",
-  "version": "1.2.23",
+  "version": "1.2.25",
   "description": "",
   "scripts": {
     "dev": "npm-run-all --parallel bundle:*",

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

@@ -55,6 +55,10 @@
   }
 
   &__logo {
+    display: block;
+    max-width: 216px;
+    width: 60%;
+
     img {
       @include margin-right('gutter');
       filter: saturate(0) brightness(10);

package/src/_includes/components/hero/hero.njk

@@ -33,12 +33,14 @@
       </header>
 
       {% if params.cta %}
-        {{ button({
-          link: params.cta.link,
-          inline: true,
-          label: params.cta.label,
-          color: 'green'
-        }) }}
+        <div class="c-hero__button-wrap">
+          {{ button({
+            link: params.cta.link,
+            inline: true,
+            label: params.cta.label,
+            color: 'green'
+          }) }}
+        </div>
       {% endif %}
     </div>
   </div>
@@ -70,7 +72,9 @@
   {% endif %}
 
   {% if params.longvideo %}
-    {{ button({ link: '', label: 'Play video', colour: 'outline-white', classes: 'c-hero__button', attrs: 'id=playVideo' }) }}
+    <div class="c-hero__video-button-wrap">
+      {{ button({ link: '', label: 'Play video', colour: 'outline-white', attrs: 'id=playVideo' }) }}
+    </div>
   {% endif %}
 </figure>
 

package/src/_includes/components/hero/hero.scss

@@ -1,3 +1,11 @@
+:root {
+  --body-width: min(100vw, calc(78.75rem + var(--gutter) + var(--gutter) ) );
+  --gutter-width: calc( (100vw - var(--body-width)) / 2 );
+  --text-width: min(100vw, 51.75rem);
+  --hero-gap: calc( var(--body-width) - var(--text-width));
+  --stop: calc( ( var(--hero-gap) + var(--gutter-width) ) *.8 );
+}
+
 .c-hero {
   background-color: color('blue', 'step-2');
   background: linear-gradient(to top right, color('petrol', 'step-3'), color('blue', 'step-2'));
@@ -59,6 +67,16 @@
     p {
       line-height: lh('prose');
     }
+
+    .c-hero__button-wrap {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--space-s);
+
+      &> .c-button {
+        margin: 0 !important;
+      }
+    }
   }
 
   &--image {
@@ -97,6 +115,12 @@
         background: radial-gradient(circle farthest-side at top right, rgba(color('grey', 'step--1'), 30%), color('grey', 'step--1'));
       }
     }
+
+    @media (min-width:70em) {
+      &:after {
+        background: linear-gradient(270deg, rgba(color('grey','step--1'),0%) var(--gutter-width), rgba(color('grey','step--1'),62%) var(--stop), color('grey','step--1'));
+      }
+    }    
   }
 
   &--homepage {
@@ -105,6 +129,20 @@
     @media (min-width: 38em) {
       background: linear-gradient(84.46deg, color('petrol', 'step--1') 7.52%, color('petrol') 44.84%, rgba(35, 80, 87, 0.8) 51.02%, rgba(52, 82, 87, 0.62) 54.99%, rgba(78, 86, 87, 0.2209) 59.54%, rgba(87, 87, 87, 0) 65.59%);
     }
+    
+    &::after {
+      position: absolute;
+      content: '';
+      top: 0;
+      left: 0;
+      background: rgba(black, 0.33);
+      width: 100%;
+      height: 100%;
+
+      @media (min-width: 38em) {
+        background: radial-gradient(circle farthest-side at top right, rgba(46, 50, 51, 0) 0%, rgba(46, 50, 51, 0) 15.16%, rgba(46, 50, 51, 0.2) 27.66%, rgba(41, 54, 56, 0.55) 39.61%, rgba(35, 66, 71, 0.8) 49.78%, #005461 59.87%, #003039 100%);
+      }
+    }
 
     .u-wrap {
       @include padding-bottom('l-3xl');
@@ -179,6 +217,17 @@
       }
     }
 
+    .u-wrap {
+      &::before,
+      &::after {
+        display: none;
+
+        @media (min-width: 38em) {
+          display: inline;
+        }
+      }
+    }
+
     .c-hero {
         &__video-bg {
         width: 100%;
@@ -203,14 +252,15 @@
         }
       }
 
-      &__button {
+      &__video-button-wrap {
         position: absolute;
         z-index: 2;
         right: 0;
         bottom: calc(56.25% / 2 - 25px);
         left: 0;
-        background: rgba(black, 0.2);
         margin: 0 auto;
+        display: flex;
+        justify-content: center;
 
         @media (min-width: 38em) {
           position: absolute;
@@ -219,6 +269,21 @@
           bottom: unset;
           left: unset;
         }
+
+        .c-button {
+          position: relative;
+
+          &::before {
+            content: '';
+            position: absolute;
+            background: rgba(black, 0.2);
+            height: 100%;
+            width: 100%;
+            top: 0;
+            left: 0;
+            border-radius: inherit;
+          }
+        }
       }
     }
   }
@@ -250,10 +315,14 @@
 
   &__canvas {
     position: absolute;
-    z-index: 1;
+    z-index: -1;
     height: 100%;
     width: 100%;
     left: 0;
     top: 0;
+
+    @media (min-width: 38em) { 
+      z-index: 1;
+    }
   }
 }

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

@@ -17,7 +17,7 @@
 
   &__image {
     margin-bottom: 0;
-    @include padding-right("s");
+    // @include padding-right("s");
     flex-shrink: 0;
   }
 
@@ -28,6 +28,7 @@
   &__wrapper {
     display: flex;
     flex-direction: column;
+    @include space('gap', 'xs-s');
   }
 
   .o-prose p {

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

@@ -2,7 +2,7 @@
 
 <footer class="mp c-footer" role="contentinfo">
   <nav class="c-footer__primary u-wrap" aria-label="Footer">
-    <div class="o-grid o-grid--8/3-switch o-grid--push">
+    <div class="o-grid o-grid--8/3-switch o-grid--push o-grid--layout">
       <ol class="u-flow--xs u-margin-top-2xs">
         <li><h3>Quick links</h3></li>
         <li><a href="/brand/resources">Brand resources</a></li>

package/src/assets/js/imports/hero-video.js

@@ -4,7 +4,7 @@ function HeroVideo() {
     if(typeof(videoBackground) != 'undefined' && videoBackground != null) {
       const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
       if(!reducedMotion || reducedMotion.matches) {
-        videoBackground.classList.add('u-hidden');
+        videoBackground.pause();
       }
       
       const lightboxTrigger = document.getElementById('playVideo');

package/src/assets/scss/utilities/display.scss

@@ -145,3 +145,8 @@
     display: none !important;
   }
 }
+
+// Used to hide un-compiled Vue code - Do not remove
+[v-cloak] {
+  display: none;
+}