@openeuropa/bcl-theme-default 1.8.2 → 1.9.0

package/src/scss/base/_utilities.scss

@@ -1,12 +1,10 @@
 $utilities: map-merge(
   $utilities,
   (
-    "background-color":
-      map-merge(
+    "background-color": map-merge(
         map-get($utilities, "background-color"),
         (
-          values:
-            map-merge(
+          values: map-merge(
               map-get(map-get($utilities, "background-color"), "values"),
               (
                 date: $date,
@@ -14,12 +12,10 @@ $utilities: map-merge(
             ),
         )
       ),
-    "width":
-      map-merge(
+    "width": map-merge(
         map-get($utilities, "width"),
         (
-          values:
-            map-merge(
+          values: map-merge(
               map-get(map-get($utilities, "width"), "values"),
               (
                 min-content: min-content,
@@ -27,12 +23,10 @@ $utilities: map-merge(
             ),
         )
       ),
-    "flex":
-      map-merge(
+    "flex": map-merge(
         map-get($utilities, "flex"),
         (
-          values:
-            map-merge(
+          values: map-merge(
               map-get(map-get($utilities, "flex"), "values"),
               (
                 1: 1,
@@ -42,12 +36,10 @@ $utilities: map-merge(
         )
       ),
     // Extend rounded-top utility.
-    "max-width":
-      map-merge(
+    "max-width": map-merge(
         map-get($utilities, "max-width"),
         (
-          values:
-            map-merge(
+          values: map-merge(
               map-get(map-get($utilities, "max-width"), "values"),
               (
                 date: 10rem,
@@ -58,42 +50,36 @@ $utilities: map-merge(
         )
       ),
     // Create responsive classes for padding
-    "padding":
-      map-merge(
+    "padding": map-merge(
         map-get($utilities, "padding"),
         (
           responsive: true,
         )
       ),
     // Create responsive classes for borders
-    "border":
-      map-merge(
+    "border": map-merge(
         map-get($utilities, "border"),
         (
           responsive: true,
         )
       ),
-    "border-top":
-      map-merge(
+    "border-top": map-merge(
         map-get($utilities, "border-top"),
         (
           responsive: true,
         )
       ),
-    "border-bottom":
-      map-merge(
+    "border-bottom": map-merge(
         map-get($utilities, "border-bottom"),
         (
           responsive: true,
         )
       ),
     // Create medium font weight class
-    "font-weight":
-      map-merge(
+    "font-weight": map-merge(
         map-get($utilities, "font-weight"),
         (
-          values:
-            map-merge(
+          values: map-merge(
               map-get(map-get($utilities, "font-weight"), "values"),
               (
                 medium: 500,

package/src/scss/oe-bcl-default.scss

@@ -57,6 +57,7 @@
 @import "@openeuropa/bcl-theme-default/src/scss/base/mixins";
 
 // Custom styles
+@import "@openeuropa/bcl-theme-default/src/scss/accordion";
 @import "@openeuropa/bcl-theme-default/src/scss/alert";
 @import "@openeuropa/bcl-theme-default/src/scss/button";
 @import "@openeuropa/bcl-theme-default/src/scss/blockquote";
@@ -74,6 +75,7 @@
 @import "@openeuropa/bcl-theme-default/src/scss/spinners";
 @import "@openeuropa/bcl-theme-default/src/scss/badge";
 @import "@openeuropa/bcl-theme-default/src/scss/multiselect";
+@import "@openeuropa/bcl-theme-default/src/scss/multiselect-2";
 @import "@openeuropa/bcl-theme-default/src/scss/breadcrumb";
 @import "@openeuropa/bcl-theme-default/src/scss/banners";
 @import "@openeuropa/bcl-theme-default/src/scss/timeline";

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

@@ -158,7 +158,7 @@
     data-bs-target="#{{ _id }}"
     data-bs-slide="prev"
   >
-    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+    <span class="carousel-control-prev-icon"></span>
   {% if _prev_label is not empty %}
     <span class="visually-hidden">{{ _prev_label }}</span>
   {% endif %}
@@ -169,7 +169,7 @@
     data-bs-target="#{{ _id }}"
     data-bs-slide="next"
   >
-    <span class="carousel-control-next-icon" aria-hidden="true"></span>
+    <span class="carousel-control-next-icon"></span>
   {% if _next_label is not empty %}
     <span class="visually-hidden">{{ _next_label }}</span>
   {% endif %}

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

@@ -62,6 +62,7 @@
     <div class="container">
     {% if _project_link is not empty %}
       <a
+        class="d-inline-block"
         href="{{ _project_link }}"
       >
     {% endif %}

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

@@ -0,0 +1,123 @@
+{% 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: '')
+  - min_height (string) (default: '300px')
+    ! set min-height of mega-menu
+  - items (object[])
+    format: [
+      {
+        - link or dropdown
+          ! dropdown extra property:
+            collapse (render) - to showcase on the last column 
+      }
+    ]
+  - 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 _min_height = min_height|default('300px') %}
+{% set _items = items|default([]) %}
+{% set _back_button_label = back_button_label|default('Back') %}
+{% set _icon_path = icon_path|default('') %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% set _classes = ['bcl-mega-menu'] %}
+
+{% set attributes = attributes.setAttribute('aria-labelledby', _id).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'])
+                      .setAttribute('aria-expanded', 'false')
+                      .setAttribute('data-bs-toggle', 'dropdown')
+                      .setAttribute('data-bs-auto-close', 'outside')
+                      .setAttribute('id', _id)
+}) %}
+{% if _link %}
+  {% set _trigger = _trigger|merge({
+    attributes: _trigger.attributes.setAttribute('role', 'button') 
+  }) %}
+{% else %}
+  {% set _trigger = _trigger|merge({
+    attributes: _trigger.attributes.setAttribute('autocomplete', 'off') 
+  }) %}
+{% endif %}
+
+<div {{ attributes }} style="--bcl-mm-min-height: {{ _min_height }};">
+  {% if _link %}
+    {% include '@oe-bcl/bcl-link/link.html.twig' with _trigger only %}
+  {% else %}
+    {% include '@oe-bcl/bcl-button/button.html.twig' with _trigger only %}
+  {% endif %}
+  <div class="mega-menu-container dropdown-menu" aria-labelledby="{{ _id }}">
+    <div class="container">
+      <div class="d-lg-none back-button-block pt-3-5">
+        {% include '@oe-bcl/bcl-button/button.html.twig' with {
+          label: _back_button_label,
+          icon_position: "before",
+          variant: 'link',
+          icon: {
+            path: _icon_path,
+            name: "chevron-left",
+          },
+          attributes: create_attribute().addClass(['back-button', 'ps-0'])
+        } only %}
+      </div>
+      <div class="row position-relative h-100">
+        {% if content_block is defined %}
+        <div class="col-12 col-xxl-3">
+          <div class="content-block">
+            {%- block content_block -%}
+              {{ _content_block }}
+            {%- endblock -%}
+          </div>
+        </div>
+        {% endif %}
+        <div class="col-12 col-xxl-9">
+          <div class="navigation-items">
+            {% for _item in _items %}
+              {% if _item.items is defined %}
+                {% set _trigger_attributes = _item.trigger.attributes is defined ? _item.trigger.attributes : create_attribute() %}
+                {% include '@oe-bcl/bcl-dropdown/dropdown.html.twig' with _item|merge({
+                  direction: 'dropend',
+                  link: true,
+                  trigger: _item.trigger|merge({
+                    icon: {
+                      path: _icon_path,
+                      name: "chevron-right",
+                    },
+                    attributes: _trigger_attributes.setAttribute('data-bs-auto-close', 'false')
+                  })
+                }) only %}
+                {% if _item.collapse is defined %}
+                  <div class="collapse">
+                    {{ _item.collapse|raw }}
+                  </div>
+                {% endif %}
+              {% else %}
+                {% include '@oe-bcl/bcl-link/link.html.twig' with _item only %}
+              {% endif %}
+            {% endfor %}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+{% endapply %}