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

package/README.md

@@ -11,15 +11,16 @@ npm install --save @ecl/site-header
 - **"logged"** (boolean) (default: false): Whether the user is logged in or not
 - **"menu"** (associative array): Menu content, if any. Uses ECL Menu structure
 - **"banner_top"** (string) OR (object with Link component in property): Class name
-- **"icon_path"** (string) (default: ''): file containing the svg icons
 - **"site_name"** (string) (default: '') Site name
+- **"site_name_mobile_only"** (boolean): Whether the site name should be hidden on desktop or not
 - **"logo"** (associative array) (default: predefined structure): Logo image settings. format:
   - "title" (string) (default: ''): Logo title attribute.
   - "alt" (string) (default: ''): Logo alt attribute.
+  - "breakpoint": (string) (default: 's') Expected value in EU is "l"
   - "href" (string) (default: ''): Logo URL.
   - "src_desktop" (string) (default: ''): Desktop logo image file path
   - "src_mobile" (string) (default: ''): Mobile logo image file path for EU only
-  - "size": (string) (default: 'm'): Three sizes in desktop (s, m, l)
+  - "size": (string) (default: 'l'): Three sizes in desktop (s, m, l)
 - **"login_box"** (associative array) format:
   - "id": (string) Id of the box
   - "description" (string) Label for the logged in users
@@ -30,6 +31,14 @@ npm install --save @ecl/site-header
   - "href_not_logged" (string) Link to the login form
   - "label_logged" (string) Label for the logged in users
   - "href_logged" (string) Link to the logout form
+- **"custom_action"** (associative array) (default: {}):
+  - "link" (object) (default: predefined structure) predefined structure for the Link component
+  - "icon" (optional) (associative array) OR (array) of associate arrays - Default structure of the icon component, but extra_classes is an internal key.
+    The name has to be non empty for the icon to be printed.
+  - "overlay": (associative array) (optional):
+    - "title": (string) (default: '') Overlay title
+    - "close": (associative array) (default: {})
+    - "content": (string) (default: '') HTML for the popover
 - **"language_selector"** (associative array) (default: predefined structure): Language switcher settings. format:
   - "href" (string) (default: ''): URL for switcher
   - "label" (string) (default: ''): Switcher language label, eg. 'English' in eu, 'EN' in ec
@@ -65,9 +74,7 @@ npm install --save @ecl/site-header
 ```twig
 {% include '@ecl/site-header/site-header.html.twig' with { 
   banner_top: 'Class name', 
-  banner: 'Class name',
   site_name: 'This site name'
-  icon_path: '/icons.svg', 
   logo: {
     alt: 'European Commission', 
     href: '/example', 
@@ -87,6 +94,20 @@ npm install --save @ecl/site-header
         ... 
       ], 
     }, 
+  },
+  custom_action: { 
+    href: '/notifications', 
+    icon: 'bell', 
+    label: 'Notifications', 
+    aria_label: 'View notifications', 
+    indicator: true, 
+    overlay: { 
+      title: 'Notifications', 
+      close: { 
+        label: 'Close' 
+      }, 
+      content: '<p>You have new notifications.</p>', 
+    }, 
   }, 
   login_toggle: { 
     label_not_logged: 'Log in', 

package/{_site-header-language-switcher.scss → _site-header-dropdown.scss}

@@ -1,24 +1,26 @@
 @use 'sass:map';
 @use '@ecl/grid/mixins/breakpoints';
+@use '@ecl/mixins-typography/mixins';
 
 // Exposed variables
 $theme: null !default;
 $language-switcher: null !default;
 $language-list: null !default;
 
-.ecl-site-header__language {
+.ecl-site-header__language,
+.ecl-site-header__custom-action {
   margin: 0;
   position: static;
 }
 
 @mixin with-scrollbar {
   overflow-y: auto;
-  scrollbar-color: var(--c-n) rgba(0, 0, 0, 0);
+  scrollbar-color: var(--cm-surface-medium, var(--c-n)) rgb(0, 0, 0, 0);
   scrollbar-width: thin;
 }
 
 @mixin arrow-up {
-  background-color: map.get($theme, 'color', 'white');
+  background-color: var(--cm-surface-inverted, #fff);
   border: map.get($language-switcher, 'arrow-border');
   box-shadow: map.get($language-switcher, 'arrow-shadow');
   clip-path: polygon(
@@ -43,14 +45,15 @@ $language-list: null !default;
   width: map.get($language-switcher, 'arrow-size');
 }
 
-.ecl-site-header__language-container {
-  background-color: map.get($theme, 'color', 'white');
+.ecl-site-header__language-container,
+.ecl-site-header__custom-action-overlay {
+  background-color: var(--cm-surface-inverted, #fff);
   box-shadow: map.get($language-switcher, 'shadow');
   color: map.get($language-list, 'color');
   font: var(--f-m);
   left: 0;
   height: auto;
-  margin-top: var(--s-l);
+  margin-top: var(--s-m);
   padding-block-start: map.get(
     $language-list,
     'container-padding-mobile',
@@ -84,15 +87,16 @@ $language-list: null !default;
 .ecl-site-header__language-container--push-right::before,
 .ecl-site-header__language-container--full::before {
   left: auto;
-  right: var(--ecl-language-arrow-position);
+  right: var(--ecl-overlay-arrow-position);
 }
 
 .ecl-site-header__language-container--push-left::before {
   right: auto;
-  left: var(--ecl-language-arrow-position);
+  left: var(--ecl-overlay-arrow-position);
 }
 
-.ecl-site-header__language-header {
+.ecl-site-header__language-header,
+.ecl-site-header__custom-action-header {
   align-items: center;
   display: flex;
   justify-content: space-between;
@@ -102,11 +106,16 @@ $language-list: null !default;
   );
 }
 
-.ecl-site-header__language-title {
-  font: map.get($language-list, 'header-font-mobile');
+.ecl-site-header__language-title,
+.ecl-site-header__custom-action-title {
+  @include mixins.responsive-font(
+    map.get($language-list, 'header-typography'),
+    map.get($language-list, 'header-typography-font-weight')
+  );
 }
 
-.ecl-site-header__language-close {
+.ecl-site-header__language-close,
+.ecl-site-header__custom-action-close {
   position: absolute;
   right: map.get($language-switcher, 'close-right');
   top: map.get($language-switcher, 'close-top');
@@ -117,7 +126,8 @@ $language-list: null !default;
   }
 }
 
-.ecl-site-header__language-content {
+.ecl-site-header__language-content,
+.ecl-site-header__custom-action-content {
   display: flex;
   flex-direction: column;
 
@@ -159,7 +169,8 @@ $language-list: null !default;
   padding: 0;
 }
 
-.ecl-site-header__language-link {
+.ecl-site-header__language-link,
+.ecl-site-header__custom-action-link {
   align-items: baseline;
   border-inline-start: map.get($language-list, 'item-active-border-width') solid
     transparent;
@@ -178,7 +189,8 @@ $language-list: null !default;
   }
 }
 
-.ecl-site-header__language-link-code {
+.ecl-site-header__language-link-code,
+.ecl-site-header__custom-action-link-code {
   color: map.get($language-list, 'code-color');
   font: var(--f-m);
   font-weight: map.get($language-list, 'code-font-weight');
@@ -220,10 +232,12 @@ $language-list: null !default;
 }
 
 @include breakpoints.up('m') {
-  .ecl-site-header__language {
+  .ecl-site-header__language,
+  .ecl-site-header__custom-action {
     position: relative;
   }
 
+  .ecl-site-header__custom-action-overlay,
   .ecl-site-header__language-container {
     left: 50%;
     padding-block-start: map.get(
@@ -249,8 +263,8 @@ $language-list: null !default;
     transform: translateX(-50%);
   }
 
-  .ecl-site-header__language-title {
-    font: map.get($language-list, 'header-font-desktop');
+  .ecl-site-header__custom-action-overlay {
+    width: 400px;
   }
 
   // Horizontal position
@@ -268,8 +282,8 @@ $language-list: null !default;
 
   // Horizontal sections
   .ecl-site-header__language-content:not(
-      .ecl-site-header__language-content--stack
-    ) {
+    .ecl-site-header__language-content--stack
+  ) {
     flex-direction: row;
     margin-top: map.get($language-list, 'content-margin-desktop');
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "@ecl/site-header",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "5.0.0-alpha.2",
+  "version": "5.0.0-alpha.20",
   "description": "ECL Site Header",
   "publishConfig": {
     "access": "public"
@@ -10,20 +10,21 @@
   "main": "site-header.js",
   "module": "site-header.js",
   "dependencies": {
-    "@ecl/button": "5.0.0-alpha.2",
-    "@ecl/dom-utils": "5.0.0-alpha.2",
-    "@ecl/grid": "5.0.0-alpha.2",
-    "@ecl/icon": "5.0.0-alpha.2",
-    "@ecl/link": "5.0.0-alpha.2",
-    "@ecl/menu": "5.0.0-alpha.2",
-    "@ecl/notification": "5.0.0-alpha.2",
-    "@ecl/picture": "5.0.0-alpha.2",
-    "@ecl/search-form": "5.0.0-alpha.2",
-    "focus-trap": "7.6.4"
+    "@ecl/button": "5.0.0-alpha.20",
+    "@ecl/dom-utils": "5.0.0-alpha.20",
+    "@ecl/grid": "5.0.0-alpha.20",
+    "@ecl/icon": "5.0.0-alpha.20",
+    "@ecl/link": "5.0.0-alpha.20",
+    "@ecl/menu": "5.0.0-alpha.20",
+    "@ecl/mixins-typography": "5.0.0-alpha.20",
+    "@ecl/notification": "5.0.0-alpha.20",
+    "@ecl/picture": "5.0.0-alpha.20",
+    "@ecl/search-form": "5.0.0-alpha.20",
+    "focus-trap": "7.6.5"
   },
   "devDependencies": {
-    "@ecl/resources-ec-logo": "5.0.0-alpha.2",
-    "@ecl/resources-eu-logo": "5.0.0-alpha.2"
+    "@ecl/resources-ec-logo": "5.0.0-alpha.20",
+    "@ecl/resources-eu-logo": "5.0.0-alpha.20"
   },
   "repository": {
     "type": "git",
@@ -39,5 +40,5 @@
     "design-system",
     "twig"
   ],
-  "gitHead": "3c10f74e78b7c3891917c075fa3868eb7c4f3d7a"
+  "gitHead": "47aedb8e6c7b15ce6acc9cbd2284c4a52ba1014b"
 }