From 06683d8a996a9b817c83c62b727d6aad8c0751a1 Mon Sep 17 00:00:00 2001
From: devilkiller-ag <ashmitgupta.official@gmail.com>
Date: Sat, 1 Jun 2024 11:01:04 +0530
Subject: [PATCH] added stories for paragraph

---
 components/typography/Heading.stories.tsx   | 11 +++++-
 components/typography/Heading.tsx           |  3 +-
 components/typography/Paragraph.stories.tsx | 41 +++++++++++++++++++++
 components/typography/Paragraph.tsx         |  3 +-
 4 files changed, 55 insertions(+), 3 deletions(-)
 create mode 100644 components/typography/Paragraph.stories.tsx

diff --git a/components/typography/Heading.stories.tsx b/components/typography/Heading.stories.tsx
index 2d307be881f..7fb5d9b6a91 100644
--- a/components/typography/Heading.stories.tsx
+++ b/components/typography/Heading.stories.tsx
@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 
@@ -23,6 +22,16 @@ const meta: Meta<typeof Heading> = {
     },
     className: {
       control: { type: 'text' }
+    },
+    textColor: {
+      table: {
+        disable: true
+      }
+    },
+    id: {
+      table: {
+        disable: true
+      }
     }
   }
 };
diff --git a/components/typography/Heading.tsx b/components/typography/Heading.tsx
index f08ce6b0d60..97977949867 100644
--- a/components/typography/Heading.tsx
+++ b/components/typography/Heading.tsx
@@ -12,7 +12,8 @@ export interface HeadingProps {
 }
 
 /**
- * Heading
+ * Heading component is used to render a heading element with different styles and sizes.
+ *
  * @param {HeadingTypeStyle} props.typeStyle contains the type of heading style. HeadingTypeStyle.lg is default
  * @param {HeadingLevel} props.level contains the level of heading. HeadingLevel.h2 is by default
  * @param {string} props.textColor contains text color for the heading. 'text-primary-800' is by default
diff --git a/components/typography/Paragraph.stories.tsx b/components/typography/Paragraph.stories.tsx
new file mode 100644
index 00000000000..8ab626ec949
--- /dev/null
+++ b/components/typography/Paragraph.stories.tsx
@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
+
+import Paragraph from './Paragraph';
+
+const meta: Meta<typeof Paragraph> = {
+  title: 'Typography/Paragraph',
+  component: Paragraph,
+  argTypes: {
+    typeStyle: {
+      options: Object.values(ParagraphTypeStyle),
+      control: { type: 'select' }
+    },
+    textColor: {
+      control: { type: 'text' }
+    },
+    fontWeight: {
+      control: { type: 'text' }
+    },
+    children: {
+      control: { type: 'text' }
+    },
+    className: {
+      control: { type: 'text' }
+    }
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Paragraph>;
+
+export const Paragraphs: Story = {
+  args: {
+    typeStyle: ParagraphTypeStyle.lg,
+    textColor: 'text-gray-700',
+    fontWeight: '',
+    children: 'Quick brown fox jumps over the lazy dog'
+  }
+};
diff --git a/components/typography/Paragraph.tsx b/components/typography/Paragraph.tsx
index f9080b41db8..0685a318bf5 100644
--- a/components/typography/Paragraph.tsx
+++ b/components/typography/Paragraph.tsx
@@ -11,7 +11,8 @@ export interface ParagraphProps {
 }
 
 /**
- * Paragraph
+ * Paragraph component is used to render a paragraph element with different type of styles.
+ *
  * @param {ParagraphTypeStyle} props.typeStyle contains the type of paragraph style. ParagraphTypeStyle.lg is by default
  * @param {string} props.textColor contains text color for the paragraph. 'text-gray-700' is by default
  * @param {string} props.fontWeight contains class name for applying font weight in the paragraph