creating Text and Heading components

packages/docs/src/stories/Box.stories.tsx

@@ -1,4 +1,4 @@
-import { Box, BoxProps } from '@ignite-ui/react';
+import { Box, BoxProps, Text } from '@ignite-ui/react';
 import { StoryObj, Meta } from '@storybook/react';
 
 export default {
@@ -7,7 +7,7 @@ export default {
   args: {
     children: (
       <>
-        <span>Box component children</span>
+        <Text>Box component children</Text>
       </>
     ),
   },

packages/docs/src/stories/Heading.stories.tsx

@@ -0,0 +1,28 @@
+import { Heading, HeadingProps } from '@ignite-ui/react';
+import { Meta, StoryObj } from '@storybook/react';
+
+export default {
+  title: 'Typography/Heading',
+  component: Heading,
+  args: {
+    children:
+      'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quaerat, nisi suscipit. Placeat sapiente, amet, laborum facere sed at illo explicabo obcaecati necessitatibus cumque similique voluptate fuga quod nemo perspiciatis eveniet?',
+  },
+} as Meta<HeadingProps>;
+
+export const Primary: StoryObj<HeadingProps> = {};
+
+export const CustomTag: StoryObj<HeadingProps> = {
+  args: {
+    children: 'H1 Heading',
+    as: 'h1',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'By default, the Heading component is an h2, but it can be used as any other heading tag by passing the desired heading tag to the as props',
+      },
+    },
+  },
+};

packages/docs/src/stories/Text.stories.tsx

@@ -0,0 +1,20 @@
+import { Text, TextProps } from '@ignite-ui/react';
+import { Meta, StoryObj } from '@storybook/react';
+
+export default {
+  title: 'Typography/Text',
+  component: Text,
+  args: {
+    children:
+      'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quaerat, nisi suscipit. Placeat sapiente, amet, laborum facere sed at illo explicabo obcaecati necessitatibus cumque similique voluptate fuga quod nemo perspiciatis eveniet?',
+  },
+} as Meta<TextProps>;
+
+export const Primary: StoryObj<TextProps> = {};
+
+export const CustomTag: StoryObj<TextProps> = {
+  args: {
+    children: 'Strong text',
+    as: 'strong',
+  },
+};