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