import { Meta, Story, Canvas, ArgsTable } from "@storybook/addon-docs/blocks";
import {
  Heading,
  HeadingVariants,
  HeadingSizes
} from "foundations/components/presentation";

<Meta
  title="Basic Presentation/Heading"
  component={Heading}
  argTypes={{
    variant: { control: { type: "select", options: HeadingVariants } },
    size: { control: { type: "select", options: HeadingSizes } }
  }}
/>

# Heading

#### A typography component representing section titles.

<br />
<br />
<br />

## Interactive props

export const Template = args => <Heading {...args} />;

<Canvas>
  <Story name="Default" args={{ children: "Interactive Heading" }}>
    {Template.bind({})}
  </Story>
</Canvas>

<ArgsTable story="Default" />

## Usage examples

<br />
<br />

### Sizes

<Canvas>
  <Story
    name="Sizes"
    args={{ children: "Big Heading", size: HeadingSizes.BIG }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

```jsx
<Heading size={HeadingSizes.BIG}>Big Heading</Heading>
```

### Variants

<Canvas>
  <Story
    name="Variants"
    args={{ children: "Inverse Heading", variant: HeadingVariants.INVERSE }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

```jsx
<Heading variant={HeadingVariants.INVERSE}>Inverse Heading</Heading>
```
