@openeuropa/bcl-description-list 0.1.202408021145
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/LICENSE.md +21 -0
- package/__snapshots__/description-list.test.js.snap +1070 -0
- package/data/data--horizontal.js +52 -0
- package/data/data.js +51 -0
- package/description-list-details.html.twig +44 -0
- package/description-list-title.html.twig +33 -0
- package/description-list.html.twig +121 -0
- package/description-list.story.js +70 -0
- package/description-list.test.js +165 -0
- package/package.json +29 -0
|
@@ -0,0 +1,1070 @@
|
|
|
1
|
+
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
|
+
|
|
3
|
+
exports[`OE - Description List horizontal renders correctly 1`] = `
|
|
4
|
+
<jest>
|
|
5
|
+
<div
|
|
6
|
+
class="bcl-description-list"
|
|
7
|
+
>
|
|
8
|
+
<dl
|
|
9
|
+
class="mb-3 row"
|
|
10
|
+
>
|
|
11
|
+
<div
|
|
12
|
+
class="col-md-3"
|
|
13
|
+
>
|
|
14
|
+
<dt>
|
|
15
|
+
<div
|
|
16
|
+
class="d-flex"
|
|
17
|
+
>
|
|
18
|
+
<svg
|
|
19
|
+
class="me-2 align-self-center flex-shrink-0 bi icon--xs"
|
|
20
|
+
>
|
|
21
|
+
<use
|
|
22
|
+
xlink:href="/icons.svg#geo-alt-fill"
|
|
23
|
+
/>
|
|
24
|
+
</svg>
|
|
25
|
+
<div>
|
|
26
|
+
<p
|
|
27
|
+
class="mb-0"
|
|
28
|
+
>
|
|
29
|
+
Only title label with
|
|
30
|
+
<em>
|
|
31
|
+
icon
|
|
32
|
+
</em>
|
|
33
|
+
</p>
|
|
34
|
+
</div>
|
|
35
|
+
</div>
|
|
36
|
+
</dt>
|
|
37
|
+
</div>
|
|
38
|
+
<div
|
|
39
|
+
class="col"
|
|
40
|
+
>
|
|
41
|
+
<dd>
|
|
42
|
+
<div>
|
|
43
|
+
Long Description text goes here.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dignissim, quam at sollicitudin volutpat, ipsum arcu maximus massa, quis egestas diam tellus vitae nulla.
|
|
44
|
+
</div>
|
|
45
|
+
</dd>
|
|
46
|
+
</div>
|
|
47
|
+
</dl>
|
|
48
|
+
<dl
|
|
49
|
+
class="mb-3 row"
|
|
50
|
+
>
|
|
51
|
+
<div
|
|
52
|
+
class="col-md-3"
|
|
53
|
+
>
|
|
54
|
+
<dt>
|
|
55
|
+
<div
|
|
56
|
+
class="d-flex"
|
|
57
|
+
>
|
|
58
|
+
<div
|
|
59
|
+
class="align-self-center"
|
|
60
|
+
>
|
|
61
|
+
<span
|
|
62
|
+
class="p-2 me-2 d-inline-block rounded-1 bg-success"
|
|
63
|
+
/>
|
|
64
|
+
</div>
|
|
65
|
+
<div>
|
|
66
|
+
First title label
|
|
67
|
+
</div>
|
|
68
|
+
</div>
|
|
69
|
+
</dt>
|
|
70
|
+
<dt>
|
|
71
|
+
<div
|
|
72
|
+
class="d-flex"
|
|
73
|
+
>
|
|
74
|
+
<svg
|
|
75
|
+
class="me-2 align-self-center flex-shrink-0 bi icon--xs"
|
|
76
|
+
>
|
|
77
|
+
<use
|
|
78
|
+
xlink:href="/icons.svg#geo-alt-fill"
|
|
79
|
+
/>
|
|
80
|
+
</svg>
|
|
81
|
+
<div>
|
|
82
|
+
Second title label
|
|
83
|
+
</div>
|
|
84
|
+
</div>
|
|
85
|
+
</dt>
|
|
86
|
+
</div>
|
|
87
|
+
<div
|
|
88
|
+
class="col"
|
|
89
|
+
>
|
|
90
|
+
<dd>
|
|
91
|
+
<div>
|
|
92
|
+
Description text goes here.
|
|
93
|
+
</div>
|
|
94
|
+
</dd>
|
|
95
|
+
</div>
|
|
96
|
+
</dl>
|
|
97
|
+
<dl
|
|
98
|
+
class="mb-3 row"
|
|
99
|
+
>
|
|
100
|
+
<div
|
|
101
|
+
class="col-md-3"
|
|
102
|
+
>
|
|
103
|
+
<dt>
|
|
104
|
+
<div
|
|
105
|
+
class="d-flex"
|
|
106
|
+
>
|
|
107
|
+
<div>
|
|
108
|
+
Only title
|
|
109
|
+
<strong>
|
|
110
|
+
label
|
|
111
|
+
</strong>
|
|
112
|
+
</div>
|
|
113
|
+
</div>
|
|
114
|
+
</dt>
|
|
115
|
+
</div>
|
|
116
|
+
<div
|
|
117
|
+
class="col"
|
|
118
|
+
>
|
|
119
|
+
<dd>
|
|
120
|
+
<div>
|
|
121
|
+
Description text goes here.
|
|
122
|
+
</div>
|
|
123
|
+
</dd>
|
|
124
|
+
<dd>
|
|
125
|
+
<svg
|
|
126
|
+
class="me-2 align-self-center flex-shrink-0 bi icon--xs"
|
|
127
|
+
>
|
|
128
|
+
<use
|
|
129
|
+
xlink:href="/icons.svg#geo-alt-fill"
|
|
130
|
+
/>
|
|
131
|
+
</svg>
|
|
132
|
+
<div
|
|
133
|
+
class="mb-0 d-inline-block"
|
|
134
|
+
>
|
|
135
|
+
Description text goes here.
|
|
136
|
+
</div>
|
|
137
|
+
</dd>
|
|
138
|
+
</div>
|
|
139
|
+
</dl>
|
|
140
|
+
</div>
|
|
141
|
+
</jest>
|
|
142
|
+
`;
|
|
143
|
+
|
|
144
|
+
exports[`OE - Description List renders correctly 1`] = `
|
|
145
|
+
<jest>
|
|
146
|
+
<dl
|
|
147
|
+
class="bcl-description-list"
|
|
148
|
+
>
|
|
149
|
+
<div
|
|
150
|
+
class="mb-3"
|
|
151
|
+
>
|
|
152
|
+
<dt>
|
|
153
|
+
<div
|
|
154
|
+
class="d-flex"
|
|
155
|
+
>
|
|
156
|
+
<svg
|
|
157
|
+
class="me-2 align-self-center flex-shrink-0 bi icon--xs"
|
|
158
|
+
>
|
|
159
|
+
<use
|
|
160
|
+
xlink:href="/icons.svg#geo-alt-fill"
|
|
161
|
+
/>
|
|
162
|
+
</svg>
|
|
163
|
+
<div>
|
|
164
|
+
<p
|
|
165
|
+
class="mb-0"
|
|
166
|
+
>
|
|
167
|
+
Only title label with
|
|
168
|
+
<em>
|
|
169
|
+
icon
|
|
170
|
+
</em>
|
|
171
|
+
</p>
|
|
172
|
+
</div>
|
|
173
|
+
</div>
|
|
174
|
+
</dt>
|
|
175
|
+
<dd>
|
|
176
|
+
<div>
|
|
177
|
+
Long Description text goes here.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dignissim, quam at sollicitudin volutpat, ipsum arcu maximus massa, quis egestas diam tellus vitae nulla.
|
|
178
|
+
</div>
|
|
179
|
+
</dd>
|
|
180
|
+
</div>
|
|
181
|
+
<div
|
|
182
|
+
class="mb-3"
|
|
183
|
+
>
|
|
184
|
+
<dt>
|
|
185
|
+
<div
|
|
186
|
+
class="d-flex"
|
|
187
|
+
>
|
|
188
|
+
<div
|
|
189
|
+
class="align-self-center"
|
|
190
|
+
>
|
|
191
|
+
<span
|
|
192
|
+
class="p-2 me-2 d-inline-block rounded-1 bg-success"
|
|
193
|
+
/>
|
|
194
|
+
</div>
|
|
195
|
+
<div>
|
|
196
|
+
First title label
|
|
197
|
+
</div>
|
|
198
|
+
</div>
|
|
199
|
+
</dt>
|
|
200
|
+
<dt>
|
|
201
|
+
<div
|
|
202
|
+
class="d-flex"
|
|
203
|
+
>
|
|
204
|
+
<svg
|
|
205
|
+
class="me-2 align-self-center flex-shrink-0 bi icon--xs"
|
|
206
|
+
>
|
|
207
|
+
<use
|
|
208
|
+
xlink:href="/icons.svg#geo-alt-fill"
|
|
209
|
+
/>
|
|
210
|
+
</svg>
|
|
211
|
+
<div>
|
|
212
|
+
Second title label
|
|
213
|
+
</div>
|
|
214
|
+
</div>
|
|
215
|
+
</dt>
|
|
216
|
+
<dd>
|
|
217
|
+
<div>
|
|
218
|
+
Description text goes here.
|
|
219
|
+
</div>
|
|
220
|
+
</dd>
|
|
221
|
+
</div>
|
|
222
|
+
<div
|
|
223
|
+
class="mb-3"
|
|
224
|
+
>
|
|
225
|
+
<dt>
|
|
226
|
+
<div
|
|
227
|
+
class="d-flex"
|
|
228
|
+
>
|
|
229
|
+
<div>
|
|
230
|
+
Only title
|
|
231
|
+
<strong>
|
|
232
|
+
label
|
|
233
|
+
</strong>
|
|
234
|
+
</div>
|
|
235
|
+
</div>
|
|
236
|
+
</dt>
|
|
237
|
+
<dd>
|
|
238
|
+
<div>
|
|
239
|
+
Description text goes here.
|
|
240
|
+
</div>
|
|
241
|
+
</dd>
|
|
242
|
+
<dd>
|
|
243
|
+
<svg
|
|
244
|
+
class="me-2 align-self-center flex-shrink-0 bi icon--xs"
|
|
245
|
+
>
|
|
246
|
+
<use
|
|
247
|
+
xlink:href="/icons.svg#geo-alt-fill"
|
|
248
|
+
/>
|
|
249
|
+
</svg>
|
|
250
|
+
<div
|
|
251
|
+
class="mb-0 d-inline-block"
|
|
252
|
+
>
|
|
253
|
+
Description text goes here.
|
|
254
|
+
</div>
|
|
255
|
+
</dd>
|
|
256
|
+
</div>
|
|
257
|
+
</dl>
|
|
258
|
+
</jest>
|
|
259
|
+
`;
|
|
260
|
+
|
|
261
|
+
exports[`OE - Description List with title bordered renders correctly 1`] = `
|
|
262
|
+
<jest>
|
|
263
|
+
<h6
|
|
264
|
+
class="mb-4 bcl-heading"
|
|
265
|
+
>
|
|
266
|
+
Description list test title
|
|
267
|
+
</h6>
|
|
268
|
+
<dl
|
|
269
|
+
class="bcl-description-list"
|
|
270
|
+
>
|
|
271
|
+
<div
|
|
272
|
+
class="border-bottom pb-2-5 mb-2-5"
|
|
273
|
+
>
|
|
274
|
+
<dt>
|
|
275
|
+
<div
|
|
276
|
+
class="d-flex"
|
|
277
|
+
>
|
|
278
|
+
<svg
|
|
279
|
+
class="me-2 align-self-center flex-shrink-0 bi icon--xs"
|
|
280
|
+
>
|
|
281
|
+
<use
|
|
282
|
+
xlink:href="/icons.svg#geo-alt-fill"
|
|
283
|
+
/>
|
|
284
|
+
</svg>
|
|
285
|
+
<div>
|
|
286
|
+
<p
|
|
287
|
+
class="mb-0"
|
|
288
|
+
>
|
|
289
|
+
Only title label with
|
|
290
|
+
<em>
|
|
291
|
+
icon
|
|
292
|
+
</em>
|
|
293
|
+
</p>
|
|
294
|
+
</div>
|
|
295
|
+
</div>
|
|
296
|
+
</dt>
|
|
297
|
+
<dd>
|
|
298
|
+
<div>
|
|
299
|
+
Long Description text goes here.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dignissim, quam at sollicitudin volutpat, ipsum arcu maximus massa, quis egestas diam tellus vitae nulla.
|
|
300
|
+
</div>
|
|
301
|
+
</dd>
|
|
302
|
+
</div>
|
|
303
|
+
<div
|
|
304
|
+
class="border-bottom pb-2-5 mb-2-5"
|
|
305
|
+
>
|
|
306
|
+
<dt>
|
|
307
|
+
<div
|
|
308
|
+
class="d-flex"
|
|
309
|
+
>
|
|
310
|
+
<div
|
|
311
|
+
class="align-self-center"
|
|
312
|
+
>
|
|
313
|
+
<span
|
|
314
|
+
class="p-2 me-2 d-inline-block rounded-1 bg-success"
|
|
315
|
+
/>
|
|
316
|
+
</div>
|
|
317
|
+
<div>
|
|
318
|
+
First title label
|
|
319
|
+
</div>
|
|
320
|
+
</div>
|
|
321
|
+
</dt>
|
|
322
|
+
<dt>
|
|
323
|
+
<div
|
|
324
|
+
class="d-flex"
|
|
325
|
+
>
|
|
326
|
+
<svg
|
|
327
|
+
class="me-2 align-self-center flex-shrink-0 bi icon--xs"
|
|
328
|
+
>
|
|
329
|
+
<use
|
|
330
|
+
xlink:href="/icons.svg#geo-alt-fill"
|
|
331
|
+
/>
|
|
332
|
+
</svg>
|
|
333
|
+
<div>
|
|
334
|
+
Second title label
|
|
335
|
+
</div>
|
|
336
|
+
</div>
|
|
337
|
+
</dt>
|
|
338
|
+
<dd>
|
|
339
|
+
<div>
|
|
340
|
+
Description text goes here.
|
|
341
|
+
</div>
|
|
342
|
+
</dd>
|
|
343
|
+
</div>
|
|
344
|
+
<div
|
|
345
|
+
class="border-bottom pb-2-5 mb-2-5"
|
|
346
|
+
>
|
|
347
|
+
<dt>
|
|
348
|
+
<div
|
|
349
|
+
class="d-flex"
|
|
350
|
+
>
|
|
351
|
+
<div>
|
|
352
|
+
Only title
|
|
353
|
+
<strong>
|
|
354
|
+
label
|
|
355
|
+
</strong>
|
|
356
|
+
</div>
|
|
357
|
+
</div>
|
|
358
|
+
</dt>
|
|
359
|
+
<dd>
|
|
360
|
+
<div>
|
|
361
|
+
Description text goes here.
|
|
362
|
+
</div>
|
|
363
|
+
</dd>
|
|
364
|
+
<dd>
|
|
365
|
+
<svg
|
|
366
|
+
class="me-2 align-self-center flex-shrink-0 bi icon--xs"
|
|
367
|
+
>
|
|
368
|
+
<use
|
|
369
|
+
xlink:href="/icons.svg#geo-alt-fill"
|
|
370
|
+
/>
|
|
371
|
+
</svg>
|
|
372
|
+
<div
|
|
373
|
+
class="mb-0 d-inline-block"
|
|
374
|
+
>
|
|
375
|
+
Description text goes here.
|
|
376
|
+
</div>
|
|
377
|
+
</dd>
|
|
378
|
+
</div>
|
|
379
|
+
</dl>
|
|
380
|
+
</jest>
|
|
381
|
+
`;
|
|
382
|
+
|
|
383
|
+
exports[`OE - Description List with title horizontal and bordered renders correctly 1`] = `
|
|
384
|
+
<jest>
|
|
385
|
+
<h6
|
|
386
|
+
class="mb-4 bcl-heading"
|
|
387
|
+
>
|
|
388
|
+
Description list test title
|
|
389
|
+
</h6>
|
|
390
|
+
<div
|
|
391
|
+
class="bcl-description-list"
|
|
392
|
+
>
|
|
393
|
+
<dl
|
|
394
|
+
class="border-bottom pb-2-5 mb-2-5 row"
|
|
395
|
+
>
|
|
396
|
+
<div
|
|
397
|
+
class="col-md-3"
|
|
398
|
+
>
|
|
399
|
+
<dt>
|
|
400
|
+
<div
|
|
401
|
+
class="d-flex"
|
|
402
|
+
>
|
|
403
|
+
<svg
|
|
404
|
+
class="me-2 align-self-center flex-shrink-0 bi icon--xs"
|
|
405
|
+
>
|
|
406
|
+
<use
|
|
407
|
+
xlink:href="/icons.svg#geo-alt-fill"
|
|
408
|
+
/>
|
|
409
|
+
</svg>
|
|
410
|
+
<div>
|
|
411
|
+
<p
|
|
412
|
+
class="mb-0"
|
|
413
|
+
>
|
|
414
|
+
Only title label with
|
|
415
|
+
<em>
|
|
416
|
+
icon
|
|
417
|
+
</em>
|
|
418
|
+
</p>
|
|
419
|
+
</div>
|
|
420
|
+
</div>
|
|
421
|
+
</dt>
|
|
422
|
+
</div>
|
|
423
|
+
<div
|
|
424
|
+
class="col"
|
|
425
|
+
>
|
|
426
|
+
<dd>
|
|
427
|
+
<div>
|
|
428
|
+
Long Description text goes here.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dignissim, quam at sollicitudin volutpat, ipsum arcu maximus massa, quis egestas diam tellus vitae nulla.
|
|
429
|
+
</div>
|
|
430
|
+
</dd>
|
|
431
|
+
</div>
|
|
432
|
+
</dl>
|
|
433
|
+
<dl
|
|
434
|
+
class="border-bottom pb-2-5 mb-2-5 row"
|
|
435
|
+
>
|
|
436
|
+
<div
|
|
437
|
+
class="col-md-3"
|
|
438
|
+
>
|
|
439
|
+
<dt>
|
|
440
|
+
<div
|
|
441
|
+
class="d-flex"
|
|
442
|
+
>
|
|
443
|
+
<div
|
|
444
|
+
class="align-self-center"
|
|
445
|
+
>
|
|
446
|
+
<span
|
|
447
|
+
class="p-2 me-2 d-inline-block rounded-1 bg-success"
|
|
448
|
+
/>
|
|
449
|
+
</div>
|
|
450
|
+
<div>
|
|
451
|
+
First title label
|
|
452
|
+
</div>
|
|
453
|
+
</div>
|
|
454
|
+
</dt>
|
|
455
|
+
<dt>
|
|
456
|
+
<div
|
|
457
|
+
class="d-flex"
|
|
458
|
+
>
|
|
459
|
+
<svg
|
|
460
|
+
class="me-2 align-self-center flex-shrink-0 bi icon--xs"
|
|
461
|
+
>
|
|
462
|
+
<use
|
|
463
|
+
xlink:href="/icons.svg#geo-alt-fill"
|
|
464
|
+
/>
|
|
465
|
+
</svg>
|
|
466
|
+
<div>
|
|
467
|
+
Second title label
|
|
468
|
+
</div>
|
|
469
|
+
</div>
|
|
470
|
+
</dt>
|
|
471
|
+
</div>
|
|
472
|
+
<div
|
|
473
|
+
class="col"
|
|
474
|
+
>
|
|
475
|
+
<dd>
|
|
476
|
+
<div>
|
|
477
|
+
Description text goes here.
|
|
478
|
+
</div>
|
|
479
|
+
</dd>
|
|
480
|
+
</div>
|
|
481
|
+
</dl>
|
|
482
|
+
<dl
|
|
483
|
+
class="border-bottom pb-2-5 mb-2-5 row"
|
|
484
|
+
>
|
|
485
|
+
<div
|
|
486
|
+
class="col-md-3"
|
|
487
|
+
>
|
|
488
|
+
<dt>
|
|
489
|
+
<div
|
|
490
|
+
class="d-flex"
|
|
491
|
+
>
|
|
492
|
+
<div>
|
|
493
|
+
Only title
|
|
494
|
+
<strong>
|
|
495
|
+
label
|
|
496
|
+
</strong>
|
|
497
|
+
</div>
|
|
498
|
+
</div>
|
|
499
|
+
</dt>
|
|
500
|
+
</div>
|
|
501
|
+
<div
|
|
502
|
+
class="col"
|
|
503
|
+
>
|
|
504
|
+
<dd>
|
|
505
|
+
<div>
|
|
506
|
+
Description text goes here.
|
|
507
|
+
</div>
|
|
508
|
+
</dd>
|
|
509
|
+
<dd>
|
|
510
|
+
<svg
|
|
511
|
+
class="me-2 align-self-center flex-shrink-0 bi icon--xs"
|
|
512
|
+
>
|
|
513
|
+
<use
|
|
514
|
+
xlink:href="/icons.svg#geo-alt-fill"
|
|
515
|
+
/>
|
|
516
|
+
</svg>
|
|
517
|
+
<div
|
|
518
|
+
class="mb-0 d-inline-block"
|
|
519
|
+
>
|
|
520
|
+
Description text goes here.
|
|
521
|
+
</div>
|
|
522
|
+
</dd>
|
|
523
|
+
</div>
|
|
524
|
+
</dl>
|
|
525
|
+
</div>
|
|
526
|
+
</jest>
|
|
527
|
+
`;
|
|
528
|
+
|
|
529
|
+
exports[`OE - Description List with title horizontal renders correctly 1`] = `
|
|
530
|
+
<jest>
|
|
531
|
+
<h6
|
|
532
|
+
class="mb-4 bcl-heading"
|
|
533
|
+
>
|
|
534
|
+
Description list test title
|
|
535
|
+
</h6>
|
|
536
|
+
<div
|
|
537
|
+
class="bcl-description-list"
|
|
538
|
+
>
|
|
539
|
+
<dl
|
|
540
|
+
class="mb-3 row"
|
|
541
|
+
>
|
|
542
|
+
<div
|
|
543
|
+
class="col-md-3"
|
|
544
|
+
>
|
|
545
|
+
<dt>
|
|
546
|
+
<div
|
|
547
|
+
class="d-flex"
|
|
548
|
+
>
|
|
549
|
+
<svg
|
|
550
|
+
class="me-2 align-self-center flex-shrink-0 bi icon--xs"
|
|
551
|
+
>
|
|
552
|
+
<use
|
|
553
|
+
xlink:href="/icons.svg#geo-alt-fill"
|
|
554
|
+
/>
|
|
555
|
+
</svg>
|
|
556
|
+
<div>
|
|
557
|
+
<p
|
|
558
|
+
class="mb-0"
|
|
559
|
+
>
|
|
560
|
+
Only title label with
|
|
561
|
+
<em>
|
|
562
|
+
icon
|
|
563
|
+
</em>
|
|
564
|
+
</p>
|
|
565
|
+
</div>
|
|
566
|
+
</div>
|
|
567
|
+
</dt>
|
|
568
|
+
</div>
|
|
569
|
+
<div
|
|
570
|
+
class="col"
|
|
571
|
+
>
|
|
572
|
+
<dd>
|
|
573
|
+
<div>
|
|
574
|
+
Long Description text goes here.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dignissim, quam at sollicitudin volutpat, ipsum arcu maximus massa, quis egestas diam tellus vitae nulla.
|
|
575
|
+
</div>
|
|
576
|
+
</dd>
|
|
577
|
+
</div>
|
|
578
|
+
</dl>
|
|
579
|
+
<dl
|
|
580
|
+
class="mb-3 row"
|
|
581
|
+
>
|
|
582
|
+
<div
|
|
583
|
+
class="col-md-3"
|
|
584
|
+
>
|
|
585
|
+
<dt>
|
|
586
|
+
<div
|
|
587
|
+
class="d-flex"
|
|
588
|
+
>
|
|
589
|
+
<div
|
|
590
|
+
class="align-self-center"
|
|
591
|
+
>
|
|
592
|
+
<span
|
|
593
|
+
class="p-2 me-2 d-inline-block rounded-1 bg-success"
|
|
594
|
+
/>
|
|
595
|
+
</div>
|
|
596
|
+
<div>
|
|
597
|
+
First title label
|
|
598
|
+
</div>
|
|
599
|
+
</div>
|
|
600
|
+
</dt>
|
|
601
|
+
<dt>
|
|
602
|
+
<div
|
|
603
|
+
class="d-flex"
|
|
604
|
+
>
|
|
605
|
+
<svg
|
|
606
|
+
class="me-2 align-self-center flex-shrink-0 bi icon--xs"
|
|
607
|
+
>
|
|
608
|
+
<use
|
|
609
|
+
xlink:href="/icons.svg#geo-alt-fill"
|
|
610
|
+
/>
|
|
611
|
+
</svg>
|
|
612
|
+
<div>
|
|
613
|
+
Second title label
|
|
614
|
+
</div>
|
|
615
|
+
</div>
|
|
616
|
+
</dt>
|
|
617
|
+
</div>
|
|
618
|
+
<div
|
|
619
|
+
class="col"
|
|
620
|
+
>
|
|
621
|
+
<dd>
|
|
622
|
+
<div>
|
|
623
|
+
Description text goes here.
|
|
624
|
+
</div>
|
|
625
|
+
</dd>
|
|
626
|
+
</div>
|
|
627
|
+
</dl>
|
|
628
|
+
<dl
|
|
629
|
+
class="mb-3 row"
|
|
630
|
+
>
|
|
631
|
+
<div
|
|
632
|
+
class="col-md-3"
|
|
633
|
+
>
|
|
634
|
+
<dt>
|
|
635
|
+
<div
|
|
636
|
+
class="d-flex"
|
|
637
|
+
>
|
|
638
|
+
<div>
|
|
639
|
+
Only title
|
|
640
|
+
<strong>
|
|
641
|
+
label
|
|
642
|
+
</strong>
|
|
643
|
+
</div>
|
|
644
|
+
</div>
|
|
645
|
+
</dt>
|
|
646
|
+
</div>
|
|
647
|
+
<div
|
|
648
|
+
class="col"
|
|
649
|
+
>
|
|
650
|
+
<dd>
|
|
651
|
+
<div>
|
|
652
|
+
Description text goes here.
|
|
653
|
+
</div>
|
|
654
|
+
</dd>
|
|
655
|
+
<dd>
|
|
656
|
+
<svg
|
|
657
|
+
class="me-2 align-self-center flex-shrink-0 bi icon--xs"
|
|
658
|
+
>
|
|
659
|
+
<use
|
|
660
|
+
xlink:href="/icons.svg#geo-alt-fill"
|
|
661
|
+
/>
|
|
662
|
+
</svg>
|
|
663
|
+
<div
|
|
664
|
+
class="mb-0 d-inline-block"
|
|
665
|
+
>
|
|
666
|
+
Description text goes here.
|
|
667
|
+
</div>
|
|
668
|
+
</dd>
|
|
669
|
+
</div>
|
|
670
|
+
</dl>
|
|
671
|
+
</div>
|
|
672
|
+
</jest>
|
|
673
|
+
`;
|
|
674
|
+
|
|
675
|
+
exports[`OE - Description List with title horizontal with different col size renders correctly 1`] = `
|
|
676
|
+
<jest>
|
|
677
|
+
<h6
|
|
678
|
+
class="mb-4 bcl-heading"
|
|
679
|
+
>
|
|
680
|
+
Description list test title
|
|
681
|
+
</h6>
|
|
682
|
+
<div
|
|
683
|
+
class="bcl-description-list"
|
|
684
|
+
>
|
|
685
|
+
<dl
|
|
686
|
+
class="mb-3 row"
|
|
687
|
+
>
|
|
688
|
+
<div
|
|
689
|
+
class="col-md-3"
|
|
690
|
+
>
|
|
691
|
+
<dt>
|
|
692
|
+
<div
|
|
693
|
+
class="d-flex"
|
|
694
|
+
>
|
|
695
|
+
<svg
|
|
696
|
+
class="me-2 align-self-center flex-shrink-0 bi icon--xs"
|
|
697
|
+
>
|
|
698
|
+
<use
|
|
699
|
+
xlink:href="/icons.svg#geo-alt-fill"
|
|
700
|
+
/>
|
|
701
|
+
</svg>
|
|
702
|
+
<div>
|
|
703
|
+
<p
|
|
704
|
+
class="mb-0"
|
|
705
|
+
>
|
|
706
|
+
Only title label with
|
|
707
|
+
<em>
|
|
708
|
+
icon
|
|
709
|
+
</em>
|
|
710
|
+
</p>
|
|
711
|
+
</div>
|
|
712
|
+
</div>
|
|
713
|
+
</dt>
|
|
714
|
+
</div>
|
|
715
|
+
<div
|
|
716
|
+
class="col"
|
|
717
|
+
>
|
|
718
|
+
<dd>
|
|
719
|
+
<div>
|
|
720
|
+
Long Description text goes here.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dignissim, quam at sollicitudin volutpat, ipsum arcu maximus massa, quis egestas diam tellus vitae nulla.
|
|
721
|
+
</div>
|
|
722
|
+
</dd>
|
|
723
|
+
</div>
|
|
724
|
+
</dl>
|
|
725
|
+
<dl
|
|
726
|
+
class="mb-3 row"
|
|
727
|
+
>
|
|
728
|
+
<div
|
|
729
|
+
class="col-md-3"
|
|
730
|
+
>
|
|
731
|
+
<dt>
|
|
732
|
+
<div
|
|
733
|
+
class="d-flex"
|
|
734
|
+
>
|
|
735
|
+
<div
|
|
736
|
+
class="align-self-center"
|
|
737
|
+
>
|
|
738
|
+
<span
|
|
739
|
+
class="p-2 me-2 d-inline-block rounded-1 bg-success"
|
|
740
|
+
/>
|
|
741
|
+
</div>
|
|
742
|
+
<div>
|
|
743
|
+
First title label
|
|
744
|
+
</div>
|
|
745
|
+
</div>
|
|
746
|
+
</dt>
|
|
747
|
+
<dt>
|
|
748
|
+
<div
|
|
749
|
+
class="d-flex"
|
|
750
|
+
>
|
|
751
|
+
<svg
|
|
752
|
+
class="me-2 align-self-center flex-shrink-0 bi icon--xs"
|
|
753
|
+
>
|
|
754
|
+
<use
|
|
755
|
+
xlink:href="/icons.svg#geo-alt-fill"
|
|
756
|
+
/>
|
|
757
|
+
</svg>
|
|
758
|
+
<div>
|
|
759
|
+
Second title label
|
|
760
|
+
</div>
|
|
761
|
+
</div>
|
|
762
|
+
</dt>
|
|
763
|
+
</div>
|
|
764
|
+
<div
|
|
765
|
+
class="col"
|
|
766
|
+
>
|
|
767
|
+
<dd>
|
|
768
|
+
<div>
|
|
769
|
+
Description text goes here.
|
|
770
|
+
</div>
|
|
771
|
+
</dd>
|
|
772
|
+
</div>
|
|
773
|
+
</dl>
|
|
774
|
+
<dl
|
|
775
|
+
class="mb-3 row"
|
|
776
|
+
>
|
|
777
|
+
<div
|
|
778
|
+
class="col-md-3"
|
|
779
|
+
>
|
|
780
|
+
<dt>
|
|
781
|
+
<div
|
|
782
|
+
class="d-flex"
|
|
783
|
+
>
|
|
784
|
+
<div>
|
|
785
|
+
Only title
|
|
786
|
+
<strong>
|
|
787
|
+
label
|
|
788
|
+
</strong>
|
|
789
|
+
</div>
|
|
790
|
+
</div>
|
|
791
|
+
</dt>
|
|
792
|
+
</div>
|
|
793
|
+
<div
|
|
794
|
+
class="col"
|
|
795
|
+
>
|
|
796
|
+
<dd>
|
|
797
|
+
<div>
|
|
798
|
+
Description text goes here.
|
|
799
|
+
</div>
|
|
800
|
+
</dd>
|
|
801
|
+
<dd>
|
|
802
|
+
<svg
|
|
803
|
+
class="me-2 align-self-center flex-shrink-0 bi icon--xs"
|
|
804
|
+
>
|
|
805
|
+
<use
|
|
806
|
+
xlink:href="/icons.svg#geo-alt-fill"
|
|
807
|
+
/>
|
|
808
|
+
</svg>
|
|
809
|
+
<div
|
|
810
|
+
class="mb-0 d-inline-block"
|
|
811
|
+
>
|
|
812
|
+
Description text goes here.
|
|
813
|
+
</div>
|
|
814
|
+
</dd>
|
|
815
|
+
</div>
|
|
816
|
+
</dl>
|
|
817
|
+
</div>
|
|
818
|
+
</jest>
|
|
819
|
+
`;
|
|
820
|
+
|
|
821
|
+
exports[`OE - Description List with title renders correctly 1`] = `
|
|
822
|
+
<jest>
|
|
823
|
+
<h6
|
|
824
|
+
class="mb-4 bcl-heading"
|
|
825
|
+
>
|
|
826
|
+
Description list test title
|
|
827
|
+
</h6>
|
|
828
|
+
<dl
|
|
829
|
+
class="bcl-description-list"
|
|
830
|
+
>
|
|
831
|
+
<div
|
|
832
|
+
class="mb-3"
|
|
833
|
+
>
|
|
834
|
+
<dt>
|
|
835
|
+
<div
|
|
836
|
+
class="d-flex"
|
|
837
|
+
>
|
|
838
|
+
<svg
|
|
839
|
+
class="me-2 align-self-center flex-shrink-0 bi icon--xs"
|
|
840
|
+
>
|
|
841
|
+
<use
|
|
842
|
+
xlink:href="/icons.svg#geo-alt-fill"
|
|
843
|
+
/>
|
|
844
|
+
</svg>
|
|
845
|
+
<div>
|
|
846
|
+
<p
|
|
847
|
+
class="mb-0"
|
|
848
|
+
>
|
|
849
|
+
Only title label with
|
|
850
|
+
<em>
|
|
851
|
+
icon
|
|
852
|
+
</em>
|
|
853
|
+
</p>
|
|
854
|
+
</div>
|
|
855
|
+
</div>
|
|
856
|
+
</dt>
|
|
857
|
+
<dd>
|
|
858
|
+
<div>
|
|
859
|
+
Long Description text goes here.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dignissim, quam at sollicitudin volutpat, ipsum arcu maximus massa, quis egestas diam tellus vitae nulla.
|
|
860
|
+
</div>
|
|
861
|
+
</dd>
|
|
862
|
+
</div>
|
|
863
|
+
<div
|
|
864
|
+
class="mb-3"
|
|
865
|
+
>
|
|
866
|
+
<dt>
|
|
867
|
+
<div
|
|
868
|
+
class="d-flex"
|
|
869
|
+
>
|
|
870
|
+
<div
|
|
871
|
+
class="align-self-center"
|
|
872
|
+
>
|
|
873
|
+
<span
|
|
874
|
+
class="p-2 me-2 d-inline-block rounded-1 bg-success"
|
|
875
|
+
/>
|
|
876
|
+
</div>
|
|
877
|
+
<div>
|
|
878
|
+
First title label
|
|
879
|
+
</div>
|
|
880
|
+
</div>
|
|
881
|
+
</dt>
|
|
882
|
+
<dt>
|
|
883
|
+
<div
|
|
884
|
+
class="d-flex"
|
|
885
|
+
>
|
|
886
|
+
<svg
|
|
887
|
+
class="me-2 align-self-center flex-shrink-0 bi icon--xs"
|
|
888
|
+
>
|
|
889
|
+
<use
|
|
890
|
+
xlink:href="/icons.svg#geo-alt-fill"
|
|
891
|
+
/>
|
|
892
|
+
</svg>
|
|
893
|
+
<div>
|
|
894
|
+
Second title label
|
|
895
|
+
</div>
|
|
896
|
+
</div>
|
|
897
|
+
</dt>
|
|
898
|
+
<dd>
|
|
899
|
+
<div>
|
|
900
|
+
Description text goes here.
|
|
901
|
+
</div>
|
|
902
|
+
</dd>
|
|
903
|
+
</div>
|
|
904
|
+
<div
|
|
905
|
+
class="mb-3"
|
|
906
|
+
>
|
|
907
|
+
<dt>
|
|
908
|
+
<div
|
|
909
|
+
class="d-flex"
|
|
910
|
+
>
|
|
911
|
+
<div>
|
|
912
|
+
Only title
|
|
913
|
+
<strong>
|
|
914
|
+
label
|
|
915
|
+
</strong>
|
|
916
|
+
</div>
|
|
917
|
+
</div>
|
|
918
|
+
</dt>
|
|
919
|
+
<dd>
|
|
920
|
+
<div>
|
|
921
|
+
Description text goes here.
|
|
922
|
+
</div>
|
|
923
|
+
</dd>
|
|
924
|
+
<dd>
|
|
925
|
+
<svg
|
|
926
|
+
class="me-2 align-self-center flex-shrink-0 bi icon--xs"
|
|
927
|
+
>
|
|
928
|
+
<use
|
|
929
|
+
xlink:href="/icons.svg#geo-alt-fill"
|
|
930
|
+
/>
|
|
931
|
+
</svg>
|
|
932
|
+
<div
|
|
933
|
+
class="mb-0 d-inline-block"
|
|
934
|
+
>
|
|
935
|
+
Description text goes here.
|
|
936
|
+
</div>
|
|
937
|
+
</dd>
|
|
938
|
+
</div>
|
|
939
|
+
</dl>
|
|
940
|
+
</jest>
|
|
941
|
+
`;
|
|
942
|
+
|
|
943
|
+
exports[`OE - Description List with title with inline icon renders correctly 1`] = `
|
|
944
|
+
<jest>
|
|
945
|
+
<dl
|
|
946
|
+
class="bcl-description-list"
|
|
947
|
+
>
|
|
948
|
+
<div
|
|
949
|
+
class="mb-3"
|
|
950
|
+
>
|
|
951
|
+
<dt>
|
|
952
|
+
<div
|
|
953
|
+
class="d-flex"
|
|
954
|
+
>
|
|
955
|
+
<div>
|
|
956
|
+
<svg
|
|
957
|
+
class="me-2 bi icon--fluid"
|
|
958
|
+
>
|
|
959
|
+
<use
|
|
960
|
+
xlink:href="/icons.svg#printer-fill"
|
|
961
|
+
/>
|
|
962
|
+
</svg>
|
|
963
|
+
Only title
|
|
964
|
+
<strong>
|
|
965
|
+
label
|
|
966
|
+
</strong>
|
|
967
|
+
with inline icon
|
|
968
|
+
</div>
|
|
969
|
+
</div>
|
|
970
|
+
</dt>
|
|
971
|
+
<dd>
|
|
972
|
+
<div>
|
|
973
|
+
<svg
|
|
974
|
+
class="me-2 bi icon--fluid"
|
|
975
|
+
>
|
|
976
|
+
<use
|
|
977
|
+
xlink:href="/icons.svg#printer-fill"
|
|
978
|
+
/>
|
|
979
|
+
</svg>
|
|
980
|
+
Description text goes here.
|
|
981
|
+
</div>
|
|
982
|
+
</dd>
|
|
983
|
+
</div>
|
|
984
|
+
</dl>
|
|
985
|
+
</jest>
|
|
986
|
+
`;
|
|
987
|
+
|
|
988
|
+
exports[`OE - Description List with title with new classes on definition icon renders correctly 1`] = `
|
|
989
|
+
<jest>
|
|
990
|
+
<dl
|
|
991
|
+
class="bcl-description-list"
|
|
992
|
+
>
|
|
993
|
+
<div
|
|
994
|
+
class="mb-3"
|
|
995
|
+
>
|
|
996
|
+
<dt>
|
|
997
|
+
<div
|
|
998
|
+
class="d-flex"
|
|
999
|
+
>
|
|
1000
|
+
<div>
|
|
1001
|
+
Term title
|
|
1002
|
+
</div>
|
|
1003
|
+
</div>
|
|
1004
|
+
</dt>
|
|
1005
|
+
<dd>
|
|
1006
|
+
<svg
|
|
1007
|
+
class="new-class me-2 align-self-center flex-shrink-0 bi icon--xs"
|
|
1008
|
+
>
|
|
1009
|
+
<use
|
|
1010
|
+
xlink:href="/icons.svg#geo-alt-fill"
|
|
1011
|
+
/>
|
|
1012
|
+
</svg>
|
|
1013
|
+
<div
|
|
1014
|
+
class="mb-0 d-inline-block"
|
|
1015
|
+
>
|
|
1016
|
+
<p
|
|
1017
|
+
class="mb-0"
|
|
1018
|
+
>
|
|
1019
|
+
Only title label with
|
|
1020
|
+
<em>
|
|
1021
|
+
icon
|
|
1022
|
+
</em>
|
|
1023
|
+
</p>
|
|
1024
|
+
</div>
|
|
1025
|
+
</dd>
|
|
1026
|
+
</div>
|
|
1027
|
+
</dl>
|
|
1028
|
+
</jest>
|
|
1029
|
+
`;
|
|
1030
|
+
|
|
1031
|
+
exports[`OE - Description List with title with new classes on term icon renders correctly 1`] = `
|
|
1032
|
+
<jest>
|
|
1033
|
+
<dl
|
|
1034
|
+
class="bcl-description-list"
|
|
1035
|
+
>
|
|
1036
|
+
<div
|
|
1037
|
+
class="mb-3"
|
|
1038
|
+
>
|
|
1039
|
+
<dt>
|
|
1040
|
+
<div
|
|
1041
|
+
class="d-flex"
|
|
1042
|
+
>
|
|
1043
|
+
<svg
|
|
1044
|
+
class="new-class me-2 align-self-center flex-shrink-0 bi icon--xs"
|
|
1045
|
+
>
|
|
1046
|
+
<use
|
|
1047
|
+
xlink:href="/icons.svg#geo-alt-fill"
|
|
1048
|
+
/>
|
|
1049
|
+
</svg>
|
|
1050
|
+
<div>
|
|
1051
|
+
<p
|
|
1052
|
+
class="mb-0"
|
|
1053
|
+
>
|
|
1054
|
+
Only title label with
|
|
1055
|
+
<em>
|
|
1056
|
+
icon
|
|
1057
|
+
</em>
|
|
1058
|
+
</p>
|
|
1059
|
+
</div>
|
|
1060
|
+
</div>
|
|
1061
|
+
</dt>
|
|
1062
|
+
<dd>
|
|
1063
|
+
<div>
|
|
1064
|
+
Long Description text goes here.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dignissim, quam at sollicitudin volutpat, ipsum arcu maximus massa, quis egestas diam tellus vitae nulla.
|
|
1065
|
+
</div>
|
|
1066
|
+
</dd>
|
|
1067
|
+
</div>
|
|
1068
|
+
</dl>
|
|
1069
|
+
</jest>
|
|
1070
|
+
`;
|