@openeuropa/bcl-description-list 0.27.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.
@@ -5,69 +5,133 @@ exports[`OE - Description List horizontal renders correctly 1`] = `
5
5
  <div
6
6
  class="bcl-description-list"
7
7
  >
8
- <dl>
8
+ <dl
9
+ class="mb-3 row"
10
+ >
9
11
  <div
10
- class="d-md-grid grid-3-9 mb-3"
12
+ class="col-md-3"
11
13
  >
12
- <dt
13
- class="d-flex"
14
- >
15
- <svg
16
- class="me-2 mt-1 bi icon--xs"
17
- >
18
- <use
19
- xlink:href="/icons.svg#geo-alt-fill"
20
- />
21
- </svg>
22
- <p
23
- class="mb-0 d-inline-block"
14
+ <dt>
15
+ <div
16
+ class="d-flex"
24
17
  >
25
- Only title label with icon
26
- </p>
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>
27
36
  </dt>
37
+ </div>
38
+ <div
39
+ class="col"
40
+ >
28
41
  <dd>
29
- Description text goes here.
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>
30
45
  </dd>
31
46
  </div>
47
+ </dl>
48
+ <dl
49
+ class="mb-3 row"
50
+ >
32
51
  <div
33
- class="d-md-grid grid-3-9 mb-3"
52
+ class="col-md-3"
34
53
  >
35
54
  <dt>
36
- <div>
37
- First title label
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>
38
68
  </div>
69
+ </dt>
70
+ <dt>
39
71
  <div
40
72
  class="d-flex"
41
73
  >
42
74
  <svg
43
- class="me-2 mt-1 bi icon--xs"
75
+ class="me-2 align-self-center flex-shrink-0 bi icon--xs"
44
76
  >
45
77
  <use
46
78
  xlink:href="/icons.svg#geo-alt-fill"
47
79
  />
48
80
  </svg>
49
- <p
50
- class="mb-0 d-inline-block"
51
- >
81
+ <div>
52
82
  Second title label
53
- </p>
83
+ </div>
54
84
  </div>
55
85
  </dt>
86
+ </div>
87
+ <div
88
+ class="col"
89
+ >
56
90
  <dd>
57
- Description text goes here.
91
+ <div>
92
+ Description text goes here.
93
+ </div>
58
94
  </dd>
59
95
  </div>
96
+ </dl>
97
+ <dl
98
+ class="mb-3 row"
99
+ >
60
100
  <div
61
- class="d-md-grid grid-3-9 mb-3"
101
+ class="col-md-3"
62
102
  >
63
103
  <dt>
64
- Only title label
104
+ <div
105
+ class="d-flex"
106
+ >
107
+ <div>
108
+ Only title
109
+ <strong>
110
+ label
111
+ </strong>
112
+ </div>
113
+ </div>
65
114
  </dt>
115
+ </div>
116
+ <div
117
+ class="col"
118
+ >
66
119
  <dd>
67
120
  <div>
68
121
  Description text goes here.
69
122
  </div>
70
- <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
+ >
71
135
  Description text goes here.
72
136
  </div>
73
137
  </dd>
@@ -79,74 +143,244 @@ exports[`OE - Description List horizontal renders correctly 1`] = `
79
143
 
80
144
  exports[`OE - Description List renders correctly 1`] = `
81
145
  <jest>
82
- <div
146
+ <dl
83
147
  class="bcl-description-list"
84
148
  >
85
- <dl>
86
- <div
87
- class="mb-3"
88
- >
89
- <dt>
149
+ <div
150
+ class="mb-3"
151
+ >
152
+ <dt>
153
+ <div
154
+ class="d-flex"
155
+ >
90
156
  <svg
91
- class="me-2 bi icon--xs"
157
+ class="me-2 align-self-center flex-shrink-0 bi icon--xs"
92
158
  >
93
159
  <use
94
160
  xlink:href="/icons.svg#geo-alt-fill"
95
161
  />
96
162
  </svg>
97
- <p
98
- class="mb-0 d-inline-block"
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"
99
190
  >
100
- Only title label with icon
101
- </p>
102
- </dt>
103
- <dd>
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>
104
218
  Description text goes here.
105
- </dd>
106
- </div>
107
- <div
108
- class="mb-3"
109
- >
110
- <dt>
219
+ </div>
220
+ </dd>
221
+ </div>
222
+ <div
223
+ class="mb-3"
224
+ >
225
+ <dt>
226
+ <div
227
+ class="d-flex"
228
+ >
111
229
  <div>
112
- First title label
230
+ Only title
231
+ <strong>
232
+ label
233
+ </strong>
113
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>
114
285
  <div>
115
- <svg
116
- class="me-2 bi icon--xs"
117
- >
118
- <use
119
- xlink:href="/icons.svg#geo-alt-fill"
120
- />
121
- </svg>
122
286
  <p
123
- class="mb-0 d-inline-block"
287
+ class="mb-0"
124
288
  >
125
- Second title label
289
+ Only title label with
290
+ <em>
291
+ icon
292
+ </em>
126
293
  </p>
127
294
  </div>
128
- </dt>
129
- <dd>
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>
130
340
  Description text goes here.
131
- </dd>
132
- </div>
133
- <div>
134
- <dt>
135
- Only title label
136
- </dt>
137
- <dd>
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>
138
361
  Description text goes here.
139
- </dd>
140
- <dd>
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
+ >
141
375
  Description text goes here.
142
- </dd>
143
- </div>
144
- </dl>
145
- </div>
376
+ </div>
377
+ </dd>
378
+ </div>
379
+ </dl>
146
380
  </jest>
147
381
  `;
148
382
 
149
- exports[`OE - Description List with title bordered renders correctly 1`] = `
383
+ exports[`OE - Description List with title horizontal and bordered renders correctly 1`] = `
150
384
  <jest>
151
385
  <h6
152
386
  class="mb-4 bcl-heading"
@@ -156,63 +390,135 @@ exports[`OE - Description List with title bordered renders correctly 1`] = `
156
390
  <div
157
391
  class="bcl-description-list"
158
392
  >
159
- <dl>
393
+ <dl
394
+ class="border-bottom pb-2-5 mb-2-5 row"
395
+ >
160
396
  <div
161
- class="mb-2-5 pb-2-5 border-bottom"
397
+ class="col-md-3"
162
398
  >
163
399
  <dt>
164
- <svg
165
- class="me-2 bi icon--xs"
166
- >
167
- <use
168
- xlink:href="/icons.svg#geo-alt-fill"
169
- />
170
- </svg>
171
- <p
172
- class="mb-0 d-inline-block"
400
+ <div
401
+ class="d-flex"
173
402
  >
174
- Only title label with icon
175
- </p>
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>
176
421
  </dt>
422
+ </div>
423
+ <div
424
+ class="col"
425
+ >
177
426
  <dd>
178
- Description text goes here.
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>
179
430
  </dd>
180
431
  </div>
432
+ </dl>
433
+ <dl
434
+ class="border-bottom pb-2-5 mb-2-5 row"
435
+ >
181
436
  <div
182
- class="mb-2-5 pb-2-5 border-bottom"
437
+ class="col-md-3"
183
438
  >
184
439
  <dt>
185
- <div>
186
- First title label
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>
187
453
  </div>
188
- <div>
454
+ </dt>
455
+ <dt>
456
+ <div
457
+ class="d-flex"
458
+ >
189
459
  <svg
190
- class="me-2 bi icon--xs"
460
+ class="me-2 align-self-center flex-shrink-0 bi icon--xs"
191
461
  >
192
462
  <use
193
463
  xlink:href="/icons.svg#geo-alt-fill"
194
464
  />
195
465
  </svg>
196
- <p
197
- class="mb-0 d-inline-block"
198
- >
466
+ <div>
199
467
  Second title label
200
- </p>
468
+ </div>
201
469
  </div>
202
470
  </dt>
471
+ </div>
472
+ <div
473
+ class="col"
474
+ >
203
475
  <dd>
204
- Description text goes here.
476
+ <div>
477
+ Description text goes here.
478
+ </div>
205
479
  </dd>
206
480
  </div>
207
- <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
+ >
208
488
  <dt>
209
- Only title label
489
+ <div
490
+ class="d-flex"
491
+ >
492
+ <div>
493
+ Only title
494
+ <strong>
495
+ label
496
+ </strong>
497
+ </div>
498
+ </div>
210
499
  </dt>
500
+ </div>
501
+ <div
502
+ class="col"
503
+ >
211
504
  <dd>
212
- Description text goes here.
505
+ <div>
506
+ Description text goes here.
507
+ </div>
213
508
  </dd>
214
509
  <dd>
215
- Description text goes here.
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>
216
522
  </dd>
217
523
  </div>
218
524
  </dl>
@@ -220,7 +526,7 @@ exports[`OE - Description List with title bordered renders correctly 1`] = `
220
526
  </jest>
221
527
  `;
222
528
 
223
- exports[`OE - Description List with title horizontal and bordered renders correctly 1`] = `
529
+ exports[`OE - Description List with title horizontal renders correctly 1`] = `
224
530
  <jest>
225
531
  <h6
226
532
  class="mb-4 bcl-heading"
@@ -230,75 +536,133 @@ exports[`OE - Description List with title horizontal and bordered renders correc
230
536
  <div
231
537
  class="bcl-description-list"
232
538
  >
233
- <dl>
539
+ <dl
540
+ class="mb-3 row"
541
+ >
234
542
  <div
235
- class="d-md-grid grid-3-9 mb-2-5 pb-2-5 border-bottom"
543
+ class="col-md-3"
236
544
  >
237
- <dt
238
- class="d-flex"
239
- >
240
- <svg
241
- class="me-2 mt-1 bi icon--xs"
242
- >
243
- <use
244
- xlink:href="/icons.svg#geo-alt-fill"
245
- />
246
- </svg>
247
- <p
248
- class="mb-0 d-inline-block"
545
+ <dt>
546
+ <div
547
+ class="d-flex"
249
548
  >
250
- Only title label with icon
251
- </p>
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>
252
567
  </dt>
253
- <dd
254
- class="mb-0"
255
- >
256
- Description text goes here.
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>
257
576
  </dd>
258
577
  </div>
578
+ </dl>
579
+ <dl
580
+ class="mb-3 row"
581
+ >
259
582
  <div
260
- class="d-md-grid grid-3-9 mb-2-5 pb-2-5 border-bottom"
583
+ class="col-md-3"
261
584
  >
262
585
  <dt>
263
- <div>
264
- First title label
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>
265
599
  </div>
600
+ </dt>
601
+ <dt>
266
602
  <div
267
603
  class="d-flex"
268
604
  >
269
605
  <svg
270
- class="me-2 mt-1 bi icon--xs"
606
+ class="me-2 align-self-center flex-shrink-0 bi icon--xs"
271
607
  >
272
608
  <use
273
609
  xlink:href="/icons.svg#geo-alt-fill"
274
610
  />
275
611
  </svg>
276
- <p
277
- class="mb-0 d-inline-block"
278
- >
612
+ <div>
279
613
  Second title label
280
- </p>
614
+ </div>
281
615
  </div>
282
616
  </dt>
283
- <dd
284
- class="mb-0"
285
- >
286
- Description text goes here.
617
+ </div>
618
+ <div
619
+ class="col"
620
+ >
621
+ <dd>
622
+ <div>
623
+ Description text goes here.
624
+ </div>
287
625
  </dd>
288
626
  </div>
627
+ </dl>
628
+ <dl
629
+ class="mb-3 row"
630
+ >
289
631
  <div
290
- class="d-md-grid grid-3-9 mb-2-5 pb-2-5 border-bottom"
632
+ class="col-md-3"
291
633
  >
292
634
  <dt>
293
- Only title label
635
+ <div
636
+ class="d-flex"
637
+ >
638
+ <div>
639
+ Only title
640
+ <strong>
641
+ label
642
+ </strong>
643
+ </div>
644
+ </div>
294
645
  </dt>
295
- <dd
296
- class="mb-0"
297
- >
646
+ </div>
647
+ <div
648
+ class="col"
649
+ >
650
+ <dd>
298
651
  <div>
299
652
  Description text goes here.
300
653
  </div>
301
- <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
+ >
302
666
  Description text goes here.
303
667
  </div>
304
668
  </dd>
@@ -308,7 +672,7 @@ exports[`OE - Description List with title horizontal and bordered renders correc
308
672
  </jest>
309
673
  `;
310
674
 
311
- 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`] = `
312
676
  <jest>
313
677
  <h6
314
678
  class="mb-4 bcl-heading"
@@ -318,69 +682,133 @@ exports[`OE - Description List with title horizontal renders correctly 1`] = `
318
682
  <div
319
683
  class="bcl-description-list"
320
684
  >
321
- <dl>
685
+ <dl
686
+ class="mb-3 row"
687
+ >
322
688
  <div
323
- class="d-md-grid grid-3-9 mb-3"
689
+ class="col-md-3"
324
690
  >
325
- <dt
326
- class="d-flex"
327
- >
328
- <svg
329
- class="me-2 mt-1 bi icon--xs"
330
- >
331
- <use
332
- xlink:href="/icons.svg#geo-alt-fill"
333
- />
334
- </svg>
335
- <p
336
- class="mb-0 d-inline-block"
691
+ <dt>
692
+ <div
693
+ class="d-flex"
337
694
  >
338
- Only title label with icon
339
- </p>
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>
340
713
  </dt>
714
+ </div>
715
+ <div
716
+ class="col"
717
+ >
341
718
  <dd>
342
- Description text goes here.
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>
343
722
  </dd>
344
723
  </div>
724
+ </dl>
725
+ <dl
726
+ class="mb-3 row"
727
+ >
345
728
  <div
346
- class="d-md-grid grid-3-9 mb-3"
729
+ class="col-md-3"
347
730
  >
348
731
  <dt>
349
- <div>
350
- First title label
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>
351
745
  </div>
746
+ </dt>
747
+ <dt>
352
748
  <div
353
749
  class="d-flex"
354
750
  >
355
751
  <svg
356
- class="me-2 mt-1 bi icon--xs"
752
+ class="me-2 align-self-center flex-shrink-0 bi icon--xs"
357
753
  >
358
754
  <use
359
755
  xlink:href="/icons.svg#geo-alt-fill"
360
756
  />
361
757
  </svg>
362
- <p
363
- class="mb-0 d-inline-block"
364
- >
758
+ <div>
365
759
  Second title label
366
- </p>
760
+ </div>
367
761
  </div>
368
762
  </dt>
763
+ </div>
764
+ <div
765
+ class="col"
766
+ >
369
767
  <dd>
370
- Description text goes here.
768
+ <div>
769
+ Description text goes here.
770
+ </div>
371
771
  </dd>
372
772
  </div>
773
+ </dl>
774
+ <dl
775
+ class="mb-3 row"
776
+ >
373
777
  <div
374
- class="d-md-grid grid-3-9 mb-3"
778
+ class="col-md-3"
375
779
  >
376
780
  <dt>
377
- Only title label
781
+ <div
782
+ class="d-flex"
783
+ >
784
+ <div>
785
+ Only title
786
+ <strong>
787
+ label
788
+ </strong>
789
+ </div>
790
+ </div>
378
791
  </dt>
792
+ </div>
793
+ <div
794
+ class="col"
795
+ >
379
796
  <dd>
380
797
  <div>
381
798
  Description text goes here.
382
799
  </div>
383
- <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
+ >
384
812
  Description text goes here.
385
813
  </div>
386
814
  </dd>
@@ -397,69 +825,246 @@ exports[`OE - Description List with title renders correctly 1`] = `
397
825
  >
398
826
  Description list test title
399
827
  </h6>
400
- <div
828
+ <dl
401
829
  class="bcl-description-list"
402
830
  >
403
- <dl>
404
- <div
405
- class="mb-3"
406
- >
407
- <dt>
831
+ <div
832
+ class="mb-3"
833
+ >
834
+ <dt>
835
+ <div
836
+ class="d-flex"
837
+ >
408
838
  <svg
409
- class="me-2 bi icon--xs"
839
+ class="me-2 align-self-center flex-shrink-0 bi icon--xs"
410
840
  >
411
841
  <use
412
842
  xlink:href="/icons.svg#geo-alt-fill"
413
843
  />
414
844
  </svg>
415
- <p
416
- class="mb-0 d-inline-block"
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"
417
872
  >
418
- Only title label with icon
419
- </p>
420
- </dt>
421
- <dd>
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>
422
900
  Description text goes here.
423
- </dd>
424
- </div>
425
- <div
426
- class="mb-3"
427
- >
428
- <dt>
901
+ </div>
902
+ </dd>
903
+ </div>
904
+ <div
905
+ class="mb-3"
906
+ >
907
+ <dt>
908
+ <div
909
+ class="d-flex"
910
+ >
429
911
  <div>
430
- First title label
912
+ Only title
913
+ <strong>
914
+ label
915
+ </strong>
431
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
+ >
432
955
  <div>
433
956
  <svg
434
- class="me-2 bi icon--xs"
957
+ class="me-2 bi icon--fluid"
435
958
  >
436
959
  <use
437
- xlink:href="/icons.svg#geo-alt-fill"
960
+ xlink:href="/icons.svg#printer-fill"
438
961
  />
439
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>
440
1051
  <p
441
- class="mb-0 d-inline-block"
1052
+ class="mb-0"
442
1053
  >
443
- Second title label
1054
+ Only title label with
1055
+ <em>
1056
+ icon
1057
+ </em>
444
1058
  </p>
445
1059
  </div>
446
- </dt>
447
- <dd>
448
- Description text goes here.
449
- </dd>
450
- </div>
451
- <div>
452
- <dt>
453
- Only title label
454
- </dt>
455
- <dd>
456
- Description text goes here.
457
- </dd>
458
- <dd>
459
- Description text goes here.
460
- </dd>
461
- </div>
462
- </dl>
463
- </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>
464
1069
  </jest>
465
1070
  `;