import { ArgsTable, Meta, Story } from "@storybook/addon-docs";
import { ComponentInfo, Preview } from "@stories/components";
import { Dot, InnerDot } from "@components/dot";
import { Inline } from "@components/layout";

<Meta
    title="Components/Dot"
    id="dot"
/>

# Dot

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

## Usage

### Default

A default dot.

<Preview>
    <Story name="default">
        <Dot color="alias-accent" />
    </Story>
</Preview>

### Label

A dot can have a label.

<Preview>
    <Story name="label">
        <Dot color="alias-hard-break">Habitable</Dot>
    </Story>
</Preview>

### Color

A dot color can vary.

You can use a color name from our Orbit design system (e.g. `alias-2`, `--o-ui-accent-6`), an hexadecimal color code (e.g. `#c5cac8`), an `hsl`, an `hsla`, a `rgb` or a `rgba` color code.

<Preview>
    <Story name="color">
        <Inline>
            <Dot color="alias-hard-break">Habitable</Dot>
            <Dot color="hsl(25, 69%, 41%)">Uninhabitable</Dot>
            <Dot color="--o-ui-accent-6">Clean</Dot>
        </Inline>
    </Story>
</Preview>

## API

### Dot

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

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