@openeuropa/bcl-twig-templates 1.9.0 → 1.9.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@openeuropa/bcl-twig-templates",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "1.9.0",
+  "version": "1.9.1",
   "description": "OE Bcl Twig Templates",
   "publishConfig": {
     "access": "public"
@@ -11,69 +11,69 @@
     "hoistingLimits": "workspaces"
   },
   "devDependencies": {
-    "@openeuropa/bcl-accordion": "^1.9.0",
-    "@openeuropa/bcl-alert": "^1.9.0",
-    "@openeuropa/bcl-badge": "^1.9.0",
-    "@openeuropa/bcl-banner": "^1.9.0",
-    "@openeuropa/bcl-base-templates": "^1.9.0",
-    "@openeuropa/bcl-blockquote": "^1.9.0",
-    "@openeuropa/bcl-breadcrumb": "^1.9.0",
-    "@openeuropa/bcl-button": "^1.9.0",
-    "@openeuropa/bcl-button-group": "^1.9.0",
-    "@openeuropa/bcl-card": "^1.9.0",
-    "@openeuropa/bcl-card-layout": "^1.9.0",
-    "@openeuropa/bcl-carousel": "^1.9.0",
-    "@openeuropa/bcl-contact-form": "^1.9.0",
-    "@openeuropa/bcl-content-banner": "^1.9.0",
-    "@openeuropa/bcl-date-block": "^1.9.0",
-    "@openeuropa/bcl-description-list": "^1.9.0",
-    "@openeuropa/bcl-dropdown": "^1.9.0",
-    "@openeuropa/bcl-event": "^1.9.0",
-    "@openeuropa/bcl-fact-figures": "^1.9.0",
-    "@openeuropa/bcl-featured-media": "^1.9.0",
-    "@openeuropa/bcl-file": "^1.9.0",
-    "@openeuropa/bcl-footer": "^1.9.0",
-    "@openeuropa/bcl-form": "^1.9.0",
-    "@openeuropa/bcl-form-input": "^1.9.0",
-    "@openeuropa/bcl-gallery": "^1.9.0",
-    "@openeuropa/bcl-glossary": "^1.9.0",
-    "@openeuropa/bcl-group": "^1.9.0",
-    "@openeuropa/bcl-header": "^1.9.0",
-    "@openeuropa/bcl-heading": "^1.9.0",
-    "@openeuropa/bcl-icon": "^1.9.0",
-    "@openeuropa/bcl-inpage-navigation": "^1.9.0",
-    "@openeuropa/bcl-landing-page": "^1.9.0",
-    "@openeuropa/bcl-language-list": "^1.9.0",
-    "@openeuropa/bcl-language-switcher": "^1.9.0",
-    "@openeuropa/bcl-link": "^1.9.0",
-    "@openeuropa/bcl-links-block": "^1.9.0",
-    "@openeuropa/bcl-list-group": "^1.9.0",
-    "@openeuropa/bcl-listing": "^1.9.0",
-    "@openeuropa/bcl-modal": "^1.9.0",
-    "@openeuropa/bcl-multilingual": "^1.9.0",
-    "@openeuropa/bcl-navbar": "^1.9.0",
-    "@openeuropa/bcl-navigation": "^1.9.0",
-    "@openeuropa/bcl-news": "^1.9.0",
-    "@openeuropa/bcl-offcanvas": "^1.9.0",
-    "@openeuropa/bcl-page": "^1.9.0",
-    "@openeuropa/bcl-pagination": "^1.9.0",
-    "@openeuropa/bcl-person": "^1.9.0",
-    "@openeuropa/bcl-placeholder": "^1.9.0",
-    "@openeuropa/bcl-progress": "^1.9.0",
-    "@openeuropa/bcl-project": "^1.9.0",
-    "@openeuropa/bcl-project-status": "^1.9.0",
-    "@openeuropa/bcl-recent-activities": "^1.9.0",
-    "@openeuropa/bcl-search": "^1.9.0",
-    "@openeuropa/bcl-search-form": "^1.9.0",
-    "@openeuropa/bcl-select": "^1.9.0",
-    "@openeuropa/bcl-spinner": "^1.9.0",
-    "@openeuropa/bcl-subscription": "^1.9.0",
-    "@openeuropa/bcl-subscription-block": "^1.9.0",
-    "@openeuropa/bcl-table": "^1.9.0",
-    "@openeuropa/bcl-textarea": "^1.9.0",
-    "@openeuropa/bcl-timeline": "^1.9.0",
-    "@openeuropa/bcl-toast": "^1.9.0",
-    "@openeuropa/bcl-user": "^1.9.0",
+    "@openeuropa/bcl-accordion": "^1.9.1",
+    "@openeuropa/bcl-alert": "^1.9.1",
+    "@openeuropa/bcl-badge": "^1.9.1",
+    "@openeuropa/bcl-banner": "^1.9.1",
+    "@openeuropa/bcl-base-templates": "^1.9.1",
+    "@openeuropa/bcl-blockquote": "^1.9.1",
+    "@openeuropa/bcl-breadcrumb": "^1.9.1",
+    "@openeuropa/bcl-button": "^1.9.1",
+    "@openeuropa/bcl-button-group": "^1.9.1",
+    "@openeuropa/bcl-card": "^1.9.1",
+    "@openeuropa/bcl-card-layout": "^1.9.1",
+    "@openeuropa/bcl-carousel": "^1.9.1",
+    "@openeuropa/bcl-contact-form": "^1.9.1",
+    "@openeuropa/bcl-content-banner": "^1.9.1",
+    "@openeuropa/bcl-date-block": "^1.9.1",
+    "@openeuropa/bcl-description-list": "^1.9.1",
+    "@openeuropa/bcl-dropdown": "^1.9.1",
+    "@openeuropa/bcl-event": "^1.9.1",
+    "@openeuropa/bcl-fact-figures": "^1.9.1",
+    "@openeuropa/bcl-featured-media": "^1.9.1",
+    "@openeuropa/bcl-file": "^1.9.1",
+    "@openeuropa/bcl-footer": "^1.9.1",
+    "@openeuropa/bcl-form": "^1.9.1",
+    "@openeuropa/bcl-form-input": "^1.9.1",
+    "@openeuropa/bcl-gallery": "^1.9.1",
+    "@openeuropa/bcl-glossary": "^1.9.1",
+    "@openeuropa/bcl-group": "^1.9.1",
+    "@openeuropa/bcl-header": "^1.9.1",
+    "@openeuropa/bcl-heading": "^1.9.1",
+    "@openeuropa/bcl-icon": "^1.9.1",
+    "@openeuropa/bcl-inpage-navigation": "^1.9.1",
+    "@openeuropa/bcl-landing-page": "^1.9.1",
+    "@openeuropa/bcl-language-list": "^1.9.1",
+    "@openeuropa/bcl-language-switcher": "^1.9.1",
+    "@openeuropa/bcl-link": "^1.9.1",
+    "@openeuropa/bcl-links-block": "^1.9.1",
+    "@openeuropa/bcl-list-group": "^1.9.1",
+    "@openeuropa/bcl-listing": "^1.9.1",
+    "@openeuropa/bcl-modal": "^1.9.1",
+    "@openeuropa/bcl-multilingual": "^1.9.1",
+    "@openeuropa/bcl-navbar": "^1.9.1",
+    "@openeuropa/bcl-navigation": "^1.9.1",
+    "@openeuropa/bcl-news": "^1.9.1",
+    "@openeuropa/bcl-offcanvas": "^1.9.1",
+    "@openeuropa/bcl-page": "^1.9.1",
+    "@openeuropa/bcl-pagination": "^1.9.1",
+    "@openeuropa/bcl-person": "^1.9.1",
+    "@openeuropa/bcl-placeholder": "^1.9.1",
+    "@openeuropa/bcl-progress": "^1.9.1",
+    "@openeuropa/bcl-project": "^1.9.1",
+    "@openeuropa/bcl-project-status": "^1.9.1",
+    "@openeuropa/bcl-recent-activities": "^1.9.1",
+    "@openeuropa/bcl-search": "^1.9.1",
+    "@openeuropa/bcl-search-form": "^1.9.1",
+    "@openeuropa/bcl-select": "^1.9.1",
+    "@openeuropa/bcl-spinner": "^1.9.1",
+    "@openeuropa/bcl-subscription": "^1.9.1",
+    "@openeuropa/bcl-subscription-block": "^1.9.1",
+    "@openeuropa/bcl-table": "^1.9.1",
+    "@openeuropa/bcl-textarea": "^1.9.1",
+    "@openeuropa/bcl-timeline": "^1.9.1",
+    "@openeuropa/bcl-toast": "^1.9.1",
+    "@openeuropa/bcl-user": "^1.9.1",
     "copyfiles": "2.4.1",
     "rimraf": "6.0.1"
   },
@@ -96,5 +96,5 @@
     "design-system",
     "twig"
   ],
-  "gitHead": "461de595e5ddda95383ceaf5d02d513aef111246"
+  "gitHead": "70554ede8523da73edc3c786661e687a30fb2315"
 }

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

@@ -16,6 +16,8 @@
         stay_open (boolean) (default: false)
       },
     ]
+  - expand_button: (button object) (default: {})
+  - collapse_button: (button object) (default: {})
   - open_item_id (int) (default: 0)
   - attributes (drupal attrs)
 #}
@@ -27,6 +29,8 @@
 {% set _id = id|default(random(1000)) %}
 {% set _flush = flush ?? false %}
 {% set _items = items|default([]) %}
+{% set _expand_button = expand_button|default({}) %}
+{% set _collapse_button = collapse_button|default({}) %}
 {% set _open_item_id = open_item_id|default(0) %}
 {% set _classes = ['accordion'] %}
 {% if _flush %}
@@ -43,57 +47,92 @@
 <div
   {{ attributes }}
 >
-{%- if _title is not empty -%}
-  {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
-    title: _title,
-    title_tag: _title_tag,
-    title_link: _title_link,
-    attributes: _title_attributes,
-  } only %}
-{%- endif -%}
+  {%- if _title is not empty -%}
+    {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+      title: _title,
+      title_tag: _title_tag,
+      title_link: _title_link,
+      attributes: _title_attributes,
+    } only %}
+  {%- endif -%}
 
-{% for _item in _items %}
-  {% set _open_item = _open_item_id == loop.index %}
-  {% set _button_classes = ['accordion-button'] %}
-  {% if not _open_item %}
-    {% set _button_classes = _button_classes|merge(['collapsed']) %}
-  {% endif %}
-  <div class="accordion-item">
-    {%- set _item_title_tag = _item.title_tag|default('h2') %}
-    <{{ _item_title_tag }} 
-      class="accordion-header" 
-      id="heading-{{ _id }}-{{ loop.index }}"
+  {% if _items|length > 1 and (_expand_button is not empty or _collapse_button is not empty) %}
+  {% set wrapper_attributes = create_attribute().addClass(['d-flex', 'justify-content-end', 'gap-3', 'mb-3']) %}
+  <div
+    {{ wrapper_attributes }}
     >
-      {% set button_attributes = create_attribute()
-                                .addClass(_button_classes)
-                                .setAttribute('data-bs-toggle', 'collapse')
-                                .setAttribute('autocomplete', 'off')
-                                .setAttribute('data-bs-target', '#collapse-' ~ _id ~ '-' ~ loop.index)
-                                .setAttribute('aria-controls', 'collapse-' ~ _id ~ '-' ~ loop.index)
-                                .setAttribute('aria-expanded', open_item ? 'true' : 'false')
-      %}
-      {% include '@oe-bcl/bcl-button/button.html.twig' with {
-        label: _item.title,
-        clean_class: true,
-        attributes: button_attributes
-      } only %}
-    </{{ _item_title_tag }}>
-    <div
-      id="collapse-{{ _id }}-{{ loop.index }}"
-      class="accordion-collapse collapse{{ _open_item ? ' show' }}"
-      aria-labelledby="heading-{{ _id }}-{{ loop.index }}"
-      role="region"
-    {% if not _item.stay_open %}
-      data-bs-parent="#accordion-{{ _id }}"
+    {% if _expand_button is not empty %}
+      {% if _expand_button.attributes is empty %}
+        {% set _expand_button = _expand_button|merge({
+            attributes: create_attribute()
+          })
+        %}
+      {% endif %}
+      {% include '@oe-bcl/bcl-button/button.html.twig' with _expand_button|merge({
+        attributes: _expand_button.attributes
+                    .setAttribute('data-target', 'accordion-' ~ _id)
+                    .setAttribute('data-action', 'expand')
+      }) only %}
     {% endif %}
-    >
-      <div class="accordion-body">
-        {%- set _content = _item.content|default('') %}
-        {%- block content _content -%}
+    {% if _collapse_button is not empty %}
+      {% if _collapse_button.attributes is empty %}
+        {% set _collapse_button = _collapse_button|merge({
+            attributes: create_attribute()
+          })
+        %}
+      {% endif %}
+      {% include '@oe-bcl/bcl-button/button.html.twig' with _collapse_button|merge({
+        attributes: _collapse_button.attributes
+                    .setAttribute('data-target', 'accordion-' ~ _id)
+                    .setAttribute('data-action', 'collapse')
+      }) only %}
+    {% endif %}
+  </div>
+  {% endif %}
+  <div class="accordion-items-wrapper">
+    {% for _item in _items %}
+      {% set _open_item = _open_item_id == loop.index %}
+      {% set _button_classes = ['accordion-button'] %}
+      {% if not _open_item %}
+        {% set _button_classes = _button_classes|merge(['collapsed']) %}
+      {% endif %}
+      <div class="accordion-item">
+        {%- set _item_title_tag = _item.title_tag|default('h2') %}
+        <{{ _item_title_tag }} 
+          class="accordion-header" 
+          id="heading-{{ _id }}-{{ loop.index }}"
+        >
+          {% set button_attributes = create_attribute()
+                                    .addClass(_button_classes)
+                                    .setAttribute('data-bs-toggle', 'collapse')
+                                    .setAttribute('autocomplete', 'off')
+                                    .setAttribute('data-bs-target', '#collapse-' ~ _id ~ '-' ~ loop.index)
+                                    .setAttribute('aria-controls', 'collapse-' ~ _id ~ '-' ~ loop.index)
+                                    .setAttribute('aria-expanded', open_item ? 'true' : 'false')
+          %}
+          {% include '@oe-bcl/bcl-button/button.html.twig' with {
+            label: _item.title,
+            clean_class: true,
+            attributes: button_attributes
+          } only %}
+        </{{ _item_title_tag }}>
+        <div
+          id="collapse-{{ _id }}-{{ loop.index }}"
+          class="accordion-collapse collapse{{ _open_item ? ' show' }}"
+          aria-labelledby="heading-{{ _id }}-{{ loop.index }}"
+          role="region"
+        {% if not _item.stay_open and _expand_button is empty  %}
+          data-bs-parent="#accordion-{{ _id }}"
+        {% endif %}
+        >
+          <div class="accordion-body">
+            {%- set _content = _item.content|default('') %}
+            {%- block content _content -%}
+          </div>
+        </div>
       </div>
-    </div>
+    {% endfor %}
   </div>
-{% endfor %}
 </div>
 {% endif %}
 

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

@@ -9,6 +9,7 @@ Parameters:
   - links: (link[]) (default: [])
   - id (string) (default: bcl-inpage-navigation-random(100))
   - dropdown_id (string) (default: bcl-inpage-navigation-dropdown-random(100))
+  - dynamic_active: (boolean) (default: false)
   - icon_path (string) (default: '')
   - attributes (drupal attrs)
 #}
@@ -21,6 +22,7 @@ Parameters:
 {% set _id = id|default('bcl-inpage-navigation-' ~ random(100)) %}
 {% set _icon_path = icon_path|default('') %}
 {% set _dropdown_id = dropdown_id|default('bcl-inpage-navigation-dropdown' ~ random(100)) %}
+{% set _dyanmic_active = dynamic_active|default(false) %}
 
 {% if attributes is empty %}
   {% set attributes = create_attribute() %}
@@ -37,7 +39,13 @@ Parameters:
   } only -%}
 {% endset %}
 
-<nav {{ attributes }}>
+{% set _classes = [] %}
+
+{% if _dyanmic_active %}
+  {% set _classes = _classes|merge(['dynamic-active']) %}
+{% endif %}
+
+<nav {{ attributes.addClass(_classes) }}>
   {% set trigger_attributes = create_attribute()
                               .setAttribute('aria-expanded', 'false')
                               .setAttribute('type', 'button')