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

package/site-header-eu.scss

@@ -11,7 +11,7 @@ $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
@@ -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 {
@@ -188,7 +170,7 @@ $language-list: null !default;
   .ecl-search-form__text-input {
     box-sizing: border-box;
     flex-grow: 0;
-    height: 44px;
+    height: 2.75rem;
     width: 100%;
   }
 }
@@ -218,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);
@@ -229,6 +211,7 @@ $language-list: null !default;
   }
 }
 
+.ecl-site-header__custom-action-toggle,
 .ecl-site-header__language-selector,
 .ecl-site-header__login-toggle,
 .ecl-site-header__search-toggle {
@@ -238,19 +221,46 @@ $language-list: null !default;
   font: var(--f-ui-m);
   justify-content: center;
 
+  &.ecl-link {
+    color: var(--c-d);
+    border-radius: 4px;
+    text-decoration: none;
+
+    &:focus-visible {
+      outline: none;
+    }
+
+    .ecl-link__label {
+      margin: 0;
+    }
+  }
+
   &:active,
   &[aria-expanded='true'] {
     background-color: var(--c-p-20);
   }
 }
 
+.ecl-site-header__custom-action-toggle {
+  .ecl-link__icon-container {
+    .ecl-site-header__icon {
+      margin-inline-end: 0;
+    }
+  }
+
+  .ecl-indicator:not(:empty) {
+    left: -18px;
+    right: auto;
+  }
+}
+
 .ecl-site-header__search--active {
   display: flex;
   margin-top: var(--s-m);
 
   @include breakpoints.down('m') {
     &::before {
-      @include site-header-language-switcher.arrow-up;
+      @include site-header-dropdown.arrow-up;
 
       left: auto;
       right: var(--ecl-search-arrow-position);
@@ -275,6 +285,7 @@ $language-list: null !default;
   margin-top: var(--s-m);
 }
 
+.ecl-site-header__custom-action-icon,
 .ecl-site-header__language-icon {
   align-items: center;
   display: flex;
@@ -314,6 +325,7 @@ $language-list: null !default;
 // stylelint-enable plugin/selector-bem-pattern
 
 @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 {
@@ -321,6 +333,16 @@ $language-list: null !default;
     line-height: 0;
     padding: calc(var(--s-xs) - 1px) 0;
 
+    &.ecl-link {
+      .ecl-link__label {
+        display: none;
+      }
+    }
+
+    .ecl-link__icon-container {
+      margin-inline-start: 0;
+    }
+
     .ecl-icon {
       height: 1.5rem;
       width: 1.5rem;
@@ -330,6 +352,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;
   }
@@ -403,6 +434,10 @@ $language-list: null !default;
     margin-inline-end: 0;
   }
 
+  .ecl-site-header__site-name--mobile-only {
+    display: none;
+  }
+
   .ecl-site-header__container {
     align-items: flex-end;
     flex-direction: row;
@@ -421,6 +456,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');
     }
@@ -457,6 +500,7 @@ $language-list: null !default;
     }
   }
 
+  .ecl-site-header__custom-action-toggle,
   .ecl-site-header__login-toggle,
   .ecl-site-header__language-selector {
     .ecl-site-header__icon {

package/site-header-language-switcher.html.twig

@@ -2,7 +2,6 @@
 
 {#
   Parameters:
-    - "icon_path" (string) (default: ''): URL to icons file
     - "language_selector" (associative array) (default: predefined structure): Language switcher settings. format:
         {
           "href": (string) (default: ''): URL for switcher
@@ -37,7 +36,6 @@
 {# Default variables #}
 
 {% set _language_selector = language_selector|default({}) %}
-{% set _icon_path = icon_path|default('') %}
 {% set _label = _language_selector.label|default('') %}
 
 {# Internal logic - Process properties #}
@@ -62,7 +60,6 @@
     <span class="ecl-site-header__language-icon">
       {% include '@ecl/icon/icon.html.twig' with {
         icon: {
-          path: _icon_path,
           name: 'global',
           size: 's'
         },

package/site-header-print.scss

@@ -7,12 +7,22 @@
 
 // Exposed variables
 $theme: null !default;
+$site-header: null !default;
+
+.ecl-site-header .ecl-site-header__background {
+  background-image: none;
+}
+
+.ecl-site-header__top {
+  display: flex;
+  justify-content: center;
+}
 
 .ecl-site-header__logo-image {
-  height: 1.9cm;
+  height: auto;
   margin-bottom: map.get($theme, 'spacing-print', 's');
   margin-top: map.get($theme, 'spacing-print', 'm');
-  width: 7.2cm;
+  width: 6.65cm;
 }
 
 .ecl-site-header__action {
@@ -20,11 +30,11 @@ $theme: null !default;
 }
 
 .ecl-site-header__banner-top {
-  color: var(--c-d);
-  font: map.get($theme, 'font-prolonged-print', 'm');
+  color: var(--cm-on-surface-brand, var(--c-d));
+  font: map.get($theme, 'font-print', 'm');
 
   .ecl-link {
-    color: var(--c-d);
+    color: var(--cm-on-surface-brand, var(--c-d));
   }
 
   .ecl-link::after {
@@ -33,6 +43,7 @@ $theme: null !default;
 }
 
 .ecl-site-header__banner {
+  color: map.get($site-header, 'banner-text-color');
   font: map.get($theme, 'font-print', '3xl');
   font-family: var(--ecl-font-family-print-alt);
   font-weight: map.get($theme, 'font-weight-print', 'bold');
@@ -46,3 +57,7 @@ $theme: null !default;
 .ecl-site-header__logo-image-mobile {
   display: none;
 }
+
+.ecl-site-header__notification .ecl-notification {
+  width: 100%;
+}