@ecl/site-header 5.0.0-alpha.8 → 5.0.0-aplha.13

package/README.md

@@ -11,7 +11,6 @@ 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:
@@ -76,7 +75,6 @@ npm install --save @ecl/site-header
 {% include '@ecl/site-header/site-header.html.twig' with { 
   banner_top: 'Class name', 
   site_name: 'This site name'
-  icon_path: '/icons.svg', 
   logo: {
     alt: 'European Commission', 
     href: '/example', 

package/_site-header-dropdown.scss

@@ -14,7 +14,7 @@ $language-list: null !default;
 
 @mixin with-scrollbar {
   overflow-y: auto;
-  scrollbar-color: var(--cm-surface-medium, 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;
 }
 

package/package.json

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

package/site-header-ec.scss

@@ -182,7 +182,7 @@ $language-list: null !default;
   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;
 
@@ -278,6 +278,10 @@ $language-list: null !default;
   }
 }
 
+.ecl-site-header__site-name {
+  margin-inline-end: var(--s-5xl);
+}
+
 // Menu display and position
 $menu-top: calc(44px + 2 * var(--s-xs));
 
@@ -464,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;
 

package/site-header-eu.scss

@@ -78,6 +78,14 @@ $language-list: null !default;
     }
   }
 
+  .ecl-menu__inner-header {
+    flex-flow: row;
+
+    .ecl-menu__close {
+      display: none;
+    }
+  }
+
   /* stylelint-disable no-descending-specificity */
   .ecl-menu__open,
   .ecl-mega-menu__open,

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'
         },
@@ -109,7 +106,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 +142,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

@@ -43,11 +43,7 @@ $site-header: 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');
-  margin-top: map.get($theme, 'spacing-print', 'xs');
+  display: none !important;
 }
 
 .ecl-site-header__logo-link::after {

package/site-header.html.twig

@@ -2,7 +2,6 @@
 
 {#
   Parameters:
-    - "icon_path" (string) (default: ''): URL to icons file
     - "banner_top" (object): Object of type link (link : { label, path })
     - "logged" (boolean): Whether the user is logged in or not
     - "menu" (associative array): Menu content, if any. Uses ECL Menu structure
@@ -105,7 +104,6 @@
 {% set _login_box = login_box|default({}) %}
 {% set _login_toggle = login_toggle|default({}) %}
 {% set _search_toggle = search_toggle|default({}) %}
-{% set _icon_path = icon_path|default('') %}
 {% set _menu = menu|default(false) %}
 {% set _mega_menu = mega_menu|default(false) %}
 {% set _site_name = site_name|default('') %}
@@ -187,7 +185,6 @@
       label: _search_button_label,
       icon: {
         name: 'search',
-        path: _icon_path,
         size: 'fluid',
       },
       icon_position: 'before',
@@ -299,7 +296,6 @@
                 {% 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({
-                  path: _icon_path,
                   extra_classes: icon_extra_classes
                 }) %}
               {% else %}
@@ -363,7 +359,6 @@
               >
                 {% include '@ecl/icon/icon.html.twig' with {
                   icon: {
-                    path: _icon_path,
                     name: 'logged-in',
                     size: 's'
                   },
@@ -478,7 +473,6 @@
       {%- if banner_top.link is defined and banner_top.link is not empty %}
         {% include '@ecl/link/link.html.twig' with banner_top|merge({
           link: banner_top.link|merge({ type: 'standalone', no_visited: true}),
-          icon_path: _icon_path
         }) only %}
       {% else %}
         {{ banner_top }}
@@ -517,13 +511,11 @@
 {% if _menu is defined and _menu is not empty %}
   {% include '@ecl/menu/menu.html.twig' with _menu|merge({
     site_name: _site_name,
-    icon_path: _icon_path,
   }) only %}
 {% endif %}
 {% if _mega_menu is defined and _mega_menu is not empty %}
   {% include '@ecl/mega-menu/mega-menu.html.twig' with _mega_menu|merge({
     site_name: _site_name,
-    icon_path: _icon_path,
   }) only %}
 {% endif %}
 </header>

package/site-header.js

@@ -446,9 +446,8 @@ export class SiteHeader {
         arrowCssVar,
         `calc(${arrowPos}px - ${this.arrowSize})`,
       );
-    }
-    // If popover extends beyond left edge in RTL
-    else if (this.direction === 'rtl' && popoverRect.left < 0) {
+    } else if (this.direction === 'rtl' && popoverRect.left < 0) {
+      // If popover extends beyond left edge in RTL
       overlay.classList.add('ecl-site-header__language-container--push-left');
       overlay.style.setProperty(
         'left',