import {
  Canvas,
  Controls,
  Description,
  Meta,
  Source,
  Story,
  Subtitle,
  Title,
} from '@storybook/addon-docs/blocks'
import * as TypographyStories from './Typography.stories'
import { LifecycleTag, SourceLinks } from '../../docs/components'

<Meta title="Typography/Typography" of={TypographyStories} />

<Title>Typography</Title>
<Subtitle>Styles for headers, body, code, and display</Subtitle>

<LifecycleTag variant="Stable" />
<Canvas of={TypographyStories.Default} layout="padded" sourceState="shown" />
<Controls of={TypographyStories.Default} />

<div className="h-8" />

## Usage

To use typography styles in your app, import the <code>Typography</code> component and use the available props to define its appearance:

```tsx
import { Typography } from '@chainlink/blocks'

<Typography variant="h1">
  Header Text
</Typography>

<Typography variant="body-xs" color="muted">
  Body Text XS
</Typography>

<Typography variant="code">
  Code Example
</Typography>

<Typography variant="display-xl" color="brand">
  Display Text XL
</Typography>
```

<div className="h-8" />

## Element Rendering

The `Typography` component uses **semantic HTML tags** to ensure accessibility and consistent structure. By default, it renders a `<p>` element (for body, code, and display variants). However, if you use a **heading** variant (e.g., `h1`, `h2`, etc.), it will render the corresponding heading tag (`<h1>`, `<h2>`, and so on).

Since all props valid for these native HTML tags are accepted, you can use attributes like `id`, `className`, or `data-*` to further customize your typography. This design provides the flexibility of standard HTML while maintaining a consistent design system.

<div className="h-8" />

## Using Typography with Any Element

The underlying `typographyVariants` helper, powered by [CVA](https://github.com/joe-bell/cva) lets you apply consistent text styles throughout your application.

For example, here's how you could create a `<span>` that looks like your `body-semi-l` text variant in a **`success`** color:

```tsx
import { typographyVariants } from '@chainlink/blocks'

export function StyledSpan() {
  return (
    <span
      className={typographyVariants({
        variant: 'body-semi-l',
        color: 'success',
      })}
    >
      Go to Docs
    </span>
  )
}
```

Alternatively, you can set the asChild parameter and nest your component.

```tsx
import { Typography } from '@chainlink/blocks'

export function StyledSpan() {
  return (
    <Typography asChild variant="body-semi-l" color="success">
      <span>Go to Docs</span>
    </Typography>
  )
}
```

<div className="h-8" />

## `color` prop

Use the `color` prop to change the color of the text. Each color is tied to a specific semantic color token.

When translating from Figma or design specs, pass the semantic token name without the `-foreground` suffix.

Examples:

```tsx
<Typography color="progress" />
```

Maps to:

```tsx
className = 'text-progress-foreground'
```

And resolves to:

```css
var(--progress-foreground)
```

<Canvas of={TypographyStories.Colors} sourceState="shown" />

<div className="h-8" />

## Examples

### Display

<Canvas of={TypographyStories.Display} sourceState="shown" />

### Headers

<Canvas of={TypographyStories.Headers} sourceState="shown" />

### Body

<Canvas of={TypographyStories.Body} sourceState="shown" />

### Code

<Canvas of={TypographyStories.Code} sourceState="shown" />

<div className="h-8" />

### Composition

<Canvas of={TypographyStories.Composition} sourceState="shown" />

<div className="h-8" />

### Muted

A muted style for less prominent text.

<Canvas of={TypographyStories.Muted} sourceState="shown" />

### Rendering as a Different Element

You can use the `asChild` prop to render the `Typography` component as a different HTML element, while still applying the chosen typography styles. This is useful when you need to maintain semantic correctness, for example, rendering a `div` or a `span` that looks like a paragraph.

#### As a Div

<Canvas of={TypographyStories.AsDiv} sourceState="shown" />

#### As a Span

<Canvas of={TypographyStories.AsSpan} sourceState="shown" />

## All Variants

This story showcases all the available variants of the `Typography` component.

<Canvas of={TypographyStories.AllVariants} sourceState="shown" />

<div className="h-8" />

## All Colors

This story showcases all the available colors of the `Typography` component.

<div className="h-8" />