import { ArgsTable, Meta, Story } from "@storybook/addon-docs";
import { Badge, InnerBadge } from "@components/badge";
import { PlaceholderMajorIcon } from "@components/icons";
import { Circle } from "./Circle.jsx";
import { ComponentInfo, Preview, Tagline } from "@stories/components";
import { Inline } from "@components/layout";
import { Square } from "./Square.jsx";
import { Text } from "@components/typography";

<Meta
    title="Components/Badge"
    id="badge"
/>

# Badge

<Tagline>A badge is a floating component displaying a notification such as a count.</Tagline>

<ComponentInfo
    usage={"import { Badge, Text } from \"@sharegate/orbit-ui\";"}
    githubPath="/packages/components/src/badge/src"
/>

## Usage

### Default

A default badge.

<Preview scope={{ Square }}>
    <Story name="default">
        <Inline gap={8} alignY="center">
            <Badge>
                <Text>5</Text>
                <Square />
            </Badge>
            <Badge>
                <Text>5+</Text>
                <Square />
            </Badge>
            <Badge>
                <Text>50</Text>
                <Square />
            </Badge>
            <Badge>
                <Text>500</Text>
                <Square />
            </Badge>
        </Inline>
    </Story>
</Preview>

### Dot

A badge can be rendered as a dot. A single digit is supported.

<Preview scope={{ Circle }}>
    <Story name="dot">
        <Inline gap={8} alignY="center">
            <Badge variant="dot" overlap="circle">
                <Circle />
            </Badge>
            <Badge variant="dot" overlap="icon">
                <PlaceholderMajorIcon/>
            </Badge>
            <Badge variant="dot">
                Notifications
            </Badge>
        </Inline>
    </Story>
</Preview>

### Icon

A badge can be an [icon](?path=/docs/icon-gallery--page).

<Preview scope={{ Circle }}>
    <Story name="icon">
        <Badge variant="icon" overlap="circle">
            <PlaceholderMajorIcon />
            <Circle />
        </Badge>
    </Story>
</Preview>

### Overlap

A badge can overlap over elements with different shape.

<Preview scope={{ Square, Circle }}>
    <Story name="overlap">
        <Inline gap={13} alignY="center">
            <Inline gap={8}>
                <Badge>
                    <Text>100</Text>
                    <Square />
                </Badge>
                <Badge variant="dot">
                    <Square />
                </Badge>
                <Badge variant="icon">
                    <PlaceholderMajorIcon />
                    <Square />
                </Badge>
            </Inline>
            <Inline gap={8}>
                <Badge overlap="circle">
                    <Text>100</Text>
                    <Circle />
                </Badge>
                <Badge variant="dot" overlap="circle">
                    <Circle />
                </Badge>
                <Badge variant="icon" overlap="circle">
                    <PlaceholderMajorIcon />
                    <Circle />
                </Badge>
            </Inline>
            <Inline gap={8}>
                <Badge variant="dot" overlap="icon">
                    <PlaceholderMajorIcon/>
                </Badge>
            </Inline>
        </Inline>
    </Story>
</Preview>

## API

### Badge

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

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