@openeuropa/bcl-description-list 0.26.0 → 0.28.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.
@@ -6,70 +6,136 @@ exports[`OE - Description List horizontal renders correctly 1`] = `
6
6
  class="bcl-description-list"
7
7
  >
8
8
  <dl
9
- class="d-md-grid grid-3-9 mb-3"
9
+ class="mb-3 row"
10
10
  >
11
- <dt
12
- class="d-flex"
11
+ <div
12
+ class="col-md-3"
13
13
  >
14
- <svg
15
- class="me-2 mt-1 bi icon--xs"
16
- >
17
- <use
18
- xlink:href="/icons.svg#geo-alt-fill"
19
- />
20
- </svg>
21
- <p
22
- class="mb-0 d-inline-block"
23
- >
24
- Only title label with icon
25
- </p>
26
- </dt>
27
- <dd>
28
- Description text goes here.
29
- </dd>
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>
30
47
  </dl>
31
48
  <dl
32
- class="d-md-grid grid-3-9 mb-3"
49
+ class="mb-3 row"
33
50
  >
34
- <dt>
35
- <div>
36
- First title label
37
- </div>
38
- <div
39
- class="d-flex"
40
- >
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>
41
125
  <svg
42
- class="me-2 mt-1 bi icon--xs"
126
+ class="me-2 align-self-center flex-shrink-0 bi icon--xs"
43
127
  >
44
128
  <use
45
129
  xlink:href="/icons.svg#geo-alt-fill"
46
130
  />
47
131
  </svg>
48
- <p
132
+ <div
49
133
  class="mb-0 d-inline-block"
50
134
  >
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>
135
+ Description text goes here.
136
+ </div>
137
+ </dd>
138
+ </div>
73
139
  </dl>
74
140
  </div>
75
141
  </jest>
@@ -77,68 +143,118 @@ exports[`OE - Description List horizontal renders correctly 1`] = `
77
143
 
78
144
  exports[`OE - Description List renders correctly 1`] = `
79
145
  <jest>
80
- <div
146
+ <dl
81
147
  class="bcl-description-list"
82
148
  >
83
- <dl
149
+ <div
84
150
  class="mb-3"
85
151
  >
86
152
  <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"
153
+ <div
154
+ class="d-flex"
96
155
  >
97
- Only title label with icon
98
- </p>
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>
99
174
  </dt>
100
175
  <dd>
101
- Description text goes here.
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>
102
179
  </dd>
103
- </dl>
104
- <dl
180
+ </div>
181
+ <div
105
182
  class="mb-3"
106
183
  >
107
184
  <dt>
108
- <div>
109
- First title label
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>
110
198
  </div>
111
- <div>
199
+ </dt>
200
+ <dt>
201
+ <div
202
+ class="d-flex"
203
+ >
112
204
  <svg
113
- class="me-2 bi icon--xs"
205
+ class="me-2 align-self-center flex-shrink-0 bi icon--xs"
114
206
  >
115
207
  <use
116
208
  xlink:href="/icons.svg#geo-alt-fill"
117
209
  />
118
210
  </svg>
119
- <p
120
- class="mb-0 d-inline-block"
121
- >
211
+ <div>
122
212
  Second title label
123
- </p>
213
+ </div>
124
214
  </div>
125
215
  </dt>
126
216
  <dd>
127
- Description text goes here.
217
+ <div>
218
+ Description text goes here.
219
+ </div>
128
220
  </dd>
129
- </dl>
130
- <dl>
221
+ </div>
222
+ <div
223
+ class="mb-3"
224
+ >
131
225
  <dt>
132
- Only title label
226
+ <div
227
+ class="d-flex"
228
+ >
229
+ <div>
230
+ Only title
231
+ <strong>
232
+ label
233
+ </strong>
234
+ </div>
235
+ </div>
133
236
  </dt>
134
237
  <dd>
135
- Description text goes here.
238
+ <div>
239
+ Description text goes here.
240
+ </div>
136
241
  </dd>
137
242
  <dd>
138
- Description text goes here.
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>
139
255
  </dd>
140
- </dl>
141
- </div>
256
+ </div>
257
+ </dl>
142
258
  </jest>
143
259
  `;
144
260
 
@@ -149,68 +265,118 @@ exports[`OE - Description List with title bordered renders correctly 1`] = `
149
265
  >
150
266
  Description list test title
151
267
  </h6>
152
- <div
268
+ <dl
153
269
  class="bcl-description-list"
154
270
  >
155
- <dl
156
- class="mb-2-5 pb-2-5 border-bottom"
271
+ <div
272
+ class="border-bottom pb-2-5 mb-2-5"
157
273
  >
158
274
  <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"
275
+ <div
276
+ class="d-flex"
168
277
  >
169
- Only title label with icon
170
- </p>
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>
171
296
  </dt>
172
297
  <dd>
173
- Description text goes here.
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>
174
301
  </dd>
175
- </dl>
176
- <dl
177
- class="mb-2-5 pb-2-5 border-bottom"
302
+ </div>
303
+ <div
304
+ class="border-bottom pb-2-5 mb-2-5"
178
305
  >
179
306
  <dt>
180
- <div>
181
- First title label
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>
182
320
  </div>
183
- <div>
321
+ </dt>
322
+ <dt>
323
+ <div
324
+ class="d-flex"
325
+ >
184
326
  <svg
185
- class="me-2 bi icon--xs"
327
+ class="me-2 align-self-center flex-shrink-0 bi icon--xs"
186
328
  >
187
329
  <use
188
330
  xlink:href="/icons.svg#geo-alt-fill"
189
331
  />
190
332
  </svg>
191
- <p
192
- class="mb-0 d-inline-block"
193
- >
333
+ <div>
194
334
  Second title label
195
- </p>
335
+ </div>
196
336
  </div>
197
337
  </dt>
198
338
  <dd>
199
- Description text goes here.
339
+ <div>
340
+ Description text goes here.
341
+ </div>
200
342
  </dd>
201
- </dl>
202
- <dl>
343
+ </div>
344
+ <div
345
+ class="border-bottom pb-2-5 mb-2-5"
346
+ >
203
347
  <dt>
204
- Only title label
348
+ <div
349
+ class="d-flex"
350
+ >
351
+ <div>
352
+ Only title
353
+ <strong>
354
+ label
355
+ </strong>
356
+ </div>
357
+ </div>
205
358
  </dt>
206
359
  <dd>
207
- Description text goes here.
360
+ <div>
361
+ Description text goes here.
362
+ </div>
208
363
  </dd>
209
364
  <dd>
210
- Description text goes here.
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>
211
377
  </dd>
212
- </dl>
213
- </div>
378
+ </div>
379
+ </dl>
214
380
  </jest>
215
381
  `;
216
382
 
@@ -225,82 +391,288 @@ exports[`OE - Description List with title horizontal and bordered renders correc
225
391
  class="bcl-description-list"
226
392
  >
227
393
  <dl
228
- class="d-md-grid grid-3-9 mb-2-5 pb-2-5 border-bottom"
394
+ class="border-bottom pb-2-5 mb-2-5 row"
229
395
  >
230
- <dt
231
- class="d-flex"
396
+ <div
397
+ class="col-md-3"
232
398
  >
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"
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"
248
425
  >
249
- Description text goes here.
250
- </dd>
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>
251
432
  </dl>
252
433
  <dl
253
- class="d-md-grid grid-3-9 mb-2-5 pb-2-5 border-bottom"
434
+ class="border-bottom pb-2-5 mb-2-5 row"
254
435
  >
255
- <dt>
256
- <div>
257
- First title label
258
- </div>
259
- <div
260
- class="d-flex"
261
- >
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>
262
510
  <svg
263
- class="me-2 mt-1 bi icon--xs"
511
+ class="me-2 align-self-center flex-shrink-0 bi icon--xs"
264
512
  >
265
513
  <use
266
514
  xlink:href="/icons.svg#geo-alt-fill"
267
515
  />
268
516
  </svg>
269
- <p
517
+ <div
270
518
  class="mb-0 d-inline-block"
271
519
  >
272
- Second title label
273
- </p>
274
- </div>
275
- </dt>
276
- <dd
277
- class="mb-0"
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"
278
544
  >
279
- Description text goes here.
280
- </dd>
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>
281
578
  </dl>
282
579
  <dl
283
- class="d-md-grid grid-3-9 mb-2-5 pb-2-5 border-bottom"
580
+ class="mb-3 row"
284
581
  >
285
- <dt>
286
- Only title label
287
- </dt>
288
- <dd
289
- class="mb-0"
582
+ <div
583
+ class="col-md-3"
290
584
  >
291
- <div>
292
- Description text goes here.
293
- </div>
294
- <div>
295
- Description text goes here.
296
- </div>
297
- </dd>
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>
298
670
  </dl>
299
671
  </div>
300
672
  </jest>
301
673
  `;
302
674
 
303
- exports[`OE - Description List with title horizontal renders correctly 1`] = `
675
+ exports[`OE - Description List with title horizontal with different col size renders correctly 1`] = `
304
676
  <jest>
305
677
  <h6
306
678
  class="mb-4 bcl-heading"
@@ -311,143 +683,388 @@ exports[`OE - Description List with title horizontal renders correctly 1`] = `
311
683
  class="bcl-description-list"
312
684
  >
313
685
  <dl
314
- class="d-md-grid grid-3-9 mb-3"
686
+ class="mb-3 row"
315
687
  >
316
- <dt
317
- class="d-flex"
688
+ <div
689
+ class="col-md-3"
318
690
  >
319
- <svg
320
- class="me-2 mt-1 bi icon--xs"
321
- >
322
- <use
323
- xlink:href="/icons.svg#geo-alt-fill"
324
- />
325
- </svg>
326
- <p
327
- class="mb-0 d-inline-block"
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"
328
837
  >
329
- Only title label with icon
330
- </p>
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>
331
856
  </dt>
332
857
  <dd>
333
- Description text goes here.
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>
334
861
  </dd>
335
- </dl>
336
- <dl
337
- class="d-md-grid grid-3-9 mb-3"
862
+ </div>
863
+ <div
864
+ class="mb-3"
338
865
  >
339
866
  <dt>
340
- <div>
341
- First title label
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>
342
880
  </div>
881
+ </dt>
882
+ <dt>
343
883
  <div
344
884
  class="d-flex"
345
885
  >
346
886
  <svg
347
- class="me-2 mt-1 bi icon--xs"
887
+ class="me-2 align-self-center flex-shrink-0 bi icon--xs"
348
888
  >
349
889
  <use
350
890
  xlink:href="/icons.svg#geo-alt-fill"
351
891
  />
352
892
  </svg>
353
- <p
354
- class="mb-0 d-inline-block"
355
- >
893
+ <div>
356
894
  Second title label
357
- </p>
895
+ </div>
358
896
  </div>
359
897
  </dt>
360
898
  <dd>
361
- Description text goes here.
899
+ <div>
900
+ Description text goes here.
901
+ </div>
362
902
  </dd>
363
- </dl>
364
- <dl
365
- class="d-md-grid grid-3-9 mb-3"
903
+ </div>
904
+ <div
905
+ class="mb-3"
366
906
  >
367
907
  <dt>
368
- Only title label
908
+ <div
909
+ class="d-flex"
910
+ >
911
+ <div>
912
+ Only title
913
+ <strong>
914
+ label
915
+ </strong>
916
+ </div>
917
+ </div>
369
918
  </dt>
370
919
  <dd>
371
920
  <div>
372
921
  Description text goes here.
373
922
  </div>
374
- <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
+ >
375
935
  Description text goes here.
376
936
  </div>
377
937
  </dd>
378
- </dl>
379
- </div>
938
+ </div>
939
+ </dl>
380
940
  </jest>
381
941
  `;
382
942
 
383
- exports[`OE - Description List with title renders correctly 1`] = `
943
+ exports[`OE - Description List with title with inline icon renders correctly 1`] = `
384
944
  <jest>
385
- <h6
386
- class="mb-4 bcl-heading"
945
+ <dl
946
+ class="bcl-description-list"
387
947
  >
388
- Description list test title
389
- </h6>
390
- <div
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
391
991
  class="bcl-description-list"
392
992
  >
393
- <dl
993
+ <div
394
994
  class="mb-3"
395
995
  >
396
996
  <dt>
997
+ <div
998
+ class="d-flex"
999
+ >
1000
+ <div>
1001
+ Term title
1002
+ </div>
1003
+ </div>
1004
+ </dt>
1005
+ <dd>
397
1006
  <svg
398
- class="me-2 bi icon--xs"
1007
+ class="new-class me-2 align-self-center flex-shrink-0 bi icon--xs"
399
1008
  >
400
1009
  <use
401
1010
  xlink:href="/icons.svg#geo-alt-fill"
402
1011
  />
403
1012
  </svg>
404
- <p
1013
+ <div
405
1014
  class="mb-0 d-inline-block"
406
1015
  >
407
- Only title label with icon
408
- </p>
409
- </dt>
410
- <dd>
411
- Description text goes here.
1016
+ <p
1017
+ class="mb-0"
1018
+ >
1019
+ Only title label with
1020
+ <em>
1021
+ icon
1022
+ </em>
1023
+ </p>
1024
+ </div>
412
1025
  </dd>
413
- </dl>
414
- <dl
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
415
1037
  class="mb-3"
416
1038
  >
417
1039
  <dt>
418
- <div>
419
- First title label
420
- </div>
421
- <div>
1040
+ <div
1041
+ class="d-flex"
1042
+ >
422
1043
  <svg
423
- class="me-2 bi icon--xs"
1044
+ class="new-class me-2 align-self-center flex-shrink-0 bi icon--xs"
424
1045
  >
425
1046
  <use
426
1047
  xlink:href="/icons.svg#geo-alt-fill"
427
1048
  />
428
1049
  </svg>
429
- <p
430
- class="mb-0 d-inline-block"
431
- >
432
- Second title label
433
- </p>
1050
+ <div>
1051
+ <p
1052
+ class="mb-0"
1053
+ >
1054
+ Only title label with
1055
+ <em>
1056
+ icon
1057
+ </em>
1058
+ </p>
1059
+ </div>
434
1060
  </div>
435
1061
  </dt>
436
1062
  <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.
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>
449
1066
  </dd>
450
- </dl>
451
- </div>
1067
+ </div>
1068
+ </dl>
452
1069
  </jest>
453
1070
  `;