import { Meta, Canvas, Story, SourceState } from "@storybook/blocks";
import { ComponentHeading } from "../../storybook-components";
import { Heading } from "./Heading";

<Meta title="Components/Typography/Heading" component={Heading} />

<ComponentHeading
  componentName="Heading"
  description="Provides statics for heading levels 1-6"
  sourcePath="src/components/Heading/Heading.tsx"
/>

## Installation

```jsx
import { Heading } from "@conveyorhq/arrow-ds";
```

## Basic usage

<Canvas withSource={SourceState.OPEN}>
  <Story name="Heading">
    <Heading.H1>Heading 1</Heading.H1>
  </Story>
</Canvas>

## API

Extends `HTMLHeadingElement`

## Demos

### H1

<Canvas withSource={SourceState.OPEN}>
  <Story name="Heading h1">
    <Heading.H1>The quick brown fox jumps over the lazy dog</Heading.H1>
  </Story>
</Canvas>

### H2

<Canvas withSource={SourceState.OPEN}>
  <Story name="Heading h2">
    <Heading.H2>The quick brown fox jumps over the lazy dog</Heading.H2>
  </Story>
</Canvas>

### H3

<Canvas withSource={SourceState.OPEN}>
  <Story name="Heading h3">
    <Heading.H3>The quick brown fox jumps over the lazy dog</Heading.H3>
  </Story>
</Canvas>

### H4

<Canvas withSource={SourceState.OPEN}>
  <Story name="Heading h4">
    <Heading.H4>The quick brown fox jumps over the lazy dog</Heading.H4>
  </Story>
</Canvas>

### H5

<Canvas withSource={SourceState.OPEN}>
  <Story name="Heading h5">
    <Heading.H5>The quick brown fox jumps over the lazy dog</Heading.H5>
  </Story>
</Canvas>

### H6

<Canvas withSource={SourceState.OPEN}>
  <Story name="Heading h6">
    <Heading.H6>The quick brown fox jumps over the lazy dog</Heading.H6>
  </Story>
</Canvas>