mp-design-system 1.2.36 → 1.2.38

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (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>