@ecl/site-header 5.0.0-alpha.1

package/site-header-eu.scss

@@ -0,0 +1,505 @@
+/**
+ * Site Header EU
+ * @define site-header
+ */
+
+@use 'sass:map';
+@use '@ecl/grid/mixins/breakpoints';
+
+// Exposed variables
+$theme: null !default;
+$site-header: null !default;
+$language-list: null !default;
+
+@use 'site-header-language-switcher' with (
+  $theme: $theme,
+  $language-switcher: map.get($site-header, 'language-switcher'),
+  $language-list: $language-list
+);
+
+.ecl-site-header {
+  background-color: map.get($site-header, 'background-color');
+  margin: 0;
+  position: relative;
+  z-index: map.get($theme, 'z-index', 'modal');
+
+  .ecl-site-header__inner {
+    box-shadow: var(--sh-4);
+  }
+
+  .ecl-site-header__background {
+    background: map.get($theme, 'color', 'white');
+    position: relative;
+  }
+
+  .ecl-menu,
+  .ecl-mega-menu {
+    background: transparent;
+    box-shadow: none;
+    display: flex;
+    min-height: map.get($site-header, 'logo-height-xs');
+    top: var(--s-m);
+    padding: 0;
+    position: absolute;
+    right: 0;
+    width: calc(44px + var(--s-m) * 2);
+
+    &.ecl-mega-menu--rtl,
+    &.ecl-menu--rtl {
+      left: 0;
+      right: auto;
+    }
+  }
+
+  .ecl-site-header__cta {
+    margin-bottom: var(--s-m);
+    position: relative;
+    width: max-content;
+    z-index: 1;
+  }
+
+  .ecl-site-header__cta:only-child {
+    margin-top: 0;
+  }
+
+  &.ecl-site-header--has-menu,
+  &.ecl-site-header--has-mega-menu {
+    .ecl-site-header__site-name + .ecl-site-header__cta {
+      margin-bottom: var(--s-m);
+    }
+  }
+
+  &.ecl-site-header-with-logo-s .ecl-menu__open,
+  &.ecl-site-header-with-logo-s .ecl-mega-menu__open {
+    top: 8px;
+
+    .ecl-link__icon:last-of-type {
+      top: 1px;
+    }
+  }
+
+  &.ecl-site-header-with-logo-m .ecl-menu__open,
+  &.ecl-site-header-with-logo-m .ecl-mega-menu__open {
+    top: 14px;
+  }
+
+  &.ecl-site-header-with-logo-l .ecl-menu__open,
+  &.ecl-site-header-with-logo-l .ecl-mega-menu__open {
+    top: 20px;
+  }
+
+  /* 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 {
+    align-items: center;
+    border: 1px solid transparent;
+    box-sizing: border-box;
+    color: currentcolor;
+    height: 44px;
+    padding: calc(var(--s-xs) + 1px) 0;
+    position: relative;
+    z-index: 54;
+
+    &:hover {
+      border-color: var(--c-d);
+      border-width: 1px;
+    }
+  }
+
+  .ecl-menu__open .ecl-icon:last-of-type {
+    height: 1.5rem;
+    width: 1.5rem;
+  }
+
+  .ecl-mega-menu__open {
+    margin-inline-start: var(--s-m);
+  }
+
+  .ecl-menu[aria-expanded='true'] .ecl-menu__open,
+  .ecl-mega-menu[aria-expanded='true'] .ecl-mega-menu__open {
+    background-color: var(--c-p-20);
+  }
+  /* stylelint-enable no-descending-specificity */
+}
+
+.ecl-site-header__header {
+  position: relative;
+  z-index: 54;
+
+  .ecl-site-header--open-menu:not(.ecl-site-header--open-menu-start) & {
+    box-shadow: var(--sh-4);
+  }
+}
+
+.ecl-site-header__container {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: var(--s-l);
+  padding-top: var(--s-l);
+  position: static;
+}
+
+.ecl-site-header__top {
+  align-items: center;
+  display: flex;
+  flex-grow: 1;
+  justify-content: space-between;
+}
+
+.ecl-site-header__logo-link {
+  flex-grow: 1;
+}
+
+.ecl-site-header__logo-image {
+  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 {
+  align-items: center;
+  display: flex;
+
+  .ecl-button:not(.ecl-search-form__button) {
+    margin-inline-start: var(--s-2xs);
+  }
+
+  .ecl-site-header--has-menu &,
+  .ecl-site-header--has-mega-menu & {
+    margin-inline-end: calc(44px + var(--s-2xs));
+  }
+
+  .ecl-form-group {
+    flex-grow: 0;
+    margin-inline-start: auto;
+    width: 100%;
+  }
+
+  .ecl-search-form__text-input {
+    box-sizing: border-box;
+    flex-grow: 0;
+    height: 44px;
+    width: 100%;
+  }
+}
+
+.ecl-site-header__login-box,
+.ecl-site-header__search {
+  background-color: map.get($theme, 'color', 'white');
+  border: 1px solid var(--c-p-5);
+  box-shadow: var(--sh-3);
+  box-sizing: content-box;
+  color: var(--c-d);
+  display: none;
+  font: var(--f-ui-m);
+  left: 0;
+  margin-top: calc(var(--s-xs) - 1px);
+  padding: calc(var(--s-m) - 1px);
+  position: absolute;
+  width: calc(100% - var(--s-m) - var(--s-m));
+  z-index: map.get($theme, 'z-index', 'modal') + 1;
+}
+
+.ecl-site-header__login-box {
+  border-radius: map.get($theme, 'border-radius', 's');
+  box-sizing: border-box;
+  left: 0;
+  margin-top: var(--s-m);
+  width: 100%;
+
+  &::before {
+    @include site-header-language-switcher.arrow-up;
+
+    left: auto;
+    right: var(--ecl-login-arrow-position);
+  }
+
+  &.ecl-site-header__login-box--active {
+    display: block;
+  }
+}
+
+.ecl-site-header__language-selector,
+.ecl-site-header__login-toggle,
+.ecl-site-header__search-toggle {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  font: var(--f-ui-m);
+  justify-content: center;
+
+  &:active,
+  &[aria-expanded='true'] {
+    background-color: var(--c-p-20);
+  }
+}
+
+.ecl-site-header__search--active {
+  display: flex;
+  margin-top: var(--s-m);
+
+  @include breakpoints.down('m') {
+    &::before {
+      @include site-header-language-switcher.arrow-up;
+
+      left: auto;
+      right: var(--ecl-search-arrow-position);
+    }
+  }
+}
+
+.ecl-site-header__language-container {
+  margin-top: var(--s-m);
+}
+
+.ecl-site-header__login-description {
+  margin: 0;
+  max-width: var(--max-w);
+}
+
+.ecl-site-header__login-separator {
+  background-color: var(--c-p-20);
+  border-width: 0;
+  height: 1px;
+  margin-bottom: var(--s-m);
+  margin-top: var(--s-m);
+}
+
+.ecl-site-header__language-icon {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  position: relative;
+}
+
+.ecl-site-header__banner-top {
+  border-top: 1px solid var(--c-p-20);
+  font: var(--f-m);
+  padding: var(--s-xs) 0;
+}
+
+.ecl-site-header__site-name {
+  border-top: 1px solid var(--c-p-20);
+  color: map.get($site-header, 'site-name-mobile-color');
+  font: var(--f-2xl);
+  padding: var(--s-l) 0;
+}
+
+.ecl-site-header__notification {
+  display: flex;
+
+  .ecl-notification {
+    margin: 0 0 var(--s-l);
+  }
+}
+
+// stylelint-disable plugin/selector-bem-pattern
+.ecl-site-header .ecl-search-form__button .ecl-button__label {
+  display: none;
+}
+
+.ecl-site-header .ecl-search-form__button .ecl-button__icon {
+  display: block;
+}
+// stylelint-enable plugin/selector-bem-pattern
+
+@include breakpoints.down('m') {
+  .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;
+
+    .ecl-icon {
+      height: 1.5rem;
+      width: 1.5rem;
+    }
+  }
+}
+
+/* stylelint-disable-next-line order/order */
+@include breakpoints.up('s') {
+  .ecl-site-header__logo-link {
+    flex-grow: 0;
+  }
+}
+
+@include breakpoints.up('m') {
+  .ecl-site-header__logo-link {
+    margin-top: 0;
+  }
+  /* stylelint-disable-next-line plugin/selector-bem-pattern */
+  .ecl-site-header .ecl-search-form {
+    max-width: 100%;
+  }
+}
+
+@include breakpoints.up('l') {
+  .ecl-site-header {
+    .ecl-site-header__cta {
+      align-self: center;
+      margin: var(--s-xs) 0;
+
+      &:only-child {
+        margin-top: var(--s-xs);
+      }
+    }
+
+    &.ecl-site-header--has-menu {
+      box-shadow: none;
+    }
+
+    &.ecl-site-header--has-mega-menu .ecl-site-header__header {
+      box-shadow: none;
+    }
+
+    .ecl-menu {
+      background: map.get($site-header, 'gradient-background');
+      min-height: auto;
+      position: static;
+      width: 100%;
+    }
+
+    .ecl-mega-menu {
+      background: map.get($site-header, 'gradient-background');
+      position: relative;
+      top: 0;
+      width: 100%;
+    }
+
+    &.ecl-site-header--has-menu,
+    &.ecl-site-header--has-mega-menu {
+      .ecl-site-header__action {
+        margin-inline-end: 0;
+      }
+    }
+  }
+
+  .ecl-site-header__banner {
+    box-shadow: none;
+
+    .ecl-container {
+      display: flex;
+      position: relative;
+    }
+  }
+
+  .ecl-site-header__site-name {
+    align-self: center;
+    color: map.get($site-header, 'site-name-desktop-color');
+    flex-grow: 1;
+    font: var(--f-2xl);
+    margin-inline-end: 0;
+  }
+
+  .ecl-site-header__container {
+    align-items: flex-end;
+    flex-direction: row;
+    padding-bottom: var(--s-l);
+    padding-top: var(--s-l);
+  }
+
+  .ecl-site-header__top {
+    align-items: flex-end;
+  }
+
+  .ecl-site-header__logo-link {
+    margin-bottom: 0;
+  }
+
+  .ecl-site-header__logo-image {
+    display: block;
+
+    &.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');
+    }
+  }
+
+  .ecl-site-header__login-container {
+    position: relative;
+  }
+
+  .ecl-site-header__notification .ecl-notification {
+    margin: 0 0 var(--s-l);
+  }
+
+  .ecl-site-header__login-box {
+    left: 50%;
+    min-width: 22rem;
+    padding: var(--s-l);
+    transform: translateX(-50%);
+    width: auto;
+
+    &::before {
+      left: 50%;
+    }
+  }
+
+  .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;
+  }
+
+  .ecl-site-header__search-container {
+    flex-grow: 1;
+    margin-inline-start: var(--s-l);
+
+    .ecl-site-header__search {
+      background-color: map.get($theme, 'color', 'white');
+      border-width: 0;
+      box-shadow: none;
+      display: flex;
+      margin: 0;
+      padding: 0;
+      position: relative;
+      top: 0;
+      width: auto;
+    }
+  }
+
+  // stylelint-disable plugin/selector-bem-pattern
+  .ecl-site-header .ecl-search-form__button .ecl-button__label {
+    display: block;
+  }
+  // stylelint-enable plugin/selector-bem-pattern
+}
+
+@include breakpoints.up('xl') {
+  .ecl-site-header__action .ecl-form-group {
+    width: map.get($site-header, 'search-width-xl');
+  }
+}

package/site-header-language-switcher.html.twig

@@ -0,0 +1,181 @@
+{% apply spaceless %}
+
+{#
+  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
+          "label": (string) (default: ''): Switcher language label, eg. 'English' in EU, 'EN' in ec.
+          "aria_label": (string) (default: ''): Switcher language aria label
+          "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": (associative array) (default: {}): Close button, following ECL Button structure
+              "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.
+                },
+              ],
+            },
+        },
+#}
+
+{# Default variables #}
+
+{% set _language_selector = language_selector|default({}) %}
+{% set _icon_path = icon_path|default('') %}
+{% set _label = _language_selector.label|default('') %}
+
+{# Internal logic - Process properties #}
+
+{% if _language_selector.overlay is defined and _language_selector.overlay is not empty %}
+  {% set _has_overlay = true %}
+{% endif %}
+
+{# Print the result #}
+
+<div class="ecl-site-header__language">
+  <a
+    class="ecl-button ecl-button--tertiary ecl-site-header__language-selector"
+    href="{{ _language_selector.href|default('') }}"
+    data-ecl-language-selector
+    role="button"
+    aria-label="{{ _language_selector.aria_label|default('') ~ ' - ' ~   _label }}"
+  {% if _has_overlay is defined %}
+    aria-controls="language-list-overlay"
+  {% endif %}
+  >
+    <span class="ecl-site-header__language-icon">
+      {% include '@ecl/icon/icon.html.twig' with {
+        icon: {
+          path: _icon_path,
+          name: 'global',
+          size: 's'
+        },
+        as_image: true,
+        extra_classes: 'ecl-site-header__icon',
+        extra_accessibility: {
+          title: _label,
+        },
+      } only %}
+    </span>
+    {{- _label -}}
+  </a>
+
+  {% if _has_overlay is defined %}
+  <div class="ecl-site-header__language-container" id="language-list-overlay" hidden data-ecl-language-list-overlay aria-labelledby="ecl-site-header__language-title" role="dialog">
+    {# language list header #}
+    <div class="ecl-site-header__language-header">
+      <div
+        class="ecl-site-header__language-title"
+        id="ecl-site-header__language-title"
+      >
+        {{- _language_selector.overlay.title|default('') -}}
+      </div>
+      {% if _language_selector.overlay.close is not empty %}
+        {% include '@ecl/button/button.html.twig' with _language_selector.overlay.close|merge({
+          variant: 'tertiary',
+          extra_classes: 'ecl-site-header__language-close',
+          extra_attributes: [{
+            name: 'data-ecl-language-list-close',
+          }],
+        }) only %}
+      {% endif %}
+    </div>
+
+    <div
+      class="ecl-site-header__language-content"
+      data-ecl-language-list-content
+    >
+      {# EU languages #}
+      {% if _language_selector.overlay.items is not empty and _language_selector.overlay.items is iterable %}
+      <div class="ecl-site-header__language-category" data-ecl-language-list-eu>
+        {% if _language_selector.eu_category is not empty %}
+        <div class="ecl-site-header__language-category-title">
+          {{- _language_selector.eu_category -}}
+        </div>
+        {% endif %}
+        <ul class="ecl-site-header__language-list">
+          {% for _item in _language_selector.overlay.items %}
+          <li class="ecl-site-header__language-item">
+            {% set _link_label %}
+              <span class="ecl-site-header__language-link-code">{{ _item.lang|default('') }}</span>
+              <span class="ecl-site-header__language-link-label" lang="{{ _item.lang|default('') }}">{{ _item.label|default('') }}</span>
+            {% endset %}
+            {% set _link_classes = 'ecl-site-header__language-link' %}
+            {% if _item.active %}
+              {% set _link_classes = _link_classes ~ ' ecl-site-header__language-link--active' %}
+            {% endif %}
+            {% include '@ecl/link/link.html.twig' with {
+              link: _item|merge({
+                label: _link_label,
+                type: 'standalone',
+                no_visited: true
+              }),
+              extra_classes: _link_classes,
+              extra_attributes: [
+                { name: 'hreflang', value: _item.lang|default('')|e('html_attr') },
+              ],
+            } only %}
+          </li>
+          {% endfor %}
+        </ul>
+      </div>
+      {% endif %}
+
+      {# non-EU languages #}
+      {% if _language_selector.overlay.non_eu_items is not empty and _language_selector.overlay.non_eu_items is iterable %}
+      <div class="ecl-site-header__language-category" data-ecl-language-list-non-eu>
+        {% if _language_selector.non_eu_category is not empty %}
+        <div class="ecl-site-header__language-category-title">
+          {{- _language_selector.non_eu_category -}}
+        </div>
+        {% endif %}
+        <ul class="ecl-site-header__language-list">
+          {% for _item in _language_selector.overlay.non_eu_items %}
+          <li class="ecl-site-header__language-item">
+          {% set _link_label %}
+            <span class="ecl-site-header__language-link-code">{{ _item.lang|default('') }}</span>
+            <span class="ecl-site-header__language-link-label">{{ _item.label|default('') }}</span>
+          {% endset %}
+            {% set _link_classes = 'ecl-site-header__language-link' %}
+            {% if _item.active %}
+              {% set _link_classes = _link_classes ~ ' ecl-site-header__language-link--active' %}
+            {% endif %}
+            {% include '@ecl/link/link.html.twig' with {
+              link: _item|merge({
+                label: _link_label,
+                type: 'standalone',
+                no_visited: true
+              }),
+              extra_classes: _link_classes,
+              extra_attributes: [
+                { name: 'lang', value: _item.lang|default('') },
+                { name: 'hreflang', value: _item.lang|default('') },
+              ],
+            } only %}
+          </li>
+          {% endfor %}
+        </ul>
+      </div>
+      {% endif %}
+    </div>
+  </div>
+  {% endif %}
+</div>
+
+{% endapply %}