import { ArgsTable, Meta, Story } from "@storybook/addon-docs";
import { ComponentInfo, Preview, Tagline } from "@stories/components";
import { H1, H2, H3, H4, H5, H6, Heading, InnerHeading } from "@components/typography";

<Meta
    title="Components/Heading"
    id="heading"
/>

# Heading

<Tagline>Heading is used to create various levels of typographic hierarchies.</Tagline>

<ComponentInfo
    usage={"import { Heading, H1, H2, H3, H4, H5, H6 } from \"@sharegate/orbit-ui\";"}
    githubPath="/packages/components/src/heading/src"
/>

## Usage

### Default

A default heading will render as a `<div>` element.

<Preview>
    <Story name="default">
        <Heading>Houston, Tranquillity Base here. The Eagle has landed.</Heading>
    </Story>
</Preview>

### Heading elements

For most cases, we recommend using HTML content sectionning heading elements instead of a `<div>`. Orbit help by offering specialized heading components `<H1>`, `<H2>`, `<H3>`, `<H4>`, `<H5>`, `<H6>`.

<Preview>
    <Story name="heading elements">
        <>
            <H1>Houston, Tranquillity Base here. The Eagle has landed.</H1>
            <H2>Houston, Tranquillity Base here. The Eagle has landed.</H2>
            <H3>Houston, Tranquillity Base here. The Eagle has landed.</H3>
            <H4>Houston, Tranquillity Base here. The Eagle has landed.</H4>
            <H5>Houston, Tranquillity Base here. The Eagle has landed.</H5>
            <H6>Houston, Tranquillity Base here. The Eagle has landed.</H6>
        </>
    </Story>
</Preview>

### Size

You can alter the size of an heading component by specifying a `size` prop.

<Preview>
    <Story name="size">
        <>
            <Heading>Houston, Tranquillity Base here. The Eagle has landed.</Heading>
            <H2 size="sm">Houston, Tranquillity Base here. The Eagle has landed.</H2>
        </>
    </Story>
</Preview>

## API

### Heading, H1, H2, H3, H4, H5, H6

<ComponentInfo
    usage={"import { Heading, H1, H2, H3, H4, H5, H6 } from \"@sharegate/orbit-ui\";"}
    inherits={[InnerHeading.defaultElement, "styled-component"]}
    compact
/>

<ArgsTable of={InnerHeading} sort="alpha" />
