web/packages/design-system/lib/components/Typography/Typography.stories.tsx

import type { Meta, StoryObj } from "@storybook/nextjs-vite"

import { Typography } from "./Typography.tsx"

import TypographyDocs from "./Typography.docs.mdx"

import { config as typographyConfig } from "./variants"

const meta: Meta<typeof Typography> = {
  title: "Core Components/Typography",
  component: Typography,
  args: { variant: typographyConfig.defaultVariants.variant },
  argTypes: {
    variant: {
      control: "select",
      options: Object.keys(typographyConfig.variants.variant),
      table: {
        defaultValue: { summary: typographyConfig.defaultVariants.variant },
      },
    },
  },
  parameters: { docs: { toc: true, page: TypographyDocs } },
}

export default meta

type Story = StoryObj<typeof Typography>

export const TitleLg: Story = {
  name: "Title/lg",
  args: {
    variant: "Title/lg",
    children: <h1>The quick brown fox jumps over the lazy dog</h1>,
  },
}
export const TitleMd: Story = {
  name: "Title/md",
  args: {
    variant: "Title/md",
    children: <h1>The quick brown fox jumps over the lazy dog</h1>,
  },
}
export const TitleMdLowCase: Story = {
  name: "Title/mdLowCase",
  args: {
    variant: "Title/mdLowCase",
    children: <h1>The quick brown fox jumps over the lazy dog</h1>,
  },
}
export const TitleSm: Story = {
  name: "Title/sm",
  args: {
    variant: "Title/sm",
    children: <h1>The quick brown fox jumps over the lazy dog</h1>,
  },
}
export const TitleSmLowCase: Story = {
  name: "Title/smLowCase",
  args: {
    variant: "Title/smLowCase",
    children: <h1>The quick brown fox jumps over the lazy dog</h1>,
  },
}
export const TitleXs: Story = {
  name: "Title/xs",
  args: {
    variant: "Title/xs",
    children: <h1>The quick brown fox jumps over the lazy dog</h1>,
  },
}
export const TitleDecorativeLg: Story = {
  name: "Title/Decorative/lg",
  args: {
    variant: "Title/Decorative/lg",
    children: <h1>The quick brown fox jumps over the lazy dog</h1>,
  },
}
export const TitleDecorativeMd: Story = {
  name: "Title/Decorative/md",
  args: {
    variant: "Title/Decorative/md",
    children: <h1>The quick brown fox jumps over the lazy dog</h1>,
  },
}
export const TitleSubtitleLg: Story = {
  name: "Title/Subtitle/lg",
  args: {
    variant: "Title/Subtitle/lg",
    children: <h1>The quick brown fox jumps over the lazy dog</h1>,
  },
}
export const TitleSubtitleMd: Story = {
  name: "Title/Subtitle/md",
  args: {
    variant: "Title/Subtitle/md",
    children: <h1>The quick brown fox jumps over the lazy dog</h1>,
  },
}
export const TitleOverlineSm: Story = {
  name: "Title/Overline/sm",
  args: {
    variant: "Title/Overline/sm",
    children: <h1>The quick brown fox jumps over the lazy dog</h1>,
  },
}
export const BodyLeadtext: Story = {
  name: "Body/Lead text",
  args: {
    variant: "Body/Lead text",
    children: <p>The quick brown fox jumps over the lazy dog</p>,
  },
}
export const BodyParagraphMdRegular: Story = {
  name: "Body/Paragraph/mdRegular",
  args: {
    variant: "Body/Paragraph/mdRegular",
    children: <p>The quick brown fox jumps over the lazy dog</p>,
  },
}
export const BodyParagraphMdBold: Story = {
  name: "Body/Paragraph/mdBold",
  args: {
    variant: "Body/Paragraph/mdBold",
    children: <p>The quick brown fox jumps over the lazy dog</p>,
  },
}
export const BodySupportingtextCaptionSmRegular: Story = {
  name: "Body/Supporting text (caption)/smRegular",
  args: {
    variant: "Body/Supporting text (caption)/smRegular",
    children: <p>The quick brown fox jumps over the lazy dog</p>,
  },
}
export const BodySupportingtextCaptionSmBold: Story = {
  name: "Body/Supporting text (caption)/smBold",
  args: {
    variant: "Body/Supporting text (caption)/smBold",
    children: <p>The quick brown fox jumps over the lazy dog</p>,
  },
}
export const BodyUnderlineMd: Story = {
  name: "Body/Underline/md",
  args: {
    variant: "Body/Underline/md",
    children: <p>The quick brown fox jumps over the lazy dog</p>,
  },
}
export const BodyUnderlineSm: Story = {
  name: "Body/Underline/sm",
  args: {
    variant: "Body/Underline/sm",
    children: <p>The quick brown fox jumps over the lazy dog</p>,
  },
}
export const TagSm: Story = {
  name: "Tag/sm",
  args: {
    variant: "Tag/sm",
    children: <span>The quick brown fox jumps over the lazy dog</span>,
  },
}
export const LinkMd: Story = {
  name: "Link/md",
  args: {
    variant: "Link/md",
    children: <a href="#">The quick brown fox jumps over the lazy dog</a>,
  },
}
export const LinkSm: Story = {
  name: "Link/sm",
  args: {
    variant: "Link/sm",
    children: <a href="#">The quick brown fox jumps over the lazy dog</a>,
  },
}
export const LabelXsRegular: Story = {
  name: "Label/xsRegular",
  args: {
    variant: "Label/xsRegular",
    children: <span>The quick brown fox jumps over the lazy dog</span>,
  },
}
export const LabelXsBold: Story = {
  name: "Label/xsBold",
  args: {
    variant: "Label/xsBold",
    children: <span>The quick brown fox jumps over the lazy dog</span>,
  },
}