@ecl/site-header 5.0.0-alpha.1 → 5.0.0-alpha.11

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}

@@ -6,19 +6,20 @@ $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,8 +44,9 @@ $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);
@@ -84,15 +86,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 +105,13 @@ $language-list: null !default;
   );
 }
 
-.ecl-site-header__language-title {
+.ecl-site-header__language-title,
+.ecl-site-header__custom-action-title {
   font: map.get($language-list, 'header-font-mobile');
 }
 
-.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 +122,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 +165,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 +185,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 +228,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,7 +259,12 @@ $language-list: null !default;
     transform: translateX(-50%);
   }
 
-  .ecl-site-header__language-title {
+  .ecl-site-header__custom-action-overlay {
+    width: 400px;
+  }
+
+  .ecl-site-header__language-title,
+  .ecl-site-header__custom-action-title {
     font: map.get($language-list, 'header-font-desktop');
   }
 

package/package.json

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

package/site-header-ec.scss

@@ -11,34 +11,21 @@ $theme: null !default;
 $site-header: null !default;
 $language-list: null !default;
 
-@use 'site-header-language-switcher' with (
+@use 'site-header-dropdown' with (
   $theme: $theme,
   $language-switcher: map.get($site-header, 'language-switcher'),
   $language-list: $language-list
 );
 
 .ecl-site-header {
+  background-color: map.get($site-header, 'background-color');
+  box-shadow: var(--sh-2);
   margin: 0;
   position: relative;
   z-index: map.get($theme, 'z-index', 'modal');
 
   .ecl-site-header__inner {
-    box-shadow: var(--sh-6);
-  }
-
-  .ecl-site-header__background {
-    background-color: map.get($site-header, 'background-color');
-    background-image: url('data:image/svg+xml;base64,' + map.get(
-        $site-header,
-        'background-image'
-      ));
-    background-position: right bottom;
-    background-repeat: no-repeat;
-    background-size: auto 100%;
-  }
-
-  &.ecl-site-header--rtl .ecl-site-header__background {
-    background-position: left bottom;
+    box-shadow: var(--sh-2);
   }
 
   .ecl-menu,
@@ -53,7 +40,7 @@ $language-list: null !default;
   .ecl-menu__open,
   .ecl-mega-menu__open {
     position: relative;
-    top: calc(-1 * var(--s-2xs));
+    top: calc(-1 * var(--s-xl));
     z-index: 54;
   }
 
@@ -74,7 +61,6 @@ $language-list: null !default;
 }
 
 .ecl-site-header__header {
-  box-shadow: var(--sh-6);
   position: relative;
   z-index: 54;
 }
@@ -108,22 +94,22 @@ $language-list: null !default;
 
   &:hover {
     border-left: none;
-    color: var(--c-d);
+    color: var(--cm-on-surface-brand);
   }
 
   &:focus-visible {
-    color: var(--c-d);
+    color: var(--cm-on-surface-brand);
   }
 
   &:active {
-    background-color: var(--c-n);
+    background-color: var(--cm-on-surface-neutral-medium);
   }
 }
 
 .ecl-site-header__action {
+  align-items: center;
   align-self: flex-end;
   display: flex;
-  padding-bottom: var(--s-2xs);
 
   .ecl-button {
     box-sizing: border-box;
@@ -145,6 +131,7 @@ $language-list: null !default;
   text-transform: uppercase;
 }
 
+.ecl-site-header__custom-action-toggle,
 .ecl-site-header__login-toggle,
 .ecl-site-header__search-toggle,
 .ecl-site-header__language-selector {
@@ -163,23 +150,47 @@ $language-list: null !default;
 
   &:active,
   &[aria-expanded='true'] {
-    background-color: var(--c-n-80);
+    background-color: var(--cm-surface-neutral-low);
+  }
+}
+
+.ecl-site-header__custom-action-toggle {
+  &:hover {
+    text-decoration: none;
+    color: map.get($site-header, 'toggle-color');
+  }
+
+  .ecl-link__icon-container {
+    .ecl-site-header__icon {
+      margin-inline-end: 0;
+    }
+  }
+
+  .ecl-indicator:not(:empty) {
+    left: -18px;
+    right: auto;
   }
 }
 
 .ecl-site-header__login-box,
 .ecl-site-header__search {
-  background-color: map.get($theme, 'color', 'white');
-  box-shadow: var(--sh-12);
+  background-color: var(--cm-surface-inverted);
+  box-shadow: var(--sh-3);
   box-sizing: border-box;
-  color: var(--c-d);
+  color: var(--cm-on-surface-brand);
   display: none;
   font: var(--f-m);
   left: 0;
   margin-top: var(--s-l);
-  padding: var(--s-3xl) var(--s-m);
+  padding: var(--s-5xl) var(--s-m);
   position: absolute;
   z-index: map.get($theme, 'z-index', 'modal') + 1;
+
+  .ecl-search-form__button,
+  .ecl-search-form__text-input,
+  .ecl-search-form__text-input::placeholder {
+    font: var(--f-s);
+  }
 }
 
 .ecl-site-header__login-box {
@@ -189,7 +200,7 @@ $language-list: null !default;
   width: 100%;
 
   &::before {
-    @include site-header-language-switcher.arrow-up;
+    @include site-header-dropdown.arrow-up;
 
     left: auto;
     right: var(--ecl-login-arrow-position);
@@ -206,13 +217,14 @@ $language-list: null !default;
 }
 
 .ecl-site-header__login-separator {
-  background-color: var(--c-n);
+  background-color: var(--cm-border-neutral);
   border-width: 0;
   height: 1px;
   margin-bottom: var(--s-m);
   margin-top: var(--s-m);
 }
 
+.ecl-site-header__custom-action-icon,
 .ecl-site-header__language-icon {
   align-items: center;
   display: flex;
@@ -224,7 +236,7 @@ $language-list: null !default;
   display: flex;
 
   &::before {
-    @include site-header-language-switcher.arrow-up;
+    @include site-header-dropdown.arrow-up;
 
     left: auto;
     right: var(--ecl-search-arrow-position);
@@ -232,28 +244,31 @@ $language-list: null !default;
 }
 
 .ecl-site-header__notification {
-  background-color: var(--c-bg);
-  border-top: 1px solid var(--c-n-60);
+  background-color: var(--cm-surface-inverted);
   display: flex;
 
   .ecl-notification {
-    background: map.get($theme, 'color', 'white');
-    margin: var(--s-xl) 0;
+    background: var(--cm-surface-inverted);
+    margin: 0 0 var(--s-xl);
+  }
+
+  .ecl-notification__description,
+  .ecl-notification__link {
+    font: var(--f-s);
   }
 }
 
 .ecl-site-header__banner-top {
-  background: var(--c-n-40);
-  border-top: 1px solid var(--c-n);
-  font: var(--f-m);
+  border-top: 1px solid var(--cm-border-neutral);
+  font: var(--f-s);
   padding: var(--s-xs) 0;
 }
 
 .ecl-site-header__banner {
-  background-color: map.get($site-header, 'banner-background');
+  background: var(--cm-surface-neutral-lowest);
   color: map.get($site-header, 'banner-text-color');
   display: block;
-  font: var(--f-l);
+  font: var(--f-2xl);
   min-height: 1.75rem;
   padding: var(--s-m) 0;
 
@@ -264,7 +279,7 @@ $language-list: null !default;
 }
 
 .ecl-site-header__site-name {
-  margin-inline-end: var(--s-3xl);
+  margin-inline-end: var(--s-5xl);
 }
 
 // Menu display and position
@@ -298,7 +313,19 @@ $menu-top: calc(44px + 2 * var(--s-xs));
   top: $menu-top;
 }
 
+@include breakpoints.up('s') {
+  .ecl-site-header__logo-image {
+    height: map.get($site-header, 'logo-height-lg-m');
+  }
+
+  .ecl-site-header .ecl-mega-menu__open,
+  .ecl-site-header .ecl-menu__open {
+    top: calc(-1 * var(--s-s));
+  }
+}
+
 @include breakpoints.down('m') {
+  .ecl-site-header__custom-action-toggle,
   .ecl-site-header__login-toggle,
   .ecl-site-header__search-toggle,
   .ecl-site-header__language-selector {
@@ -309,6 +336,10 @@ $menu-top: calc(44px + 2 * var(--s-xs));
     line-height: 0;
     padding: var(--s-xs) 0;
 
+    .ecl-link__icon-container {
+      margin-inline-start: 0;
+    }
+
     .ecl-icon {
       width: 1.5rem;
       height: 1.5rem;
@@ -334,8 +365,6 @@ $menu-top: calc(44px + 2 * var(--s-xs));
 
 @include breakpoints.up('l') {
   .ecl-site-header {
-    box-shadow: var(--sh-6);
-
     .ecl-site-header__cta {
       align-self: center;
       margin: 0;
@@ -350,7 +379,7 @@ $menu-top: calc(44px + 2 * var(--s-xs));
       width: 100%;
 
       .ecl-menu__mega {
-        box-shadow: var(--sh-6);
+        box-shadow: var(--sh-2);
       }
     }
 
@@ -387,6 +416,10 @@ $menu-top: calc(44px + 2 * var(--s-xs));
     padding: var(--s-m) 0;
   }
 
+  .ecl-site-header__site-name--mobile-only {
+    display: none;
+  }
+
   .ecl-site-header__top {
     align-items: flex-end;
   }
@@ -435,7 +468,7 @@ $menu-top: calc(44px + 2 * var(--s-xs));
     left: 50%;
     margin-top: var(--s-l);
     min-width: 22rem;
-    padding: var(--s-3xl);
+    padding: var(--s-5xl);
     transform: translateX(-50%);
     width: auto;
 
@@ -444,12 +477,13 @@ $menu-top: calc(44px + 2 * var(--s-xs));
     }
   }
 
+  .ecl-site-header__custom-action-toggle,
   .ecl-site-header__login-toggle,
   .ecl-site-header__language-selector {
     align-items: center;
     display: flex;
     flex-direction: row;
-    font: var(--f-m);
+    font: var(--f-s);
 
     .ecl-site-header__icon {
       flex-shrink: 0;
@@ -485,7 +519,7 @@ $menu-top: calc(44px + 2 * var(--s-xs));
   }
 
   .ecl-site-header__search {
-    background-color: map.get($theme, 'color', 'white');
+    background-color: var(--cm-surface-inverted);
     border-width: 0;
     box-shadow: none;
     display: flex;
@@ -497,7 +531,7 @@ $menu-top: calc(44px + 2 * var(--s-xs));
 
   .ecl-site-header__banner {
     box-shadow: none;
-    font: var(--f-l);
+    font: var(--f-3xl);
     min-height: 0;
     padding: 0;