mp-design-system 1.2.41 → 1.2.43

package/package.json

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

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

@@ -66,6 +66,7 @@
         width: 2rem;
         @include margin('auto', 0);
         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;
+        flex-shrink: 0;
       }
     }
 

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

@@ -12,12 +12,13 @@
         }
   
         &__input-wrap {
+            display: flex;
             align-items: flex-start;
             gap: var(--space-s);
-            flex-wrap: wrap;
-            display: flex;
+            flex-wrap: nowrap;
             
             .c-label {
+                min-width: 115px;
                 flex-basis: 115px;
                 margin-bottom: 0;
                 
@@ -40,11 +41,20 @@
     }
 
     & > .c-fieldset {
-        & > *:not(:has(> .u-hidden)) + *:not(:has(> .u-hidden)) {
+        & > * + *:not(:has(> .u-hidden)) {
             @include padding-top('s');
         }
     }
 
+    .o-grid {
+        flex-wrap: wrap;
+        row-gap: var(--space-s);
+
+        .c-input {
+            flex-shrink: 1;
+        }
+    }
+
     .c-label--required:after {
         content: "*";
         color: color('red');
@@ -70,7 +80,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 +99,22 @@
   }
 
   & + & {
-    @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

@@ -12,7 +12,7 @@ tagTitle: Forms
 
 {% block content %}
 <div class="mp u-wrap u-margin-top-l u-margin-bottom-l-xl">
-  <div id="dynamicForm" class="o-grid o-grid--9/3 o-grid--layout">
+  <div id="dynamicForm" class="o-grid o-grid--8/3 o-grid--float o-grid--layout">
     <form id="EmailSales" class="mp-dynamicform u-bg-blue-step-3 u-pad-l" action="/en/about-us/contact-us/sales" method="post" name="dynamicForm" novalidate="">
       <input name="__RequestVerificationToken" type="hidden" value="Qi0kKqKOgcp5Eu-jjtGH2urIvru-qcwVkx788JhJvIwYb9O-8yHLaI6G-yQgyXXkHzsRRRMdWpzDIcC0OS6lg45vSQMtCyNJSZE0gWrZIINhqHclzzooFx3bTpKp_szrk2r0PKkYkmapgFP5UZ3Rwg2">
       <div class="validation-summary-valid" data-valmsg-summary="true">
@@ -195,7 +195,7 @@ tagTitle: Forms
           </div>
         </div>
         <div class="c-form__row o-grid o-grid--of-two">
-          <div class="c-form__input FirstName required ">
+          <div class="c-form__input FirstName required c-input-error">
             <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="">
@@ -511,6 +511,8 @@ tagTitle: Forms
               </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-form__input-wrap u-hidden">
               <label class="c-label u-pad-xs c-label--required" for="Province">Province</label>