import { ArgsTable, Meta, Story } from "@storybook/addon-docs";
import { ComponentInfo, Preview, Tagline } from "@stories/components";
import { Header, InnerHeader } from "@components/placeholders";

<Meta
    title="Placeholders/Header"
    id="header"
/>

# Header

<Tagline>A placeholder for an header section.</Tagline>

<ComponentInfo
    usage={"import { Header } from \"@sharegate/orbit-ui\";"}
    githubPath="/packages/components/src/placeholders/src"
/>

## Usage

An header placeholder component *provides no specific styling by itself, but receives styling from the parent container*. In addition, an header placeholder will be automatically placed within the container's layout according to Orbit guidelines.

<Preview>
    <Story name="example">
        <Header>We are the light that travels into space.</Header>
    </Story>
</Preview>

## API

### Header

<ComponentInfo
    usage={"import { Header } from \"@sharegate/orbit-ui\";"}
    inherits={[InnerHeader.defaultElement, "styled-component"]}
    compact
/>

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