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