@openeuropa/bcl-mega-menu 0.3694.202508261220 → 0.3694.202508290300
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/mega-menu.html.twig +21 -13
- package/package.json +5 -5
package/mega-menu.html.twig
CHANGED
|
@@ -29,6 +29,7 @@
|
|
|
29
29
|
{% set _items = items|default([]) %}
|
|
30
30
|
{% set _back_button_label = back_button_label|default('Back') %}
|
|
31
31
|
{% set _icon_path = icon_path|default('') %}
|
|
32
|
+
{% set _menu_id = 'mega-menu-' ~ _id %}
|
|
32
33
|
|
|
33
34
|
{% if attributes is empty %}
|
|
34
35
|
{% set attributes = create_attribute() %}
|
|
@@ -36,7 +37,7 @@
|
|
|
36
37
|
|
|
37
38
|
{% set _classes = ['bcl-mega-menu'] %}
|
|
38
39
|
|
|
39
|
-
{% set attributes = attributes.
|
|
40
|
+
{% set attributes = attributes.addClass(_classes) %}
|
|
40
41
|
|
|
41
42
|
{% if _trigger.attributes is empty %}
|
|
42
43
|
{% set _trigger = _trigger|merge({
|
|
@@ -46,6 +47,8 @@
|
|
|
46
47
|
{% set _trigger = _trigger|merge({
|
|
47
48
|
attributes: _trigger.attributes.addClass(['dropdown-toggle', 'nav-link'])
|
|
48
49
|
.setAttribute('aria-expanded', 'false')
|
|
50
|
+
.setAttribute('aria-haspopup', 'menu')
|
|
51
|
+
.setAttribute('aria-controls', _menu_id)
|
|
49
52
|
.setAttribute('data-bs-toggle', 'dropdown')
|
|
50
53
|
.setAttribute('data-bs-auto-close', 'outside')
|
|
51
54
|
.setAttribute('id', _id)
|
|
@@ -64,7 +67,7 @@
|
|
|
64
67
|
{% include '@oe-bcl/bcl-button/button.html.twig' with _trigger|merge({
|
|
65
68
|
variant: 'link'
|
|
66
69
|
}) only %}
|
|
67
|
-
<
|
|
70
|
+
<nav id="{{ _menu_id }}" class="mega-menu-container dropdown-menu" aria-labelledby="{{ _id }}" aria-label="Main mega menu">
|
|
68
71
|
<div class="container position-relative">
|
|
69
72
|
<div class="d-lg-none back-button-block">
|
|
70
73
|
{% include '@oe-bcl/bcl-button/button.html.twig' with {
|
|
@@ -75,12 +78,12 @@
|
|
|
75
78
|
path: _icon_path,
|
|
76
79
|
name: "arrow-left",
|
|
77
80
|
},
|
|
78
|
-
attributes: create_attribute().addClass(['back-button'])
|
|
81
|
+
attributes: create_attribute().addClass(['back-button']).setAttribute('aria-label', 'Back to main menu')
|
|
79
82
|
} only %}
|
|
80
83
|
</div>
|
|
81
|
-
<div class="row
|
|
84
|
+
<div class="row">
|
|
82
85
|
{% if content_block is defined %}
|
|
83
|
-
<div class="col-md-12 col-xl-3">
|
|
86
|
+
<div class="col-md-12 col-xl-3 position-relative">
|
|
84
87
|
<div class="content-block">
|
|
85
88
|
{%- block content_block -%}
|
|
86
89
|
{{ _content_block }}
|
|
@@ -98,11 +101,14 @@
|
|
|
98
101
|
<p class="m-0">{% include '@oe-bcl/bcl-link/link.html.twig' with _content_link only %}</p>
|
|
99
102
|
{% endif %}
|
|
100
103
|
</div>
|
|
104
|
+
<div class="shadow-container">
|
|
105
|
+
<span class="shadow-bg"></span>
|
|
106
|
+
</div>
|
|
101
107
|
</div>
|
|
102
108
|
{% endif %}
|
|
103
|
-
<div class="col-md-12 col-xl-6
|
|
104
|
-
<div class="row
|
|
105
|
-
<div class="col-12 col-lg-4 col-xl
|
|
109
|
+
<div class="col-md-12 col-xl-6">
|
|
110
|
+
<div class="row g-0">
|
|
111
|
+
<div class="col-12 col-lg-4 col-xl mt-lg-3 mt-xl-0">
|
|
106
112
|
<div class="navigation-items" role="tablist" aria-orientation="vertical">
|
|
107
113
|
{% set _dropdown_panels = _dropdown_panels|default([]) %}
|
|
108
114
|
|
|
@@ -117,12 +123,12 @@
|
|
|
117
123
|
{% if _raw.see_all is defined and _raw.see_all is not empty %}
|
|
118
124
|
{% set _see_all_attr = (_raw.see_all.attributes is defined ? _raw.see_all.attributes : create_attribute()) %}
|
|
119
125
|
{% set _see_all = _raw.see_all|merge({
|
|
126
|
+
label: '<span>' ~ _raw.see_all.label ~ '</span>',
|
|
120
127
|
icon: {
|
|
121
128
|
name: 'arrow-right',
|
|
122
129
|
path: _icon_path,
|
|
123
|
-
size: 'fluid'
|
|
124
130
|
},
|
|
125
|
-
attributes: _see_all_attr.addClass(['see-all-button'])
|
|
131
|
+
attributes: _see_all_attr.addClass(['see-all-button']).setAttribute('aria-label', 'See all items in ‘' ~ _raw.trigger.label ~ '’')
|
|
126
132
|
}) %}
|
|
127
133
|
|
|
128
134
|
{% set _raw_items = _raw_items|merge([ _see_all ]) %}
|
|
@@ -162,7 +168,7 @@
|
|
|
162
168
|
{% endfor %}
|
|
163
169
|
</div>
|
|
164
170
|
</div>
|
|
165
|
-
<div class="col-12 col-lg-4 col-xl
|
|
171
|
+
<div class="col-12 col-lg-4 col-xl mt-lg-3 mt-xl-0">
|
|
166
172
|
<div class="sub-navigation-items tab-content">
|
|
167
173
|
{% for _panel in _dropdown_panels %}
|
|
168
174
|
{% if _items is not empty and _items is iterable %}
|
|
@@ -171,15 +177,17 @@
|
|
|
171
177
|
id="{{ _panel.id }}"
|
|
172
178
|
role="tabpanel"
|
|
173
179
|
aria-labelledby="{{ _panel.trigger_id }}"
|
|
180
|
+
tabindex="0"
|
|
174
181
|
>
|
|
175
182
|
<p class="panel-title">{{ _panel.title }}</p>
|
|
176
|
-
<ul class="list-unstyled m-0 position-relative
|
|
183
|
+
<ul class="list-unstyled m-0 position-relative">
|
|
177
184
|
{% for _item in _panel.items %}
|
|
178
185
|
{% if _item.attributes is empty %}
|
|
179
186
|
{% set _item = _item|merge({
|
|
180
187
|
attributes: create_attribute()
|
|
181
188
|
}) %}
|
|
182
189
|
{% endif %}
|
|
190
|
+
{% set _item_classes = [] %}
|
|
183
191
|
{% if _item.active %}
|
|
184
192
|
{% set _item_classes = _item_classes|merge(['active']) %}
|
|
185
193
|
{% endif %}
|
|
@@ -201,7 +209,7 @@
|
|
|
201
209
|
</div>
|
|
202
210
|
</div>
|
|
203
211
|
</div>
|
|
204
|
-
</
|
|
212
|
+
</nav>
|
|
205
213
|
</div>
|
|
206
214
|
|
|
207
215
|
{% endapply %}
|
package/package.json
CHANGED
|
@@ -2,15 +2,15 @@
|
|
|
2
2
|
"name": "@openeuropa/bcl-mega-menu",
|
|
3
3
|
"author": "European Commission",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
|
-
"version": "0.3694.
|
|
5
|
+
"version": "0.3694.202508290300",
|
|
6
6
|
"publishConfig": {
|
|
7
7
|
"access": "public"
|
|
8
8
|
},
|
|
9
9
|
"description": "OE - BCL mega menu",
|
|
10
10
|
"dependencies": {
|
|
11
|
-
"@openeuropa/bcl-button": "^0.3694.
|
|
12
|
-
"@openeuropa/bcl-dropdown": "^0.3694.
|
|
13
|
-
"@openeuropa/bcl-link": "^0.3694.
|
|
11
|
+
"@openeuropa/bcl-button": "^0.3694.202508290300",
|
|
12
|
+
"@openeuropa/bcl-dropdown": "^0.3694.202508290300",
|
|
13
|
+
"@openeuropa/bcl-link": "^0.3694.202508290300"
|
|
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": "18d93e77b10a08bfa7eae1c594b42144cb4b451b"
|
|
30
30
|
}
|