mp-design-system 1.2.5 → 1.2.6

Sign up to get free protection for your applications and to get access to all the features.
Files changed (20) 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 +3 -3
  7. package/src/assets/scss/components/form.scss +67 -0
  8. package/src/assets/scss/components/index.scss +1 -0
  9. package/src/assets/scss/utilities/space.scss +3 -0
  10. package/src/brand/logo.md +26 -11
  11. package/src/brand/patterns.njk +7 -1
  12. package/src/static/zip/SVG_patterns.zip +0 -0
  13. package/src/_includes/components/dynamic-form/dynamic-form.config.js +0 -16
  14. package/src/_includes/components/dynamic-form/dynamic-form.njk +0 -319
  15. package/src/_includes/components/dynamic-form/dynamic-form.scss +0 -77
  16. package/src/_includes/components/dynamic-form/macro.njk +0 -5
  17. package/src/_includes/components/input/combobox.njk +0 -17
  18. package/src/_includes/components/input/combobox.scss +0 -31
  19. package/src/_includes/components/input/combox.config.js +0 -49
  20. package/src/assets/js/imports/combobox.js +0 -66
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mp-design-system",
3
- "version": "1.2.5",
3
+ "version": "1.2.6",
4
4
  "description": "",
5
5
  "scripts": {
6
6
  "dev": "npm-run-all --parallel bundle:*",
@@ -19,7 +19,7 @@
19
19
  "author": "",
20
20
  "license": "ISC",
21
21
  "devDependencies": {
22
- "@11ty/eleventy": "^0.12.1",
22
+ "@11ty/eleventy": "^2.0.1",
23
23
  "@11ty/eleventy-plugin-syntaxhighlight": "^3.2.2",
24
24
  "@parcel/transformer-sass": "^2.4.0",
25
25
  "dotenv": "^8.6.0",
@@ -28,7 +28,7 @@
28
28
  "markdown-it-prism": "^2.2.3",
29
29
  "npm-run-all": "^4.1.5",
30
30
  "parcel": "^2.4.0",
31
- "require-glob": "^3.2.0",
31
+ "require-glob": "^4.1.0",
32
32
  "rimraf": "^3.0.2",
33
33
  "sass": "^1.49.10",
34
34
  "slugify": "^1.6.5"
package/src/assets/scss/components/form.scss ADDED
@@ -0,0 +1,67 @@
1
+ .mp-dynamicform {
2
+ .c-form {
3
+ &__section {
4
+ padding: 36px;
5
+ padding: var(--space-l);
6
+ background: color('petrol', 'step-3');
7
+ }
8
+
9
+ &__section + &__section {
10
+ border-top: 2px solid color('white');
11
+ }
12
+
13
+ &__section-title {
14
+ letter-spacing: -.02em;
15
+ font-size: var(--step-3);
16
+ }
17
+
18
+ .c-label--required:after {
19
+ content: "*";
20
+ color: color('red');
21
+ padding: 0 2px;
22
+ position: relative;
23
+ top: -2px;
24
+ }
25
+ }
26
+
27
+ .c-input__wrap {
28
+ align-items: center;
29
+ gap: var(--space-s);
30
+ flex-wrap: wrap;
31
+ display: flex;
32
+
33
+ .c-label {
34
+ flex-basis: 148px;
35
+ margin-bottom: 0;
36
+
37
+ &+ * {
38
+ flex: 1 0 148px;
39
+ }
40
+ }
41
+
42
+ &--messages {
43
+ row-gap: 0;
44
+ margin-top: 0;
45
+
46
+ p {
47
+ @include margin-top('2xs');
48
+ letter-spacing: -.01em;
49
+ font-size: var(--step--1);
50
+ }
51
+ }
52
+ }
53
+
54
+ .c-input__spacer {
55
+ height: 0;
56
+ flex-basis: 148px;
57
+ }
58
+
59
+ .c-input--select {
60
+ cursor: pointer;
61
+ }
62
+
63
+ .c-checkbox + label,
64
+ .c-radio + label {
65
+ display: inline-block;
66
+ }
67
+ }
package/src/assets/scss/components/index.scss CHANGED
@@ -35,5 +35,6 @@
35
35
  @import '~comp/twi/twi.scss';
36
36
  @import '~comp/usp/usp.scss';
37
37
 
38
+ @import './form.scss';
38
39
  @import './headings.scss';
39
40
  @import './lightbox.scss';
package/src/assets/scss/utilities/space.scss CHANGED
@@ -163,6 +163,9 @@
163
163
  .u-margin-top-0 {
164
164
  margin-top: 0;
165
165
  }
166
+ .u-margin-top-auto {
167
+ margin-top: auto;
168
+ }
166
169
  .u-margin-top-2xs {
167
170
  @include margin-top('2xs');
168
171
  }
package/src/brand/logo.md CHANGED
@@ -6,9 +6,14 @@ tags: brand
6
6
  version: 1.0.0
7
7
  status: 'Ready'
8
8
  ---
9
+ <br>
9
10
 
10
11
  {% button 'Download the logo' '/static/zip/MP_logo.zip' %}
11
12
 
13
+ ---
14
+
15
+ ## Basic use
16
+
12
17
  The Malvern Panalytical logo is available in three formats:
13
18
 
14
19
  - Standard, with the text alongside the 'X' brandmark;
@@ -30,6 +35,8 @@ The Malvern Panalytical logo is available in three formats:
30
35
  </figure>
31
36
  </div>
32
37
 
38
+ ---
39
+
33
40
  ## Spacing
34
41
  Where it is used in close proximity to other design elements the logo must be separated from them by, at least, multiples of the height of the uppercase M in the word Malvern:
35
42
 
@@ -47,11 +54,13 @@ Where it is used in close proximity to other design elements the logo must be se
47
54
  </figure>
48
55
  </div>
49
56
 
57
+ ---
58
+
50
59
  ## Colors
51
- The Malvern Panalytical logo may also be used in a single color black or white to achieve maximum contrast and legibility.
60
+ The logo may be used in a single color black or white to achieve maximum contrast and legibility.
52
61
 
53
62
  <div class="o-grid o-grid--of-two">
54
- <figure style="max-width:320px">
63
+ <figure style="max-width:320px">
55
64
  <figcaption>Single color black</figcaption>
56
65
  <img src="/static/svg/logo-black.svg" alt="Malvern Panalytical logo, black variant">
57
66
  </figure>
@@ -61,22 +70,21 @@ The Malvern Panalytical logo may also be used in a single color black or white t
61
70
  </figure>
62
71
  </div>
63
72
 
64
- The Malvern Panalytical logo may also be used on dark backgrounds with the wordmark and strapline in white to achieve maximum contrast and legibility.
73
+ The logo may also be used on dark backgrounds with the wordmark and strapline in white to achieve maximum contrast and legibility.
65
74
 
66
75
  <figure style="max-width:640px">
67
76
  <figcaption>Colour logo on dark background</figcaption>
68
77
  <img src="/static/svg/logo-color-white-text.svg" alt="Malvern Panalytical logo with white text on a dark background">
69
78
  </figure>
70
79
 
71
- {% alert 'warning' %}
72
- - **Do not** alter the proportion of the Malvern Panalytical logo in any way.
73
- - **Do not** attempt to recreate the Malvern Panalytical logo.
74
- - **Ask** Marketing for a copy, suited to your requirements.
75
- - The arms of the 'X' brandmark must be at 90&deg; to each other. You can use the corner of a sheet of paper, diagonally against the top of the 'X' mark, to check if the logo is in proportion.
76
- {% endalert %}
80
+ ---
77
81
 
78
- ## Cropping
82
+ ## Strapline
83
+ The strapline "a Spectris company" is part of the logo and must be included. It may only be removed if it's not readable: e.g. on a digital screen if the logo is so small that there are not enough pixels to resolve the text, or in a print application if the substrate is too textured to allow a clear print.
84
+
85
+ ---
79
86
 
87
+ ## Cropping
80
88
  <figure style="max-width:640px">
81
89
  <img src="/static/svg/crop-diagram-1.svg" alt="Cropping the brandmark: 'X' brandmark is cropped 7% top and bottom when used in a color bar">
82
90
  </figure>
@@ -89,4 +97,11 @@ Ensure that the three colors of the brandmark are visible at all times.
89
97
 
90
98
  <figure style="max-width:640px">
91
99
  <img src="/static/svg/crop-diagram-2.svg" alt="Cropping the brandmark: shows maximum and minimum horizontal crop sizes">
92
- </figure>
100
+ </figure>
101
+
102
+ {% alert 'warning' %}
103
+ - **Do not** alter the proportion of the Malvern Panalytical logo in any way.
104
+ - **Do not** attempt to recreate the Malvern Panalytical logo.
105
+ - **Ask** Marketing for a copy, suited to your requirements.
106
+ - The arms of the 'X' brandmark must be at 90&deg; to each other. You can use the corner of a sheet of paper, diagonally against the top of the 'X' mark, to check if the logo is in proportion.
107
+ {% endalert %}
package/src/brand/patterns.njk CHANGED
@@ -3,12 +3,18 @@ title: Patterns
3
3
  layout: content-page
4
4
  sidebar: brand
5
5
  tags: brand
6
- version: 1.0.0
6
+ version: 1.1.0
7
7
  status: 'Ready'
8
8
  ---
9
9
  {% from "components/header/macro.njk" import header %}
10
+ {% from "components/button/macro.njk" import button %}
10
11
 
11
12
  <p>We can make our digital designs a bit more visually appealing by adding background patterns and decorative gradients.</p>
13
+ <p>The patterns designs are available to download in SVG format here:</p>
14
+
15
+ {% button 'Download SVG patterns', '/static/zip/SVG_patterns.zip' %}
16
+
17
+ <h2>Examples</h2>
12
18
 
13
19
  <div class="o-grid xo-grid--of-two">
14
20
  <div class="c-slat c-slat--concentric vh50 u-bg-blue-step-3">
package/src/static/zip/SVG_patterns.zip ADDED
Binary file
package/src/_includes/components/dynamic-form/dynamic-form.config.js DELETED
@@ -1,16 +0,0 @@
1
- module.exports = {
2
- title: 'Dynamic form',
3
- component: {
4
- name: 'dynamic-form'
5
- },
6
- context: {
7
- label: 'Find the perfect event for you'
8
- },
9
- props: [
10
- {
11
- table: [
12
- ['label', 'string', 'Label the input']
13
- ]
14
- }
15
- ]
16
- }
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 %}