@ecl/site-header 5.0.0-alpha.4 → 5.0.0-alpha.5

package/README.md

@@ -16,6 +16,7 @@ npm install --save @ecl/site-header
 - **"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

package/package.json

@@ -2,7 +2,7 @@
   "name": "@ecl/site-header",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "5.0.0-alpha.4",
+  "version": "5.0.0-alpha.5",
   "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.4",
-    "@ecl/dom-utils": "5.0.0-alpha.4",
-    "@ecl/grid": "5.0.0-alpha.4",
-    "@ecl/icon": "5.0.0-alpha.4",
-    "@ecl/link": "5.0.0-alpha.4",
-    "@ecl/menu": "5.0.0-alpha.4",
-    "@ecl/notification": "5.0.0-alpha.4",
-    "@ecl/picture": "5.0.0-alpha.4",
-    "@ecl/search-form": "5.0.0-alpha.4",
+    "@ecl/button": "5.0.0-alpha.5",
+    "@ecl/dom-utils": "5.0.0-alpha.5",
+    "@ecl/grid": "5.0.0-alpha.5",
+    "@ecl/icon": "5.0.0-alpha.5",
+    "@ecl/link": "5.0.0-alpha.5",
+    "@ecl/menu": "5.0.0-alpha.5",
+    "@ecl/notification": "5.0.0-alpha.5",
+    "@ecl/picture": "5.0.0-alpha.5",
+    "@ecl/search-form": "5.0.0-alpha.5",
     "focus-trap": "7.6.4"
   },
   "devDependencies": {
-    "@ecl/resources-ec-logo": "5.0.0-alpha.4",
-    "@ecl/resources-eu-logo": "5.0.0-alpha.4"
+    "@ecl/resources-ec-logo": "5.0.0-alpha.5",
+    "@ecl/resources-eu-logo": "5.0.0-alpha.5"
   },
   "repository": {
     "type": "git",
@@ -39,5 +39,5 @@
     "design-system",
     "twig"
   ],
-  "gitHead": "d0f4af0122c47a1332d9b73dd3c17ae26c933e7c"
+  "gitHead": "47fe59d4f5dc0921874036ebf5b3c47b086fbe14"
 }

package/site-header-ec.scss

@@ -23,7 +23,7 @@ $language-list: null !default;
   z-index: map.get($theme, 'z-index', 'modal');
 
   .ecl-site-header__inner {
-    box-shadow: var(--sh-6);
+    box-shadow: var(--sh-2);
   }
 
   .ecl-site-header__background {
@@ -53,7 +53,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 +74,7 @@ $language-list: null !default;
 }
 
 .ecl-site-header__header {
-  box-shadow: var(--sh-6);
+  box-shadow: var(--sh-2);
   position: relative;
   z-index: 54;
 }
@@ -123,7 +123,6 @@ $language-list: null !default;
 .ecl-site-header__action {
   align-self: flex-end;
   display: flex;
-  padding-bottom: var(--s-2xs);
 
   .ecl-button {
     box-sizing: border-box;
@@ -170,7 +169,7 @@ $language-list: null !default;
 .ecl-site-header__login-box,
 .ecl-site-header__search {
   background-color: map.get($theme, 'color', 'white');
-  box-shadow: var(--sh-12);
+  box-shadow: var(--sh-3);
   box-sizing: border-box;
   color: var(--c-d);
   display: none;
@@ -253,7 +252,7 @@ $language-list: null !default;
   background-color: map.get($site-header, 'banner-background');
   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;
 
@@ -298,6 +297,17 @@ $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__login-toggle,
   .ecl-site-header__search-toggle,
@@ -334,7 +344,7 @@ $menu-top: calc(44px + 2 * var(--s-xs));
 
 @include breakpoints.up('l') {
   .ecl-site-header {
-    box-shadow: var(--sh-6);
+    box-shadow: var(--sh-2);
 
     .ecl-site-header__cta {
       align-self: center;
@@ -350,7 +360,7 @@ $menu-top: calc(44px + 2 * var(--s-xs));
       width: 100%;
 
       .ecl-menu__mega {
-        box-shadow: var(--sh-6);
+        box-shadow: var(--sh-2);
       }
     }
 
@@ -497,7 +507,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;
 

package/site-header-eu.scss

@@ -37,7 +37,7 @@ $language-list: null !default;
     background: transparent;
     box-shadow: none;
     display: flex;
-    min-height: map.get($site-header, 'logo-height-xs');
+    min-height: map.get($site-header, 'logo-height-s');
     top: var(--s-m);
     padding: 0;
     position: absolute;
@@ -69,8 +69,8 @@ $language-list: null !default;
     }
   }
 
-  &.ecl-site-header-with-logo-s .ecl-menu__open,
-  &.ecl-site-header-with-logo-s .ecl-mega-menu__open {
+  .ecl-menu__open,
+  .ecl-mega-menu__open {
     top: 8px;
 
     .ecl-link__icon:last-of-type {
@@ -78,21 +78,11 @@ $language-list: null !default;
     }
   }
 
-  &.ecl-site-header-with-logo-m .ecl-menu__open,
-  &.ecl-site-header-with-logo-m .ecl-mega-menu__open {
-    top: 14px;
-  }
-
-  &.ecl-site-header-with-logo-l .ecl-menu__open,
-  &.ecl-site-header-with-logo-l .ecl-mega-menu__open {
-    top: 20px;
-  }
-
   /* stylelint-disable no-descending-specificity */
   .ecl-menu__open,
   .ecl-mega-menu__open,
-  .ecl-menu[aria-expanded='true'] .ecl-menu__open,
-  .ecl-mega-menu[aria-expanded='true'] .ecl-mega-menu__open {
+  .ecl-menu[data-expanded] .ecl-menu__open,
+  .ecl-mega-menu[data-expanded] .ecl-mega-menu__open {
     align-items: center;
     border: 1px solid transparent;
     box-sizing: border-box;
@@ -117,8 +107,8 @@ $language-list: null !default;
     margin-inline-start: var(--s-m);
   }
 
-  .ecl-menu[aria-expanded='true'] .ecl-menu__open,
-  .ecl-mega-menu[aria-expanded='true'] .ecl-mega-menu__open {
+  .ecl-menu[data-expanded] .ecl-menu__open,
+  .ecl-mega-menu[data-expanded] .ecl-mega-menu__open {
     background-color: var(--c-p-20);
   }
   /* stylelint-enable no-descending-specificity */
@@ -156,14 +146,6 @@ $language-list: null !default;
   display: block;
   height: map.get($site-header, 'logo-height-s');
   max-width: 100%;
-
-  &.ecl-site-header__logo-image--m {
-    height: map.get($site-header, 'logo-height-m');
-  }
-
-  &.ecl-site-header__logo-image--l {
-    height: map.get($site-header, 'logo-height-l');
-  }
 }
 
 .ecl-site-header__action {
@@ -330,6 +312,15 @@ $language-list: null !default;
 
 /* stylelint-disable-next-line order/order */
 @include breakpoints.up('s') {
+  .ecl-site-header__logo-image {
+    height: map.get($site-header, 'logo-height-m');
+  }
+
+  .ecl-site-header .ecl-menu__open,
+  .ecl-site-header .ecl-mega-menu__open {
+    top: 14px;
+  }
+
   .ecl-site-header__logo-link {
     flex-grow: 0;
   }
@@ -421,6 +412,14 @@ $language-list: null !default;
   .ecl-site-header__logo-image {
     display: block;
 
+    &.ecl-site-header__logo-image--s {
+      height: map.get($site-header, 'logo-height-s');
+    }
+
+    &.ecl-site-header__logo-image--m {
+      height: map.get($site-header, 'logo-height-m');
+    }
+
     &.ecl-site-header__logo-image--l {
       height: map.get($site-header, 'logo-height-lg-l');
     }

package/site-header.html.twig

@@ -13,6 +13,7 @@
         {
           "title": (string) (default: ''): Logo title attribute.
           "alt": (string) (default: ''): Logo alt attribute.
+          "breakpoint": (string) (default: 's') Breakpoint where to switch the logo displayed. 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
@@ -220,7 +221,7 @@
             {# Logo #}
             {% if _logo is not empty and _logo.src_desktop is not empty %}
               {% set _label %}
-                {% set _picture = { sources: [{ src: _logo.src_desktop, media: 'l' }] } %}
+                {% set _picture = { sources: [{ src: _logo.src_desktop, media: _logo.breakpoint|default('s') }] } %}
                 {% if _logo.src_mobile is defined and _logo.src_mobile is not empty %}
                   {% set _picture = _picture|merge({
                     img: {

package/site-header.js

@@ -561,7 +561,9 @@ export class SiteHeader {
     if (loginRect.x === 0) {
       const loginToggleRect = this.loginToggle.getBoundingClientRect();
       const arrowPosition =
-        window.innerWidth - loginToggleRect.right + loginToggleRect.width / 2;
+        document.documentElement.clientWidth -
+        loginToggleRect.right +
+        loginToggleRect.width / 2;
 
       this.loginBox.style.setProperty(
         '--ecl-login-arrow-position',
@@ -575,7 +577,9 @@ export class SiteHeader {
     if (searchRect.x === 0) {
       const searchToggleRect = this.searchToggle.getBoundingClientRect();
       const arrowPosition =
-        window.innerWidth - searchToggleRect.right + searchToggleRect.width / 2;
+        document.documentElement.clientWidth -
+        searchToggleRect.right +
+        searchToggleRect.width / 2;
 
       this.searchForm.style.setProperty(
         '--ecl-search-arrow-position',