mp-design-system 1.2.39 → 1.2.41

package/package.json

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

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

@@ -5,7 +5,7 @@
   appearance: none;
   border-radius: 0;
   font: inherit;
-  @include padding('xs');
+  @include padding('2xs');
   color: inherit;
   font-size: 1rem;
   display: block;
@@ -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],
@@ -118,38 +128,3 @@
     display: block;
   }
 }
-
-.c-label {
-  font-weight: weight('bold');
-  @include margin-bottom('2xs');
-  display: block;
-  align-self: center;
-}
-
-.c-fieldset {
-  border: 0;
-  padding: 0.01em 0 0 0;
-  margin: 0;
-  min-width: 0;
-
-  legend {
-    @extend .c-h--step-3;
-    font-weight: weight('bold');
-    letter-spacing: ls('-3%');
-    display: table;
-    float: left;
-    @include margin('xs', 0, 'l');
-    padding: 0;
-    width: 100%;
-
-    + * {
-        clear: both;
-    }
-  }
-
-  & + & {
-    border-top: 1px solid color('petrol', 'step-2');
-    @include margin-top('l-xl');
-    @include padding-top('l');
-  }
-}

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

@@ -1,43 +1,29 @@
 .mp-dynamicform {
     .c-form {
-        &__section {
-            padding: 36px;
-            padding: var(--space-l);
-            background: color('petrol', 'step-3');
+        &__header {
+            @extend .o-prose;
+            @include flow('s');
+            @include padding-bottom('m');
         }
 
-        &__section + .c-form__section {
-            border-top: 2px solid color('white');
-        }
-
-        &__section-title {
+        &__title {
+            font-size: var(--step-4) !important;
             letter-spacing: -.02em;
-            font-size: var(--step-3);
         }
-
-        .c-label--required:after {
-            content: "*";
-            color: color('red');
-            padding: 0 2px;
-            position: relative;
-            top: -2px;
-        }
-    }
-    
-    .c-input {
-        &__wrap {
+  
+        &__input-wrap {
             align-items: flex-start;
             gap: var(--space-s);
             flex-wrap: wrap;
             display: flex;
             
             .c-label {
-                flex-basis: 148px;
+                flex-basis: 115px;
                 margin-bottom: 0;
                 
                 &+ * {
-                flex: 1 0 148px;
-            }
+                    flex: 1 0 115px;
+                }
             }
         }
 
@@ -53,6 +39,20 @@
         }
     }
 
+    & > .c-fieldset {
+        & > *:not(:has(> .u-hidden)) + *: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;
@@ -66,4 +66,39 @@
     .c-radio + label {
         display: inline-block;
     }
+}
+
+.c-fieldset {
+  border: 0;
+  padding: 0.01em 0 0 0;
+  margin: 0;
+  min-width: 0;
+
+  legend {
+    @extend .c-h--step-1;
+    font-weight: weight('bold');
+    letter-spacing: ls('-3%');
+    display: table;
+    float: left;
+    padding: 0;
+    width: 100%;
+
+    + * {
+        clear: both;
+    }
+  }
+
+  & + & {
+    @include margin('s', 0, 0);
+    @include padding('s', 0);
+    border-top: 1px solid color('petrol', 'step-2');
+  }
+}
+
+.c-label {
+  @include margin-bottom('2xs');
+  display: block;
+  align-self: center;
+  font-size: var(--step--1);
+  font-weight: weight('bold');
 }

package/src/brand/resources.njk

@@ -5,6 +5,7 @@ sidebar: brand
 status: 'Ready'
 tags: brand
 ---
+
 {% from "components/prose/macro.njk" import markdown %}
 {% from "components/card/macro.njk" import card %}
 {% from "components/twi/macro.njk" import twi %}
@@ -28,7 +29,7 @@ tags: brand
 }) }}
 
 {{ twi({
-    link: "/static/adobe/MP%20Franklin%20colour%20swatches.ai"
+    link: "/static/adobe/MP%20Franklin%20colour%20swatches.ai",
     label: "Adobe colour swatches",
     classes: "u-link u-border u-pad-s",
     icon: "file"