Merge pull request #86 from abusix/ahq2-20-add-disclosure-design-to-h…

…ailstorm

feat(components): add disclosure component

src/components/disclosure/disclosure.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { Disclosure } from "./disclosure";
+
+const meta: Meta<typeof Disclosure> = {
+    title: "Disclosure",
+    component: Disclosure,
+    parameters: {
+        options: {
+            showPanel: false,
+        },
+    },
+};
+
+export default meta;
+type Story = StoryObj<typeof Disclosure>;
+
+export const Default: Story = {
+    render: () => (
+        <div className="w-96">
+            <Disclosure>
+                <Disclosure.Button>Disclosure Button</Disclosure.Button>
+                <Disclosure.Panel>Disclosure Content</Disclosure.Panel>
+            </Disclosure>
+        </div>
+    ),
+};
+
+export const Stacked: Story = {
+    render: () => (
+        <div className="w-96">
+            <Disclosure>
+                <Disclosure.Button>Disclosure Button</Disclosure.Button>
+                <Disclosure.Panel>Disclosure Content</Disclosure.Panel>
+            </Disclosure>
+            <Disclosure>
+                <Disclosure.Button>Disclosure Button</Disclosure.Button>
+                <Disclosure.Panel>Disclosure Content</Disclosure.Panel>
+            </Disclosure>
+            <Disclosure>
+                <Disclosure.Button>Disclosure Button</Disclosure.Button>
+                <Disclosure.Panel>Disclosure Content</Disclosure.Panel>
+            </Disclosure>
+        </div>
+    ),
+};

src/components/disclosure/disclosure.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { Disclosure as HeadlessUiDisclosure } from "@headlessui/react";
+import { ChevronDownIcon } from "../../icons";
+import { classNames } from "../../util/class-names";
+
+interface DisclosurePanelProps extends React.ComponentPropsWithoutRef<"div"> {
+    children: React.ReactNode;
+}
+
+const DisclosurePanel = ({ children, ...props }: DisclosurePanelProps) => {
+    return <HeadlessUiDisclosure.Panel {...props}>{children}</HeadlessUiDisclosure.Panel>;
+};
+
+interface DisclosureButtonProps extends React.ComponentPropsWithoutRef<"button"> {
+    children: React.ReactNode;
+}
+
+const DisclosureButton = ({ children, ...props }: DisclosureButtonProps) => {
+    return (
+        <HeadlessUiDisclosure.Button
+            className="headline-300 flex h-10 w-full items-center justify-between border-b border-neutral-300 bg-neutral-50 py-1 pl-3 pr-5 text-left text-neutral-900"
+            {...props}
+        >
+            {({ open }) => (
+                <>
+                    {children}
+                    <ChevronDownIcon
+                        className={classNames("h-3 w-3", open && "rotate-180 transform")}
+                    />
+                </>
+            )}
+        </HeadlessUiDisclosure.Button>
+    );
+};
+
+const Disclosure = ({ children }: { children: React.ReactNode }) => {
+    return <HeadlessUiDisclosure>{children}</HeadlessUiDisclosure>;
+};
+
+Disclosure.Button = DisclosureButton;
+Disclosure.Panel = DisclosurePanel;
+
+export { Disclosure };

src/components/disclosure/index.tsx

@@ -0,0 +1 @@
+export { Disclosure } from "./disclosure";

src/components/index.ts

@@ -28,3 +28,4 @@ export { Toast } from "./toast";
 export { Toggle } from "./toggle";
 export { Tooltip } from "./tooltip";
 export { TopBar } from "./top-bar";
+export { Disclosure } from "./disclosure";