@openeuropa/bcl-description-list 0.22.0 → 0.25.0
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.
|
@@ -2,32 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
exports[`OE - Description List horizontal renders correctly 1`] = `
|
|
4
4
|
<jest>
|
|
5
|
-
<
|
|
6
|
-
class="
|
|
5
|
+
<div
|
|
6
|
+
class="bcl-description-list"
|
|
7
7
|
>
|
|
8
|
-
<
|
|
9
|
-
class="d-
|
|
8
|
+
<dl
|
|
9
|
+
class="d-md-grid grid-3-9 mb-3"
|
|
10
10
|
>
|
|
11
|
-
<svg
|
|
12
|
-
class="me-2 mt-1 bi icon--xs"
|
|
13
|
-
>
|
|
14
|
-
<use
|
|
15
|
-
xlink:href="/icons.svg#geo-alt-fill"
|
|
16
|
-
/>
|
|
17
|
-
</svg>
|
|
18
|
-
<p
|
|
19
|
-
class="mb-0 d-inline-block"
|
|
20
|
-
>
|
|
21
|
-
Only title label with icon
|
|
22
|
-
</p>
|
|
23
|
-
</dt>
|
|
24
|
-
<dd>
|
|
25
|
-
Description text goes here.
|
|
26
|
-
</dd>
|
|
27
|
-
<div>
|
|
28
|
-
<dt>
|
|
29
|
-
First title label
|
|
30
|
-
</dt>
|
|
31
11
|
<dt
|
|
32
12
|
class="d-flex"
|
|
33
13
|
>
|
|
@@ -41,114 +21,298 @@ exports[`OE - Description List horizontal renders correctly 1`] = `
|
|
|
41
21
|
<p
|
|
42
22
|
class="mb-0 d-inline-block"
|
|
43
23
|
>
|
|
44
|
-
|
|
24
|
+
Only title label with icon
|
|
45
25
|
</p>
|
|
46
26
|
</dt>
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
</
|
|
51
|
-
<
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
27
|
+
<dd>
|
|
28
|
+
Description text goes here.
|
|
29
|
+
</dd>
|
|
30
|
+
</dl>
|
|
31
|
+
<dl
|
|
32
|
+
class="d-md-grid grid-3-9 mb-3"
|
|
33
|
+
>
|
|
34
|
+
<dt>
|
|
35
|
+
<div>
|
|
36
|
+
First title label
|
|
37
|
+
</div>
|
|
38
|
+
<div
|
|
39
|
+
class="d-flex"
|
|
40
|
+
>
|
|
41
|
+
<svg
|
|
42
|
+
class="me-2 mt-1 bi icon--xs"
|
|
43
|
+
>
|
|
44
|
+
<use
|
|
45
|
+
xlink:href="/icons.svg#geo-alt-fill"
|
|
46
|
+
/>
|
|
47
|
+
</svg>
|
|
48
|
+
<p
|
|
49
|
+
class="mb-0 d-inline-block"
|
|
50
|
+
>
|
|
51
|
+
Second title label
|
|
52
|
+
</p>
|
|
53
|
+
</div>
|
|
54
|
+
</dt>
|
|
55
|
+
<dd>
|
|
56
|
+
Description text goes here.
|
|
57
|
+
</dd>
|
|
58
|
+
</dl>
|
|
59
|
+
<dl
|
|
60
|
+
class="d-md-grid grid-3-9 mb-3"
|
|
61
|
+
>
|
|
62
|
+
<dt>
|
|
63
|
+
Only title label
|
|
64
|
+
</dt>
|
|
65
|
+
<dd>
|
|
66
|
+
<div>
|
|
67
|
+
Description text goes here.
|
|
68
|
+
</div>
|
|
69
|
+
<div>
|
|
70
|
+
Description text goes here.
|
|
71
|
+
</div>
|
|
72
|
+
</dd>
|
|
73
|
+
</dl>
|
|
74
|
+
</div>
|
|
63
75
|
</jest>
|
|
64
76
|
`;
|
|
65
77
|
|
|
66
78
|
exports[`OE - Description List renders correctly 1`] = `
|
|
67
79
|
<jest>
|
|
68
|
-
<
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
80
|
+
<div
|
|
81
|
+
class="bcl-description-list"
|
|
82
|
+
>
|
|
83
|
+
<dl
|
|
84
|
+
class="mb-3"
|
|
85
|
+
>
|
|
86
|
+
<dt>
|
|
87
|
+
<svg
|
|
88
|
+
class="me-2 bi icon--xs"
|
|
89
|
+
>
|
|
90
|
+
<use
|
|
91
|
+
xlink:href="/icons.svg#geo-alt-fill"
|
|
92
|
+
/>
|
|
93
|
+
</svg>
|
|
94
|
+
<p
|
|
95
|
+
class="mb-0 d-inline-block"
|
|
96
|
+
>
|
|
97
|
+
Only title label with icon
|
|
98
|
+
</p>
|
|
99
|
+
</dt>
|
|
100
|
+
<dd>
|
|
101
|
+
Description text goes here.
|
|
102
|
+
</dd>
|
|
103
|
+
</dl>
|
|
104
|
+
<dl
|
|
105
|
+
class="mb-3"
|
|
106
|
+
>
|
|
107
|
+
<dt>
|
|
108
|
+
<div>
|
|
109
|
+
First title label
|
|
110
|
+
</div>
|
|
111
|
+
<div>
|
|
112
|
+
<svg
|
|
113
|
+
class="me-2 bi icon--xs"
|
|
114
|
+
>
|
|
115
|
+
<use
|
|
116
|
+
xlink:href="/icons.svg#geo-alt-fill"
|
|
117
|
+
/>
|
|
118
|
+
</svg>
|
|
119
|
+
<p
|
|
120
|
+
class="mb-0 d-inline-block"
|
|
121
|
+
>
|
|
122
|
+
Second title label
|
|
123
|
+
</p>
|
|
124
|
+
</div>
|
|
125
|
+
</dt>
|
|
126
|
+
<dd>
|
|
127
|
+
Description text goes here.
|
|
128
|
+
</dd>
|
|
129
|
+
</dl>
|
|
130
|
+
<dl>
|
|
131
|
+
<dt>
|
|
132
|
+
Only title label
|
|
133
|
+
</dt>
|
|
134
|
+
<dd>
|
|
135
|
+
Description text goes here.
|
|
136
|
+
</dd>
|
|
137
|
+
<dd>
|
|
138
|
+
Description text goes here.
|
|
139
|
+
</dd>
|
|
140
|
+
</dl>
|
|
141
|
+
</div>
|
|
142
|
+
</jest>
|
|
143
|
+
`;
|
|
144
|
+
|
|
145
|
+
exports[`OE - Description List with title bordered renders correctly 1`] = `
|
|
146
|
+
<jest>
|
|
147
|
+
<h6
|
|
148
|
+
class="mb-4 bcl-heading"
|
|
149
|
+
>
|
|
150
|
+
Description list test title
|
|
151
|
+
</h6>
|
|
152
|
+
<div
|
|
153
|
+
class="bcl-description-list"
|
|
154
|
+
>
|
|
155
|
+
<dl
|
|
156
|
+
class="mb-2-5 pb-2-5 border-bottom"
|
|
157
|
+
>
|
|
158
|
+
<dt>
|
|
159
|
+
<svg
|
|
160
|
+
class="me-2 bi icon--xs"
|
|
161
|
+
>
|
|
162
|
+
<use
|
|
163
|
+
xlink:href="/icons.svg#geo-alt-fill"
|
|
164
|
+
/>
|
|
165
|
+
</svg>
|
|
166
|
+
<p
|
|
167
|
+
class="mb-0 d-inline-block"
|
|
168
|
+
>
|
|
169
|
+
Only title label with icon
|
|
170
|
+
</p>
|
|
171
|
+
</dt>
|
|
172
|
+
<dd>
|
|
173
|
+
Description text goes here.
|
|
174
|
+
</dd>
|
|
175
|
+
</dl>
|
|
176
|
+
<dl
|
|
177
|
+
class="mb-2-5 pb-2-5 border-bottom"
|
|
178
|
+
>
|
|
179
|
+
<dt>
|
|
180
|
+
<div>
|
|
181
|
+
First title label
|
|
182
|
+
</div>
|
|
183
|
+
<div>
|
|
184
|
+
<svg
|
|
185
|
+
class="me-2 bi icon--xs"
|
|
186
|
+
>
|
|
187
|
+
<use
|
|
188
|
+
xlink:href="/icons.svg#geo-alt-fill"
|
|
189
|
+
/>
|
|
190
|
+
</svg>
|
|
191
|
+
<p
|
|
192
|
+
class="mb-0 d-inline-block"
|
|
193
|
+
>
|
|
194
|
+
Second title label
|
|
195
|
+
</p>
|
|
196
|
+
</div>
|
|
197
|
+
</dt>
|
|
198
|
+
<dd>
|
|
199
|
+
Description text goes here.
|
|
200
|
+
</dd>
|
|
201
|
+
</dl>
|
|
202
|
+
<dl>
|
|
203
|
+
<dt>
|
|
204
|
+
Only title label
|
|
205
|
+
</dt>
|
|
206
|
+
<dd>
|
|
207
|
+
Description text goes here.
|
|
208
|
+
</dd>
|
|
209
|
+
<dd>
|
|
210
|
+
Description text goes here.
|
|
211
|
+
</dd>
|
|
212
|
+
</dl>
|
|
213
|
+
</div>
|
|
214
|
+
</jest>
|
|
215
|
+
`;
|
|
216
|
+
|
|
217
|
+
exports[`OE - Description List with title horizontal and bordered renders correctly 1`] = `
|
|
218
|
+
<jest>
|
|
219
|
+
<h6
|
|
220
|
+
class="mb-4 bcl-heading"
|
|
221
|
+
>
|
|
222
|
+
Description list test title
|
|
223
|
+
</h6>
|
|
224
|
+
<div
|
|
225
|
+
class="bcl-description-list"
|
|
226
|
+
>
|
|
227
|
+
<dl
|
|
228
|
+
class="d-md-grid grid-3-9 mb-2-5 pb-2-5 border-bottom"
|
|
229
|
+
>
|
|
230
|
+
<dt
|
|
231
|
+
class="d-flex"
|
|
72
232
|
>
|
|
73
|
-
<
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
233
|
+
<svg
|
|
234
|
+
class="me-2 mt-1 bi icon--xs"
|
|
235
|
+
>
|
|
236
|
+
<use
|
|
237
|
+
xlink:href="/icons.svg#geo-alt-fill"
|
|
238
|
+
/>
|
|
239
|
+
</svg>
|
|
240
|
+
<p
|
|
241
|
+
class="mb-0 d-inline-block"
|
|
242
|
+
>
|
|
243
|
+
Only title label with icon
|
|
244
|
+
</p>
|
|
245
|
+
</dt>
|
|
246
|
+
<dd
|
|
247
|
+
class="mb-0"
|
|
79
248
|
>
|
|
80
|
-
|
|
81
|
-
</
|
|
82
|
-
</
|
|
83
|
-
<
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
249
|
+
Description text goes here.
|
|
250
|
+
</dd>
|
|
251
|
+
</dl>
|
|
252
|
+
<dl
|
|
253
|
+
class="d-md-grid grid-3-9 mb-2-5 pb-2-5 border-bottom"
|
|
254
|
+
>
|
|
255
|
+
<dt>
|
|
256
|
+
<div>
|
|
257
|
+
First title label
|
|
258
|
+
</div>
|
|
259
|
+
<div
|
|
260
|
+
class="d-flex"
|
|
261
|
+
>
|
|
262
|
+
<svg
|
|
263
|
+
class="me-2 mt-1 bi icon--xs"
|
|
264
|
+
>
|
|
265
|
+
<use
|
|
266
|
+
xlink:href="/icons.svg#geo-alt-fill"
|
|
267
|
+
/>
|
|
268
|
+
</svg>
|
|
269
|
+
<p
|
|
270
|
+
class="mb-0 d-inline-block"
|
|
271
|
+
>
|
|
272
|
+
Second title label
|
|
273
|
+
</p>
|
|
274
|
+
</div>
|
|
275
|
+
</dt>
|
|
276
|
+
<dd
|
|
277
|
+
class="mb-0"
|
|
92
278
|
>
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
279
|
+
Description text goes here.
|
|
280
|
+
</dd>
|
|
281
|
+
</dl>
|
|
282
|
+
<dl
|
|
283
|
+
class="d-md-grid grid-3-9 mb-2-5 pb-2-5 border-bottom"
|
|
284
|
+
>
|
|
285
|
+
<dt>
|
|
286
|
+
Only title label
|
|
287
|
+
</dt>
|
|
288
|
+
<dd
|
|
289
|
+
class="mb-0"
|
|
99
290
|
>
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
<dd>
|
|
110
|
-
Description text goes here.
|
|
111
|
-
</dd>
|
|
112
|
-
<dd>
|
|
113
|
-
Description text goes here.
|
|
114
|
-
</dd>
|
|
115
|
-
</dl>
|
|
291
|
+
<div>
|
|
292
|
+
Description text goes here.
|
|
293
|
+
</div>
|
|
294
|
+
<div>
|
|
295
|
+
Description text goes here.
|
|
296
|
+
</div>
|
|
297
|
+
</dd>
|
|
298
|
+
</dl>
|
|
299
|
+
</div>
|
|
116
300
|
</jest>
|
|
117
301
|
`;
|
|
118
302
|
|
|
119
303
|
exports[`OE - Description List with title horizontal renders correctly 1`] = `
|
|
120
304
|
<jest>
|
|
121
305
|
<h6
|
|
122
|
-
class="
|
|
306
|
+
class="mb-4 bcl-heading"
|
|
123
307
|
>
|
|
124
308
|
Description list test title
|
|
125
309
|
</h6>
|
|
126
|
-
<
|
|
127
|
-
class="
|
|
310
|
+
<div
|
|
311
|
+
class="bcl-description-list"
|
|
128
312
|
>
|
|
129
|
-
<
|
|
130
|
-
class="d-
|
|
313
|
+
<dl
|
|
314
|
+
class="d-md-grid grid-3-9 mb-3"
|
|
131
315
|
>
|
|
132
|
-
<svg
|
|
133
|
-
class="me-2 mt-1 bi icon--xs"
|
|
134
|
-
>
|
|
135
|
-
<use
|
|
136
|
-
xlink:href="/icons.svg#geo-alt-fill"
|
|
137
|
-
/>
|
|
138
|
-
</svg>
|
|
139
|
-
<p
|
|
140
|
-
class="mb-0 d-inline-block"
|
|
141
|
-
>
|
|
142
|
-
Only title label with icon
|
|
143
|
-
</p>
|
|
144
|
-
</dt>
|
|
145
|
-
<dd>
|
|
146
|
-
Description text goes here.
|
|
147
|
-
</dd>
|
|
148
|
-
<div>
|
|
149
|
-
<dt>
|
|
150
|
-
First title label
|
|
151
|
-
</dt>
|
|
152
316
|
<dt
|
|
153
317
|
class="d-flex"
|
|
154
318
|
>
|
|
@@ -162,82 +326,128 @@ exports[`OE - Description List with title horizontal renders correctly 1`] = `
|
|
|
162
326
|
<p
|
|
163
327
|
class="mb-0 d-inline-block"
|
|
164
328
|
>
|
|
165
|
-
|
|
329
|
+
Only title label with icon
|
|
166
330
|
</p>
|
|
167
331
|
</dt>
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
</
|
|
172
|
-
<
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
332
|
+
<dd>
|
|
333
|
+
Description text goes here.
|
|
334
|
+
</dd>
|
|
335
|
+
</dl>
|
|
336
|
+
<dl
|
|
337
|
+
class="d-md-grid grid-3-9 mb-3"
|
|
338
|
+
>
|
|
339
|
+
<dt>
|
|
340
|
+
<div>
|
|
341
|
+
First title label
|
|
342
|
+
</div>
|
|
343
|
+
<div
|
|
344
|
+
class="d-flex"
|
|
345
|
+
>
|
|
346
|
+
<svg
|
|
347
|
+
class="me-2 mt-1 bi icon--xs"
|
|
348
|
+
>
|
|
349
|
+
<use
|
|
350
|
+
xlink:href="/icons.svg#geo-alt-fill"
|
|
351
|
+
/>
|
|
352
|
+
</svg>
|
|
353
|
+
<p
|
|
354
|
+
class="mb-0 d-inline-block"
|
|
355
|
+
>
|
|
356
|
+
Second title label
|
|
357
|
+
</p>
|
|
358
|
+
</div>
|
|
359
|
+
</dt>
|
|
360
|
+
<dd>
|
|
361
|
+
Description text goes here.
|
|
362
|
+
</dd>
|
|
363
|
+
</dl>
|
|
364
|
+
<dl
|
|
365
|
+
class="d-md-grid grid-3-9 mb-3"
|
|
366
|
+
>
|
|
367
|
+
<dt>
|
|
368
|
+
Only title label
|
|
369
|
+
</dt>
|
|
370
|
+
<dd>
|
|
371
|
+
<div>
|
|
372
|
+
Description text goes here.
|
|
373
|
+
</div>
|
|
374
|
+
<div>
|
|
375
|
+
Description text goes here.
|
|
376
|
+
</div>
|
|
377
|
+
</dd>
|
|
378
|
+
</dl>
|
|
379
|
+
</div>
|
|
184
380
|
</jest>
|
|
185
381
|
`;
|
|
186
382
|
|
|
187
383
|
exports[`OE - Description List with title renders correctly 1`] = `
|
|
188
384
|
<jest>
|
|
189
385
|
<h6
|
|
190
|
-
class="
|
|
386
|
+
class="mb-4 bcl-heading"
|
|
191
387
|
>
|
|
192
388
|
Description list test title
|
|
193
389
|
</h6>
|
|
194
|
-
<
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
390
|
+
<div
|
|
391
|
+
class="bcl-description-list"
|
|
392
|
+
>
|
|
393
|
+
<dl
|
|
394
|
+
class="mb-3"
|
|
395
|
+
>
|
|
396
|
+
<dt>
|
|
397
|
+
<svg
|
|
398
|
+
class="me-2 bi icon--xs"
|
|
399
|
+
>
|
|
400
|
+
<use
|
|
401
|
+
xlink:href="/icons.svg#geo-alt-fill"
|
|
402
|
+
/>
|
|
403
|
+
</svg>
|
|
404
|
+
<p
|
|
405
|
+
class="mb-0 d-inline-block"
|
|
406
|
+
>
|
|
407
|
+
Only title label with icon
|
|
408
|
+
</p>
|
|
409
|
+
</dt>
|
|
410
|
+
<dd>
|
|
411
|
+
Description text goes here.
|
|
412
|
+
</dd>
|
|
413
|
+
</dl>
|
|
414
|
+
<dl
|
|
415
|
+
class="mb-3"
|
|
416
|
+
>
|
|
417
|
+
<dt>
|
|
418
|
+
<div>
|
|
419
|
+
First title label
|
|
420
|
+
</div>
|
|
421
|
+
<div>
|
|
422
|
+
<svg
|
|
423
|
+
class="me-2 bi icon--xs"
|
|
424
|
+
>
|
|
425
|
+
<use
|
|
426
|
+
xlink:href="/icons.svg#geo-alt-fill"
|
|
427
|
+
/>
|
|
428
|
+
</svg>
|
|
429
|
+
<p
|
|
430
|
+
class="mb-0 d-inline-block"
|
|
431
|
+
>
|
|
432
|
+
Second title label
|
|
433
|
+
</p>
|
|
434
|
+
</div>
|
|
435
|
+
</dt>
|
|
436
|
+
<dd>
|
|
437
|
+
Description text goes here.
|
|
438
|
+
</dd>
|
|
439
|
+
</dl>
|
|
440
|
+
<dl>
|
|
441
|
+
<dt>
|
|
442
|
+
Only title label
|
|
443
|
+
</dt>
|
|
444
|
+
<dd>
|
|
445
|
+
Description text goes here.
|
|
446
|
+
</dd>
|
|
447
|
+
<dd>
|
|
448
|
+
Description text goes here.
|
|
449
|
+
</dd>
|
|
450
|
+
</dl>
|
|
451
|
+
</div>
|
|
242
452
|
</jest>
|
|
243
453
|
`;
|
package/data/data--horizontal.js
CHANGED
|
@@ -2,142 +2,184 @@
|
|
|
2
2
|
|
|
3
3
|
{#
|
|
4
4
|
Parameters:
|
|
5
|
-
- title: (string) (default:
|
|
6
|
-
- title_tag: (string) (default:
|
|
5
|
+
- title: (string) (default: '')
|
|
6
|
+
- title_tag: (string) (default: 'h2')
|
|
7
|
+
- title_link: (link object) (default: {})
|
|
7
8
|
- title_attributes (drupal attrs)
|
|
8
|
-
-
|
|
9
|
+
- bordered (boolean) (default: '')
|
|
10
|
+
- items (array) (default: []): format: [
|
|
9
11
|
{
|
|
10
|
-
|
|
12
|
+
term (object or array of object) -format: {
|
|
11
13
|
icon: {} - icon object,
|
|
12
|
-
label:
|
|
14
|
+
label: ''
|
|
13
15
|
}
|
|
14
|
-
|
|
16
|
+
definition (block or array of string)
|
|
15
17
|
},
|
|
16
18
|
...
|
|
17
19
|
]
|
|
18
|
-
-
|
|
19
|
-
- option: [
|
|
20
|
+
- variant (string) (default: '')
|
|
21
|
+
- option: ['horizontal']
|
|
20
22
|
#}
|
|
21
23
|
|
|
22
|
-
{# Parameters #}
|
|
23
|
-
|
|
24
24
|
{% set _title = title|default('') %}
|
|
25
25
|
{% set _title_tag = title_tag|default('h2') %}
|
|
26
|
+
{% set _title_link = title_link|default({}) %}
|
|
27
|
+
{% set _bordered = bordered|default(false) %}
|
|
28
|
+
{% set _title_link = title_link|default({}) %}
|
|
26
29
|
{% set _title_attributes = title_attributes ?: create_attribute() %}
|
|
27
30
|
{% set _items = items|default([]) %}
|
|
28
31
|
{% set _variant = variant|default('') %}
|
|
29
32
|
|
|
33
|
+
{% set _classes = ['bcl-description-list'] %}
|
|
34
|
+
|
|
30
35
|
{% if attributes is empty %}
|
|
31
36
|
{% set attributes = create_attribute() %}
|
|
32
37
|
{% endif %}
|
|
33
38
|
|
|
39
|
+
{% set _item_classes = '' %}
|
|
40
|
+
|
|
34
41
|
{% if _variant == 'horizontal' %}
|
|
35
|
-
{% set
|
|
42
|
+
{% set _item_classes = 'd-md-grid grid-3-9' %}
|
|
43
|
+
{% if _bordered %}
|
|
44
|
+
{% set _item_classes = _item_classes ~ ' mb-2-5 pb-2-5' %}
|
|
45
|
+
{% else %}
|
|
46
|
+
{% set _item_classes = _item_classes ~ ' mb-3' %}
|
|
47
|
+
{% endif %}
|
|
48
|
+
{% else %}
|
|
49
|
+
{% set _item_classes = 'mb-3' %}
|
|
50
|
+
{% if _bordered %}
|
|
51
|
+
{% set _item_classes = 'mb-2-5' %}
|
|
52
|
+
{% set _item_classes = _item_classes ~ ' pb-2-5' %}
|
|
53
|
+
{% endif %}
|
|
54
|
+
{% endif %}
|
|
55
|
+
|
|
56
|
+
{% if _bordered %}
|
|
57
|
+
{% set _item_classes = _item_classes ~ ' border-bottom' %}
|
|
36
58
|
{% endif %}
|
|
37
59
|
|
|
38
60
|
{% if _title is not empty %}
|
|
39
61
|
{% include '@oe-bcl/bcl-heading/heading.html.twig' with {
|
|
40
62
|
title: _title,
|
|
41
63
|
title_tag: _title_tag,
|
|
64
|
+
title_link: _title_link,
|
|
42
65
|
attributes: _title_attributes,
|
|
43
66
|
} only %}
|
|
44
67
|
{% endif %}
|
|
45
68
|
|
|
46
|
-
|
|
69
|
+
{% set attributes = attributes.addClass(_classes) %}
|
|
70
|
+
|
|
71
|
+
<div
|
|
47
72
|
{{ attributes }}
|
|
48
73
|
>
|
|
49
74
|
{% for _item in _items %}
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
<div class="d-flex align-items-center">
|
|
72
|
-
<span class="p-2 me-2 d-inline-block rounded-1 {{ _term.color }}"></span>{{- _term.label -}}
|
|
73
|
-
</div>
|
|
74
|
-
{%- else -%}
|
|
75
|
-
{{- _term.label -}}
|
|
76
|
-
{%- endif -%}
|
|
77
|
-
</dt>
|
|
78
|
-
{% endfor %}
|
|
75
|
+
{% if loop.last and _variant != 'horizontal' %}
|
|
76
|
+
{% set _item_classes = '' %}
|
|
77
|
+
{% endif %}
|
|
78
|
+
{% if _item.term is not empty %}
|
|
79
|
+
<dl
|
|
80
|
+
{% if _item_classes is not empty %}
|
|
81
|
+
class="{{ _item_classes }}"
|
|
82
|
+
{% endif %}
|
|
83
|
+
>
|
|
84
|
+
{% if _item.term is iterable %}
|
|
85
|
+
<dt>
|
|
86
|
+
{% for _term in _item.term %}
|
|
87
|
+
{%- if _item.term|length > 1 -%}
|
|
88
|
+
<div
|
|
89
|
+
{% if _variant == 'horizontal' and _term.icon is not empty %}
|
|
90
|
+
class="d-flex"
|
|
91
|
+
{% endif %}
|
|
92
|
+
>
|
|
93
|
+
{%- endif -%}
|
|
94
|
+
{%- if _term.icon is not empty -%}
|
|
95
|
+
{% set _icon_classes = ["me-2"] %}
|
|
79
96
|
{% if _variant == 'horizontal' %}
|
|
80
|
-
|
|
97
|
+
{% set _icon_classes = _icon_classes|merge(["mt-1"]) %}
|
|
81
98
|
{% endif %}
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
>
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
{{- _item.term.label -}}
|
|
103
|
-
{%- endif -%}
|
|
104
|
-
</dt>
|
|
99
|
+
{% include '@oe-bcl/bcl-icon/icon.html.twig' with _term.icon|merge({
|
|
100
|
+
attributes: create_attribute().addClass(_icon_classes)
|
|
101
|
+
}) only %}
|
|
102
|
+
<p class="mb-0 d-inline-block">{{ _term.label }}</p>
|
|
103
|
+
{%- elseif _term.color is not empty -%}
|
|
104
|
+
<div class="d-flex align-items-center">
|
|
105
|
+
<span class="p-2 me-2 d-inline-block rounded-1 {{ _term.color }}"></span>{{- _term.label -}}
|
|
106
|
+
</div>
|
|
107
|
+
{%- else -%}
|
|
108
|
+
{{- _term.label -}}
|
|
109
|
+
{%- endif -%}
|
|
110
|
+
{% if _item.term|length > 1 %}
|
|
111
|
+
</div>
|
|
112
|
+
{% endif %}
|
|
113
|
+
{% endfor %}
|
|
114
|
+
</dt>
|
|
115
|
+
{% else %}
|
|
116
|
+
<dt
|
|
117
|
+
{% if _variant == 'horizontal' and _item.term.icon is not empty %}
|
|
118
|
+
class="d-flex"
|
|
105
119
|
{% endif %}
|
|
120
|
+
>
|
|
121
|
+
{%- if _item.term.icon is not empty -%}
|
|
122
|
+
{% set _icon_classes = ["me-2"] %}
|
|
123
|
+
{% if _variant == 'horizontal' %}
|
|
124
|
+
{% set _icon_classes = _icon_classes|merge(["mt-1"]) %}
|
|
125
|
+
{% endif %}
|
|
126
|
+
{%- include '@oe-bcl/bcl-icon/icon.html.twig' with _item.term.icon|merge({
|
|
127
|
+
attributes: create_attribute().addClass(_icon_classes)
|
|
128
|
+
}) only -%}
|
|
129
|
+
<p class="mb-0 d-inline-block">{{ _item.term.label }}</p>
|
|
130
|
+
{%- elseif _item.term.color is not empty -%}
|
|
131
|
+
<div class="d-flex align-items-center">
|
|
132
|
+
<span class="p-2 me-2 d-inline-block rounded-1 {{ _item.term.color }}"></span>{{- _item.term.label -}}
|
|
133
|
+
</div>
|
|
134
|
+
{%- else -%}
|
|
135
|
+
{{- _item.term.label -}}
|
|
136
|
+
{%- endif -%}
|
|
137
|
+
</dt>
|
|
106
138
|
{% endif %}
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
139
|
+
{% endif %}
|
|
140
|
+
{% if _item.definition is not empty %}
|
|
141
|
+
{% if _item.definition is iterable %}
|
|
142
|
+
{% if _variant == 'horizontal' %}
|
|
143
|
+
<dd
|
|
144
|
+
{% if _bordered %}
|
|
145
|
+
class="mb-0"
|
|
111
146
|
{% endif %}
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
147
|
+
>
|
|
148
|
+
{% endif %}
|
|
149
|
+
{% for _definition in _item.definition %}
|
|
150
|
+
{% if _variant == 'horizontal' %}<div>{% else %}<dd>{% endif %}
|
|
151
|
+
{%- if _definition.button is defined -%}
|
|
152
|
+
{% include '@oe-bcl/bcl-button/button.html.twig' with _definition.button only %}
|
|
153
|
+
{%- elseif _definition.link is defined %}
|
|
154
|
+
{% include '@oe-bcl/bcl-link/link.html.twig' with _definition.link only -%}
|
|
155
|
+
{%- else -%}
|
|
156
|
+
{%- if _definition.icon is defined -%}
|
|
157
|
+
{%- set _icon_classes = ["me-2"] -%}
|
|
158
|
+
{%- include '@oe-bcl/bcl-icon/icon.html.twig' with _definition.icon|merge({
|
|
159
|
+
attributes: create_attribute().addClass(_icon_classes)
|
|
160
|
+
}) only -%}
|
|
161
|
+
<p class="mb-0 d-inline-block">{{ _definition.label }}</p>
|
|
118
162
|
{%- else -%}
|
|
119
|
-
{
|
|
120
|
-
{%- set _icon_classes = ["me-2"] -%}
|
|
121
|
-
{%- include '@oe-bcl/bcl-icon/icon.html.twig' with _definition.icon|merge({
|
|
122
|
-
attributes: create_attribute().addClass(_icon_classes)
|
|
123
|
-
}) only -%}
|
|
124
|
-
<p class="mb-0 d-inline-block">{{ _definition.label }}</p>
|
|
125
|
-
{%- else -%}
|
|
126
|
-
{{- _definition.label -}}
|
|
127
|
-
{%- endif -%}
|
|
163
|
+
{{- _definition.label -}}
|
|
128
164
|
{%- endif -%}
|
|
129
|
-
{
|
|
130
|
-
{%
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
{%
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
165
|
+
{%- endif -%}
|
|
166
|
+
{% if _variant == 'horizontal' %}</div>{% else %}</dd>{% endif %}
|
|
167
|
+
{% endfor %}
|
|
168
|
+
{% if _variant == 'horizontal' %}
|
|
169
|
+
</dd>
|
|
170
|
+
{% endif %}
|
|
171
|
+
{% else %}
|
|
172
|
+
<dd
|
|
173
|
+
{% if _bordered %}
|
|
174
|
+
class="mb-0"
|
|
138
175
|
{% endif %}
|
|
176
|
+
>
|
|
177
|
+
{%- block definition _item.definition -%}
|
|
178
|
+
</dd>
|
|
139
179
|
{% endif %}
|
|
180
|
+
</dl>
|
|
181
|
+
{% endif %}
|
|
140
182
|
{% endfor %}
|
|
141
|
-
</
|
|
183
|
+
</div>
|
|
142
184
|
|
|
143
185
|
{% endspaceless %}
|
|
@@ -4,15 +4,33 @@ import { withDesign } from "storybook-addon-designs";
|
|
|
4
4
|
import demoData from "@openeuropa/bcl-description-list/data/data.js";
|
|
5
5
|
import demoDataHorizontal from "@openeuropa/bcl-description-list/data/data--horizontal";
|
|
6
6
|
import descriptionList from "@openeuropa/bcl-description-list/description-list.html.twig";
|
|
7
|
-
import { correctPaths } from "@openeuropa/bcl-story-utils";
|
|
7
|
+
import { correctPaths, getTitleControls } from "@openeuropa/bcl-story-utils";
|
|
8
|
+
|
|
9
|
+
const getArgs = () => ({
|
|
10
|
+
title: "",
|
|
11
|
+
title_tag: "h2",
|
|
12
|
+
bordered: false,
|
|
13
|
+
});
|
|
14
|
+
|
|
15
|
+
const getArgTypes = () => ({
|
|
16
|
+
...getTitleControls(),
|
|
17
|
+
bordered: {
|
|
18
|
+
type: { name: "boolean" },
|
|
19
|
+
description: "Border between description items",
|
|
20
|
+
table: {
|
|
21
|
+
type: { summary: "boolean" },
|
|
22
|
+
defaultValue: { summary: "false" },
|
|
23
|
+
category: "Style",
|
|
24
|
+
},
|
|
25
|
+
},
|
|
26
|
+
});
|
|
27
|
+
|
|
28
|
+
const applyArgs = (data, args) => Object.assign(data, args);
|
|
8
29
|
|
|
9
30
|
export default {
|
|
10
31
|
title: "Paragraphs/Description List",
|
|
11
32
|
decorators: [withCode, withDesign],
|
|
12
33
|
parameters: {
|
|
13
|
-
controls: {
|
|
14
|
-
disable: true,
|
|
15
|
-
},
|
|
16
34
|
design: [
|
|
17
35
|
{
|
|
18
36
|
name: "Mockup",
|
|
@@ -23,9 +41,14 @@ export default {
|
|
|
23
41
|
},
|
|
24
42
|
};
|
|
25
43
|
|
|
26
|
-
export const Default = () =>
|
|
44
|
+
export const Default = (args) =>
|
|
45
|
+
descriptionList(applyArgs(correctPaths(demoData), args));
|
|
46
|
+
Default.args = getArgs(demoData);
|
|
47
|
+
Default.argTypes = getArgTypes(demoData);
|
|
27
48
|
|
|
28
|
-
export const Horizontal = () =>
|
|
29
|
-
descriptionList(correctPaths(demoDataHorizontal));
|
|
49
|
+
export const Horizontal = (args) =>
|
|
50
|
+
descriptionList(applyArgs(correctPaths(demoDataHorizontal), args));
|
|
30
51
|
|
|
31
52
|
Horizontal.storyName = "Horizontal Description List";
|
|
53
|
+
Horizontal.args = getArgs(demoDataHorizontal);
|
|
54
|
+
Horizontal.argTypes = getArgTypes(demoDataHorizontal);
|
package/description-list.test.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { renderTwigFileAsNode } from "@openeuropa/bcl-test-utils";
|
|
2
2
|
import demoData from "@openeuropa/bcl-description-list/data/data";
|
|
3
3
|
import demoDataHorizontal from "@openeuropa/bcl-description-list/data/data--horizontal";
|
|
4
|
+
|
|
4
5
|
const template = "@oe-bcl/bcl-description-list/description-list.html.twig";
|
|
5
6
|
|
|
6
7
|
const render = (params) => renderTwigFileAsNode(template, params);
|
|
@@ -29,6 +30,18 @@ describe("OE - Description List with title", () => {
|
|
|
29
30
|
).resolves.toMatchSnapshot();
|
|
30
31
|
});
|
|
31
32
|
|
|
33
|
+
test(`bordered renders correctly`, () => {
|
|
34
|
+
expect.assertions(1);
|
|
35
|
+
return expect(
|
|
36
|
+
render({
|
|
37
|
+
...demoData,
|
|
38
|
+
title: "Description list test title",
|
|
39
|
+
title_tag: "h6",
|
|
40
|
+
bordered: true,
|
|
41
|
+
})
|
|
42
|
+
).resolves.toMatchSnapshot();
|
|
43
|
+
});
|
|
44
|
+
|
|
32
45
|
test(`horizontal renders correctly`, () => {
|
|
33
46
|
expect.assertions(1);
|
|
34
47
|
return expect(
|
|
@@ -39,4 +52,16 @@ describe("OE - Description List with title", () => {
|
|
|
39
52
|
})
|
|
40
53
|
).resolves.toMatchSnapshot();
|
|
41
54
|
});
|
|
55
|
+
|
|
56
|
+
test(`horizontal and bordered renders correctly`, () => {
|
|
57
|
+
expect.assertions(1);
|
|
58
|
+
return expect(
|
|
59
|
+
render({
|
|
60
|
+
...demoDataHorizontal,
|
|
61
|
+
bordered: true,
|
|
62
|
+
title: "Description list test title",
|
|
63
|
+
title_tag: "h6",
|
|
64
|
+
})
|
|
65
|
+
).resolves.toMatchSnapshot();
|
|
66
|
+
});
|
|
42
67
|
});
|
package/package.json
CHANGED
|
@@ -2,14 +2,14 @@
|
|
|
2
2
|
"name": "@openeuropa/bcl-description-list",
|
|
3
3
|
"author": "European Commission",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
|
-
"version": "0.
|
|
5
|
+
"version": "0.25.0",
|
|
6
6
|
"description": "OE - BCL description-list",
|
|
7
7
|
"publishConfig": {
|
|
8
8
|
"access": "public"
|
|
9
9
|
},
|
|
10
10
|
"dependencies": {
|
|
11
|
-
"@openeuropa/bcl-heading": "^0.
|
|
12
|
-
"@openeuropa/bcl-icon": "^0.
|
|
11
|
+
"@openeuropa/bcl-heading": "^0.25.0",
|
|
12
|
+
"@openeuropa/bcl-icon": "^0.25.0"
|
|
13
13
|
},
|
|
14
14
|
"repository": {
|
|
15
15
|
"type": "git",
|
|
@@ -25,5 +25,5 @@
|
|
|
25
25
|
"design-system",
|
|
26
26
|
"twig"
|
|
27
27
|
],
|
|
28
|
-
"gitHead": "
|
|
28
|
+
"gitHead": "f50c7dfeab8695bbb5c18d5f7d5304509512268a"
|
|
29
29
|
}
|