@openeuropa/bcl-header 1.10.8 → 1.10.10
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/header.html.twig +71 -82
- package/package.json +6 -6
package/header.html.twig
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
{% apply spaceless %}
|
|
2
|
-
|
|
3
1
|
{# Parameters:
|
|
4
2
|
- variant (string) (default: 'neutral')
|
|
5
3
|
- options: ['ec', 'eu', 'neutral']
|
|
@@ -17,10 +15,12 @@
|
|
|
17
15
|
- language_modal (object) (default: {})
|
|
18
16
|
- light (boolean) (default: false)
|
|
19
17
|
- modals (modal[]) (default: [])
|
|
18
|
+
- toggler_attributes (drupal attrs)
|
|
19
|
+
- icon_path (string) (default: '')
|
|
20
20
|
- attributes (drupal attrs)
|
|
21
21
|
#}
|
|
22
22
|
|
|
23
|
-
{
|
|
23
|
+
{%- set _variant = variant|default('neutral') %}
|
|
24
24
|
{% set _navbar = navbar|default({}) %}
|
|
25
25
|
{% set _project_logo = project_logo|default({}) %}
|
|
26
26
|
{% set _site_name = site_name|default('') %}
|
|
@@ -30,117 +30,106 @@
|
|
|
30
30
|
{% set _breadcrumbs = breadcrumbs|default({}) %}
|
|
31
31
|
{% set _language_modal = language_modal|default({}) %}
|
|
32
32
|
{% set _light = light ?? false %}
|
|
33
|
+
{% set _toggler_attributes = toggler_attributes ?: create_attribute() %}
|
|
34
|
+
{% set _icon_path = icon_path|default('') %}
|
|
33
35
|
{% set _modals = modals|default([]) %}
|
|
34
36
|
|
|
35
|
-
{
|
|
37
|
+
{%- set _site_name_classes = 'bcl-header__site-name' %}
|
|
36
38
|
|
|
37
|
-
{
|
|
38
|
-
{
|
|
39
|
+
{%- if attributes is empty %}
|
|
40
|
+
{%- set attributes = create_attribute() %}
|
|
39
41
|
{% endif %}
|
|
40
42
|
|
|
41
|
-
{
|
|
43
|
+
{%- set attributes = attributes.addClass(['bcl-header', 'bcl-header--' ~ _variant, 'shadow-sm']) %}
|
|
42
44
|
|
|
43
|
-
{
|
|
44
|
-
{
|
|
45
|
+
{%- if site_name_classes is not empty %}
|
|
46
|
+
{%- set _site_name_classes = _site_name_classes ~ ' ' ~ site_name_classes %}
|
|
45
47
|
{% endif %}
|
|
46
48
|
|
|
47
|
-
{
|
|
49
|
+
{%- set _project_classes = 'bcl-header__project' %}
|
|
48
50
|
{% if _light is not empty %}
|
|
49
|
-
{
|
|
51
|
+
{%- set _project_classes = _project_classes ~ ' light' %}
|
|
50
52
|
{% endif %}
|
|
51
53
|
|
|
54
|
+
{%- set toggler_attributes = _toggler_attributes.addClass(['bcl-navbar-toggler', 'd-lg-none'])
|
|
55
|
+
.setAttribute('type', 'button')
|
|
56
|
+
.setAttribute('data-bs-toggle', 'collapse')
|
|
57
|
+
.setAttribute('data-bs-target', '#' ~ navbar_id)
|
|
58
|
+
.setAttribute('aria-controls', navbar_id)
|
|
59
|
+
.setAttribute('aria-expanded', 'false')
|
|
60
|
+
%}
|
|
61
|
+
|
|
62
|
+
{%- set navbar_toggle_button -%}
|
|
63
|
+
<button
|
|
64
|
+
{{ toggler_attributes }}
|
|
65
|
+
>
|
|
66
|
+
{%- include '@oe-bcl/bcl-icon/icon.html.twig' with {
|
|
67
|
+
name: 'list',
|
|
68
|
+
size: 'fluid',
|
|
69
|
+
path: _icon_path,
|
|
70
|
+
attributes: create_attribute().addClass(['default-icon']),
|
|
71
|
+
} only %}
|
|
72
|
+
{%- include '@oe-bcl/bcl-icon/icon.html.twig' with {
|
|
73
|
+
name: 'x',
|
|
74
|
+
size: 'fluid',
|
|
75
|
+
path: _icon_path,
|
|
76
|
+
attributes: create_attribute().addClass(['active-icon']),
|
|
77
|
+
} only -%}
|
|
78
|
+
</button>
|
|
79
|
+
{%- endset -%}
|
|
80
|
+
|
|
52
81
|
<header
|
|
53
82
|
{{ attributes }}
|
|
54
|
-
>
|
|
83
|
+
>{# -#}
|
|
55
84
|
<nav
|
|
56
|
-
{{ _head.attributes.addClass(['navbar', 'navbar-expand-lg', 'navbar-light']) }}>
|
|
85
|
+
{{ _head.attributes.addClass(['navbar', 'navbar-expand-lg', 'navbar-light']) }}>{# -#}
|
|
57
86
|
<div class='container'>
|
|
58
|
-
{
|
|
87
|
+
{%- if _head.brand is not empty -%}
|
|
59
88
|
<a class='navbar-brand' href='{{ _head.brand.link }}'>
|
|
60
|
-
{
|
|
89
|
+
{%- for logo in _head.brand.logos -%}
|
|
61
90
|
<img
|
|
62
91
|
src='{{ logo.src }}'
|
|
63
92
|
{% if logo.alt is not empty %}
|
|
64
93
|
alt='{{ logo.alt }}'
|
|
65
94
|
{% endif %}
|
|
66
|
-
{
|
|
95
|
+
{%- if logo.class is not empty %}
|
|
67
96
|
class='{{ logo.class }}'
|
|
68
97
|
{% endif %}
|
|
69
98
|
/>
|
|
70
|
-
{
|
|
99
|
+
{%- endfor -%}
|
|
71
100
|
</a>
|
|
72
|
-
{
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
data-bs-toggle="collapse"
|
|
77
|
-
data-bs-target='#{{ _navbar_id }}'
|
|
78
|
-
aria-controls='{{ _navbar_id }}'
|
|
79
|
-
aria-expanded="false"
|
|
80
|
-
aria-label="Toggle navigation"
|
|
81
|
-
>
|
|
82
|
-
<span class="navbar-toggler-icon"></span>
|
|
83
|
-
</button>
|
|
84
|
-
</div>
|
|
85
|
-
</nav>
|
|
101
|
+
{%- endif %}
|
|
102
|
+
{{- navbar_toggle_button -}}
|
|
103
|
+
</div>{# -#}
|
|
104
|
+
</nav>{# -#}
|
|
86
105
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
<a
|
|
94
|
-
href="{{ _project_link }}"
|
|
95
|
-
>
|
|
96
|
-
{% endif %}
|
|
97
|
-
{% if _project_logo is not empty %}
|
|
98
|
-
<img
|
|
99
|
-
{% if _project_logo.path is not empty %}
|
|
100
|
-
src="{{ _project_logo.path }}"
|
|
101
|
-
{% endif %}
|
|
102
|
-
{% if _project_logo.alt is not empty %}
|
|
103
|
-
alt="{{ _project_logo.alt }}"
|
|
104
|
-
{% endif %}
|
|
105
|
-
{% if _project_logo.classes is not empty %}
|
|
106
|
-
class="{{ _project_logo.classes }}"
|
|
107
|
-
{% endif %}
|
|
108
|
-
/>
|
|
109
|
-
{% endif %}
|
|
110
|
-
{% if _site_name is not empty %}
|
|
111
|
-
<span class="{{ _site_name_classes }}">
|
|
112
|
-
{{- _site_name -}}
|
|
113
|
-
</span>
|
|
114
|
-
{% endif %}
|
|
115
|
-
{% if _project_link is not empty %}
|
|
116
|
-
</a>
|
|
117
|
-
{% endif %}
|
|
118
|
-
</div>
|
|
119
|
-
</div>
|
|
120
|
-
{% endif %}
|
|
106
|
+
<!-- site name -->{# -#}
|
|
107
|
+
<div class="bcl-header__site-name" id="site-name-heading">{# -#}
|
|
108
|
+
<div class="container">{# -#}
|
|
109
|
+
<span class="h5 py-3-5 border-top-subtle mb-0 d-block">{{ _site_name }}</span>{# -#}
|
|
110
|
+
</div>{# -#}
|
|
111
|
+
</div>{# -#}
|
|
121
112
|
|
|
122
113
|
<!-- navbar -->
|
|
123
|
-
{
|
|
124
|
-
{
|
|
114
|
+
{%- if _navbar is not empty %}
|
|
115
|
+
{%- include '@oe-bcl/bcl-navbar/navbar.html.twig' with _navbar|merge({
|
|
125
116
|
disable_collapse: true,
|
|
126
117
|
attributes: create_attribute().addClass('bcl-header__navbar collapse navbar-collapse').setAttribute('id', _navbar_id).setAttribute('aria-label', 'Main Navigation'),
|
|
127
118
|
}) only %}
|
|
128
|
-
{
|
|
119
|
+
{%- endif -%}
|
|
120
|
+
</header>{# -#}
|
|
129
121
|
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
</header>
|
|
122
|
+
<!-- breadcrumbs -->
|
|
123
|
+
{%- if _breadcrumbs is not empty -%}
|
|
124
|
+
<div class="container">
|
|
125
|
+
{%- include '@oe-bcl/bcl-breadcrumb/breadcrumb.html.twig' with _breadcrumbs only -%}
|
|
126
|
+
</div>
|
|
127
|
+
{%- endif %}
|
|
137
128
|
|
|
138
|
-
{
|
|
139
|
-
{
|
|
129
|
+
{%- for modal in _modals %}
|
|
130
|
+
{%- include '@oe-bcl/bcl-modal/modal.html.twig' with modal only %}
|
|
140
131
|
{% endfor %}
|
|
141
132
|
|
|
142
|
-
{
|
|
143
|
-
{
|
|
144
|
-
{% endif
|
|
145
|
-
|
|
146
|
-
{% endapply %}
|
|
133
|
+
{%- if _language_modal is not empty %}
|
|
134
|
+
{%- include '@oe-bcl/bcl-language-list/language-list.html.twig' with _language_modal only %}
|
|
135
|
+
{% endif -%}
|
package/package.json
CHANGED
|
@@ -2,16 +2,16 @@
|
|
|
2
2
|
"name": "@openeuropa/bcl-header",
|
|
3
3
|
"author": "European Commission",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
|
-
"version": "1.10.
|
|
5
|
+
"version": "1.10.10",
|
|
6
6
|
"publishConfig": {
|
|
7
7
|
"access": "public"
|
|
8
8
|
},
|
|
9
9
|
"description": "OE - BCL header",
|
|
10
10
|
"dependencies": {
|
|
11
|
-
"@openeuropa/bcl-breadcrumb": "^1.10.
|
|
12
|
-
"@openeuropa/bcl-language-list": "^1.10.
|
|
13
|
-
"@openeuropa/bcl-modal": "^1.10.
|
|
14
|
-
"@openeuropa/bcl-navbar": "^1.10.
|
|
11
|
+
"@openeuropa/bcl-breadcrumb": "^1.10.10",
|
|
12
|
+
"@openeuropa/bcl-language-list": "^1.10.10",
|
|
13
|
+
"@openeuropa/bcl-modal": "^1.10.10",
|
|
14
|
+
"@openeuropa/bcl-navbar": "^1.10.10"
|
|
15
15
|
},
|
|
16
16
|
"repository": {
|
|
17
17
|
"type": "git",
|
|
@@ -27,5 +27,5 @@
|
|
|
27
27
|
"design-system",
|
|
28
28
|
"twig"
|
|
29
29
|
],
|
|
30
|
-
"gitHead": "
|
|
30
|
+
"gitHead": "9f7c4a046e8f8f325e4de7e998f1c2a654f6eed1"
|
|
31
31
|
}
|