@openeuropa/bcl-listing 0.12.0 → 0.16.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/listing.html.twig +67 -38
- package/package.json +4 -4
- package/__snapshots__/listing.test.js.snap +0 -1696
- package/data/listing--default-1-col.js +0 -92
- package/data/listing--default-2-col.js +0 -139
- package/data/listing--default-3-col.js +0 -140
- package/data/listing--highlight-1-col.js +0 -103
- package/data/listing--highlight-2-col.js +0 -104
- package/data/listing--highlight-3-col.js +0 -103
- package/listing.story.js +0 -89
- package/listing.test.js +0 -44
package/listing.html.twig
CHANGED
|
@@ -3,21 +3,26 @@
|
|
|
3
3
|
{# Parameters:
|
|
4
4
|
- variant: (string) (default: "horizontal") options:
|
|
5
5
|
[ default-1-col, highlight-1-col, default-2-col, default-3-col, highlight-2-col, highlight-3-col ]
|
|
6
|
-
- title: (string) (default:
|
|
6
|
+
- title: (string) (default: "")
|
|
7
|
+
- title_tag: (string) (default: "h4")
|
|
7
8
|
- items: (array of objects of type card)
|
|
8
9
|
- link: (object of type link)
|
|
10
|
+
- alignment: (string) (default: '') options:
|
|
11
|
+
['start', 'end', 'center', 'baseline', 'stretch']
|
|
9
12
|
#}
|
|
10
13
|
|
|
11
14
|
{% set _items = items|default([]) %}
|
|
12
15
|
{% set _variant = variant|default('default-1-col') %}
|
|
13
16
|
{% set _title = title|default('') %}
|
|
17
|
+
{% set _title_tag = title_tag|default('h4') %}
|
|
18
|
+
{% set _alignment = alignment|default('') %}
|
|
14
19
|
{% set _link = link|default({}) %}
|
|
15
20
|
{% set _classes = ['bcl-listing', 'bcl-listing--' ~ _variant] %}
|
|
16
21
|
{% set _cards = [] %}
|
|
17
22
|
{% set _card_layout = {
|
|
18
23
|
type: 'grid',
|
|
19
|
-
|
|
20
|
-
|
|
24
|
+
responsiveness: 'md',
|
|
25
|
+
gutter: '4',
|
|
21
26
|
attributes: create_attribute(),
|
|
22
27
|
} %}
|
|
23
28
|
{% set attributes = attributes.addClass(_classes) %}
|
|
@@ -25,29 +30,48 @@
|
|
|
25
30
|
<div {{ attributes }}>
|
|
26
31
|
|
|
27
32
|
{% if _title is not empty %}
|
|
28
|
-
{% set _title_classes = 'fw-bold mb-
|
|
29
|
-
{
|
|
30
|
-
{
|
|
31
|
-
{
|
|
32
|
-
<h4 class="{{ _title_classes }}">
|
|
33
|
-
{{ _title }}
|
|
34
|
-
</h4>
|
|
33
|
+
{% set _title_classes = 'fw-bold mb-4' %}
|
|
34
|
+
<{{ _title_tag }} class="{{ _title_classes }}">
|
|
35
|
+
{{- _title -}}
|
|
36
|
+
</{{ _title_tag }}>
|
|
35
37
|
{% endif %}
|
|
36
38
|
|
|
37
39
|
{% if _items is not empty %}
|
|
38
40
|
{% for _card in _items %}
|
|
41
|
+
{% set _alignment_class = '' %}
|
|
42
|
+
{% set _max_width = '' %}
|
|
43
|
+
{% set _image = {} %}
|
|
44
|
+
{% if _card.image is not empty %}
|
|
45
|
+
{% set _max_width = 'mw-listing-img' %}
|
|
46
|
+
{% if not _alignment == 'center' %}
|
|
47
|
+
{% set _image_classes = _card.image.classes ? _card.image.classes ~ ' mb-3' : 'mb-3' %}
|
|
48
|
+
{% endif %}
|
|
49
|
+
{% set _card = _card|merge({image: _card.image|merge({
|
|
50
|
+
classes: _image_classes
|
|
51
|
+
})}) %}
|
|
52
|
+
{% elseif _card.date is not empty %}
|
|
53
|
+
{% set _max_width = 'mw-date mb-3' %}
|
|
54
|
+
{% endif %}
|
|
55
|
+
{% if _alignment is not empty %}
|
|
56
|
+
{% set _alignment_class = ' align-self-' ~ _alignment %}
|
|
57
|
+
{% endif %}
|
|
39
58
|
{% set _card_classes = [] %}
|
|
40
59
|
{% set _card_attributes = card.attributes ? card.attributes : create_attribute() %}
|
|
41
60
|
|
|
42
61
|
{% if _variant == 'default-1-col' %}
|
|
43
|
-
{% set _card_classes = [
|
|
62
|
+
{% set _card_classes = [
|
|
63
|
+
'listing-item',
|
|
64
|
+
'border-bottom',
|
|
65
|
+
'border-md-0',
|
|
66
|
+
'border-0',
|
|
67
|
+
] %}
|
|
44
68
|
{% set _card_attributes = _card_attributes.addClass(_card_classes) %}
|
|
45
69
|
{% set _card = _card|merge({
|
|
46
70
|
horizontal: true,
|
|
47
|
-
|
|
71
|
+
extra_classes_body: 'p-0 pb-md-0 pb-3',
|
|
48
72
|
horizontal_grid: {
|
|
49
|
-
left_col_classes: 'col-md-3 col-lg-2 rounded',
|
|
50
|
-
right_col_classes: 'col-md-9 col-lg-10',
|
|
73
|
+
left_col_classes: 'col-md-3 col-lg-2 rounded ' ~ _max_width ~ _alignment_class,
|
|
74
|
+
right_col_classes: 'col-md-9 col-lg-10' ~ _alignment_class,
|
|
51
75
|
},
|
|
52
76
|
attributes: _card_attributes,
|
|
53
77
|
}) %}
|
|
@@ -56,40 +80,38 @@
|
|
|
56
80
|
{% if _variant == 'default-2-col' or _variant == 'default-3-col' %}
|
|
57
81
|
{% set _card_classes = [
|
|
58
82
|
'listing-item',
|
|
59
|
-
'
|
|
60
|
-
'border-0'
|
|
83
|
+
'border-bottom',
|
|
84
|
+
'border-md-0',
|
|
85
|
+
'border-0',
|
|
61
86
|
] %}
|
|
62
87
|
{% set _card_attributes = _card_attributes.addClass(_card_classes) %}
|
|
63
88
|
{% set _card = _card|merge({
|
|
64
|
-
|
|
89
|
+
extra_classes_body: 'p-0 pb-md-0 pb-3',
|
|
65
90
|
horizontal: true,
|
|
66
91
|
attributes: _card_attributes,
|
|
67
92
|
}) %}
|
|
68
|
-
|
|
69
|
-
cols_extra_classes: "mt-4-5",
|
|
70
|
-
}) %}
|
|
93
|
+
|
|
71
94
|
{% if _variant == 'default-2-col' %}
|
|
72
95
|
{% set _card = _card|merge({
|
|
73
96
|
horizontal_grid: {
|
|
74
|
-
left_col_classes:
|
|
75
|
-
right_col_classes:
|
|
97
|
+
left_col_classes: 'col-xl-3 col-md-5 ' ~ _max_width ~ _alignment_class,
|
|
98
|
+
right_col_classes: 'col-xl-9 col-md-7' ~ _alignment_class,
|
|
76
99
|
},
|
|
77
100
|
}) %}
|
|
78
101
|
{% set _card_layout = _card_layout|merge({
|
|
79
|
-
gutter: 2,
|
|
80
102
|
responsive_columns: 2,
|
|
81
103
|
}) %}
|
|
82
104
|
{% else %}
|
|
83
105
|
{% set _card = _card|merge({
|
|
84
106
|
horizontal_grid: {
|
|
85
|
-
left_col_classes:
|
|
86
|
-
right_col_classes:
|
|
107
|
+
left_col_classes: 'col-lg-4 col-md-6 ' ~ _max_width ~ _alignment_class,
|
|
108
|
+
right_col_classes: 'col-lg-8 col-md-6' ~ _alignment_class,
|
|
87
109
|
},
|
|
88
110
|
}) %}
|
|
89
111
|
{% set _card_layout = _card_layout|merge({
|
|
90
|
-
|
|
112
|
+
attributes: _card_layout.attributes.addClass(['row-cols-md-2']),
|
|
91
113
|
responsive_columns: 3,
|
|
92
|
-
responsiveness: '
|
|
114
|
+
responsiveness: 'xl',
|
|
93
115
|
}) %}
|
|
94
116
|
{% endif %}
|
|
95
117
|
{% endif %}
|
|
@@ -98,32 +120,42 @@
|
|
|
98
120
|
{% set _card_classes = [
|
|
99
121
|
'listing-item--highlight',
|
|
100
122
|
'border-0',
|
|
101
|
-
'bg-
|
|
123
|
+
'bg-lighter'
|
|
102
124
|
] %}
|
|
103
125
|
{% set _card_attributes = _card_attributes.addClass(_card_classes) %}
|
|
104
126
|
{% set _card = _card|merge({
|
|
105
|
-
|
|
106
|
-
wrapper_class: "col",
|
|
127
|
+
wrapper_class: 'col',
|
|
107
128
|
attributes: _card_attributes,
|
|
108
129
|
}) %}
|
|
130
|
+
{% if _card.image is defined and _card.image is not empty %}
|
|
131
|
+
{% set _card = _card|merge({
|
|
132
|
+
extra_classes_body: "pt-0",
|
|
133
|
+
}) %}
|
|
134
|
+
{% endif %}
|
|
109
135
|
{% set _card_layout = _card_layout|merge({
|
|
110
|
-
cols_extra_classes:
|
|
136
|
+
cols_extra_classes: 'mt-4-5',
|
|
111
137
|
}) %}
|
|
112
138
|
{% endif %}
|
|
113
139
|
|
|
114
140
|
{% if _variant == 'highlight-2-col' or variant == 'highlight-3-col' %}
|
|
115
141
|
{% set _card_classes = [
|
|
116
142
|
'listing-item--highlight',
|
|
117
|
-
'border-0',
|
|
143
|
+
'border-0',
|
|
144
|
+
'bg-lighter',
|
|
118
145
|
'h-100',
|
|
119
146
|
'rounded-2'
|
|
120
147
|
] %}
|
|
121
148
|
{% set _card_attributes = _card_attributes.addClass(_card_classes) %}
|
|
122
149
|
{% set _card = _card|merge({
|
|
123
|
-
wrapper_class:
|
|
124
|
-
cols_extra_classes: "mt-4-5",
|
|
150
|
+
wrapper_class: 'col',
|
|
125
151
|
attributes: _card_attributes,
|
|
126
152
|
}) %}
|
|
153
|
+
{% if _card.image is defined and _card.image is not empty %}
|
|
154
|
+
{% set _card = _card|merge({
|
|
155
|
+
extra_classes_body: 'pt-0',
|
|
156
|
+
}) %}
|
|
157
|
+
{% endif %}
|
|
158
|
+
{% set _card_layout = _card_layout|merge({ gutter: '4' }) %}
|
|
127
159
|
{% if variant == 'highlight-2-col' %}
|
|
128
160
|
{% set _card_layout = _card_layout|merge({ responsive_columns: 2 }) %}
|
|
129
161
|
{% else %}
|
|
@@ -139,10 +171,7 @@
|
|
|
139
171
|
|
|
140
172
|
{% if _link is not empty %}
|
|
141
173
|
{% set _link_attributes = _link.attributes ? _link.attributes : create_attribute() %}
|
|
142
|
-
{% set _link_attributes = _link_attributes.addClass(['mt-3-5', 'd-block']) %}
|
|
143
|
-
{% if _variant == 'default-1-col' or _variant == 'default-2-col' or variant == 'default-3-col' %}
|
|
144
|
-
{% set _link_attributes = _link_attributes.addClass(['ps-3-5']) %}
|
|
145
|
-
{% endif %}
|
|
174
|
+
{% set _link_attributes = _link_attributes.addClass(['mt-3-5', 'd-inline-block']) %}
|
|
146
175
|
{% include '@oe-bcl/bcl-link/link.html.twig' with _link|merge({
|
|
147
176
|
attributes: _link_attributes,
|
|
148
177
|
icon: _link.icon|merge({
|
package/package.json
CHANGED
|
@@ -2,14 +2,14 @@
|
|
|
2
2
|
"name": "@openeuropa/bcl-listing",
|
|
3
3
|
"author": "European Commission",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
|
-
"version": "0.
|
|
5
|
+
"version": "0.16.0",
|
|
6
6
|
"description": "OE - BCL Listing",
|
|
7
7
|
"publishConfig": {
|
|
8
8
|
"access": "public"
|
|
9
9
|
},
|
|
10
10
|
"dependencies": {
|
|
11
|
-
"@openeuropa/bcl-card-layout": "^0.
|
|
12
|
-
"@openeuropa/bcl-link": "^0.
|
|
11
|
+
"@openeuropa/bcl-card-layout": "^0.16.0",
|
|
12
|
+
"@openeuropa/bcl-link": "^0.16.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": "39a52d25c36789a0c4712b0f6e55cbc5cbbedcb5"
|
|
29
29
|
}
|