@openeuropa/bcl-navigation 0.1.3 → 0.1.202408021145
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/navigation.html.twig +148 -111
- package/package.json +5 -5
package/navigation.html.twig
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
|
-
{%
|
|
1
|
+
{% import _self as navigation %}
|
|
2
|
+
{% apply spaceless %}
|
|
2
3
|
|
|
3
4
|
{# Parameters:
|
|
5
|
+
- id (string) (default: '')
|
|
4
6
|
- pills (boolean) (default: false)
|
|
5
|
-
- tabs (boolean) (default: false)
|
|
7
|
+
- tabs (boolean) (default: false) - If tabs is set to true, the nav should also be set to true for accessibility reasons
|
|
6
8
|
- vertical (boolean) (default: false)
|
|
7
9
|
- full_width (boolean) (default: false)
|
|
8
10
|
- alignment (string) (default: '')
|
|
@@ -10,133 +12,168 @@
|
|
|
10
12
|
- tabs_content (boolean) (default: false)
|
|
11
13
|
- nav (boolean) (default: false)
|
|
12
14
|
- navbar (boolean) (default: false)
|
|
13
|
-
-
|
|
14
|
-
- items (array of objects)
|
|
15
|
+
- items (object[])
|
|
15
16
|
format: [
|
|
16
17
|
{
|
|
17
|
-
-
|
|
18
|
+
- link or button
|
|
18
19
|
- active (boolean)
|
|
19
20
|
- button (boolean) - set to button
|
|
20
21
|
- content (string) - content for tab
|
|
22
|
+
- navigation (navigation Object)
|
|
21
23
|
}
|
|
22
24
|
]
|
|
23
|
-
-
|
|
25
|
+
- attributes (drupal attrs)
|
|
24
26
|
#}
|
|
25
27
|
|
|
26
|
-
{
|
|
27
|
-
{%
|
|
28
|
-
{%
|
|
29
|
-
{%
|
|
30
|
-
{% set _alignment = alignment|default('') %}
|
|
31
|
-
{% set _id = id|default('') %}
|
|
32
|
-
{% set _tabs_content = tabs_content|default(false) %}
|
|
33
|
-
{% set _nav = nav|default(false) %}
|
|
34
|
-
{% set _navbar = navbar|default(false) %}
|
|
35
|
-
{% set _extra_classes = extra_classes|default('') %}
|
|
36
|
-
{% set _items = items|default([]) %}
|
|
37
|
-
{% set _class = _navbar ? 'navbar-nav' : 'nav' %}
|
|
38
|
-
{% if _pills %}
|
|
39
|
-
{% set _class = _class ~ ' nav-pills' %}
|
|
40
|
-
{% endif %}
|
|
41
|
-
{% if _tabs %}
|
|
42
|
-
{% set _class = _class ~ ' nav-tabs' %}
|
|
43
|
-
{% endif %}
|
|
44
|
-
{% if _vertical %}
|
|
45
|
-
{% set _class = _class ~ ' flex-column' %}
|
|
46
|
-
{% endif %}
|
|
47
|
-
{% if _full_width %}
|
|
48
|
-
{% set _class = _class ~ ' nav-fill' %}
|
|
49
|
-
{% endif %}
|
|
50
|
-
{% if _alignment is not empty %}
|
|
51
|
-
{% set _class = _class ~ ' justify-content-' ~ _alignment %}
|
|
52
|
-
{% endif %}
|
|
53
|
-
{% if _extra_classes is not empty %}
|
|
54
|
-
{% set _class = _class ~ ' ' ~ _extra_classes %}
|
|
55
|
-
{% endif %}
|
|
28
|
+
{# Define main macro #}
|
|
29
|
+
{% macro render(items, pills, tabs, tabs_content, vertical, full_width, alignment, id, nav, navbar, attributes) %}
|
|
30
|
+
{% apply spaceless %}
|
|
31
|
+
{% import _self as navigation %}
|
|
56
32
|
|
|
57
|
-
{%
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
{%
|
|
61
|
-
|
|
33
|
+
{% set _id = id|default('') %}
|
|
34
|
+
{% set _pills = pills ?? false %}
|
|
35
|
+
{% set _tabs = tabs ?? false %}
|
|
36
|
+
{% set _vertical = vertical ?? false %}
|
|
37
|
+
{% set _full_width = full_width ?? false %}
|
|
38
|
+
{% set _alignment = alignment|default('') %}
|
|
39
|
+
{% set _tabs_content = tabs_content ?? false %}
|
|
40
|
+
{% set _nav = nav ?? false %}
|
|
41
|
+
{% set _navbar = navbar ?? false %}
|
|
42
|
+
{% set _items = items|default([]) %}
|
|
43
|
+
|
|
44
|
+
{% if _navbar %}
|
|
45
|
+
{% set _classes = ['navbar-nav'] %}
|
|
46
|
+
{% else %}
|
|
47
|
+
{% set _classes = ['nav'] %}
|
|
48
|
+
{% endif %}
|
|
49
|
+
{% if _pills %}
|
|
50
|
+
{% set _classes = _classes|merge(['nav-pills']) %}
|
|
62
51
|
{% endif %}
|
|
63
|
-
>
|
|
64
|
-
{% else %}
|
|
65
|
-
<ul
|
|
66
|
-
class="{{ _class }}"
|
|
67
52
|
{% if _tabs %}
|
|
68
|
-
|
|
53
|
+
{% set _classes = _classes|merge(['nav-tabs']) %}
|
|
54
|
+
{% endif %}
|
|
55
|
+
{% if _vertical %}
|
|
56
|
+
{% set _classes = _classes|merge(['flex-column']) %}
|
|
57
|
+
{% endif %}
|
|
58
|
+
{% if _full_width %}
|
|
59
|
+
{% set _classes = _classes|merge(['nav-fill']) %}
|
|
60
|
+
{% endif %}
|
|
61
|
+
{% if _alignment is not empty %}
|
|
62
|
+
{% set _classes = _classes|merge(['justify-content-' ~ _alignment]) %}
|
|
63
|
+
{% endif %}
|
|
64
|
+
|
|
65
|
+
{% if attributes is empty %}
|
|
66
|
+
{% set attributes = create_attribute() %}
|
|
69
67
|
{% endif %}
|
|
68
|
+
|
|
70
69
|
{% if _id is not empty %}
|
|
71
|
-
|
|
70
|
+
{% set attributes = attributes.setAttribute('id', _id) %}
|
|
72
71
|
{% endif %}
|
|
73
|
-
|
|
74
|
-
{%
|
|
75
|
-
|
|
76
|
-
{% for _item in _items %}
|
|
77
|
-
{% set _item_class = 'nav-item' %}
|
|
78
|
-
{% if _item.dropdown %}
|
|
79
|
-
{% set _item_class = _item_class ~ ' dropdown' %}
|
|
80
|
-
{% set _item = _item|merge({
|
|
81
|
-
remove_wrapper: true
|
|
82
|
-
})
|
|
83
|
-
%}
|
|
84
|
-
{% endif %}
|
|
85
|
-
{% set _item_classes = ['nav-link'] %}
|
|
86
|
-
{% if _item.active %}
|
|
87
|
-
{% set _item_classes = _item_classes|merge(['active']) %}
|
|
88
|
-
{% endif %}
|
|
89
|
-
{% if _item.attributes is empty %}
|
|
90
|
-
{% set _item = _item|merge({
|
|
91
|
-
attributes: create_attribute()
|
|
92
|
-
}) %}
|
|
93
|
-
{% endif %}
|
|
94
|
-
{% set _item = _item|merge({
|
|
95
|
-
attributes: _item.attributes.addClass(_item_classes),
|
|
96
|
-
clean_class: true
|
|
97
|
-
})
|
|
98
|
-
%}
|
|
99
|
-
{% if not _nav %}
|
|
100
|
-
<li
|
|
101
|
-
class="{{ _item_class }}"
|
|
102
|
-
{% if _tabs %}
|
|
103
|
-
role="presentation"
|
|
104
|
-
{% endif %}
|
|
105
|
-
>
|
|
106
|
-
{% endif %}
|
|
107
|
-
{% if _item.dropdown is defined %}
|
|
108
|
-
{% include '@oe-bcl/dropdown/dropdown.html.twig' with _item only %}
|
|
109
|
-
{% elseif _item.button is defined %}
|
|
110
|
-
{% include '@oe-bcl/button/button.html.twig' with _item only %}
|
|
111
|
-
{% else %}
|
|
112
|
-
{% include '@oe-bcl/link/link.html.twig' with _item only %}
|
|
113
|
-
{% endif %}
|
|
114
|
-
{% if not _nav %}
|
|
115
|
-
</li>
|
|
116
|
-
{% endif %}
|
|
117
|
-
{% endfor %}
|
|
72
|
+
|
|
73
|
+
{% if _tabs %}
|
|
74
|
+
{% set attributes = attributes.setAttribute('role', 'tablist') %}
|
|
118
75
|
{% endif %}
|
|
119
|
-
{%
|
|
120
|
-
|
|
121
|
-
{%
|
|
122
|
-
|
|
123
|
-
{
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
{
|
|
128
|
-
|
|
129
|
-
|
|
76
|
+
{% set attributes = attributes.addClass(_classes) %}
|
|
77
|
+
|
|
78
|
+
{% if _nav %}
|
|
79
|
+
<nav
|
|
80
|
+
{{ attributes }}
|
|
81
|
+
>
|
|
82
|
+
{% else %}
|
|
83
|
+
<ul
|
|
84
|
+
{{ attributes }}
|
|
85
|
+
>
|
|
86
|
+
{% endif %}
|
|
87
|
+
{% if _items is not empty and _items is iterable %}
|
|
88
|
+
{% for _item in items %}
|
|
89
|
+
{% set _nav_class = 'nav-item' %}
|
|
90
|
+
{% if _item.dropdown %}
|
|
91
|
+
{% set _nav_class = _nav_class ~ ' dropdown' %}
|
|
92
|
+
{% set _item = _item|merge({remove_wrapper: true}) %}
|
|
93
|
+
{% endif %}
|
|
94
|
+
{% if _item.dropdown %}
|
|
95
|
+
{% set _item_classes = [] %}
|
|
96
|
+
{% else %}
|
|
97
|
+
{% set _item_classes = ['nav-link'] %}
|
|
98
|
+
{% endif %}
|
|
130
99
|
{% if _item.active %}
|
|
131
|
-
{% set
|
|
100
|
+
{% set _item_classes = _item_classes|merge(['active']) %}
|
|
132
101
|
{% endif %}
|
|
133
|
-
|
|
134
|
-
{
|
|
135
|
-
|
|
102
|
+
{% if _item.attributes is empty %}
|
|
103
|
+
{% set _item = _item|merge({
|
|
104
|
+
attributes: create_attribute()
|
|
105
|
+
}) %}
|
|
106
|
+
{% endif %}
|
|
107
|
+
{% set _item = _item|merge({
|
|
108
|
+
attributes: _item.attributes.addClass(_item_classes),
|
|
109
|
+
clean_class: true}) %}
|
|
110
|
+
{% if not _nav %}
|
|
111
|
+
<li
|
|
112
|
+
class="{{ _nav_class }}"
|
|
113
|
+
{% if _tabs %}
|
|
114
|
+
role="tab"
|
|
115
|
+
{% endif %}
|
|
116
|
+
>
|
|
117
|
+
{% elseif _tabs and _item.dropdown is not defined %}
|
|
118
|
+
{% set _item = _item|merge({
|
|
119
|
+
attributes: _item.attributes.setAttribute("role", "tab"),
|
|
120
|
+
})
|
|
121
|
+
%}
|
|
122
|
+
{% endif %}
|
|
123
|
+
{% if _item.dropdown is defined %}
|
|
124
|
+
{% include '@oe-bcl/bcl-dropdown/dropdown.html.twig' with _item only %}
|
|
125
|
+
{% elseif _item.button is defined %}
|
|
126
|
+
{% include '@oe-bcl/bcl-button/button.html.twig' with _item only %}
|
|
127
|
+
{% else %}
|
|
128
|
+
{% include '@oe-bcl/bcl-link/link.html.twig' with _item only %}
|
|
129
|
+
{% endif %}
|
|
130
|
+
{% if _item.navigation is defined and _item.navigation.items is not empty and _item.navigation.items is iterable %}
|
|
131
|
+
{{ navigation.render(
|
|
132
|
+
_item.navigation.items,
|
|
133
|
+
_item.navigation.pills,
|
|
134
|
+
_item.navigation.tabs,
|
|
135
|
+
_item.navigation.tabs_content,
|
|
136
|
+
_item.navigation.vertical,
|
|
137
|
+
_item.navigation.full_width,
|
|
138
|
+
_item.navigation.alignment,
|
|
139
|
+
_item.navigation.id,
|
|
140
|
+
_item.navigation.nav,
|
|
141
|
+
_item.navigation.navbar,
|
|
142
|
+
_item.navigation.attributes
|
|
143
|
+
) }}
|
|
144
|
+
{% endif %}
|
|
145
|
+
{% if not _nav %}
|
|
146
|
+
</li>
|
|
147
|
+
{% endif %}
|
|
148
|
+
{% endfor %}
|
|
149
|
+
{% endif %}
|
|
150
|
+
{% if _nav %}
|
|
151
|
+
</nav>
|
|
152
|
+
{% else %}
|
|
153
|
+
</ul>
|
|
154
|
+
{% endif %}
|
|
155
|
+
{% if _tabs_content %}
|
|
156
|
+
<div class="tab-content">
|
|
157
|
+
{%- block contents -%}
|
|
158
|
+
{% if _items is not empty and _items is iterable %}
|
|
159
|
+
{% for _item in _items %}
|
|
160
|
+
{% if _item.content is not empty %}
|
|
161
|
+
{% set _content_class = 'tab-pane fade' %}
|
|
162
|
+
{% if _item.active %}
|
|
163
|
+
{% set _content_class = _content_class ~ ' show active' %}
|
|
164
|
+
{% endif %}
|
|
165
|
+
<div class="{{ _content_class }}" id="{{ _item.target }}" role="tabpanel" aria-labelledby="{{ _item.id }}">
|
|
166
|
+
{{- _item.content -}}
|
|
167
|
+
</div>
|
|
168
|
+
{% endif %}
|
|
169
|
+
{% endfor %}
|
|
136
170
|
{% endif %}
|
|
137
|
-
{
|
|
171
|
+
{%- endblock -%}
|
|
172
|
+
</div>
|
|
138
173
|
{% endif %}
|
|
139
|
-
|
|
140
|
-
{%
|
|
174
|
+
{% endapply %}
|
|
175
|
+
{% endmacro %}
|
|
176
|
+
|
|
177
|
+
{{ navigation.render(items, pills, tabs, tabs_content, vertical, full_width, alignment, id, nav, navbar, attributes) }}
|
|
141
178
|
|
|
142
|
-
{%
|
|
179
|
+
{% endapply %}
|
package/package.json
CHANGED
|
@@ -2,15 +2,15 @@
|
|
|
2
2
|
"name": "@openeuropa/bcl-navigation",
|
|
3
3
|
"author": "European Commission",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
|
-
"version": "0.1.
|
|
5
|
+
"version": "0.1.202408021145",
|
|
6
6
|
"publishConfig": {
|
|
7
7
|
"access": "public"
|
|
8
8
|
},
|
|
9
9
|
"description": "OE - BCL navigation",
|
|
10
10
|
"dependencies": {
|
|
11
|
-
"@openeuropa/bcl-button": "^0.1.
|
|
12
|
-
"@openeuropa/bcl-dropdown": "^0.1.
|
|
13
|
-
"@openeuropa/bcl-link": "^0.1.
|
|
11
|
+
"@openeuropa/bcl-button": "^0.1.202408021145",
|
|
12
|
+
"@openeuropa/bcl-dropdown": "^0.1.202408021145",
|
|
13
|
+
"@openeuropa/bcl-link": "^0.1.202408021145"
|
|
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": "7ee2013f7f64a70ddfa35228a9a65967dd71eec3"
|
|
30
30
|
}
|