@openeuropa/bcl-theme-default 0.20.0 → 0.21.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.
Files changed (41) hide show
  1. package/css/oe-bcl-default.css +344 -0
  2. package/css/oe-bcl-default.css.map +1 -1
  3. package/css/oe-bcl-default.min.css +1 -1
  4. package/css/oe-bcl-default.min.css.map +1 -1
  5. package/icons/bcl-default-icons.svg +1 -1
  6. package/js/oe-bcl-default.bundle.js +242 -76
  7. package/js/oe-bcl-default.bundle.js.map +1 -1
  8. package/js/oe-bcl-default.bundle.min.js +1 -1
  9. package/js/oe-bcl-default.bundle.min.js.map +1 -1
  10. package/js/oe-bcl-default.esm.js +236 -75
  11. package/js/oe-bcl-default.esm.js.map +1 -1
  12. package/js/oe-bcl-default.esm.min.js +1 -1
  13. package/js/oe-bcl-default.esm.min.js.map +1 -1
  14. package/js/oe-bcl-default.umd.js +242 -76
  15. package/js/oe-bcl-default.umd.js.map +1 -1
  16. package/js/oe-bcl-default.umd.min.js +1 -1
  17. package/js/oe-bcl-default.umd.min.js.map +1 -1
  18. package/package.json +5 -5
  19. package/src/icons/icons.js +19 -0
  20. package/src/js/gallery/gallery.js +168 -0
  21. package/src/js/index.esm.js +2 -0
  22. package/src/js/index.umd.js +2 -0
  23. package/src/scss/_bcl-offcanvas.scss +7 -0
  24. package/src/scss/_carousel.scss +85 -0
  25. package/src/scss/_circular-progress-bar.scss +13 -11
  26. package/src/scss/_gallery.scss +262 -0
  27. package/src/scss/_pagination.scss +8 -0
  28. package/src/scss/_search-form.scss +4 -2
  29. package/src/scss/base/_utilities.scss +1 -0
  30. package/src/scss/oe-bcl-default.scss +3 -0
  31. package/templates/bcl-base-templates/listing-page.html.twig +13 -13
  32. package/templates/bcl-card/card.html.twig +35 -22
  33. package/templates/bcl-carousel/carousel.html.twig +26 -5
  34. package/templates/bcl-content-banner/content-banner.html.twig +30 -42
  35. package/templates/bcl-date-block/date-block.html.twig +29 -9
  36. package/templates/bcl-footer/footer.html.twig +3 -1
  37. package/templates/bcl-gallery/gallery.html.twig +203 -0
  38. package/templates/bcl-listing/listing.html.twig +1 -1
  39. package/templates/bcl-pagination/pagination.html.twig +123 -9
  40. package/templates/bcl-person/person.html.twig +44 -0
  41. package/templates/bcl-select/select.html.twig +10 -3
@@ -6,7 +6,16 @@
6
6
  - alignment (string) (default: '')
7
7
  - options ["end", "center"]
8
8
  - aria_label (string) (default: '')
9
- - enable_icon (boolean) (default: false)
9
+ - enable_prev_next_icon (boolean) (default: false)
10
+ - enable_first_last_icon (boolean) (default: true)
11
+ - first (object)
12
+ format: {
13
+ - path (string)
14
+ - label (string)
15
+ - disabled (boolean)
16
+ - aria_label (string)
17
+ - icon (Icon component)
18
+ }
10
19
  - prev (object)
11
20
  format: {
12
21
  - path (string)
@@ -23,6 +32,14 @@
23
32
  - aria_label (string)
24
33
  - icon (Icon component)
25
34
  }
35
+ - last (object)
36
+ format: {
37
+ - path (string)
38
+ - label (string)
39
+ - disabled (boolean)
40
+ - aria_label (string)
41
+ - icon (Icon component)
42
+ }
26
43
  - items (array of objects)
27
44
  format: [
28
45
  {
@@ -31,16 +48,21 @@
31
48
  - disabled (boolean)
32
49
  - active (boolean)
33
50
  }
51
+ - icon_path (string) (default: '')
34
52
  - extra_classes (string) (default: '')
35
53
  #}
36
54
 
37
55
  {% set _size = size|default('') %}
38
56
  {% set _alignment = alignment|default('') %}
39
57
  {% set _aria_label = aria_label|default('') %}
40
- {% set _enable_icon = enable_icon|default(false) %}
58
+ {% set _enable_prev_next_icon = enable_prev_next_icon|default(false) %}
59
+ {% set _enable_first_last_icon = enable_first_last_icon ?? true %}
41
60
  {% set _items = items|default([]) %}
61
+ {% set _first = first|default({}) %}
42
62
  {% set _next = next|default({}) %}
43
63
  {% set _prev = prev|default({}) %}
64
+ {% set _last = last|default({}) %}
65
+ {% set _icon_path = icon_path|default({}) %}
44
66
  {% set _classes = 'pagination' %}
45
67
  {% if _size is not empty %}
46
68
  {% set _classes = _classes ~ ' pagination-' ~ _size %}
@@ -53,6 +75,8 @@
53
75
  {% set attributes = create_attribute() %}
54
76
  {% endif %}
55
77
 
78
+ {% set attributes = attributes.setAttribute('role', 'navigation') %}
79
+
56
80
  {% if _aria_label is not empty %}
57
81
  {% set attributes = attributes.setAttribute('aria-label', aria_label) %}
58
82
  {% endif %}
@@ -64,6 +88,43 @@
64
88
  {{ attributes }}
65
89
  >
66
90
  <ul class="{{ _classes }}">
91
+ {% if _first is not empty %}
92
+ {% set _first_class = 'page-item' %}
93
+ {% if _first.disabled %}
94
+ {% set _first_class = _first_class ~ ' disabled' %}
95
+ {% endif %}
96
+ <li class="{{ _first_class }}">
97
+ <a
98
+ class="page-link"
99
+ href="{{ _first.path }}"
100
+ {% if _first.disabled %}
101
+ tabindex="-1"
102
+ aria-disabled="true"
103
+ {% endif %}
104
+ {%- if _first.aria_label -%}
105
+ aria-label="{{ _first.aria_label }}"
106
+ {%- endif -%}
107
+ >
108
+ {%- if _enable_first_last_icon -%}
109
+ {%- if _first.icon is not empty -%}
110
+ {%- include '@oe-bcl/bcl-icon/icon.html.twig' with _first.icon only -%}
111
+ {%- else -%}
112
+ {%- if _icon_path is not empty -%}
113
+ {% include '@oe-bcl/bcl-icon/icon.html.twig' with {
114
+ name: "chevron-double-left",
115
+ size: "fluid",
116
+ path: _icon_path,
117
+ } only %}
118
+ {%- else -%}
119
+ <span aria-hidden="true">&laquo;</span>
120
+ {%- endif -%}
121
+ {%- endif -%}
122
+ {%- else -%}
123
+ {{- _first.label -}}
124
+ {%- endif -%}
125
+ </a>
126
+ </li>
127
+ {% endif %}
67
128
  {% if _prev is not empty %}
68
129
  {% set _prev_class = 'page-item' %}
69
130
  {% if _prev.disabled %}
@@ -81,14 +142,22 @@
81
142
  aria-label="{{ _prev.aria_label }}"
82
143
  {%- endif -%}
83
144
  >
84
- {%- if _enable_icon -%}
145
+ {%- if _enable_prev_next_icon -%}
85
146
  {%- if _prev.icon is not empty -%}
86
- {%- include '@oe-bcl/bcl-icon/icon.html.twig' with _prev.icon only -%}
147
+ {%- include '@oe-bcl/bcl-icon/icon.html.twig' with _prev.icon only -%}
87
148
  {%- else -%}
88
- <span aria-hidden="true">&laquo;</span>
149
+ {%- if _icon_path is not empty -%}
150
+ {% include '@oe-bcl/bcl-icon/icon.html.twig' with {
151
+ name: "chevron-left",
152
+ size: "fluid",
153
+ path: _icon_path,
154
+ } only %}
155
+ {%- else -%}
156
+ <span aria-hidden="true">&lsaquo;</span>
157
+ {%- endif -%}
89
158
  {%- endif -%}
90
159
  {%- else -%}
91
- {{- _prev.label -}}
160
+ {{- _prev.label -}}
92
161
  {%- endif -%}
93
162
  </a>
94
163
  </li>
@@ -136,14 +205,59 @@
136
205
  aria-label="{{ _next.aria_label }}"
137
206
  {%- endif -%}
138
207
  >
139
- {%- if _enable_icon -%}
208
+ {%- if _enable_prev_next_icon -%}
140
209
  {%- if _next.icon is not empty -%}
141
- {%- include '@oe-bcl/bcl-icon/icon.html.twig' with _next.icon only -%}
210
+ {%- include '@oe-bcl/bcl-icon/icon.html.twig' with _next.icon only -%}
142
211
  {%- else -%}
143
- <span aria-hidden="true">&raquo;</span>
212
+ {%- if _icon_path is not empty -%}
213
+ {% include '@oe-bcl/bcl-icon/icon.html.twig' with {
214
+ name: "chevron-right",
215
+ size: "fluid",
216
+ path: _icon_path,
217
+ } only %}
218
+ {%- else -%}
219
+ <span aria-hidden="true">&rsaquo;</span>
220
+ {%- endif -%}
144
221
  {%- endif -%}
145
222
  {%- else -%}
146
223
  {{- _next.label -}}
224
+ {%- endif -%}
225
+ </a>
226
+ </li>
227
+ {% endif %}
228
+ {% if _last is not empty %}
229
+ {% set _last_class = 'page-item' %}
230
+ {% if _last.disabled %}
231
+ {% set _last_class = _last_class ~ ' disabled' %}
232
+ {% endif %}
233
+ <li class="{{ _last_class }}">
234
+ <a
235
+ class="page-link"
236
+ href="{{ _last.path }}"
237
+ {% if _last.disabled %}
238
+ tabindex="-1"
239
+ aria-disabled="true"
240
+ {% endif %}
241
+ {%- if _last.aria_label -%}
242
+ aria-label="{{ _last.aria_label }}"
243
+ {%- endif -%}
244
+ >
245
+ {%- if _enable_first_last_icon -%}
246
+ {%- if _last.icon is not empty -%}
247
+ {%- include '@oe-bcl/bcl-icon/icon.html.twig' with _last.icon only -%}
248
+ {%- else -%}
249
+ {%- if _icon_path is not empty -%}
250
+ {% include '@oe-bcl/bcl-icon/icon.html.twig' with {
251
+ name: "chevron-double-right",
252
+ size: "fluid",
253
+ path: _icon_path,
254
+ } only %}
255
+ {%- else -%}
256
+ <span aria-hidden="true">&raquo;</span>
257
+ {%- endif -%}
258
+ {%- endif -%}
259
+ {%- else -%}
260
+ {{- _last.label -}}
147
261
  {%- endif -%}
148
262
  </a>
149
263
  </li>
@@ -0,0 +1,44 @@
1
+ {% extends '@oe-bcl/bcl-base-templates/content-type.html.twig' %}
2
+
3
+ {% block sidebar %}
4
+ {% include '@oe-bcl/bcl-inpage-navigation/inpage-navigation.html.twig' with sidebar only %}
5
+ {% endblock %}
6
+
7
+ {% block content %}
8
+ {% if social_media.main_title is not empty %}
9
+ <h3
10
+ class="fw-bold mb-4"
11
+ >{{- social_media.main_title -}}</h3>
12
+ {% endif %}
13
+ {% if social_media.links is defined and social_media.links is not empty %}
14
+ <div class="mb-4-5">
15
+ {% for link in social_media.links %}
16
+ {% include '@oe-bcl/bcl-link/link.html.twig' with link only %}
17
+ {% endfor %}
18
+ </div>
19
+ {% endif %}
20
+
21
+ {% if information.main_title is not empty %}
22
+ <h3
23
+ class="fw-bold mb-4"
24
+ >{{- information.main_title -}}</h3>
25
+ {% endif %}
26
+ {% if information.content is not empty %}
27
+ <div class="mb-4-5">
28
+ {{- information.content -}}
29
+ </div>
30
+ {% endif %}
31
+
32
+ {% if files.main_title is not empty %}
33
+ <h3
34
+ class="fw-bold mb-4"
35
+ >{{- files.main_title -}}</h3>
36
+ {% endif %}
37
+ {% if files.listing is defined and files.listing is not empty %}
38
+ <div class="mb-4-5">
39
+ {% for file in files.listing %}
40
+ {% include '@oe-bcl/bcl-file/file.html.twig' with file only %}
41
+ {% endfor %}
42
+ </div>
43
+ {% endif %}
44
+ {% endblock %}
@@ -4,6 +4,7 @@
4
4
  Parameters:
5
5
  - "id" (string) (default: '')
6
6
  - "label" (string) (default: '')
7
+ - "label_extra_classes" (string) (default: '')
7
8
  - "hidden_label" (boolean) (default: false)
8
9
  - "helper_text" (string) (default: '')
9
10
  - "helper_text_id" (string) (default: '')
@@ -16,6 +17,7 @@
16
17
  - "multiple" (boolean) (default: false)
17
18
  - "options": (array of objects with value and label keys) (default: [])
18
19
  - "aria_label": (string) (default: '')
20
+ - "clean_class": (boolean) (default: false) - removes 'form-select' class
19
21
  #}
20
22
 
21
23
  {% set _classes = ['form-select'] %}
@@ -32,11 +34,12 @@
32
34
  {% set _helper_text = helper_text|default('') %}
33
35
  {% set _helper_text_id = helper_text_id|default('') %}
34
36
  {% set _label = label|default('') %}
35
- {% set _extra_classes = extra_classes|default('') %}
37
+ {% set _label_extra_classes = label_extra_classes|default('') %}
36
38
  {% set _clean_class = clean_class|default(false) %}
37
- {% set _label_class = 'form-label' %}
38
39
  {% set _hidden_label = hidden_label|default(false) %}
39
40
 
41
+ {% set _label_class = 'form-label' %}
42
+
40
43
  {% if _clean_class %}
41
44
  {% set _classes = [] %}
42
45
  {% endif %}
@@ -53,6 +56,10 @@
53
56
  {% set attributes = create_attribute() %}
54
57
  {% endif %}
55
58
 
59
+ {% if _label_extra_classes is not empty %}
60
+ {% set _label_class = _label_class ~ ' ' ~ _label_extra_classes %}
61
+ {% endif %}
62
+
56
63
  {% if _aria_label is not empty %}
57
64
  {% set attributes = attributes.setAttribute('aria-label', _aria_label) %}
58
65
  {% endif %}
@@ -78,7 +85,7 @@
78
85
  {% endif %}
79
86
 
80
87
  {% if _classes is not empty %}
81
- {% set attributes = attributes.addClass(_classes) %}
88
+ {% set attributes = attributes.addClass(_classes) %}
82
89
  {% endif %}
83
90
 
84
91
  {% if _label is not empty %}