@openeuropa/bcl-description-list 0.14.0 → 0.15.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.
- package/__snapshots__/description-list.test.js.snap +182 -64
- package/data.js +2 -0
- package/dataHorizontal.js +2 -0
- package/description-list.html.twig +33 -8
- package/description-list.story.js +3 -22
- package/description-list.test.js +24 -2
- package/package.json +3 -3
|
@@ -1,5 +1,77 @@
|
|
|
1
1
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
2
|
|
|
3
|
+
exports[`OE - Description List horizontal renders correctly 1`] = `
|
|
4
|
+
<jest>
|
|
5
|
+
<dl
|
|
6
|
+
class="d-md-grid grid-3-9"
|
|
7
|
+
>
|
|
8
|
+
<dt
|
|
9
|
+
class="d-flex"
|
|
10
|
+
>
|
|
11
|
+
<svg
|
|
12
|
+
class="me-2 mt-1 bi icon--xs"
|
|
13
|
+
>
|
|
14
|
+
<use
|
|
15
|
+
xlink:href="/icons.svg#geo-alt-fill"
|
|
16
|
+
/>
|
|
17
|
+
</svg>
|
|
18
|
+
<p
|
|
19
|
+
class="mb-0 d-inline-block"
|
|
20
|
+
>
|
|
21
|
+
Only title label with icon
|
|
22
|
+
</p>
|
|
23
|
+
</dt>
|
|
24
|
+
<dd>
|
|
25
|
+
Description text goes here.
|
|
26
|
+
</dd>
|
|
27
|
+
<div>
|
|
28
|
+
<dt>
|
|
29
|
+
<p
|
|
30
|
+
class="mb-0"
|
|
31
|
+
>
|
|
32
|
+
First title label
|
|
33
|
+
</p>
|
|
34
|
+
</dt>
|
|
35
|
+
<dt
|
|
36
|
+
class="d-flex"
|
|
37
|
+
>
|
|
38
|
+
<svg
|
|
39
|
+
class="me-2 mt-1 bi icon--xs"
|
|
40
|
+
>
|
|
41
|
+
<use
|
|
42
|
+
xlink:href="/icons.svg#geo-alt-fill"
|
|
43
|
+
/>
|
|
44
|
+
</svg>
|
|
45
|
+
<p
|
|
46
|
+
class="mb-0 d-inline-block"
|
|
47
|
+
>
|
|
48
|
+
Second title label
|
|
49
|
+
</p>
|
|
50
|
+
</dt>
|
|
51
|
+
</div>
|
|
52
|
+
<dd>
|
|
53
|
+
<p
|
|
54
|
+
class="mb-0"
|
|
55
|
+
>
|
|
56
|
+
Description text goes here.
|
|
57
|
+
</p>
|
|
58
|
+
</dd>
|
|
59
|
+
<dt>
|
|
60
|
+
|
|
61
|
+
Only title label
|
|
62
|
+
</dt>
|
|
63
|
+
<div>
|
|
64
|
+
<dd>
|
|
65
|
+
Description text goes here.
|
|
66
|
+
</dd>
|
|
67
|
+
<dd>
|
|
68
|
+
Description text goes here.
|
|
69
|
+
</dd>
|
|
70
|
+
</div>
|
|
71
|
+
</dl>
|
|
72
|
+
</jest>
|
|
73
|
+
`;
|
|
74
|
+
|
|
3
75
|
exports[`OE - Description List renders correctly 1`] = `
|
|
4
76
|
<jest>
|
|
5
77
|
<dl>
|
|
@@ -8,18 +80,14 @@ exports[`OE - Description List renders correctly 1`] = `
|
|
|
8
80
|
class="me-2 bi icon--xs"
|
|
9
81
|
>
|
|
10
82
|
<use
|
|
11
|
-
xlink:href="#geo-alt-fill"
|
|
83
|
+
xlink:href="/icons.svg#geo-alt-fill"
|
|
12
84
|
/>
|
|
13
85
|
</svg>
|
|
14
|
-
<
|
|
15
|
-
class="
|
|
86
|
+
<p
|
|
87
|
+
class="d-inline-block mb-0"
|
|
16
88
|
>
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
>
|
|
20
|
-
Only title label with icon
|
|
21
|
-
</p>
|
|
22
|
-
</div>
|
|
89
|
+
Only title label with icon
|
|
90
|
+
</p>
|
|
23
91
|
</dt>
|
|
24
92
|
<dd>
|
|
25
93
|
<p
|
|
@@ -29,29 +97,21 @@ exports[`OE - Description List renders correctly 1`] = `
|
|
|
29
97
|
</p>
|
|
30
98
|
</dd>
|
|
31
99
|
<dt>
|
|
32
|
-
|
|
33
|
-
class="align-middle d-inline-block"
|
|
34
|
-
>
|
|
35
|
-
First title label
|
|
36
|
-
</div>
|
|
100
|
+
First title label
|
|
37
101
|
</dt>
|
|
38
102
|
<dt>
|
|
39
103
|
<svg
|
|
40
104
|
class="me-2 bi icon--xs"
|
|
41
105
|
>
|
|
42
106
|
<use
|
|
43
|
-
xlink:href="#geo-alt-fill"
|
|
107
|
+
xlink:href="/icons.svg#geo-alt-fill"
|
|
44
108
|
/>
|
|
45
109
|
</svg>
|
|
46
|
-
<
|
|
47
|
-
class="
|
|
110
|
+
<p
|
|
111
|
+
class="mb-0 d-inline-block"
|
|
48
112
|
>
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
>
|
|
52
|
-
Second title label
|
|
53
|
-
</p>
|
|
54
|
-
</div>
|
|
113
|
+
Second title label
|
|
114
|
+
</p>
|
|
55
115
|
</dt>
|
|
56
116
|
<dd>
|
|
57
117
|
<p
|
|
@@ -61,11 +121,8 @@ exports[`OE - Description List renders correctly 1`] = `
|
|
|
61
121
|
</p>
|
|
62
122
|
</dd>
|
|
63
123
|
<dt>
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
>
|
|
67
|
-
Only title label
|
|
68
|
-
</div>
|
|
124
|
+
|
|
125
|
+
Only title label
|
|
69
126
|
</dt>
|
|
70
127
|
<dd>
|
|
71
128
|
Description text goes here.
|
|
@@ -77,61 +134,58 @@ exports[`OE - Description List renders correctly 1`] = `
|
|
|
77
134
|
</jest>
|
|
78
135
|
`;
|
|
79
136
|
|
|
80
|
-
exports[`OE - Description List renders correctly
|
|
137
|
+
exports[`OE - Description List with title horizontal renders correctly 1`] = `
|
|
81
138
|
<jest>
|
|
139
|
+
<h6
|
|
140
|
+
class="fw-bold mb-4"
|
|
141
|
+
>
|
|
142
|
+
Description list test title
|
|
143
|
+
</h6>
|
|
82
144
|
<dl
|
|
83
145
|
class="d-md-grid grid-3-9"
|
|
84
146
|
>
|
|
85
|
-
<dt
|
|
147
|
+
<dt
|
|
148
|
+
class="d-flex"
|
|
149
|
+
>
|
|
86
150
|
<svg
|
|
87
|
-
class="me-2 bi icon--xs"
|
|
151
|
+
class="me-2 mt-1 bi icon--xs"
|
|
88
152
|
>
|
|
89
153
|
<use
|
|
90
|
-
xlink:href="#geo-alt-fill"
|
|
154
|
+
xlink:href="/icons.svg#geo-alt-fill"
|
|
91
155
|
/>
|
|
92
156
|
</svg>
|
|
93
|
-
<
|
|
94
|
-
class="
|
|
157
|
+
<p
|
|
158
|
+
class="mb-0 d-inline-block"
|
|
95
159
|
>
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
>
|
|
99
|
-
Only title label with icon
|
|
100
|
-
</p>
|
|
101
|
-
</div>
|
|
160
|
+
Only title label with icon
|
|
161
|
+
</p>
|
|
102
162
|
</dt>
|
|
103
163
|
<dd>
|
|
104
164
|
Description text goes here.
|
|
105
165
|
</dd>
|
|
106
166
|
<div>
|
|
107
167
|
<dt>
|
|
108
|
-
<
|
|
109
|
-
class="
|
|
168
|
+
<p
|
|
169
|
+
class="mb-0"
|
|
110
170
|
>
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
>
|
|
114
|
-
First title label
|
|
115
|
-
</p>
|
|
116
|
-
</div>
|
|
171
|
+
First title label
|
|
172
|
+
</p>
|
|
117
173
|
</dt>
|
|
118
|
-
<dt
|
|
174
|
+
<dt
|
|
175
|
+
class="d-flex"
|
|
176
|
+
>
|
|
119
177
|
<svg
|
|
120
|
-
class="me-2 bi icon--xs"
|
|
178
|
+
class="me-2 mt-1 bi icon--xs"
|
|
121
179
|
>
|
|
122
180
|
<use
|
|
123
|
-
xlink:href="#geo-alt-fill"
|
|
181
|
+
xlink:href="/icons.svg#geo-alt-fill"
|
|
124
182
|
/>
|
|
125
183
|
</svg>
|
|
126
|
-
<
|
|
127
|
-
class="
|
|
184
|
+
<p
|
|
185
|
+
class="mb-0 d-inline-block"
|
|
128
186
|
>
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
>
|
|
132
|
-
Second title label
|
|
133
|
-
</p>
|
|
134
|
-
</div>
|
|
187
|
+
Second title label
|
|
188
|
+
</p>
|
|
135
189
|
</dt>
|
|
136
190
|
</div>
|
|
137
191
|
<dd>
|
|
@@ -142,11 +196,8 @@ exports[`OE - Description List renders correctly 2`] = `
|
|
|
142
196
|
</p>
|
|
143
197
|
</dd>
|
|
144
198
|
<dt>
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
>
|
|
148
|
-
Only title label
|
|
149
|
-
</div>
|
|
199
|
+
|
|
200
|
+
Only title label
|
|
150
201
|
</dt>
|
|
151
202
|
<div>
|
|
152
203
|
<dd>
|
|
@@ -159,3 +210,70 @@ exports[`OE - Description List renders correctly 2`] = `
|
|
|
159
210
|
</dl>
|
|
160
211
|
</jest>
|
|
161
212
|
`;
|
|
213
|
+
|
|
214
|
+
exports[`OE - Description List with title renders correctly 1`] = `
|
|
215
|
+
<jest>
|
|
216
|
+
<h6
|
|
217
|
+
class="fw-bold mb-4"
|
|
218
|
+
>
|
|
219
|
+
Description list test title
|
|
220
|
+
</h6>
|
|
221
|
+
<dl>
|
|
222
|
+
<dt>
|
|
223
|
+
<svg
|
|
224
|
+
class="me-2 bi icon--xs"
|
|
225
|
+
>
|
|
226
|
+
<use
|
|
227
|
+
xlink:href="/icons.svg#geo-alt-fill"
|
|
228
|
+
/>
|
|
229
|
+
</svg>
|
|
230
|
+
<p
|
|
231
|
+
class="d-inline-block mb-0"
|
|
232
|
+
>
|
|
233
|
+
Only title label with icon
|
|
234
|
+
</p>
|
|
235
|
+
</dt>
|
|
236
|
+
<dd>
|
|
237
|
+
<p
|
|
238
|
+
class="mb-2"
|
|
239
|
+
>
|
|
240
|
+
Description text goes here.
|
|
241
|
+
</p>
|
|
242
|
+
</dd>
|
|
243
|
+
<dt>
|
|
244
|
+
First title label
|
|
245
|
+
</dt>
|
|
246
|
+
<dt>
|
|
247
|
+
<svg
|
|
248
|
+
class="me-2 bi icon--xs"
|
|
249
|
+
>
|
|
250
|
+
<use
|
|
251
|
+
xlink:href="/icons.svg#geo-alt-fill"
|
|
252
|
+
/>
|
|
253
|
+
</svg>
|
|
254
|
+
<p
|
|
255
|
+
class="mb-0 d-inline-block"
|
|
256
|
+
>
|
|
257
|
+
Second title label
|
|
258
|
+
</p>
|
|
259
|
+
</dt>
|
|
260
|
+
<dd>
|
|
261
|
+
<p
|
|
262
|
+
class="mb-2"
|
|
263
|
+
>
|
|
264
|
+
Description text goes here.
|
|
265
|
+
</p>
|
|
266
|
+
</dd>
|
|
267
|
+
<dt>
|
|
268
|
+
|
|
269
|
+
Only title label
|
|
270
|
+
</dt>
|
|
271
|
+
<dd>
|
|
272
|
+
Description text goes here.
|
|
273
|
+
</dd>
|
|
274
|
+
<dd>
|
|
275
|
+
Description text goes here.
|
|
276
|
+
</dd>
|
|
277
|
+
</dl>
|
|
278
|
+
</jest>
|
|
279
|
+
`;
|
package/data.js
CHANGED
|
@@ -8,6 +8,7 @@ module.exports = {
|
|
|
8
8
|
icon: {
|
|
9
9
|
name: "geo-alt-fill",
|
|
10
10
|
size: "xs",
|
|
11
|
+
path: "/icons.svg",
|
|
11
12
|
},
|
|
12
13
|
},
|
|
13
14
|
definition: "<p class='mb-2'>Description text goes here.</p>",
|
|
@@ -22,6 +23,7 @@ module.exports = {
|
|
|
22
23
|
icon: {
|
|
23
24
|
name: "geo-alt-fill",
|
|
24
25
|
size: "xs",
|
|
26
|
+
path: "/icons.svg",
|
|
25
27
|
},
|
|
26
28
|
},
|
|
27
29
|
],
|
package/dataHorizontal.js
CHANGED
|
@@ -9,6 +9,7 @@ module.exports = {
|
|
|
9
9
|
icon: {
|
|
10
10
|
name: "geo-alt-fill",
|
|
11
11
|
size: "xs",
|
|
12
|
+
path: "/icons.svg",
|
|
12
13
|
},
|
|
13
14
|
},
|
|
14
15
|
definition: "Description text goes here.",
|
|
@@ -23,6 +24,7 @@ module.exports = {
|
|
|
23
24
|
icon: {
|
|
24
25
|
name: "geo-alt-fill",
|
|
25
26
|
size: "xs",
|
|
27
|
+
path: "/icons.svg",
|
|
26
28
|
},
|
|
27
29
|
},
|
|
28
30
|
],
|
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
{#
|
|
4
4
|
Parameters:
|
|
5
|
+
- title: (string) (default: "")
|
|
6
|
+
- title_tag: (string) (default: "h4")
|
|
5
7
|
- "items" (array) (default: []): format: [
|
|
6
8
|
{
|
|
7
9
|
"term" (object or array of object) -format: {
|
|
@@ -14,12 +16,12 @@
|
|
|
14
16
|
]
|
|
15
17
|
- "variant" (string) (default: '')
|
|
16
18
|
- option: ["horizontal"]
|
|
17
|
-
|
|
18
19
|
#}
|
|
19
20
|
|
|
20
21
|
{# Parameters #}
|
|
21
22
|
|
|
22
|
-
|
|
23
|
+
{% set _title = title|default('') %}
|
|
24
|
+
{% set _title_tag = title_tag|default('h4') %}
|
|
23
25
|
{% set _items = items|default([]) %}
|
|
24
26
|
{% set _variant = variant|default('') %}
|
|
25
27
|
|
|
@@ -27,6 +29,13 @@
|
|
|
27
29
|
{% set attributes = attributes.addClass(["d-md-grid", "grid-3-9"]) %}
|
|
28
30
|
{% endif %}
|
|
29
31
|
|
|
32
|
+
{% if _title is not empty %}
|
|
33
|
+
{% set _title_classes = 'fw-bold mb-4' %}
|
|
34
|
+
<{{ _title_tag }} class="{{ _title_classes }}">
|
|
35
|
+
{{- _title -}}
|
|
36
|
+
</{{ _title_tag }}>
|
|
37
|
+
{% endif %}
|
|
38
|
+
|
|
30
39
|
<dl
|
|
31
40
|
{{ attributes }}
|
|
32
41
|
>
|
|
@@ -37,26 +46,42 @@
|
|
|
37
46
|
<div>
|
|
38
47
|
{% endif %}
|
|
39
48
|
{% for _term in _item.term %}
|
|
40
|
-
<dt
|
|
49
|
+
<dt
|
|
50
|
+
{% if _variant == 'horizontal' and _term.icon is not empty %}
|
|
51
|
+
class="d-flex"
|
|
52
|
+
{% endif %}
|
|
53
|
+
>
|
|
41
54
|
{%- if _term.icon is not empty -%}
|
|
55
|
+
{% set _icon_classes = ["me-2"] %}
|
|
56
|
+
{% if _variant == 'horizontal' %}
|
|
57
|
+
{% set _icon_classes = _icon_classes|merge(["mt-1"]) %}
|
|
58
|
+
{% endif %}
|
|
42
59
|
{% include '@oe-bcl/bcl-icon/icon.html.twig' with _term.icon|merge({
|
|
43
|
-
attributes: create_attribute().addClass(
|
|
60
|
+
attributes: create_attribute().addClass(_icon_classes)
|
|
44
61
|
}) only %}
|
|
45
62
|
{%- endif -%}
|
|
46
|
-
|
|
63
|
+
{{- _term.label -}}
|
|
47
64
|
</dt>
|
|
48
65
|
{% endfor %}
|
|
49
66
|
{% if _variant == 'horizontal' %}
|
|
50
67
|
</div>
|
|
51
68
|
{% endif %}
|
|
52
69
|
{% else %}
|
|
53
|
-
<dt
|
|
70
|
+
<dt
|
|
71
|
+
{% if _variant == 'horizontal' and _item.term.icon is not empty %}
|
|
72
|
+
class="d-flex"
|
|
73
|
+
{% endif %}
|
|
74
|
+
>
|
|
54
75
|
{% if _item.term.icon is not empty %}
|
|
76
|
+
{% set _icon_classes = ["me-2"] %}
|
|
77
|
+
{% if _variant == 'horizontal' %}
|
|
78
|
+
{% set _icon_classes = _icon_classes|merge(["mt-1"]) %}
|
|
79
|
+
{% endif %}
|
|
55
80
|
{%- include '@oe-bcl/bcl-icon/icon.html.twig' with _item.term.icon|merge({
|
|
56
|
-
attributes: create_attribute().addClass(
|
|
81
|
+
attributes: create_attribute().addClass(_icon_classes)
|
|
57
82
|
}) only -%}
|
|
58
83
|
{% endif %}
|
|
59
|
-
|
|
84
|
+
{{- _item.term.label -}}
|
|
60
85
|
</dt>
|
|
61
86
|
{% endif %}
|
|
62
87
|
{% endif %}
|
|
@@ -1,26 +1,7 @@
|
|
|
1
1
|
import demoData from "@openeuropa/bcl-description-list/data.js";
|
|
2
2
|
import demoDataHorizontal from "@openeuropa/bcl-description-list/dataHorizontal";
|
|
3
3
|
import descriptionList from "@openeuropa/bcl-description-list/description-list.html.twig";
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
const correctPath = (data) => {
|
|
7
|
-
data.items.forEach((item) => {
|
|
8
|
-
if (item.term) {
|
|
9
|
-
if (Array.isArray(item.term)) {
|
|
10
|
-
item.term.forEach((term) => {
|
|
11
|
-
if (term.icon) {
|
|
12
|
-
term.icon.path = defaultSprite;
|
|
13
|
-
}
|
|
14
|
-
});
|
|
15
|
-
} else {
|
|
16
|
-
if (item.term.icon) {
|
|
17
|
-
item.term.icon.path = defaultSprite;
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
});
|
|
22
|
-
return data;
|
|
23
|
-
};
|
|
4
|
+
import { correctPaths } from "@openeuropa/bcl-story-utils";
|
|
24
5
|
|
|
25
6
|
export default {
|
|
26
7
|
title: "Paragraphs/Description List",
|
|
@@ -38,7 +19,7 @@ export default {
|
|
|
38
19
|
},
|
|
39
20
|
};
|
|
40
21
|
|
|
41
|
-
export const Default = () => descriptionList(
|
|
22
|
+
export const Default = () => descriptionList(correctPaths(demoData));
|
|
42
23
|
|
|
43
24
|
export const Horizontal = () =>
|
|
44
|
-
descriptionList(
|
|
25
|
+
descriptionList(correctPaths(demoDataHorizontal));
|
package/description-list.test.js
CHANGED
|
@@ -8,13 +8,35 @@ const render = (params) => renderTwigFileAsNode(template, params);
|
|
|
8
8
|
describe("OE - Description List", () => {
|
|
9
9
|
test(`renders correctly`, () => {
|
|
10
10
|
expect.assertions(1);
|
|
11
|
-
|
|
12
11
|
return expect(render(demoData)).resolves.toMatchSnapshot();
|
|
13
12
|
});
|
|
14
13
|
|
|
14
|
+
test(`horizontal renders correctly`, () => {
|
|
15
|
+
expect.assertions(1);
|
|
16
|
+
return expect(render(demoDataHorizontal)).resolves.toMatchSnapshot();
|
|
17
|
+
});
|
|
18
|
+
});
|
|
19
|
+
|
|
20
|
+
describe("OE - Description List with title", () => {
|
|
15
21
|
test(`renders correctly`, () => {
|
|
16
22
|
expect.assertions(1);
|
|
23
|
+
return expect(
|
|
24
|
+
render({
|
|
25
|
+
...demoData,
|
|
26
|
+
title: "Description list test title",
|
|
27
|
+
title_tag: "h6",
|
|
28
|
+
})
|
|
29
|
+
).resolves.toMatchSnapshot();
|
|
30
|
+
});
|
|
17
31
|
|
|
18
|
-
|
|
32
|
+
test(`horizontal renders correctly`, () => {
|
|
33
|
+
expect.assertions(1);
|
|
34
|
+
return expect(
|
|
35
|
+
render({
|
|
36
|
+
...demoDataHorizontal,
|
|
37
|
+
title: "Description list test title",
|
|
38
|
+
title_tag: "h6",
|
|
39
|
+
})
|
|
40
|
+
).resolves.toMatchSnapshot();
|
|
19
41
|
});
|
|
20
42
|
});
|
package/package.json
CHANGED
|
@@ -2,13 +2,13 @@
|
|
|
2
2
|
"name": "@openeuropa/bcl-description-list",
|
|
3
3
|
"author": "European Commission",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
|
-
"version": "0.
|
|
5
|
+
"version": "0.15.0",
|
|
6
6
|
"description": "OE - BCL description-list",
|
|
7
7
|
"publishConfig": {
|
|
8
8
|
"access": "public"
|
|
9
9
|
},
|
|
10
10
|
"dependencies": {
|
|
11
|
-
"@openeuropa/bcl-icon": "^0.
|
|
11
|
+
"@openeuropa/bcl-icon": "^0.15.0"
|
|
12
12
|
},
|
|
13
13
|
"repository": {
|
|
14
14
|
"type": "git",
|
|
@@ -24,5 +24,5 @@
|
|
|
24
24
|
"design-system",
|
|
25
25
|
"twig"
|
|
26
26
|
],
|
|
27
|
-
"gitHead": "
|
|
27
|
+
"gitHead": "97a9f0822ee0d4d800e40aa17bf87dc698c5906c"
|
|
28
28
|
}
|