@openeuropa/bcl-theme-joinup 0.3791.202505281825 → 0.3880.202510091030

package/templates/bcl-mega-menu/mega-menu.html.twig

@@ -0,0 +1,115 @@
+{% apply spaceless %}
+
+{# Parameters:
+  - id (string) (default: dropdown-random(1000))
+  - link (boolean) (default: false) - sets trigger to link, default is button
+  - trigger (link or button)
+  - content_block (block) (default: '')
+  - content_link (link)
+  - icon_path (string) (default: '')
+  - min_height (string) (default: '300px')
+    ! set min-height of mega-menu
+  - items (object[])
+    format: [
+      {
+        - link or dropdown
+      }
+    ]
+  - back_button_label (string) (default: 'Back')
+  - icon_path (string) (default: '')
+#}
+
+{% set _id = id|default('dropdown-' ~ random(1000)) %}
+{% set _link = link ?? false %}
+{% set _trigger = trigger|default({}) %}
+{% set _content_block = content_block|default('') %}
+{% set _content_link = content_link|default({}) %}
+{% set _icon_path = icon_path|default('') %}
+{% set _items = items|default([]) %}
+{% set _back_button_label = back_button_label|default('Back') %}
+{% set _icon_path = icon_path|default('') %}
+{% set _menu_id = 'mega-menu-' ~ _id %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% set _classes = ['bcl-mega-menu'] %}
+
+{% set attributes = attributes.addClass(_classes) %}
+
+{% if _trigger.attributes is empty %}
+  {% set _trigger = _trigger|merge({
+    attributes: create_attribute()
+  }) %}
+{% endif %}
+{% set _trigger = _trigger|merge({
+  attributes: _trigger.attributes.addClass(['dropdown-toggle', 'nav-link'])
+                      .setAttribute('aria-expanded', 'false')
+                      .setAttribute('aria-haspopup', 'menu')
+                      .setAttribute('aria-controls', _menu_id)
+                      .setAttribute('data-bs-toggle', 'dropdown')
+                      .setAttribute('data-bs-auto-close', 'outside')
+                      .setAttribute('id', _id)
+}) %}
+
+<div {{ attributes }}>
+  {% include '@oe-bcl/bcl-button/button.html.twig' with _trigger|merge({
+    variant: 'link',
+    clean_class: true,
+  }) only %}
+  {# Mega menu panel. #}
+  <nav id="{{ _menu_id }}" class="bcl-mega-menu__container dropdown-menu" aria-labelledby="{{ _id }}" aria-label="Main mega menu">
+    <div class="container">
+      {# Mobile back button. #}
+      <div class="container d-lg-none bcl-mega-menu__back-button-block">
+        {% include '@oe-bcl/bcl-button/button.html.twig' with {
+          label: _back_button_label,
+          icon_position: "before",
+          variant: 'link',
+          icon: {
+            path: _icon_path,
+            name: "arrow-left",
+          },
+          attributes: create_attribute().addClass(['back-button']).setAttribute('aria-label', 'Back to main menu')
+        } only %}
+      </div>
+      {# Info/summary and submenu columns. #}
+      <div class="position-relative">
+        <div class="row">
+          {# Content / summary column. #}
+          {% if content_block is defined %}
+            <div class="col-md-12 col-xl-3 position-relative bcl-mega-menu__info">
+              <div class="content-block">
+                {%- block content_block -%}
+                  {{ _content_block }}
+                {%- endblock -%}
+                {% if _content_link.path is not empty %}
+                  {% set _content_link = _content_link|merge({
+                    icon: _content_link.icon|default({})|merge({
+                      path: _icon_path
+                    }),
+                    attributes: (_content_link.attributes is defined
+                      ? _content_link.attributes
+                      : create_attribute()
+                    ).addClass('content-link')
+                  }) %}
+                  <p class="m-0">{% include '@oe-bcl/bcl-link/link.html.twig' with _content_link only %}</p>
+                {% endif %}
+              </div>
+              <div class="shadow-container">
+                <span class="shadow-bg"></span>
+              </div>
+            </div>
+          {% endif %}
+          {# Submenu column. #}
+          <div class="col-md-12 col-lg-4 col-xl-3 bcl-mega-menu__menu">
+            {% include '@oe-bcl/bcl-mega-menu/mega-menu-items.html.twig' %}
+          </div>
+        </div>
+      </div>
+    </div>
+  </nav>
+</div>
+
+{% endapply %}

package/templates/bcl-modal/modal.html.twig

@@ -14,7 +14,10 @@
   - body (block) (default: '')
   - footer (block) (default: '')
   - attributes (drupal attrs)
-  
+  - header_attributes (drupal attrs)
+  - body_attributes (drupal attrs)
+  - footer_attributes (drupal attrs)
+
   Blocks
     - header
     - messages
@@ -29,9 +32,12 @@
 {% set _verticaly_centered = verticaly_centered ?? false %}
 {% set _scrollable = scrollable ?? false %}
 {% set _header = header|default('') %}
+{% set _header_attributes = header_attributes ?: create_attribute() %}
 {% set _messages = messages|default('') %}
 {% set _body = body|default('') %}
+{% set _body_attributes = body_attributes ?: create_attribute() %}
 {% set _footer = footer|default('') %}
+{% set _footer_attributes = footer_attributes ?: create_attribute() %}
 
 {% set _classes = ['modal', 'fade'] %}
 
@@ -62,16 +68,22 @@
   >
     <div class="modal-content">
       {% if header is not empty %}
-      <div class="modal-header">
+      <div
+        {{- _header_attributes.addClass(['modal-header']) -}}
+      >
         {%- block header _header -%}
       </div>
       {% endif %}
       {%- block messages _messages -%}
-      <div class="modal-body">
+      <div
+          {{- _body_attributes.addClass(['modal-body']) -}}
+      >
         {%- block body _body -%}
       </div>
       {% if footer is not empty %}
-      <div class="modal-footer">
+      <div
+          {{- _footer_attributes.addClass(['modal-footer']) -}}
+      >
         {%- block footer _footer -%}
       </div>
       {% endif %}

package/templates/bcl-navigation/navigation.html.twig

@@ -91,7 +91,7 @@
           {% set _nav_class = _nav_class ~ ' dropdown' %}
           {% set _item = _item|merge({remove_wrapper: true}) %}
         {% endif %}
-        {% if _item.dropdown %}
+        {% if _item.dropdown or _item.mega_menu %}
           {% set _item_classes = [] %}
         {% else %}
           {% set _item_classes = ['nav-link'] %}
@@ -124,6 +124,8 @@
           {% include '@oe-bcl/bcl-dropdown/dropdown.html.twig' with _item only %}
         {% elseif _item.button is defined %}
           {% include '@oe-bcl/bcl-button/button.html.twig' with _item only %}
+        {% elseif _item.mega_menu is defined %}
+          {% include '@oe-bcl/bcl-mega-menu/mega-menu.html.twig' with _item only %}
         {% else %}
           {% include '@oe-bcl/bcl-link/link.html.twig' with _item only %}
         {% endif %}

package/templates/bcl-offcanvas/offcanvas.html.twig

@@ -25,7 +25,7 @@
 {% set _title_link = title_link|default({}) %}
 {% set _title_attributes = title_attributes ?: create_attribute() %}
 {% set _placement = placement|default('') %}
-{% set _id = id|default('') %}
+{% set _id = id|default('bcl-offcanvas-' ~ random(10000)) %}
 {% set _body = body|default('') %}
 {% set _with_body_scroll = with_body_scroll ?? false %}
 {% set _with_backdrop = with_backdrop ?? true %}
@@ -57,14 +57,12 @@
   {% set attributes = create_attribute() %}
 {% endif %}
 
+{% set attributes = attributes.setAttribute('id', _id) %}
+
 {% if _aria_labelled is defined and _aria_labelled is not empty %}
   {% set attributes = attributes.setAttribute('aria-labelledby', _aria_labelled) %}
 {% endif %}
 
-{% if _id is not empty %}
- {% set attributes = attributes.setAttribute('id', _id) %}
-{% endif %}
-
 {% if _with_body_scroll %}
  {% set attributes = attributes.setAttribute('data-bs-scroll', 'true') %}
 {% endif %}
@@ -73,6 +71,10 @@
  {% set attributes = attributes.setAttribute('data-bs-backdrop', 'false') %}
 {% endif %}
 
+{% if _title is not empty %}
+ {% set attributes = attributes.setAttribute('aria-labelledby', _id ~ '-title') %}
+{% endif %}
+
 {% set attributes = attributes.setAttribute('tabindex', '-1').addClass(_classes) %}
 
 <div
@@ -85,7 +87,7 @@
       title: _title,
       title_tag: _title_tag,
       title_link: _title_link,
-      attributes: _title_attributes.addClass(['offcanvas-title']),
+      attributes: _title_attributes.setAttribute('id', _id ~ '-title').addClass(['offcanvas-title']),
     } only %}
   {% endif %}
   {% if _with_close %}
@@ -94,6 +96,7 @@
                               .setAttribute('data-bs-dismiss', 'offcanvas')
                               .setAttribute('data-bs-target', '#' ~ _id)
                               .setAttribute('aria-label', _close_aria_label)
+                              .setAttribute('aria-controls', _id)
     %}
     {% if _extra_classes_close is not empty %}
       {% set button_attributes = button_attributes.addClass(_extra_classes_close) %}

package/templates/bcl-toast/toasts.html.twig

@@ -10,6 +10,11 @@
   - toasts (object[]) format: [
     {
       - body (string) (default: '')
+      - body_attributes (drupal attrs)
+      - header (string) (default: '')
+      - header_attributes (drupal attrs)
+      - button_attributes (drupal attrs)
+      - custom_content (string) (default: '')
       - role (string) (default: 'alert')
       - with_close (boolean) (default: true)
       - autohide (boolean) (default: false)
@@ -66,6 +71,9 @@
     {% set _with_body_wrapper = _toast.with_body_wrapper ?? false %}
     {% set _body_wrapper_classes = _toast.body_wrapper_classes|default('') %}
     {% set _toast_attributes = _toast.attributes ?: create_attribute() %}
+    {% set _body_attributes = _toast.body_attributes ?: create_attribute() %}
+    {% set _header_attributes = _toast.header_attributes ?: create_attribute() %}
+    {% set _button_attributes = _toast.button_attributes ?: create_attribute() %}
     {% set _toast_attributes =  _toast_attributes.addClass(_classes).setAttribute('aria-atomic', 'true') %}
     {% if _aria_live is not empty %}
       {% set _toast_attributes = _toast_attributes.setAttribute('aria-live', _aria_live) %}
@@ -82,16 +90,16 @@
     {% if _with_close or
       (_toast.header is defined and _toast.header is not empty)
     %}
-    <div class="toast-header">
+    <div{{ _header_attributes.addClass(['toast-header']) }}>
     {{- _toast.header|default('') -}}
     {% if _with_close %}
-      {% set button_attributes = create_attribute()
+      {% set _button_attributes = _button_attributes
                                 .addClass(['btn-close'])
                                 .setAttribute('aria-label', 'close')
                                 .setAttribute('data-bs-dismiss', 'toast')
       %}
       {%- include '@oe-bcl/bcl-button/button.html.twig' with {
-        attributes: button_attributes,
+        attributes: _button_attributes,
         clean_class: true
       } only -%}
     {% endif %}
@@ -104,12 +112,13 @@
     {% endif %}
     >
   {% endif %}
-    <div class="toast-body">
+    <div{{ _body_attributes.addClass(['toast-body']) }}>
       {{- _body -}}
     </div>
   {% if _with_body_wrapper %}
     </div>
   {% endif %}
+  {{- _toast.custom_content|default('') -}}
   </div>
   {% endfor %}
 {% endif %}