From c503473063ccca78fd8fcc1b8179b8a2fae1ec9b Mon Sep 17 00:00:00 2001
From: Siddharth Singh <siddharth@xola.com>
Date: Thu, 14 Dec 2023 17:43:28 +0530
Subject: [PATCH 1/3] Added accordion component to ui kit

---
 src/components/Accordion/Accordion.jsx | 50 ++++++++++++++++++++++++++
 src/index.js                           |  1 +
 2 files changed, 51 insertions(+)
 create mode 100644 src/components/Accordion/Accordion.jsx

diff --git a/src/components/Accordion/Accordion.jsx b/src/components/Accordion/Accordion.jsx
new file mode 100644
index 000000000..da6dfc2ba
--- /dev/null
+++ b/src/components/Accordion/Accordion.jsx
@@ -0,0 +1,50 @@
+import { Disclosure } from "@headlessui/react";
+import { SlideDown } from "../Animation/SlideDown";
+import { ChevronRightIcon } from "../../icons/ChevronRightIcon";
+import clsx from "clsx";
+import React, { Children } from "react";
+
+export const Accordion = ({ children }) => {
+    const childrenArray = Children.toArray(children);
+    return (
+        <div>
+            <Disclosure>
+                {({ open }) => (
+                    <>
+                        <Disclosure.Button className="flex items-center">
+                            <div className="mr-2" data-testid="accordion-dropdown-icon">
+                                <ChevronRightIcon className={clsx(open && "rotate-90")} />
+                            </div>
+
+                            {childrenArray.filter((child) => (child)?.type === Header)}
+                        </Disclosure.Button>
+
+                        <SlideDown isOpen={open}>
+                            {childrenArray.filter((child) => (child)?.type === Body)}
+                        </SlideDown>
+                    </>
+                )}
+            </Disclosure>
+        </div>
+    );
+};
+
+const Header = ({ className, children, ...rest }) => {
+    return (
+        <div className={clsx("flex items-center space-x-3", className)} {...rest}>
+            {children}
+        </div>
+    );
+};
+
+Accordion.Header = Header;
+
+const Body = ({ className, children, ...rest }) => {
+    return (
+        <Disclosure.Panel as="div" className={clsx("p-2 pb-10", className)} {...rest}>
+            {children}
+        </Disclosure.Panel>
+    );
+};
+
+Accordion.Body = Body;
diff --git a/src/index.js b/src/index.js
index b373d2312..bb3b0453e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -43,6 +43,7 @@ export { RelativeDateRange } from "./components/DatePicker/RelativeDateRange";
 export { DatePickerPopover } from "./components/DatePicker/DatePickerPopover";
 export { InlineValuePopover } from "./components/Forms/InlineValuePopover";
 export { ImageUpload } from "./components/ImageUpload";
+export { Accordion } from "./components/Accordion/Accordion";
 
 // Utilities
 export { Currency } from "./components/Utilities/Currency";

From ded38d5e5657bae50f6684994316452c134949a0 Mon Sep 17 00:00:00 2001
From: Siddharth Singh <siddharth@xola.com>
Date: Thu, 14 Dec 2023 23:45:49 +0530
Subject: [PATCH 2/3] Lint fix

---
 src/components/Accordion/Accordion.jsx | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/components/Accordion/Accordion.jsx b/src/components/Accordion/Accordion.jsx
index da6dfc2ba..cba977cee 100644
--- a/src/components/Accordion/Accordion.jsx
+++ b/src/components/Accordion/Accordion.jsx
@@ -1,8 +1,8 @@
 import { Disclosure } from "@headlessui/react";
-import { SlideDown } from "../Animation/SlideDown";
-import { ChevronRightIcon } from "../../icons/ChevronRightIcon";
 import clsx from "clsx";
 import React, { Children } from "react";
+import { SlideDown } from "../Animation/SlideDown";
+import { ChevronRightIcon } from "../../icons/ChevronRightIcon";
 
 export const Accordion = ({ children }) => {
     const childrenArray = Children.toArray(children);
@@ -16,12 +16,10 @@ export const Accordion = ({ children }) => {
                                 <ChevronRightIcon className={clsx(open && "rotate-90")} />
                             </div>
 
-                            {childrenArray.filter((child) => (child)?.type === Header)}
+                            {childrenArray.filter((child) => child?.type === Header)}
                         </Disclosure.Button>
 
-                        <SlideDown isOpen={open}>
-                            {childrenArray.filter((child) => (child)?.type === Body)}
-                        </SlideDown>
+                        <SlideDown isOpen={open}>{childrenArray.filter((child) => child?.type === Body)}</SlideDown>
                     </>
                 )}
             </Disclosure>

From e473e5fabe7a237652dc5e514f11595ef7f6093c Mon Sep 17 00:00:00 2001
From: Siddharth Singh <siddharth@xola.com>
Date: Tue, 19 Dec 2023 16:07:32 +0530
Subject: [PATCH 3/3] Stories for accordion

---
 src/components/Accordion/Accordion.jsx       | 47 +++++++++------
 src/stories/DataDisplay/Accordion.stories.js | 63 ++++++++++++++++++++
 2 files changed, 93 insertions(+), 17 deletions(-)
 create mode 100644 src/stories/DataDisplay/Accordion.stories.js

diff --git a/src/components/Accordion/Accordion.jsx b/src/components/Accordion/Accordion.jsx
index cba977cee..6a5391ebe 100644
--- a/src/components/Accordion/Accordion.jsx
+++ b/src/components/Accordion/Accordion.jsx
@@ -1,29 +1,28 @@
 import { Disclosure } from "@headlessui/react";
 import clsx from "clsx";
 import React, { Children } from "react";
+import PropTypes from "prop-types";
 import { SlideDown } from "../Animation/SlideDown";
 import { ChevronRightIcon } from "../../icons/ChevronRightIcon";
 
 export const Accordion = ({ children }) => {
     const childrenArray = Children.toArray(children);
     return (
-        <div>
-            <Disclosure>
-                {({ open }) => (
-                    <>
-                        <Disclosure.Button className="flex items-center">
-                            <div className="mr-2" data-testid="accordion-dropdown-icon">
-                                <ChevronRightIcon className={clsx(open && "rotate-90")} />
-                            </div>
-
-                            {childrenArray.filter((child) => child?.type === Header)}
-                        </Disclosure.Button>
-
-                        <SlideDown isOpen={open}>{childrenArray.filter((child) => child?.type === Body)}</SlideDown>
-                    </>
-                )}
-            </Disclosure>
-        </div>
+        <Disclosure>
+            {({ open }) => (
+                <>
+                    <Disclosure.Button className="flex items-center">
+                        <div className="mr-2" data-testid="accordion-dropdown-icon">
+                            <ChevronRightIcon className={clsx(open && "rotate-90")} />
+                        </div>
+
+                        {childrenArray.filter((child) => child?.type === Header)}
+                    </Disclosure.Button>
+
+                    <SlideDown isOpen={open}>{childrenArray.filter((child) => child?.type === Body)}</SlideDown>
+                </>
+            )}
+        </Disclosure>
     );
 };
 
@@ -46,3 +45,17 @@ const Body = ({ className, children, ...rest }) => {
 };
 
 Accordion.Body = Body;
+
+Accordion.prototype = {
+    children: PropTypes.node,
+};
+
+Header.prototype = {
+    className: PropTypes.string,
+    children: PropTypes.node,
+};
+
+Body.prototype = {
+    className: PropTypes.string,
+    children: PropTypes.node,
+};
diff --git a/src/stories/DataDisplay/Accordion.stories.js b/src/stories/DataDisplay/Accordion.stories.js
new file mode 100644
index 000000000..34722d080
--- /dev/null
+++ b/src/stories/DataDisplay/Accordion.stories.js
@@ -0,0 +1,63 @@
+import React from "react";
+import { Accordion } from "../../components/Accordion/Accordion";
+
+const AccordionStories = {
+    title: "Data Display/Accordion",
+    component: Accordion,
+    parameters: {
+        docs: {
+            description: {
+                component: "Accordions are collapsible content UI element",
+            },
+        }
+    },
+    args: {
+        heading: "This is Accordion heading",
+        headingClass: "text-xl",
+        content: `Space, the final frontier. These are the voyages of the starship Enterprise. 
+                Its five year mission: to explore strange new worlds, to seek out new life and
+                new civilizations, to boldly go where no man has gone before!`,
+        contentClass: "p1"
+    },
+    argTypes: {
+        heading: {
+            type: { required: false },
+            description: "This is accordion heading",
+            control: { type: "text" },
+        },
+        headingClass: {
+            type: { required: false },
+            control: { type: "text" },
+            table: {
+                type: { summary: "Classes for heading" },
+            },
+        },
+        content: {
+            type: { required: false },
+            description: "This is body content",
+            control: { type: "text" },
+        },
+        contentClass: {
+            type: { required: false },
+            control: { type: "text" },
+            table: {
+                type: { summary: "Classes for content"},
+            },
+        }
+    },
+};
+
+export const Default = ({ children, heading, headingClass, content }) => {
+    return (
+        <Accordion>
+            <Accordion.Header className={headingClass}>
+                { heading }
+            </Accordion.Header>
+            <Accordion.Body>
+                { content }
+            </Accordion.Body>
+        </Accordion>
+    )
+};
+
+export default AccordionStories;
\ No newline at end of file