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

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
@@ -19,6 +19,7 @@ $language-list: null !default;
 
 .ecl-site-header {
   background-color: map.get($site-header, 'background-color');
+  background-image: url('https://d2o9p5vky89u4e.cloudfront.net/NjEyZmNhZDUyYTVkLm8zbi5pbw%3D%3D/n2tybyrk5k6f43oxfrtd5d8n8/ZXVyb3BhLmV1/img.gif');
   margin: 0;
   position: relative;
   z-index: map.get($theme, 'z-index', 'modal');
@@ -37,15 +38,14 @@ $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;
     right: 0;
     width: calc(44px + var(--s-m) * 2);
 
-    &.ecl-mega-menu--rtl,
-    &.ecl-menu--rtl {
+    &:dir(rtl) {
       left: 0;
       right: auto;
     }
@@ -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,19 @@ $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-menu__inner-header {
+    flex-flow: row;
 
-  &.ecl-site-header-with-logo-l .ecl-menu__open,
-  &.ecl-site-header-with-logo-l .ecl-mega-menu__open {
-    top: 20px;
+    .ecl-menu__close {
+      display: none;
+    }
   }
 
   /* 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,14 +115,15 @@ $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 */
 }
 
 .ecl-site-header__header {
+  background-color: map.get($site-header, 'background-color');
   position: relative;
   z-index: 54;
 
@@ -156,14 +155,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 +179,6 @@ $language-list: null !default;
   .ecl-search-form__text-input {
     box-sizing: border-box;
     flex-grow: 0;
-    height: 44px;
     width: 100%;
   }
 }
@@ -211,14 +201,14 @@ $language-list: null !default;
 }
 
 .ecl-site-header__login-box {
-  border-radius: map.get($theme, 'border-radius', 's');
+  border-radius: map.get($theme, 'border-radius', 'xs');
   box-sizing: border-box;
   left: 0;
   margin-top: var(--s-m);
   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 +219,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 +229,51 @@ $language-list: null !default;
   font: var(--f-ui-m);
   justify-content: center;
 
+  &.ecl-link {
+    color: var(--c-d);
+    border-radius: map.get($theme, 'border-radius', 's');
+    text-decoration: none;
+
+    &:focus-visible {
+      outline: none;
+    }
+
+    .ecl-link__label {
+      margin: 0;
+    }
+  }
+  // stylelint-disable-next-line no-descending-specificity
+  .ecl-icon {
+    height: map.get($theme, 'icon', 'm');
+    width: map.get($theme, 'icon', 'm');
+  }
+
   &: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') {
+  @include breakpoints.down('l') {
     &::before {
-      @include site-header-language-switcher.arrow-up;
+      @include site-header-dropdown.arrow-up;
 
       left: auto;
       right: var(--ecl-search-arrow-position);
@@ -275,6 +298,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;
@@ -313,29 +337,44 @@ $language-list: null !default;
 }
 // stylelint-enable plugin/selector-bem-pattern
 
-@include breakpoints.down('m') {
+@include breakpoints.down('l') {
+  .ecl-site-header__custom-action-toggle,
   .ecl-site-header__login-toggle,
   .ecl-site-header__search-toggle,
   .ecl-site-header__language-selector {
-    font-size: 0;
-    line-height: 0;
-    padding: calc(var(--s-xs) - 1px) 0;
+    font-size: 0 !important;
+    line-height: 0 !important;
+    padding: calc(var(--s-xs) - 1px) 0 !important;
+
+    &.ecl-link {
+      .ecl-link__label {
+        display: none;
+      }
+    }
 
-    .ecl-icon {
-      height: 1.5rem;
-      width: 1.5rem;
+    .ecl-link__icon-container {
+      margin-inline-start: 0;
     }
   }
 }
 
 /* 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;
   }
 }
 
-@include breakpoints.up('m') {
+@include breakpoints.up('l') {
   .ecl-site-header__logo-link {
     margin-top: 0;
   }
@@ -345,7 +384,7 @@ $language-list: null !default;
   }
 }
 
-@include breakpoints.up('l') {
+@include breakpoints.up('xl') {
   .ecl-site-header {
     .ecl-site-header__cta {
       align-self: center;
@@ -403,6 +442,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,17 +464,20 @@ $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');
     }
   }
 
   .ecl-site-header__action {
-    .ecl-button--icon-only .ecl-button__icon {
-      height: map.get($theme, 'icon', 'xs');
-      width: map.get($theme, 'icon', 'xs');
-    }
-
     .ecl-form-group {
       width: map.get($site-header, 'search-width-l');
     }
@@ -457,19 +503,14 @@ $language-list: null !default;
     }
   }
 
+  .ecl-site-header__custom-action-toggle,
   .ecl-site-header__login-toggle,
   .ecl-site-header__language-selector {
     .ecl-site-header__icon {
-      height: map.get($theme, 'icon', 'xs');
       margin-inline-end: var(--s-xs);
-      width: map.get($theme, 'icon', 'xs');
     }
   }
 
-  .ecl-site-header__login-toggle {
-    margin-inline-end: var(--s-xs) !important;
-  }
-
   .ecl-site-header__search-toggle {
     display: none;
   }
@@ -498,7 +539,7 @@ $language-list: null !default;
   // stylelint-enable plugin/selector-bem-pattern
 }
 
-@include breakpoints.up('xl') {
+@media (width >= 1368px) {
   .ecl-site-header__action .ecl-form-group {
     width: map.get($site-header, 'search-width-xl');
   }

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 #}
@@ -50,7 +48,7 @@
 
 <div class="ecl-site-header__language">
   <a
-    class="ecl-button ecl-button--tertiary ecl-site-header__language-selector"
+    class="ecl-button ecl-button--tertiary ecl-button--neutral ecl-site-header__language-selector"
     href="{{ _language_selector.href|default('') }}"
     data-ecl-language-selector
     role="button"
@@ -62,9 +60,8 @@
     <span class="ecl-site-header__language-icon">
       {% include '@ecl/icon/icon.html.twig' with {
         icon: {
-          path: _icon_path,
           name: 'global',
-          size: 's'
+          size: 'm'
         },
         as_image: true,
         extra_classes: 'ecl-site-header__icon',
@@ -89,6 +86,7 @@
       {% if _language_selector.overlay.close is not empty %}
         {% include '@ecl/button/button.html.twig' with _language_selector.overlay.close|merge({
           variant: 'tertiary',
+          style: 'neutral',
           extra_classes: 'ecl-site-header__language-close',
           extra_attributes: [{
             name: 'data-ecl-language-list-close',
@@ -109,7 +107,7 @@
           {{- _language_selector.eu_category -}}
         </div>
         {% endif %}
-        <ul class="ecl-site-header__language-list">
+        <ul class="ecl-site-header__language-list" translate="no">
           {% for _item in _language_selector.overlay.items %}
           <li class="ecl-site-header__language-item">
             {% set _link_label %}
@@ -145,7 +143,7 @@
           {{- _language_selector.non_eu_category -}}
         </div>
         {% endif %}
-        <ul class="ecl-site-header__language-list">
+        <ul class="ecl-site-header__language-list" translate="no">
           {% for _item in _language_selector.overlay.non_eu_items %}
           <li class="ecl-site-header__language-item">
           {% set _link_label %}

package/site-header-print.scss

@@ -29,25 +29,12 @@ $site-header: null !default;
   display: none;
 }
 
-.ecl-site-header__banner-top {
-  color: var(--cm-on-surface-dark, var(--c-d));
-  font: map.get($theme, 'font-print', 'm');
-
-  .ecl-link {
-    color: var(--cm-on-surface-dark, var(--c-d));
-  }
-
-  .ecl-link::after {
-    display: none;
-  }
+.ecl-site-header__banner {
+  display: none !important;
 }
 
-.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');
-  margin-top: map.get($theme, 'spacing-print', 'xs');
+.ecl-site-header__banner-top {
+  display: none;
 }
 
 .ecl-site-header__logo-link::after {