Reuse Collapse controller for Accordion component

Author: BafS

src/Toolkit/kits/bootstrap/accordion/assets/controllers/accordion_controller.js

@@ -4,11 +4,11 @@
     "name": "Accordion",
     "description": "A vertically stacked set of interactive headings that each reveal a section of content.",
     "copy-files": {
-        "assets/": "assets/",
         "templates/": "templates/"
     },
     "dependencies": {
+        "recipe": ["collapse"],
         "composer": ["twig/extra-bundle", "twig/html-extra:^3.12.0"],
-        "importmap": ["bootstrap/dist/css/bootstrap.min.css", "bootstrap"]
+        "importmap": ["bootstrap/dist/css/bootstrap.min.css"]
     }
 }

src/Toolkit/kits/bootstrap/accordion/manifest.json

@@ -17,8 +17,6 @@
     class="{{ style.apply({flush}, attributes.render('class')) }}"
     {{ attributes.defaults({
         id: _accordion_id,
-        'data-controller': 'accordion',
-        'data-accordion-always-open-value': _accordion_always_open ? 'true' : 'false',
     }) }}
     {{ attributes }}
 >

src/Toolkit/kits/bootstrap/accordion/templates/components/Accordion.html.twig

@@ -3,7 +3,7 @@
 <div
     id="{{ _accordion_item_id }}-collapse"
     class="accordion-collapse collapse{{ _accordion_item_is_open ? ' show' : '' }}"
-    data-accordion-target="body"
+    data-collapse-target="content"
 >
     <div class="{{ ('accordion-body ' ~ attributes.render('class'))|trim }}" {{ attributes }}>
         {%- block content %}{% endblock -%}

src/Toolkit/kits/bootstrap/accordion/templates/components/Accordion/Body.html.twig

@@ -12,8 +12,8 @@
     <button
         class="{{ style.apply({collapsed: not _accordion_item_is_open}, attributes.render('class')) }}"
         type="button"
-        data-action="click->accordion#toggle"
-        data-accordion-target="header"
+        data-action="click->collapse#toggle"
+        data-collapse-target="trigger"
         aria-expanded="{{ _accordion_item_is_open ? 'true' : 'false' }}"
         aria-controls="{{ _accordion_item_id }}-collapse"
         {{ attributes }}

src/Toolkit/kits/bootstrap/accordion/templates/components/Accordion/Header.html.twig

@@ -6,7 +6,10 @@
 {%- set _accordion_item_is_open = open -%}
 <div
     class="{{ ('accordion-item ' ~ attributes.render('class'))|trim }}"
-    data-accordion-target="item"
+    {{ attributes.defaults({
+        'data-controller': 'collapse',
+        'data-collapse-parent-value': not _accordion_always_open ? '#' ~ _accordion_id : '',
+    }) }}
     {{ attributes }}
 >
     {%- block content %}{% endblock -%}

src/Toolkit/kits/bootstrap/accordion/templates/components/Accordion/Item.html.twig

@@ -4,13 +4,18 @@ import { Collapse } from 'bootstrap';
 export default class extends Controller {
     static targets = ['trigger', 'content'];
 
+    static values = {
+        parent: { type: String, default: '' },
+    };
+
     connect() {
         this._collapse = new Collapse(this.contentTarget, {
             toggle: false,
+            parent: this.parentValue ? document.querySelector(this.parentValue) : undefined,
         });
 
-        this.contentTarget.addEventListener('shown.bs.collapse', this._onShown.bind(this));
-        this.contentTarget.addEventListener('hidden.bs.collapse', this._onHidden.bind(this));
+        this.contentTarget.addEventListener('show.bs.collapse', this._onShown.bind(this));
+        this.contentTarget.addEventListener('hide.bs.collapse', this._onHidden.bind(this));
 
         // Sync initial state
         if (this.contentTarget.classList.contains('show')) {
@@ -19,8 +24,8 @@ export default class extends Controller {
     }
 
     disconnect() {
-        this.contentTarget.removeEventListener('shown.bs.collapse', this._onShown.bind(this));
-        this.contentTarget.removeEventListener('hidden.bs.collapse', this._onHidden.bind(this));
+        this.contentTarget.removeEventListener('show.bs.collapse', this._onShown.bind(this));
+        this.contentTarget.removeEventListener('hide.bs.collapse', this._onHidden.bind(this));
         this._collapse?.dispose();
     }
 
@@ -47,6 +52,7 @@ export default class extends Controller {
     _updateTriggers(expanded) {
         for (const trigger of this.triggerTargets) {
             trigger.setAttribute('aria-expanded', expanded ? 'true' : 'false');
+            trigger.classList.toggle('collapsed', !expanded);
         }
     }
 }

src/Toolkit/kits/bootstrap/collapse/assets/controllers/collapse_controller.js

@@ -15,16 +15,16 @@
 </twig:Accordion>
 ```
 - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
-<div class="accordion" id="always-open-accordion" data-controller="accordion" data-accordion-always-open-value="true">
-<div class="accordion-item" data-accordion-target="item">
+<div class="accordion" id="always-open-accordion">
+<div class="accordion-item" data-controller="collapse" data-collapse-parent-value="">
 <h2 class="accordion-header">
-    <button class="accordion-button" type="button" data-action="click-&gt;accordion#toggle" data-accordion-target="header" aria-expanded="true" aria-controls="always-open-accordion-1-collapse">Accordion Item #1</button>
-</h2>        <div id="always-open-accordion-1-collapse" class="accordion-collapse collapse show" data-accordion-target="body">
+    <button class="accordion-button" type="button" data-action="click-&gt;collapse#toggle" data-collapse-target="trigger" aria-expanded="true" aria-controls="always-open-accordion-1-collapse">Accordion Item #1</button>
+</h2>        <div id="always-open-accordion-1-collapse" class="accordion-collapse collapse show" data-collapse-target="content">
     <div class="accordion-body">This item stays open when other items are opened.</div>
-</div>    </div>    <div class="accordion-item" data-accordion-target="item">
+</div>    </div>    <div class="accordion-item" data-controller="collapse" data-collapse-parent-value="">
 <h2 class="accordion-header">
-    <button class="accordion-button" type="button" data-action="click-&gt;accordion#toggle" data-accordion-target="header" aria-expanded="true" aria-controls="always-open-accordion-2-collapse">Accordion Item #2</button>
-</h2>        <div id="always-open-accordion-2-collapse" class="accordion-collapse collapse show" data-accordion-target="body">
+    <button class="accordion-button" type="button" data-action="click-&gt;collapse#toggle" data-collapse-target="trigger" aria-expanded="true" aria-controls="always-open-accordion-2-collapse">Accordion Item #2</button>
+</h2>        <div id="always-open-accordion-2-collapse" class="accordion-collapse collapse show" data-collapse-target="content">
     <div class="accordion-body">This item also stays open independently.</div>
 </div>    </div>
 </div>

src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit bootstrap, component accordion, code file Always open.html__1.html

@@ -25,25 +25,25 @@
 </twig:Accordion>
 ```
 - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
-<div class="accordion" id="demo-accordion" data-controller="accordion" data-accordion-always-open-value="false">
-<div class="accordion-item" data-accordion-target="item">
+<div class="accordion" id="demo-accordion">
+<div class="accordion-item" data-controller="collapse" data-collapse-parent-value="#demo-accordion">
 <h2 class="accordion-header">
-    <button class="accordion-button" type="button" data-action="click-&gt;accordion#toggle" data-accordion-target="header" aria-expanded="true" aria-controls="demo-accordion-1-collapse">Accordion Item #1</button>
-</h2>        <div id="demo-accordion-1-collapse" class="accordion-collapse collapse show" data-accordion-target="body">
+    <button class="accordion-button" type="button" data-action="click-&gt;collapse#toggle" data-collapse-target="trigger" aria-expanded="true" aria-controls="demo-accordion-1-collapse">Accordion Item #1</button>
+</h2>        <div id="demo-accordion-1-collapse" class="accordion-collapse collapse show" data-collapse-target="content">
     <div class="accordion-body">
 <strong>This is the first item's accordion body.</strong> It is shown by default.
         </div>
-</div>    </div>    <div class="accordion-item" data-accordion-target="item">
+</div>    </div>    <div class="accordion-item" data-controller="collapse" data-collapse-parent-value="#demo-accordion">
 <h2 class="accordion-header">
-    <button class="accordion-button collapsed" type="button" data-action="click-&gt;accordion#toggle" data-accordion-target="header" aria-expanded="false" aria-controls="demo-accordion-2-collapse">Accordion Item #2</button>
-</h2>        <div id="demo-accordion-2-collapse" class="accordion-collapse collapse" data-accordion-target="body">
+    <button class="accordion-button collapsed" type="button" data-action="click-&gt;collapse#toggle" data-collapse-target="trigger" aria-expanded="false" aria-controls="demo-accordion-2-collapse">Accordion Item #2</button>
+</h2>        <div id="demo-accordion-2-collapse" class="accordion-collapse collapse" data-collapse-target="content">
     <div class="accordion-body">
 <strong>This is the second item's accordion body.</strong> It is hidden by default.
         </div>
-</div>    </div>    <div class="accordion-item" data-accordion-target="item">
+</div>    </div>    <div class="accordion-item" data-controller="collapse" data-collapse-parent-value="#demo-accordion">
 <h2 class="accordion-header">
-    <button class="accordion-button collapsed" type="button" data-action="click-&gt;accordion#toggle" data-accordion-target="header" aria-expanded="false" aria-controls="demo-accordion-3-collapse">Accordion Item #3</button>
-</h2>        <div id="demo-accordion-3-collapse" class="accordion-collapse collapse" data-accordion-target="body">
+    <button class="accordion-button collapsed" type="button" data-action="click-&gt;collapse#toggle" data-collapse-target="trigger" aria-expanded="false" aria-controls="demo-accordion-3-collapse">Accordion Item #3</button>
+</h2>        <div id="demo-accordion-3-collapse" class="accordion-collapse collapse" data-collapse-target="content">
     <div class="accordion-body">
 <strong>This is the third item's accordion body.</strong> It is hidden by default.
         </div>

src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit bootstrap, component accordion, code file Demo.html__1.html

@@ -15,16 +15,16 @@
 </twig:Accordion>
 ```
 - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
-<div class="accordion accordion-flush" id="flush-accordion" data-controller="accordion" data-accordion-always-open-value="false">
-<div class="accordion-item" data-accordion-target="item">
+<div class="accordion accordion-flush" id="flush-accordion">
+<div class="accordion-item" data-controller="collapse" data-collapse-parent-value="#flush-accordion">
 <h2 class="accordion-header">
-    <button class="accordion-button" type="button" data-action="click-&gt;accordion#toggle" data-accordion-target="header" aria-expanded="true" aria-controls="flush-accordion-1-collapse">Accordion Item #1</button>
-</h2>        <div id="flush-accordion-1-collapse" class="accordion-collapse collapse show" data-accordion-target="body">
+    <button class="accordion-button" type="button" data-action="click-&gt;collapse#toggle" data-collapse-target="trigger" aria-expanded="true" aria-controls="flush-accordion-1-collapse">Accordion Item #1</button>
+</h2>        <div id="flush-accordion-1-collapse" class="accordion-collapse collapse show" data-collapse-target="content">
     <div class="accordion-body">Flush accordion content for item #1.</div>
-</div>    </div>    <div class="accordion-item" data-accordion-target="item">
+</div>    </div>    <div class="accordion-item" data-controller="collapse" data-collapse-parent-value="#flush-accordion">
 <h2 class="accordion-header">
-    <button class="accordion-button collapsed" type="button" data-action="click-&gt;accordion#toggle" data-accordion-target="header" aria-expanded="false" aria-controls="flush-accordion-2-collapse">Accordion Item #2</button>
-</h2>        <div id="flush-accordion-2-collapse" class="accordion-collapse collapse" data-accordion-target="body">
+    <button class="accordion-button collapsed" type="button" data-action="click-&gt;collapse#toggle" data-collapse-target="trigger" aria-expanded="false" aria-controls="flush-accordion-2-collapse">Accordion Item #2</button>
+</h2>        <div id="flush-accordion-2-collapse" class="accordion-collapse collapse" data-collapse-target="content">
     <div class="accordion-body">Flush accordion content for item #2.</div>
 </div>    </div>
 </div>