@ecl/site-header 5.0.0-alpha.15 → 5.0.0-alpha.17

package/_site-header-dropdown.scss

@@ -1,5 +1,6 @@
 @use 'sass:map';
 @use '@ecl/grid/mixins/breakpoints';
+@use '@ecl/mixins-typography/mixins';
 
 // Exposed variables
 $theme: null !default;
@@ -52,7 +53,7 @@ $language-list: null !default;
   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',
@@ -107,7 +108,10 @@ $language-list: null !default;
 
 .ecl-site-header__language-title,
 .ecl-site-header__custom-action-title {
-  font: map.get($language-list, 'header-font-mobile');
+  @include mixins.responsive-font(
+    map.get($language-list, 'header-typography'),
+    map.get($language-list, 'header-typography-font-weight')
+  );
 }
 
 .ecl-site-header__language-close,
@@ -263,11 +267,6 @@ $language-list: null !default;
     width: 400px;
   }
 
-  .ecl-site-header__language-title,
-  .ecl-site-header__custom-action-title {
-    font: map.get($language-list, 'header-font-desktop');
-  }
-
   // Horizontal position
   .ecl-site-header__language-container--push-right {
     left: auto;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@ecl/site-header",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "5.0.0-alpha.15",
+  "version": "5.0.0-alpha.17",
   "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.15",
-    "@ecl/dom-utils": "5.0.0-alpha.15",
-    "@ecl/grid": "5.0.0-alpha.15",
-    "@ecl/icon": "5.0.0-alpha.15",
-    "@ecl/link": "5.0.0-alpha.15",
-    "@ecl/menu": "5.0.0-alpha.15",
-    "@ecl/notification": "5.0.0-alpha.15",
-    "@ecl/picture": "5.0.0-alpha.15",
-    "@ecl/search-form": "5.0.0-alpha.15",
+    "@ecl/button": "5.0.0-alpha.17",
+    "@ecl/dom-utils": "5.0.0-alpha.17",
+    "@ecl/grid": "5.0.0-alpha.17",
+    "@ecl/icon": "5.0.0-alpha.17",
+    "@ecl/link": "5.0.0-alpha.17",
+    "@ecl/menu": "5.0.0-alpha.17",
+    "@ecl/mixins-typography": "5.0.0-alpha.17",
+    "@ecl/notification": "5.0.0-alpha.17",
+    "@ecl/picture": "5.0.0-alpha.17",
+    "@ecl/search-form": "5.0.0-alpha.17",
     "focus-trap": "7.6.5"
   },
   "devDependencies": {
-    "@ecl/resources-ec-logo": "5.0.0-alpha.15",
-    "@ecl/resources-eu-logo": "5.0.0-alpha.15"
+    "@ecl/resources-ec-logo": "5.0.0-alpha.17",
+    "@ecl/resources-eu-logo": "5.0.0-alpha.17"
   },
   "repository": {
     "type": "git",
@@ -39,5 +40,5 @@
     "design-system",
     "twig"
   ],
-  "gitHead": "6004e147f949c0fbb2278650d59a1b8c249653c5"
+  "gitHead": "9f3b8df2dd9b9abc25aacbd0aa68f324da01fa3e"
 }

package/site-header-ec.scss

@@ -20,6 +20,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');
@@ -31,6 +32,11 @@ $language-list: null !default;
     position: absolute;
     right: 0;
     width: 100%;
+
+    &:dir(rtl) {
+      left: 0;
+      right: auto;
+    }
   }
 
   .ecl-menu__open,
@@ -56,11 +62,6 @@ $language-list: null !default;
   }
 }
 
-.ecl-site-header__header {
-  position: relative;
-  z-index: 54;
-}
-
 .ecl-site-header__container {
   display: flex;
   flex-direction: column;
@@ -85,23 +86,6 @@ $language-list: null !default;
   z-index: map.get($theme, 'z-index', 'modal') + 2;
 }
 
-.ecl-search-form__button {
-  color: map.get($site-header, 'toggle-color');
-
-  &:hover {
-    border-left: none;
-    color: var(--cm-on-surface-brand);
-  }
-
-  &:focus-visible {
-    color: var(--cm-on-surface-brand);
-  }
-
-  &:active {
-    background-color: var(--cm-on-surface-neutral-medium);
-  }
-}
-
 .ecl-site-header__action {
   align-items: center;
   align-self: flex-end;
@@ -133,20 +117,19 @@ $language-list: null !default;
 .ecl-site-header__language-selector {
   align-items: center;
   box-sizing: border-box;
-  color: map.get($site-header, 'toggle-color');
   display: flex;
   flex-direction: column;
   margin-inline-start: var(--s-xs);
   position: relative;
   z-index: map.get($theme, 'z-index', 'modal') + 2;
 
-  &:focus-visible {
-    color: map.get($site-header, 'toggle-color');
-  }
-
-  &:active,
   &[aria-expanded='true'] {
-    background-color: var(--cm-surface-neutral-low);
+    background-color: var(--cm-surface-grey-low-0);
+  }
+  // stylelint-disable-next-line no-descending-specificity
+  .ecl-icon {
+    height: map.get($theme, 'icon', 'm');
+    width: map.get($theme, 'icon', 'm');
   }
 }
 
@@ -177,7 +160,7 @@ $language-list: null !default;
   display: none;
   font: var(--f-m);
   left: 0;
-  margin-top: var(--s-l);
+  margin-top: var(--s-m);
   padding: var(--s-5xl) var(--s-m);
   position: absolute;
   z-index: map.get($theme, 'z-index', 'modal') + 1;
@@ -190,7 +173,7 @@ $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;
   width: 100%;
@@ -244,14 +227,8 @@ $language-list: null !default;
   display: flex;
 
   .ecl-notification {
-    background: var(--cm-surface-inverted);
     margin: 0 0 var(--s-m);
   }
-
-  .ecl-notification__description,
-  .ecl-notification__link {
-    font: var(--f-s);
-  }
 }
 
 .ecl-site-header__banner-top {
@@ -285,6 +262,7 @@ $language-list: null !default;
 // Menu display and position
 $menu-top: calc(44px + 2 * var(--s-xs));
 
+// stylelint-disable no-descending-specificity
 // stylelint-disable-next-line no-duplicate-selectors
 .ecl-site-header .ecl-menu,
 .ecl-site-header .ecl-mega-menu {
@@ -298,7 +276,13 @@ $menu-top: calc(44px + 2 * var(--s-xs));
 
 .ecl-site-header .ecl-mega-menu {
   right: calc(-1 * var(--s-l));
+
+  &:dir(rtl) {
+    left: calc(-1 * var(--s-l));
+    right: auto;
+  }
 }
+// stylelint-enable no-descending-specificity
 
 .ecl-site-header .ecl-mega-menu--rtl,
 .ecl-site-header .ecl-menu--rtl {
@@ -347,19 +331,14 @@ $menu-top: calc(44px + 2 * var(--s-xs));
   .ecl-site-header__language-selector {
     align-items: center;
     display: flex;
-    font-size: 0;
+    font-size: 0 !important;
     justify-content: center;
-    line-height: 0;
-    padding: var(--s-xs) 0;
+    line-height: 0 !important;
+    padding: var(--s-xs) 0 !important;
 
     .ecl-link__icon-container {
       margin-inline-start: 0;
     }
-
-    .ecl-icon {
-      width: 1.5rem;
-      height: 1.5rem;
-    }
   }
 }
 
@@ -378,16 +357,18 @@ $menu-top: calc(44px + 2 * var(--s-xs));
       width: calc(44px + var(--s-xl) * 2);
     }
 
-    .ecl-search-form__text-input {
-      width: map.get($site-header, 'search-width');
-    }
-
     .ecl-search-form {
       max-width: 100%;
     }
   }
 }
 
+@include breakpoints.up('l') {
+  .ecl-site-header__notification .ecl-notification {
+    margin-block-end: var(--s-2xl);
+  }
+}
+
 @include breakpoints.up('xl') {
   .ecl-site-header {
     .ecl-site-header__cta {
@@ -421,10 +402,6 @@ $menu-top: calc(44px + 2 * var(--s-xs));
     .ecl-mega-menu__inner {
       top: 0;
     }
-
-    .ecl-site-header__notification .ecl-notification {
-      margin-block-end: var(--s-2xl);
-    }
   }
 
   .ecl-site-header__container {
@@ -435,6 +412,7 @@ $menu-top: calc(44px + 2 * var(--s-xs));
   }
 
   .ecl-site-header__header {
+    background-color: map.get($site-header, 'background-color');
     box-shadow: none;
   }
 
@@ -452,11 +430,6 @@ $menu-top: calc(44px + 2 * var(--s-xs));
   .ecl-site-header__action {
     align-items: center;
     padding-bottom: var(--s-3xs);
-
-    .ecl-button--icon-only .ecl-button__icon {
-      height: map.get($theme, 'icon', 'xs');
-      width: map.get($theme, 'icon', 'xs');
-    }
   }
 
   .ecl-site-header--has-menu,
@@ -492,7 +465,6 @@ $menu-top: calc(44px + 2 * var(--s-xs));
 
   .ecl-site-header__login-box {
     left: 50%;
-    margin-top: var(--s-l);
     min-width: 22rem;
     padding: var(--s-5xl);
     transform: translateX(-50%);
@@ -513,9 +485,7 @@ $menu-top: calc(44px + 2 * var(--s-xs));
 
     .ecl-site-header__icon {
       flex-shrink: 0;
-      height: 1rem;
       margin-inline-end: var(--s-xs);
-      width: 1rem;
     }
   }
 
@@ -535,7 +505,6 @@ $menu-top: calc(44px + 2 * var(--s-xs));
     margin-inline-start: var(--s-xl);
 
     .ecl-search-form__button {
-      min-width: 100px;
       color: map.get($site-header, 'toggle-color');
     }
 
@@ -568,7 +537,7 @@ $menu-top: calc(44px + 2 * var(--s-xs));
   }
 }
 
-@include breakpoints.up('xxl') {
+@media (width >= 1368px) {
   .ecl-site-header__action .ecl-search-form__text-input {
     width: map.get($site-header, 'search-width-xl');
   }

package/site-header-eu.scss

@@ -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');
@@ -44,8 +45,7 @@ $language-list: null !default;
     right: 0;
     width: calc(44px + var(--s-m) * 2);
 
-    &.ecl-mega-menu--rtl,
-    &.ecl-menu--rtl {
+    &:dir(rtl) {
       left: 0;
       right: auto;
     }
@@ -123,6 +123,7 @@ $language-list: null !default;
 }
 
 .ecl-site-header__header {
+  background-color: map.get($site-header, 'background-color');
   position: relative;
   z-index: 54;
 
@@ -200,7 +201,7 @@ $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);
@@ -230,7 +231,7 @@ $language-list: null !default;
 
   &.ecl-link {
     color: var(--c-d);
-    border-radius: 4px;
+    border-radius: map.get($theme, 'border-radius', 's');
     text-decoration: none;
 
     &:focus-visible {
@@ -241,6 +242,11 @@ $language-list: null !default;
       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'] {
@@ -336,9 +342,9 @@ $language-list: null !default;
   .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 {
@@ -349,11 +355,6 @@ $language-list: null !default;
     .ecl-link__icon-container {
       margin-inline-start: 0;
     }
-
-    .ecl-icon {
-      height: 1.5rem;
-      width: 1.5rem;
-    }
   }
 }
 
@@ -477,11 +478,6 @@ $language-list: null !default;
   }
 
   .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');
     }
@@ -511,16 +507,10 @@ $language-list: null !default;
   .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;
   }
@@ -549,7 +539,7 @@ $language-list: null !default;
   // stylelint-enable plugin/selector-bem-pattern
 }
 
-@include breakpoints.up('xxl') {
+@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

@@ -48,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"
@@ -61,7 +61,7 @@
       {% include '@ecl/icon/icon.html.twig' with {
         icon: {
           name: 'global',
-          size: 's'
+          size: 'm'
         },
         as_image: true,
         extra_classes: 'ecl-site-header__icon',
@@ -86,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',

package/site-header.html.twig

@@ -279,6 +279,7 @@
             <div class="ecl-site-header__custom-action" aria-live="polite">
               {% set is_overlay = _custom_action.overlay is defined and _custom_action.overlay is not empty %}
               {% set has_icon = _custom_action.icon is defined and _custom_action.icon is not empty %}
+              {% set has_hidden_label = _custom_action.link.hide_label is defined and _custom_action.link.hide_label is not empty %}
 
               {% set link_extra_attributes = _custom_action.link.extra_attributes|default([]) %}
               {% set link_extra_attributes = link_extra_attributes|merge([
@@ -293,25 +294,27 @@
               {% endif %}
 
               {% if has_icon %}
-                {% set icon_extra_classes = _custom_action.icon.extra_classes|default('') %}
-                {% set icon_extra_classes = icon_extra_classes ~ ' ecl-site-header__icon' %}
                 {% set icon = _custom_action.icon|merge({
-                  extra_classes: icon_extra_classes
+                  extra_classes: (_custom_action.icon.extra_classes|default('')) ~ ' ecl-site-header__icon'
                 }) %}
               {% else %}
                 {% set icon = null %}
               {% endif %}
 
+              {% set base_classes = 'ecl-site-header__custom-action-toggle ecl-button ecl-button--tertiary ecl-button--neutral' %}
+              {% if has_icon and has_hidden_label %}
+                {% set base_classes = base_classes ~ ' ecl-button--icon-only' %}
+              {% endif %}
+              {% set user_classes = _custom_action.link.extra_classes|default('') %}
+              {% set full_classes = (user_classes ? user_classes ~ ' ' : '') ~ base_classes %}
+
               {% set custom_action_link = {
-                link: _custom_action.link|merge({ type: "standalone" }),
+                link: _custom_action.link|merge({ type: 'standalone' }),
                 icon: icon,
                 extra_attributes: link_extra_attributes,
-                extra_classes: (
-                  _custom_action.link.extra_classes is defined and _custom_action.link.extra_classes is not empty
-                    ? _custom_action.link.extra_classes ~ ' ecl-site-header__custom-action-toggle ecl-button ecl-button--tertiary'
-                    : 'ecl-site-header__custom-action-toggle ecl-button ecl-button--tertiary'
-                )
+                extra_classes: full_classes
               } %}
+
               {% include '@ecl/link/link.html.twig' with custom_action_link only %}
 
               {% if _custom_action.overlay is defined and _custom_action.overlay is not empty %}
@@ -331,6 +334,7 @@
                     {% if _custom_action.overlay.close is defined and _custom_action.overlay.close is not empty %}
                       {% include '@ecl/button/button.html.twig' with _custom_action.overlay.close|merge({
                         variant: 'tertiary',
+                        style: 'neutral',
                         extra_classes: 'ecl-site-header__custom-action-close',
                         extra_attributes: [{
                           name: 'data-ecl-custom-action-close',
@@ -351,7 +355,7 @@
             <div class="ecl-site-header__login-container">
             {% if _logged %}
               <a
-                class="ecl-button ecl-button--tertiary ecl-site-header__login-toggle"
+                class="ecl-button ecl-button--tertiary ecl-button--neutral ecl-site-header__login-toggle"
                 href="{{ _login_toggle.href_logged }}"
                 aria-controls="{{ _login_box.id }}"
                 data-ecl-login-toggle
@@ -360,7 +364,7 @@
                 {% include '@ecl/icon/icon.html.twig' with {
                   icon: {
                     name: 'logged-in',
-                    size: 's'
+                    size: 'm'
                   },
                   as_image: true,
                   extra_classes: 'ecl-site-header__icon',
@@ -389,7 +393,7 @@
               </div>
             {% else %}
               <a
-                class="ecl-button ecl-button--tertiary ecl-site-header__login-toggle"
+                class="ecl-button ecl-button--tertiary ecl-button--neutral ecl-site-header__login-toggle"
                 href="{{ _login_toggle.href_not_logged }}"
                 data-ecl-login-toggle
               >
@@ -397,7 +401,7 @@
                   icon: {
                     path: _icon_path,
                     name: 'log-in',
-                    size: 's'
+                    size: 'm'
                   },
                   as_image: true,
                   extra_classes: 'ecl-site-header__icon',
@@ -424,7 +428,7 @@
             <div class="ecl-site-header__search-container" role="search">
             {% if _search_toggle is not empty %}
               <a
-                class="ecl-button ecl-button--tertiary ecl-site-header__search-toggle"
+                class="ecl-button ecl-button--tertiary ecl-button--neutral ecl-site-header__search-toggle"
                 href="{{ _search_toggle.href }}"
                 data-ecl-search-toggle="true"
                 aria-controls="search-form-id"
@@ -434,7 +438,7 @@
                 icon: {
                   name: 'search',
                   path: _icon_path,
-                  size: 's',
+                  size: 'm',
                 },
                 as_image: true,
                 extra_classes: 'ecl-site-header__icon',