@openeuropa/bcl-listing 0.22.0 → 0.25.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 +57 -58
- package/package.json +5 -5
package/listing.html.twig
CHANGED
|
@@ -1,24 +1,31 @@
|
|
|
1
1
|
{% spaceless %}
|
|
2
2
|
|
|
3
3
|
{# Parameters:
|
|
4
|
-
-
|
|
5
|
-
|
|
6
|
-
-
|
|
7
|
-
- title_tag: (string) (default: "h2")
|
|
4
|
+
- title: (string) (default: '')
|
|
5
|
+
- title_tag: (string) (default: 'h2')
|
|
6
|
+
- title_link: (link object) (default: {})
|
|
8
7
|
- title_attributes (drupal attrs)
|
|
8
|
+
- variant: (string) (default: 'horizontal')
|
|
9
|
+
options [ default-1-col, highlight-1-col, default-2-col, default-3-col, highlight-2-col, highlight-3-col ]
|
|
9
10
|
- items: (array of objects of type card)
|
|
10
11
|
- link: (object of type link)
|
|
11
|
-
- alignment: (string) (default: '')
|
|
12
|
-
|
|
12
|
+
- alignment: (string) (default: '')
|
|
13
|
+
options ['start', 'end', 'center', 'baseline', 'stretch']
|
|
14
|
+
- image_size: (string) (default: '')
|
|
15
|
+
options ['small', 'large', 'extra-large']
|
|
16
|
+
- attributes (drupal attrs)
|
|
13
17
|
#}
|
|
14
18
|
|
|
15
|
-
{% set _items = items|default([]) %}
|
|
16
|
-
{% set _variant = variant|default('default-1-col') %}
|
|
17
19
|
{% set _title = title|default('') %}
|
|
18
20
|
{% set _title_tag = title_tag|default('h2') %}
|
|
21
|
+
{% set _title_link = title_link|default({}) %}
|
|
19
22
|
{% set _title_attributes = title_attributes ?: create_attribute() %}
|
|
23
|
+
{% set _items = items|default([]) %}
|
|
24
|
+
{% set _variant = variant|default('default-1-col') %}
|
|
20
25
|
{% set _alignment = alignment|default('') %}
|
|
26
|
+
{% set _image_size = image_size|default('') %}
|
|
21
27
|
{% set _link = link|default({}) %}
|
|
28
|
+
|
|
22
29
|
{% set _classes = ['bcl-listing', 'bcl-listing--' ~ _variant] %}
|
|
23
30
|
{% set _cards = [] %}
|
|
24
31
|
{% set _card_layout = {
|
|
@@ -40,6 +47,7 @@
|
|
|
40
47
|
{% include '@oe-bcl/bcl-heading/heading.html.twig' with {
|
|
41
48
|
title: _title,
|
|
42
49
|
title_tag: _title_tag,
|
|
50
|
+
title_link: _title_link,
|
|
43
51
|
title_attributes: _title_attributes,
|
|
44
52
|
} only %}
|
|
45
53
|
{% endif %}
|
|
@@ -47,27 +55,26 @@
|
|
|
47
55
|
{% if _items is not empty %}
|
|
48
56
|
{% for _card in _items %}
|
|
49
57
|
{% set _alignment_class = '' %}
|
|
50
|
-
{% set
|
|
51
|
-
{% set
|
|
52
|
-
{%
|
|
53
|
-
|
|
54
|
-
{%
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
{% set
|
|
58
|
-
{% set _card = _card|merge({image: _card.image|merge({
|
|
59
|
-
classes: _image_classes,
|
|
60
|
-
})}) %}
|
|
61
|
-
{% elseif _card.date is not empty %}
|
|
62
|
-
{% set _max_width = 'mw-col-date mb-3' %}
|
|
58
|
+
{% set _image_classes = _card.image.classes ?: '' %}
|
|
59
|
+
{% set _start_col_classes = 'bcl-card-start-col mb-3 mb-lg-0' %}
|
|
60
|
+
{% set _end_col_classes = 'col-12 col-md' %}
|
|
61
|
+
{% if _image_size is not empty %}
|
|
62
|
+
{% set _start_col_classes = _start_col_classes ~ ' bcl-size-' ~ _image_size %}
|
|
63
|
+
{% endif %}
|
|
64
|
+
{% if 'd-none' in _image_classes %}
|
|
65
|
+
{% set _start_col_classes = _start_col_classes ~ ' d-none d-md-block' %}
|
|
63
66
|
{% endif %}
|
|
64
67
|
{% if _alignment is not empty %}
|
|
65
68
|
{% set _alignment_class = ' align-self-' ~ _alignment %}
|
|
66
69
|
{% endif %}
|
|
67
70
|
{% set _card_classes = [] %}
|
|
68
71
|
{% set _card_attributes = card.attributes ? card.attributes : create_attribute() %}
|
|
72
|
+
{% set _card_title_attributes = card.title_attributes ? card.title_attributes : create_attribute() %}
|
|
73
|
+
{% set _card = _card|merge({
|
|
74
|
+
title_attributes: _card_title_attributes.addClass(['fs-5'])
|
|
75
|
+
}) %}
|
|
69
76
|
|
|
70
|
-
{% if _variant == 'default-1-col' %}
|
|
77
|
+
{% if _variant == 'default-1-col' or _variant == 'default-2-col' or _variant == 'default-3-col' %}
|
|
71
78
|
{% set _card_classes = [
|
|
72
79
|
'listing-item',
|
|
73
80
|
'border-bottom',
|
|
@@ -78,45 +85,18 @@
|
|
|
78
85
|
{% set _card = _card|merge({
|
|
79
86
|
horizontal: true,
|
|
80
87
|
extra_classes_body: 'p-0 pb-md-0 pb-3',
|
|
81
|
-
horizontal_grid: {
|
|
82
|
-
left_col_classes: 'col-md-3 col-lg-2 rounded ' ~ _max_width ~ _alignment_class,
|
|
83
|
-
right_col_classes: 'col-md-9 col-lg-10' ~ _alignment_class,
|
|
84
|
-
},
|
|
85
|
-
attributes: _card_attributes,
|
|
86
|
-
}) %}
|
|
87
|
-
{% endif %}
|
|
88
|
-
|
|
89
|
-
{% if _variant == 'default-2-col' or _variant == 'default-3-col' %}
|
|
90
|
-
{% set _card_classes = [
|
|
91
|
-
'listing-item',
|
|
92
|
-
'border-bottom',
|
|
93
|
-
'border-md-0',
|
|
94
|
-
'border-0',
|
|
95
|
-
] %}
|
|
96
|
-
{% set _card_attributes = _card_attributes.addClass(_card_classes) %}
|
|
97
|
-
{% set _card = _card|merge({
|
|
98
|
-
extra_classes_body: 'p-0 pb-md-0 pb-3',
|
|
99
|
-
horizontal: true,
|
|
100
88
|
attributes: _card_attributes,
|
|
89
|
+
horizontal_grid: {
|
|
90
|
+
left_col_classes: _start_col_classes ~ _alignment_class,
|
|
91
|
+
right_col_classes: _end_col_classes ~ _alignment_class,
|
|
92
|
+
}
|
|
101
93
|
}) %}
|
|
102
|
-
|
|
94
|
+
|
|
103
95
|
{% if _variant == 'default-2-col' %}
|
|
104
|
-
{% set _card = _card|merge({
|
|
105
|
-
horizontal_grid: {
|
|
106
|
-
left_col_classes: 'col-xl-3 col-md-5 ' ~ _max_width ~ _alignment_class,
|
|
107
|
-
right_col_classes: 'col-xl-9 col-md-7' ~ _alignment_class,
|
|
108
|
-
},
|
|
109
|
-
}) %}
|
|
110
96
|
{% set _card_layout = _card_layout|merge({
|
|
111
97
|
responsive_columns: 2,
|
|
112
98
|
}) %}
|
|
113
|
-
{%
|
|
114
|
-
{% set _card = _card|merge({
|
|
115
|
-
horizontal_grid: {
|
|
116
|
-
left_col_classes: 'col-lg-4 col-md-6 ' ~ _max_width ~ _alignment_class,
|
|
117
|
-
right_col_classes: 'col-lg-8 col-md-6' ~ _alignment_class,
|
|
118
|
-
},
|
|
119
|
-
}) %}
|
|
99
|
+
{% elseif _variant == 'default-3-col' %}
|
|
120
100
|
{% set _card_layout = _card_layout|merge({
|
|
121
101
|
attributes: _card_layout.attributes.addClass(['row-cols-md-2']),
|
|
122
102
|
responsive_columns: 3,
|
|
@@ -141,9 +121,19 @@
|
|
|
141
121
|
extra_classes_body: "pt-0",
|
|
142
122
|
}) %}
|
|
143
123
|
{% endif %}
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
124
|
+
{% set _card_layout = _card_layout|merge({
|
|
125
|
+
cols_extra_classes: 'mt-4-5',
|
|
126
|
+
}) %}
|
|
127
|
+
{% if _card.image is not empty %}
|
|
128
|
+
{% set _image_classes = _card.image.classes ?: '' %}
|
|
129
|
+
{% if not _alignment == 'center' %}
|
|
130
|
+
{% set _image_classes = _image_classes ? _image_classes ~ ' mb-3' : 'mb-3' %}
|
|
131
|
+
{% endif %}
|
|
132
|
+
{% set _card = _card|merge({image: _card.image|merge({
|
|
133
|
+
classes: _image_classes,
|
|
134
|
+
})}) %}
|
|
135
|
+
{% endif %}
|
|
136
|
+
|
|
147
137
|
{% endif %}
|
|
148
138
|
|
|
149
139
|
{% if _variant == 'highlight-2-col' or variant == 'highlight-3-col' %}
|
|
@@ -164,6 +154,15 @@
|
|
|
164
154
|
extra_classes_body: 'pt-0',
|
|
165
155
|
}) %}
|
|
166
156
|
{% endif %}
|
|
157
|
+
{% if _card.image is not empty %}
|
|
158
|
+
{% set _image_classes = _card.image.classes ?: '' %}
|
|
159
|
+
{% if not _alignment == 'center' %}
|
|
160
|
+
{% set _image_classes = _image_classes ? _image_classes ~ ' mb-3' : 'mb-3' %}
|
|
161
|
+
{% endif %}
|
|
162
|
+
{% set _card = _card|merge({image: _card.image|merge({
|
|
163
|
+
classes: _image_classes,
|
|
164
|
+
})}) %}
|
|
165
|
+
{% endif %}
|
|
167
166
|
{% set _card_layout = _card_layout|merge({ gutter: '4' }) %}
|
|
168
167
|
{% if variant == 'highlight-2-col' %}
|
|
169
168
|
{% set _card_layout = _card_layout|merge({ responsive_columns: 2 }) %}
|
package/package.json
CHANGED
|
@@ -2,15 +2,15 @@
|
|
|
2
2
|
"name": "@openeuropa/bcl-listing",
|
|
3
3
|
"author": "European Commission",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
|
-
"version": "0.
|
|
5
|
+
"version": "0.25.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-heading": "^0.
|
|
13
|
-
"@openeuropa/bcl-link": "^0.
|
|
11
|
+
"@openeuropa/bcl-card-layout": "^0.25.0",
|
|
12
|
+
"@openeuropa/bcl-heading": "^0.25.0",
|
|
13
|
+
"@openeuropa/bcl-link": "^0.25.0"
|
|
14
14
|
},
|
|
15
15
|
"repository": {
|
|
16
16
|
"type": "git",
|
|
@@ -26,5 +26,5 @@
|
|
|
26
26
|
"design-system",
|
|
27
27
|
"twig"
|
|
28
28
|
],
|
|
29
|
-
"gitHead": "
|
|
29
|
+
"gitHead": "f50c7dfeab8695bbb5c18d5f7d5304509512268a"
|
|
30
30
|
}
|