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