import { ArgsTable, Meta, Story } from "@storybook/addon-docs";
import { PlaceholderMajorIcon, UfoMajorIcon, TelescopeMajorIcon, RocketMajorIcon } from "@components/icons";
import { ComponentInfo, Preview, Tagline } from "@stories/components";
import { Counter } from "@components/counter";
import { Dot } from "@components/dot";
import { Inline, Stack } from "@components/layout";
import { InnerTag, InnerTagList, Tag, TagList } from "@components/tag";
import { Item } from "@components/collection";
import { Text } from "@components/typography";

<Meta
    title="Components/Tag"
    id="tag"
/>

# Tag

<Tagline>A tag represents a keyword that helps label, organize and categorize content.</Tagline>

<ComponentInfo
    usage={"import { Tag, TagList, Item } from \"@sharegate/orbit-ui\";"}
    githubPath="/packages/components/src/tag/src"
/>

## Guidelines

### When to use

- To categorize content allowing the user to quickly skim a list of items.
- To group items together such as a filter list.

### Content

- Not rely on an icon to be understand the intention of a tag.

### Accessibility

- Text should be descriptive enough to be understood without relying on the color.
- Text should be descriptive and complete enough to be understood without relying on the icon. Using an icon to carry information will make it non-accessible.

### Tag, Lozenge, Button and other alternatives

- To highlight an item's status for quick recognition or to give additional fast short information such as highlighting a new item use a [lozenge](?path=/docs/lozenge--default-story).
- For interactivity, a clickable component, use a [button](?path=/docs/button--default-story). Tags should’nt be used as Buttons, buttons have a recognizable look throughout the app, one should not use a different pattern.
- To display a quantity, use either a [counter](?path=/docs/counter--default-story) or a [badge](?path=/docs/badge--default-story).

## Usage

### Default

A default tag. Use in most situations.

<Preview>
    <Story name="default">
        <Tag>Falcon 9</Tag>
    </Story>
</Preview>

### Icon

A tag can contain [icons](?path=/docs/icon-gallery--page). An icon is used when it can make it easier for the user to understand the meaning.

<Preview>
    <Story name="icon">
        <Tag>
            <PlaceholderMajorIcon />
            <Text>Falcon 9</Text>
        </Tag>
    </Story>
</Preview>

### End icon

*Non standard* end [icons](?path=/docs/icon-gallery--page) can be provided *only if* you have to render a [list of icons](?path=/docs/icon--default-story#icon-list).

<Preview>
    <Story name="end icon">
        <Tag>
            <Text>Falcon 9</Text>
            <IconList slot="end-icon">
                <UfoMajorIcon />
                <TelescopeMajorIcon />
                <RocketMajorIcon />
            </IconList>
        </Tag>
    </Story>
</Preview>

### Dot

A tag can contain a [dot](?path=/docs/dot--default-story). Use it to allow the user to quickly skim through a lot of tags. The dot color must have a recognizable meaning.

<Preview>
    <Story name="dot">
        <Tag>
            <Dot color="--o-ui-accent-6" />
            <Text>Falcon 9</Text>
        </Tag>
    </Story>
</Preview>

### Counter

A tag can contain a [counter](?path=/docs/counter--default-story). Useful to indicate a number of matches in a filter list.

<Preview>
    <Story name="counter">
        <Tag>
            <Text>Falcon 9</Text>
            <Counter variant="divider">6</Counter>
        </Tag>
    </Story>
</Preview>

### Removable

A tag can be removable by specifying an `onRemove` handler.

<Preview>
    <Story name="removable">
        <Tag onRemove={() => {}}>Falcon 9</Tag>
    </Story>
</Preview>

### Size

A tag can vary in size. When a lot of tags can be seen side by side, prefer the small size. The tag can be used in small version to accommodate smaller spaces, such as a column row. When used in small format, the tag should not contain an icon.

<Preview>
    <Story name="size">
        <Inline alignY="center">
            <Tag size="sm">Falcon 9</Tag>
            <Tag>Falcon 9</Tag>
        </Inline>
    </Story>
</Preview>

### Fluid

A tag can take the width of its container.

<Preview>
    <Story name="fluid">
        <Tag fluid>
            <PlaceholderMajorIcon />
            <Text>Falcon 9</Text>
            <Counter>6</Counter>
        </Tag>
    </Story>
</Preview>

### Outline

A tag can have a subtle appearance. Avoid using this variant next to an outline button.

<Preview>
    <Story name="outline">
        <Tag variant="outline">Falcon 9</Tag>
    </Story>
</Preview>

### Custom colors

Custom colors can be applied to a tag. You’ll be responsible to insure that the color contrast is accessible.

<Preview>
    <Story name="custom-color">
        <Tag
            style={{
                backgroundColor: "#FFF6E7",
                color: "var(--o-ui-warning-8)",
                border: "1px solid #FEE9C3"
            }}
        >
            Falcon 9
        </Tag>
    </Story>
</Preview>

## Tag list

Related tags can be grouped together.

<Preview>
    <Story name="tag list">
        <TagList>
            <Item key="mercury">Mercury Program</Item>
            <Item key="gemini">Gemini Program</Item>
            <Item key="apollo">Apollo Program</Item>
            <Item key="artemis">Artemis Program</Item>
        </TagList>
    </Story>
</Preview>

### Clearable

A tag list can have a clear button.

<Preview>
    <Story name="tag list clearable">
        <TagList onClear={() => {}}>
            <Item key="mercury">Mercury Program</Item>
            <Item key="gemini">Gemini Program</Item>
            <Item key="apollo">Apollo Program</Item>
            <Item key="artemis">Artemis Program</Item>
        </TagList>
    </Story>
</Preview>

### Size

A tag list can vary in size. This will pass the size to it’s children.

<Preview>
    <Story name="tag list size">
        <Stack>
            <TagList size="sm">
                <Item key="mercury">Mercury Program</Item>
                <Item key="gemini">Gemini Program</Item>
                <Item key="apollo">Apollo Program</Item>
                <Item key="artemis">Artemis Program</Item>
            </TagList>
            <TagList>
                <Item key="mercury">Mercury Program</Item>
                <Item key="gemini">Gemini Program</Item>
                <Item key="apollo">Apollo Program</Item>
                <Item key="artemis">Artemis Program</Item>
            </TagList>
        </Stack>
    </Story>
</Preview>

### Dynamic items

A tag list items can be rendered dynamically.

<Preview>
    <Story name="tag list dynamic items">
        <TagList>
            {[
                { key: "mercury", value: "Mercury Program", icon: <PlaceholderMajorIcon /> },
                { key: "gemini", value: "Gemini Program" },
                { key: "apollo", value: "Apollo Program", icon: <NotificationMajorIcon /> },
                { key: "artemis", value: "Artemis Program", icon: <LightbulbMajorIcon /> }
            ].map(x => (
                <Item key={x.key}>
                    {x.icon}
                    <Text>{x.value}</Text>
                </Item>
            ))}
        </TagList>
    </Story>
</Preview>

### Tags picker

The following example show how a tag list can be composed with one of Orbit's picker to build a basic tags picker.

<Preview filePath="/tag/docs/TagsPicker" />

## API

### Tag

<ComponentInfo
    usage={"import { Tag } from \"@sharegate/orbit-ui\";"}
    slots={["text", "icon", "dot", "counter"]}
    inherits={[InnerTag.defaultElement, "styled-component"]}
    compact
/>

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

### TagList

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

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



