From 9892d15a5476a39cebda8b31e2407c7101956d78 Mon Sep 17 00:00:00 2001
From: ynguyen2k2 <73071640+ynguyen2k2@users.noreply.github.com>
Date: Tue, 14 May 2024 06:29:05 +0700
Subject: [PATCH] feat: (#51) add label story (#68)

---
 packages/ui/src/stories/label.stories.tsx | 37 +++++++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 packages/ui/src/stories/label.stories.tsx

diff --git a/packages/ui/src/stories/label.stories.tsx b/packages/ui/src/stories/label.stories.tsx
new file mode 100644
index 0000000..67696a3
--- /dev/null
+++ b/packages/ui/src/stories/label.stories.tsx
@@ -0,0 +1,37 @@
+import { fn } from '@storybook/test';
+
+import { Label } from '../label';
+import { Checkbox } from '../checkbox';
+import { Meta, StoryObj } from '@storybook/react';
+function LabelDemo() {
+	return (
+		<div>
+			<div className='flex items-center space-x-2'>
+				<Checkbox id='terms' />
+				<Label htmlFor='terms'>Accept terms and conditions</Label>
+			</div>
+		</div>
+	);
+}
+
+const meta = {
+	title: 'CODERUM/Label',
+	component: LabelDemo,
+	parameters: {
+		// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+		layout: 'centered',
+	},
+	// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+	tags: ['autodocs'],
+
+	// Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+	args: { onClick: fn() },
+} satisfies Meta<typeof LabelDemo>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const LabelExample: Story = {
+	args: {
+		htmlFor: 'terms',
+	},
+};