@ecl/site-header 5.0.0-alpha.1

package/site-header-print.scss

@@ -0,0 +1,48 @@
+/**
+ * Site Header print
+ * @define site-header
+ */
+
+@use 'sass:map';
+
+// Exposed variables
+$theme: null !default;
+
+.ecl-site-header__logo-image {
+  height: 1.9cm;
+  margin-bottom: map.get($theme, 'spacing-print', 's');
+  margin-top: map.get($theme, 'spacing-print', 'm');
+  width: 7.2cm;
+}
+
+.ecl-site-header__action {
+  display: none;
+}
+
+.ecl-site-header__banner-top {
+  color: var(--c-d);
+  font: map.get($theme, 'font-prolonged-print', 'm');
+
+  .ecl-link {
+    color: var(--c-d);
+  }
+
+  .ecl-link::after {
+    display: none;
+  }
+}
+
+.ecl-site-header__banner {
+  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__logo-link::after {
+  display: none;
+}
+
+.ecl-site-header__logo-image-mobile {
+  display: none;
+}

package/site-header.html.twig

@@ -0,0 +1,434 @@
+{% apply spaceless %}
+
+{#
+  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
+    - "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.
+          "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
+          "size": (string) (default: 'l'): Three sizes in desktop (s, m, l)
+        },
+    - "language_selector" (associative array) (default: predefined structure): Language switcher settings. format:
+        {
+          "href": (string) (default: ''): URL for switcher
+          "label": (string) (default: ''): Switcher language label, eg. 'English', 'Français', etc.
+          "aria_label": (string) (default: ''): Switcher language aria label
+          "code": (string) (default: ''): Switcher language code, eg. 'en', 'fr', etc.
+          "eu_category": (string) (default: ''): Label for EU languages
+          "non_eu_category": (string) (default: ''): Label for non-EU languages
+          "overlay" (associative array) (default: predefined structure): Overlay language switcher settings. format:
+            {
+              "close_label": (string) (default: ''): Close button label eg. 'Close'.
+              "title": (string) (default: ''): Overlay title, eg. 'Select your language'.
+              "items": (array) (default: []): (array) (default: []): format: [
+                {
+                  "lang" (string) (default: '') Item language code, eg. 'en', 'fr', etc.
+                  "label" (string) (default: '') Item language label, eg. 'English', 'Français', etc.
+                  "path" (string) (default: '') Item language URL eg. '/example#language_en'.
+                  "active" (boolean) (default: false) define if item is the active language.
+                },
+              ],
+              "non_eu_items": (array) (default: []): (array) (default: []): format: [
+                {
+                  "lang" (string) (default: '') Item language code, eg. 'en', 'fr', etc.
+                  "label" (string) (default: '') Item language label, eg. 'English', 'Français', etc.
+                  "path" (string) (default: '') Item language URL eg. '/example#language_en'.
+                  "active" (boolean) (default: false) define if item is the active language.
+                },
+              ],
+            },
+        },
+    - "search_toggle" (associate array) (default: {}) format:
+      {
+        "label": (string) Label of the element
+        "path": (string) Link of the element
+      }
+    - "login_box" (associate array) (default: {}) format:
+        {
+          "id": (string): Id of the box
+          "description": (string) default('Logged in as <last name>, <first name>')
+          "label": (string): Log out label
+          "href": (string): Url of the link
+      }
+    - "login_toggle" (associate array) (default: {}) format:
+      {
+        "label_not_logged": (string) Label for the anonymous users
+        "href_not_logged": (string) Link to the login form
+        "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
+    - "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: [
+        {
+          "name" (string) (default: ''),
+          "value" (optional) (string)
+        ...
+      ],
+#}
+
+{# Default variables #}
+
+{% set _logo = logo|default({}) %}
+{% set _language_selector = language_selector|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 _cta_link = cta_link|default({}) %}
+{% set _notification = notification|default({}) %}
+{% set _extra_attributes = '' %}
+{% set _css_class = 'ecl-site-header' %}
+{% set _search_form_extra_attributes = [{ name: 'data-ecl-search-form' }] %}
+{% set _search_input_extra_classes = 'ecl-search-form__text-input' %}
+{% set _search_form_extra_classes = 'ecl-site-header__search' %}
+{% set _search_input_extra_attributes = [] %}
+{% set _search_button_extra_attributes = [] %}
+{% set _search_button_label = '' %}
+
+{# Merge options #}
+
+{% set extra_attributes = [
+  { name: 'data-ecl-auto-init', value: 'SiteHeader' }
+  ]|merge(extra_attributes|default([]))
+%}
+
+{% if logo is defined and logo is not empty %}
+  {% set _logo = _logo|merge(logo) %}
+{% endif %}
+
+{% if login_toggle is defined and login_toggle is not empty %}
+  {% set _login_toggle = _login_toggle|merge(login_toggle) %}
+{% endif %}
+
+{% if login_box is defined and login_box is not empty %}
+  {% set _login_box = _login_box|merge(login_box) %}
+{% endif %}
+
+{% if language_selector is defined and language_selector is not empty %}
+  {% set _language_selector = _language_selector|merge(language_selector) %}
+{% endif %}
+
+{% if search_toggle is defined and search_toggle is not empty %}
+  {% set _search_toggle = _search_toggle|merge(search_toggle) %}
+{% endif %}
+
+{% if search_form is defined and search_form is not empty %}
+  {% if search_form.extra_attributes is defined and search_form.extra_attributes is not empty %}
+    {% set _search_form_extra_attributes = _search_form_extra_attributes|merge(search_form.extra_attributes) %}
+  {% endif %}
+  {% if search_form.extra_classes is defined and search_form.extra_classes is not empty %}
+    {% set _search_form_extra_classes = _search_form_extra_classes ~ ' ' ~ search_form.extra_classes %}
+  {% endif %}
+
+  {% if search_form.text_input is defined and search_form.text_input is not empty %}
+    {% if search_form.text_input.extra_classes is defined and search_form.text_input.extra_classes is not empty %}
+      {% set _search_input_extra_classes = _search_input_extra_classes ~ ' ' ~ _search_form.text_input.extra_classes %}
+    {% endif %}
+    {% if search_form.text_input.extra_attributes is defined and search_form.text_input.extra_attributes is not empty %}
+      {% set _search_input_extra_attributes = _search_input_extra_attributes|merge(search_form.text_input.extra_attributes) %}
+    {% endif %}
+  {% endif %}
+
+  {% if search_form.button is defined and search_form.button is not empty %}
+    {% if search_form.button.extra_classes is defined and search_form.button.extra_classes is not empty %}
+      {% set _search_button_extra_classes = _search_button_extra_classes ~ ' ' ~ search_form.button.extra_classes %}
+    {% endif %}
+    {% if search_form.button.extra_attributes is defined and search_form.button.extra_attributes is not empty %}
+      {% set _search_button_extra_attributes = _search_button_extra_attributes|merge(search_form.button.extra_attributes) %}
+    {% endif %}
+    {% if search_form.button.label is defined and search_form.button.label is not empty %}
+      {% set _search_button_label = search_form.button.label %}
+    {% endif %}
+  {% endif %}
+
+  {% set _search_form = {
+    label: search_form.label,
+    text_input: search_form.text_input|default({})|merge({
+      extra_input_classes: _search_input_extra_classes,
+      extra_attributes: _search_input_extra_attributes,
+    }),
+    button: search_form.button|default({})|merge({
+      label: _search_button_label,
+      icon: {
+        name: 'search',
+        path: _icon_path,
+        size: 'fluid',
+      },
+      icon_position: 'before',
+      extra_classes: _button_extra_classes,
+      extra_attributes: _search_button_extra_attributes,
+    }),
+    extra_attributes: _search_form_extra_attributes,
+    extra_classes: _search_form_extra_classes
+    }
+  %}
+{% endif %}
+
+{# Internal logic - Process properties #}
+
+{% if _menu is not empty %}
+  {% set extra_classes = _css_class ~ '--has-menu ' ~ extra_classes %}
+{% endif %}
+
+{% if _mega_menu is not empty %}
+  {% set extra_classes = _css_class ~ '--has-mega-menu ' ~ extra_classes %}
+{% endif %}
+
+{% set _css_class = _css_class ~ ' ecl-site-header-with-logo-' ~ _logo.size|default('l')  %}
+
+{% if extra_classes is defined and extra_classes is not empty %}
+  {% set _css_class = _css_class ~ ' ' ~ extra_classes %}
+{% endif %}
+
+{% if extra_attributes is defined and extra_attributes is not empty and extra_attributes is iterable %}
+  {% for attr in extra_attributes %}
+    {% if attr.value is defined %}
+      {% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name|e('html_attr') ~ '="' ~ attr.value|e('html_attr') ~ '"' %}
+    {% else %}
+      {% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name|e('html_attr') %}
+    {% endif %}
+  {% endfor %}
+{% endif %}
+
+{# Print the result #}
+
+<header
+  class="{{ _css_class }}"
+  {{ _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'
+              } 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>
+              {% 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>
+              {% 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-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: 's',
+                  },
+                  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>
+      </div>
+    </div>
+
+  {# Notification #}
+  {% if _notification is defined and _notification is not empty %}
+    <div class="ecl-site-header__notification">
+      <div class="ecl-container">
+        {% include '@ecl/notification/notification.html.twig' with _notification|merge({
+          extra_attributes: _notification.extra_attributes|default([])|merge([{
+            name: 'data-ecl-site-header-notification',
+          }]),
+        }) only %}
+      </div>
+    </div>
+  {% endif %}
+
+  {# 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>
+    </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">
+      <div class="ecl-container">
+        {% if _site_name is not empty %}
+        <div class="ecl-site-header__site-name">{{ _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({
+          link: _cta_link.link|merge({
+            type: 'cta',
+          }),
+          extra_classes: 'ecl-site-header__cta',
+        }) only %}
+        {% endif %}
+      </div>
+    </div>
+  {% endif %}
+  </div>
+
+{# Menu #}
+{% 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>
+
+{% endapply %}