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

import type { Meta, StoryObj } from '@storybook/react-vite'

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

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

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

const meta: Meta<typeof Typography> = {
  title: '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>,
  },
}