import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
import {
  PlaygroundTag,
  DoWithClearContent,
  DoWithDismissible,
  DoWithActiveState,
  DoWithDisabledState,
  DoWithShortContent,
  DontLongContent,
  DontEmptyContent,
  DoClearContent,
  DontCantDismissWhenNeeded,
  DoCanDismiss,
} from '../components/form/BmsTag.stories.js';

<Meta title="Documentation/Tag" />

# <img src="./BmsIcon.png" /> Tag

Tags are interactive components that allow users to add, select, and remove options in forms or interfaces. Tags can be clicked to toggle their active state and can be dismissed (closed) by users. They are commonly used for filters, selections, categories, and removable items. Tags provide a way for users to interact with and manage multiple options in a compact, visual format.

![Tag representation](./tag/CoverTag.png)

## Anatomy

Tags consist of a container with a border, text content, and an optional dismiss button. They can be in an active or inactive state, and can be disabled. Tags are designed to be interactive elements that users can click to toggle or dismiss.

![Tag representation](./tag/TagRepresentation.png)

## Component

Use the controls below to interact with the component and see how it behaves with different configurations.

<Canvas of={PlaygroundTag} />

### Props

<Controls of={PlaygroundTag} />

## Usage Examples

### ✅ Do: Tag with clear content

Always provide clear, concise content that is easy to understand at a glance.

<Canvas of={DoWithClearContent} />

### ✅ Do: Tag with dismissible option

Use dismissible tags when users need to remove items, such as filters or selected options.

<Canvas of={DoWithDismissible} />

### ✅ Do: Tag with active state

Use the active state to indicate that a tag is currently selected or applied. Active tags have a filled background.

<Canvas of={DoWithActiveState} />

### ✅ Do: Tag with disabled state

Use the disabled state when a tag should be visible but not interactive. This is useful for showing locked or unavailable options.

<Canvas of={DoWithDisabledState} />

### ✅ Do: Tag with short content

Keep tag content short and concise. Tags are meant to display brief information that users can quickly scan and interact with.

<Canvas of={DoWithShortContent} />

## Rules

### ⛔ Don't: Long content

Avoid overly long content in tags. Long text makes tags difficult to read, breaks the layout, and defeats the purpose of compact, scannable elements.

**❌ Don't:**

<Canvas of={DontLongContent} />

**✅ Do:**

<Canvas of={DoWithShortContent} />

### ⛔ Don't: Empty or unclear content

Always provide meaningful content in tags. Empty tags or unclear labels don't provide value to users and make the interface confusing.

**❌ Don't:**

<Canvas of={DontEmptyContent} />

**✅ Do:**

<Canvas of={DoClearContent} />

### ⛔ Don't: Tag that cannot be dismissed when it should

If a tag represents something that users should be able to remove (like a filter or a selected option), make sure it can be dismissed. Non-dismissible tags should only be used for permanent or required items.

**❌ Don't:**

<Canvas of={DontCantDismissWhenNeeded} />

**✅ Do:**

<Canvas of={DoCanDismiss} />
