feat(collapse): add collapse component

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

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

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");
+  }
+}

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;
+  }
+}

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;
 

src/style.css

@@ -3,3 +3,4 @@
 @import "./tabs/style.css";
 @import "./toast/style.css";
 @import "./close/style.css";
+@import "./collapse/style.css";