From 4b3f795e0c15739f8d5810aef3c2e29e3f718ecf Mon Sep 17 00:00:00 2001
From: Umar Abid <75561750+umrkhn@users.noreply.github.com>
Date: Thu, 30 Nov 2023 22:19:54 +0500
Subject: [PATCH] feat: add checkbox component to storybook

---
 .../components/checkbox/Checkbox.stories.tsx  | 27 +++++++++++++++++++
 dashboard/components/checkbox/Checkbox.tsx    |  2 +-
 2 files changed, 28 insertions(+), 1 deletion(-)
 create mode 100644 dashboard/components/checkbox/Checkbox.stories.tsx

diff --git a/dashboard/components/checkbox/Checkbox.stories.tsx b/dashboard/components/checkbox/Checkbox.stories.tsx
new file mode 100644
index 000000000..9b3d7c7b3
--- /dev/null
+++ b/dashboard/components/checkbox/Checkbox.stories.tsx
@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Checkbox from './Checkbox';
+
+const meta: Meta<typeof Checkbox> = {
+  title: 'Komiser/Checkbox',
+  component: Checkbox,
+  tags: ['autodocs']
+};
+
+export default meta;
+type Story = StoryObj<typeof Checkbox>;
+
+export const Default: Story = {
+  args: {
+    id: 'checkbox',
+    checked: false,
+    onChange: () => {}
+  }
+};
+
+export const Checked: Story = {
+  args: {
+    id: 'checkbox',
+    checked: true,
+    onChange: () => {}
+  }
+};
diff --git a/dashboard/components/checkbox/Checkbox.tsx b/dashboard/components/checkbox/Checkbox.tsx
index 142bda9b2..a49b8c80b 100644
--- a/dashboard/components/checkbox/Checkbox.tsx
+++ b/dashboard/components/checkbox/Checkbox.tsx
@@ -13,7 +13,7 @@ function Checkbox({ id, checked, onChange }: CheckboxProps) {
       checked={checked}
       onChange={onChange}
       type="checkbox"
-      className="grid h-4 w-4 appearance-none place-content-center rounded border-2 border-gray-300 bg-transparent before:h-[1rem] before:w-[1rem] before:origin-bottom-left before:scale-0 before:shadow-[inset_1rem_1rem_#fff] before:content-[''] before:[clip-path:polygon(28%_38%,41%_53%,75%_24%,86%_38%,40%_78%,15%_50%)] checked:border-darkcyan-500 checked:bg-darkcyan-500 checked:before:scale-100 hover:border-gray-400 checked:hover:border-transparent checked:hover:bg-darkcyan-700"
+      className="grid h-4 w-4 appearance-none place-content-center rounded border-2 border-gray-200 bg-transparent before:h-[1rem] before:w-[1rem] before:origin-bottom-left before:scale-0 before:shadow-[inset_1rem_1rem_#fff] before:content-[''] before:[clip-path:polygon(28%_38%,41%_53%,75%_24%,86%_38%,40%_78%,15%_50%)] checked:border-darkcyan-500 checked:bg-darkcyan-500 checked:before:scale-100 hover:border-gray-400 checked:hover:border-transparent checked:hover:bg-darkcyan-700"
     />
   );
 }