import { ArgsTable, Meta, Story } from "@storybook/addon-docs";
import { ComponentInfo, Preview, Tagline } from "@stories/components";
import { Illustration, InnerIllustration } from "@components/illustration";
import { Image } from "@components/image";
import { Planet } from "./assets";

<Meta
    title="Components/Illustration"
    id="illustration"
/>

# Illustration

<Tagline>An illustration compose an image with a background color. Use an illustration as an hero in a modal.</Tagline>

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

## Usage

### Default

An illustration renders horizontally by default.

<Preview scope={{ Planet }}>
    <Story name="default">
        <Illustration backgroundColor="alias-accent-light" height={14} padding={4}>
            <Image src={Planet} stroke="alias-primary" />
        </Illustration>
    </Story>
</Preview>

### Vertical

An illustration can render vertically.

<Preview scope={{ Planet }} height={18}>
    <Story name="vertical">
        <Illustration orientation="vertical" backgroundColor="alias-accent-light" width={14} padding={4}>
            <Image src={Planet} alt="Planet over another planet" />
        </Illustration>
    </Story>
</Preview>

### Shape

An illustration can have a `rounded` shape.

<Preview scope={{ Planet }}>
    <Story name="shape">
        <Illustration shape="rounded" backgroundColor="alias-accent-light">
            <Image src={Planet} alt="Planet over another planet" />
        </Illustration>
    </Story>
</Preview>

## API

### Illustration

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

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