mp-design-system 1.2.4 → 1.2.6
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.
- package/dist/build/js/app.js +1 -1
- package/dist/build/js/app.js.map +1 -1
- package/dist/build/scss/library.css +1 -1
- package/dist/build/scss/library.css.map +1 -1
- package/dist/build/scss/main.css +1 -1
- package/dist/build/scss/main.css.map +1 -1
- package/package.json +3 -3
- package/src/_includes/components/{industry-card → card}/industry-card.config.js +1 -0
- package/src/_includes/components/card/macro.njk +8 -0
- package/src/_includes/components/card/product-comparison-card.config.js +90 -0
- package/src/_includes/components/card/product-comparison-card.njk +37 -0
- package/src/_includes/components/card/product-comparison-card.scss +74 -0
- package/src/_includes/components/input/macro.njk +10 -14
- package/src/_includes/components/twi/twi.scss +1 -1
- package/src/assets/js/app.js +0 -2
- package/src/assets/scss/components/form.scss +67 -0
- package/src/assets/scss/components/index.scss +3 -1
- package/src/assets/scss/utilities/space.scss +3 -0
- package/src/brand/logo.md +26 -11
- package/src/brand/patterns.njk +7 -1
- package/src/prototype/index.njk +1 -1
- package/src/prototype/sections.njk +1 -1
- package/src/static/zip/SVG_patterns.zip +0 -0
- package/src/_includes/components/dynamic-form/dynamic-form.config.js +0 -16
- package/src/_includes/components/dynamic-form/dynamic-form.njk +0 -319
- package/src/_includes/components/dynamic-form/dynamic-form.scss +0 -77
- package/src/_includes/components/dynamic-form/macro.njk +0 -5
- package/src/_includes/components/industry-card/macro.njk +0 -5
- package/src/_includes/components/input/combobox.njk +0 -17
- package/src/_includes/components/input/combobox.scss +0 -31
- package/src/_includes/components/input/combox.config.js +0 -49
- package/src/assets/js/imports/combobox.js +0 -66
- /package/src/_includes/components/{industry-card → card}/industry-card.njk +0 -0
- /package/src/_includes/components/{industry-card → card}/industry-card.scss +0 -0
|
@@ -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>
|
|
@@ -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
|
-
}
|
|
@@ -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>
|
|
@@ -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
|
-
}
|
|
@@ -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
|
-
}
|
|
@@ -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;
|
|
File without changes
|
|
File without changes
|