mp-design-system 1.2.42 → 1.2.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mp-design-system",
-  "version": "1.2.42",
+  "version": "1.2.44",
   "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

@@ -10,14 +10,24 @@
             font-size: var(--step-4) !important;
             letter-spacing: -.02em;
         }
+
+        &__form.o-grid {
+            flex-wrap: wrap;
+            row-gap: var(--space-s);
+    
+            .c-input {
+                flex-shrink: 1;
+            }
+        }
   
         &__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;
                 
@@ -91,6 +101,7 @@
   & + & {
     @include padding-top('s');
     position: relative;
+
     &::before {
         content: '';
         position: absolute;
@@ -101,8 +112,8 @@
     }
   }
 
-  & .o-grid,
-  & .o-grid > * {
+  & > .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="">