OEL-3547: Added collapse/expand buttons in accordion.

[skip chromatic]
openeuropa · Dec 4, 2024 · 3d6c6aa · 3d6c6aa
1 parent 95207c8
commit 3d6c6aa
Show file tree

Hide file tree

Showing 10 changed files with 664 additions and 488 deletions.
diff --git a/src/components/bcl-accordion/__snapshots__/accordion.test.js.snap b/src/components/bcl-accordion/__snapshots__/accordion.test.js.snap
diff --git a/src/components/bcl-accordion/accordion.html.twig b/src/components/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,89 @@
 <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 }}"
-    >
-      {% 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 _items|length > 1 and (_expand_button is not empty or _collapse_button is not empty) %}
+  <div class="d-flex justify-content-end gap-3 mb-3">
+    {% 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 %}
+    {% 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 class="accordion-body">
-        {%- set _content = _item.content|default('') %}
-        {%- block content _content -%}
+  </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 %}
 

diff --git a/src/data/accordion/data.js b/src/data/accordion/data.js
@@ -17,4 +17,11 @@ module.exports = {
     },
   ],
   open_item_id: 1,
+  expand_button: {
+    label: "Expand section",
+  },
+  collapse_button: {
+    label: "Collapse section",
+    variant: "secondary",
+  },
 };
diff --git a/src/themes/default/src/js/accordion-toggle/accordion-toggle.js b/src/themes/default/src/js/accordion-toggle/accordion-toggle.js
@@ -0,0 +1,54 @@
+/* eslint-disable prefer-destructuring */
+import Collapse from "@openeuropa/bcl-bootstrap/js/src/collapse";
+import EventHandler from "@openeuropa/bcl-bootstrap/js/src/dom/event-handler";
+import SelectorEngine from "@openeuropa/bcl-bootstrap/js/src/dom/selector-engine";
+
+class AccordionToggle {
+  static isInitialized = false;
+
+  constructor(buttonElement) {
+    this.buttonElement = buttonElement;
+    this.targetAccordionId = buttonElement.getAttribute("data-target");
+    this.action = buttonElement.getAttribute("data-action");
+
+    this.accordionElement = SelectorEngine.findOne(`#${this.targetAccordionId}`);
+    this.accordionItems = SelectorEngine.find(".accordion-collapse", this.accordionElement);
+
+    this.addEventListeners();
+  }
+
+  addEventListeners() {
+    EventHandler.on(this.buttonElement, "click", (event) => this.handleAccordionAction(event));
+  }
+
+  handleAccordionAction(event) {
+    const item = event.target;
+    const action = item.getAttribute('data-action');
+    const accordionItems = this.accordionItems;
+
+    accordionItems.forEach((accordionItem) => {
+      const collapseInstance = Collapse.getOrCreateInstance(accordionItem, { toggle: false });
+
+      if (action === 'expand') {
+        collapseInstance.show();
+      } else if (action === 'collapse') {
+        collapseInstance.hide();
+      }
+    });
+  }
+
+  static init() {
+    if (AccordionToggle.isInitialized) {
+      return;
+    }
+
+    const toggleButtons = SelectorEngine.find('[data-action][data-target]');
+    toggleButtons.forEach(buttonElement => new AccordionToggle(buttonElement));
+
+    AccordionToggle.isInitialized = true;
+  }
+}
+
+document.addEventListener("DOMContentLoaded", () => AccordionToggle.init());
+
+export default AccordionToggle;
diff --git a/src/themes/default/src/js/index.esm.js b/src/themes/default/src/js/index.esm.js
@@ -13,6 +13,7 @@ import Dropdown from "@openeuropa/bcl-bootstrap/js/src/dropdown";
 import Gallery from "@openeuropa/bcl-theme-default/src/js/gallery/gallery";
 import Modal from "@openeuropa/bcl-bootstrap/js/src/modal";
 import AccessibleToggle from "@openeuropa/bcl-theme-default/src/js/accessible-toggle/accessible-toggle";
+import AccordionToggle from "@openeuropa/bcl-theme-default/src/js/accordion-toggle/accordion-toggle";
 import Offcanvas from "@openeuropa/bcl-bootstrap/js/src/offcanvas";
 import Popover from "@openeuropa/bcl-bootstrap/js/src/popover";
 import ScrollSpyV2 from "@openeuropa/bcl-bootstrap/js/src/scrollspy";
@@ -30,6 +31,7 @@ export {
   Gallery,
   Modal,
   AccessibleToggle,
+  AccordionToggle,
   Offcanvas,
   Popover,
   ScrollSpyV2,

diff --git a/src/themes/default/src/js/index.umd.js b/src/themes/default/src/js/index.umd.js
@@ -13,6 +13,7 @@ import Dropdown from "@openeuropa/bcl-bootstrap/js/src/dropdown";
 import Gallery from "@openeuropa/bcl-theme-default/src/js/gallery/gallery";
 import Modal from "@openeuropa/bcl-bootstrap/js/src/modal";
 import AccessibleToggle from "@openeuropa/bcl-theme-default/src/js/accessible-toggle/accessible-toggle";
+import AccordionToggle from "@openeuropa/bcl-theme-default/src/js/accordion-toggle/accordion-toggle";
 import Offcanvas from "@openeuropa/bcl-bootstrap/js/src/offcanvas";
 import Popover from "@openeuropa/bcl-bootstrap/js/src/popover";
 import ScrollSpyV2 from "@openeuropa/bcl-bootstrap/js/src/scrollspy";
@@ -30,6 +31,7 @@ export default {
   Gallery,
   Modal,
   AccessibleToggle,
+  AccordionToggle,
   Offcanvas,
   Popover,
   ScrollSpyV2,

diff --git a/src/themes/joinup/src/js/index.esm.js b/src/themes/joinup/src/js/index.esm.js
@@ -13,6 +13,7 @@ import Dropdown from "@openeuropa/bcl-bootstrap/js/src/dropdown";
 import Gallery from "@openeuropa/bcl-theme-default/src/js/gallery/gallery";
 import Modal from "@openeuropa/bcl-bootstrap/js/src/modal";
 import AccessibleToggle from "@openeuropa/bcl-theme-default/src/js/accessible-toggle/accessible-toggle";
+import AccordionToggle from "@openeuropa/bcl-theme-default/src/js/accordion-toggle/accordion-toggle";
 import Offcanvas from "@openeuropa/bcl-bootstrap/js/src/offcanvas";
 import Popover from "@openeuropa/bcl-bootstrap/js/src/popover";
 import ScrollSpyV2 from "@openeuropa/bcl-bootstrap/js/src/scrollspy";
@@ -30,6 +31,7 @@ export {
   Gallery,
   Modal,
   AccessibleToggle,
+  AccordionToggle,
   Offcanvas,
   Popover,
   ScrollSpyV2,

diff --git a/src/themes/joinup/src/js/index.umd.js b/src/themes/joinup/src/js/index.umd.js
@@ -13,6 +13,7 @@ import Dropdown from "@openeuropa/bcl-bootstrap/js/src/dropdown";
 import Gallery from "@openeuropa/bcl-theme-default/src/js/gallery/gallery";
 import Modal from "@openeuropa/bcl-bootstrap/js/src/modal";
 import AccessibleToggle from "@openeuropa/bcl-theme-default/src/js/accessible-toggle/accessible-toggle";
+import AccordionToggle from "@openeuropa/bcl-theme-default/src/js/accordion-toggle/accordion-toggle";
 import Offcanvas from "@openeuropa/bcl-bootstrap/js/src/offcanvas";
 import Popover from "@openeuropa/bcl-bootstrap/js/src/popover";
 import ScrollSpyV2 from "@openeuropa/bcl-bootstrap/js/src/scrollspy";
@@ -30,6 +31,7 @@ export default {
   Gallery,
   Modal,
   AccessibleToggle,
+  AccordionToggle,
   Offcanvas,
   Popover,
   ScrollSpyV2,

diff --git a/src/themes/ucpkn/src/js/index.esm.js b/src/themes/ucpkn/src/js/index.esm.js
@@ -13,6 +13,7 @@ import Dropdown from "@openeuropa/bcl-bootstrap/js/src/dropdown";
 import Gallery from "@openeuropa/bcl-theme-default/src/js/gallery/gallery";
 import Modal from "@openeuropa/bcl-bootstrap/js/src/modal";
 import AccessibleToggle from "@openeuropa/bcl-theme-default/src/js/accessible-toggle/accessible-toggle";
+import AccordionToggle from "@openeuropa/bcl-theme-default/src/js/accordion-toggle/accordion-toggle";
 import Offcanvas from "@openeuropa/bcl-bootstrap/js/src/offcanvas";
 import Popover from "@openeuropa/bcl-bootstrap/js/src/popover";
 import ScrollSpyV2 from "@openeuropa/bcl-bootstrap/js/src/scrollspy";
@@ -30,6 +31,7 @@ export {
   Gallery,
   Modal,
   AccessibleToggle,
+  AccordionToggle,
   Offcanvas,
   Popover,
   ScrollSpyV2,

diff --git a/src/themes/ucpkn/src/js/index.umd.js b/src/themes/ucpkn/src/js/index.umd.js
@@ -13,6 +13,7 @@ import Dropdown from "@openeuropa/bcl-bootstrap/js/src/dropdown";
 import Gallery from "@openeuropa/bcl-theme-default/src/js/gallery/gallery";
 import Modal from "@openeuropa/bcl-bootstrap/js/src/modal";
 import AccessibleToggle from "@openeuropa/bcl-theme-default/src/js/accessible-toggle/accessible-toggle";
+import AccordionToggle from "@openeuropa/bcl-theme-default/src/js/accordion-toggle/accordion-toggle";
 import Offcanvas from "@openeuropa/bcl-bootstrap/js/src/offcanvas";
 import Popover from "@openeuropa/bcl-bootstrap/js/src/popover";
 import ScrollSpyV2 from "@openeuropa/bcl-bootstrap/js/src/scrollspy";
@@ -30,6 +31,7 @@ export default {
   Gallery,
   Modal,
   AccessibleToggle,
+  AccordionToggle,
   Offcanvas,
   Popover,
   ScrollSpyV2,