mp-design-system 1.2.13 → 1.2.14

Sign up to get free protection for your applications and to get access to all the features.
Files changed (34) hide show
  1. package/dist/build/js/app.js.map +1 -1
  2. package/dist/build/scss/library.css +1 -1
  3. package/dist/build/scss/library.css.map +1 -1
  4. package/dist/build/scss/main.css +1 -1
  5. package/dist/build/scss/main.css.map +1 -1
  6. package/package.json +1 -1
  7. package/src/_includes/components/card/card.njk +2 -2
  8. package/src/_includes/components/card/card.scss +38 -0
  9. package/src/_includes/components/card/product-comparison-card.scss +2 -0
  10. package/src/_includes/components/comparison-table/comparison-table.config.js +10 -10
  11. package/src/_includes/components/comparison-table/comparison-table.njk +1 -1
  12. package/src/_includes/components/component/preview-default.njk +1 -1
  13. package/src/_includes/components/hero/hero.njk +4 -5
  14. package/src/_includes/components/input/radio.scss +65 -25
  15. package/src/_includes/components/internal-nav/internal-nav.config.js +1 -1
  16. package/src/assets/scss/components/index.scss +1 -1
  17. package/src/assets/scss/components/product-finder.scss +66 -0
  18. package/src/assets/scss/objects/grid.scss +6 -0
  19. package/src/components-full-pages.njk +1 -1
  20. package/src/components-pages.njk +1 -1
  21. package/src/index.njk +75 -12
  22. package/src/prototype/range.njk +161 -40
  23. package/src/prototype/webinars-3-2-1.njk +43 -1
  24. package/src/_includes/components/card/event-series-card.config.js +0 -36
  25. package/src/_includes/components/card/event-series-card.njk +0 -45
  26. package/src/_includes/components/card/event-series-card.scss +0 -57
  27. package/src/_includes/components/dynamic-form/dynamic-form.config.js +0 -16
  28. package/src/_includes/components/dynamic-form/dynamic-form.njk +0 -319
  29. package/src/_includes/components/dynamic-form/dynamic-form.scss +0 -77
  30. package/src/_includes/components/dynamic-form/macro.njk +0 -5
  31. package/src/_includes/components/input/combobox.njk +0 -17
  32. package/src/_includes/components/input/combobox.scss +0 -31
  33. package/src/_includes/components/input/combox.config.js +0 -49
  34. package/src/assets/js/imports/combobox.js +0 -66
package/src/_includes/components/dynamic-form/dynamic-form.njk DELETED
@@ -1,319 +0,0 @@
1
- <div class="o-grid o-grid--8/3 o-grid--float u-wrap">
2
- <div id="dynamicForm" class="u-flow u-margin-bottom-l">
3
- <form id="EditProfile" class="mp-dynamicform" action="/en/profile/profile" method="post" name="dynamicForm" novalidate="" prefix="a: MP_DynamicForm" typeof="a:MP_DynamicForm">
4
- <input name="__RequestVerificationToken" type="hidden" value="WmF3J04mv0dQrbAgTIQE93-NMZvwyf4gTN1MmOzb6xdHxKNf_y5j5s-fbk-2TxMzJhylnVfkGd_CAC2rj7zMRp8g5BaK4N564AXUw3hcaxVdsNuRPNH-HRs-qRNqVm4UXmQ5T9PkVQvLUBceY_Br7g2">
5
- <div class="validation-summary-valid" data-valmsg-summary="true">
6
- <ul>
7
- <li style="display:none"></li>
8
- </ul>
9
- </div>
10
- <section class="c-form__section u-flow--m">
11
- <h3 class="c-form__section-title" property="a:sectionTitle">About you</h3>
12
- <div class="c-form__row ">
13
- <label class="c-label c-label--required" for="FirstName" property="a:label">First name</label>
14
- <input type="text" id="FirstName" class="c-input" name="First name" autocomplete="given-name" placeholder="" required="">
15
- </div>
16
- <div class="c-form__row ">
17
- <label class="c-label c-label--required" for="LastName" property="a:label">Last name</label>
18
- <input type="text" id="LastName" class="c-input" name="Last name" autocomplete="family-name" placeholder="" required="">
19
- </div>
20
- <div class="c-form__row ">
21
- <label class="c-label c-label--required" for="Telephone" property="a:label">Telephone</label>
22
- <input type="tel" id="Telephone" class="c-input" name="Telephone" autocomplete="off" placeholder="" required="">
23
- </div>
24
- <div class="c-form__row u-disabled">
25
- <label class="c-label c-label--required" for="EmailAddress" property="a:label">Email address</label>
26
- <input type="email" id="EmailAddress" class="c-input" name="Email address" autocomplete="off" placeholder="" required="">
27
- <div class="c-input__description u-margin-top-xs">
28
- <p>To change your email address please contact <a href="">website support</a></p>
29
- </div>
30
- </div>
31
- </section>
32
- <section class="c-form__section u-flow--m">
33
- <h3 class="c-form-section__title" property="a:sectionTitle">About your company or institution</h3>
34
- <div class="c-form__row ">
35
- <label class="c-label c-label--required" for="Company" property="a:label">Company / institution</label>
36
- <input type="text" id="Company" class="c-input" name="Company" autocomplete="off" placeholder="" required="">
37
- </div>
38
- <div class="c-form__row ">
39
- <label class="c-label " for="Department" property="a:label">Department</label>
40
- <input type="text" id="Department" class="c-input" name="Department" autocomplete="off" placeholder="">
41
- </div>
42
- <div class="c-form__row ">
43
- <label class="c-label c-label--required" for="Industry" property="a:label">Industry</label>
44
- <select id="Industry" class="c-input c-input--select" name="Industry" autocomplete="off" required="">
45
- <option value=""></option>
46
- <option value="tcm:50-69567-1024">Academia</option>
47
- <option value="tcm:50-41578-1024">Advanced Manufacturing</option>
48
- <option value="tcm:50-66937-1024">Aerospace</option>
49
- <option value="tcm:50-54762-1024">Agriculture</option>
50
- <option value="tcm:50-3961-1024">Agrochemicals</option>
51
- <option value="tcm:50-3926-1024">Automotive</option>
52
- <option value="tcm:50-11176-1024">Biologics</option>
53
- <option value="tcm:50-41783-1024">Building Materials</option>
54
- <option value="tcm:50-3959-1024">Chemicals</option>
55
- <option value="tcm:50-41782-1024">Chemicals/Coatings</option>
56
- <option value="tcm:50-3976-1024">Electronics/Optics</option>
57
- <option value="tcm:50-6943-1024">Energy/Battery</option>
58
- <option value="tcm:50-3938-1024">Environment</option>
59
- <option value="tcm:50-3939-1024">Food and Beverages</option>
60
- <option value="tcm:50-66938-1024">Government/Institutes</option>
61
- <option value="tcm:50-66939-1024">Manufacturing, Research and Analytical Services</option>
62
- <option value="tcm:50-3944-1024">Metals</option>
63
- <option value="tcm:50-41781-1024">Minerals</option>
64
- <option value="tcm:50-41780-1024">Mining</option>
65
- <option value="tcm:50-3949-1024">Oils, Fuels and Chemicals</option>
66
- <option value="tcm:50-3933-1024">Personal Care Products</option>
67
- <option value="tcm:50-11180-1024">Pharmaceutical</option>
68
- <option value="tcm:50-3958-1024">Polymers</option>
69
- <option value="tcm:50-41784-1024">Power Generation</option>
70
- <option value="tcm:50-3968-1024">Service labs/Integrators</option>
71
- <option value="tcm:50-66946-1024">University</option>
72
- </select>
73
- </div>
74
- <div class="c-form__row ">
75
- <label class="c-label c-label--required" for="City" property="a:label">City</label>
76
- <input type="text" id="City" class="c-input" name="City" autocomplete="address-level2" placeholder="" required="">
77
- </div>
78
- <div class="c-form__row ">
79
- <label class="c-label c-label--required" for="Country" property="a:label">Country</label>
80
- <select id="Country" class="c-input c-input--select" name="Country" autocomplete="country" required="">
81
- <option value=""></option>
82
- <option value="tcm:50-4994-1024">United States</option>
83
- <option value="tcm:50-4993-1024">United Kingdom</option>
84
- <option value="tcm:50-4995-1024">Afghanistan</option>
85
- <option value="tcm:50-4996-1024">Albania</option>
86
- <option value="tcm:50-4997-1024">Algeria</option>
87
- <option value="tcm:50-4999-1024">Andorra</option>
88
- <option value="tcm:50-5000-1024">Angola</option>
89
- <option value="tcm:50-5001-1024">Anguilla</option>
90
- <option value="tcm:50-5002-1024">Antarctica</option>
91
- <option value="tcm:50-5003-1024">Antigua and Barbuda</option>
92
- <option value="tcm:50-5004-1024">Argentina</option>
93
- <option value="tcm:50-5005-1024">Armenia</option>
94
- <option value="tcm:50-5006-1024">Aruba</option>
95
- <option value="tcm:50-5007-1024">Australia</option>
96
- <option value="tcm:50-5008-1024">Austria</option>
97
- <option value="tcm:50-5009-1024">Azerbaijan</option>
98
- <option value="tcm:50-5190-1024">Bahamas</option>
99
- <option value="tcm:50-5010-1024">Bahrain</option>
100
- <option value="tcm:50-5011-1024">Bangladesh</option>
101
- <option value="tcm:50-5012-1024">Barbados</option>
102
- <option value="tcm:50-5013-1024">Belarus</option>
103
- <option value="tcm:50-5014-1024">Belgium</option>
104
- <option value="tcm:50-5015-1024">Belize</option>
105
- <option value="tcm:50-5016-1024">Benin</option>
106
- <option value="tcm:50-5017-1024">Bermuda</option>
107
- <option value="tcm:50-5018-1024">Bhutan</option>
108
- <option value="tcm:50-5019-1024">Bolivia</option>
109
- <option value="tcm:50-5020-1024">Bosnia and Herzegovina</option>
110
- <option value="tcm:50-5021-1024">Botswana</option>
111
- <option value="tcm:50-15011-1024">Bouvet Islands</option>
112
- <option value="tcm:50-5022-1024">Brazil</option>
113
- <option value="tcm:50-14999-1024">British Indian Ocean Territory</option>
114
- <option value="tcm:50-5023-1024">British Virgin Islands</option>
115
- <option value="tcm:50-5024-1024">Brunei Darussalam</option>
116
- <option value="tcm:50-5025-1024">Bulgaria</option>
117
- <option value="tcm:50-5026-1024">Burkina Faso</option>
118
- <option value="tcm:50-5027-1024">Burundi</option>
119
- <option value="tcm:50-5028-1024">Cambodia</option>
120
- <option value="tcm:50-5029-1024">Cameroon</option>
121
- <option value="tcm:50-4990-1024">Canada</option>
122
- <option value="tcm:50-5030-1024">Cape Verde</option>
123
- <option value="tcm:50-5031-1024">Cayman Islands</option>
124
- <option value="tcm:50-5032-1024">Central African Republic</option>
125
- <option value="tcm:50-5033-1024">Chad</option>
126
- <option value="tcm:50-5034-1024">Chile</option>
127
- <option value="tcm:50-5035-1024">China</option>
128
- <option value="tcm:50-5036-1024">Christmas Island</option>
129
- <option value="tcm:50-5038-1024">Colombia</option>
130
- <option value="tcm:50-5039-1024">Comoros</option>
131
- <option value="tcm:50-5042-1024">Cook Islands</option>
132
- <option value="tcm:50-5043-1024">Costa Rica</option>
133
- <option value="tcm:50-5044-1024">Cote d'Ivoire</option>
134
- <option value="tcm:50-5045-1024">Croatia</option>
135
- <option value="tcm:50-15007-1024">Cuba</option>
136
- <option value="tcm:50-53469-1024">Curacao</option>
137
- <option value="tcm:50-5046-1024">Cyprus</option>
138
- <option value="tcm:50-5047-1024">Czech Republic</option>
139
- <option value="tcm:50-5041-1024">Democratic Republic of the Congo</option>
140
- <option value="tcm:50-5048-1024">Denmark</option>
141
- <option value="tcm:50-5049-1024">Djibouti</option>
142
- <option value="tcm:50-5050-1024">Dominica</option>
143
- <option value="tcm:50-5051-1024">Dominican Republic</option>
144
- <option value="tcm:50-5133-1024">Dutch Antilles</option>
145
- <option value="tcm:50-5192-1024">East Timor</option>
146
- <option value="tcm:50-5052-1024">Ecuador</option>
147
- <option value="tcm:50-5053-1024">Egypt</option>
148
- <option value="tcm:50-5054-1024">El Salvador</option>
149
- <option value="tcm:50-5055-1024">Equatorial Guinea</option>
150
- <option value="tcm:50-5056-1024">Eritrea</option>
151
- <option value="tcm:50-5057-1024">Estonia</option>
152
- <option value="tcm:50-5058-1024">Ethiopia</option>
153
- <option value="tcm:50-5060-1024">Falkland Islands</option>
154
- <option value="tcm:50-5061-1024">Faroe Islands</option>
155
- <option value="tcm:50-5063-1024">Fiji</option>
156
- <option value="tcm:50-5064-1024">Finland</option>
157
- <option value="tcm:50-4991-1024">France</option>
158
- <option value="tcm:50-5065-1024">French Guyana</option>
159
- <option value="tcm:50-5066-1024">French Polynesia</option>
160
- <option value="tcm:50-53471-1024">French Southern Territory</option>
161
- <option value="tcm:50-5067-1024">Gabon</option>
162
- <option value="tcm:50-5191-1024">Gambia</option>
163
- <option value="tcm:50-5068-1024">Georgia</option>
164
- <option value="tcm:50-5069-1024">Germany</option>
165
- <option value="tcm:50-5070-1024">Ghana</option>
166
- <option value="tcm:50-5071-1024">Gibraltar</option>
167
- <option value="tcm:50-5072-1024">Greece</option>
168
- <option value="tcm:50-5073-1024">Greenland</option>
169
- <option value="tcm:50-5074-1024">Grenada</option>
170
- <option value="tcm:50-5075-1024">Guadeloupe</option>
171
- <option value="tcm:50-5076-1024">Guam</option>
172
- <option value="tcm:50-5077-1024">Guatemala</option>
173
- <option value="tcm:50-5078-1024">Guinea</option>
174
- <option value="tcm:50-5079-1024">Guinea-Bissau</option>
175
- <option value="tcm:50-5080-1024">Guyana</option>
176
- <option value="tcm:50-5081-1024">Haiti</option>
177
- <option value="tcm:50-15012-1024">Heard and McDonald Islands</option>
178
- <option value="tcm:50-5082-1024">Honduras</option>
179
- <option value="tcm:50-5084-1024">Hungary</option>
180
- <option value="tcm:50-5085-1024">Iceland</option>
181
- <option value="tcm:50-5086-1024">India</option>
182
- <option value="tcm:50-5087-1024">Indonesia</option>
183
- <option value="tcm:50-5088-1024">Iraq</option>
184
- <option value="tcm:50-5089-1024">Ireland</option>
185
- <option value="tcm:50-5090-1024">Israel</option>
186
- <option value="tcm:50-5091-1024">Italy</option>
187
- <option value="tcm:50-5092-1024">Jamaica</option>
188
- <option value="tcm:50-5093-1024">Japan</option>
189
- <option value="tcm:50-5094-1024">Jordan</option>
190
- <option value="tcm:50-5095-1024">Kazakhstan</option>
191
- <option value="tcm:50-5096-1024">Kenya</option>
192
- <option value="tcm:50-5097-1024">Kiribati</option>
193
- <option value="tcm:50-53473-1024">Kosovo</option>
194
- <option value="tcm:50-5098-1024">Kuwait</option>
195
- <option value="tcm:50-5099-1024">Kyrgyzstan</option>
196
- <option value="tcm:50-5100-1024">Laos</option>
197
- <option value="tcm:50-5101-1024">Latvia</option>
198
- <option value="tcm:50-5102-1024">Lebanon</option>
199
- <option value="tcm:50-5103-1024">Lesotho</option>
200
- <option value="tcm:50-5104-1024">Liberia</option>
201
- <option value="tcm:50-15014-1024">Libya</option>
202
- <option value="tcm:50-5105-1024">Liechtenstein</option>
203
- <option value="tcm:50-5106-1024">Lithuania</option>
204
- <option value="tcm:50-5107-1024">Luxembourg</option>
205
- <option value="tcm:50-5059-1024">Macedonia</option>
206
- <option value="tcm:50-5109-1024">Madagascar</option>
207
- <option value="tcm:50-5110-1024">Malawi</option>
208
- <option value="tcm:50-5111-1024">Malaysia</option>
209
- <option value="tcm:50-5112-1024">Maldives</option>
210
- <option value="tcm:50-5113-1024">Mali</option>
211
- <option value="tcm:50-5114-1024">Malta</option>
212
- <option value="tcm:50-5115-1024">Marshall Islands</option>
213
- <option value="tcm:50-5116-1024">Martinique</option>
214
- <option value="tcm:50-5117-1024">Mauritania</option>
215
- <option value="tcm:50-5119-1024">Mayotte</option>
216
- <option value="tcm:50-5120-1024">Mexico</option>
217
- <option value="tcm:50-5062-1024">Micronesia</option>
218
- <option value="tcm:50-5122-1024">Monaco</option>
219
- <option value="tcm:50-5123-1024">Mongolia</option>
220
- <option value="tcm:50-53475-1024">Montenegro</option>
221
- <option value="tcm:50-5125-1024">Montserrat</option>
222
- <option value="tcm:50-5126-1024">Morocco</option>
223
- <option value="tcm:50-5127-1024">Mozambique</option>
224
- <option value="tcm:50-5128-1024">Myanmar</option>
225
- <option value="tcm:50-5129-1024">Namibia</option>
226
- <option value="tcm:50-5130-1024">Nauru</option>
227
- <option value="tcm:50-5131-1024">Nepal</option>
228
- <option value="tcm:50-5132-1024">Netherlands</option>
229
- <option value="tcm:50-5134-1024">New Caledonia</option>
230
- <option value="tcm:50-5135-1024">New Zealand</option>
231
- <option value="tcm:50-5136-1024">Nicaragua</option>
232
- <option value="tcm:50-5137-1024">Niger</option>
233
- <option value="tcm:50-5138-1024">Nigeria</option>
234
- <option value="tcm:50-5140-1024">Norfolk Islands</option>
235
- <option value="tcm:50-5141-1024">North Mariana Islands</option>
236
- <option value="tcm:50-5142-1024">Norway</option>
237
- <option value="tcm:50-5143-1024">Oman</option>
238
- <option value="tcm:50-5144-1024">Pakistan</option>
239
- <option value="tcm:50-5145-1024">Palau</option>
240
- <option value="tcm:50-5146-1024">Palestine</option>
241
- <option value="tcm:50-5147-1024">Panama</option>
242
- <option value="tcm:50-5148-1024">Papua New Guinea</option>
243
- <option value="tcm:50-5149-1024">Paraguay</option>
244
- <option value="tcm:50-5150-1024">Peru</option>
245
- <option value="tcm:50-5151-1024">Philippines</option>
246
- <option value="tcm:50-5152-1024">Pitcairn Islands</option>
247
- <option value="tcm:50-5153-1024">Poland</option>
248
- <option value="tcm:50-5154-1024">Portugal</option>
249
- <option value="tcm:50-5155-1024">Puerto Rico</option>
250
- <option value="tcm:50-5156-1024">Qatar</option>
251
- <option value="tcm:50-5157-1024">Reunion</option>
252
- <option value="tcm:50-5158-1024">Romania</option>
253
- <option value="tcm:50-5159-1024">Russian Federation</option>
254
- <option value="tcm:50-5160-1024">Rwanda</option>
255
- <option value="tcm:50-5179-1024">Saint Kitts and Nevis</option>
256
- <option value="tcm:50-5162-1024">Samoa</option>
257
- <option value="tcm:50-5163-1024">San Marino</option>
258
- <option value="tcm:50-5164-1024">Sao Tome and Principe</option>
259
- <option value="tcm:50-5165-1024">Saudi Arabia</option>
260
- <option value="tcm:50-5166-1024">Senegal</option>
261
- <option value="tcm:50-53477-1024">Serbia</option>
262
- <option value="tcm:50-5168-1024">Seychelles</option>
263
- <option value="tcm:50-5169-1024">Sierra Leone</option>
264
- <option value="tcm:50-4992-1024">Singapore</option>
265
- <option value="tcm:50-53479-1024">Sint Maarten</option>
266
- <option value="tcm:50-5170-1024">Slovakia</option>
267
- <option value="tcm:50-5171-1024">Slovenia</option>
268
- <option value="tcm:50-5172-1024">Solomon Islands</option>
269
- <option value="tcm:50-5173-1024">Somalia</option>
270
- <option value="tcm:50-5174-1024">South Africa</option>
271
- <option value="tcm:50-15018-1024">South Georgia and the Southern Sandwich Islands</option>
272
- <option value="tcm:50-5175-1024">South Korea</option>
273
- <option value="tcm:50-5176-1024">Spain</option>
274
- <option value="tcm:50-5177-1024">Sri Lanka</option>
275
- <option value="tcm:50-5180-1024">St. Lucia</option>
276
- <option value="tcm:50-15010-1024">Sudan</option>
277
- <option value="tcm:50-5182-1024">Suriname</option>
278
- <option value="tcm:50-5184-1024">Sweden</option>
279
- <option value="tcm:50-5185-1024">Switzerland</option>
280
- <option value="tcm:50-15008-1024">Syria</option>
281
- <option value="tcm:50-5186-1024">Taiwan</option>
282
- <option value="tcm:50-5187-1024">Tajikistan</option>
283
- <option value="tcm:50-5188-1024">Tanzania</option>
284
- <option value="tcm:50-5189-1024">Thailand</option>
285
- <option value="tcm:50-5193-1024">Togo</option>
286
- <option value="tcm:50-5194-1024">Tokelau Islands</option>
287
- <option value="tcm:50-5195-1024">Tonga</option>
288
- <option value="tcm:50-5196-1024">Trinidad and Tobago</option>
289
- <option value="tcm:50-5197-1024">Tunisia</option>
290
- <option value="tcm:50-5198-1024">Turkey</option>
291
- <option value="tcm:50-5199-1024">Turkmenistan</option>
292
- <option value="tcm:50-5200-1024">Turks and Caicos Islands</option>
293
- <option value="tcm:50-5201-1024">Tuvalu</option>
294
- <option value="tcm:50-5203-1024">Uganda</option>
295
- <option value="tcm:50-5204-1024">Ukraine</option>
296
- <option value="tcm:50-5205-1024">United Arab Emirates</option>
297
- <option value="tcm:50-4993-1024">United Kingdom</option>
298
- <option value="tcm:50-4994-1024">United States</option>
299
- <option value="tcm:50-5206-1024">Uruguay</option>
300
- <option value="tcm:50-5207-1024">Uzbekistan</option>
301
- <option value="tcm:50-5208-1024">Vanuatu</option>
302
- <option value="tcm:50-5210-1024">Venezuela</option>
303
- <option value="tcm:50-5211-1024">Vietnam</option>
304
- <option value="tcm:50-5212-1024">Wallis and Futuna Islands</option>
305
- <option value="tcm:50-5213-1024">Yemen</option>
306
- <option value="tcm:50-5214-1024">Zambia</option>
307
- <option value="tcm:50-5215-1024">Zimbabwe</option>
308
- </select>
309
- </div>
310
- </section>
311
- <div class="c-form__section">
312
- <button id="btnSubmit" class="mp c-button c-button--inline">
313
- Model.Submit
314
- </button>
315
- </div>
316
- <input type="hidden" name="FirstClickChannel" value="Direct"><input type="hidden" name="FirstClickLandingUrl" value="localhost/en"><input type="hidden" name="LastClickChannel" value="Direct"><input type="hidden" name="LastClickLandingUrl" value="localhost/en/profile"><input type="hidden" name="#SEOInteractions" value="0"><input type="hidden" name="#DirectInteractions" value="12"><input type="hidden" name="#OtherInteractions" value="0"><input type="hidden" name="#GoogleAdsInteractions" value="0"><input type="hidden" name="#LinkedinAdsInteractions" value="0"><input type="hidden" name="#FacebookAdsInteractions" value="0"><input type="hidden" name="#BingAdsInteraction" value="0"><input type="hidden" name="FirstClickGoogleClientID" value="1232913074.1679323359"><input type="hidden" name="LastClickGoogleClientID" value="1232913074.1679323359">
317
- </form>
318
- </div>
319
- </div>
package/src/_includes/components/dynamic-form/dynamic-form.scss DELETED
@@ -1,77 +0,0 @@
1
- .mp-dynamicform {
2
- .c-form {
3
- &__section {
4
- @include padding('l');
5
- background: color('petrol', 'step-3');
6
-
7
- &-title {
8
- @include step(3);
9
- }
10
-
11
- &+ .c-form__section {
12
- border-top: 2px solid color('white');
13
- }
14
- }
15
- }
16
-
17
- // .c-label
18
- .c-label {
19
-
20
- &--required::after {
21
- content: "*";
22
- color: color('red');
23
- padding: 0 2px;
24
- position: relative;
25
- top: -2px;
26
- }
27
- }
28
-
29
- // .c-input
30
- .c-input {
31
- &__wrap {
32
- display: flex;
33
- flex-wrap: wrap;
34
- align-items: center;
35
- gap: var(--space-s);
36
-
37
- .c-label {
38
- @include margin-bottom(0);
39
- flex-basis: 148px;
40
-
41
- &+ * {
42
- flex-grow: 1;
43
- flex-shrink: 0;
44
- flex-basis: 148px;
45
- }
46
- }
47
-
48
- &--messages {
49
- @include margin-top(0);
50
- row-gap: 0;
51
-
52
- p {
53
- @include margin-top('2xs');
54
- @include step(-1);
55
- }
56
- }
57
- }
58
-
59
- &__spacer {
60
- height: 0;
61
- flex-basis: 148px;
62
- }
63
-
64
- &--select {
65
- cursor: pointer;
66
- }
67
- }
68
-
69
- // .c-checkbox
70
- // .c-radio
71
- .c-checkbox,
72
- .c-radio {
73
- &+ label {
74
- display: inline-block;
75
- }
76
- }
77
- }
package/src/_includes/components/dynamic-form/macro.njk DELETED
@@ -1,5 +0,0 @@
1
- {% from "components/component/component.njk" import c %}
2
-
3
- {% macro dynamicForm(params) %}
4
- {{ c({ name: 'dynamic-form' }, params) }}
5
- {% endmacro %}
package/src/_includes/components/input/combobox.njk DELETED
@@ -1,17 +0,0 @@
1
- {# <div class="c-combobox">
2
- <input type="text" class="c-combobox__input" id="combobox-input" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="combobox-label" autocomplete="off" placeholder="Select an option" role="combobox" aria-owns="combobox-options">
3
- <ul class="c-combobox__dropdown" id="combobox-options" role="listbox" aria-labelledby="combobox-input">
4
- <li data-value="option1" role="option">Option 1</li>
5
- <li data-value="option2" role="option">Option 2</li>
6
- <li data-value="option3" role="option">Option 3</li>
7
- </ul>
8
- <div> #}
9
-
10
- <div class="c-combobox">
11
- <input type="text" id="combobox-input" class="c-combobox__input" placeholder="Type to search..." autocomplete="off" aria-controls="combobox-list" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-owns="combobox-select">
12
- <ul id="combobox-select" class="c-combobox__select" role="listbox" aria-label="Options" tabindex="-1">
13
- <li role="option" aria-selected="false">Option 1</li>
14
- <li role="option" aria-selected="false">Option 2</li>
15
- <li role="option" aria-selected="false">Option 3</li>
16
- </ul>
17
- </div>
package/src/_includes/components/input/combobox.scss DELETED
@@ -1,31 +0,0 @@
1
- .c-combobox {
2
- position: relative;
3
- display: inline-block;
4
-
5
- &__input {
6
- width: 200px;
7
- padding: 5px;
8
- }
9
-
10
- &__select {
11
- position: absolute;
12
- z-index: 1;
13
- list-style-type: none;
14
- padding: 0;
15
- margin: 0;
16
- background-color: #f9f9f9;
17
- border: 1px solid #ccc;
18
- border-top: none;
19
- display: none;
20
-
21
- li {
22
- padding: 10px;
23
- cursor: pointer;
24
-
25
- &[aria-selected="true"] {
26
- background-color: #e6e6e6;
27
- }
28
- }
29
- }
30
-
31
- }
package/src/_includes/components/input/combox.config.js DELETED
@@ -1,49 +0,0 @@
1
- const categories = require('../component/categories');
2
-
3
- module.exports = {
4
- title: 'Combobox',
5
- category: categories.form,
6
- component: {
7
- name: 'combobox',
8
- folder: 'input'
9
- },
10
- figma: 'https://www.figma.com/file/rUQ6aPQAfBX55o3hH0Lqb3/Design-exploration?node-id=213%3A918',
11
- preview: 'form',
12
- context: {
13
- label: 'Label',
14
- name: 'name',
15
- id: 'id',
16
- type: 'text',
17
- placeholder: 'Placeholder',
18
- required: true
19
- },
20
- variants: [
21
- {
22
- title: 'With error',
23
- context: {
24
- error: true
25
- }
26
- },
27
- {
28
- title: 'With error message',
29
- context: {
30
- error: 'This field is required'
31
- }
32
- },
33
- {
34
- title: 'Disabled',
35
- context: {
36
- disabled: true
37
- }
38
- }
39
- ],
40
- props: [
41
- {
42
- table: [
43
- ['label', 'string'],
44
- ['id', 'string', 'ID attribute'],
45
- ['name', 'string', 'Name attribute (falls back to ID)'],
46
- ]
47
- }
48
- ]
49
- }
package/src/assets/js/imports/combobox.js DELETED
@@ -1,66 +0,0 @@
1
- function Combobox() {
2
- const comboboxes = Array.from(document.querySelectorAll('.c-combobox'));
3
-
4
- comboboxes.forEach(function (combobox) {
5
- const input = combobox.querySelector('.c-combobox__input');
6
- const select = combobox.querySelector('.c-combobox__select');
7
- const options = Array.from(select.querySelectorAll('li[role="option"]'));
8
-
9
- // Set initial state
10
- input.setAttribute('aria-expanded', 'false');
11
- input.setAttribute('aria-owns', select.id);
12
- input.setAttribute('aria-controls', select.id);
13
-
14
- // Event listeners
15
- input.addEventListener('focus', function () {
16
- input.setAttribute('aria-expanded', 'true');
17
- select.setAttribute('aria-expanded', 'true');
18
- });
19
-
20
- input.addEventListener('blur', function () {
21
- input.setAttribute('aria-expanded', 'false');
22
- select.setAttribute('aria-expanded', 'false');
23
- });
24
-
25
- input.addEventListener('input', function () {
26
- const inputValue = input.value.toLowerCase();
27
-
28
- options.forEach(function (option) {
29
- const optionText = option.textContent.toLowerCase();
30
-
31
- if (optionText.includes(inputValue)) {
32
- option.style.display = '';
33
- option.setAttribute('aria-hidden', 'false');
34
- } else {
35
- option.style.display = 'none';
36
- option.setAttribute('aria-hidden', 'true');
37
- }
38
- });
39
- });
40
-
41
- select.addEventListener('click', function (event) {
42
- const target = event.target;
43
- const isOption = target.getAttribute('role') === 'option';
44
-
45
- if (isOption) {
46
- const selectedOption = select.querySelector('[aria-selected="true"]');
47
- if (selectedOption) {
48
- selectedOption.setAttribute('aria-selected', 'false');
49
- }
50
-
51
- target.setAttribute('aria-selected', 'true');
52
- input.value = target.textContent;
53
-
54
- input.focus();
55
- }
56
- });
57
-
58
- // Display options initially
59
- options.forEach(function (option) {
60
- option.style.display = '';
61
- option.setAttribute('aria-hidden', 'false');
62
- });
63
- });
64
- }
65
-
66
- export default Combobox;