import { ArgsTable, Meta, Story } from "@storybook/addon-docs";
import { PlaceholderMinorIcon } from "@components/icons";
import { ComponentInfo, Preview, Tagline } from "@stories/components";
import { Inline } from "@components/layout";
import { InnerLozenge, Lozenge } from "@components/lozenge";
import { Text } from "@components/typography";

<Meta
    title="Components/Lozenge"
    id="lozenge"
/>

# Lozenge

<Tagline>Lozenges are used to highlight an item's status, for quick recognition or to give additional information such as highlighting a new item.</Tagline>

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

## Guidelines

### When to use

- To highlight an element in a list.
- To bring attention to a particular element that requires the user’s attention, such as an expiring license, something new or a problematic situation.

### Content

- Be concise, 1 or 2 short words is the optimal length.
- Be descriptive enough to be understood without relying on a color or an icon.
- Be non-interactive, this includes being clickable or triggering a tooltip on hover.
- Refrain from using punctuation like `!` or `?`.

### Lozenge vs Counter vs Badge

- Lozenges are for text copy. If you want to display a quantity, use either a [counter](?path=/docs/counter--default-story) or a [badge](?path=/docs/badge--default-story).

## Usage

### Default

This is the lozenge that should be used in most situations.

<Preview>
    <Story name="default">
        <Lozenge>New</Lozenge>
    </Story>
</Preview>

### Icon

An [icon](?path=/docs/icon-gallery--page) is used to make it easier for the user to understand the intent of the Lozenge. It is strongly recommended to use a Minor Icon in this particular use case.

<Preview>
    <Story name="icon">
        <Lozenge>
            <PlaceholderMinorIcon />
            <Text>New</Text>
        </Lozenge>
    </Story>
</Preview>

### Size

The lozenge can be used in small version to accommodate smaller spaces, such as a column row. When used in small format, the lozenge should not contain an icon, and text is automatically set to uppercase.

<Preview>
    <Story name="size">
        <Inline alignY="center">
            <Lozenge size="sm">New</Lozenge>
            <Lozenge>New release</Lozenge>
        </Inline>
    </Story>
</Preview>

### Highlight

A lozenge can be highlighted to bring more attention to it when required. This version should be used sparingly to avoid overloading the user interface.

<Preview>
    <Story name="highlight">
        <Inline alignY="center">
            <Lozenge size="sm" highlight>New</Lozenge>
            <Lozenge highlight>New</Lozenge>
        </Inline>
    </Story>
</Preview>

### Fluid

A lozenge can take all the available space.

<Preview>
    <Story name="fluid">
        <Lozenge fluid>New</Lozenge>
    </Story>
</Preview>

### Warning

A lozenge can use a warning color. This version is useful when we need to warn the user of an action that need to be taken in the near future but not immediately.

<Preview>
    <Story name="warning">
        <Inline alignY="center">
            <Lozenge variant="warning">Expires soon</Lozenge>
            <Lozenge variant="warning" highlight>Expires soon</Lozenge>
        </Inline>
    </Story>
</Preview>

### Positive

This version can be used to highlight a positive message.

<Preview>
    <Story name="positive">
        <Inline alignY="center">
            <Lozenge variant="positive">Active</Lozenge>
            <Lozenge variant="positive" highlight>Active</Lozenge>
        </Inline>
    </Story>
</Preview>


### Negative

This version is used to represent a state or an element that is either in a negative or destructive state.

As an example, it can be used to highlight a blocked user or an element that has been deleted but still visible. This should be used with caution as this color scheme can trigger a negative reaction from a user.

<Preview>
    <Story name="negative">
        <Inline alignY="center">
            <Lozenge variant="negative">Blocked</Lozenge>
            <Lozenge variant="negative" highlight>Blocked</Lozenge>
        </Inline>
    </Story>
</Preview>

## API

### Lozenge

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

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

