mp-design-system 1.2.40 → 1.2.41

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/build/scss/main.css +1 -1
  2. package/dist/build/scss/main.css.map +1 -1
  3. package/package.json +1 -1
  4. package/src/_includes/components/input/input.scss +13 -3
  5. package/src/assets/scss/components/form.scss +2 -2
  6. package/src/prototype/forms.njk +24 -24
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mp-design-system",
3
- "version": "1.2.40",
3
+ "version": "1.2.41",
4
4
  "description": "",
5
5
  "scripts": {
6
6
  "dev": "npm-run-all --parallel bundle:*",
package/src/_includes/components/input/input.scss CHANGED
@@ -58,8 +58,8 @@
58
58
  --error-state: #{color('red')};
59
59
  position: relative;
60
60
 
61
- .c-input__wrap,
62
- &> field {
61
+ .c-form__input-wrap,
62
+ &> fieldset {
63
63
  &::after {
64
64
  content: '';
65
65
  height: 2rem;
@@ -68,6 +68,13 @@
68
68
  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;
69
69
  }
70
70
  }
71
+
72
+ &> fieldset::after {
73
+ position: absolute;
74
+ top: 0;
75
+ right: 0;
76
+ bottom: 0;
77
+ }
71
78
  }
72
79
 
73
80
  &-error & {
@@ -79,9 +86,12 @@
79
86
  }
80
87
 
81
88
  &-message {
82
- @include margin-top('2xs');
83
89
  @include step(-1);
84
90
  color: var(--error-state);
91
+
92
+ &> * {
93
+ @include margin-top('2xs');
94
+ }
85
95
  }
86
96
 
87
97
  &[disabled],
package/src/assets/scss/components/form.scss CHANGED
@@ -22,7 +22,7 @@
22
22
  margin-bottom: 0;
23
23
 
24
24
  &+ * {
25
- flex: 1 0 148px;
25
+ flex: 1 0 115px;
26
26
  }
27
27
  }
28
28
  }
@@ -40,7 +40,7 @@
40
40
  }
41
41
 
42
42
  & > .c-fieldset {
43
- & > * + * {
43
+ & > *:not(:has(> .u-hidden)) + *:not(:has(> .u-hidden)) {
44
44
  @include padding-top('s');
45
45
  }
46
46
  }
package/src/prototype/forms.njk CHANGED
@@ -34,7 +34,7 @@ tagTitle: Forms
34
34
  <legend class="c-form__section-title">Your enquiry</legend>
35
35
  <div class="c-form__row ">
36
36
  <div class="c-form__input Product ">
37
- <div class="c-input__wrap">
37
+ <div class="c-form__input-wrap">
38
38
  <label class="c-label u-pad-xs " for="Product">Product</label>
39
39
  <select class="c-input Product c-input--select" id="Product" name="Product">
40
40
  <option value=""></option>
@@ -196,22 +196,22 @@ tagTitle: Forms
196
196
  </div>
197
197
  <div class="c-form__row o-grid o-grid--of-two">
198
198
  <div class="c-form__input FirstName required ">
199
- <div class="c-input__wrap">
199
+ <div class="c-form__input-wrap">
200
200
  <label class="c-label u-pad-xs c-label--required" for="FirstName">First name</label>
201
201
  <input type="text" class="c-input" name="FirstName" value="" placeholder="" id="FirstName" required="">
202
202
  </div>
203
- <div class="c-input-message c-input__wrap--messages">
203
+ <div class="c-input-message c-form__messages-wrap">
204
204
  <div class="errorFirstName u-display-none">
205
205
  Please enter your first name.
206
206
  </div>
207
207
  </div>
208
208
  </div>
209
209
  <div class="c-form__input LastName required ">
210
- <div class="c-input__wrap">
210
+ <div class="c-form__input-wrap">
211
211
  <label class="c-label u-pad-xs c-label--required" for="LastName">Last name</label>
212
212
  <input type="text" class="c-input" name="LastName" value="" placeholder="" id="LastName" required="">
213
213
  </div>
214
- <div class="c-input-message c-input__wrap--messages">
214
+ <div class="c-input-message c-form__messages-wrap">
215
215
  <div class="errorLastName u-display-none">
216
216
  Please enter your last name.
217
217
  </div>
@@ -219,12 +219,12 @@ tagTitle: Forms
219
219
  </div>
220
220
  </div>
221
221
  <div class="c-form__row ">
222
- <div class="c-form__input EmailAddress required ">
223
- <div class="c-input__wrap">
222
+ <div class="c-form__input EmailAddress required c-input-error">
223
+ <div class="c-form__input-wrap">
224
224
  <label class="c-label u-pad-xs c-label--required" for="EmailAddress">Email address</label>
225
225
  <input type="email" class="c-input" name="EmailAddress" value="" placeholder="" id="EmailAddress" required="">
226
226
  </div>
227
- <div class="c-input-message c-input__wrap--messages">
227
+ <div class="c-input-message c-form__messages-wrap">
228
228
  <div class="errorEmailAddress u-display-none">
229
229
  Please enter an email address.
230
230
  </div>
@@ -236,11 +236,11 @@ tagTitle: Forms
236
236
  </div>
237
237
  <div class="c-form__row ">
238
238
  <div class="c-form__input Telephone required ">
239
- <div class="c-input__wrap">
239
+ <div class="c-form__input-wrap">
240
240
  <label class="c-label u-pad-xs c-label--required" for="Telephone">Telephone</label>
241
241
  <input type="tel" class="c-input" name="Telephone" value="" placeholder="" id="Telephone" required="">
242
242
  </div>
243
- <div class="c-input-message c-input__wrap--messages">
243
+ <div class="c-input-message c-form__messages-wrap">
244
244
  <div class="errorTelephone u-display-none">
245
245
  Please enter your telephone.
246
246
  </div>
@@ -252,11 +252,11 @@ tagTitle: Forms
252
252
  <legend class="c-form__section-title">About your company or institution</legend>
253
253
  <div class="c-form__row ">
254
254
  <div class="c-form__input CompanyName required ">
255
- <div class="c-input__wrap">
255
+ <div class="c-form__input-wrap">
256
256
  <label class="c-label u-pad-xs c-label--required" for="CompanyName">Company / institution</label>
257
257
  <input type="text" class="c-input" name="CompanyName" value="" placeholder="" id="CompanyName" required="">
258
258
  </div>
259
- <div class="c-input-message c-input__wrap--messages">
259
+ <div class="c-input-message c-form__messages-wrap">
260
260
  <div class="errorCompanyName u-display-none">
261
261
  Please enter your company.
262
262
  </div>
@@ -265,18 +265,18 @@ tagTitle: Forms
265
265
  </div>
266
266
  <div class="c-form__row o-grid o-grid--of-two">
267
267
  <div class="c-form__input City required ">
268
- <div class="c-input__wrap">
268
+ <div class="c-form__input-wrap">
269
269
  <label class="c-label u-pad-xs c-label--required" for="City">City</label>
270
270
  <input type="text" class="c-input" name="City" value="" placeholder="" id="City" required="">
271
271
  </div>
272
- <div class="c-input-message c-input__wrap--messages">
272
+ <div class="c-input-message c-form__messages-wrap">
273
273
  <div class="errorCity u-display-none">
274
274
  Please enter your city.
275
275
  </div>
276
276
  </div>
277
277
  </div>
278
278
  <div class="c-form__input Country required ">
279
- <div class="c-input__wrap">
279
+ <div class="c-form__input-wrap">
280
280
  <label class="c-label u-pad-xs c-label--required" for="Country">Country</label>
281
281
  <select class="c-input c-input--select Country" name="Country" id="Country" required="">
282
282
  <option value=""></option>
@@ -505,14 +505,14 @@ tagTitle: Forms
505
505
  <option value="tcm:50-5215-1024">Zimbabwe</option>
506
506
  </select>
507
507
  </div>
508
- <div class="c-input-message c-input__wrap--messages">
508
+ <div class="c-input-message c-form__messages-wrap">
509
509
  <div class="errorCountry u-display-none">
510
510
  Please select your country.
511
511
  </div>
512
512
  </div>
513
513
  </div>
514
514
  <div class="c-form__input Province u-hidden required ">
515
- <div class="c-input__wrap u-hidden">
515
+ <div class="c-form__input-wrap u-hidden">
516
516
  <label class="c-label u-pad-xs c-label--required" for="Province">Province</label>
517
517
  <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">
518
518
  <option value=""></option>
@@ -531,12 +531,12 @@ tagTitle: Forms
531
531
  <option value="tcm:50-4887-1024">Yukon Territory</option>
532
532
  </select>
533
533
  </div>
534
- <div class="c-input-message c-input__wrap--messages">
534
+ <div class="c-input-message c-form__messages-wrap">
535
535
  <div class="errorProvince u-display-none"></div>
536
536
  </div>
537
537
  </div>
538
538
  <div class="c-form__input State u-hidden required ">
539
- <div class="c-input__wrap u-hidden">
539
+ <div class="c-form__input-wrap u-hidden">
540
540
  <label class="c-label u-pad-xs c-label--required" for="State">State</label>
541
541
  <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">
542
542
  <option value=""></option>
@@ -593,13 +593,13 @@ tagTitle: Forms
593
593
  <option value="tcm:50-4989-1024">Wyoming</option>
594
594
  </select>
595
595
  </div>
596
- <div class="c-input-message c-input__wrap--messages">
596
+ <div class="c-input-message c-form__messages-wrap">
597
597
  <div class="errorState u-display-none"></div>
598
598
  </div>
599
599
  </div>
600
600
  </div>
601
601
  <div class="c-form__row o-grid o-grid--of-two">
602
- <div class="c-form__input callbackDay u-hidden">
602
+ <div class="c-form__input callbackDay required c-input-error">
603
603
  <fieldset class="u-flow--s">
604
604
  <label class="c-label u-pad-xs " for="CallbackDay">Request a callback (optional)</label>
605
605
  <span class="radio-item u-display-block">
@@ -622,12 +622,12 @@ tagTitle: Forms
622
622
  <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">
623
623
  <label for="callbackDay_Friday" id="callbackDay_Friday">Friday</label>
624
624
  </span>
625
- <button class="c-button--reset u-link" type="button" onclick="clearRadioButtons(this)">
625
+ <button class="c-button--reset u-link u-step--1" type="button" onclick="clearRadioButtons(this)">
626
626
  Clear
627
627
  </button>
628
628
  </fieldset>
629
629
  </div>
630
- <div class="c-form__input callbackTime u-hidden">
630
+ <div class="c-form__input callbackTime">
631
631
  <fieldset class="u-flow--s">
632
632
  <label class="c-label u-pad-xs " for="CallbackTime">Time slot (optional)</label>
633
633
  <span class="radio-item u-display-block">
@@ -646,7 +646,7 @@ tagTitle: Forms
646
646
  <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">
647
647
  <label for="callbackTime_3pm-5pm" id="callbackTime_3pm-5pm">3pm - 5pm</label>
648
648
  </span>
649
- <button class="c-button--reset u-link" type="button" onclick="clearRadioButtons(this)">
649
+ <button class="c-button--reset u-link u-step--1" type="button" onclick="clearRadioButtons(this)">
650
650
  Clear
651
651
  </button>
652
652
  </fieldset>