import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
import {
  PlaygroundChip,
  DoWithClearContent,
  DoWithAppropriateColor,
  DoWithShortContent,
  DoWithStatusColor,
  DontLongContent,
  DoShortContent,
  DontInappropriateColor,
  DoAppropriateColor,
  DontEmptyContent,
  DoClearContent,
} from '../components/form/BmsChip.stories.js';

<Meta title="Documentation/Chip" />

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

A Chip is a component to make data representation, there is no actions attached to him. Chips are compact elements that represent an input, attribute, or action. They are commonly used to display status, categories, tags, or other metadata. Chips help users quickly scan and understand information at a glance.

![Chip representation](./chip/CoverChips.png)

## Anatomy

Chips consist of a container with background color, text content, and optional color coding to convey meaning. They are designed to be compact and visually distinct while maintaining readability.

![Chip representation](./chip/ChipRepresentation.png)

## Component

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

<Canvas of={PlaygroundChip} />

### Props

<Controls of={PlaygroundChip} />

## Usage Examples

### ✅ Do: Chip with clear content

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

<Canvas of={DoWithClearContent} />

### ✅ Do: Chip with appropriate color

Use colors that match the semantic meaning of the content. Green for success/active, red for errors/danger, orange for warnings, etc.

<Canvas of={DoWithAppropriateColor} />

### ✅ Do: Chip with short content

Keep chip content short and concise. Chips are meant to display brief information, not long descriptions.

<Canvas of={DoWithShortContent} />

### ✅ Do: Chip with status color

Use color coding to quickly convey status information. This helps users understand the state without reading the text.

<Canvas of={DoWithStatusColor} />

## Rules

### ⛔ Don't: Long content

Avoid overly long content in chips. Long text makes chips difficult to read, breaks the layout, and defeats the purpose of compact data representation.

**❌ Don't:**

<Canvas of={DontLongContent} />

**✅ Do:**

<Canvas of={DoShortContent} />

### ⛔ Don't: Inappropriate color usage

Don't use colors that contradict the semantic meaning of the content. This can confuse users and lead to misunderstandings.

**❌ Don't:**

<Canvas of={DontInappropriateColor} />

**✅ Do:**

<Canvas of={DoAppropriateColor} />

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

Always provide meaningful content in chips. Empty chips or unclear labels don't provide value to users.

**❌ Don't:**

<Canvas of={DontEmptyContent} />

**✅ Do:**

<Canvas of={DoClearContent} />
