@openeuropa/bcl-theme-joinup 0.4185.202511191330 → 0.4185.202512021245

package/package.json

@@ -2,7 +2,7 @@
   "name": "@openeuropa/bcl-theme-joinup",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "0.4185.202511191330",
+  "version": "0.4185.202512021245",
   "description": "OE - BCL theme joinup",
   "scripts": {
     "align-templates": "lerna --scope \"@openeuropa/bcl-twig-templates\" run prepublish",
@@ -28,10 +28,10 @@
     "@ecl/resources-eu-logo": "3.7.1",
     "@ecl/resources-flag-icons": "3.7.1",
     "@fontsource/roboto": "5.2.8",
-    "@openeuropa/bcl-bootstrap": "^0.4185.202511191330",
-    "@openeuropa/bcl-builder": "^0.4185.202511191330",
-    "@openeuropa/bcl-theme-default": "^0.4185.202511191330",
-    "@openeuropa/bcl-twig-templates": "^0.4185.202511191330",
+    "@openeuropa/bcl-bootstrap": "^0.4185.202512021245",
+    "@openeuropa/bcl-builder": "^0.4185.202512021245",
+    "@openeuropa/bcl-theme-default": "^0.4185.202512021245",
+    "@openeuropa/bcl-twig-templates": "^0.4185.202512021245",
     "@rollup/plugin-replace": "6.0.2",
     "copyfiles": "2.4.1",
     "cross-env": "10.1.0",
@@ -57,5 +57,5 @@
     "design-system",
     "twig"
   ],
-  "gitHead": "de7fc20600e88ea3b38e74c2ec1c6ffbb0b2a1b0"
+  "gitHead": "795ad40621a91b0fbd8095b9ceed5f6ff30bb127"
 }

package/src/js/index.esm.js

@@ -23,6 +23,7 @@ import ScrollSpy from "@openeuropa/bcl-bootstrap/js/src/scrollspy-legacy";
 import Tab from "@openeuropa/bcl-bootstrap/js/src/tab";
 import Toast from "@openeuropa/bcl-bootstrap/js/src/toast";
 import Tooltip from "@openeuropa/bcl-bootstrap/js/src/tooltip";
+import Header from "@openeuropa/bcl-theme-default/src/js/header/header";
 
 export {
   Alert,
@@ -43,4 +44,5 @@ export {
   Tab,
   Toast,
   Tooltip,
+  Header,
 };

package/src/js/index.umd.js

@@ -23,6 +23,7 @@ import ScrollSpy from "@openeuropa/bcl-bootstrap/js/src/scrollspy-legacy";
 import Tab from "@openeuropa/bcl-bootstrap/js/src/tab";
 import Toast from "@openeuropa/bcl-bootstrap/js/src/toast";
 import Tooltip from "@openeuropa/bcl-bootstrap/js/src/tooltip";
+import Header from "@openeuropa/bcl-theme-default/src/js/header/header";
 
 export default {
   Alert,
@@ -43,4 +44,5 @@ export default {
   Tab,
   Toast,
   Tooltip,
+  Header,
 };

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

@@ -17,6 +17,8 @@
   - language_modal (object) (default: {})
   - light (boolean) (default: false)
   - modals (modal[]) (default: [])
+  - toggler_attributes (drupal attrs)
+  - icon_path (string) (default: '')
   - attributes (drupal attrs)
 #}
 
@@ -30,6 +32,8 @@
 {% set _breadcrumbs = breadcrumbs|default({}) %}
 {% set _language_modal = language_modal|default({}) %}
 {% set _light = light ?? false %}
+{% set _toggler_attributes = toggler_attributes ?: create_attribute() %}
+{% set _icon_path = icon_path|default('') %}
 {% set _modals = modals|default([]) %}
 
 {% set _site_name_classes = 'bcl-header__site-name' %}
@@ -38,7 +42,7 @@
   {% set attributes = create_attribute() %}
 {% endif %}
 
-{% set attributes = attributes.addClass(['bcl-header', 'bcl-header--' ~ _variant]) %}
+{% set attributes = attributes.addClass(['bcl-header', 'bcl-header--' ~ _variant, 'shadow-sm']) %}
 
 {% if site_name_classes is not empty %}
   {% set _site_name_classes = _site_name_classes ~ ' ' ~ site_name_classes %}
@@ -49,6 +53,33 @@
   {% set _project_classes = _project_classes ~ ' light' %}
 {% endif %}
 
+{% set toggler_attributes = _toggler_attributes.addClass(['bcl-navbar-toggler', 'd-lg-none'])
+  .setAttribute('type', 'button')
+  .setAttribute('data-bs-toggle', 'collapse')
+  .setAttribute('data-bs-target', '#' ~ navbar_id)
+  .setAttribute('aria-controls', navbar_id)
+  .setAttribute('aria-expanded', 'false')
+%}
+
+{% set navbar_toggle_button %}
+  <button
+    {{ toggler_attributes }}
+  >
+    {% include '@oe-bcl/bcl-icon/icon.html.twig' with {
+      name: 'list',
+      size: 'fluid',
+      path: _icon_path,
+      attributes: create_attribute().addClass(['default-icon']),
+    } only %}
+    {% include '@oe-bcl/bcl-icon/icon.html.twig' with {
+      name: 'x',
+      size: 'fluid',
+      path: _icon_path,
+      attributes: create_attribute().addClass(['active-icon']),
+    } only %}
+  </button>
+{% endset %}
+
 <header
   {{ attributes }}
 >
@@ -70,20 +101,17 @@
       {% endfor %}
       </a>
     {% endif %}
-      <button
-        class="navbar-toggler bcl-navbar-toggler"
-        type="button"
-        data-bs-toggle="collapse"
-        data-bs-target='#{{ _navbar_id }}'
-        aria-controls='{{ _navbar_id }}'
-        aria-expanded="false"
-        aria-label="Toggle navigation"
-      >
-        <span class="navbar-toggler-icon"></span>
-      </button>
+      {{ navbar_toggle_button }}
     </div>
   </nav>
 
+  <!-- site name -->
+  <div class="bcl-header__site-name" id="site-name-heading">
+    <div class="container">
+      <span class="h5 py-3-5 border-top-subtle mb-0 d-block">{{ _site_name }}</span>
+    </div>
+  </div>
+
   <!-- navbar -->
   {% if _navbar is not empty %}
     {% include '@oe-bcl/bcl-navbar/navbar.html.twig' with _navbar|merge({

package/templates/bcl-links-block/links-block.html.twig

@@ -56,7 +56,7 @@
         {% endif %}
         {% set _link = _link|merge({
           clean_class: true,
-          attributes: _link.attributes.addClass(['pb-3', 'd-inline-block', 'standalone'])
+          attributes: _link.attributes.addClass(['mb-3', 'd-inline-block', 'standalone'])
         }) %}
         {% set _list_item_classes = 'list-unstyled' %}
         {% if _variant == 'horizontal' %}

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

@@ -7,7 +7,8 @@
   - fullscreen_responsive (string) (default: '')
     options: sm, md, lg, xl, xxl
   - static_backdrop (boolean) (default: false)
-  - verticaly_centered (boolean) (default: false)
+  - vertically_centered (boolean) (default: false)
+  - verticaly_centered (boolean) (default: false) // deprecated typo
   - scrollable (boolean) (default: false)
   - header (block) (default: '')
   - messages (block) (default: '')
@@ -29,7 +30,7 @@
 {% set _id = id|default('modal-' ~ random(10000)) %}
 {% set _fullscreen_responsive =  fullscreen_responsive|default('') %}
 {% set _static_backdrop = static_backdrop ?? false %}
-{% set _verticaly_centered = verticaly_centered ?? false %}
+{% set _vertically_centered = vertically_centered ?? verticaly_centered ?? false %}
 {% set _scrollable = scrollable ?? false %}
 {% set _header = header|default('') %}
 {% set _header_attributes = header_attributes ?: create_attribute() %}
@@ -63,7 +64,7 @@
   <div class="modal-dialog
   {{- _size ? ' modal-' ~ size -}}
   {{- _fullscreen_responsive ? ' modal-fullscreen-' ~ _fullscreen_responsive ~ '-down' -}}
-  {{- _verticaly_centered ? ' modal-dialog-centered' -}}
+  {{- _vertically_centered ? ' modal-dialog-centered' -}}
   {{- _scrollable ? ' modal-dialog-scrollable' -}}"
   >
     <div class="modal-content">