@pnx-mixtape/mxds 0.0.8 → 0.0.10
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/filters.css +105 -0
- package/dist/build/link-list.css +9 -36
- package/dist/build/masthead.css +24 -1
- package/dist/build/tag.css +5 -1
- package/package.json +1 -1
- package/src/Atom/Button/button.twig +1 -1
- package/src/Atom/Image/image.twig +4 -4
- package/src/Atom/InlineSvg/inline-svg.twig +24 -0
- package/src/Atom/Link/link.twig +1 -1
- package/src/Atom/LinkedImage/linked-image.twig +5 -0
- package/src/Atom/Media/media.twig +3 -3
- package/src/Atom/Video/video.twig +2 -2
- package/src/Component/Accordion/accordion-item.twig +1 -1
- package/src/Component/Accordion/accordion.css +10 -14
- package/src/Component/Accordion/accordion.twig +1 -1
- package/src/Component/Card/Card.stories.ts +26 -14
- package/src/Component/Card/__snapshots__/Card.stories.ts.snap +18 -12
- package/src/Component/Card/card.twig +5 -5
- package/src/Component/ContentBlock/__snapshots__/ContentBlock.stories.ts.snap +9 -45
- package/src/Component/ContentBlock/content-block.twig +2 -2
- package/src/Component/DropMenu/drop-menu.twig +1 -1
- package/src/Component/Filters/Elements/Filters.ts +157 -0
- package/src/Component/Filters/Filters.stories.ts +230 -0
- package/src/Component/Filters/__snapshots__/Filters.stories.ts.snap +435 -0
- package/src/Component/Filters/filter-item.twig +50 -0
- package/src/Component/Filters/filters.css +102 -0
- package/src/Component/Filters/filters.twig +49 -0
- package/src/Component/GlobalAlert/__snapshots__/GlobalAlert.stories.ts.snap +1 -3
- package/src/Component/GlobalAlert/global-alert.twig +3 -3
- package/src/Component/HeroBanner/HeroBanner.stories.ts +25 -11
- package/src/Component/HeroBanner/__snapshots__/HeroBanner.stories.ts.snap +18 -12
- package/src/Component/HeroBanner/hero-banner.twig +3 -3
- package/src/Component/LinkList/LinkList.stories.ts +20 -6
- package/src/Component/LinkList/__snapshots__/LinkList.stories.ts.snap +18 -12
- package/src/Component/LinkList/link-list.css +7 -35
- package/src/Component/LinkList/link-list.twig +1 -5
- package/src/Component/ListItem/list-item.twig +4 -4
- package/src/Component/Navigation/menu.twig +4 -4
- package/src/Component/Navigation/navigation.twig +2 -2
- package/src/Component/Pagination/pagination-item.twig +1 -1
- package/src/Component/Pagination/pagination.twig +2 -2
- package/src/Component/SideNavigation/side-navigation.twig +4 -4
- package/src/Component/Tabs/tabs.twig +1 -1
- package/src/Component/Tag/tag.css +4 -0
- package/src/Form/Checkbox/input-checkbox.twig +1 -1
- package/src/Form/Form/form.twig +2 -2
- package/src/Form/FormItem/form-item.twig +1 -1
- package/src/Form/Select/input-select.twig +1 -1
- package/src/Form/TextInput/input-text.twig +1 -1
- package/src/Form/Textarea/input-textarea.twig +1 -1
- package/src/Layout/Footer/Footer.stories.ts +0 -1
- package/src/Layout/Footer/__snapshots__/Footer.stories.ts.snap +20 -40
- package/src/Layout/Footer/footer.twig +3 -3
- package/src/Layout/Header/Header.stories.ts +0 -1
- package/src/Layout/Header/__snapshots__/Header.stories.ts.snap +5 -5
- package/src/Layout/Header/header-stacked.twig +13 -11
- package/src/Layout/Header/header.twig +12 -10
- package/src/Layout/Header/twig/logo.twig +1 -3
- package/src/Layout/Masthead/Masthead.stories.ts +10 -0
- package/src/Layout/Masthead/__snapshots__/Masthead.stories.ts.snap +51 -3
- package/src/Layout/Masthead/masthead.css +23 -0
- package/src/Layout/Masthead/masthead.twig +9 -5
- package/src/Layout/Section/section.twig +1 -1
- package/src/Layout/Sidebar/sidebar.twig +5 -5
|
@@ -0,0 +1,435 @@
|
|
|
1
|
+
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
|
+
|
|
3
|
+
exports[`Component/Filters CollapsibleCounter smoke-test 1`] = `
|
|
4
|
+
<mx-filters class="mx-filters mx-filters--down "
|
|
5
|
+
count="1"
|
|
6
|
+
>
|
|
7
|
+
<mx-accordionmobile>
|
|
8
|
+
<details class="mx-accordion"
|
|
9
|
+
id="filters-1"
|
|
10
|
+
open
|
|
11
|
+
>
|
|
12
|
+
<summary class="mx-accordion__toggle mx-filters__title">
|
|
13
|
+
Filters
|
|
14
|
+
<span class="mx-tag"
|
|
15
|
+
data-counters
|
|
16
|
+
>
|
|
17
|
+
1
|
|
18
|
+
</span>
|
|
19
|
+
<span class="mx-icon mx-icon--chevron-down"
|
|
20
|
+
aria-hidden="true"
|
|
21
|
+
>
|
|
22
|
+
</span>
|
|
23
|
+
</summary>
|
|
24
|
+
<form class="mx-filters__form mx-vertical-flow"
|
|
25
|
+
action="#"
|
|
26
|
+
>
|
|
27
|
+
<mx-accordion>
|
|
28
|
+
<details class="mx-accordion mx-filter-item"
|
|
29
|
+
id="filter-keywords-container"
|
|
30
|
+
open
|
|
31
|
+
>
|
|
32
|
+
<summary class="mx-accordion__toggle">
|
|
33
|
+
Keywords
|
|
34
|
+
<span class="mx-tag"
|
|
35
|
+
data-counter
|
|
36
|
+
>
|
|
37
|
+
</span>
|
|
38
|
+
<span class="mx-icon mx-icon--chevron-down"
|
|
39
|
+
aria-hidden="true"
|
|
40
|
+
>
|
|
41
|
+
</span>
|
|
42
|
+
</summary>
|
|
43
|
+
<div class="mx-form-item mx-accordion__content">
|
|
44
|
+
<input class="mx-input__text "
|
|
45
|
+
id="filter-keywords"
|
|
46
|
+
name="example-keywords"
|
|
47
|
+
type="text"
|
|
48
|
+
value
|
|
49
|
+
aria-label="Keywords"
|
|
50
|
+
aria-describedby="unique-0"
|
|
51
|
+
>
|
|
52
|
+
<div class="mx-description"
|
|
53
|
+
id="unique-0"
|
|
54
|
+
role="tooltip"
|
|
55
|
+
>
|
|
56
|
+
Search by keywords
|
|
57
|
+
</div>
|
|
58
|
+
</div>
|
|
59
|
+
</details>
|
|
60
|
+
</mx-accordion>
|
|
61
|
+
<mx-accordion>
|
|
62
|
+
<details class="mx-accordion mx-filter-item"
|
|
63
|
+
id="filter-categories-container"
|
|
64
|
+
open
|
|
65
|
+
>
|
|
66
|
+
<summary class="mx-accordion__toggle">
|
|
67
|
+
Categories
|
|
68
|
+
<span class="mx-tag"
|
|
69
|
+
data-counter
|
|
70
|
+
>
|
|
71
|
+
2
|
|
72
|
+
</span>
|
|
73
|
+
<span class="mx-icon mx-icon--chevron-down"
|
|
74
|
+
aria-hidden="true"
|
|
75
|
+
>
|
|
76
|
+
</span>
|
|
77
|
+
</summary>
|
|
78
|
+
<fieldset class="mx-form-item mx-fieldset mx-accordion__content">
|
|
79
|
+
<div class="mx-checkbox ">
|
|
80
|
+
<input id="category-news"
|
|
81
|
+
type="checkbox"
|
|
82
|
+
name="categories"
|
|
83
|
+
value="news"
|
|
84
|
+
checked="checked"
|
|
85
|
+
>
|
|
86
|
+
<label for="category-news">
|
|
87
|
+
News
|
|
88
|
+
</label>
|
|
89
|
+
</div>
|
|
90
|
+
<div class="mx-checkbox ">
|
|
91
|
+
<input id="category-media"
|
|
92
|
+
type="checkbox"
|
|
93
|
+
name="categories"
|
|
94
|
+
value="media"
|
|
95
|
+
checked="checked"
|
|
96
|
+
>
|
|
97
|
+
<label for="category-media">
|
|
98
|
+
Media Releases
|
|
99
|
+
</label>
|
|
100
|
+
</div>
|
|
101
|
+
<div hidden="until-found">
|
|
102
|
+
<div class="mx-checkbox ">
|
|
103
|
+
<input id="category-publications"
|
|
104
|
+
type="checkbox"
|
|
105
|
+
name="categories"
|
|
106
|
+
value="publications"
|
|
107
|
+
>
|
|
108
|
+
<label for="category-publications">
|
|
109
|
+
Publications
|
|
110
|
+
</label>
|
|
111
|
+
</div>
|
|
112
|
+
</div>
|
|
113
|
+
<button data-show
|
|
114
|
+
class="mx-button mx-button--light"
|
|
115
|
+
type="button"
|
|
116
|
+
>
|
|
117
|
+
Show all (3)
|
|
118
|
+
</button>
|
|
119
|
+
</fieldset>
|
|
120
|
+
</details>
|
|
121
|
+
</mx-accordion>
|
|
122
|
+
<div class="mx-form-actions">
|
|
123
|
+
<button class="mx-button mx-button--dark"
|
|
124
|
+
type="submit"
|
|
125
|
+
>
|
|
126
|
+
<span>
|
|
127
|
+
Apply filters
|
|
128
|
+
</span>
|
|
129
|
+
</button>
|
|
130
|
+
<button class="mx-button mx-button--light"
|
|
131
|
+
type="reset"
|
|
132
|
+
>
|
|
133
|
+
<span>
|
|
134
|
+
Clear all filters
|
|
135
|
+
</span>
|
|
136
|
+
</button>
|
|
137
|
+
</div>
|
|
138
|
+
</form>
|
|
139
|
+
</details>
|
|
140
|
+
</mx-accordionmobile>
|
|
141
|
+
</mx-filters>
|
|
142
|
+
`;
|
|
143
|
+
|
|
144
|
+
exports[`Component/Filters CollapsibleRight smoke-test 1`] = `
|
|
145
|
+
<mx-filters class="mx-filters mx-filters--right "
|
|
146
|
+
count="0"
|
|
147
|
+
>
|
|
148
|
+
<mx-accordionmobile>
|
|
149
|
+
<details class="mx-accordion"
|
|
150
|
+
id="filters"
|
|
151
|
+
open
|
|
152
|
+
>
|
|
153
|
+
<summary class="mx-accordion__toggle mx-filters__title">
|
|
154
|
+
Filters
|
|
155
|
+
<span class="mx-icon mx-icon--chevron-right"
|
|
156
|
+
aria-hidden="true"
|
|
157
|
+
>
|
|
158
|
+
</span>
|
|
159
|
+
</summary>
|
|
160
|
+
<form class="mx-filters__form mx-vertical-flow"
|
|
161
|
+
action="#"
|
|
162
|
+
>
|
|
163
|
+
<div class="mx-filters__title">
|
|
164
|
+
Filters
|
|
165
|
+
<button class="mx-button mx-button--icon-only mx-icon mx-icon--close"
|
|
166
|
+
data-close
|
|
167
|
+
>
|
|
168
|
+
Close filters
|
|
169
|
+
</button>
|
|
170
|
+
</div>
|
|
171
|
+
<mx-accordion>
|
|
172
|
+
<details class="mx-accordion mx-filter-item"
|
|
173
|
+
id="filter-keywords-container"
|
|
174
|
+
open
|
|
175
|
+
>
|
|
176
|
+
<summary class="mx-accordion__toggle">
|
|
177
|
+
Keywords
|
|
178
|
+
<span class="mx-icon mx-icon--chevron-down"
|
|
179
|
+
aria-hidden="true"
|
|
180
|
+
>
|
|
181
|
+
</span>
|
|
182
|
+
</summary>
|
|
183
|
+
<div class="mx-form-item mx-accordion__content">
|
|
184
|
+
<div class="mx-description"
|
|
185
|
+
id="unique-0"
|
|
186
|
+
role="tooltip"
|
|
187
|
+
>
|
|
188
|
+
Search by keywords
|
|
189
|
+
</div>
|
|
190
|
+
<input class="mx-input__text "
|
|
191
|
+
id="filter-keywords"
|
|
192
|
+
name="example-keywords"
|
|
193
|
+
type="text"
|
|
194
|
+
value
|
|
195
|
+
aria-label="Keywords"
|
|
196
|
+
aria-describedby="unique-0"
|
|
197
|
+
>
|
|
198
|
+
</div>
|
|
199
|
+
</details>
|
|
200
|
+
</mx-accordion>
|
|
201
|
+
<mx-accordion>
|
|
202
|
+
<details class="mx-accordion mx-filter-item"
|
|
203
|
+
id="filter-categories-container"
|
|
204
|
+
open
|
|
205
|
+
>
|
|
206
|
+
<summary class="mx-accordion__toggle">
|
|
207
|
+
Categories
|
|
208
|
+
<span class="mx-icon mx-icon--chevron-down"
|
|
209
|
+
aria-hidden="true"
|
|
210
|
+
>
|
|
211
|
+
</span>
|
|
212
|
+
</summary>
|
|
213
|
+
<fieldset class="mx-form-item mx-fieldset mx-accordion__content">
|
|
214
|
+
<div class="mx-checkbox ">
|
|
215
|
+
<input id="category-news"
|
|
216
|
+
type="checkbox"
|
|
217
|
+
name="categories"
|
|
218
|
+
value="news"
|
|
219
|
+
>
|
|
220
|
+
<label for="category-news">
|
|
221
|
+
News
|
|
222
|
+
</label>
|
|
223
|
+
</div>
|
|
224
|
+
<div class="mx-checkbox ">
|
|
225
|
+
<input id="category-media"
|
|
226
|
+
type="checkbox"
|
|
227
|
+
name="categories"
|
|
228
|
+
value="media"
|
|
229
|
+
>
|
|
230
|
+
<label for="category-media">
|
|
231
|
+
Media Releases
|
|
232
|
+
</label>
|
|
233
|
+
</div>
|
|
234
|
+
<div class="mx-checkbox ">
|
|
235
|
+
<input id="category-publications"
|
|
236
|
+
type="checkbox"
|
|
237
|
+
name="categories"
|
|
238
|
+
value="publications"
|
|
239
|
+
>
|
|
240
|
+
<label for="category-publications">
|
|
241
|
+
Publications
|
|
242
|
+
</label>
|
|
243
|
+
</div>
|
|
244
|
+
</fieldset>
|
|
245
|
+
</details>
|
|
246
|
+
</mx-accordion>
|
|
247
|
+
<div class="mx-form-actions">
|
|
248
|
+
<button class="mx-button mx-button--dark"
|
|
249
|
+
type="submit"
|
|
250
|
+
disabled
|
|
251
|
+
>
|
|
252
|
+
<span>
|
|
253
|
+
Apply filters
|
|
254
|
+
</span>
|
|
255
|
+
</button>
|
|
256
|
+
<button class="mx-button mx-button--light"
|
|
257
|
+
type="reset"
|
|
258
|
+
disabled
|
|
259
|
+
>
|
|
260
|
+
<span>
|
|
261
|
+
Clear all filters
|
|
262
|
+
</span>
|
|
263
|
+
</button>
|
|
264
|
+
</div>
|
|
265
|
+
</form>
|
|
266
|
+
</details>
|
|
267
|
+
</mx-accordionmobile>
|
|
268
|
+
</mx-filters>
|
|
269
|
+
`;
|
|
270
|
+
|
|
271
|
+
exports[`Component/Filters Filters smoke-test 1`] = `
|
|
272
|
+
<mx-filters class="mx-filters mx-filters--down "
|
|
273
|
+
count="0"
|
|
274
|
+
>
|
|
275
|
+
<h2 class="mx-filters__title">
|
|
276
|
+
Filters
|
|
277
|
+
</h2>
|
|
278
|
+
<form class="mx-filters__form mx-vertical-flow"
|
|
279
|
+
action="#"
|
|
280
|
+
>
|
|
281
|
+
<div class="mx-form-item mx-filter-item">
|
|
282
|
+
<label class="mx-label "
|
|
283
|
+
for="filter-keywords"
|
|
284
|
+
>
|
|
285
|
+
Keywords
|
|
286
|
+
</label>
|
|
287
|
+
<div class="mx-description"
|
|
288
|
+
id="unique-0"
|
|
289
|
+
role="tooltip"
|
|
290
|
+
>
|
|
291
|
+
Search by keywords
|
|
292
|
+
</div>
|
|
293
|
+
<input class="mx-input__text "
|
|
294
|
+
id="filter-keywords"
|
|
295
|
+
name="example-keywords"
|
|
296
|
+
type="text"
|
|
297
|
+
value
|
|
298
|
+
aria-describedby="unique-0"
|
|
299
|
+
>
|
|
300
|
+
</div>
|
|
301
|
+
<fieldset class="mx-form-item mx-fieldset mx-filter-item">
|
|
302
|
+
<legend class="mx-legend ">
|
|
303
|
+
Categories
|
|
304
|
+
</legend>
|
|
305
|
+
<div class="mx-checkbox ">
|
|
306
|
+
<input id="category-news"
|
|
307
|
+
type="checkbox"
|
|
308
|
+
name="categories"
|
|
309
|
+
value="news"
|
|
310
|
+
>
|
|
311
|
+
<label for="category-news">
|
|
312
|
+
News
|
|
313
|
+
</label>
|
|
314
|
+
</div>
|
|
315
|
+
<div class="mx-checkbox ">
|
|
316
|
+
<input id="category-media"
|
|
317
|
+
type="checkbox"
|
|
318
|
+
name="categories"
|
|
319
|
+
value="media"
|
|
320
|
+
>
|
|
321
|
+
<label for="category-media">
|
|
322
|
+
Media Releases
|
|
323
|
+
</label>
|
|
324
|
+
</div>
|
|
325
|
+
<div class="mx-checkbox ">
|
|
326
|
+
<input id="category-publications"
|
|
327
|
+
type="checkbox"
|
|
328
|
+
name="categories"
|
|
329
|
+
value="publications"
|
|
330
|
+
>
|
|
331
|
+
<label for="category-publications">
|
|
332
|
+
Publications
|
|
333
|
+
</label>
|
|
334
|
+
</div>
|
|
335
|
+
</fieldset>
|
|
336
|
+
<div class="mx-form-actions">
|
|
337
|
+
<button class="mx-button mx-button--dark"
|
|
338
|
+
type="submit"
|
|
339
|
+
disabled
|
|
340
|
+
>
|
|
341
|
+
<span>
|
|
342
|
+
Apply filters
|
|
343
|
+
</span>
|
|
344
|
+
</button>
|
|
345
|
+
<button class="mx-button mx-button--light"
|
|
346
|
+
type="reset"
|
|
347
|
+
disabled
|
|
348
|
+
>
|
|
349
|
+
<span>
|
|
350
|
+
Clear all filters
|
|
351
|
+
</span>
|
|
352
|
+
</button>
|
|
353
|
+
</div>
|
|
354
|
+
</form>
|
|
355
|
+
</mx-filters>
|
|
356
|
+
`;
|
|
357
|
+
|
|
358
|
+
exports[`Component/Filters Instant smoke-test 1`] = `
|
|
359
|
+
<mx-filters class="mx-filters mx-filters--down mx-filters--auto"
|
|
360
|
+
count="0"
|
|
361
|
+
>
|
|
362
|
+
<h2 class="mx-filters__title">
|
|
363
|
+
Filters
|
|
364
|
+
</h2>
|
|
365
|
+
<form class="mx-filters__form mx-vertical-flow"
|
|
366
|
+
action="#"
|
|
367
|
+
>
|
|
368
|
+
<div class="mx-form-item mx-filter-item">
|
|
369
|
+
<label class="mx-label "
|
|
370
|
+
for="filter-keywords"
|
|
371
|
+
>
|
|
372
|
+
Keywords
|
|
373
|
+
</label>
|
|
374
|
+
<div class="mx-description"
|
|
375
|
+
id="unique-0"
|
|
376
|
+
role="tooltip"
|
|
377
|
+
>
|
|
378
|
+
Search by keywords
|
|
379
|
+
</div>
|
|
380
|
+
<input class="mx-input__text "
|
|
381
|
+
id="filter-keywords"
|
|
382
|
+
name="example-keywords"
|
|
383
|
+
type="text"
|
|
384
|
+
value
|
|
385
|
+
aria-describedby="unique-0"
|
|
386
|
+
>
|
|
387
|
+
</div>
|
|
388
|
+
<fieldset class="mx-form-item mx-fieldset mx-filter-item">
|
|
389
|
+
<legend class="mx-legend ">
|
|
390
|
+
Categories
|
|
391
|
+
</legend>
|
|
392
|
+
<div class="mx-checkbox ">
|
|
393
|
+
<input id="category-news"
|
|
394
|
+
type="checkbox"
|
|
395
|
+
name="categories"
|
|
396
|
+
value="news"
|
|
397
|
+
>
|
|
398
|
+
<label for="category-news">
|
|
399
|
+
News
|
|
400
|
+
</label>
|
|
401
|
+
</div>
|
|
402
|
+
<div class="mx-checkbox ">
|
|
403
|
+
<input id="category-media"
|
|
404
|
+
type="checkbox"
|
|
405
|
+
name="categories"
|
|
406
|
+
value="media"
|
|
407
|
+
>
|
|
408
|
+
<label for="category-media">
|
|
409
|
+
Media Releases
|
|
410
|
+
</label>
|
|
411
|
+
</div>
|
|
412
|
+
<div class="mx-checkbox ">
|
|
413
|
+
<input id="category-publications"
|
|
414
|
+
type="checkbox"
|
|
415
|
+
name="categories"
|
|
416
|
+
value="publications"
|
|
417
|
+
>
|
|
418
|
+
<label for="category-publications">
|
|
419
|
+
Publications
|
|
420
|
+
</label>
|
|
421
|
+
</div>
|
|
422
|
+
</fieldset>
|
|
423
|
+
<div class="mx-form-actions">
|
|
424
|
+
<button class="mx-button mx-button--light"
|
|
425
|
+
type="reset"
|
|
426
|
+
disabled
|
|
427
|
+
>
|
|
428
|
+
<span>
|
|
429
|
+
Clear all filters
|
|
430
|
+
</span>
|
|
431
|
+
</button>
|
|
432
|
+
</div>
|
|
433
|
+
</form>
|
|
434
|
+
</mx-filters>
|
|
435
|
+
`;
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
{% set baseClass = "mx-form-item" %}
|
|
2
|
+
{% set classes = [
|
|
3
|
+
baseClass,
|
|
4
|
+
as == "fieldset" ? 'mx-fieldset' : null,
|
|
5
|
+
inline ? baseClass~"--inline" : null,
|
|
6
|
+
collapsible ? 'mx-accordion__content' : 'mx-filter-item',
|
|
7
|
+
] %}
|
|
8
|
+
{% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
|
|
9
|
+
{% set as = as|default("div") %}
|
|
10
|
+
|
|
11
|
+
{% if collapsible %}
|
|
12
|
+
<mx-accordion>
|
|
13
|
+
<details class="mx-accordion mx-filter-item" {% if id %} id="{{ id~'-container' }}"{% endif %}{% if collapsible.open %} open{% endif %}>
|
|
14
|
+
<summary class="mx-accordion__toggle">
|
|
15
|
+
{{ collapsible.title }}
|
|
16
|
+
{% if collapsible.counter %}<span class="mx-tag" data-counter></span>{% endif %}
|
|
17
|
+
<span class="mx-icon mx-icon--chevron-down" aria-hidden="true"></span>
|
|
18
|
+
</summary>
|
|
19
|
+
{% endif %}
|
|
20
|
+
|
|
21
|
+
<{{ as }}{{ attributes }}>
|
|
22
|
+
{{ label }}
|
|
23
|
+
{{ descriptionStart }}
|
|
24
|
+
{% if fields[0] is not empty %}
|
|
25
|
+
{% if shownItems is not empty and fields|length > shownItems %}
|
|
26
|
+
{% for field in fields %}
|
|
27
|
+
{% if loop.index <= shownItems %}{{ field }}{% endif %}
|
|
28
|
+
{% endfor %}
|
|
29
|
+
<div hidden="until-found">
|
|
30
|
+
{% for field in fields %}
|
|
31
|
+
{% if loop.index > shownItems %}{{ field }}{% endif %}
|
|
32
|
+
{% endfor %}
|
|
33
|
+
</div>
|
|
34
|
+
<button data-show class="mx-button mx-button--light" type="button">Show all ({{ fields|length }})</button>
|
|
35
|
+
{% else %}
|
|
36
|
+
{% for field in fields %}
|
|
37
|
+
{{ field }}
|
|
38
|
+
{% endfor %}
|
|
39
|
+
{% endif %}
|
|
40
|
+
{% else %}
|
|
41
|
+
{{ fields }}
|
|
42
|
+
{% endif %}
|
|
43
|
+
{{ descriptionEnd }}
|
|
44
|
+
{{ status }}
|
|
45
|
+
</{{ as }}>
|
|
46
|
+
|
|
47
|
+
{% if collapsible %}
|
|
48
|
+
</details>
|
|
49
|
+
</mx-accordion>
|
|
50
|
+
{% endif %}
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Filters
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
@layer design-system.components {
|
|
6
|
+
.mx-filters {
|
|
7
|
+
display: grid;
|
|
8
|
+
gap: var(--gap);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.mx-filters__title {
|
|
12
|
+
--heading-font-size: var(--font-size-l);
|
|
13
|
+
--font-min: calc(
|
|
14
|
+
var(--heading-font-size) - var(--heading-font-size) *
|
|
15
|
+
var(--font-size-diff, 0.3)
|
|
16
|
+
);
|
|
17
|
+
|
|
18
|
+
font-weight: var(--font-weight-bold);
|
|
19
|
+
font-size: clamp(
|
|
20
|
+
max(var(--base-font-size), var(--font-min)),
|
|
21
|
+
var(--font-min) + 1cqi,
|
|
22
|
+
var(--heading-font-size)
|
|
23
|
+
);
|
|
24
|
+
display: flex;
|
|
25
|
+
gap: var(--spacing-s);
|
|
26
|
+
align-items: center;
|
|
27
|
+
min-block-size: 40px;
|
|
28
|
+
|
|
29
|
+
@media (--medium-up) {
|
|
30
|
+
pointer-events: none;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
& .mx-icon {
|
|
34
|
+
margin-inline-start: auto;
|
|
35
|
+
|
|
36
|
+
@media (--medium-up) {
|
|
37
|
+
display: none;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
& [data-counters] {
|
|
42
|
+
@media (--medium-up) {
|
|
43
|
+
display: none;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
&.mx-accordion__toggle + .mx-filters__form {
|
|
48
|
+
padding-block-start: var(--block-padding, var(--gap));
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.mx-filters__form {
|
|
53
|
+
& .mx-accordion__toggle {
|
|
54
|
+
display: flex;
|
|
55
|
+
gap: var(--spacing-s);
|
|
56
|
+
align-items: center;
|
|
57
|
+
|
|
58
|
+
& .mx-icon {
|
|
59
|
+
margin-inline-start: auto;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
& .mx-accordion__content {
|
|
64
|
+
padding-block-start: var(--spacing-xxxs);
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.mx-filters--right {
|
|
69
|
+
@media (--medium-down) {
|
|
70
|
+
& .mx-filters__form {
|
|
71
|
+
background-color: var(--background, var(--colour-background));
|
|
72
|
+
padding-inline: var(
|
|
73
|
+
--gutter,
|
|
74
|
+
clamp(var(--spacing-s), 6vw, var(--spacing-l))
|
|
75
|
+
);
|
|
76
|
+
padding-block-end: var(--block-padding);
|
|
77
|
+
overflow-y: auto;
|
|
78
|
+
position: fixed;
|
|
79
|
+
z-index: 200;
|
|
80
|
+
inset-block: 0;
|
|
81
|
+
inset-inline: 0 -100vw;
|
|
82
|
+
transition: 0.15s ease-in-out;
|
|
83
|
+
visibility: hidden;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
& [open] .mx-filters__form {
|
|
87
|
+
inset-inline-end: 0;
|
|
88
|
+
visibility: visible;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
@media (--medium-up) {
|
|
93
|
+
& .mx-filters__form {
|
|
94
|
+
--block-padding: 0;
|
|
95
|
+
|
|
96
|
+
& .mx-filters__title {
|
|
97
|
+
display: none;
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
{% set baseClass = 'mx-filters' %}
|
|
2
|
+
{% set classes = [
|
|
3
|
+
baseClass,
|
|
4
|
+
direction ? baseClass~'--'~direction : null,
|
|
5
|
+
sticky ? baseClass~'--sticky' : null,
|
|
6
|
+
instant ? baseClass~'--auto' : null,
|
|
7
|
+
] %}
|
|
8
|
+
{% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
|
|
9
|
+
<mx-filters{{ attributes }}>
|
|
10
|
+
|
|
11
|
+
{% if collapsible %}
|
|
12
|
+
<mx-accordionmobile>
|
|
13
|
+
<details class="mx-accordion">
|
|
14
|
+
<summary class="mx-accordion__toggle mx-filters__title">
|
|
15
|
+
{{ title }}
|
|
16
|
+
{% if counter %}<span class="mx-tag" data-counters></span>{% endif %}
|
|
17
|
+
<span class="mx-icon mx-icon--chevron-{{ direction }}" aria-hidden="true"></span>
|
|
18
|
+
</summary>
|
|
19
|
+
{% else %}
|
|
20
|
+
<h2 class="mx-filters__title">
|
|
21
|
+
{{ title }}
|
|
22
|
+
{% if counter %}<span data-counters></span>{% endif %}
|
|
23
|
+
</h2>
|
|
24
|
+
{% endif %}
|
|
25
|
+
|
|
26
|
+
<form class="mx-filters__form mx-vertical-flow" action="{{ action }}">
|
|
27
|
+
{% if direction == "right" %}
|
|
28
|
+
<div class="mx-filters__title">
|
|
29
|
+
{{ title }}
|
|
30
|
+
<button class="mx-button mx-button--icon-only mx-icon mx-icon--close" data-close>Close filters</button>
|
|
31
|
+
</div>
|
|
32
|
+
{% endif %}
|
|
33
|
+
{% for item in items %}
|
|
34
|
+
{{ item }}
|
|
35
|
+
{% endfor %}
|
|
36
|
+
{% if actions is not empty %}
|
|
37
|
+
<div class="mx-form-actions">
|
|
38
|
+
{% for action in actions %}
|
|
39
|
+
{{ action }}
|
|
40
|
+
{% endfor %}
|
|
41
|
+
</div>
|
|
42
|
+
{% endif %}
|
|
43
|
+
</form>
|
|
44
|
+
|
|
45
|
+
{% if collapsible %}
|
|
46
|
+
</details>
|
|
47
|
+
</mx-accordionmobile>
|
|
48
|
+
{% endif %}
|
|
49
|
+
</mx-filters>
|
|
@@ -2,9 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
exports[`Component/GlobalAlert Critical smoke-test 1`] = `
|
|
4
4
|
<div class="mx-global-alert mx-page mx-global-alert--critical">
|
|
5
|
-
<div class="mx-global-alert__inner"
|
|
6
|
-
data-container
|
|
7
|
-
>
|
|
5
|
+
<div class="mx-global-alert__inner">
|
|
8
6
|
<div class="mx-global-alert__content">
|
|
9
7
|
<h2 class=" mx-heading--m">
|
|
10
8
|
In page alert
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
{% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
|
|
8
8
|
|
|
9
9
|
{% if dismissible %}
|
|
10
|
-
<mx-closable-alert {{ attributes}}{% if id %} id="{{ id ~ type }}"{% endif %}>
|
|
10
|
+
<mx-closable-alert {{ attributes}}{% if id is not empty %} id="{{ id ~ type }}"{% endif %}>
|
|
11
11
|
<div class="mx-global-alert__inner" data-container>
|
|
12
12
|
<div class="mx-global-alert__content">
|
|
13
13
|
{{ title }}
|
|
@@ -17,8 +17,8 @@
|
|
|
17
17
|
</div>
|
|
18
18
|
</mx-closable-alert>
|
|
19
19
|
{% else %}
|
|
20
|
-
<div {{ attributes}}{% if id %} id="{{ id ~ type }}"{% endif %}>
|
|
21
|
-
<div class="mx-global-alert__inner"
|
|
20
|
+
<div {{ attributes}}{% if id is not empty %} id="{{ id ~ type }}"{% endif %}>
|
|
21
|
+
<div class="mx-global-alert__inner">
|
|
22
22
|
<div class="mx-global-alert__content">
|
|
23
23
|
{{ title }}
|
|
24
24
|
{{ content }}
|