@openeuropa/bcl-data-header 0.14.0 → 0.18.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.
- package/data--neutral.js +259 -0
- package/data--no-form.js +192 -0
- package/data--simple.js +24 -7
- package/data-ec.js +19 -3
- package/data-ucpkn.js +166 -3
- package/data.js +15 -2
- package/package.json +2 -2
package/data--neutral.js
ADDED
|
@@ -0,0 +1,259 @@
|
|
|
1
|
+
const drupalAttribute = require("drupal-attribute");
|
|
2
|
+
|
|
3
|
+
module.exports = {
|
|
4
|
+
site_name: "Project name",
|
|
5
|
+
site_name_classes: "h5 d-inline-block d-lg-none",
|
|
6
|
+
head: {
|
|
7
|
+
brand: {
|
|
8
|
+
logos: [
|
|
9
|
+
{
|
|
10
|
+
src: "https://inno-ecl.s3.amazonaws.com/media/examples/placeholder.svg",
|
|
11
|
+
alt: "project logo",
|
|
12
|
+
},
|
|
13
|
+
],
|
|
14
|
+
label: "Project name",
|
|
15
|
+
},
|
|
16
|
+
attributes: new drupalAttribute()
|
|
17
|
+
.addClass(["w-100"])
|
|
18
|
+
.setAttribute("aria-label", "Top Navigation"),
|
|
19
|
+
disable_collapse: true,
|
|
20
|
+
navigation: {
|
|
21
|
+
items: [
|
|
22
|
+
{
|
|
23
|
+
label: "Link",
|
|
24
|
+
icon_position: "before",
|
|
25
|
+
icon: {
|
|
26
|
+
name: "link",
|
|
27
|
+
path: "/icons.svg",
|
|
28
|
+
},
|
|
29
|
+
attributes: new drupalAttribute().addClass(["d-none", "d-lg-block"]),
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
label: "Link",
|
|
33
|
+
icon_position: "before",
|
|
34
|
+
icon: {
|
|
35
|
+
name: "link",
|
|
36
|
+
path: "/icons.svg",
|
|
37
|
+
},
|
|
38
|
+
attributes: new drupalAttribute().addClass(["d-none", "d-lg-block"]),
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
label: "<span class='d-block d-lg-inline-block'>English</span>",
|
|
42
|
+
path: "#",
|
|
43
|
+
icon_position: "before",
|
|
44
|
+
icon: {
|
|
45
|
+
name: "chat-left-dots-fill",
|
|
46
|
+
size: "xs",
|
|
47
|
+
path: "/icons.svg",
|
|
48
|
+
},
|
|
49
|
+
attributes: new drupalAttribute()
|
|
50
|
+
.setAttribute("data-bs-toggle", "modal")
|
|
51
|
+
.setAttribute("data-bs-target", "#languageModal")
|
|
52
|
+
.addClass("text-center"),
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
label: "<span class='d-block d-lg-inline-block'>Log in</span>",
|
|
56
|
+
path: "#",
|
|
57
|
+
icon_position: "before",
|
|
58
|
+
icon: {
|
|
59
|
+
name: "person-fill",
|
|
60
|
+
size: "xs",
|
|
61
|
+
path: "/icons.svg",
|
|
62
|
+
},
|
|
63
|
+
attributes: new drupalAttribute()
|
|
64
|
+
.setAttribute("data-bs-toggle", "modal")
|
|
65
|
+
.setAttribute("data-bs-target", "#loginModal")
|
|
66
|
+
.addClass("text-center"),
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
label: "<span class='badge bg-danger'>5</span>",
|
|
70
|
+
path: "#",
|
|
71
|
+
remove_icon_spacers: true,
|
|
72
|
+
icon_position: "before",
|
|
73
|
+
icon: {
|
|
74
|
+
name: "bell-fill",
|
|
75
|
+
size: "s",
|
|
76
|
+
path: "/icons.svg",
|
|
77
|
+
},
|
|
78
|
+
attributes: new drupalAttribute().addClass([
|
|
79
|
+
"notification",
|
|
80
|
+
"mt-2",
|
|
81
|
+
"mt-lg-0",
|
|
82
|
+
]),
|
|
83
|
+
},
|
|
84
|
+
],
|
|
85
|
+
},
|
|
86
|
+
},
|
|
87
|
+
navbar: {
|
|
88
|
+
color_set: "dark",
|
|
89
|
+
collapse_id: "navbarNavDropdown",
|
|
90
|
+
attributes: new drupalAttribute().addClass("bcl-header__navbar"),
|
|
91
|
+
form: {
|
|
92
|
+
attributes: new drupalAttribute().addClass(["d-flex", "mt-3", "mt-lg-0"]),
|
|
93
|
+
submit: {
|
|
94
|
+
variant: "light",
|
|
95
|
+
assistive_text: "search",
|
|
96
|
+
icon: {
|
|
97
|
+
name: "search",
|
|
98
|
+
size: "xs",
|
|
99
|
+
path: "/icons.svg",
|
|
100
|
+
},
|
|
101
|
+
attributes: new drupalAttribute().addClass([
|
|
102
|
+
"border-start-0",
|
|
103
|
+
"rounded-0",
|
|
104
|
+
"rounded-end",
|
|
105
|
+
"d-flex",
|
|
106
|
+
]),
|
|
107
|
+
},
|
|
108
|
+
items: [
|
|
109
|
+
[
|
|
110
|
+
{
|
|
111
|
+
type: "text",
|
|
112
|
+
required: true,
|
|
113
|
+
label: "Search",
|
|
114
|
+
hidden_label: true,
|
|
115
|
+
placeholder: "Search",
|
|
116
|
+
id: "inlineFormInputGroupSearch",
|
|
117
|
+
attributes: new drupalAttribute().addClass([
|
|
118
|
+
"border-start-0",
|
|
119
|
+
"rounded-0",
|
|
120
|
+
"rounded-start",
|
|
121
|
+
]),
|
|
122
|
+
},
|
|
123
|
+
],
|
|
124
|
+
],
|
|
125
|
+
},
|
|
126
|
+
navigation: {
|
|
127
|
+
navbar: true,
|
|
128
|
+
attributes: new drupalAttribute().addClass("me-auto"),
|
|
129
|
+
items: [
|
|
130
|
+
{
|
|
131
|
+
label: "Home",
|
|
132
|
+
path: "/example",
|
|
133
|
+
active: true,
|
|
134
|
+
attributes: new drupalAttribute().setAttribute(
|
|
135
|
+
"aria-current",
|
|
136
|
+
"page"
|
|
137
|
+
),
|
|
138
|
+
},
|
|
139
|
+
{
|
|
140
|
+
label: "Item 01",
|
|
141
|
+
path: "/example",
|
|
142
|
+
},
|
|
143
|
+
{
|
|
144
|
+
label: "Item 02",
|
|
145
|
+
path: "/example",
|
|
146
|
+
},
|
|
147
|
+
{
|
|
148
|
+
id: "navbarDropdownMenuLink",
|
|
149
|
+
link: true,
|
|
150
|
+
dropdown: true,
|
|
151
|
+
trigger: {
|
|
152
|
+
label: "Dropdown link",
|
|
153
|
+
path: "#",
|
|
154
|
+
attributes: new drupalAttribute().addClass("nav-link"),
|
|
155
|
+
},
|
|
156
|
+
items: [
|
|
157
|
+
{
|
|
158
|
+
label: "Action",
|
|
159
|
+
path: "/example.html",
|
|
160
|
+
},
|
|
161
|
+
{
|
|
162
|
+
label: "Another action",
|
|
163
|
+
path: "/example.html",
|
|
164
|
+
},
|
|
165
|
+
{
|
|
166
|
+
label: "Something else here",
|
|
167
|
+
path: "/example.html",
|
|
168
|
+
},
|
|
169
|
+
],
|
|
170
|
+
},
|
|
171
|
+
],
|
|
172
|
+
},
|
|
173
|
+
},
|
|
174
|
+
modals: [
|
|
175
|
+
{
|
|
176
|
+
id: "loginModal",
|
|
177
|
+
header:
|
|
178
|
+
'<h5 class="modal-title" id="loginModalLabel">Log in</h5>' +
|
|
179
|
+
'<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>',
|
|
180
|
+
body:
|
|
181
|
+
"<h5>Disclaimer 1</h5>" +
|
|
182
|
+
"<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum accumsan eget orci eu aliquet. Suspendisse potenti. Integer volutpat, nisl et placerat tincidunt</p>" +
|
|
183
|
+
"<h5>Disclaimer 2</h5>" +
|
|
184
|
+
"<p>Duis bibendum tristique lobortis. Nam luctus nisi sit amet turpis faucibus, ut dapibus elit sollicitudin. Phasellus a massa magna. Nullam ac imperdiet leo.</p>",
|
|
185
|
+
footer:
|
|
186
|
+
'<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>' +
|
|
187
|
+
'<button type="button" class="btn btn-primary">Access EU login</button>',
|
|
188
|
+
},
|
|
189
|
+
{
|
|
190
|
+
id: "languageModal",
|
|
191
|
+
size: "fullscreen",
|
|
192
|
+
attributes: new drupalAttribute().addClass("bcl-language"),
|
|
193
|
+
header:
|
|
194
|
+
'<h5 class="modal-title" id="languageeModalLabel">Select your language</h5>' +
|
|
195
|
+
'<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>',
|
|
196
|
+
body:
|
|
197
|
+
'<div class="container">' +
|
|
198
|
+
'<div class="row">' +
|
|
199
|
+
'<div class="col col-lg-8 offset-lg-2">' +
|
|
200
|
+
'<h5 class="bcl-language__title">EU official languages</h5>' +
|
|
201
|
+
"</div>" +
|
|
202
|
+
"</div>" +
|
|
203
|
+
'<div class="row">' +
|
|
204
|
+
'<div class="col col-lg-4 offset-lg-2">' +
|
|
205
|
+
'<div class="bcl-language__list">' +
|
|
206
|
+
'<a href="#" class="bcl-language__item">Language 01</a>' +
|
|
207
|
+
'<a href="#" class="bcl-language__item">Language 02</a>' +
|
|
208
|
+
'<a href="#" class="bcl-language__item">Language 03</a>' +
|
|
209
|
+
"</div>" +
|
|
210
|
+
"</div>" +
|
|
211
|
+
'<div class="col col-lg-4">' +
|
|
212
|
+
'<div class="bcl-language__list">' +
|
|
213
|
+
'<a href="#" class="bcl-language__item">Language 04</a>' +
|
|
214
|
+
'<a href="#" class="bcl-language__item">Language 05</a>' +
|
|
215
|
+
'<a href="#" class="bcl-language__item">Language 06</a>' +
|
|
216
|
+
"</div>" +
|
|
217
|
+
"</div>" +
|
|
218
|
+
"</div>" +
|
|
219
|
+
'<div class="row">' +
|
|
220
|
+
'<div class="col col-lg-8 offset-lg-2">' +
|
|
221
|
+
'<h5 class="bcl-language__title">Non EU languages</h5>' +
|
|
222
|
+
"</div>" +
|
|
223
|
+
"</div>" +
|
|
224
|
+
'<div class="row">' +
|
|
225
|
+
'<div class="col col-lg-4 offset-lg-2">' +
|
|
226
|
+
'<div class="bcl-language__list">' +
|
|
227
|
+
'<a href="#" class="bcl-language__item">Language 07</a>' +
|
|
228
|
+
'<a href="#" class="bcl-language__item">Language 08</a>' +
|
|
229
|
+
"</div>" +
|
|
230
|
+
"</div>" +
|
|
231
|
+
'<div class="col col-lg-4">' +
|
|
232
|
+
'<div class="bcl-language__list">' +
|
|
233
|
+
'<a href="#" class="bcl-language__item">Language 09</a>' +
|
|
234
|
+
'<a href="#" class="bcl-language__item">Language 10</a>' +
|
|
235
|
+
"</div>" +
|
|
236
|
+
"</div>" +
|
|
237
|
+
"</div>" +
|
|
238
|
+
"</div>",
|
|
239
|
+
footer:
|
|
240
|
+
'<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>',
|
|
241
|
+
},
|
|
242
|
+
],
|
|
243
|
+
breadcrumbs: {
|
|
244
|
+
attributes: new drupalAttribute().addClass(["mt-3"]),
|
|
245
|
+
links: [
|
|
246
|
+
{ label: "Home", path: "/example" },
|
|
247
|
+
{
|
|
248
|
+
label: "European Commission",
|
|
249
|
+
path: "/example",
|
|
250
|
+
},
|
|
251
|
+
{
|
|
252
|
+
label: "About the European Commission",
|
|
253
|
+
path: "/example",
|
|
254
|
+
},
|
|
255
|
+
{ label: "News" },
|
|
256
|
+
],
|
|
257
|
+
icons_path: "/icons.svg",
|
|
258
|
+
},
|
|
259
|
+
};
|
package/data--no-form.js
ADDED
|
@@ -0,0 +1,192 @@
|
|
|
1
|
+
const drupalAttribute = require("drupal-attribute");
|
|
2
|
+
|
|
3
|
+
module.exports = {
|
|
4
|
+
variant: "eu",
|
|
5
|
+
head: {
|
|
6
|
+
attributes: new drupalAttribute().addClass(["w-100", "shadow-sm"]),
|
|
7
|
+
disable_collapse: true,
|
|
8
|
+
brand: {
|
|
9
|
+
logos: [
|
|
10
|
+
{
|
|
11
|
+
class: "d-none d-lg-block",
|
|
12
|
+
src: "https://cdn1.fpfis.tech.ec.europa.eu/ecl/v3.0.2/eu/images/logo/standard-version/positive/logo-eu--en.svg",
|
|
13
|
+
alt: "desktop european union logo",
|
|
14
|
+
},
|
|
15
|
+
{
|
|
16
|
+
class: "d-lg-none",
|
|
17
|
+
src: "https://cdn1.fpfis.tech.ec.europa.eu/ecl/v3.0.2/eu/images/logo/condensed-version/positive/logo-eu--en.svg",
|
|
18
|
+
alt: "mobile european union logo",
|
|
19
|
+
},
|
|
20
|
+
],
|
|
21
|
+
},
|
|
22
|
+
navigation: {
|
|
23
|
+
items: [
|
|
24
|
+
{
|
|
25
|
+
label: "<span class='d-block d-lg-inline-block'>English</span>",
|
|
26
|
+
path: "#",
|
|
27
|
+
icon_position: "before",
|
|
28
|
+
icon: {
|
|
29
|
+
path: "/icons.svg",
|
|
30
|
+
name: "chat-left-dots-fill",
|
|
31
|
+
size: "xs",
|
|
32
|
+
},
|
|
33
|
+
attributes: new drupalAttribute()
|
|
34
|
+
.setAttribute("data-bs-toggle", "modal")
|
|
35
|
+
.setAttribute("data-bs-target", "#languageModal")
|
|
36
|
+
.addClass("text-center"),
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
label: "<span class='d-block d-lg-inline-block'>Log in</span>",
|
|
40
|
+
path: "#",
|
|
41
|
+
icon_position: "before",
|
|
42
|
+
icon: {
|
|
43
|
+
name: "person-fill",
|
|
44
|
+
size: "xs",
|
|
45
|
+
path: "/icons.svg",
|
|
46
|
+
},
|
|
47
|
+
attributes: new drupalAttribute()
|
|
48
|
+
.setAttribute("data-bs-toggle", "modal")
|
|
49
|
+
.setAttribute("data-bs-target", "#loginModal")
|
|
50
|
+
.addClass("text-center"),
|
|
51
|
+
},
|
|
52
|
+
],
|
|
53
|
+
},
|
|
54
|
+
},
|
|
55
|
+
navbar: {
|
|
56
|
+
color_set: "dark",
|
|
57
|
+
collapse_id: "navbarNavDropdown",
|
|
58
|
+
attributes: new drupalAttribute().addClass("bcl-header__navbar"),
|
|
59
|
+
navigation: {
|
|
60
|
+
navbar: true,
|
|
61
|
+
attributes: new drupalAttribute().addClass("me-auto"),
|
|
62
|
+
items: [
|
|
63
|
+
{
|
|
64
|
+
label: "Home",
|
|
65
|
+
path: "/example",
|
|
66
|
+
active: true,
|
|
67
|
+
attributes: new drupalAttribute().setAttribute(
|
|
68
|
+
"aria-current",
|
|
69
|
+
"page"
|
|
70
|
+
),
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
label: "Item 01",
|
|
74
|
+
path: "/example",
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
label: "Item 02",
|
|
78
|
+
path: "/example",
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
id: "navbarDropdownMenuLink",
|
|
82
|
+
link: true,
|
|
83
|
+
dropdown: true,
|
|
84
|
+
trigger: {
|
|
85
|
+
label: "Dropdown link",
|
|
86
|
+
path: "#",
|
|
87
|
+
attributes: new drupalAttribute().addClass("nav-link"),
|
|
88
|
+
},
|
|
89
|
+
items: [
|
|
90
|
+
{
|
|
91
|
+
label: "Action",
|
|
92
|
+
path: "/example.html",
|
|
93
|
+
},
|
|
94
|
+
{
|
|
95
|
+
label: "Another action",
|
|
96
|
+
path: "/example.html",
|
|
97
|
+
},
|
|
98
|
+
{
|
|
99
|
+
label: "Something else here",
|
|
100
|
+
path: "/example.html",
|
|
101
|
+
},
|
|
102
|
+
],
|
|
103
|
+
},
|
|
104
|
+
],
|
|
105
|
+
},
|
|
106
|
+
},
|
|
107
|
+
modals: [
|
|
108
|
+
{
|
|
109
|
+
id: "loginModal",
|
|
110
|
+
header:
|
|
111
|
+
'<h5 class="modal-title" id="loginModalLabel">Log in</h5>' +
|
|
112
|
+
'<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>',
|
|
113
|
+
body:
|
|
114
|
+
"<h5>Disclaimer 1</h5>" +
|
|
115
|
+
"<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum accumsan eget orci eu aliquet. Suspendisse potenti. Integer volutpat, nisl et placerat tincidunt</p>" +
|
|
116
|
+
"<h5>Disclaimer 2</h5>" +
|
|
117
|
+
"<p>Duis bibendum tristique lobortis. Nam luctus nisi sit amet turpis faucibus, ut dapibus elit sollicitudin. Phasellus a massa magna. Nullam ac imperdiet leo.</p>",
|
|
118
|
+
footer:
|
|
119
|
+
'<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>' +
|
|
120
|
+
'<button type="button" class="btn btn-primary">Access EU login</button>',
|
|
121
|
+
},
|
|
122
|
+
{
|
|
123
|
+
id: "languageModal",
|
|
124
|
+
size: "fullscreen",
|
|
125
|
+
attributes: new drupalAttribute().addClass("bcl-language"),
|
|
126
|
+
header:
|
|
127
|
+
'<h5 class="modal-title" id="languageeModalLabel">Select your language</h5>' +
|
|
128
|
+
'<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>',
|
|
129
|
+
body:
|
|
130
|
+
'<div class="container">' +
|
|
131
|
+
'<div class="row">' +
|
|
132
|
+
'<div class="col col-lg-8 offset-lg-2">' +
|
|
133
|
+
'<h5 class="bcl-language__title">EU official languages</h5>' +
|
|
134
|
+
"</div>" +
|
|
135
|
+
"</div>" +
|
|
136
|
+
'<div class="row">' +
|
|
137
|
+
'<div class="col col-lg-4 offset-lg-2">' +
|
|
138
|
+
'<div class="bcl-language__list">' +
|
|
139
|
+
'<a href="#" class="bcl-language__item">Language 01</a>' +
|
|
140
|
+
'<a href="#" class="bcl-language__item">Language 02</a>' +
|
|
141
|
+
'<a href="#" class="bcl-language__item">Language 03</a>' +
|
|
142
|
+
"</div>" +
|
|
143
|
+
"</div>" +
|
|
144
|
+
'<div class="col col-lg-4">' +
|
|
145
|
+
'<div class="bcl-language__list">' +
|
|
146
|
+
'<a href="#" class="bcl-language__item">Language 04</a>' +
|
|
147
|
+
'<a href="#" class="bcl-language__item">Language 05</a>' +
|
|
148
|
+
'<a href="#" class="bcl-language__item">Language 06</a>' +
|
|
149
|
+
"</div>" +
|
|
150
|
+
"</div>" +
|
|
151
|
+
"</div>" +
|
|
152
|
+
'<div class="row">' +
|
|
153
|
+
'<div class="col col-lg-8 offset-lg-2">' +
|
|
154
|
+
'<h5 class="bcl-language__title">Non EU languages</h5>' +
|
|
155
|
+
"</div>" +
|
|
156
|
+
"</div>" +
|
|
157
|
+
'<div class="row">' +
|
|
158
|
+
'<div class="col col-lg-4 offset-lg-2">' +
|
|
159
|
+
'<div class="bcl-language__list">' +
|
|
160
|
+
'<a href="#" class="bcl-language__item">Language 07</a>' +
|
|
161
|
+
'<a href="#" class="bcl-language__item">Language 08</a>' +
|
|
162
|
+
"</div>" +
|
|
163
|
+
"</div>" +
|
|
164
|
+
'<div class="col col-lg-4">' +
|
|
165
|
+
'<div class="bcl-language__list">' +
|
|
166
|
+
'<a href="#" class="bcl-language__item">Language 09</a>' +
|
|
167
|
+
'<a href="#" class="bcl-language__item">Language 10</a>' +
|
|
168
|
+
"</div>" +
|
|
169
|
+
"</div>" +
|
|
170
|
+
"</div>" +
|
|
171
|
+
"</div>",
|
|
172
|
+
footer:
|
|
173
|
+
'<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>',
|
|
174
|
+
},
|
|
175
|
+
],
|
|
176
|
+
breadcrumbs: {
|
|
177
|
+
attributes: new drupalAttribute().addClass(["mt-3"]),
|
|
178
|
+
links: [
|
|
179
|
+
{ label: "Home", path: "/example" },
|
|
180
|
+
{
|
|
181
|
+
label: "European Union",
|
|
182
|
+
path: "/example",
|
|
183
|
+
},
|
|
184
|
+
{
|
|
185
|
+
label: "About the European Union",
|
|
186
|
+
path: "/example",
|
|
187
|
+
},
|
|
188
|
+
{ label: "News" },
|
|
189
|
+
],
|
|
190
|
+
icons_path: "/icons.svg",
|
|
191
|
+
},
|
|
192
|
+
};
|
package/data--simple.js
CHANGED
|
@@ -1,18 +1,23 @@
|
|
|
1
1
|
const drupalAttribute = require("drupal-attribute");
|
|
2
2
|
|
|
3
3
|
module.exports = {
|
|
4
|
+
variant: "eu",
|
|
4
5
|
head: {
|
|
5
|
-
attributes: new drupalAttribute()
|
|
6
|
+
attributes: new drupalAttribute()
|
|
7
|
+
.addClass(["w-100", "shadow-sm"])
|
|
8
|
+
.setAttribute("aria-label", "Top Navigation"),
|
|
6
9
|
disable_collapse: true,
|
|
7
10
|
brand: {
|
|
8
11
|
logos: [
|
|
9
12
|
{
|
|
10
13
|
class: "d-none d-lg-block",
|
|
11
14
|
src: "https://cdn1.fpfis.tech.ec.europa.eu/ecl/v3.0.2/eu/images/logo/standard-version/positive/logo-eu--en.svg",
|
|
15
|
+
alt: "desktop european union logo",
|
|
12
16
|
},
|
|
13
17
|
{
|
|
14
18
|
class: "d-lg-none",
|
|
15
19
|
src: "https://cdn1.fpfis.tech.ec.europa.eu/ecl/v3.0.2/eu/images/logo/condensed-version/positive/logo-eu--en.svg",
|
|
20
|
+
alt: "mobile european union logo",
|
|
16
21
|
},
|
|
17
22
|
],
|
|
18
23
|
},
|
|
@@ -23,6 +28,7 @@ module.exports = {
|
|
|
23
28
|
path: "#",
|
|
24
29
|
icon_position: "before",
|
|
25
30
|
icon: {
|
|
31
|
+
path: "/icons.svg",
|
|
26
32
|
name: "chat-left-dots-fill",
|
|
27
33
|
size: "xs",
|
|
28
34
|
},
|
|
@@ -38,6 +44,7 @@ module.exports = {
|
|
|
38
44
|
icon: {
|
|
39
45
|
name: "person-fill",
|
|
40
46
|
size: "xs",
|
|
47
|
+
path: "/icons.svg",
|
|
41
48
|
},
|
|
42
49
|
attributes: new drupalAttribute()
|
|
43
50
|
.setAttribute("data-bs-toggle", "modal")
|
|
@@ -50,14 +57,18 @@ module.exports = {
|
|
|
50
57
|
navbar: {
|
|
51
58
|
color_set: "dark",
|
|
52
59
|
collapse_id: "navbarNavDropdown",
|
|
53
|
-
attributes: new drupalAttribute()
|
|
60
|
+
attributes: new drupalAttribute()
|
|
61
|
+
.addClass("bcl-header__navbar")
|
|
62
|
+
.setAttribute("aria-label", "main-navigation"),
|
|
54
63
|
form: {
|
|
55
64
|
attributes: new drupalAttribute().addClass(["d-flex", "mt-3", "mt-lg-0"]),
|
|
56
65
|
submit: {
|
|
57
66
|
variant: "light",
|
|
67
|
+
assistive_text: "search",
|
|
58
68
|
icon: {
|
|
59
69
|
name: "search",
|
|
60
70
|
size: "xs",
|
|
71
|
+
path: "/icons.svg",
|
|
61
72
|
},
|
|
62
73
|
attributes: new drupalAttribute().addClass([
|
|
63
74
|
"border-start-0",
|
|
@@ -92,10 +103,9 @@ module.exports = {
|
|
|
92
103
|
label: "Home",
|
|
93
104
|
path: "/example",
|
|
94
105
|
active: true,
|
|
95
|
-
attributes: new drupalAttribute()
|
|
96
|
-
"aria-current",
|
|
97
|
-
"
|
|
98
|
-
),
|
|
106
|
+
attributes: new drupalAttribute()
|
|
107
|
+
.setAttribute("aria-current", "page")
|
|
108
|
+
.setAttribute("aria-label", "homepage"),
|
|
99
109
|
},
|
|
100
110
|
{
|
|
101
111
|
label: "Item 01",
|
|
@@ -204,7 +214,14 @@ module.exports = {
|
|
|
204
214
|
breadcrumbs: {
|
|
205
215
|
attributes: new drupalAttribute().addClass(["mt-3"]),
|
|
206
216
|
links: [
|
|
207
|
-
{
|
|
217
|
+
{
|
|
218
|
+
label: "Home",
|
|
219
|
+
path: "/example",
|
|
220
|
+
attributes: new drupalAttribute().setAttribute(
|
|
221
|
+
"aria-label",
|
|
222
|
+
"homepage"
|
|
223
|
+
),
|
|
224
|
+
},
|
|
208
225
|
{
|
|
209
226
|
label: "European Union",
|
|
210
227
|
path: "/example",
|
package/data-ec.js
CHANGED
|
@@ -1,18 +1,23 @@
|
|
|
1
1
|
const drupalAttribute = require("drupal-attribute");
|
|
2
2
|
|
|
3
3
|
module.exports = {
|
|
4
|
-
|
|
4
|
+
variant: "ec",
|
|
5
|
+
site_name: "Project name",
|
|
5
6
|
project_logo: {
|
|
6
7
|
path: "https://inno-ecl.s3.amazonaws.com/media/examples/placeholder.svg",
|
|
7
8
|
classes: "d-none d-lg-inline-block",
|
|
9
|
+
alt: "project logo",
|
|
8
10
|
},
|
|
9
11
|
head: {
|
|
10
|
-
attributes: new drupalAttribute()
|
|
12
|
+
attributes: new drupalAttribute()
|
|
13
|
+
.addClass(["w-100", "shadow-sm"])
|
|
14
|
+
.setAttribute("aria-label", "Top Navigation"),
|
|
11
15
|
disable_collapse: true,
|
|
12
16
|
brand: {
|
|
13
17
|
logos: [
|
|
14
18
|
{
|
|
15
19
|
src: "https://cdn1.fpfis.tech.ec.europa.eu/ecl/v3.0.2/ec/images/logo/logo-ec--en.svg",
|
|
20
|
+
alt: "european commission logo",
|
|
16
21
|
},
|
|
17
22
|
],
|
|
18
23
|
},
|
|
@@ -23,6 +28,7 @@ module.exports = {
|
|
|
23
28
|
icon_position: "before",
|
|
24
29
|
icon: {
|
|
25
30
|
name: "link",
|
|
31
|
+
path: "/icons.svg",
|
|
26
32
|
},
|
|
27
33
|
attributes: new drupalAttribute().addClass(["d-none", "d-lg-block"]),
|
|
28
34
|
},
|
|
@@ -31,6 +37,7 @@ module.exports = {
|
|
|
31
37
|
icon_position: "before",
|
|
32
38
|
icon: {
|
|
33
39
|
name: "link",
|
|
40
|
+
path: "/icons.svg",
|
|
34
41
|
},
|
|
35
42
|
attributes: new drupalAttribute().addClass(["d-none", "d-lg-block"]),
|
|
36
43
|
},
|
|
@@ -41,6 +48,7 @@ module.exports = {
|
|
|
41
48
|
icon: {
|
|
42
49
|
name: "chat-left-dots-fill",
|
|
43
50
|
size: "xs",
|
|
51
|
+
path: "/icons.svg",
|
|
44
52
|
},
|
|
45
53
|
attributes: new drupalAttribute()
|
|
46
54
|
.setAttribute("data-bs-toggle", "modal")
|
|
@@ -54,6 +62,7 @@ module.exports = {
|
|
|
54
62
|
icon: {
|
|
55
63
|
name: "person-fill",
|
|
56
64
|
size: "xs",
|
|
65
|
+
path: "/icons.svg",
|
|
57
66
|
},
|
|
58
67
|
attributes: new drupalAttribute()
|
|
59
68
|
.setAttribute("data-bs-toggle", "modal")
|
|
@@ -68,6 +77,7 @@ module.exports = {
|
|
|
68
77
|
icon: {
|
|
69
78
|
name: "bell-fill",
|
|
70
79
|
size: "s",
|
|
80
|
+
path: "/icons.svg",
|
|
71
81
|
},
|
|
72
82
|
attributes: new drupalAttribute().addClass([
|
|
73
83
|
"notification",
|
|
@@ -86,9 +96,11 @@ module.exports = {
|
|
|
86
96
|
attributes: new drupalAttribute().addClass(["d-flex", "mt-3", "mt-lg-0"]),
|
|
87
97
|
submit: {
|
|
88
98
|
variant: "light",
|
|
99
|
+
assistive_text: "search",
|
|
89
100
|
icon: {
|
|
90
101
|
name: "search",
|
|
91
102
|
size: "xs",
|
|
103
|
+
path: "/icons.svg",
|
|
92
104
|
},
|
|
93
105
|
attributes: new drupalAttribute().addClass([
|
|
94
106
|
"border-start-0",
|
|
@@ -158,6 +170,11 @@ module.exports = {
|
|
|
158
170
|
label: "Something else here",
|
|
159
171
|
path: "/example.html",
|
|
160
172
|
},
|
|
173
|
+
{
|
|
174
|
+
label:
|
|
175
|
+
"Very long label with custom text and custom link as an example",
|
|
176
|
+
path: "/example.html",
|
|
177
|
+
},
|
|
161
178
|
],
|
|
162
179
|
},
|
|
163
180
|
],
|
|
@@ -248,5 +265,4 @@ module.exports = {
|
|
|
248
265
|
],
|
|
249
266
|
icons_path: "/icons.svg",
|
|
250
267
|
},
|
|
251
|
-
attributes: new drupalAttribute().addClass("ec__header"),
|
|
252
268
|
};
|
package/data-ucpkn.js
CHANGED
|
@@ -1,25 +1,188 @@
|
|
|
1
1
|
const drupalAttribute = require("drupal-attribute");
|
|
2
2
|
|
|
3
3
|
module.exports = {
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
variant: "ucpkn",
|
|
5
|
+
site_name: "UCP Knowledge Network: Applied knowledge for action",
|
|
6
6
|
light: true,
|
|
7
7
|
project_logo: {
|
|
8
8
|
path: "ucpkn_logo.svg",
|
|
9
9
|
classes: "d-none d-lg-inline-block",
|
|
10
|
+
alt: "ucpkn logo",
|
|
11
|
+
},
|
|
12
|
+
navbar: {
|
|
13
|
+
color_set: "dark",
|
|
14
|
+
collapse_id: "navbarNavDropdown",
|
|
15
|
+
attributes: new drupalAttribute().addClass("bcl-header__navbar"),
|
|
16
|
+
form: {
|
|
17
|
+
attributes: new drupalAttribute().addClass(["d-flex", "mt-3", "mt-lg-0"]),
|
|
18
|
+
submit: {
|
|
19
|
+
variant: "light",
|
|
20
|
+
assistive_text: "search",
|
|
21
|
+
icon: {
|
|
22
|
+
name: "search",
|
|
23
|
+
size: "xs",
|
|
24
|
+
path: "/icons.svg",
|
|
25
|
+
},
|
|
26
|
+
attributes: new drupalAttribute().addClass([
|
|
27
|
+
"border-start-0",
|
|
28
|
+
"rounded-0",
|
|
29
|
+
"rounded-end",
|
|
30
|
+
"d-flex",
|
|
31
|
+
]),
|
|
32
|
+
},
|
|
33
|
+
items: [
|
|
34
|
+
[
|
|
35
|
+
{
|
|
36
|
+
type: "text",
|
|
37
|
+
required: true,
|
|
38
|
+
label: "Search",
|
|
39
|
+
hidden_label: true,
|
|
40
|
+
placeholder: "Search",
|
|
41
|
+
id: "inlineFormInputGroupSearch",
|
|
42
|
+
attributes: new drupalAttribute().addClass([
|
|
43
|
+
"border-start-0",
|
|
44
|
+
"rounded-0",
|
|
45
|
+
"rounded-start",
|
|
46
|
+
]),
|
|
47
|
+
},
|
|
48
|
+
],
|
|
49
|
+
],
|
|
50
|
+
},
|
|
51
|
+
navigation: {
|
|
52
|
+
navbar: true,
|
|
53
|
+
attributes: new drupalAttribute().addClass("me-auto"),
|
|
54
|
+
items: [
|
|
55
|
+
{
|
|
56
|
+
id: "navbarDropdownMenuLink",
|
|
57
|
+
link: true,
|
|
58
|
+
dropdown: true,
|
|
59
|
+
trigger: {
|
|
60
|
+
label: "Knowledge & Capacity",
|
|
61
|
+
path: "#",
|
|
62
|
+
attributes: new drupalAttribute().addClass("nav-link"),
|
|
63
|
+
},
|
|
64
|
+
items: [
|
|
65
|
+
{
|
|
66
|
+
label: "Knowledge Network Capacity Development Pillar",
|
|
67
|
+
path: "/example.html",
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
label: "Disaster Prevention and Risk Management",
|
|
71
|
+
path: "/example.html",
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
label: "Disaster Preparedness",
|
|
75
|
+
path: "/example.html",
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
label: "Emergency Response Coordination Centre",
|
|
79
|
+
path: "/example.html",
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
label: "UCPM Lessons Learnt Programme",
|
|
83
|
+
path: "/example.html",
|
|
84
|
+
},
|
|
85
|
+
],
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
id: "navbarDropdownMenuLinkSecond",
|
|
89
|
+
link: true,
|
|
90
|
+
dropdown: true,
|
|
91
|
+
trigger: {
|
|
92
|
+
label: "Science & Research",
|
|
93
|
+
path: "#",
|
|
94
|
+
attributes: new drupalAttribute().addClass("nav-link"),
|
|
95
|
+
},
|
|
96
|
+
items: [
|
|
97
|
+
{
|
|
98
|
+
label: "Knowledge Network Science Pillar",
|
|
99
|
+
path: "/example.html",
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
label: "Disaster Risk Management Knowledge Centre",
|
|
103
|
+
path: "/example.html",
|
|
104
|
+
},
|
|
105
|
+
{
|
|
106
|
+
label: "Knowledge Gaps",
|
|
107
|
+
path: "/example.html",
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
label: "Data & Tools",
|
|
111
|
+
path: "/example.html",
|
|
112
|
+
},
|
|
113
|
+
],
|
|
114
|
+
},
|
|
115
|
+
{
|
|
116
|
+
id: "navbarDropdownMenuLinkThird",
|
|
117
|
+
link: true,
|
|
118
|
+
dropdown: true,
|
|
119
|
+
trigger: {
|
|
120
|
+
label: "Projects",
|
|
121
|
+
path: "#",
|
|
122
|
+
attributes: new drupalAttribute().addClass("nav-link"),
|
|
123
|
+
},
|
|
124
|
+
items: [
|
|
125
|
+
{
|
|
126
|
+
label: "Union Civil Protection Mechanism Projects",
|
|
127
|
+
path: "/example.html",
|
|
128
|
+
},
|
|
129
|
+
{
|
|
130
|
+
label: "Other Disaster Risk Management Projects",
|
|
131
|
+
path: "/example.html",
|
|
132
|
+
},
|
|
133
|
+
{
|
|
134
|
+
label: "EU funding for disaster management",
|
|
135
|
+
path: "/example.html",
|
|
136
|
+
},
|
|
137
|
+
],
|
|
138
|
+
},
|
|
139
|
+
{
|
|
140
|
+
label: "Stories",
|
|
141
|
+
path: "/example",
|
|
142
|
+
},
|
|
143
|
+
{
|
|
144
|
+
id: "navbarDropdownMenuLinkProjects",
|
|
145
|
+
link: true,
|
|
146
|
+
dropdown: true,
|
|
147
|
+
trigger: {
|
|
148
|
+
label: "About",
|
|
149
|
+
path: "#",
|
|
150
|
+
attributes: new drupalAttribute().addClass("nav-link"),
|
|
151
|
+
},
|
|
152
|
+
items: [
|
|
153
|
+
{
|
|
154
|
+
label: "Knowledge Network Governance",
|
|
155
|
+
path: "/example.html",
|
|
156
|
+
},
|
|
157
|
+
{
|
|
158
|
+
label: "The EU Civil Protection Mechanism",
|
|
159
|
+
path: "/example.html",
|
|
160
|
+
},
|
|
161
|
+
{
|
|
162
|
+
label: "Information pack",
|
|
163
|
+
path: "/example.html",
|
|
164
|
+
},
|
|
165
|
+
],
|
|
166
|
+
},
|
|
167
|
+
],
|
|
168
|
+
},
|
|
10
169
|
},
|
|
11
170
|
head: {
|
|
12
|
-
attributes: new drupalAttribute()
|
|
171
|
+
attributes: new drupalAttribute()
|
|
172
|
+
.addClass(["w-100", "shadow-sm"])
|
|
173
|
+
.setAttribute("aria-label", "Top Navigation"),
|
|
13
174
|
disable_collapse: true,
|
|
14
175
|
brand: {
|
|
15
176
|
logos: [
|
|
16
177
|
{
|
|
17
178
|
class: "d-none d-lg-block",
|
|
18
179
|
src: "https://cdn1.fpfis.tech.ec.europa.eu/ecl/v3.0.2/eu/images/logo/standard-version/positive/logo-eu--en.svg",
|
|
180
|
+
alt: "desktop european union logo",
|
|
19
181
|
},
|
|
20
182
|
{
|
|
21
183
|
class: "d-lg-none",
|
|
22
184
|
src: "https://cdn1.fpfis.tech.ec.europa.eu/ecl/v3.0.2/eu/images/logo/condensed-version/positive/logo-eu--en.svg",
|
|
185
|
+
alt: "mobile european union logo",
|
|
23
186
|
},
|
|
24
187
|
],
|
|
25
188
|
},
|
package/data.js
CHANGED
|
@@ -1,23 +1,29 @@
|
|
|
1
1
|
const drupalAttribute = require("drupal-attribute");
|
|
2
2
|
|
|
3
3
|
module.exports = {
|
|
4
|
-
|
|
4
|
+
variant: "eu",
|
|
5
|
+
site_name: "Project name",
|
|
5
6
|
project_logo: {
|
|
6
7
|
path: "https://inno-ecl.s3.amazonaws.com/media/examples/placeholder.svg",
|
|
7
8
|
classes: "d-none d-lg-inline-block",
|
|
9
|
+
alt: "project logo",
|
|
8
10
|
},
|
|
9
11
|
head: {
|
|
10
|
-
attributes: new drupalAttribute()
|
|
12
|
+
attributes: new drupalAttribute()
|
|
13
|
+
.addClass(["w-100", "shadow-sm"])
|
|
14
|
+
.setAttribute("aria-label", "Top Navigation"),
|
|
11
15
|
disable_collapse: true,
|
|
12
16
|
brand: {
|
|
13
17
|
logos: [
|
|
14
18
|
{
|
|
15
19
|
class: "d-none d-lg-block",
|
|
16
20
|
src: "https://cdn1.fpfis.tech.ec.europa.eu/ecl/v3.0.2/eu/images/logo/standard-version/positive/logo-eu--en.svg",
|
|
21
|
+
alt: "desktop project logo",
|
|
17
22
|
},
|
|
18
23
|
{
|
|
19
24
|
class: "d-lg-none",
|
|
20
25
|
src: "https://cdn1.fpfis.tech.ec.europa.eu/ecl/v3.0.2/eu/images/logo/condensed-version/positive/logo-eu--en.svg",
|
|
26
|
+
alt: "mobile project logo",
|
|
21
27
|
},
|
|
22
28
|
],
|
|
23
29
|
},
|
|
@@ -27,6 +33,7 @@ module.exports = {
|
|
|
27
33
|
label: "Link",
|
|
28
34
|
icon_position: "before",
|
|
29
35
|
icon: {
|
|
36
|
+
path: "/icons.svg",
|
|
30
37
|
name: "link",
|
|
31
38
|
},
|
|
32
39
|
attributes: new drupalAttribute().addClass(["d-none", "d-lg-block"]),
|
|
@@ -35,6 +42,7 @@ module.exports = {
|
|
|
35
42
|
label: "Link",
|
|
36
43
|
icon_position: "before",
|
|
37
44
|
icon: {
|
|
45
|
+
path: "/icons.svg",
|
|
38
46
|
name: "link",
|
|
39
47
|
},
|
|
40
48
|
attributes: new drupalAttribute().addClass(["d-none", "d-lg-block"]),
|
|
@@ -44,6 +52,7 @@ module.exports = {
|
|
|
44
52
|
path: "#",
|
|
45
53
|
icon_position: "before",
|
|
46
54
|
icon: {
|
|
55
|
+
path: "/icons.svg",
|
|
47
56
|
name: "chat-left-dots-fill",
|
|
48
57
|
size: "xs",
|
|
49
58
|
},
|
|
@@ -57,6 +66,7 @@ module.exports = {
|
|
|
57
66
|
path: "#",
|
|
58
67
|
icon_position: "before",
|
|
59
68
|
icon: {
|
|
69
|
+
path: "/icons.svg",
|
|
60
70
|
name: "person-fill",
|
|
61
71
|
size: "xs",
|
|
62
72
|
},
|
|
@@ -71,6 +81,7 @@ module.exports = {
|
|
|
71
81
|
remove_icon_spacers: true,
|
|
72
82
|
icon_position: "before",
|
|
73
83
|
icon: {
|
|
84
|
+
path: "/icons.svg",
|
|
74
85
|
name: "bell-fill",
|
|
75
86
|
size: "s",
|
|
76
87
|
},
|
|
@@ -91,7 +102,9 @@ module.exports = {
|
|
|
91
102
|
attributes: new drupalAttribute().addClass(["d-flex", "mt-3", "mt-lg-0"]),
|
|
92
103
|
submit: {
|
|
93
104
|
variant: "light",
|
|
105
|
+
assistive_text: "search",
|
|
94
106
|
icon: {
|
|
107
|
+
path: "/icons.svg",
|
|
95
108
|
name: "search",
|
|
96
109
|
size: "xs",
|
|
97
110
|
},
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@openeuropa/bcl-data-header",
|
|
3
3
|
"author": "European Commission",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
|
-
"version": "0.
|
|
5
|
+
"version": "0.18.0",
|
|
6
6
|
"description": "OE header data",
|
|
7
7
|
"publishConfig": {
|
|
8
8
|
"access": "public"
|
|
@@ -20,5 +20,5 @@
|
|
|
20
20
|
"component-library",
|
|
21
21
|
"design-system"
|
|
22
22
|
],
|
|
23
|
-
"gitHead": "
|
|
23
|
+
"gitHead": "a82834df6dff563a956a79bf2899c92742dd5820"
|
|
24
24
|
}
|