@ecl/site-header 5.0.0-alpha.2 → 5.0.0-alpha.21

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 (9) hide show
  1. package/README.md +25 -4
  2. package/{_site-header-language-switcher.scss → _site-header-dropdown.scss} +34 -20
  3. package/package.json +15 -14
  4. package/site-header-ec.scss +135 -105
  5. package/site-header-eu.scss +92 -51
  6. package/site-header-language-switcher.html.twig +5 -7
  7. package/site-header-print.scss +4 -17
  8. package/site-header.html.twig +245 -151
  9. package/site-header.js +326 -172
package/README.md CHANGED
@@ -11,15 +11,16 @@ npm install --save @ecl/site-header
11
11
  - **"logged"** (boolean) (default: false): Whether the user is logged in or not
12
12
  - **"menu"** (associative array): Menu content, if any. Uses ECL Menu structure
13
13
  - **"banner_top"** (string) OR (object with Link component in property): Class name
14
- - **"icon_path"** (string) (default: ''): file containing the svg icons
15
14
  - **"site_name"** (string) (default: '') Site name
15
+ - **"site_name_mobile_only"** (boolean): Whether the site name should be hidden on desktop or not
16
16
  - **"logo"** (associative array) (default: predefined structure): Logo image settings. format:
17
17
  - "title" (string) (default: ''): Logo title attribute.
18
18
  - "alt" (string) (default: ''): Logo alt attribute.
19
+ - "breakpoint": (string) (default: 's') Expected value in EU is "l"
19
20
  - "href" (string) (default: ''): Logo URL.
20
21
  - "src_desktop" (string) (default: ''): Desktop logo image file path
21
22
  - "src_mobile" (string) (default: ''): Mobile logo image file path for EU only
22
- - "size": (string) (default: 'm'): Three sizes in desktop (s, m, l)
23
+ - "size": (string) (default: 'l'): Three sizes in desktop (s, m, l)
23
24
  - **"login_box"** (associative array) format:
24
25
  - "id": (string) Id of the box
25
26
  - "description" (string) Label for the logged in users
@@ -30,6 +31,14 @@ npm install --save @ecl/site-header
30
31
  - "href_not_logged" (string) Link to the login form
31
32
  - "label_logged" (string) Label for the logged in users
32
33
  - "href_logged" (string) Link to the logout form
34
+ - **"custom_action"** (associative array) (default: {}):
35
+ - "link" (object) (default: predefined structure) predefined structure for the Link component
36
+ - "icon" (optional) (associative array) OR (array) of associate arrays - Default structure of the icon component, but extra_classes is an internal key.
37
+ The name has to be non empty for the icon to be printed.
38
+ - "overlay": (associative array) (optional):
39
+ - "title": (string) (default: '') Overlay title
40
+ - "close": (associative array) (default: {})
41
+ - "content": (string) (default: '') HTML for the popover
33
42
  - **"language_selector"** (associative array) (default: predefined structure): Language switcher settings. format:
34
43
  - "href" (string) (default: ''): URL for switcher
35
44
  - "label" (string) (default: ''): Switcher language label, eg. 'English' in eu, 'EN' in ec
@@ -65,9 +74,7 @@ npm install --save @ecl/site-header
65
74
  ```twig
66
75
  {% include '@ecl/site-header/site-header.html.twig' with {
67
76
  banner_top: 'Class name',
68
- banner: 'Class name',
69
77
  site_name: 'This site name'
70
- icon_path: '/icons.svg',
71
78
  logo: {
72
79
  alt: 'European Commission',
73
80
  href: '/example',
@@ -87,6 +94,20 @@ npm install --save @ecl/site-header
87
94
  ...
88
95
  ],
89
96
  },
97
+ },
98
+ custom_action: {
99
+ href: '/notifications',
100
+ icon: 'bell',
101
+ label: 'Notifications',
102
+ aria_label: 'View notifications',
103
+ indicator: true,
104
+ overlay: {
105
+ title: 'Notifications',
106
+ close: {
107
+ label: 'Close'
108
+ },
109
+ content: '<p>You have new notifications.</p>',
110
+ },
90
111
  },
91
112
  login_toggle: {
92
113
  label_not_logged: 'Log in',
package/{_site-header-language-switcher.scss → _site-header-dropdown.scss} RENAMED
@@ -1,24 +1,26 @@
1
1
  @use 'sass:map';
2
2
  @use '@ecl/grid/mixins/breakpoints';
3
+ @use '@ecl/mixins-typography/mixins';
3
4
 
4
5
  // Exposed variables
5
6
  $theme: null !default;
6
7
  $language-switcher: null !default;
7
8
  $language-list: null !default;
8
9
 
9
- .ecl-site-header__language {
10
+ .ecl-site-header__language,
11
+ .ecl-site-header__custom-action {
10
12
  margin: 0;
11
13
  position: static;
12
14
  }
13
15
 
14
16
  @mixin with-scrollbar {
15
17
  overflow-y: auto;
16
- scrollbar-color: var(--c-n) rgba(0, 0, 0, 0);
18
+ scrollbar-color: var(--cm-surface-medium, var(--c-n)) rgb(0, 0, 0, 0);
17
19
  scrollbar-width: thin;
18
20
  }
19
21
 
20
22
  @mixin arrow-up {
21
- background-color: map.get($theme, 'color', 'white');
23
+ background-color: var(--cm-surface-inverted, #fff);
22
24
  border: map.get($language-switcher, 'arrow-border');
23
25
  box-shadow: map.get($language-switcher, 'arrow-shadow');
24
26
  clip-path: polygon(
@@ -43,14 +45,15 @@ $language-list: null !default;
43
45
  width: map.get($language-switcher, 'arrow-size');
44
46
  }
45
47
 
46
- .ecl-site-header__language-container {
47
- background-color: map.get($theme, 'color', 'white');
48
+ .ecl-site-header__language-container,
49
+ .ecl-site-header__custom-action-overlay {
50
+ background-color: var(--cm-surface-inverted, #fff);
48
51
  box-shadow: map.get($language-switcher, 'shadow');
49
52
  color: map.get($language-list, 'color');
50
53
  font: var(--f-m);
51
54
  left: 0;
52
55
  height: auto;
53
- margin-top: var(--s-l);
56
+ margin-top: var(--s-m);
54
57
  padding-block-start: map.get(
55
58
  $language-list,
56
59
  'container-padding-mobile',
@@ -84,15 +87,16 @@ $language-list: null !default;
84
87
  .ecl-site-header__language-container--push-right::before,
85
88
  .ecl-site-header__language-container--full::before {
86
89
  left: auto;
87
- right: var(--ecl-language-arrow-position);
90
+ right: var(--ecl-overlay-arrow-position);
88
91
  }
89
92
 
90
93
  .ecl-site-header__language-container--push-left::before {
91
94
  right: auto;
92
- left: var(--ecl-language-arrow-position);
95
+ left: var(--ecl-overlay-arrow-position);
93
96
  }
94
97
 
95
- .ecl-site-header__language-header {
98
+ .ecl-site-header__language-header,
99
+ .ecl-site-header__custom-action-header {
96
100
  align-items: center;
97
101
  display: flex;
98
102
  justify-content: space-between;
@@ -102,11 +106,16 @@ $language-list: null !default;
102
106
  );
103
107
  }
104
108
 
105
- .ecl-site-header__language-title {
106
- font: map.get($language-list, 'header-font-mobile');
109
+ .ecl-site-header__language-title,
110
+ .ecl-site-header__custom-action-title {
111
+ @include mixins.responsive-font(
112
+ map.get($language-list, 'header-typography'),
113
+ map.get($language-list, 'header-typography-font-weight')
114
+ );
107
115
  }
108
116
 
109
- .ecl-site-header__language-close {
117
+ .ecl-site-header__language-close,
118
+ .ecl-site-header__custom-action-close {
110
119
  position: absolute;
111
120
  right: map.get($language-switcher, 'close-right');
112
121
  top: map.get($language-switcher, 'close-top');
@@ -117,7 +126,8 @@ $language-list: null !default;
117
126
  }
118
127
  }
119
128
 
120
- .ecl-site-header__language-content {
129
+ .ecl-site-header__language-content,
130
+ .ecl-site-header__custom-action-content {
121
131
  display: flex;
122
132
  flex-direction: column;
123
133
 
@@ -159,7 +169,8 @@ $language-list: null !default;
159
169
  padding: 0;
160
170
  }
161
171
 
162
- .ecl-site-header__language-link {
172
+ .ecl-site-header__language-link,
173
+ .ecl-site-header__custom-action-link {
163
174
  align-items: baseline;
164
175
  border-inline-start: map.get($language-list, 'item-active-border-width') solid
165
176
  transparent;
@@ -178,7 +189,8 @@ $language-list: null !default;
178
189
  }
179
190
  }
180
191
 
181
- .ecl-site-header__language-link-code {
192
+ .ecl-site-header__language-link-code,
193
+ .ecl-site-header__custom-action-link-code {
182
194
  color: map.get($language-list, 'code-color');
183
195
  font: var(--f-m);
184
196
  font-weight: map.get($language-list, 'code-font-weight');
@@ -220,10 +232,12 @@ $language-list: null !default;
220
232
  }
221
233
 
222
234
  @include breakpoints.up('m') {
223
- .ecl-site-header__language {
235
+ .ecl-site-header__language,
236
+ .ecl-site-header__custom-action {
224
237
  position: relative;
225
238
  }
226
239
 
240
+ .ecl-site-header__custom-action-overlay,
227
241
  .ecl-site-header__language-container {
228
242
  left: 50%;
229
243
  padding-block-start: map.get(
@@ -249,8 +263,8 @@ $language-list: null !default;
249
263
  transform: translateX(-50%);
250
264
  }
251
265
 
252
- .ecl-site-header__language-title {
253
- font: map.get($language-list, 'header-font-desktop');
266
+ .ecl-site-header__custom-action-overlay {
267
+ width: 400px;
254
268
  }
255
269
 
256
270
  // Horizontal position
@@ -268,8 +282,8 @@ $language-list: null !default;
268
282
 
269
283
  // Horizontal sections
270
284
  .ecl-site-header__language-content:not(
271
- .ecl-site-header__language-content--stack
272
- ) {
285
+ .ecl-site-header__language-content--stack
286
+ ) {
273
287
  flex-direction: row;
274
288
  margin-top: map.get($language-list, 'content-margin-desktop');
275
289
 
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@ecl/site-header",
3
3
  "author": "European Commission",
4
4
  "license": "EUPL-1.2",
5
- "version": "5.0.0-alpha.2",
5
+ "version": "5.0.0-alpha.21",
6
6
  "description": "ECL Site Header",
7
7
  "publishConfig": {
8
8
  "access": "public"
@@ -10,20 +10,21 @@
10
10
  "main": "site-header.js",
11
11
  "module": "site-header.js",
12
12
  "dependencies": {
13
- "@ecl/button": "5.0.0-alpha.2",
14
- "@ecl/dom-utils": "5.0.0-alpha.2",
15
- "@ecl/grid": "5.0.0-alpha.2",
16
- "@ecl/icon": "5.0.0-alpha.2",
17
- "@ecl/link": "5.0.0-alpha.2",
18
- "@ecl/menu": "5.0.0-alpha.2",
19
- "@ecl/notification": "5.0.0-alpha.2",
20
- "@ecl/picture": "5.0.0-alpha.2",
21
- "@ecl/search-form": "5.0.0-alpha.2",
22
- "focus-trap": "7.6.4"
13
+ "@ecl/button": "5.0.0-alpha.21",
14
+ "@ecl/dom-utils": "5.0.0-alpha.21",
15
+ "@ecl/grid": "5.0.0-alpha.21",
16
+ "@ecl/icon": "5.0.0-alpha.21",
17
+ "@ecl/link": "5.0.0-alpha.21",
18
+ "@ecl/menu": "5.0.0-alpha.21",
19
+ "@ecl/mixins-typography": "5.0.0-alpha.21",
20
+ "@ecl/notification": "5.0.0-alpha.21",
21
+ "@ecl/picture": "5.0.0-alpha.21",
22
+ "@ecl/search-form": "5.0.0-alpha.21",
23
+ "focus-trap": "7.6.5"
23
24
  },
24
25
  "devDependencies": {
25
- "@ecl/resources-ec-logo": "5.0.0-alpha.2",
26
- "@ecl/resources-eu-logo": "5.0.0-alpha.2"
26
+ "@ecl/resources-ec-logo": "5.0.0-alpha.21",
27
+ "@ecl/resources-eu-logo": "5.0.0-alpha.21"
27
28
  },
28
29
  "repository": {
29
30
  "type": "git",
@@ -39,5 +40,5 @@
39
40
  "design-system",
40
41
  "twig"
41
42
  ],
42
- "gitHead": "3c10f74e78b7c3891917c075fa3868eb7c4f3d7a"
43
+ "gitHead": "e3828f07421db8fa2a610b445bc178ff26903c95"
43
44
  }