mp-design-system 1.2.40 → 1.2.42

package/package.json

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

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

@@ -58,8 +58,8 @@
     --error-state: #{color('red')};
     position: relative;
 
-    .c-input__wrap,
-    &> field {
+    .c-form__input-wrap,
+    &> fieldset {
       &::after {
         content: '';
         height: 2rem;
@@ -68,6 +68,13 @@
         background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><circle cx="12" cy="12" r="12" fill="%23CE0058"/><path stroke="%23fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16.666 7.333l-9.333 9.334M7.333 7.333l9.333 9.334"/></svg>') no-repeat center;
       }
     }
+
+    &> fieldset::after {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+    }
   }
 
   &-error & {
@@ -79,9 +86,12 @@
   }
 
   &-message {
-    @include margin-top('2xs');
     @include step(-1);
     color: var(--error-state);
+    
+    &> * {
+      @include margin-top('2xs');
+    }
   }
 
   &[disabled],

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

@@ -22,7 +22,7 @@
                 margin-bottom: 0;
                 
                 &+ * {
-                    flex: 1 0 148px;
+                    flex: 1 0 115px;
                 }
             }
         }
@@ -40,7 +40,7 @@
     }
 
     & > .c-fieldset {
-        & > * + * {
+        & > * + *:not(:has(> .u-hidden)) {
             @include padding-top('s');
         }
     }
@@ -70,7 +70,7 @@
 
 .c-fieldset {
   border: 0;
-  padding: 0.01em 0 0 0;
+  padding: 0.01em 0 var(--space-s) 0;
   margin: 0;
   min-width: 0;
 
@@ -89,9 +89,21 @@
   }
 
   & + & {
-    @include margin('s', 0, 0);
-    @include padding('s', 0);
-    border-top: 1px solid color('petrol', 'step-2');
+    @include padding-top('s');
+    position: relative;
+    &::before {
+        content: '';
+        position: absolute;
+        height: 1px;
+        width: 100%;
+        background: color('petrol', 'step-2');
+        top: 0;
+    }
+  }
+
+  & .o-grid,
+  & .o-grid > * {
+    @include margin-bottom(0);
   }
 }
 

package/src/prototype/forms.njk

@@ -34,7 +34,7 @@ tagTitle: Forms
         <legend class="c-form__section-title">Your enquiry</legend>
         <div class="c-form__row ">
           <div class="c-form__input Product ">
-            <div class="c-input__wrap">
+            <div class="c-form__input-wrap">
               <label class="c-label u-pad-xs " for="Product">Product</label>
               <select class="c-input Product c-input--select" id="Product" name="Product">
                 <option value=""></option>
@@ -196,22 +196,22 @@ tagTitle: Forms
         </div>
         <div class="c-form__row o-grid o-grid--of-two">
           <div class="c-form__input FirstName required ">
-            <div class="c-input__wrap">
+            <div class="c-form__input-wrap">
               <label class="c-label u-pad-xs c-label--required" for="FirstName">First name</label>
               <input type="text" class="c-input" name="FirstName" value="" placeholder="" id="FirstName" required="">
             </div>
-            <div class="c-input-message c-input__wrap--messages">
+            <div class="c-input-message c-form__messages-wrap">
               <div class="errorFirstName u-display-none">
                 Please enter your first name.
               </div>
             </div>
           </div>
           <div class="c-form__input LastName required ">
-            <div class="c-input__wrap">
+            <div class="c-form__input-wrap">
               <label class="c-label u-pad-xs c-label--required" for="LastName">Last name</label>
               <input type="text" class="c-input" name="LastName" value="" placeholder="" id="LastName" required="">
             </div>
-            <div class="c-input-message c-input__wrap--messages">
+            <div class="c-input-message c-form__messages-wrap">
               <div class="errorLastName u-display-none">
                 Please enter your last name.
               </div>
@@ -219,12 +219,12 @@ tagTitle: Forms
           </div>
         </div>
         <div class="c-form__row ">
-          <div class="c-form__input EmailAddress required ">
-            <div class="c-input__wrap">
+          <div class="c-form__input EmailAddress required c-input-error">
+            <div class="c-form__input-wrap">
               <label class="c-label u-pad-xs c-label--required" for="EmailAddress">Email address</label>
               <input type="email" class="c-input" name="EmailAddress" value="" placeholder="" id="EmailAddress" required="">
             </div>
-            <div class="c-input-message c-input__wrap--messages">
+            <div class="c-input-message c-form__messages-wrap">
               <div class="errorEmailAddress u-display-none">
                 Please enter an email address.
               </div>
@@ -236,11 +236,11 @@ tagTitle: Forms
         </div>
         <div class="c-form__row ">
           <div class="c-form__input Telephone required ">
-            <div class="c-input__wrap">
+            <div class="c-form__input-wrap">
               <label class="c-label u-pad-xs c-label--required" for="Telephone">Telephone</label>
               <input type="tel" class="c-input" name="Telephone" value="" placeholder="" id="Telephone" required="">
             </div>
-            <div class="c-input-message c-input__wrap--messages">
+            <div class="c-input-message c-form__messages-wrap">
               <div class="errorTelephone u-display-none">
                 Please enter your telephone.
               </div>
@@ -252,11 +252,11 @@ tagTitle: Forms
         <legend class="c-form__section-title">About your company or institution</legend>
         <div class="c-form__row ">
           <div class="c-form__input CompanyName required ">
-            <div class="c-input__wrap">
+            <div class="c-form__input-wrap">
               <label class="c-label u-pad-xs c-label--required" for="CompanyName">Company / institution</label>
               <input type="text" class="c-input" name="CompanyName" value="" placeholder="" id="CompanyName" required="">
             </div>
-            <div class="c-input-message c-input__wrap--messages">
+            <div class="c-input-message c-form__messages-wrap">
               <div class="errorCompanyName u-display-none">
                 Please enter your company.
               </div>
@@ -265,18 +265,18 @@ tagTitle: Forms
         </div>
         <div class="c-form__row o-grid o-grid--of-two">
           <div class="c-form__input City required ">
-            <div class="c-input__wrap">
+            <div class="c-form__input-wrap">
               <label class="c-label u-pad-xs c-label--required" for="City">City</label>
               <input type="text" class="c-input" name="City" value="" placeholder="" id="City" required="">
             </div>
-            <div class="c-input-message c-input__wrap--messages">
+            <div class="c-input-message c-form__messages-wrap">
               <div class="errorCity u-display-none">
                 Please enter your city.
               </div>
             </div>
           </div>
           <div class="c-form__input Country required ">
-            <div class="c-input__wrap">
+            <div class="c-form__input-wrap">
               <label class="c-label u-pad-xs c-label--required" for="Country">Country</label>
               <select class="c-input c-input--select Country" name="Country" id="Country" required="">
                 <option value=""></option>
@@ -505,14 +505,16 @@ tagTitle: Forms
                 <option value="tcm:50-5215-1024">Zimbabwe</option>
               </select>
             </div>
-            <div class="c-input-message c-input__wrap--messages">
+            <div class="c-input-message c-form__messages-wrap">
               <div class="errorCountry u-display-none">
                 Please select your country.
               </div>
             </div>
           </div>
+        </div>
+        <div class="c-form__row o-grid o-grid--of-two">
           <div class="c-form__input Province u-hidden required ">
-            <div class="c-input__wrap u-hidden">
+            <div class="c-form__input-wrap u-hidden">
               <label class="c-label u-pad-xs c-label--required" for="Province">Province</label>
               <select class="c-input c-input--select Province" name="Province" id="Province" data-dependency="showif(Country%4990-1024)" required="" data-action="showif" data-parent="Country" data-value="4990-1024">
                 <option value=""></option>
@@ -531,12 +533,12 @@ tagTitle: Forms
                 <option value="tcm:50-4887-1024">Yukon Territory</option>
               </select>
             </div>
-            <div class="c-input-message c-input__wrap--messages">
+            <div class="c-input-message c-form__messages-wrap">
               <div class="errorProvince u-display-none"></div>
             </div>
           </div>
           <div class="c-form__input State u-hidden required ">
-            <div class="c-input__wrap u-hidden">
+            <div class="c-form__input-wrap u-hidden">
               <label class="c-label u-pad-xs c-label--required" for="State">State</label>
               <select class="c-input c-input--select State" name="State" id="State" data-dependency="showif(Country%4994-1024)" required="" data-action="showif" data-parent="Country" data-value="4994-1024">
                 <option value=""></option>
@@ -593,13 +595,13 @@ tagTitle: Forms
                 <option value="tcm:50-4989-1024">Wyoming</option>
               </select>
             </div>
-            <div class="c-input-message c-input__wrap--messages">
+            <div class="c-input-message c-form__messages-wrap">
               <div class="errorState u-display-none"></div>
             </div>
           </div>
         </div>
         <div class="c-form__row o-grid o-grid--of-two">
-          <div class="c-form__input callbackDay u-hidden">
+          <div class="c-form__input callbackDay required c-input-error">
             <fieldset class="u-flow--s">
               <label class="c-label u-pad-xs " for="CallbackDay">Request a callback (optional)</label>
               <span class="radio-item u-display-block">
@@ -622,12 +624,12 @@ tagTitle: Forms
                 <input class="c-radio" data-dependency="showif(Country%4994-1024,4990-1024,5093-1024,5175-1024,4993-1024,5069-1024,5008-1024,5185-1024,5048-1024,5142-1024,5184-1024,5064-1024,5120-1024,5035-1024,5007-1024,5135-1024,5086-1024,4991-1024)" id="callbackDay" name="callbackDay" type="radio" value="Friday" data-action="showif" data-parent="Country" data-value="4994-1024,4990-1024,5093-1024,5175-1024,4993-1024,5069-1024,5008-1024,5185-1024,5048-1024,5142-1024,5184-1024,5064-1024,5120-1024,5035-1024,5007-1024,5135-1024,5086-1024,4991-1024">
                 <label for="callbackDay_Friday" id="callbackDay_Friday">Friday</label>
               </span>
-              <button class="c-button--reset u-link" type="button" onclick="clearRadioButtons(this)">
+              <button class="c-button--reset u-link u-step--1" type="button" onclick="clearRadioButtons(this)">
                 Clear
               </button>
             </fieldset>
           </div>
-          <div class="c-form__input callbackTime u-hidden">
+          <div class="c-form__input callbackTime">
             <fieldset class="u-flow--s">
               <label class="c-label u-pad-xs " for="CallbackTime">Time slot (optional)</label>
               <span class="radio-item u-display-block">
@@ -646,7 +648,7 @@ tagTitle: Forms
                 <input class="c-radio" data-dependency="showif(Country%4994-1024,4990-1024,5093-1024,5175-1024,4993-1024,5069-1024,5008-1024,5185-1024,5048-1024,5142-1024,5184-1024,5064-1024,5120-1024,5035-1024,5007-1024,5135-1024,5086-1024,4991-1024)" id="callbackTime" name="callbackTime" type="radio" value="3pm - 5pm" data-action="showif" data-parent="Country" data-value="4994-1024,4990-1024,5093-1024,5175-1024,4993-1024,5069-1024,5008-1024,5185-1024,5048-1024,5142-1024,5184-1024,5064-1024,5120-1024,5035-1024,5007-1024,5135-1024,5086-1024,4991-1024">
                 <label for="callbackTime_3pm-5pm" id="callbackTime_3pm-5pm">3pm - 5pm</label>
               </span>
-              <button class="c-button--reset u-link" type="button" onclick="clearRadioButtons(this)">
+              <button class="c-button--reset u-link u-step--1" type="button" onclick="clearRadioButtons(this)">
                 Clear
               </button>
             </fieldset>