From 3cb6eeb139e93366f6720575717c531df38cc4a6 Mon Sep 17 00:00:00 2001
From: Jaideep <guntupallijaideep@gmail.com>
Date: Tue, 20 Jun 2023 22:04:14 +0530
Subject: [PATCH] feat: Added controls to alert storybook

---
 .../ui/components/alert/alert.stories.mdx     | 50 ++++++++++++-------
 1 file changed, 32 insertions(+), 18 deletions(-)

diff --git a/packages/ui/components/alert/alert.stories.mdx b/packages/ui/components/alert/alert.stories.mdx
index 0f2186a106..cfd93b8088 100644
--- a/packages/ui/components/alert/alert.stories.mdx
+++ b/packages/ui/components/alert/alert.stories.mdx
@@ -35,23 +35,37 @@ Each alert has a state to represent neutral, positive or negative responses.
 
 <Canvas>
   <Story
-    name="Alert">
-    <VariantsTable titles={['Default']} columnMinWidth={150}>
-      <VariantRow variant="Success">
-        <Alert severity="success" title="Summarise what happened" message="Describe what can be done about it here." />
-      </VariantRow>
-      <VariantRow variant="Warning">
-        <Alert severity="warning" title="Summarise what happened" message="Describe what can be done about it here." />
-      </VariantRow>
-      <VariantRow variant="Error">
-        <Alert severity="error" title="Summarise what happened" message="Describe what can be done about it here." />
-      </VariantRow>
-      <VariantRow variant="Neutral">
-        <Alert severity="neutral" title="Summarise what happened" message="Describe what can be done about it here." />
-      </VariantRow>
-      <VariantRow variant="Info">
-        <Alert severity="info" title="Summarise what happened" message="Describe what can be done about it here." />
-      </VariantRow>
-    </VariantsTable>
+    name="Alert"
+    args={{
+      severity: 'success',
+      title: 'Summarise what happened',
+      message: 'Describe what can be done about it here.',
+    }}
+    argTypes={{
+      severity: {
+        control: {
+          type: 'inline-radio',
+          options: ['success', 'warning', 'error', 'neutral', 'info'],
+        },
+      },
+      title: {
+        control: {
+          type: 'text'
+        }
+      },
+      message: {
+        control: {
+          type: 'text'
+        }
+      },
+    }}
+  >
+    {({ severity, title, message }) => (
+      <VariantsTable titles={['Default']} columnMinWidth={150}>
+        <VariantRow variant={severity}>
+          <Alert severity={severity} title={title} message={message} />
+        </VariantRow>
+      </VariantsTable>
+    )}
   </Story>
 </Canvas>