mp-design-system 1.2.36 → 1.2.38

Sign up to get free protection for your applications and to get access to all the features.
Files changed (14) 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/eyebrow/eyebrow.scss +1 -0
  5. package/src/_includes/components/input/input.njk +12 -10
  6. package/src/_includes/components/input/input.scss +14 -13
  7. package/src/_includes/components/input/select.njk +11 -9
  8. package/src/assets/scss/components/form.scss +16 -14
  9. package/src/assets/scss/utilities/flex.scss +4 -0
  10. package/src/assets/scss/utilities/gap.scss +3 -0
  11. package/src/assets/scss/utilities/index.scss +1 -0
  12. package/src/brand/resources.njk +7 -0
  13. package/src/patterns/form.njk +313 -319
  14. package/src/static/adobe/MP Franklin colour swatches.ai +914 -0
package/src/patterns/form.njk CHANGED
@@ -11,339 +11,332 @@ layout: patterns-page
11
11
  {% from "components/input/macro.njk" import toggle %}
12
12
  {% from "components/alert/macro.njk" import alert %}
13
13
 
14
- <div class="u-flow">
15
- <form>
16
- <fieldset class="c-fieldset u-flow--m u-wrap--fields">
17
- {{ input({
18
- label: 'Text',
19
- name: 'text_input',
20
- id: 'text_input',
21
- type: 'text',
22
- placeholder: 'Placeholder'
23
- })}}
14
+ <div class="o-grid o-grid--9/3 o-grid--layout">
15
+ <div class="u-flow--m">
16
+ <form class="mp-dynamicform">
17
+ <section class="c-form__section u-flow--m">
18
+ {{ input({
19
+ label: 'Text',
20
+ name: 'text_input',
21
+ id: 'text_input',
22
+ type: 'text',
23
+ placeholder: 'Placeholder'
24
+ })}}
24
25
 
25
- {{ select({
26
- label: "Select",
27
- name: "select",
28
- id: "select",
29
- placeholder: "Placeholder",
30
- options: [
31
- [
32
- "option-1",
33
- "Option 1"
34
- ],
35
- [
36
- "Option 2"
37
- ],
38
- [
39
- "option-3",
40
- "Option 3"
26
+ {{ select({
27
+ label: "Select",
28
+ name: "select",
29
+ id: "select",
30
+ placeholder: "Placeholder",
31
+ options: [
32
+ [
33
+ "option-1",
34
+ "Option 1"
35
+ ],
36
+ [
37
+ "Option 2"
38
+ ],
39
+ [
40
+ "option-3",
41
+ "Option 3"
42
+ ]
41
43
  ]
42
- ]
43
- })}}
44
-
45
- {{ textarea({
46
- label: 'Textarea',
47
- name: 'textarea',
48
- id: 'textarea',
49
- type: 'textarea',
50
- placeholder: 'Placeholder'
51
- })}}
44
+ })}}
45
+
46
+ {{ textarea({
47
+ label: 'Textarea',
48
+ name: 'textarea',
49
+ id: 'textarea',
50
+ type: 'textarea',
51
+ placeholder: 'Placeholder'
52
+ })}}
52
53
 
53
- <label class="c-label">Checkboxes</label>
54
- {% for _ in ["Live","Laugh","Love"] %}
55
- <div>
56
- {{ checkbox({
57
- label: _,
58
- name: 'tenets',
59
- id: _,
60
- value: _
61
- })}}
62
- </div>
63
- {% endfor %}
64
-
65
- <label class="c-label">Radio buttons</label>
66
- {% for _ in ["Bears","Beets","Battlestar Galactica"] %}
67
- <div>
68
- {{ radio({
69
- label: _,
70
- name: 'facts',
71
- id: _,
72
- value: _
73
- })}}
74
- </div>
75
- {% endfor %}
54
+ <label class="c-label">Checkboxes</label>
55
+ {% for _ in ["Live","Laugh","Love"] %}
56
+ <div>
57
+ {{ checkbox({
58
+ label: _,
59
+ name: 'tenets',
60
+ id: _,
61
+ value: _
62
+ })}}
63
+ </div>
64
+ {% endfor %}
65
+
66
+ <label class="c-label">Radio buttons</label>
67
+ {% for _ in ["Bears","Beets","Battlestar Galactica"] %}
68
+ <div>
69
+ {{ radio({
70
+ label: _,
71
+ name: 'facts',
72
+ id: _,
73
+ value: _
74
+ })}}
75
+ </div>
76
+ {% endfor %}
76
77
 
77
- <label class="c-label">Toggle</label>
78
- {{ toggle({
79
- label: 'Toggle',
80
- name: 'toggle',
81
- id: 'toggle',
82
- type: 'toggle',
83
- placeholder: 'Toggle?'
84
- })}}
85
- </fieldset>
78
+ <label class="c-label">Toggle</label>
79
+ {{ toggle({
80
+ label: 'Toggle',
81
+ name: 'toggle',
82
+ id: 'toggle',
83
+ type: 'toggle',
84
+ placeholder: 'Toggle?'
85
+ })}}
86
+ </section>
87
+ {# MISC FIELD TYPES EXAMPLES #}
88
+ <section class="c-form__section u-flow--m">
89
+ <legend id="variations"><code>&lt;input&gt;</code> variations</legend>
90
+
91
+ {{ input({
92
+ label: 'Email',
93
+ name: 'email_input',
94
+ id: 'email_input',
95
+ type: 'email',
96
+ placeholder: 'Placeholder'
97
+ })}}
98
+
99
+ {{ input({
100
+ label: 'Password',
101
+ name: 'password_input',
102
+ id: 'password_input',
103
+ type: 'password'
104
+ })}}
105
+
106
+ {{ input({
107
+ label: 'Date',
108
+ name: 'date_input',
109
+ id: 'date_input',
110
+ type: 'date',
111
+ placeholder: 'Placeholder'
112
+ })}}
86
113
 
87
- <hr>
114
+ {{ input({
115
+ label: 'Search',
116
+ name: 'search_input',
117
+ id: 'search_input',
118
+ type: 'search',
119
+ placeholder: 'Placeholder'
120
+ })}}
121
+
122
+ {{ input({
123
+ label: 'Telephone',
124
+ name: 'tel_input',
125
+ id: 'tel_input',
126
+ type: 'tel',
127
+ placeholder: 'Placeholder'
128
+ })}}
129
+
130
+ {{ input({
131
+ label: 'Number',
132
+ name: 'number_input',
133
+ id: 'number_input',
134
+ type: 'number',
135
+ placeholder: 'Placeholder'
136
+ })}}
88
137
 
89
- {# MISC FIELD TYPES EXAMPLES #}
90
- <fieldset class="c-fieldset u-flow--m u-wrap--fields">
91
- <legend id="variations"><code>&lt;input&gt;</code> variations</legend>
92
-
93
- {{ input({
94
- label: 'Email',
95
- name: 'email_input',
96
- id: 'email_input',
97
- type: 'email',
98
- placeholder: 'Placeholder'
99
- })}}
100
-
101
- {{ input({
102
- label: 'Password',
103
- name: 'password_input',
104
- id: 'password_input',
105
- type: 'password'
106
- })}}
107
-
108
- {{ input({
109
- label: 'Date',
110
- name: 'date_input',
111
- id: 'date_input',
112
- type: 'date',
113
- placeholder: 'Placeholder'
114
- })}}
138
+ {{ input({
139
+ label: 'File',
140
+ name: 'file_input',
141
+ id: 'file_input',
142
+ type: 'file',
143
+ classes: 'c-input--file'
144
+ })}}
145
+
146
+ {{ input({
147
+ label: 'Range',
148
+ name: 'range_input',
149
+ id: 'range_input',
150
+ type: 'range',
151
+ placeholder: 'Placeholder'
152
+ })}}
153
+
154
+ {{ input({
155
+ label: 'URL',
156
+ name: 'url_input',
157
+ id: 'url_input',
158
+ type: 'url',
159
+ placeholder: 'Placeholder'
160
+ })}}
115
161
 
116
- {{ input({
117
- label: 'Search',
118
- name: 'search_input',
119
- id: 'search_input',
120
- type: 'search',
121
- placeholder: 'Placeholder'
122
- })}}
123
-
124
- {{ input({
125
- label: 'Telephone',
126
- name: 'tel_input',
127
- id: 'tel_input',
128
- type: 'tel',
129
- placeholder: 'Placeholder'
130
- })}}
131
-
132
- {{ input({
133
- label: 'Number',
134
- name: 'number_input',
135
- id: 'number_input',
136
- type: 'number',
137
- placeholder: 'Placeholder'
138
- })}}
162
+ {{ input({
163
+ label: 'Color',
164
+ name: 'color_input',
165
+ id: 'color_input',
166
+ type: 'color',
167
+ placeholder: 'Placeholder'
168
+ })}}
169
+ </section>
170
+ {# DISABLED EXAMPLES #}
171
+ <section class="c-form__section u-flow--m">
172
+ <legend id="disabled">Disabled</legend>
173
+ {{ input({
174
+ label: 'Text',
175
+ name: 'text_input',
176
+ id: 'text_input',
177
+ type: 'text',
178
+ placeholder: 'Placeholder',
179
+ disabled: true
180
+ })}}
139
181
 
140
- {{ input({
141
- label: 'File',
142
- name: 'file_input',
143
- id: 'file_input',
144
- type: 'file',
145
- classes: 'c-input--file'
146
- })}}
147
-
148
- {{ input({
149
- label: 'Range',
150
- name: 'range_input',
151
- id: 'range_input',
152
- type: 'range',
153
- placeholder: 'Placeholder'
154
- })}}
155
-
156
- {{ input({
157
- label: 'URL',
158
- name: 'url_input',
159
- id: 'url_input',
160
- type: 'url',
161
- placeholder: 'Placeholder'
162
- })}}
163
-
164
- {{ input({
165
- label: 'Color',
166
- name: 'color_input',
167
- id: 'color_input',
168
- type: 'color',
169
- placeholder: 'Placeholder'
170
- })}}
171
- </fieldset>
172
-
173
- <hr>
174
-
175
- {# DISABLED EXAMPLES #}
176
- <fieldset class="c-fieldset u-flow--m u-wrap--fields">
177
- <legend id="disabled">Disabled</legend>
178
- {{ input({
179
- label: 'Text',
180
- name: 'text_input',
181
- id: 'text_input',
182
- type: 'text',
183
- placeholder: 'Placeholder',
184
- disabled: true
185
- })}}
186
-
187
- {{ select({
188
- label: "Select",
189
- name: "select",
190
- id: "select",
191
- placeholder: "Placeholder",
192
- disabled: true,
193
- options: [
194
- [
195
- "option-1",
196
- "Option 1"
197
- ],
198
- [
199
- "Option 2"
200
- ],
201
- [
202
- "option-3",
203
- "Option 3"
182
+ {{ select({
183
+ label: "Select",
184
+ name: "select",
185
+ id: "select",
186
+ placeholder: "Placeholder",
187
+ disabled: true,
188
+ options: [
189
+ [
190
+ "option-1",
191
+ "Option 1"
192
+ ],
193
+ [
194
+ "Option 2"
195
+ ],
196
+ [
197
+ "option-3",
198
+ "Option 3"
199
+ ]
204
200
  ]
205
- ]
206
- })}}
207
-
208
- {{ textarea({
209
- label: 'Textarea',
210
- name: 'textarea',
211
- id: 'textarea',
212
- type: 'textarea',
213
- placeholder: 'Placeholder',
214
- disabled: true
215
- })}}
216
-
217
- <label class="c-label">Checkboxes</label>
218
- {% for _ in ["Live","Laugh","Love"] %}
219
- <div>
220
- {{ checkbox({
221
- label: _,
222
- name: 'tenets--disabled',
223
- id: _+'--disabled',
224
- disabled: true
225
- })}}
226
- </div>
227
- {% endfor %}
228
-
229
- <label class="c-label">Radio buttons</label>
230
- {% for _ in ["Bears","Beets","Battlestar Galactica"] %}
231
- <div>
232
- {{ radio({
233
- label: _,
234
- name: 'facts--disabled',
235
- id: _+'--disabled',
236
- disabled: true
237
- })}}
238
- </div>
239
- {% endfor %}
240
-
241
- <label class="c-label">Toggle</label>
242
- {{ toggle({
243
- label: 'Toggle',
244
- name: 'toggle--disabled',
245
- id: 'toggle--disabled',
246
- type: 'toggle',
247
- placeholder: 'Toggle?',
248
- disabled: true
249
- })}}
201
+ })}}
202
+
203
+ {{ textarea({
204
+ label: 'Textarea',
205
+ name: 'textarea',
206
+ id: 'textarea',
207
+ type: 'textarea',
208
+ placeholder: 'Placeholder',
209
+ disabled: true
210
+ })}}
250
211
 
251
- {{ input({
252
- label: 'Email',
253
- name: 'email_input',
254
- id: 'email_input',
255
- type: 'email',
256
- placeholder: 'Placeholder',
257
- disabled: true
258
- })}}
259
-
260
- {{ input({
261
- label: 'Password',
262
- name: 'password_input',
263
- id: 'password_input',
264
- type: 'password',
265
- disabled: true
266
- })}}
267
-
268
- {{ input({
269
- label: 'Date',
270
- name: 'date_input',
271
- id: 'date_input',
272
- type: 'date',
273
- placeholder: 'Placeholder',
274
- disabled: true
275
- })}}
212
+ <label class="c-label">Checkboxes</label>
213
+ {% for _ in ["Live","Laugh","Love"] %}
214
+ <div>
215
+ {{ checkbox({
216
+ label: _,
217
+ name: 'tenets--disabled',
218
+ id: _+'--disabled',
219
+ disabled: true
220
+ })}}
221
+ </div>
222
+ {% endfor %}
223
+
224
+ <label class="c-label">Radio buttons</label>
225
+ {% for _ in ["Bears","Beets","Battlestar Galactica"] %}
226
+ <div>
227
+ {{ radio({
228
+ label: _,
229
+ name: 'facts--disabled',
230
+ id: _+'--disabled',
231
+ disabled: true
232
+ })}}
233
+ </div>
234
+ {% endfor %}
235
+
236
+ <label class="c-label">Toggle</label>
237
+ {{ toggle({
238
+ label: 'Toggle',
239
+ name: 'toggle--disabled',
240
+ id: 'toggle--disabled',
241
+ type: 'toggle',
242
+ placeholder: 'Toggle?',
243
+ disabled: true
244
+ })}}
276
245
 
277
- {{ input({
278
- label: 'Search',
279
- name: 'search_input',
280
- id: 'search_input',
281
- type: 'search',
282
- placeholder: 'Placeholder',
283
- disabled: true
284
- })}}
285
-
286
- {{ input({
287
- label: 'Telephone',
288
- name: 'tel_input',
289
- id: 'tel_input',
290
- type: 'tel',
291
- placeholder: 'Placeholder',
292
- disabled: true
293
- })}}
294
-
295
- {{ input({
296
- label: 'Number',
297
- name: 'number_input',
298
- id: 'number_input',
299
- type: 'number',
300
- placeholder: 'Placeholder',
301
- disabled: true
302
- })}}
246
+ {{ input({
247
+ label: 'Email',
248
+ name: 'email_input',
249
+ id: 'email_input',
250
+ type: 'email',
251
+ placeholder: 'Placeholder',
252
+ disabled: true
253
+ })}}
254
+
255
+ {{ input({
256
+ label: 'Password',
257
+ name: 'password_input',
258
+ id: 'password_input',
259
+ type: 'password',
260
+ disabled: true
261
+ })}}
262
+
263
+ {{ input({
264
+ label: 'Date',
265
+ name: 'date_input',
266
+ id: 'date_input',
267
+ type: 'date',
268
+ placeholder: 'Placeholder',
269
+ disabled: true
270
+ })}}
303
271
 
304
- {{ input({
305
- label: 'File',
306
- name: 'file_input',
307
- id: 'file_input',
308
- type: 'file',
309
- classes: 'c-input--file',
310
- disabled: true
311
- })}}
312
-
313
- {{ input({
314
- label: 'Range',
315
- name: 'range_input',
316
- id: 'range_input',
317
- type: 'range',
318
- placeholder: 'Placeholder',
319
- disabled: true
320
- })}}
321
-
322
- {{ input({
323
- label: 'URL',
324
- name: 'url_input',
325
- id: 'url_input',
326
- type: 'url',
327
- placeholder: 'Placeholder',
328
- disabled: true
329
- })}}
272
+ {{ input({
273
+ label: 'Search',
274
+ name: 'search_input',
275
+ id: 'search_input',
276
+ type: 'search',
277
+ placeholder: 'Placeholder',
278
+ disabled: true
279
+ })}}
280
+
281
+ {{ input({
282
+ label: 'Telephone',
283
+ name: 'tel_input',
284
+ id: 'tel_input',
285
+ type: 'tel',
286
+ placeholder: 'Placeholder',
287
+ disabled: true
288
+ })}}
289
+
290
+ {{ input({
291
+ label: 'Number',
292
+ name: 'number_input',
293
+ id: 'number_input',
294
+ type: 'number',
295
+ placeholder: 'Placeholder',
296
+ disabled: true
297
+ })}}
330
298
 
331
- {{ input({
332
- label: 'Color',
333
- name: 'color_input',
334
- id: 'color_input',
335
- type: 'color',
336
- placeholder: 'Placeholder',
337
- disabled: true
338
- })}}
339
- </fieldset>
340
- </form>
299
+ {{ input({
300
+ label: 'File',
301
+ name: 'file_input',
302
+ id: 'file_input',
303
+ type: 'file',
304
+ classes: 'c-input--file',
305
+ disabled: true
306
+ })}}
307
+
308
+ {{ input({
309
+ label: 'Range',
310
+ name: 'range_input',
311
+ id: 'range_input',
312
+ type: 'range',
313
+ placeholder: 'Placeholder',
314
+ disabled: true
315
+ })}}
316
+
317
+ {{ input({
318
+ label: 'URL',
319
+ name: 'url_input',
320
+ id: 'url_input',
321
+ type: 'url',
322
+ placeholder: 'Placeholder',
323
+ disabled: true
324
+ })}}
341
325
 
342
- <hr>
326
+ {{ input({
327
+ label: 'Color',
328
+ name: 'color_input',
329
+ id: 'color_input',
330
+ type: 'color',
331
+ placeholder: 'Placeholder',
332
+ disabled: true
333
+ })}}
334
+ </section>
335
+ </form>
343
336
 
344
- {{ alert({
345
- type: 'info',
346
- content: '<h3>To do:</h3>
337
+ {{ alert({
338
+ type: 'info',
339
+ content: '<h3>To do:</h3>
347
340
  <ul>
348
341
  <li>Allow extra attributes for some input types (e.g. "step" on number inputs)</li>
349
342
  <li>Allow state attribute, e.g. disabled, error, prefilled</li>
@@ -351,5 +344,6 @@ layout: patterns-page
351
344
  <li>Better design for range input</li>
352
345
  <li>Better design for color input</li>
353
346
  </ul>'
354
- }) }}
347
+ }) }}
348
+ </div>
355
349
  </div>