mp-design-system 1.2.36 → 1.2.38

package/package.json

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

package/src/_includes/components/eyebrow/eyebrow.scss

@@ -8,6 +8,7 @@
   align-items: center;
   @include step(-1);
   letter-spacing: -.01em;
+  text-wrap: nowrap;
 
   &--blue {
     background-color: color('blue');

package/src/_includes/components/input/input.njk

@@ -1,13 +1,15 @@
 {% inputWrapper params.error %}
-  <label class="{{ 'u-hidden' if params.hideLabel else 'c-label' }}" for="{{ params.id }}">{{ params.label }}</label>
-  {% if params.button %}
-  <div class="u-flex u-border">
-  {% endif %}
-  <input type="{{ params.type or 'text' }}" class="c-input {{ 'c-input--with-button' if params.button }}{{ params.classes }}" name="{{ params.name or params.id }}" placeholder="{{ params.placeholder }}" id="{{ params.id }}" {{ 'required' if params.required }} {{ 'disabled' if params.disabled }} />
-  {% if params.button %}
-  <button type="button" class="mp c-button--white">Search</button>
-  {% endif %}
-  {% if params.button %}
+  <div class="c-input__wrap">
+    <label class="{{ 'u-hidden' if params.hideLabel else 'c-label' }}" for="{{ params.id }}">{{ params.label }}</label>
+    {% if params.button %}
+    <div class="u-flex u-border">
+    {% endif %}
+    <input type="{{ params.type or 'text' }}" class="c-input {{ 'c-input--with-button' if params.button }}{{ params.classes }}" name="{{ params.name or params.id }}" placeholder="{{ params.placeholder }}" id="{{ params.id }}" {{ 'required' if params.required }} {{ 'disabled' if params.disabled }} />
+    {% if params.button %}
+    <button type="button" class="mp c-button--white">Search</button>
+    {% endif %}
+    {% if params.button %}
+    </div>
+    {% endif %}
   </div>
-  {% endif %}
 {% endinputWrapper %}

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

@@ -58,19 +58,19 @@
     --error-state: #{color('red')};
     position: relative;
 
-    .c-input {
-      width: calc(100% - (27px + var(--space-xs)));
-    }
-
-    &:after {
-      content: '';
-      position: absolute;
-      top: 2.3em;
-      right: 0;
-      @include margin-left('xs');
-      @include padding('xs');
-      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;
-      background-size: 100% 100%;
+    .c-input__wrap,
+    &> field {
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        @include margin('auto', 0, 'auto', 'xs');
+        @include padding('xs');
+        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;
+        background-size: 100% 100%;
+      }
     }
   }
 
@@ -127,6 +127,7 @@
   font-weight: weight('bold');
   @include margin-bottom('2xs');
   display: block;
+  align-self: center;
 }
 
 .c-fieldset {

package/src/_includes/components/input/select.njk

@@ -1,11 +1,13 @@
 {% inputWrapper params.error %}
-  <label class="{{ 'u-hidden' if params.hideLabel else 'c-label' }}{{ params.classes }}" for="{{ params.id }}">{{ params.label }}</label>
-  <select class="c-input c-input--select" name="{{ params.name or params.id }}" id="{{ params.id }}" {{ 'required' if params.required }} {{ 'disabled' if params.disabled }}>
-    {% if params.placeholder %}<option value="">{{ params.placeholder }}</option>{% endif %}
-    {% if params.options | length %}
-      {% for option in params.options %}
-        <option value="{{ option[0] }}" {{ 'selected' if params.value == option[0] }}>{{ option[1] or option[0] }}</option>
-      {% endfor %}
-    {% endif %}
-  </select>
+  <div class="c-input__wrap">
+    <label class="{{ 'u-hidden' if params.hideLabel else 'c-label' }}{{ params.classes }}" for="{{ params.id }}">{{ params.label }}</label>
+    <select class="c-input c-input--select" name="{{ params.name or params.id }}" id="{{ params.id }}" {{ 'required' if params.required }} {{ 'disabled' if params.disabled }}>
+      {% if params.placeholder %}<option value="">{{ params.placeholder }}</option>{% endif %}
+      {% if params.options | length %}
+        {% for option in params.options %}
+          <option value="{{ option[0] }}" {{ 'selected' if params.value == option[0] }}>{{ option[1] or option[0] }}</option>
+        {% endfor %}
+      {% endif %}
+    </select>
+  </div>
 {% endinputWrapper %}

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

@@ -24,24 +24,26 @@
         }
     }
     
-    .c-input__wrap {
-        align-items: center;
-        gap: var(--space-s);
-        flex-wrap: wrap;
-        display: flex;
-        
-        .c-label {
-            flex-basis: 148px;
-            margin-bottom: 0;
+    .c-input {
+        &__wrap {
+            align-items: flex-start;
+            gap: var(--space-s);
+            flex-wrap: wrap;
+            display: flex;
             
-            &+ * {
-               flex: 1 0 148px;
-           }
+            .c-label {
+                flex-basis: 148px;
+                margin-bottom: 0;
+                
+                &+ * {
+                flex: 1 0 148px;
+            }
+            }
         }
 
-        &--messages {
+        &__messages-wrap {
             row-gap: 0;
-            margin-top: 0;
+            flex-basis: 100%;
     
             p {
                 @include margin-top('2xs');

package/src/assets/scss/utilities/flex.scss

@@ -37,3 +37,7 @@
 .u-flex-wrap {
   flex-wrap: wrap;
 }
+
+.u-flex-nowrap {
+  flex-wrap: nowrap;
+}

package/src/assets/scss/utilities/gap.scss

@@ -0,0 +1,3 @@
+.u-gap--s {
+  @include gap('s');
+}

package/src/assets/scss/utilities/index.scss

@@ -7,6 +7,7 @@ html body {
 @import './divider.scss';
 @import './wrap.scss';
 @import './flex.scss';
+@import './gap.scss';
 @import './display.scss';
 @import './flow.scss';
 @import './space.scss';

package/src/brand/resources.njk

@@ -27,6 +27,13 @@ tags: brand
     icon: "file"
 }) }}
 
+{{ twi({
+    link: "/static/adobe/MP%20Franklin%20colour%20swatches.ai"
+    label: "Adobe colour swatches",
+    classes: "u-link u-border u-pad-s",
+    icon: "file"
+})}}
+
 {{ twi({
     link: "https://malvern.sharepoint.com/:b:/r/sites/Intranet/Shared%20Documents/FINAL%20Tone%20of%20voice%20guidelines%20April%202021.pdf?csf=1&web=1&e=vW1Qzs",
     label: "Tone of voice guidelines",