From 8254ece53f37adac4ac438a6cfe5976f1670de2c Mon Sep 17 00:00:00 2001
From: Gil Balsiger <gil.balsiger@gmail.com>
Date: Sat, 27 Jan 2024 12:56:11 +0100
Subject: [PATCH] feat(collapse): add collapse component

---
 README.md                |  4 +--
 example/index.html       | 14 +++++++++++
 src/collapse/Collapse.ts | 54 ++++++++++++++++++++++++++++++++++++++++
 src/collapse/style.css   | 13 ++++++++++
 src/index.ts             |  4 +++
 src/style.css            |  1 +
 6 files changed, 87 insertions(+), 3 deletions(-)
 create mode 100644 src/collapse/Collapse.ts
 create mode 100644 src/collapse/style.css

diff --git a/README.md b/README.md
index 368f9c0..1fe4604 100644
--- a/README.md
+++ b/README.md
@@ -48,10 +48,8 @@
 - [x] [Toast](https://www.bloum.dev/docs/components/toast)
   - [x] Autohide
   - [x] Dismissable
-  - [ ] Position
-  - [ ] Promise based
-- [ ] DatePicker / TimePicker / Calendar
 - [ ] Accordion / Collapse
+- [ ] DatePicker / TimePicker / Calendar
 - [ ] Stepper / Wizard
 - [ ] Popover
 - [ ] Tooltip
diff --git a/example/index.html b/example/index.html
index 599b9b6..d6b3588 100644
--- a/example/index.html
+++ b/example/index.html
@@ -183,6 +183,20 @@ <h1>Toast</h1>
 
       <bl-close-button></bl-close-button>
 
+      <h1>Collapse</h1>
+
+      <button data-toggle="collapse" data-target="#my-collapse">
+        Toggle collapse
+      </button>
+      <bl-collapse id="my-collapse">
+        <h4>This is a collapse</h4>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda
+          atque consectetur consequatur debitis dolorum, eos eveniet in iste
+          magnam, nihil.
+        </p>
+      </bl-collapse>
+
       <p>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus
         deleniti dignissimos eius eum excepturi impedit incidunt nam natus
diff --git a/src/collapse/Collapse.ts b/src/collapse/Collapse.ts
new file mode 100644
index 0000000..e075942
--- /dev/null
+++ b/src/collapse/Collapse.ts
@@ -0,0 +1,54 @@
+export class Collapse extends HTMLElement {
+  NAME = "collapse";
+
+  static register() {
+    customElements.define("bl-collapse", this);
+    document.querySelectorAll("[data-toggle='collapse']").forEach((element) => {
+      element.addEventListener("click", () => {
+        const targetString = element.getAttribute("data-target");
+        if (targetString) {
+          const target = document.querySelector<Collapse>(targetString);
+          if (target) {
+            target.toggle();
+          }
+        }
+      });
+    });
+  }
+
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    this.classList.add("bl-collapse");
+    this.setAttribute("aria-hidden", "true");
+    const wrapper = document.createElement("div");
+    wrapper.classList.add("bl-collapse-wrapper");
+    wrapper.append(...this.childNodes);
+    this.append(wrapper);
+    this.hide();
+  }
+
+  show() {
+    this.ariaHidden = "false";
+    this.classList.add("show");
+  }
+
+  hide() {
+    this.ariaHidden = "true";
+    this.classList.remove("show");
+  }
+
+  toggle() {
+    if (this.expanded) {
+      this.hide();
+    } else {
+      this.show();
+    }
+  }
+
+  get expanded() {
+    return this.classList.contains("show");
+  }
+}
diff --git a/src/collapse/style.css b/src/collapse/style.css
new file mode 100644
index 0000000..c96381f
--- /dev/null
+++ b/src/collapse/style.css
@@ -0,0 +1,13 @@
+.bl-collapse {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.3s ease-in-out;
+
+  & > .bl-collapse-wrapper {
+    overflow: hidden;
+  }
+
+  &.show {
+    grid-template-rows: 1fr;
+  }
+}
diff --git a/src/index.ts b/src/index.ts
index c39d4eb..d814ed5 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -9,6 +9,7 @@ import { TabPanel } from "./tabs/TabPanel";
 import { ToastContainer } from "./toast/ToastContainer";
 import { Toast } from "./toast/Toast";
 import { CloseButton } from "./close/CloseButton";
+import { Collapse } from "./collapse/Collapse";
 
 CloseButton.register();
 
@@ -25,10 +26,13 @@ TabPanel.register();
 ToastContainer.register();
 Toast.register();
 
+Collapse.register();
+
 export { CloseButton };
 export { Select, Modal, AlertDialog };
 export { Tabs, TabList, Tab, TabPanels, TabPanel };
 export { ToastContainer, Toast };
+export { Collapse };
 
 window.Toast = Toast;
 
diff --git a/src/style.css b/src/style.css
index 76d13d5..3030ad0 100644
--- a/src/style.css
+++ b/src/style.css
@@ -3,3 +3,4 @@
 @import "./tabs/style.css";
 @import "./toast/style.css";
 @import "./close/style.css";
+@import "./collapse/style.css";