import { ArgsTable, Meta, Story } from "@storybook/addon-docs";
import { ComponentInfo, Preview, Tagline } from "@stories/components";
import { Counter, InnerCounter } from "@components/counter";
import { Div } from "@components/html";
import { Inline } from "@components/layout";
import { Text } from "@components/typography";

<Meta
    title="Components/Counter"
    id="counter"
/>

# Counter

<Tagline>A counter indicate a running tally.</Tagline>

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

## Guidelines

### When to use

- When you need to complement the content of another component such as a [tag](?path=/docs/tag--default-story) or a [checkbox](?path=/docs/checkbox--default-story).

### Content

- Only use numeric values.
- If you need to display a number above 99, use “99+” instead of the number unless the number is important to the user’s objectives.

## Usage

### Default

A default counter.

<Preview>
    <Story name="default">
        <Counter>15</Counter>
    </Story>
</Preview>

### Divider

A counter can be rendered as a divider.

<Preview>
    <Story name="divider">
        <Inline alignY="center">
            <Counter variant="divider">100+</Counter>
        </Inline>
    </Story>
</Preview>

### Highlight

A counter value can be highlighted.

<Preview>
    <Story name="highlight">
        <Inline gap={10} alignY="center">
            <Counter highlight>15</Counter>
            <Counter highlight variant="divider">100+</Counter>
        </Inline>
    </Story>
</Preview>

### Pushed

A counter can pushed itself away from content.

<Preview>
    <Story name="pushed">
        <Inline gap={10} alignY="center">
            <Div>
                <Text>Satellites</Text> <Counter pushed>15</Counter>
            </Div>
            <Div>
                <Text>Satellites</Text> <Counter pushed variant="divider">100+</Counter>
            </Div>
        </Inline>
    </Story>
</Preview>

## API

### Counter

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

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

