From e4e3b2aa78e80e8eb8d69915dec8634686a0f8b3 Mon Sep 17 00:00:00 2001
From: ser888gio <nica.sergiu@seznam.cz>
Date: Tue, 17 Sep 2024 13:15:41 +0200
Subject: [PATCH] Created a thin wrapper around Accordion component based on
 task #13

---
 packages/design-system/src/accordion.tsx | 42 ++++++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 packages/design-system/src/accordion.tsx

diff --git a/packages/design-system/src/accordion.tsx b/packages/design-system/src/accordion.tsx
new file mode 100644
index 00000000..0177fa04
--- /dev/null
+++ b/packages/design-system/src/accordion.tsx
@@ -0,0 +1,42 @@
+import React, { forwardRef, ElementRef, ComponentPropsWithoutRef } from "react";
+import {
+  CloseButton,
+  Disclosure,
+  DisclosureButton,
+  DisclosurePanel,
+} from "@headlessui/react";
+import cn from "classnames";
+
+const Accordion = forwardRef<
+  ElementRef<typeof Disclosure>,
+  ComponentPropsWithoutRef<typeof Disclosure>
+>(({ className, ...props }, ref) => (
+  <Disclosure ref={ref} className={(cn("k1-border-b"), className)} {...props} />
+));
+Accordion.displayName = "Accordion";
+
+const AccordionButton = forwardRef<
+  ElementRef<typeof DisclosureButton>,
+  ComponentPropsWithoutRef<typeof DisclosureButton>
+>(({ className, ...props }, ref) => (
+  <DisclosureButton ref={ref} className={(cn(""), className)} {...props} />
+));
+AccordionButton.displayName = "AccordionButton";
+
+const AccordionPanel = forwardRef<
+  ElementRef<typeof DisclosurePanel>,
+  ComponentPropsWithoutRef<typeof DisclosurePanel>
+>(({ className, ...props }, ref) => (
+  <DisclosurePanel ref={ref} className={(cn(""), className)} {...props} />
+));
+AccordionButton.displayName = "AccordionPanel";
+
+const AccordionCloseButton = forwardRef<
+  ElementRef<typeof CloseButton>,
+  ComponentPropsWithoutRef<typeof CloseButton>
+>(({ className, ...props }, ref) => (
+  <CloseButton ref={ref} className={(cn(""), className)} {...props} />
+));
+AccordionButton.displayName = "AccordionCloseButton";
+
+export { Accordion, AccordionButton, AccordionPanel, AccordionCloseButton };