@openeuropa/bcl-data-header 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/data--ec.js +44 -0
- package/data--loggedIn.js +37 -0
- package/data--modals.js +15 -0
- package/data--navbar.js +92 -0
- package/data--neutral.js +39 -0
- package/data--no-form.js +140 -0
- package/data--simple.js +73 -0
- package/data--top-navbar.js +52 -0
- package/data--ucpkn.js +189 -0
- package/data.js +35 -122
- package/package.json +6 -2
- package/data-ecl.js +0 -63
package/data--ec.js
ADDED
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
const drupalAttribute = require("drupal-attribute");
|
|
2
|
+
|
|
3
|
+
const languageList = require("@openeuropa/bcl-language-list/data/data-modal");
|
|
4
|
+
const breadcrumbs = require("@openeuropa/bcl-data-breadcrumb/data");
|
|
5
|
+
const navbarTop = require("@openeuropa/bcl-data-header/data--top-navbar");
|
|
6
|
+
const navbar = require("@openeuropa/bcl-data-header/data--navbar");
|
|
7
|
+
const modals = require("@openeuropa/bcl-data-header/data--modals");
|
|
8
|
+
|
|
9
|
+
module.exports = {
|
|
10
|
+
variant: "ec",
|
|
11
|
+
site_name: "Project name",
|
|
12
|
+
project_logo: {
|
|
13
|
+
path: "https://inno-ecl.s3.amazonaws.com/media/examples/placeholder.svg",
|
|
14
|
+
classes: "d-none d-lg-inline-block",
|
|
15
|
+
alt: "project logo",
|
|
16
|
+
},
|
|
17
|
+
project_link: "/example.html",
|
|
18
|
+
head: {
|
|
19
|
+
attributes: new drupalAttribute()
|
|
20
|
+
.addClass(["w-100", "shadow-sm", "bcl-header__top-navbar"])
|
|
21
|
+
.setAttribute("aria-label", "Top Navigation"),
|
|
22
|
+
disable_collapse: false,
|
|
23
|
+
collapse_id: "topNavbarDropdown",
|
|
24
|
+
brand: {
|
|
25
|
+
link: "/example.html",
|
|
26
|
+
logos: [
|
|
27
|
+
{
|
|
28
|
+
src: "https://cdn1.fpfis.tech.ec.europa.eu/ecl/v3.0.2/ec/images/logo/logo-ec--en.svg",
|
|
29
|
+
alt: "european commission logo",
|
|
30
|
+
},
|
|
31
|
+
],
|
|
32
|
+
},
|
|
33
|
+
navigation: {
|
|
34
|
+
items: navbarTop,
|
|
35
|
+
},
|
|
36
|
+
},
|
|
37
|
+
navbar,
|
|
38
|
+
modals,
|
|
39
|
+
language_modal: { ...languageList, variant: "ec" },
|
|
40
|
+
breadcrumbs: {
|
|
41
|
+
...breadcrumbs,
|
|
42
|
+
attributes: new drupalAttribute().addClass(["mt-3"]),
|
|
43
|
+
},
|
|
44
|
+
};
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
const drupalAttribute = require("drupal-attribute");
|
|
2
|
+
|
|
3
|
+
module.exports = [
|
|
4
|
+
{
|
|
5
|
+
label: "My account",
|
|
6
|
+
path: "/example.html",
|
|
7
|
+
icon_position: "before",
|
|
8
|
+
remove_icon_spacers: true,
|
|
9
|
+
attributes: new drupalAttribute().addClass(["py-lg-2", "pb-3"]),
|
|
10
|
+
icon: {
|
|
11
|
+
name: "person-fill",
|
|
12
|
+
size: "xs",
|
|
13
|
+
path: "/icons.svg",
|
|
14
|
+
attributes: new drupalAttribute().addClass(["me-2-5"]),
|
|
15
|
+
},
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
label: "Log out",
|
|
19
|
+
path: "/example.html",
|
|
20
|
+
icon_position: "before",
|
|
21
|
+
remove_icon_spacers: true,
|
|
22
|
+
attributes: new drupalAttribute().addClass([
|
|
23
|
+
"border-top-lg-0",
|
|
24
|
+
"border-top",
|
|
25
|
+
"mx-n3",
|
|
26
|
+
"px-4",
|
|
27
|
+
"py-lg-2",
|
|
28
|
+
"pt-3",
|
|
29
|
+
]),
|
|
30
|
+
icon: {
|
|
31
|
+
name: "lock-fill",
|
|
32
|
+
size: "xs",
|
|
33
|
+
path: "/icons.svg",
|
|
34
|
+
attributes: new drupalAttribute().addClass("me-2-5"),
|
|
35
|
+
},
|
|
36
|
+
},
|
|
37
|
+
];
|
package/data--modals.js
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
const { getDummyText } = require("@openeuropa/bcl-data-utils");
|
|
2
|
+
|
|
3
|
+
module.exports = [
|
|
4
|
+
{
|
|
5
|
+
id: "loginModal",
|
|
6
|
+
header: `<h5 class="modal-title" id="loginModalLabel">Log in</h5>
|
|
7
|
+
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>`,
|
|
8
|
+
body: `<h5>Disclaimer 1</h5>
|
|
9
|
+
${getDummyText(3, true)}
|
|
10
|
+
<h5>Disclaimer 2</h5>
|
|
11
|
+
${getDummyText(3, true)}`,
|
|
12
|
+
footer: `<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
13
|
+
<button type="button" class="btn btn-primary">Access EU login</button>`,
|
|
14
|
+
},
|
|
15
|
+
];
|
package/data--navbar.js
ADDED
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
const drupalAttribute = require("drupal-attribute");
|
|
2
|
+
|
|
3
|
+
module.exports = {
|
|
4
|
+
color_set: "dark",
|
|
5
|
+
collapse_id: "navbarNavDropdown",
|
|
6
|
+
attributes: new drupalAttribute()
|
|
7
|
+
.addClass("bcl-header__navbar")
|
|
8
|
+
.setAttribute("aria-label", "Main Navigation"),
|
|
9
|
+
form: {
|
|
10
|
+
attributes: new drupalAttribute().addClass(["d-flex", "mt-3", "mt-lg-0"]),
|
|
11
|
+
submit: {
|
|
12
|
+
variant: "light",
|
|
13
|
+
assistive_text: "search",
|
|
14
|
+
icon: {
|
|
15
|
+
name: "search",
|
|
16
|
+
size: "xs",
|
|
17
|
+
path: "/icons.svg",
|
|
18
|
+
},
|
|
19
|
+
attributes: new drupalAttribute().addClass([
|
|
20
|
+
"border-start-0",
|
|
21
|
+
"rounded-0",
|
|
22
|
+
"rounded-end",
|
|
23
|
+
]),
|
|
24
|
+
},
|
|
25
|
+
items: [
|
|
26
|
+
[
|
|
27
|
+
{
|
|
28
|
+
type: "text",
|
|
29
|
+
required: true,
|
|
30
|
+
label: "Search",
|
|
31
|
+
hidden_label: true,
|
|
32
|
+
placeholder: "Search",
|
|
33
|
+
id: "inlineFormInputGroupSearch",
|
|
34
|
+
attributes: new drupalAttribute().addClass([
|
|
35
|
+
"border-start-0",
|
|
36
|
+
"rounded-0",
|
|
37
|
+
"rounded-start",
|
|
38
|
+
]),
|
|
39
|
+
},
|
|
40
|
+
],
|
|
41
|
+
],
|
|
42
|
+
},
|
|
43
|
+
navigation: {
|
|
44
|
+
navbar: true,
|
|
45
|
+
attributes: new drupalAttribute().addClass("me-auto"),
|
|
46
|
+
items: [
|
|
47
|
+
{
|
|
48
|
+
label: "Home",
|
|
49
|
+
path: "/example.html",
|
|
50
|
+
active: true,
|
|
51
|
+
attributes: new drupalAttribute().setAttribute("aria-current", "page"),
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
label: "Item 01",
|
|
55
|
+
path: "/example.html",
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
label: "Item 02",
|
|
59
|
+
path: "/example.html",
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
id: "navbarDropdownMenuLink",
|
|
63
|
+
link: true,
|
|
64
|
+
dropdown: true,
|
|
65
|
+
trigger: {
|
|
66
|
+
label: "Dropdown link",
|
|
67
|
+
path: "#",
|
|
68
|
+
attributes: new drupalAttribute().addClass("nav-link"),
|
|
69
|
+
},
|
|
70
|
+
items: [
|
|
71
|
+
{
|
|
72
|
+
label: "Action",
|
|
73
|
+
path: "/example.html",
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
label: "Another action",
|
|
77
|
+
path: "/example.html",
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
label: "Something else here",
|
|
81
|
+
path: "/example.html",
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
label:
|
|
85
|
+
"Very long label with custom text and custom link as an example",
|
|
86
|
+
path: "/example.html",
|
|
87
|
+
},
|
|
88
|
+
],
|
|
89
|
+
},
|
|
90
|
+
],
|
|
91
|
+
},
|
|
92
|
+
};
|
package/data--neutral.js
ADDED
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
const drupalAttribute = require("drupal-attribute");
|
|
2
|
+
|
|
3
|
+
const languageList = require("@openeuropa/bcl-language-list/data/data-modal");
|
|
4
|
+
const breadcrumbs = require("@openeuropa/bcl-data-breadcrumb/data");
|
|
5
|
+
const navbarTop = require("@openeuropa/bcl-data-header/data--top-navbar");
|
|
6
|
+
const navbar = require("@openeuropa/bcl-data-header/data--navbar");
|
|
7
|
+
const modals = require("@openeuropa/bcl-data-header/data--modals");
|
|
8
|
+
|
|
9
|
+
module.exports = {
|
|
10
|
+
site_name: "Project name",
|
|
11
|
+
site_name_classes: "h5 d-inline-block d-lg-none",
|
|
12
|
+
head: {
|
|
13
|
+
brand: {
|
|
14
|
+
logos: [
|
|
15
|
+
{
|
|
16
|
+
src: "https://inno-ecl.s3.amazonaws.com/media/examples/placeholder.svg",
|
|
17
|
+
alt: "project logo",
|
|
18
|
+
},
|
|
19
|
+
],
|
|
20
|
+
label: "Project name",
|
|
21
|
+
link: "/example.html",
|
|
22
|
+
},
|
|
23
|
+
attributes: new drupalAttribute()
|
|
24
|
+
.addClass(["w-100", "bcl-header__top-navbar"])
|
|
25
|
+
.setAttribute("aria-label", "Top Navigation"),
|
|
26
|
+
disable_collapse: false,
|
|
27
|
+
collapse_id: "topNavbarDropdown",
|
|
28
|
+
navigation: {
|
|
29
|
+
items: navbarTop,
|
|
30
|
+
},
|
|
31
|
+
},
|
|
32
|
+
navbar,
|
|
33
|
+
modals,
|
|
34
|
+
language_modal: languageList,
|
|
35
|
+
breadcrumbs: {
|
|
36
|
+
...breadcrumbs,
|
|
37
|
+
attributes: new drupalAttribute().addClass(["mt-3"]),
|
|
38
|
+
},
|
|
39
|
+
};
|
package/data--no-form.js
ADDED
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
const drupalAttribute = require("drupal-attribute");
|
|
2
|
+
|
|
3
|
+
const modals = require("@openeuropa/bcl-data-header/data--modals");
|
|
4
|
+
const languageList = require("@openeuropa/bcl-language-list/data/data-modal");
|
|
5
|
+
|
|
6
|
+
module.exports = {
|
|
7
|
+
variant: "eu",
|
|
8
|
+
head: {
|
|
9
|
+
attributes: new drupalAttribute().addClass([
|
|
10
|
+
"w-100",
|
|
11
|
+
"shadow-sm",
|
|
12
|
+
"bcl-header__top-navbar",
|
|
13
|
+
]),
|
|
14
|
+
disable_collapse: false,
|
|
15
|
+
collapse_id: "topNavbarDropdown",
|
|
16
|
+
brand: {
|
|
17
|
+
link: "/example.html",
|
|
18
|
+
logos: [
|
|
19
|
+
{
|
|
20
|
+
class: "d-none d-lg-block",
|
|
21
|
+
src: "https://cdn1.fpfis.tech.ec.europa.eu/ecl/v3.0.2/eu/images/logo/standard-version/positive/logo-eu--en.svg",
|
|
22
|
+
alt: "desktop european union logo",
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
class: "d-lg-none",
|
|
26
|
+
src: "https://cdn1.fpfis.tech.ec.europa.eu/ecl/v3.0.2/eu/images/logo/condensed-version/positive/logo-eu--en.svg",
|
|
27
|
+
alt: "mobile european union logo",
|
|
28
|
+
},
|
|
29
|
+
],
|
|
30
|
+
},
|
|
31
|
+
navigation: {
|
|
32
|
+
items: [
|
|
33
|
+
{
|
|
34
|
+
label: "English",
|
|
35
|
+
path: "/example.html",
|
|
36
|
+
icon_position: "before",
|
|
37
|
+
remove_icon_spacers: true,
|
|
38
|
+
icon: {
|
|
39
|
+
name: "chat-left-dots-fill",
|
|
40
|
+
size: "xs",
|
|
41
|
+
path: "/icons.svg",
|
|
42
|
+
attributes: new drupalAttribute().addClass("me-2-5"),
|
|
43
|
+
},
|
|
44
|
+
attributes: new drupalAttribute()
|
|
45
|
+
.setAttribute("data-bs-toggle", "modal")
|
|
46
|
+
.setAttribute("data-bs-target", "#languageModal")
|
|
47
|
+
.addClass("text-center"),
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
label: "Log in",
|
|
51
|
+
path: "/example.html",
|
|
52
|
+
icon_position: "before",
|
|
53
|
+
remove_icon_spacers: true,
|
|
54
|
+
icon: {
|
|
55
|
+
name: "person-fill",
|
|
56
|
+
size: "xs",
|
|
57
|
+
path: "/icons.svg",
|
|
58
|
+
attributes: new drupalAttribute().addClass("me-2-5"),
|
|
59
|
+
},
|
|
60
|
+
attributes: new drupalAttribute()
|
|
61
|
+
.setAttribute("data-bs-toggle", "modal")
|
|
62
|
+
.setAttribute("data-bs-target", "#loginModal")
|
|
63
|
+
.addClass("text-center"),
|
|
64
|
+
},
|
|
65
|
+
],
|
|
66
|
+
},
|
|
67
|
+
},
|
|
68
|
+
navbar: {
|
|
69
|
+
color_set: "dark",
|
|
70
|
+
collapse_id: "navbarNavDropdown",
|
|
71
|
+
attributes: new drupalAttribute()
|
|
72
|
+
.addClass("bcl-header__navbar")
|
|
73
|
+
.setAttribute("aria-label", "Main Navigation"),
|
|
74
|
+
navigation: {
|
|
75
|
+
navbar: true,
|
|
76
|
+
attributes: new drupalAttribute().addClass("me-auto"),
|
|
77
|
+
items: [
|
|
78
|
+
{
|
|
79
|
+
label: "Home",
|
|
80
|
+
path: "/example.html",
|
|
81
|
+
active: true,
|
|
82
|
+
attributes: new drupalAttribute().setAttribute(
|
|
83
|
+
"aria-current",
|
|
84
|
+
"page"
|
|
85
|
+
),
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
label: "Item 01",
|
|
89
|
+
path: "/example.html",
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
label: "Item 02",
|
|
93
|
+
path: "/example.html",
|
|
94
|
+
},
|
|
95
|
+
{
|
|
96
|
+
id: "navbarDropdownMenuLink",
|
|
97
|
+
link: true,
|
|
98
|
+
dropdown: true,
|
|
99
|
+
trigger: {
|
|
100
|
+
label: "Dropdown link",
|
|
101
|
+
path: "/example.html",
|
|
102
|
+
attributes: new drupalAttribute().addClass("nav-link"),
|
|
103
|
+
},
|
|
104
|
+
items: [
|
|
105
|
+
{
|
|
106
|
+
label: "Action",
|
|
107
|
+
path: "/example.html",
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
label: "Another action",
|
|
111
|
+
path: "/example.html",
|
|
112
|
+
},
|
|
113
|
+
{
|
|
114
|
+
label: "Something else here",
|
|
115
|
+
path: "/example.html",
|
|
116
|
+
},
|
|
117
|
+
],
|
|
118
|
+
},
|
|
119
|
+
],
|
|
120
|
+
},
|
|
121
|
+
},
|
|
122
|
+
modals,
|
|
123
|
+
language_modal: languageList,
|
|
124
|
+
breadcrumbs: {
|
|
125
|
+
attributes: new drupalAttribute().addClass(["mt-3"]),
|
|
126
|
+
links: [
|
|
127
|
+
{ label: "Home", path: "/example.html" },
|
|
128
|
+
{
|
|
129
|
+
label: "European Union",
|
|
130
|
+
path: "/example.html",
|
|
131
|
+
},
|
|
132
|
+
{
|
|
133
|
+
label: "About the European Union",
|
|
134
|
+
path: "/example.html",
|
|
135
|
+
},
|
|
136
|
+
{ label: "News" },
|
|
137
|
+
],
|
|
138
|
+
icon_path: "/icons.svg",
|
|
139
|
+
},
|
|
140
|
+
};
|
package/data--simple.js
ADDED
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
const drupalAttribute = require("drupal-attribute");
|
|
2
|
+
|
|
3
|
+
const languageList = require("@openeuropa/bcl-language-list/data/data-modal");
|
|
4
|
+
const breadcrumbs = require("@openeuropa/bcl-data-breadcrumb/data");
|
|
5
|
+
const navbar = require("@openeuropa/bcl-data-header/data--navbar");
|
|
6
|
+
const modals = require("@openeuropa/bcl-data-header/data--modals");
|
|
7
|
+
|
|
8
|
+
module.exports = {
|
|
9
|
+
variant: "eu",
|
|
10
|
+
head: {
|
|
11
|
+
attributes: new drupalAttribute()
|
|
12
|
+
.addClass(["w-100", "shadow-sm", "bcl-header__top-navbar"])
|
|
13
|
+
.setAttribute("aria-label", "Top Navigation"),
|
|
14
|
+
disable_collapse: false,
|
|
15
|
+
collapse_id: "topNavbarDropdown",
|
|
16
|
+
brand: {
|
|
17
|
+
link: "/example.html",
|
|
18
|
+
logos: [
|
|
19
|
+
{
|
|
20
|
+
class: "d-none d-lg-block",
|
|
21
|
+
src: "https://cdn1.fpfis.tech.ec.europa.eu/ecl/v3.0.2/eu/images/logo/standard-version/positive/logo-eu--en.svg",
|
|
22
|
+
alt: "desktop european union logo",
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
class: "d-lg-none",
|
|
26
|
+
src: "https://cdn1.fpfis.tech.ec.europa.eu/ecl/v3.0.2/eu/images/logo/condensed-version/positive/logo-eu--en.svg",
|
|
27
|
+
alt: "mobile european union logo",
|
|
28
|
+
},
|
|
29
|
+
],
|
|
30
|
+
},
|
|
31
|
+
navigation: {
|
|
32
|
+
items: [
|
|
33
|
+
{
|
|
34
|
+
label: "English",
|
|
35
|
+
path: "/example.html",
|
|
36
|
+
icon_position: "before",
|
|
37
|
+
remove_icon_spacers: true,
|
|
38
|
+
icon: {
|
|
39
|
+
name: "chat-left-dots-fill",
|
|
40
|
+
size: "xs",
|
|
41
|
+
path: "/icons.svg",
|
|
42
|
+
attributes: new drupalAttribute().addClass("me-2-5"),
|
|
43
|
+
},
|
|
44
|
+
attributes: new drupalAttribute()
|
|
45
|
+
.setAttribute("data-bs-toggle", "modal")
|
|
46
|
+
.setAttribute("data-bs-target", "#languageModal"),
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
label: "Log in",
|
|
50
|
+
path: "/example.html",
|
|
51
|
+
icon_position: "before",
|
|
52
|
+
remove_icon_spacers: true,
|
|
53
|
+
icon: {
|
|
54
|
+
name: "person-fill",
|
|
55
|
+
size: "xs",
|
|
56
|
+
path: "/icons.svg",
|
|
57
|
+
attributes: new drupalAttribute().addClass("me-2-5"),
|
|
58
|
+
},
|
|
59
|
+
attributes: new drupalAttribute()
|
|
60
|
+
.setAttribute("data-bs-toggle", "modal")
|
|
61
|
+
.setAttribute("data-bs-target", "#loginModal"),
|
|
62
|
+
},
|
|
63
|
+
],
|
|
64
|
+
},
|
|
65
|
+
},
|
|
66
|
+
navbar,
|
|
67
|
+
modals,
|
|
68
|
+
language_modal: { ...languageList, variant: "eu" },
|
|
69
|
+
breadcrumbs: {
|
|
70
|
+
...breadcrumbs,
|
|
71
|
+
attributes: new drupalAttribute().addClass(["mt-3"]),
|
|
72
|
+
},
|
|
73
|
+
};
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
const drupalAttribute = require("drupal-attribute");
|
|
2
|
+
|
|
3
|
+
module.exports = [
|
|
4
|
+
{
|
|
5
|
+
label: "Link",
|
|
6
|
+
icon_position: "before",
|
|
7
|
+
path: "/example.html",
|
|
8
|
+
icon: {
|
|
9
|
+
name: "link",
|
|
10
|
+
path: "/icons.svg",
|
|
11
|
+
},
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
label: "Link",
|
|
15
|
+
icon_position: "before",
|
|
16
|
+
path: "/example.html",
|
|
17
|
+
icon: {
|
|
18
|
+
name: "link",
|
|
19
|
+
path: "/icons.svg",
|
|
20
|
+
},
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
label: "English",
|
|
24
|
+
path: "/example.html",
|
|
25
|
+
icon_position: "before",
|
|
26
|
+
remove_icon_spacers: true,
|
|
27
|
+
icon: {
|
|
28
|
+
name: "chat-left-dots-fill",
|
|
29
|
+
size: "xs",
|
|
30
|
+
path: "/icons.svg",
|
|
31
|
+
attributes: new drupalAttribute().addClass("me-2-5"),
|
|
32
|
+
},
|
|
33
|
+
attributes: new drupalAttribute()
|
|
34
|
+
.setAttribute("data-bs-toggle", "modal")
|
|
35
|
+
.setAttribute("data-bs-target", "#languageModal"),
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
label: "Log in",
|
|
39
|
+
path: "/example.html",
|
|
40
|
+
icon_position: "before",
|
|
41
|
+
remove_icon_spacers: true,
|
|
42
|
+
icon: {
|
|
43
|
+
name: "person-fill",
|
|
44
|
+
size: "xs",
|
|
45
|
+
path: "/icons.svg",
|
|
46
|
+
attributes: new drupalAttribute().addClass("me-2-5"),
|
|
47
|
+
},
|
|
48
|
+
attributes: new drupalAttribute()
|
|
49
|
+
.setAttribute("data-bs-toggle", "modal")
|
|
50
|
+
.setAttribute("data-bs-target", "#loginModal"),
|
|
51
|
+
},
|
|
52
|
+
];
|
package/data--ucpkn.js
ADDED
|
@@ -0,0 +1,189 @@
|
|
|
1
|
+
const drupalAttribute = require("drupal-attribute");
|
|
2
|
+
|
|
3
|
+
module.exports = {
|
|
4
|
+
variant: "ucpkn",
|
|
5
|
+
site_name: "UCP Knowledge Network: Applied knowledge for action",
|
|
6
|
+
light: true,
|
|
7
|
+
project_logo: {
|
|
8
|
+
path: "ucpkn_logo.svg",
|
|
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
|
+
]),
|
|
31
|
+
},
|
|
32
|
+
items: [
|
|
33
|
+
[
|
|
34
|
+
{
|
|
35
|
+
type: "text",
|
|
36
|
+
required: true,
|
|
37
|
+
label: "Search",
|
|
38
|
+
hidden_label: true,
|
|
39
|
+
placeholder: "Search",
|
|
40
|
+
id: "inlineFormInputGroupSearch",
|
|
41
|
+
attributes: new drupalAttribute().addClass([
|
|
42
|
+
"border-start-0",
|
|
43
|
+
"rounded-0",
|
|
44
|
+
"rounded-start",
|
|
45
|
+
]),
|
|
46
|
+
},
|
|
47
|
+
],
|
|
48
|
+
],
|
|
49
|
+
},
|
|
50
|
+
navigation: {
|
|
51
|
+
navbar: true,
|
|
52
|
+
attributes: new drupalAttribute().addClass("me-auto"),
|
|
53
|
+
items: [
|
|
54
|
+
{
|
|
55
|
+
id: "navbarDropdownMenuLink",
|
|
56
|
+
link: true,
|
|
57
|
+
dropdown: true,
|
|
58
|
+
trigger: {
|
|
59
|
+
label: "Knowledge & Capacity",
|
|
60
|
+
path: "/example.html",
|
|
61
|
+
attributes: new drupalAttribute().addClass("nav-link"),
|
|
62
|
+
},
|
|
63
|
+
items: [
|
|
64
|
+
{
|
|
65
|
+
label: "Knowledge Network Capacity Development Pillar",
|
|
66
|
+
path: "/example.html",
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
label: "Disaster Prevention and Risk Management",
|
|
70
|
+
path: "/example.html",
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
label: "Disaster Preparedness",
|
|
74
|
+
path: "/example.html",
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
label: "Emergency Response Coordination Centre",
|
|
78
|
+
path: "/example.html",
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
label: "UCPM Lessons Learnt Programme",
|
|
82
|
+
path: "/example.html",
|
|
83
|
+
},
|
|
84
|
+
],
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
id: "navbarDropdownMenuLinkSecond",
|
|
88
|
+
link: true,
|
|
89
|
+
dropdown: true,
|
|
90
|
+
trigger: {
|
|
91
|
+
label: "Science & Research",
|
|
92
|
+
path: "/example.html",
|
|
93
|
+
attributes: new drupalAttribute().addClass("nav-link"),
|
|
94
|
+
},
|
|
95
|
+
items: [
|
|
96
|
+
{
|
|
97
|
+
label: "Knowledge Network Science Pillar",
|
|
98
|
+
path: "/example.html",
|
|
99
|
+
},
|
|
100
|
+
{
|
|
101
|
+
label: "Disaster Risk Management Knowledge Centre",
|
|
102
|
+
path: "/example.html",
|
|
103
|
+
},
|
|
104
|
+
{
|
|
105
|
+
label: "Knowledge Gaps",
|
|
106
|
+
path: "/example.html",
|
|
107
|
+
},
|
|
108
|
+
{
|
|
109
|
+
label: "Data & Tools",
|
|
110
|
+
path: "/example.html",
|
|
111
|
+
},
|
|
112
|
+
],
|
|
113
|
+
},
|
|
114
|
+
{
|
|
115
|
+
id: "navbarDropdownMenuLinkThird",
|
|
116
|
+
link: true,
|
|
117
|
+
dropdown: true,
|
|
118
|
+
trigger: {
|
|
119
|
+
label: "Projects",
|
|
120
|
+
path: "/example.html",
|
|
121
|
+
attributes: new drupalAttribute().addClass("nav-link"),
|
|
122
|
+
},
|
|
123
|
+
items: [
|
|
124
|
+
{
|
|
125
|
+
label: "Union Civil Protection Mechanism Projects",
|
|
126
|
+
path: "/example.html",
|
|
127
|
+
},
|
|
128
|
+
{
|
|
129
|
+
label: "Other Disaster Risk Management Projects",
|
|
130
|
+
path: "/example.html",
|
|
131
|
+
},
|
|
132
|
+
{
|
|
133
|
+
label: "EU funding for disaster management",
|
|
134
|
+
path: "/example.html",
|
|
135
|
+
},
|
|
136
|
+
],
|
|
137
|
+
},
|
|
138
|
+
{
|
|
139
|
+
label: "Stories",
|
|
140
|
+
path: "/example.html",
|
|
141
|
+
},
|
|
142
|
+
{
|
|
143
|
+
id: "navbarDropdownMenuLinkProjects",
|
|
144
|
+
link: true,
|
|
145
|
+
dropdown: true,
|
|
146
|
+
trigger: {
|
|
147
|
+
label: "About",
|
|
148
|
+
path: "#",
|
|
149
|
+
attributes: new drupalAttribute().addClass("nav-link"),
|
|
150
|
+
},
|
|
151
|
+
items: [
|
|
152
|
+
{
|
|
153
|
+
label: "Knowledge Network Governance",
|
|
154
|
+
path: "/example.html",
|
|
155
|
+
},
|
|
156
|
+
{
|
|
157
|
+
label: "The EU Civil Protection Mechanism",
|
|
158
|
+
path: "/example.html",
|
|
159
|
+
},
|
|
160
|
+
{
|
|
161
|
+
label: "Information pack",
|
|
162
|
+
path: "/example.html",
|
|
163
|
+
},
|
|
164
|
+
],
|
|
165
|
+
},
|
|
166
|
+
],
|
|
167
|
+
},
|
|
168
|
+
},
|
|
169
|
+
head: {
|
|
170
|
+
attributes: new drupalAttribute()
|
|
171
|
+
.addClass(["w-100", "shadow-sm"])
|
|
172
|
+
.setAttribute("aria-label", "Top Navigation"),
|
|
173
|
+
disable_collapse: true,
|
|
174
|
+
brand: {
|
|
175
|
+
logos: [
|
|
176
|
+
{
|
|
177
|
+
class: "d-none d-lg-block",
|
|
178
|
+
src: "https://cdn1.fpfis.tech.ec.europa.eu/ecl/v3.0.2/eu/images/logo/standard-version/positive/logo-eu--en.svg",
|
|
179
|
+
alt: "desktop european union logo",
|
|
180
|
+
},
|
|
181
|
+
{
|
|
182
|
+
class: "d-lg-none",
|
|
183
|
+
src: "https://cdn1.fpfis.tech.ec.europa.eu/ecl/v3.0.2/eu/images/logo/condensed-version/positive/logo-eu--en.svg",
|
|
184
|
+
alt: "mobile european union logo",
|
|
185
|
+
},
|
|
186
|
+
],
|
|
187
|
+
},
|
|
188
|
+
},
|
|
189
|
+
};
|
package/data.js
CHANGED
|
@@ -1,136 +1,49 @@
|
|
|
1
|
-
// Simple content for demo
|
|
2
1
|
const drupalAttribute = require("drupal-attribute");
|
|
3
2
|
|
|
3
|
+
const languageList = require("@openeuropa/bcl-language-list/data/data-modal");
|
|
4
|
+
const breadcrumbs = require("@openeuropa/bcl-data-breadcrumb/data");
|
|
5
|
+
const navbarTop = require("@openeuropa/bcl-data-header/data--top-navbar");
|
|
6
|
+
const navbar = require("@openeuropa/bcl-data-header/data--navbar");
|
|
7
|
+
const modals = require("@openeuropa/bcl-data-header/data--modals");
|
|
8
|
+
|
|
4
9
|
module.exports = {
|
|
5
|
-
|
|
6
|
-
|
|
10
|
+
variant: "eu",
|
|
11
|
+
site_name: "Project name",
|
|
12
|
+
project_logo: {
|
|
13
|
+
path: "https://inno-ecl.s3.amazonaws.com/media/examples/placeholder.svg",
|
|
14
|
+
classes: "d-none d-lg-inline-block",
|
|
15
|
+
alt: "project logo",
|
|
7
16
|
},
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
active: true,
|
|
18
|
-
attributes: new drupalAttribute().setAttribute(
|
|
19
|
-
"aria-current",
|
|
20
|
-
"page"
|
|
21
|
-
),
|
|
22
|
-
},
|
|
23
|
-
{
|
|
24
|
-
label: "Item 01",
|
|
25
|
-
path: "/example",
|
|
26
|
-
},
|
|
17
|
+
head: {
|
|
18
|
+
attributes: new drupalAttribute()
|
|
19
|
+
.addClass(["w-100", "shadow-sm", "bcl-header__top-navbar"])
|
|
20
|
+
.setAttribute("aria-label", "Top Navigation"),
|
|
21
|
+
disable_collapse: false,
|
|
22
|
+
collapse_id: "topNavbarDropdown",
|
|
23
|
+
brand: {
|
|
24
|
+
link: "/example.html",
|
|
25
|
+
logos: [
|
|
27
26
|
{
|
|
28
|
-
|
|
29
|
-
|
|
27
|
+
class: "d-none d-lg-block",
|
|
28
|
+
src: "https://cdn1.fpfis.tech.ec.europa.eu/ecl/v3.0.2/eu/images/logo/standard-version/positive/logo-eu--en.svg",
|
|
29
|
+
alt: "desktop project logo",
|
|
30
30
|
},
|
|
31
31
|
{
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
trigger: {
|
|
36
|
-
label: "Dropdown link",
|
|
37
|
-
attributes: new drupalAttribute().addClass("nav-link"),
|
|
38
|
-
path: "#",
|
|
39
|
-
},
|
|
40
|
-
items: [
|
|
41
|
-
{
|
|
42
|
-
label: "Action",
|
|
43
|
-
path: "/example.html",
|
|
44
|
-
},
|
|
45
|
-
{
|
|
46
|
-
label: "Another action",
|
|
47
|
-
path: "/example.html",
|
|
48
|
-
},
|
|
49
|
-
{
|
|
50
|
-
label: "Something else here",
|
|
51
|
-
path: "/example.html",
|
|
52
|
-
},
|
|
53
|
-
],
|
|
32
|
+
class: "d-lg-none",
|
|
33
|
+
src: "https://cdn1.fpfis.tech.ec.europa.eu/ecl/v3.0.2/eu/images/logo/condensed-version/positive/logo-eu--en.svg",
|
|
34
|
+
alt: "mobile project logo",
|
|
54
35
|
},
|
|
55
36
|
],
|
|
56
37
|
},
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
link: {
|
|
60
|
-
label: "Log in",
|
|
61
|
-
},
|
|
62
|
-
modal: {
|
|
63
|
-
id: "loginModal",
|
|
64
|
-
attributes: new drupalAttribute(),
|
|
65
|
-
header:
|
|
66
|
-
'<h5 class="modal-title" id="loginModalLabel">Log in</h5>' +
|
|
67
|
-
'<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>',
|
|
68
|
-
body:
|
|
69
|
-
"<h5>Disclaimer 1</h5>" +
|
|
70
|
-
"<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum accumsan eget orci eu aliquet. Suspendisse potenti. Integer volutpat, nisl et placerat tincidunt</p>" +
|
|
71
|
-
"<h5>Disclaimer 2</h5>" +
|
|
72
|
-
"<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>",
|
|
73
|
-
footer:
|
|
74
|
-
'<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>' +
|
|
75
|
-
'<button type="button" class="btn btn-primary">Access EU login</button>',
|
|
38
|
+
navigation: {
|
|
39
|
+
items: navbarTop,
|
|
76
40
|
},
|
|
77
41
|
},
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
size: "fullscreen",
|
|
85
|
-
attributes: new drupalAttribute().addClass("oe-language"),
|
|
86
|
-
header:
|
|
87
|
-
'<h5 class="modal-title" id="languageeModalLabel">Select your language</h5>' +
|
|
88
|
-
'<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>',
|
|
89
|
-
body:
|
|
90
|
-
'<div class="container">' +
|
|
91
|
-
'<div class="row">' +
|
|
92
|
-
'<div class="col col-lg-8 offset-lg-2">' +
|
|
93
|
-
'<h5 class="oe-language__title">EU official languages</h5>' +
|
|
94
|
-
"</div>" +
|
|
95
|
-
"</div>" +
|
|
96
|
-
'<div class="row">' +
|
|
97
|
-
'<div class="col col-lg-4 offset-lg-2">' +
|
|
98
|
-
'<div class="oe-language__list">' +
|
|
99
|
-
'<a href="#" class="oe-language__item">Language 01</a>' +
|
|
100
|
-
'<a href="#" class="oe-language__item">Language 02</a>' +
|
|
101
|
-
'<a href="#" class="oe-language__item">Language 03</a>' +
|
|
102
|
-
"</div>" +
|
|
103
|
-
"</div>" +
|
|
104
|
-
'<div class="col col-lg-4">' +
|
|
105
|
-
'<div class="oe-language__list">' +
|
|
106
|
-
'<a href="#" class="oe-language__item">Language 04</a>' +
|
|
107
|
-
'<a href="#" class="oe-language__item">Language 05</a>' +
|
|
108
|
-
'<a href="#" class="oe-language__item">Language 06</a>' +
|
|
109
|
-
"</div>" +
|
|
110
|
-
"</div>" +
|
|
111
|
-
"</div>" +
|
|
112
|
-
'<div class="row">' +
|
|
113
|
-
'<div class="col col-lg-8 offset-lg-2">' +
|
|
114
|
-
'<h5 class="oe-language__title">Non EU languages</h5>' +
|
|
115
|
-
"</div>" +
|
|
116
|
-
"</div>" +
|
|
117
|
-
'<div class="row">' +
|
|
118
|
-
'<div class="col col-lg-4 offset-lg-2">' +
|
|
119
|
-
'<div class="oe-language__list">' +
|
|
120
|
-
'<a href="#" class="oe-language__item">Language 07</a>' +
|
|
121
|
-
'<a href="#" class="oe-language__item">Language 08</a>' +
|
|
122
|
-
"</div>" +
|
|
123
|
-
"</div>" +
|
|
124
|
-
'<div class="col col-lg-4">' +
|
|
125
|
-
'<div class="oe-language__list">' +
|
|
126
|
-
'<a href="#" class="oe-language__item">Language 09</a>' +
|
|
127
|
-
'<a href="#" class="oe-language__item">Language 10</a>' +
|
|
128
|
-
"</div>" +
|
|
129
|
-
"</div>" +
|
|
130
|
-
"</div>" +
|
|
131
|
-
"</div>",
|
|
132
|
-
footer:
|
|
133
|
-
'<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>',
|
|
134
|
-
},
|
|
42
|
+
navbar,
|
|
43
|
+
modals,
|
|
44
|
+
language_modal: { ...languageList, variant: "eu" },
|
|
45
|
+
breadcrumbs: {
|
|
46
|
+
...breadcrumbs,
|
|
47
|
+
attributes: new drupalAttribute().addClass(["mt-3"]),
|
|
135
48
|
},
|
|
136
49
|
};
|
package/package.json
CHANGED
|
@@ -2,11 +2,15 @@
|
|
|
2
2
|
"name": "@openeuropa/bcl-data-header",
|
|
3
3
|
"author": "European Commission",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
|
-
"version": "0.1.
|
|
5
|
+
"version": "0.1.202408021145",
|
|
6
6
|
"description": "OE header data",
|
|
7
7
|
"publishConfig": {
|
|
8
8
|
"access": "public"
|
|
9
9
|
},
|
|
10
|
+
"dependencies": {
|
|
11
|
+
"@openeuropa/bcl-data-breadcrumb": "^0.1.202408021145",
|
|
12
|
+
"@openeuropa/bcl-language-list": "^0.1.202408021145"
|
|
13
|
+
},
|
|
10
14
|
"repository": {
|
|
11
15
|
"type": "git",
|
|
12
16
|
"url": ""
|
|
@@ -20,5 +24,5 @@
|
|
|
20
24
|
"component-library",
|
|
21
25
|
"design-system"
|
|
22
26
|
],
|
|
23
|
-
"gitHead": "
|
|
27
|
+
"gitHead": "7ee2013f7f64a70ddfa35228a9a65967dd71eec3"
|
|
24
28
|
}
|
package/data-ecl.js
DELETED
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
const demoData = require("./data.js");
|
|
2
|
-
const drupalAttribute = require("drupal-attribute");
|
|
3
|
-
|
|
4
|
-
module.exports = {
|
|
5
|
-
logo: {
|
|
6
|
-
src: "https://ec.europa.eu/info/sites/info/themes/europa/images/svg/logo/logo--en.svg",
|
|
7
|
-
width: "240",
|
|
8
|
-
height: "60",
|
|
9
|
-
},
|
|
10
|
-
navbar: {
|
|
11
|
-
color_set: "dark",
|
|
12
|
-
collapse_id: "navbarNavDropdown",
|
|
13
|
-
extra_classes: "oe-header__navbar",
|
|
14
|
-
navigation: {
|
|
15
|
-
navbar: true,
|
|
16
|
-
items: [
|
|
17
|
-
{
|
|
18
|
-
label: "Home",
|
|
19
|
-
path: "/example",
|
|
20
|
-
active: true,
|
|
21
|
-
attributes: new drupalAttribute().setAttribute(
|
|
22
|
-
"aria-current",
|
|
23
|
-
"page"
|
|
24
|
-
),
|
|
25
|
-
},
|
|
26
|
-
{
|
|
27
|
-
label: "Item 01",
|
|
28
|
-
path: "/example",
|
|
29
|
-
},
|
|
30
|
-
{
|
|
31
|
-
label: "Item 02",
|
|
32
|
-
path: "/example",
|
|
33
|
-
},
|
|
34
|
-
{
|
|
35
|
-
id: "navbarDropdownMenuLink",
|
|
36
|
-
link: true,
|
|
37
|
-
dropdown: true,
|
|
38
|
-
trigger: {
|
|
39
|
-
label: "Dropdown link",
|
|
40
|
-
path: "#",
|
|
41
|
-
attributes: new drupalAttribute().addClass("nav-link"),
|
|
42
|
-
},
|
|
43
|
-
items: [
|
|
44
|
-
{
|
|
45
|
-
label: "Action",
|
|
46
|
-
path: "/example.html",
|
|
47
|
-
},
|
|
48
|
-
{
|
|
49
|
-
label: "Another action",
|
|
50
|
-
path: "/example.html",
|
|
51
|
-
},
|
|
52
|
-
{
|
|
53
|
-
label: "Something else here",
|
|
54
|
-
path: "/example.html",
|
|
55
|
-
},
|
|
56
|
-
],
|
|
57
|
-
},
|
|
58
|
-
],
|
|
59
|
-
},
|
|
60
|
-
},
|
|
61
|
-
login: demoData.login,
|
|
62
|
-
language: demoData.language,
|
|
63
|
-
};
|