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

package/site-header.html.twig

@@ -2,17 +2,18 @@
 
 {#
   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
     - "mega_menu" (associative array): Menu content, if any. Uses ECL Mega Menu structure
     - "site_name" (string) Site name
+    - "site_name_mobile_only" (boolean): Whether the site name should be hidden on desktop or not
     - "cta_link": (optional) (default: {}): Call to action link compatible with ECL Link component structure
     - "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: 'xs', 415px) 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
@@ -48,6 +49,22 @@
               ],
             },
         },
+    - "custom_action" (associative array) (default: {}): optional custom link with optional popover, e.g.:
+      {
+        "link": (object) (default: predefined structure) predefined structure for the Link component
+        "icon" (associative array) OR (array) of associative arrays : format
+          {
+            name: (string) (default: ''),
+            extra_classes: (string) (default: 'ecl-link__icon'),
+            ...
+          }
+        "overlay": (object) – if defined, we display a popover; otherwise it’s a simple link
+          {
+            "title": (string) (default: '')
+            "close_label": (string) (default: '')
+            "content": (string)
+          }
+      }
     - "search_toggle" (associate array) (default: {}) format:
       {
         "label": (string) Label of the element
@@ -67,7 +84,7 @@
         "label_logged": (string) Label for the logged in users
         "href_logged": (string) Link to the logout form
       }
-    - "search_form" (associative array) (default: predefined structure): EC Search Form component structure
+    - "search_form" (associative array) (default: predefined structure): ECL Search Form component structure
     - "notification" (object) (default: {}): Optional notification compatible with ECL Notification component structure
     - "extra_classes" (string) (default: '')
     - "extra_attributes" (array) (default: data-ecl-auto-init="SiteHeaderStandardised"): format: [
@@ -82,14 +99,15 @@
 
 {% set _logo = logo|default({}) %}
 {% set _language_selector = language_selector|default({}) %}
+{% set _custom_action = custom_action|default({}) %}
 {% set _logged = logged|default(false) %}
 {% 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('') %}
+{% set _site_name_mobile_only = site_name_mobile_only|default(false) %}
 {% set _cta_link = cta_link|default({}) %}
 {% set _notification = notification|default({}) %}
 {% set _extra_attributes = '' %}
@@ -167,7 +185,6 @@
       label: _search_button_label,
       icon: {
         name: 'search',
-        path: _icon_path,
         size: 'fluid',
       },
       icon_position: 'before',
@@ -213,155 +230,228 @@
   {{ _extra_attributes|raw }}
 >
   <div class="ecl-site-header__inner">
-    <div class="ecl-site-header__background">
-      <div class="ecl-site-header__header">
-        <div class="ecl-site-header__container ecl-container">
-          <div class="ecl-site-header__top" data-ecl-site-header-top>
-            {# Logo #}
-            {% if _logo is not empty and _logo.src_desktop is not empty %}
-              {% set _label %}
-                {% set _picture = { sources: [{ src: _logo.src_desktop, media: 'l' }] } %}
-                {% if _logo.src_mobile is defined and _logo.src_mobile is not empty %}
-                  {% set _picture = _picture|merge({
-                    img: {
-                      src: _logo.src_mobile,
-                      alt: _logo.alt,
-                    },
-                  }) %}
-                {% else %}
-                  {% set _picture = _picture|merge({
-                    img: {
-                      src: _logo.src_desktop,
-                      alt: _logo.alt,
-                    },
-                  }) %}
-                {% endif %}
-                {% set image_classes = 'ecl-site-header__logo-image' %}
-                {% set image_classes = image_classes ~ ' ecl-site-header__logo-image--' ~ _logo.size|default('l') %}
-                {% include '@ecl/picture/picture.html.twig' with {
-                  picture: _picture,
-                  extra_classes: "ecl-site-header__picture",
-                  extra_image_classes: image_classes,
-                  extra_attributes: _logo.title is not empty ? [{ name: 'title', value: _logo.title }] : [],
-                } only %}
-              {% endset %}
-              {% include '@ecl/link/link.html.twig' with {
-                link: {
-                  path: _logo.path,
-                  label: _label,
-                  type: 'standalone'
-                },
-                extra_classes: 'ecl-site-header__logo-link'
+    <div class="ecl-site-header__header">
+      <div class="ecl-site-header__container ecl-container">
+        <div class="ecl-site-header__top" data-ecl-site-header-top>
+          {# Logo #}
+          {% if _logo is not empty and _logo.src_desktop is not empty %}
+            {% set _label %}
+              {% set _picture = { sources: [{ src: _logo.src_desktop, media: _logo.breakpoint|default('xs') }] } %}
+              {% if _logo.src_mobile is defined and _logo.src_mobile is not empty %}
+                {% set _picture = _picture|merge({
+                  img: {
+                    src: _logo.src_mobile,
+                    alt: _logo.alt,
+                  },
+                }) %}
+              {% else %}
+                {% set _picture = _picture|merge({
+                  img: {
+                    src: _logo.src_desktop,
+                    alt: _logo.alt,
+                  },
+                }) %}
+              {% endif %}
+              {% set image_classes = 'ecl-site-header__logo-image' %}
+              {% set image_classes = image_classes ~ ' ecl-site-header__logo-image--' ~ _logo.size|default('l') %}
+              {% include '@ecl/picture/picture.html.twig' with {
+                picture: _picture,
+                extra_classes: "ecl-site-header__picture",
+                extra_image_classes: image_classes,
+                extra_attributes: _logo.title is not empty ? [{ name: 'title', value: _logo.title }] : [],
               } only %}
-            {% endif %}
+            {% endset %}
+            {% include '@ecl/link/link.html.twig' with {
+              link: {
+                path: _logo.path,
+                label: _label,
+                type: 'standalone'
+              },
+              extra_classes: 'ecl-site-header__logo-link'
+            } only %}
+          {% endif %}
 
-            {# Header actions #}
-            <div class="ecl-site-header__action">
-            
-            {# Login #}
-            {% if _login_toggle is not empty and _login_box is not empty %}
-              <div class="ecl-site-header__login-container">
-              {% if _logged %}
-                <a
-                  class="ecl-button ecl-button--tertiary ecl-site-header__login-toggle"
-                  href="{{ _login_toggle.href_logged }}"
-                  aria-controls="{{ _login_box.id }}"
-                  data-ecl-login-toggle
-                  aria-expanded="false"
-                >
-                  {% include '@ecl/icon/icon.html.twig' with {
-                    icon: {
-                      path: _icon_path,
-                      name: 'logged-in',
-                      size: 's'
-                    },
-                    as_image: true,
-                    extra_classes: 'ecl-site-header__icon',
-                    extra_accessibility: {
-                      title: login_toggle.label_logged,
-                    },
-                  } only %}
-                  {{- login_toggle.label_logged -}}
-                </a>
-                <div
-                  id="{{ _login_box.id }}"
-                  class="ecl-site-header__login-box"
-                  data-ecl-login-box
-                >
-                  <p class="ecl-site-header__login-description">
-                    {{- _login_box.description -}}
-                  </p>
-                  <hr class="ecl-site-header__login-separator">
-                  {% include '@ecl/link/link.html.twig' with {
-                    link: {
-                      label: _login_box.label,
-                      path: _login_box.href,
-                      type: 'standalone',
-                    }
-                  } only %}
-                </div>
+          {# Header actions #}
+          <div class="ecl-site-header__action">
+          
+          {# Custom action #}
+          {% if _custom_action is not empty %}
+            <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([
+                { name: 'role', value: 'button' },
+                { name: 'data-ecl-custom-action', value: '' }
+              ]) %}
+              {% if is_overlay %}
+                {% set link_extra_attributes = link_extra_attributes|merge([
+                  { name: 'aria-controls', value: 'custom-action-overlay' },
+                  { name: 'aria-expanded', value: 'false' }
+                ]) %}
+              {% endif %}
+
+              {% if has_icon %}
+                {% set icon = _custom_action.icon|merge({
+                  extra_classes: (_custom_action.icon.extra_classes|default('')) ~ ' ecl-site-header__icon'
+                }) %}
               {% else %}
-                <a
-                  class="ecl-button ecl-button--tertiary ecl-site-header__login-toggle"
-                  href="{{ _login_toggle.href_not_logged }}"
-                  data-ecl-login-toggle
-                >
-                  {% include '@ecl/icon/icon.html.twig' with {
-                    icon: {
-                      path: _icon_path,
-                      name: 'log-in',
-                      size: 's'
-                    },
-                    as_image: true,
-                    extra_classes: 'ecl-site-header__icon',
-                    extra_accessibility: {
-                      title: login_toggle.label_not_logged,
-                    },
-                  } only %}
-                  {{- login_toggle.label_not_logged -}}
-                </a>
+                {% set icon = null %}
               {% endif %}
-              </div>
-            {% endif %}
 
-            {# Language selector #}
-            {% if _language_selector is not empty %}
-              {% include '@ecl/site-header/site-header-language-switcher.html.twig' with {
-                language_selector: _language_selector,
-                icon_path: _icon_path,
-              } only %}
-            {% 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' }),
+                icon: icon,
+                extra_attributes: link_extra_attributes,
+                extra_classes: full_classes
+              } %}
 
-            {# Search form #}
-            {% if _search_form is defined %}
-              <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"
-                  href="{{ _search_toggle.href }}"
-                  data-ecl-search-toggle="true"
-                  aria-controls="search-form-id"
-                  aria-expanded="false"
+              {% include '@ecl/link/link.html.twig' with custom_action_link only %}
+
+              {% if _custom_action.overlay is defined and _custom_action.overlay is not empty %}
+                <div
+                  class="ecl-site-header__custom-action-overlay"
+                  id="custom-action-overlay"
+                  hidden
+                  data-ecl-custom-action-overlay
+                  role="dialog"
+                  aria-labelledby="custom-action-overlay-title"
                 >
-                {%- include '@ecl/icon/icon.html.twig' with {
+                  <div class="ecl-site-header__custom-action-header">
+                    <div class="ecl-site-header__custom-action-title" id="custom-action-overlay-title">
+                      {{ _custom_action.overlay.title|default('') }}
+                    </div>
+
+                    {% 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',
+                        }],
+                      }) %}
+                    {% endif %}
+                  </div>
+                  <div class="ecl-site-header__custom-action-content">
+                    {{ _custom_action.overlay.content|default('')|raw }}
+                  </div>
+                </div>
+              {% endif %}
+            </div>
+          {% endif %}
+
+          {# Login #}
+          {% if _login_toggle is not empty and _login_box is not empty %}
+            <div class="ecl-site-header__login-container">
+            {% if _logged %}
+              <a
+                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
+                aria-expanded="false"
+              >
+                {% include '@ecl/icon/icon.html.twig' with {
                   icon: {
-                    name: 'search',
-                    path: _icon_path,
-                    size: 's',
+                    name: 'logged-in',
+                    size: 'm'
                   },
                   as_image: true,
                   extra_classes: 'ecl-site-header__icon',
                   extra_accessibility: {
-                    title: _search_toggle.label,
+                    title: login_toggle.label_logged,
                   },
-                } only -%}
-                {{- _search_toggle.label -}}
-                </a>
-              {% endif %}
-                {% include '@ecl/search-form/search-form.html.twig' with _search_form only %}
+                } only %}
+                {{- login_toggle.label_logged -}}
+              </a>
+              <div
+                id="{{ _login_box.id }}"
+                class="ecl-site-header__login-box"
+                data-ecl-login-box
+              >
+                <p class="ecl-site-header__login-description">
+                  {{- _login_box.description -}}
+                </p>
+                <hr class="ecl-site-header__login-separator">
+                {% include '@ecl/link/link.html.twig' with {
+                  link: {
+                    label: _login_box.label,
+                    path: _login_box.href,
+                    type: 'standalone',
+                  }
+                } only %}
               </div>
+            {% else %}
+              <a
+                class="ecl-button ecl-button--tertiary ecl-button--neutral ecl-site-header__login-toggle"
+                href="{{ _login_toggle.href_not_logged }}"
+                data-ecl-login-toggle
+              >
+                {% include '@ecl/icon/icon.html.twig' with {
+                  icon: {
+                    path: _icon_path,
+                    name: 'log-in',
+                    size: 'm'
+                  },
+                  as_image: true,
+                  extra_classes: 'ecl-site-header__icon',
+                  extra_accessibility: {
+                    title: login_toggle.label_not_logged,
+                  },
+                } only %}
+                {{- login_toggle.label_not_logged -}}
+              </a>
             {% endif %}
             </div>
+          {% endif %}
+
+          {# Language selector #}
+          {% if _language_selector is not empty %}
+            {% include '@ecl/site-header/site-header-language-switcher.html.twig' with {
+              language_selector: _language_selector,
+              icon_path: _icon_path,
+            } only %}
+          {% endif %}
+
+          {# Search form #}
+          {% if _search_form is defined %}
+            <div class="ecl-site-header__search-container" role="search">
+            {% if _search_toggle is not empty %}
+              <a
+                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"
+                aria-expanded="false"
+              >
+              {%- include '@ecl/icon/icon.html.twig' with {
+                icon: {
+                  name: 'search',
+                  path: _icon_path,
+                  size: 'm',
+                },
+                as_image: true,
+                extra_classes: 'ecl-site-header__icon',
+                extra_accessibility: {
+                  title: _search_toggle.label,
+                },
+              } only -%}
+              {{- _search_toggle.label -}}
+              </a>
+            {% endif %}
+              {% include '@ecl/search-form/search-form.html.twig' with _search_form only %}
+            </div>
+          {% endif %}
           </div>
         </div>
       </div>
@@ -382,26 +472,32 @@
 
   {# Banner top #}
   {% if banner_top is defined and banner_top is not empty %}
-    <div class="ecl-site-header__banner-top">
-      <div class="ecl-container">
-      {%- 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 }}
-      {% endif -%}
+    <div class="ecl-container">
+      <div class="ecl-site-header__banner-top">
+        {%- 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}),
+          }) only %}
+        {% else %}
+          {{ banner_top }}
+        {% endif -%}
       </div>
     </div>
   {% endif %}
 
   {# Site name and call to action (banner) #}
   {% if _site_name is not empty or _cta_link is not empty %}
-    <div class="ecl-site-header__banner">
+    {% set _banner_class = 'ecl-site-header__banner' %}
+    {% if _site_name_mobile_only %}
+      {% set _banner_class = _banner_class ~ ' ecl-site-header__site-name--mobile-only' %}
+    {% endif %}
+    <div class="{{ _banner_class }}">
       <div class="ecl-container">
         {% if _site_name is not empty %}
-        <div class="ecl-site-header__site-name">{{ _site_name }}</div>
+          {% set _site_name_class = 'ecl-site-header__site-name' %}
+        <div class="{{ _site_name_class }}">
+          {{- _site_name -}}
+        </div>
         {% endif %}
         {% if _cta_link is not empty and _cta_link.link is not empty %}
         {% include '@ecl/link/link.html.twig' with _cta_link|merge({
@@ -420,13 +516,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>