From 31107f5e1e5f5e23fb6d8a1d59b91c3ba5c084b9 Mon Sep 17 00:00:00 2001
From: Larocca <Larocca@RIVPRO1.net>
Date: Thu, 7 Nov 2024 12:21:40 -0500
Subject: [PATCH] Docs: Story for the Alert component #645

Docs: Add Alert Story (#645)\n\n- [x] Wrote a Story for the Alert component.\n\nCloses #645
---
 components/Alert/Alert.stories.tsx | 62 ++++++++++++++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 components/Alert/Alert.stories.tsx

diff --git a/components/Alert/Alert.stories.tsx b/components/Alert/Alert.stories.tsx
new file mode 100644
index 00000000..1c1f898e
--- /dev/null
+++ b/components/Alert/Alert.stories.tsx
@@ -0,0 +1,62 @@
+// Copyright (c) Gridiron Survivor.
+// Licensed under the MIT License.
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { Alert } from './Alert';
+
+const meta: Meta<typeof Alert> = {
+  title: 'Components/Alert',
+  component: Alert,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `The Alert component is a versatile UI element designed to display important messages to users. It is built to handle various types of alerts, each with its own visual style to convey different levels of importance or types of information.`,
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      options: ['default', 'error', 'warning', 'success'],
+      control: { type: 'radio' },
+      description: 'The variant of the alert.',
+    },
+    children: {
+      description: 'Content of the alert message.',
+    },
+  },
+  args: {
+    children: 'This is an alert message',
+  },
+} satisfies Meta<typeof Alert>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    variant: 'default',
+  },
+};
+
+export const Error: Story = {
+  args: {
+    variant: 'error',
+    children: 'This is an error alert',
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    variant: 'warning',
+    children: 'This is a warning alert',
+  },
+};
+
+export const Success: Story = {
+  args: {
+    variant: 'success',
+    children: 'This is a success alert',
+  },
+};
\ No newline at end of file