added stories for paragraph

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
+      }
     }
   }
 };

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

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'
+  }
+};

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