mp-design-system 1.2.47 → 1.2.50

package/package.json

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

package/src/_headers

@@ -1,5 +1,5 @@
 /*
-  Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' polyfill.io; style-src 'self' 'unsafe-inline' fonts.googleapis.com; img-src 'self' data: p3.aprimocdn.net img.youtube.com; font-src 'self' fonts.gstatic.com; frame-src 'self' brand.malvernpanalytical.com www.youtube.com; frame-ancestors 'self' brand.malvernpanalytical.com; object-src 'none'; base-uri 'self'; form-action 'self'; upgrade-insecure-requests; block-all-mixed-content; sandbox allow-forms allow-same-origin allow-scripts allow-downloads;
+  Content-Security-Policy: default-src 'self'; base-uri 'self'; block-all-mixed-content; font-src 'self' https://fonts.gstatic.com; form-action 'self'; frame-src 'self' https://brand.malvernpanalytical.com https://www.youtube.com https://challenges.cloudflare.com https://newassets.hcaptcha.com; frame-ancestors 'self' https://brand.malvernpanalytical.com; img-src 'self' data: https://p3.aprimocdn.net https://img.youtube.com; object-src 'none'; picture-in-picture 'self'; sandbox allow-forms allow-same-origin allow-scripts allow-downloads; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://polyfill.io https://eu.altcha.org https://challenges.cloudflare.com https://js.hcaptcha.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; upgrade-insecure-requests;
   X-Content-Type-Options: nosniff
   X-Frame-Options: SAMEORIGIN
   X-XSS-Protection: 1; mode=block

package/src/_includes/components/accordion/accordion.scss

@@ -46,4 +46,9 @@
     &__content {
         @include padding-left('l-xl');
     }
+}
+
+// Fix for Tridion mangling the HTML
+.o-prose .c-accordion > dd:not([class]) {
+    margin-left: 0;
 }

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

@@ -110,6 +110,7 @@
 
       &.c-card--size-large.c-card--featured {
         img {
+          aspect-ratio: 2;
           height: 100%;
           object-fit: cover;
         }

package/src/_redirects

@@ -5,4 +5,8 @@
 /brand/visual/colors /brand/colors 301
 /brand/visual/images /brand/images 301
 /brand/visual/logo /brand/logo 301
-/brand/visual/typography /brand/typography 301
+/brand/visual/typography /brand/typography 301
+http://project-franklin.netlify.app https://brand.malvernpanalytical.com 301
+https://project-franklin.netlify.app https://brand.malvernpanalytical.com 301
+http://project-franklin.netlify.app/* https://brand.malvernpanalytical.com/:splat 301
+https://project-franklin.netlify.app/* https://brand.malvernpanalytical.com/:splat 301

package/src/assets/js/imports/off-canvas.js

@@ -40,8 +40,6 @@ function isVisible(element) {
 // Function to handle off-canvas behavior based on visibility
 function handleOffCanvas(toggle, isVisible) {
   const target = document.getElementById(toggle.getAttribute('data-target'));
-  console.log(target);
-  console.log(isVisible);
   if (isVisible === true) {
     createOffCanvas(target);
   } else {

package/src/assets/scss/components/form.scss

@@ -1,99 +1,99 @@
 .mp-dynamicform {
-    .c-form {
-        &__header {
-            @extend .o-prose;
-            @include flow('s');
-            @include padding-bottom('m');
-        }
+  .c-form {
+    &__header {
+      @extend .o-prose;
+      @include flow('s');
+      @include padding-bottom('m');
+    }
 
-        &__title {
-            font-size: var(--step-4) !important;
-            letter-spacing: -.02em;
-        }
+    &__title {
+      font-size: var(--step-4) !important;
+      letter-spacing: -0.02em;
+    }
 
-        &__row.o-grid {
-            flex-wrap: wrap;
-            gap: var(--space-s);
-
-            .c-form__input {
-                flex: 1 0 298px;
-            
-                @media only screen and (max-width: 31.25em) {
-                    flex-shrink: 1;
-                }
-            }
-    
-            .c-input {
-                flex-shrink: 1;
-            }
-        }
-  
-        &__input-wrap {
-            display: flex;
-            gap: var(--space-3xs) var(--space-s);
-            flex-wrap: wrap;
-            align-items: flex-start;
-            
-            .c-label {
-                min-width: 115px;
-                flex-basis: 115px;
-                @include margin-bottom(0);
-                word-wrap: break-word;
-            
-                @media only screen and (max-width: 31.25em) {
-                    flex-basis: 100%;
-                }
-                
-                &+ * {
-                    flex: 1 0 115px;
-                }
-            }
-
-            .c-input--textarea {
-                flex-basis: 100%;
-            }
-        }
+    &__row.o-grid {
+      flex-wrap: wrap;
+      gap: var(--space-s);
 
-        &__messages-wrap {
-            row-gap: 0;
-            flex-basis: 100%;
-    
-            p {
-                @include margin-top('2xs');
-                letter-spacing: -.01em;
-                font-size: var(--step--1);
-            }
+      .c-form__input {
+        flex: 1 0 298px;
+
+        @media only screen and (max-width: 31.25em) {
+          flex-shrink: 1;
         }
+      }
+
+      .c-input {
+        flex-shrink: 1;
+      }
     }
 
-    & > .c-fieldset,
-    & > .c-tab > .c-fieldset {
-        & > * + *:not(:has(> .u-hidden)) {
-            @include padding-top('s');
+    &__input-wrap {
+      display: flex;
+      gap: var(--space-3xs) var(--space-s);
+      flex-wrap: wrap;
+      align-items: flex-start;
+
+      .c-label {
+        min-width: 115px;
+        flex-basis: 115px;
+        @include margin-bottom(0);
+        word-wrap: break-word;
+
+        @media only screen and (max-width: 31.25em) {
+          flex-basis: 100%;
         }
-    }
 
-    .c-label--required:after {
-        content: "*";
-        color: color('red');
-        padding: 0 2px;
-        position: relative;
-        top: -2px;
-    }
+        & + * {
+          flex: 1 0 115px;
+        }
+      }
 
-    .c-input__spacer {
-        height: 0;
-        flex-basis: 148px;
+      .c-input--textarea {
+        flex-basis: 100%;
+      }
     }
 
-    .c-input--select {
-        cursor: pointer;
+    &__messages-wrap {
+      row-gap: 0;
+      flex-basis: 100%;
+
+      p {
+        @include margin-top('2xs');
+        letter-spacing: -0.01em;
+        font-size: var(--step--1);
+      }
     }
+  }
 
-    .c-checkbox + label,
-    .c-radio + label {
-        display: inline-block;
+  & > .c-fieldset,
+  & > .c-tab > .c-fieldset {
+    & > * + *:not(:has(> .u-hidden)) {
+      @include padding-top('s');
     }
+  }
+
+  .c-label--required:after {
+    content: '*';
+    color: color('red');
+    padding: 0 2px;
+    position: relative;
+    top: -2px;
+  }
+
+  .c-input__spacer {
+    height: 0;
+    flex-basis: 148px;
+  }
+
+  .c-input--select {
+    cursor: pointer;
+  }
+
+  .c-checkbox + label,
+  .c-radio + label {
+    display: inline-block;
+  }
 }
 
 .c-fieldset {
@@ -112,7 +112,7 @@
     width: 100%;
 
     + * {
-        clear: both;
+      clear: both;
     }
   }
 
@@ -121,12 +121,12 @@
     position: relative;
 
     &::before {
-        content: '';
-        position: absolute;
-        height: 1px;
-        width: 100%;
-        background: color('petrol', 'step-2');
-        top: 0;
+      content: '';
+      position: absolute;
+      height: 1px;
+      width: 100%;
+      background: color('petrol', 'step-2');
+      top: 0;
     }
   }
 
@@ -143,4 +143,150 @@
   align-self: center;
   font-size: var(--step--1);
   font-weight: weight('bold');
-}
+}
+
+/* === MP FORM === */
+.mp-dynamicform {
+  &.c-form {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-s);
+
+    &:not(.c-tabs__content) {
+      background: color('blue', 'step-3');
+      @include padding('s-l');
+    }
+  }
+
+  .c-form {
+    &__header {
+      @extend .o-prose;
+      @include flow('s');
+      @include padding-bottom('2xs');
+    }
+
+    &__heading {
+      font-size: var(--step-4) !important;
+      letter-spacing: -0.02em;
+    }
+
+    // &__lede {
+    // }
+
+    &__section {
+      min-width: 0;
+      margin: 0;
+      border: 0;
+      display: flex;
+      flex-flow: column;
+      gap: var(--space-s);
+
+      &--submit {
+        align-items: flex-start;
+
+        .c-button {
+          @include margin(0);
+        }
+      }
+    }
+
+    &__section + .c-form__section:not(.c-form__section--submit) {
+      @include padding-top('s');
+      position: relative;
+
+      &::before {
+        content: '';
+        position: absolute;
+        height: 1px;
+        width: 100%;
+        background: color('petrol', 'step-2');
+        top: 0;
+      }
+    }
+
+    &__section-title {
+      @extend .c-h--step-1;
+      font-weight: weight('bold');
+      letter-spacing: ls('-3%');
+      display: table;
+      float: left;
+      padding: 0;
+      width: 100%;
+    }
+
+    &__group {
+      &.o-grid {
+        @include margin(0);
+        @include padding(0);
+        flex-wrap: wrap;
+        gap: var(--space-s);
+
+        .c-form__field {
+          flex: 1 0 298px;
+
+          @media only screen and (max-width: 31.25em) {
+            flex-shrink: 1;
+          }
+        }
+
+        .c-form__input {
+          flex-shrink: 1;
+        }
+      }
+    }
+
+    &__field {
+      @include margin-bottom(0);
+    }
+
+    &__input-wrap {
+      display: flex;
+      gap: var(--space-3xs) var(--space-s);
+      flex-wrap: wrap;
+      align-items: flex-start;
+    }
+
+    &__label {
+      @extend .c-label;
+      min-width: 115px;
+      flex-basis: 115px;
+      word-wrap: break-word;
+
+      @media only screen and (max-width: 31.25em) {
+        flex-basis: 100%;
+      }
+
+      & + * {
+        flex: 1 0 115px;
+      }
+    }
+
+    &__input {
+      @extend .c-input;
+
+      &--checkbox {
+        @extend .c-checkbox;
+      }
+
+      &--select {
+        @extend .c-input, .c-input--select;
+      }
+
+      &--textarea {
+        @extend .c-input, .c-input--textarea;
+        flex-basis: 100%;
+      }
+    }
+
+    &__messages-wrap {
+      row-gap: 0;
+      flex-basis: 100%;
+
+      p {
+        @include margin-top('2xs');
+        letter-spacing: -0.01em;
+        font-size: var(--step--1);
+      }
+    }
+  }
+}

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

@@ -139,6 +139,10 @@
   }
 }
 
+.u-4\/1 {
+  aspect-ratio: 4;
+}
+
 
 @media (min-width: 640px) {
   .u-md-hidden {

package/src/patterns/mp-form.njk

@@ -0,0 +1,111 @@
+---
+title: New Style Form
+layout: patterns-page
+---
+
+<div class="o-grid o-grid--8/3 o-grid--float o-grid--layout">
+   <form class="mp-dynamicform c-form">
+      <header class="c-form__header">
+         <h1 class="c-form__heading">You're almost done...</h1>
+         <p class="c-form__lede">Just one more step and our sales team will have everything they need to contact you. Complete the form below and our team will aim to be in touch within 1 business day.</p>
+      </header>
+      <fieldset class="c-form__section">
+         <legend class="c-form__section-title">Your enquiry</legend>
+         <div class="c-form__group">
+            <div class="c-form__field Product">
+               <div class="c-form__input-wrap">
+                  <label class="c-form__label" for="Product">Product</label>
+                  <select class="c-form__input c-form__input--select Product" name="Product" id="Product">
+                     <option value=""></option>
+                     <option value="option-1">Option 1</option>
+                     <option value="option-2">Option 2</option>
+                     <option value="option-3">Option 3</option>
+                  </select>
+               </div>
+            </div>
+         </div>
+         <div class="c-form__group o-grid o-grid--of-two">
+            <div class="c-form__field FirstName required">
+               <div class="c-form__input-wrap">
+                  <label class="c-form__label c-form__label--required" for="FirstName">First name</label>
+                  <input type="text" class="c-form__input" name="FirstName" value="" placeholder="" id="FirstName" required="" />
+               </div>
+            </div>
+            <div class="c-form__field LastName required">
+               <div class="c-form__input-wrap">
+                  <label class="c-form__label c-form__label--required" for="LastName">Last name</label>
+                  <input type="text" class="c-form__input" name="LastName" value="" placeholder="" id="LastName" required="" />
+               </div>
+            </div>
+         </div>
+         <div class="c-form__group">
+            <div class="c-form__field EmailAddress required">
+               <div class="c-form__input-wrap">
+                  <label class="c-form__label c-form__label--required" for="EmailAddress">Email address</label>
+                  <input type="email" class="c-input" name="EmailAddress" value="" placeholder="" id="EmailAddress" required="" />
+               </div>
+            </div>
+         </div>
+         <div class="c-form__group">
+            <div class="c-form__field Telephone required">
+               <div class="c-form__input-wrap">
+                  <label class="c-form__label c-form__label--required" for="Telephone">Telephone</label>
+                  <input type="tel" class="c-input" name="Telephone" value="" placeholder="" id="Telephone" required="" />
+               </div>
+            </div>
+         </div>
+      </fieldset>
+      <fieldset class="c-form__section">
+         <legend class="c-form__section-title">
+            About your company or institution
+         </legend>
+         <div class="c-form__group">
+            <div class="c-form__field CompanyName required">
+               <div class="c-form__input-wrap">
+                  <label class="c-form__label c-form__label--required" for="CompanyName">Company / institution</label>
+                  <input type="text" class="c-input" name="CompanyName" value="" placeholder="" id="CompanyName" required="" />
+               </div>
+            </div>
+         </div>
+         <div class="c-form__group o-grid o-grid--of-two">
+            <div class="c-form__field City required">
+               <div class="c-form__input-wrap">
+                  <label class="c-form__label c-form__label--required" for="City">City</label>
+                  <input type="text" class="c-input" name="City" value="" placeholder="" id="City" required="" />
+               </div>
+            </div>
+            <div class="c-form__field Country required">
+               <div class="c-form__input-wrap">
+                  <label class="c-form__label c-form__label--required" for="Country">Country</label>
+                  <select class="c-input c-input--select Country" name="Country" id="Country" required="">
+                     <option value=""></option>
+                     <option value="option-1">Option 1</option>
+                     <option value="option-2">Option 2</option>
+                     <option value="option-3">Option 3</option>
+                  </select>
+               </div>
+            </div>
+         </div>
+      </fieldset>
+      <fieldset class="c-form__section">
+         <legend class="c-form__section-title">More details</legend>
+         <div class="c-form__group">
+            <div class="c-form__field ApplicationDetails">
+               <div class="c-form__input-wrap">
+                  <label class="c-form__label u-flex-1" for="ApplicationDetails">Please give more details about your requirements / application (optional)</label>
+                  <textarea class="c-form__input c-form__input--textarea ApplicationDetails" cols="20" id="ApplicationDetails" name="ApplicationDetails" rows="2"></textarea>
+               </div>
+            </div>
+         </div>
+         <div class="c-form__group">
+            <div class="c-form__field emailOptIn">
+               <input class="c-form__input c-form__input--checkbox" id="emailOptIn" name="emailOptIn" type="checkbox" value="true" /><input name="emailOptIn" type="hidden" value="false" />
+               <label for="emailOptIn">I wish to receive emails tailored to my personal preferences (you can unsubscribe at any time)<br />For more information please read our <a class="u-link" href="">Privacy Policy</a></label>
+            </div>
+         </div>
+      </fieldset>
+      <div class="c-form__section c-form__section--submit">
+        <button id="btnSubmit" class="mp c-button c-button--inline">Contact sales</button>
+      </div>
+   </form>
+</div>