@windstream/react-shared-components 0.1.26 → 0.1.27

package/src/components/text/Text.stories.tsx

@@ -1,321 +1,321 @@
-import { Text } from "./index";
-
-import { DocsPage } from "@shared/stories/DocsTemplate";
-import type { Meta, StoryObj } from "@storybook/react";
-
-const meta: Meta<typeof Text> = {
-  title: "Components/Text",
-  component: Text,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "centered",
-    docs: {
-      page: DocsPage,
-      description: {
-        component:
-          "A flexible text component with multiple typography variants and semantic elements.",
-      },
-    },
-  },
-  argTypes: {
-    as: {
-      control: { type: "select" },
-      options: [
-        "h1",
-        "h2",
-        "h3",
-        "h4",
-        "h5",
-        "h6",
-        "p",
-        "span",
-        "div",
-        "label",
-      ],
-      description: "HTML element to render",
-    },
-    className: {
-      control: { type: "text" },
-      description:
-        "Additional CSS classes (use typography classes like body1, heading1, etc.)",
-    },
-    children: {
-      control: { type: "text" },
-      description: "Text content",
-    },
-  },
-  args: {
-    children: "Sample text content",
-    className: "body1",
-    as: "p",
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Default text
-export const Default: Story = {
-  args: {},
-};
-
-// Headings
-export const Headings: Story = {
-  render: () => (
-    <div className="space-y-4">
-      <Text as="h1" className="heading1">
-        Heading 1
-      </Text>
-      <Text as="h2" className="heading2">
-        Heading 2
-      </Text>
-      <Text as="h3" className="heading3">
-        Heading 3
-      </Text>
-      <Text as="h4" className="heading4">
-        Heading 4
-      </Text>
-      <Text as="h5" className="heading5">
-        Heading 5
-      </Text>
-      <Text as="h6" className="heading6">
-        Heading 6
-      </Text>
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: "All heading variants with appropriate semantic HTML elements.",
-      },
-    },
-  },
-};
-
-// Subheadings
-export const Subheadings: Story = {
-  render: () => (
-    <div className="space-y-4">
-      <Text className="subheading1">Subheading 1</Text>
-      <Text className="subheading2">Subheading 2</Text>
-      <Text className="subheading3">Subheading 3</Text>
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: "All subheading variants.",
-      },
-    },
-  },
-};
-
-// Body text
-export const BodyText: Story = {
-  render: () => (
-    <div className="space-y-4">
-      <Text className="body1">
-        Body 1 text is used for the main content of your application. It
-        provides good readability and is suitable for paragraphs and longer text
-        content.
-      </Text>
-      <Text className="body2">
-        Body 2 text is slightly smaller and can be used for secondary content,
-        descriptions, or supporting text that doesn't need as much emphasis.
-      </Text>
-      <Text className="body3">
-        Body 3 text is the smallest body variant, perfect for fine print,
-        captions, or less important information.
-      </Text>
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: "Body text variants for different content hierarchy levels.",
-      },
-    },
-  },
-};
-
-// Labels
-export const Labels: Story = {
-  render: () => (
-    <div className="space-y-4">
-      <div>
-        <Text as="label" className="body1 mb-2 block">
-          Label 1
-        </Text>
-        <input
-          type="text"
-          className="rounded border px-3 py-2"
-          placeholder="Input with label"
-        />
-      </div>
-      <div>
-        <Text as="label" className="body2 mb-2 block">
-          Label 2
-        </Text>
-        <input
-          type="text"
-          className="rounded border px-3 py-2"
-          placeholder="Input with label"
-        />
-      </div>
-      <div>
-        <Text as="label" className="body3 mb-2 block">
-          Label 3
-        </Text>
-        <input
-          type="text"
-          className="rounded border px-3 py-2"
-          placeholder="Input with label"
-        />
-      </div>
-      <div>
-        <Text as="label" className="footnote mb-2 block">
-          Label 4
-        </Text>
-        <input
-          type="text"
-          className="rounded border px-3 py-2"
-          placeholder="Input with label"
-        />
-      </div>
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: "Label variants commonly used with form inputs.",
-      },
-    },
-  },
-};
-
-// Utility text
-export const UtilityText: Story = {
-  render: () => (
-    <div className="space-y-4">
-      <Text className="footnote">
-        Footnote text is used for additional information, citations, or less
-        important details.
-      </Text>
-      <Text className="micro">
-        Micro text is the smallest text variant, perfect for timestamps, version
-        numbers, or other very small information.
-      </Text>
-      <Text className="unstyled">
-        Unstyled text inherits all styling from its parent element.
-      </Text>
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: "Utility text variants for specific use cases.",
-      },
-    },
-  },
-};
-
-// Semantic elements
-export const SemanticElements: Story = {
-  render: () => (
-    <div className="space-y-4">
-      <Text as="h1" className="heading1">
-        Main Page Title
-      </Text>
-      <Text as="h2" className="heading2">
-        Page Description
-      </Text>
-      <Text as="p" className="body1">
-        This is a paragraph element that provides the main content of the page.
-        It demonstrates how the Text component can be used with semantic HTML
-        elements.
-      </Text>
-      <Text as="label" className="body1 block">
-        Form Label
-      </Text>
-      <Text as="span" className="footnote">
-        Additional information
-      </Text>
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Examples of using different semantic HTML elements with the Text component.",
-      },
-    },
-  },
-};
-
-// All variants showcase
-export const AllVariants: Story = {
-  render: () => (
-    <div className="max-w-4xl space-y-6">
-      <div>
-        <h3 className="mb-3 text-lg font-semibold">Headings</h3>
-        <div className="space-y-2">
-          <Text as="h1" className="heading1">
-            Heading 1
-          </Text>
-          <Text as="h2" className="heading2">
-            Heading 2
-          </Text>
-          <Text as="h3" className="heading3">
-            Heading 3
-          </Text>
-        </div>
-      </div>
-
-      <div>
-        <h3 className="mb-3 text-lg font-semibold">Body Text</h3>
-        <div className="space-y-2">
-          <Text as="p" className="body1">
-            Body 1 - Main content text
-          </Text>
-          <Text as="p" className="body2">
-            Body 2 - Secondary content text
-          </Text>
-          <Text as="p" className="body3">
-            Body 3 - Smaller content text
-          </Text>
-        </div>
-      </div>
-
-      <div>
-        <h3 className="mb-3 text-lg font-semibold">Labels</h3>
-        <div className="space-y-2">
-          <Text as="label" className="body1">
-            Label 1
-          </Text>
-          <Text as="label" className="body2">
-            Label 2
-          </Text>
-          <Text as="label" className="body3">
-            Label 3
-          </Text>
-          <Text className="footnote">Label 4</Text>
-        </div>
-      </div>
-
-      <div>
-        <h3 className="mb-3 text-lg font-semibold">Utility</h3>
-        <div className="space-y-2">
-          <Text className="footnote">Footnote text</Text>
-          <Text className="micro">Micro text</Text>
-        </div>
-      </div>
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: "Complete showcase of all text variants in organized sections.",
-      },
-    },
-  },
-};
+import { Text } from "./index";
+
+import { DocsPage } from "@shared/stories/DocsTemplate";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Text> = {
+  title: "Components/Text",
+  component: Text,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component:
+          "A flexible text component with multiple typography variants and semantic elements.",
+      },
+    },
+  },
+  argTypes: {
+    as: {
+      control: { type: "select" },
+      options: [
+        "h1",
+        "h2",
+        "h3",
+        "h4",
+        "h5",
+        "h6",
+        "p",
+        "span",
+        "div",
+        "label",
+      ],
+      description: "HTML element to render",
+    },
+    className: {
+      control: { type: "text" },
+      description:
+        "Additional CSS classes (use typography classes like body1, heading1, etc.)",
+    },
+    children: {
+      control: { type: "text" },
+      description: "Text content",
+    },
+  },
+  args: {
+    children: "Sample text content",
+    className: "body1",
+    as: "p",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default text
+export const Default: Story = {
+  args: {},
+};
+
+// Headings
+export const Headings: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <Text as="h1" className="heading1">
+        Heading 1
+      </Text>
+      <Text as="h2" className="heading2">
+        Heading 2
+      </Text>
+      <Text as="h3" className="heading3">
+        Heading 3
+      </Text>
+      <Text as="h4" className="heading4">
+        Heading 4
+      </Text>
+      <Text as="h5" className="heading5">
+        Heading 5
+      </Text>
+      <Text as="h6" className="heading6">
+        Heading 6
+      </Text>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "All heading variants with appropriate semantic HTML elements.",
+      },
+    },
+  },
+};
+
+// Subheadings
+export const Subheadings: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <Text className="subheading1">Subheading 1</Text>
+      <Text className="subheading2">Subheading 2</Text>
+      <Text className="subheading3">Subheading 3</Text>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "All subheading variants.",
+      },
+    },
+  },
+};
+
+// Body text
+export const BodyText: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <Text className="body1">
+        Body 1 text is used for the main content of your application. It
+        provides good readability and is suitable for paragraphs and longer text
+        content.
+      </Text>
+      <Text className="body2">
+        Body 2 text is slightly smaller and can be used for secondary content,
+        descriptions, or supporting text that doesn't need as much emphasis.
+      </Text>
+      <Text className="body3">
+        Body 3 text is the smallest body variant, perfect for fine print,
+        captions, or less important information.
+      </Text>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Body text variants for different content hierarchy levels.",
+      },
+    },
+  },
+};
+
+// Labels
+export const Labels: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div>
+        <Text as="label" className="body1 mb-2 block">
+          Label 1
+        </Text>
+        <input
+          type="text"
+          className="rounded border px-3 py-2"
+          placeholder="Input with label"
+        />
+      </div>
+      <div>
+        <Text as="label" className="body2 mb-2 block">
+          Label 2
+        </Text>
+        <input
+          type="text"
+          className="rounded border px-3 py-2"
+          placeholder="Input with label"
+        />
+      </div>
+      <div>
+        <Text as="label" className="body3 mb-2 block">
+          Label 3
+        </Text>
+        <input
+          type="text"
+          className="rounded border px-3 py-2"
+          placeholder="Input with label"
+        />
+      </div>
+      <div>
+        <Text as="label" className="footnote mb-2 block">
+          Label 4
+        </Text>
+        <input
+          type="text"
+          className="rounded border px-3 py-2"
+          placeholder="Input with label"
+        />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Label variants commonly used with form inputs.",
+      },
+    },
+  },
+};
+
+// Utility text
+export const UtilityText: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <Text className="footnote">
+        Footnote text is used for additional information, citations, or less
+        important details.
+      </Text>
+      <Text className="micro">
+        Micro text is the smallest text variant, perfect for timestamps, version
+        numbers, or other very small information.
+      </Text>
+      <Text className="unstyled">
+        Unstyled text inherits all styling from its parent element.
+      </Text>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Utility text variants for specific use cases.",
+      },
+    },
+  },
+};
+
+// Semantic elements
+export const SemanticElements: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <Text as="h1" className="heading1">
+        Main Page Title
+      </Text>
+      <Text as="h2" className="heading2">
+        Page Description
+      </Text>
+      <Text as="p" className="body1">
+        This is a paragraph element that provides the main content of the page.
+        It demonstrates how the Text component can be used with semantic HTML
+        elements.
+      </Text>
+      <Text as="label" className="body1 block">
+        Form Label
+      </Text>
+      <Text as="span" className="footnote">
+        Additional information
+      </Text>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Examples of using different semantic HTML elements with the Text component.",
+      },
+    },
+  },
+};
+
+// All variants showcase
+export const AllVariants: Story = {
+  render: () => (
+    <div className="max-w-4xl space-y-6">
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">Headings</h3>
+        <div className="space-y-2">
+          <Text as="h1" className="heading1">
+            Heading 1
+          </Text>
+          <Text as="h2" className="heading2">
+            Heading 2
+          </Text>
+          <Text as="h3" className="heading3">
+            Heading 3
+          </Text>
+        </div>
+      </div>
+
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">Body Text</h3>
+        <div className="space-y-2">
+          <Text as="p" className="body1">
+            Body 1 - Main content text
+          </Text>
+          <Text as="p" className="body2">
+            Body 2 - Secondary content text
+          </Text>
+          <Text as="p" className="body3">
+            Body 3 - Smaller content text
+          </Text>
+        </div>
+      </div>
+
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">Labels</h3>
+        <div className="space-y-2">
+          <Text as="label" className="body1">
+            Label 1
+          </Text>
+          <Text as="label" className="body2">
+            Label 2
+          </Text>
+          <Text as="label" className="body3">
+            Label 3
+          </Text>
+          <Text className="footnote">Label 4</Text>
+        </div>
+      </div>
+
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">Utility</h3>
+        <div className="space-y-2">
+          <Text className="footnote">Footnote text</Text>
+          <Text className="micro">Micro text</Text>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Complete showcase of all text variants in organized sections.",
+      },
+    },
+  },
+};