@ecl/mega-menu 5.0.0-alpha.1 → 5.0.0-alpha.11
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/README.md +11 -8
- package/mega-menu-featured-item.html.twig +109 -0
- package/mega-menu-item.html.twig +66 -65
- package/mega-menu.html.twig +27 -10
- package/mega-menu.js +167 -108
- package/mega-menu.scss +370 -99
- package/package.json +9 -8
package/README.md
CHANGED
|
@@ -10,18 +10,25 @@ npm install --save @ecl/mega-menu
|
|
|
10
10
|
|
|
11
11
|
- **"id"** (string) (default: random): Unique id
|
|
12
12
|
- **"toggle"**: (associative array) (default: {}): Toggle (hamburger) button, using ECL button structure
|
|
13
|
-
- **"title"** (string) (default: ''): Used as the inner container aria-label value
|
|
14
13
|
- **"close"**: (associative array) (default: {}): Object, using ECL Button structure
|
|
15
14
|
- **"aria_label"** (string): (default: ''): Main list aria label
|
|
16
15
|
- **"second_level_aria_label"** (string): (default: ''): Second level list aria label
|
|
17
16
|
- **"third_level_aria_label"** (string): (default: ''): Third level list aria label
|
|
18
17
|
- **"back_label"** (string): (default: ''): Back button label
|
|
19
|
-
- **"
|
|
18
|
+
- **featured_priority"** (string) (default: secondary) Can be primary otherwise: determines which featured panel will be visible
|
|
20
19
|
- **"items"**: (array) (default: []): The menu items - format: [
|
|
21
20
|
{
|
|
22
21
|
"label": (string) (default: '')
|
|
23
22
|
"path": (string) (default: '')
|
|
24
23
|
"external": (boolean) (optional)
|
|
24
|
+
"promotional" (boolean) (default: false) Promotional menu item, styles can be custommized defining:
|
|
25
|
+
--ecl-mega-menu-item-promotional-bg
|
|
26
|
+
--ecl-mega-menu-item-promotional-hover-bg
|
|
27
|
+
--ecl-mega-menu-item-promotional-focus-bg
|
|
28
|
+
--ecl-mega-menu-item-promotional-outline-color
|
|
29
|
+
--ecl-mega-menu-item-promotional-text-color
|
|
30
|
+
--ecl-mega-menu-item-promotional-hover-text-color
|
|
31
|
+
--ecl-mega-menu-item-promotional-focus-text-color
|
|
25
32
|
"sr_external" (string) (default: '') Additional label for the external icon
|
|
26
33
|
"container": (string) Empty container to be filled in with content
|
|
27
34
|
"info" (object) (default: {}) Info column
|
|
@@ -31,8 +38,8 @@ npm install --save @ecl/mega-menu
|
|
|
31
38
|
"featured" (object) (optional) {
|
|
32
39
|
"title": (string)
|
|
33
40
|
"content": (string)
|
|
34
|
-
"items": (associative array)
|
|
35
|
-
}
|
|
41
|
+
"items": (associative array) Array of items with image, link and description
|
|
42
|
+
},
|
|
36
43
|
"children": (associative array) (optional): [
|
|
37
44
|
{
|
|
38
45
|
"label": (string) (default: '')
|
|
@@ -56,7 +63,6 @@ npm install --save @ecl/mega-menu
|
|
|
56
63
|
<!-- prettier-ignore -->
|
|
57
64
|
```twig
|
|
58
65
|
{% include '@ecl/mega-menu/mega-menu.html.twig' with {
|
|
59
|
-
title: 'Menu',
|
|
60
66
|
toggle: {
|
|
61
67
|
link: {
|
|
62
68
|
label: 'Menu',
|
|
@@ -64,7 +70,6 @@ npm install --save @ecl/mega-menu
|
|
|
64
70
|
},
|
|
65
71
|
icon:
|
|
66
72
|
{
|
|
67
|
-
path: '/icons.svg',
|
|
68
73
|
name: 'hamburger',
|
|
69
74
|
size: 'm',
|
|
70
75
|
},
|
|
@@ -73,13 +78,11 @@ npm install --save @ecl/mega-menu
|
|
|
73
78
|
close: {
|
|
74
79
|
label: 'Close',
|
|
75
80
|
icon: {
|
|
76
|
-
path: '/icons.svg',
|
|
77
81
|
name: 'close',
|
|
78
82
|
size: 'm',
|
|
79
83
|
},
|
|
80
84
|
},
|
|
81
85
|
back_label: 'Back',
|
|
82
|
-
icon_path: '/icons.svg',
|
|
83
86
|
items: [
|
|
84
87
|
{
|
|
85
88
|
label: "Menu item",
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
{% apply spaceless %}
|
|
2
|
+
|
|
3
|
+
{#
|
|
4
|
+
Parameters:
|
|
5
|
+
- "label" (string) Label of the textual link
|
|
6
|
+
- "path" (string) Path or Url for the href of the link
|
|
7
|
+
- "description" (string) Description of the link or the image
|
|
8
|
+
- "icon_path": Path to the icons sprite
|
|
9
|
+
- "picture" (associative array) ECL picture
|
|
10
|
+
- "img" (associative array) (default: {}):
|
|
11
|
+
- "src" (string) (default: ''): Path to the image
|
|
12
|
+
- "alt" (string) (default: ''): Alt text, required in case of a link with only an image
|
|
13
|
+
- "sources" (array) (default: []): format: [
|
|
14
|
+
{
|
|
15
|
+
"src" (string) (default: ''): Path to the source image
|
|
16
|
+
"media" (string) (default: ''): Media condition to use this source. Could be a breakpoint ('s', 'm', 'l', 'xl') or a free string.
|
|
17
|
+
"type" (string) (default: ''): Type of this source
|
|
18
|
+
},
|
|
19
|
+
...
|
|
20
|
+
]
|
|
21
|
+
- "extra_classes" (optional) (string) (default: '') Extra classes (space separated) for the nav element
|
|
22
|
+
- "extra_attributes" (optional) (array) (default: []) Extra attributes for the nav element
|
|
23
|
+
- "name" (string) Attribute name, eg. 'data-test'
|
|
24
|
+
- "value" (optional) (string) Attribute value, eg: 'data-test-1'
|
|
25
|
+
#}
|
|
26
|
+
|
|
27
|
+
{# Internal properties #}
|
|
28
|
+
|
|
29
|
+
{% set _item_css_class = 'ecl-mega-menu__featured-list__item' %}
|
|
30
|
+
{% set _css_class = 'ecl-mega-menu__featured-link' %}
|
|
31
|
+
{% set _label = label|default('') %}
|
|
32
|
+
{% set _description = description|default('') %}
|
|
33
|
+
{% set _path = path|default('') %}
|
|
34
|
+
{% set _picture = picture|default({}) %}
|
|
35
|
+
{% set _icon_path = icon_path|default('') %}
|
|
36
|
+
{% set _external = external|default(false) %}
|
|
37
|
+
{% set _sr_external = sr_external|default(false) %}
|
|
38
|
+
{% set _extra_attributes = 'data-ecl-mega-menu-featured-link' %}
|
|
39
|
+
|
|
40
|
+
{# Internal logic - Process properties #}
|
|
41
|
+
|
|
42
|
+
{% if extra_classes is defined and extra_classes is not empty %}
|
|
43
|
+
{% set _css_class = _css_class ~ ' ' ~ extra_classes %}
|
|
44
|
+
{% endif %}
|
|
45
|
+
|
|
46
|
+
{% if extra_attributes is defined and extra_attributes is not empty and extra_attributes is iterable %}
|
|
47
|
+
{% for attr in extra_attributes %}
|
|
48
|
+
{% if attr.value is defined %}
|
|
49
|
+
{% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name|e('html_attr') ~ '="' ~ attr.value|e('html_attr') ~ '"' %}
|
|
50
|
+
{% else %}
|
|
51
|
+
{% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name|e('html_attr') %}
|
|
52
|
+
{% endif %}
|
|
53
|
+
{% endfor %}
|
|
54
|
+
{% endif %}
|
|
55
|
+
|
|
56
|
+
{% set _picture_markup = '' %}
|
|
57
|
+
{% if _picture is not empty %}
|
|
58
|
+
{% set _picture_markup %}
|
|
59
|
+
{% include '@ecl/picture/picture.html.twig' with {
|
|
60
|
+
picture: _picture,
|
|
61
|
+
extra_classes: 'ecl-mega-menu__featured-picture',
|
|
62
|
+
extra_image_classes: 'ecl-mega-menu__featured-image',
|
|
63
|
+
} only %}
|
|
64
|
+
{% endset %}
|
|
65
|
+
{% endif %}
|
|
66
|
+
|
|
67
|
+
{% if _label is not empty and _picture_markup is not empty %}
|
|
68
|
+
{% set _item_css_class = _item_css_class ~ ' ecl-mega-menu__featured-list__item--combo' %}
|
|
69
|
+
{% endif %}
|
|
70
|
+
{% if _picture is not empty and _path is empty %}
|
|
71
|
+
{% set _item_css_class = _item_css_class ~ ' ecl-mega-menu__featured-list__item--image-only' %}
|
|
72
|
+
{% endif %}
|
|
73
|
+
|
|
74
|
+
<li class="{{ _item_css_class }}">
|
|
75
|
+
{# Link with image #}
|
|
76
|
+
{% if _path is not empty and _picture is not empty %}
|
|
77
|
+
<a
|
|
78
|
+
class="ecl-link ecl-link--standalone {{ _css_class }}"
|
|
79
|
+
href="{{ _path }}"
|
|
80
|
+
{{ _extra_attributes|raw }}
|
|
81
|
+
>
|
|
82
|
+
{{- _picture_markup -}}{{- _label -}}
|
|
83
|
+
</a>
|
|
84
|
+
{# simple image #}
|
|
85
|
+
{% elseif _picture is not empty %}
|
|
86
|
+
{{- _picture_markup -}}
|
|
87
|
+
{# textual link #}
|
|
88
|
+
{% elseif _path is not empty and _label is not empty %}
|
|
89
|
+
{% include '@ecl/link/link.html.twig' with {
|
|
90
|
+
link: {
|
|
91
|
+
path: _path,
|
|
92
|
+
type: 'standalone',
|
|
93
|
+
icon_path: _icon_path,
|
|
94
|
+
external: _external,
|
|
95
|
+
sr_external: _sr_external,
|
|
96
|
+
label: _label,
|
|
97
|
+
},
|
|
98
|
+
extra_attributes: extra_attributes|default([])|merge([{ name: 'data-ecl-mega-menu-featured-link' }]),
|
|
99
|
+
extra_classes: _css_class,
|
|
100
|
+
} only %}
|
|
101
|
+
{% endif %}
|
|
102
|
+
{% if _description is not empty %}
|
|
103
|
+
<div class="ecl-mega-menu__featured-list__item-description">
|
|
104
|
+
{{- _description -}}
|
|
105
|
+
</div>
|
|
106
|
+
{% endif %}
|
|
107
|
+
</li>
|
|
108
|
+
|
|
109
|
+
{% endapply %}
|
package/mega-menu-item.html.twig
CHANGED
|
@@ -3,10 +3,17 @@
|
|
|
3
3
|
{#
|
|
4
4
|
Parameters:
|
|
5
5
|
- "id" (string) Unique id for this item. Needed for accessibility. Generated automatically
|
|
6
|
-
- "icon_path" (string) Path to the icon sprite
|
|
7
6
|
- "item" (object)
|
|
8
7
|
- "label" (string) Label of the menu link
|
|
9
8
|
- "external" (boolean) External link
|
|
9
|
+
- "promotional" (boolean) (default: false) Promotional menu item, styles can be custommized defining:
|
|
10
|
+
--ecl-mega-menu-item-promotional-bg
|
|
11
|
+
--ecl-mega-menu-item-promotional-hover-bg
|
|
12
|
+
--ecl-mega-menu-item-promotional-focus-bg
|
|
13
|
+
--ecl-mega-menu-item-promotional-outline-color
|
|
14
|
+
--ecl-mega-menu-item-promotional-text-color
|
|
15
|
+
--ecl-mega-menu-item-promotional-hover-text-color
|
|
16
|
+
--ecl-mega-menu-item-promotional-focus-text-color
|
|
10
17
|
- "sr_external" (string) (default: '') Additional label for the external icon
|
|
11
18
|
- "path" (string) Href of the menu link
|
|
12
19
|
- "extra_attributes" (optional) (array) (default: []) Extra attributes for link
|
|
@@ -20,9 +27,12 @@
|
|
|
20
27
|
- "title" (string) Title of the featured panel
|
|
21
28
|
- "content" (string) Content of the featured panel
|
|
22
29
|
- "items" (associative array) Array of items
|
|
30
|
+
- "picture": (object) (default: {}) Object of type Picture
|
|
23
31
|
- "path" (string) Path or Url for the href
|
|
24
32
|
- "label" (string) Label of the item
|
|
33
|
+
- "description" (string) Description for the item
|
|
25
34
|
- "external" (boolean) Whether the link is external
|
|
35
|
+
- "icon_path" (string) Path to the icons sprite
|
|
26
36
|
- "sr_external" (string) (default: '') Additional label for the external icon
|
|
27
37
|
- "extra_attributes" (array)
|
|
28
38
|
- "name" (string) Attribute name, eg. 'data-test'
|
|
@@ -50,9 +60,9 @@
|
|
|
50
60
|
{% set _menu_sublink_attribute = 'data-ecl-mega-menu-sublink' %}
|
|
51
61
|
{% set _menu_list_item_attributes = 'data-ecl-mega-menu-item' %}
|
|
52
62
|
{% set _menu_list_item_class = 'ecl-mega-menu__item' %}
|
|
53
|
-
{% set _icon_path = icon_path|default('') %}
|
|
54
63
|
{% set _featured = _item.featured|default({}) %}
|
|
55
64
|
{% set _info = _item.info|default({}) %}
|
|
65
|
+
{% set _promotional = _item.promotional|default(false) %}
|
|
56
66
|
{% set _see_all = see_all|default(false) %}
|
|
57
67
|
{% set _sublist_class = 'ecl-mega-menu__sublist' %}
|
|
58
68
|
{% set _mega_class = 'ecl-mega-menu__mega' %}
|
|
@@ -66,16 +76,27 @@
|
|
|
66
76
|
{% if _item.container is defined and _item.container is not empty %}
|
|
67
77
|
{% set _can_be_external = false %}
|
|
68
78
|
{% set _menu_list_item_class = _menu_list_item_class ~ ' ecl-mega-menu__item--has-container' %}
|
|
69
|
-
{% set _menu_list_item_attributes = _menu_list_item_attributes ~ ' data-ecl-has-container aria-haspopup' %}
|
|
79
|
+
{% set _menu_list_item_attributes = _menu_list_item_attributes ~ ' data-ecl-has-container aria-haspopup="true"' %}
|
|
70
80
|
{% endif %}
|
|
71
81
|
|
|
72
82
|
{% if _item.children is defined and _item.children is not empty and _item.children is iterable %}
|
|
73
|
-
{% set _menu_list_item_attributes = _menu_list_item_attributes ~ ' data-ecl-has-children aria-haspopup' %}
|
|
83
|
+
{% set _menu_list_item_attributes = _menu_list_item_attributes ~ ' data-ecl-has-children aria-haspopup="true"' %}
|
|
74
84
|
{% set _menu_list_item_class = _menu_list_item_class ~ ' ecl-mega-menu__item--has-children' %}
|
|
75
85
|
{% endif %}
|
|
76
86
|
|
|
87
|
+
{% if _item.level|default(0) < 2 and _featured is not empty %}
|
|
88
|
+
{% set _mega_class = _mega_class ~ ' ecl-mega-menu__mega--has-featured' %}
|
|
89
|
+
{% endif %}
|
|
90
|
+
|
|
77
91
|
{% if _item.level == 2 %}
|
|
78
92
|
{% set _mega_class = _mega_class ~ ' ecl-mega-menu__mega--level-2' %}
|
|
93
|
+
{% if _item.children is empty %}
|
|
94
|
+
{% set _mega_class = _mega_class ~ ' ecl-mega-menu-featured-only' %}
|
|
95
|
+
{% endif %}
|
|
96
|
+
{% endif %}
|
|
97
|
+
|
|
98
|
+
{% if _promotional %}
|
|
99
|
+
{% set _menu_list_item_class = _menu_list_item_class ~ ' ecl-mega-menu__item--promotional' %}
|
|
79
100
|
{% endif %}
|
|
80
101
|
|
|
81
102
|
{% if (_item.children is defined and _item.children is not empty and _item.children is iterable) or _item.container is not empty %}
|
|
@@ -83,13 +104,11 @@
|
|
|
83
104
|
{% set _icon = [{
|
|
84
105
|
name: 'corner-arrow',
|
|
85
106
|
transform: 'rotate-90',
|
|
86
|
-
path: _icon_path,
|
|
87
107
|
size: '2xs',
|
|
88
108
|
},
|
|
89
109
|
{
|
|
90
110
|
name: 'arrow-left',
|
|
91
111
|
transform: 'flip-horizontal',
|
|
92
|
-
path: _icon_path,
|
|
93
112
|
size: 's',
|
|
94
113
|
}] %}
|
|
95
114
|
{% endif %}
|
|
@@ -107,7 +126,6 @@
|
|
|
107
126
|
{% include '@ecl/button/button.html.twig' with {
|
|
108
127
|
type: 'button',
|
|
109
128
|
label: _item.label,
|
|
110
|
-
icon_path: _icon_path,
|
|
111
129
|
icon_position: 'after',
|
|
112
130
|
icon: _icon,
|
|
113
131
|
extra_classes: _menu_link_class,
|
|
@@ -119,7 +137,6 @@
|
|
|
119
137
|
type: 'standalone',
|
|
120
138
|
label: _item.label,
|
|
121
139
|
path: _item.path,
|
|
122
|
-
icon_path: _icon_path,
|
|
123
140
|
external: _can_be_external ? _item.external|default(false),
|
|
124
141
|
sr_external: _item.sr_external|default(''),
|
|
125
142
|
icon_position: 'after',
|
|
@@ -144,7 +161,7 @@
|
|
|
144
161
|
</div>
|
|
145
162
|
</div>
|
|
146
163
|
{# Children #}
|
|
147
|
-
{%- elseif _item.children is defined and _item.children is not empty and _item.children is iterable -%}
|
|
164
|
+
{%- elseif (_item.children is defined and _item.children is not empty and _item.children is iterable) or _featured is not empty -%}
|
|
148
165
|
{% set _sublist_aria_label = '' %}
|
|
149
166
|
{% if _item.level|default(0) < 2 %}
|
|
150
167
|
{% set _sublist_aria_label = second_level_aria_label|default('') %}
|
|
@@ -176,34 +193,14 @@
|
|
|
176
193
|
{%- if _info.content is not empty -%}
|
|
177
194
|
<div class="ecl-mega-menu__info-content">{{ _info.content }}</div>
|
|
178
195
|
{%- endif -%}
|
|
179
|
-
{%- if _info.link is not empty -%}
|
|
180
|
-
{% set _path = (_info.link.link.path is not empty) ? _info.link.link.path : _item.path %}
|
|
181
|
-
{% include '@ecl/link/link.html.twig' with _info.link|merge({
|
|
182
|
-
link: _info.link.link|merge({
|
|
183
|
-
type: 'standalone',
|
|
184
|
-
path: _path,
|
|
185
|
-
}),
|
|
186
|
-
icon: {
|
|
187
|
-
name: 'arrow-left',
|
|
188
|
-
transform: 'flip-horizontal',
|
|
189
|
-
path: _icon_path,
|
|
190
|
-
size: 'xs',
|
|
191
|
-
},
|
|
192
|
-
extra_classes: _info.link.extra_classes|default('') ~ ' ecl-mega-menu__info-link',
|
|
193
|
-
extra_attributes: [{
|
|
194
|
-
name: 'aria-describedby',
|
|
195
|
-
value: _info_title_id,
|
|
196
|
-
}],
|
|
197
|
-
}) only %}
|
|
198
|
-
{%- endif -%}
|
|
199
196
|
</div>
|
|
200
|
-
|
|
201
197
|
</div>
|
|
202
198
|
{% endif %}
|
|
203
199
|
<div
|
|
204
200
|
class="{{ _mega_class }}"
|
|
205
201
|
data-ecl-mega-menu-mega
|
|
206
202
|
>
|
|
203
|
+
{% if _item.children is defined and _item.children is not empty and _item.children is iterable %}
|
|
207
204
|
<ul
|
|
208
205
|
class="{{ _sublist_class }}"
|
|
209
206
|
{%- if _sublist_aria_label -%}
|
|
@@ -222,12 +219,12 @@
|
|
|
222
219
|
{% set _sublink_attrs = child.extra_attributes|default([])|merge([
|
|
223
220
|
{ name: _menu_sublink_attribute },
|
|
224
221
|
]) %}
|
|
225
|
-
{% if child.children is defined and child.children is not empty %}
|
|
222
|
+
{% if (child.children is defined and child.children is not empty) or child.featured is not empty %}
|
|
226
223
|
{% set _sublink_attrs = _sublink_attrs|merge([
|
|
227
224
|
{ name: 'aria-expanded', value: 'false' },
|
|
228
225
|
]) %}
|
|
229
226
|
{% endif %}
|
|
230
|
-
{% if child.children is defined and child.children is not empty and _item.level|default(0) < 2 %}
|
|
227
|
+
{% if (child.children is defined and child.children is not empty and _item.level|default(0) < 2) or child.featured is not empty %}
|
|
231
228
|
{%- if child.see_all and child.see_all_label is not empty -%}
|
|
232
229
|
{% if child.sublink_id is empty %}
|
|
233
230
|
{% set _sublink_id = 'ecl-mega-menu-sublink-' ~ random() %}
|
|
@@ -241,20 +238,18 @@
|
|
|
241
238
|
{% set _icon = {
|
|
242
239
|
name: 'corner-arrow',
|
|
243
240
|
transform: 'rotate-90',
|
|
244
|
-
path: _icon_path,
|
|
245
241
|
size: '2xs',
|
|
246
242
|
} %}
|
|
247
243
|
{% endif %}
|
|
248
244
|
<li
|
|
249
245
|
class="{{ _subitem_class }}"
|
|
250
|
-
{{
|
|
246
|
+
{{ ' ' ~ _subitem_attrs|raw }}
|
|
251
247
|
>
|
|
252
|
-
{%- if child.children is defined and child.children is not empty -%}
|
|
248
|
+
{%- if (child.children is defined and child.children is not empty) or child.featured is not empty -%}
|
|
253
249
|
{# Children, 2nd level #}
|
|
254
250
|
{% include '@ecl/button/button.html.twig' with {
|
|
255
251
|
type: 'button',
|
|
256
252
|
label: child.label,
|
|
257
|
-
icon_path: _icon_path,
|
|
258
253
|
icon: _icon,
|
|
259
254
|
extra_classes: _sublink_class,
|
|
260
255
|
extra_attributes: _sublink_attrs,
|
|
@@ -264,7 +259,6 @@
|
|
|
264
259
|
see_all: child.see_all|default(false),
|
|
265
260
|
third_level_aria_label: third_level_aria_label|default(''),
|
|
266
261
|
see_all_attributes: child.see_all_attributes|default([]),
|
|
267
|
-
icon_path: _icon_path,
|
|
268
262
|
sublink_id: _sublink_id|default(''),
|
|
269
263
|
item: {
|
|
270
264
|
path: child.path,
|
|
@@ -282,7 +276,6 @@
|
|
|
282
276
|
path: child.path,
|
|
283
277
|
external: _can_be_external ? child.external|default(false),
|
|
284
278
|
sr_external: child.sr_external|default(''),
|
|
285
|
-
icon_path: _icon_path,
|
|
286
279
|
},
|
|
287
280
|
icon: _icon,
|
|
288
281
|
extra_classes: _sublink_class,
|
|
@@ -292,7 +285,7 @@
|
|
|
292
285
|
</li>
|
|
293
286
|
{% endfor %}
|
|
294
287
|
{%- if _see_all and _see_all_label is not empty -%}
|
|
295
|
-
<li class="ecl-mega-menu__spacer" data-ecl-mega-menu-subitem
|
|
288
|
+
<li class="ecl-mega-menu__spacer" data-ecl-mega-menu-subitem> </li>
|
|
296
289
|
<li class="ecl-mega-menu__subitem ecl-mega-menu__see-all" data-ecl-mega-menu-subitem>
|
|
297
290
|
{% include '@ecl/link/link.html.twig' with {
|
|
298
291
|
link: {
|
|
@@ -301,7 +294,6 @@
|
|
|
301
294
|
path: _item.path,
|
|
302
295
|
},
|
|
303
296
|
icon: {
|
|
304
|
-
path: _icon_path,
|
|
305
297
|
name: 'arrow-left',
|
|
306
298
|
size: 'xs',
|
|
307
299
|
transform: 'rotate-180',
|
|
@@ -313,7 +305,30 @@
|
|
|
313
305
|
} only %}
|
|
314
306
|
</li>
|
|
315
307
|
{%- endif -%}
|
|
308
|
+
{%- if _info.link is not empty -%}
|
|
309
|
+
<li class="ecl-mega-menu__spacer" data-ecl-mega-menu-subitem> </li>
|
|
310
|
+
<li class="ecl-mega-menu__subitem ecl-mega-menu__see-all" data-ecl-mega-menu-subitem>
|
|
311
|
+
{% set _path = (_info.link.link.path is not empty) ? _info.link.link.path : _item.path %}
|
|
312
|
+
{% include '@ecl/link/link.html.twig' with _info.link|merge({
|
|
313
|
+
link: _info.link.link|merge({
|
|
314
|
+
type: 'standalone',
|
|
315
|
+
path: _path,
|
|
316
|
+
}),
|
|
317
|
+
icon: {
|
|
318
|
+
name: 'arrow-left',
|
|
319
|
+
transform: 'flip-horizontal',
|
|
320
|
+
size: 'xs',
|
|
321
|
+
},
|
|
322
|
+
extra_classes: _info.link.extra_classes|default('') ~ ' ecl-mega-menu__info-link',
|
|
323
|
+
extra_attributes: _info.link.extra_attributes|default([])|merge([{
|
|
324
|
+
name: 'aria-describedby',
|
|
325
|
+
value: _info_title_id,
|
|
326
|
+
}]),
|
|
327
|
+
}) only %}
|
|
328
|
+
</li>
|
|
329
|
+
{%- endif -%}
|
|
316
330
|
</ul>
|
|
331
|
+
{% endif %}
|
|
317
332
|
|
|
318
333
|
{# Featured #}
|
|
319
334
|
{% if _featured is not empty %}
|
|
@@ -322,49 +337,35 @@
|
|
|
322
337
|
data-ecl-mega-menu-featured
|
|
323
338
|
>
|
|
324
339
|
<div class="ecl-mega-menu__featured-scrollable">
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
<span
|
|
334
|
-
class="ecl-mega-menu__featured-title"
|
|
335
|
-
id="{{ 'ecl-mega-menu-featured-title-' ~ sublink_id }}"
|
|
336
|
-
>
|
|
337
|
-
{{- _featured.title -}}
|
|
338
|
-
</span>
|
|
339
|
-
{% endif %}
|
|
340
|
+
{% if _featured.title is not empty %}
|
|
341
|
+
<span
|
|
342
|
+
class="ecl-mega-menu__featured-title"
|
|
343
|
+
id="{{ 'ecl-mega-menu-featured-title-' ~ sublink_id }}"
|
|
344
|
+
>
|
|
345
|
+
{{- _featured.title -}}
|
|
346
|
+
</span>
|
|
347
|
+
{% endif %}
|
|
340
348
|
{%- if _featured.content is not empty -%}
|
|
341
349
|
<div class="ecl-mega-menu__featured-content">{{ _featured.content }}</div>
|
|
342
350
|
{%- endif -%}
|
|
343
351
|
{%- if _featured.items is not empty and _featured.items is iterable -%}
|
|
352
|
+
{% set sublink_id = sublink_id ? sublink_id : _id %}
|
|
344
353
|
<ul
|
|
345
354
|
class="ecl-mega-menu__featured-list"
|
|
346
355
|
aria-labelledby="{{ 'ecl-mega-menu-featured-title-' ~ sublink_id ~ ' ' ~ sublink_id }}"
|
|
347
356
|
>
|
|
348
357
|
{% for item in _featured.items %}
|
|
349
|
-
|
|
350
|
-
{% include '@ecl/link/link.html.twig' with {
|
|
351
|
-
link: item|merge({ type: 'standalone', icon_path: _icon_path }),
|
|
352
|
-
extra_attributes: [
|
|
353
|
-
{ name: 'data-ecl-mega-menu-featured-link' },
|
|
354
|
-
]|merge(item.extra_attributes|default([])),
|
|
355
|
-
extra_classes: item.extra_classes|default(''),
|
|
356
|
-
} only %}
|
|
357
|
-
</li>
|
|
358
|
+
{% include '@ecl/mega-menu/mega-menu-featured-item.html.twig' with item only %}
|
|
358
359
|
{% endfor %}
|
|
359
360
|
</ul>
|
|
360
361
|
{%- endif -%}
|
|
361
362
|
</div>
|
|
362
363
|
</div>
|
|
364
|
+
{% endif %}
|
|
363
365
|
{% if _item.level|default(0) < 2 %}
|
|
364
366
|
</div>
|
|
365
367
|
</div>
|
|
366
368
|
{% endif %}
|
|
367
|
-
{% endif %}
|
|
368
369
|
{% endif %}
|
|
369
370
|
</li>
|
|
370
371
|
|
package/mega-menu.html.twig
CHANGED
|
@@ -9,7 +9,8 @@
|
|
|
9
9
|
- "aria_label" (string) (default: '') Aria label for the main nav
|
|
10
10
|
- "second_level_aria_label" (string) (default: '') Aria label for the sub-lists, second level
|
|
11
11
|
- "third_level_aria_label" (string) (default: '') Aria label for the sub-lists, third level
|
|
12
|
-
- "
|
|
12
|
+
- "see_all_label": (string) (default: ''): Label for the "view all" link
|
|
13
|
+
- "featured_priority": (string) (default: secondary) Can be primary otherwise: determines which featured panel will be visible in desktop
|
|
13
14
|
- "items": (array) (default: []): The menu items - format: [
|
|
14
15
|
{
|
|
15
16
|
"label": (string) (default: '')
|
|
@@ -27,7 +28,7 @@
|
|
|
27
28
|
"featured" (oject) (optional) {
|
|
28
29
|
- "title": (string) Title of the featured panel
|
|
29
30
|
- "content": (string) Top content of the featured panel
|
|
30
|
-
- "items": (associative array) (optional)
|
|
31
|
+
- "items": (associative array) (optional) Array of items with image, link and description
|
|
31
32
|
}
|
|
32
33
|
"children": (associative array) (optional): [
|
|
33
34
|
{
|
|
@@ -35,7 +36,22 @@
|
|
|
35
36
|
"path": (string) (default: '')
|
|
36
37
|
"external": (boolean),
|
|
37
38
|
"sr_external" (string) (default: '') Additional label for the external icon
|
|
38
|
-
"
|
|
39
|
+
"featured" (oject) (optional) {
|
|
40
|
+
- "title": (string) Title of the featured panel
|
|
41
|
+
- "content": (string) Top content of the featured panel
|
|
42
|
+
- "items": (associative array) (optional) Array of items with image, link and description
|
|
43
|
+
"see_all" (boolean) controls visibility of "View All" button
|
|
44
|
+
"children": (associative array) (optional): [
|
|
45
|
+
{
|
|
46
|
+
"label": (string) (default: '')
|
|
47
|
+
"path": (string) (default: '')
|
|
48
|
+
"external": (boolean),
|
|
49
|
+
"sr_external" (string) (default: '') Additional label for the external icon
|
|
50
|
+
"extra_attributes" (optional) (array) (default: []) Extra attributes for link,
|
|
51
|
+
- "name" (string) Attribute name, eg. 'data-test'
|
|
52
|
+
- "value" (optional) (string) Attribute value, eg: 'data-test-1'
|
|
53
|
+
}
|
|
54
|
+
]
|
|
39
55
|
"see_all_label" (string)
|
|
40
56
|
"see_all_attributes" (optional) (array) (default: [])
|
|
41
57
|
- "name" (string) Attribute name, eg. 'data-test'
|
|
@@ -47,7 +63,7 @@
|
|
|
47
63
|
]
|
|
48
64
|
}
|
|
49
65
|
],
|
|
50
|
-
- "extra_classes" (
|
|
66
|
+
- "extra_classes" (string) (default: '') Extra classes (space separated) for the nav element
|
|
51
67
|
- "extra_attributes" (optional) (array) (default: []) Extra attributes for the nav element
|
|
52
68
|
- "name" (string) Attribute name, eg. 'data-test'
|
|
53
69
|
- "value" (optional) (string) Attribute value, eg: 'data-test-1'
|
|
@@ -63,12 +79,17 @@
|
|
|
63
79
|
{% set _toggle = toggle|default({}) %}
|
|
64
80
|
{% set _close = close|default({}) %}
|
|
65
81
|
{% set _items = items|default([{}]) %}
|
|
82
|
+
{% set _featured_priority = featured_priority|default('secondary') %}
|
|
83
|
+
{% set _see_all_label = see_all_label|default('') %}
|
|
66
84
|
{% set _css_class = 'ecl-mega-menu' %}
|
|
67
85
|
{% set _extra_attributes = '' %}
|
|
68
|
-
{% set _icon_path = icon_path|default('') %}
|
|
69
86
|
|
|
70
87
|
{# Internal logic - Process properties #}
|
|
71
88
|
|
|
89
|
+
{% if _featured_priority == 'primary' %}
|
|
90
|
+
{% set _css_class = _css_class ~ ' ecl-mega-menu--featured--primary' %}
|
|
91
|
+
{% endif %}
|
|
92
|
+
|
|
72
93
|
{% if extra_classes is defined and extra_classes is not empty %}
|
|
73
94
|
{% set _css_class = _css_class ~ ' ' ~ extra_classes %}
|
|
74
95
|
{% endif %}
|
|
@@ -93,7 +114,6 @@
|
|
|
93
114
|
{%- if _close is not empty and _close.label is defined and _close.label is not empty -%}
|
|
94
115
|
data-ecl-mega-menu-label-close="{{ _close.label }}"
|
|
95
116
|
{%- endif -%}
|
|
96
|
-
aria-expanded="false"
|
|
97
117
|
role="navigation"
|
|
98
118
|
id={{ _id }}
|
|
99
119
|
{%- if _aria_label is not empty %}
|
|
@@ -101,7 +121,7 @@
|
|
|
101
121
|
{%- endif -%}
|
|
102
122
|
{{- _extra_attributes|raw -}}
|
|
103
123
|
>
|
|
104
|
-
<div class="ecl-mega-menu__overlay"
|
|
124
|
+
<div class="ecl-mega-menu__overlay"> </div>
|
|
105
125
|
<div class="ecl-container ecl-mega-menu__container">
|
|
106
126
|
{% set _toggle_icon = {} %}
|
|
107
127
|
{% if _toggle.icon is defined %}
|
|
@@ -114,7 +134,6 @@
|
|
|
114
134
|
{% include '@ecl/button/button.html.twig' with _toggle|merge({
|
|
115
135
|
type: 'button',
|
|
116
136
|
variant: 'tertiary',
|
|
117
|
-
icon_path: _icon_path,
|
|
118
137
|
icon_position: 'before',
|
|
119
138
|
icon: _toggle_icon,
|
|
120
139
|
hide_label: true,
|
|
@@ -133,7 +152,6 @@
|
|
|
133
152
|
variant: 'tertiary',
|
|
134
153
|
label: _back_label,
|
|
135
154
|
icon: {
|
|
136
|
-
path: _icon_path,
|
|
137
155
|
name: 'corner-arrow',
|
|
138
156
|
size: 'xs',
|
|
139
157
|
transform: 'rotate-270',
|
|
@@ -154,7 +172,6 @@
|
|
|
154
172
|
{% include '@ecl/mega-menu/mega-menu-item.html.twig' with {
|
|
155
173
|
item: item,
|
|
156
174
|
id: "ecl-mega-menu-item-" ~ _id ~ '-' ~ key,
|
|
157
|
-
icon_path: _icon_path,
|
|
158
175
|
see_all_label: _see_all_label,
|
|
159
176
|
second_level_aria_label: _second_level_aria_label,
|
|
160
177
|
third_level_aria_label: _third_level_aria_label,
|