mp-design-system 1.2.48 → 1.2.52

package/package.json

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

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/_includes/components/product-signpost/product-signpost.scss

@@ -21,11 +21,14 @@
     flex-shrink: 0;
   }
 
+  &__content {
+    flex-grow: 1;
+  }
+
   &__wrapper {
     display: flex;
     flex-direction: column;
-    @include space("gap", "xs-s");
-    max-width: 100%;
+    @include space('gap', 'xs-s');
   }
 
   .o-prose p {

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

@@ -6,7 +6,7 @@
       <ol class="u-flow--xs u-margin-top-2xs">
         <li><h3>Quick links</h3></li>
         <li><a href="/brand/resources">Brand resources</a></li>
-        <li><a href="/checklist">Franklin checklist</a></li>
+        <li><a href="/quickstart">Quick start guide</a></li>
       </ol>
       <div class="mp o-prose u-flow--prose u-step--1">
 

package/src/_redirects

@@ -5,4 +5,9 @@
 /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
+/checklist /quickstart 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/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,158 @@
   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%;
+      }
+
+      &--required:after {
+        content: '*';
+        color: color('red');
+        padding: 0 2px;
+        position: relative;
+        top: -2px;
+      }
+
+      & + * {
+        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/brand/resources.njk

@@ -50,7 +50,7 @@ tags: brand
 }) }}
 
 {{ twi({
-    link: "/static/pdf/Power of one Content guidance.pdf",
+    link: "/static/pdf/Power of One - Malvern Panalytical rebranding guidance.pdf",
     label: "Channel Partner & Field Marketing guide - Product rebranding and naming conventions",
     classes: "u-link u-border u-pad-s",
     icon: "file"

package/src/components/iconography.njk

@@ -31,6 +31,8 @@ Icons add visual noise to designs and should be used sparingly.
   'linkedin',
   'lock',
   'log-out',
+  'monitor',
+  'pin',
   'play',
   'rss',
   'search',

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-form__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-form__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-form__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-form__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-form__input c-form__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>