import { Meta, Canvas, Primary, Controls, Title, Description } from "@storybook/addon-docs/blocks";

import * as stories from "./berry.stories";

<Meta of={stories} />

```ts
import { BerryComponent } from "@bitwarden/components";
```

<Title />
<Description />

<Primary />
<Controls />

## Usage

### Status

- Use a status berry to indicate a new notification of a status change that is not related to a
  specific count.

<Canvas of={stories.statusType} />

### Count

- Use a count berry with text to indicate item count information for multiple new notifications.

<Canvas of={stories.countType} />

### All Variants

<Canvas of={stories.AllVariants} />

## Count Behavior

- Counts of **1-99**: Display in a compact circular shape
- Counts of **100+**: Display in a pill shape with padding

### Limiting displayed digits with `maxDigits`

Use `maxDigits` to cap the number of digits shown. When the value reaches or exceeds `10^maxDigits`,
the berry displays the maximum representable value followed by `+` to indicate overflow.

| `maxDigits` | Cap threshold | Overflow display |
| ----------- | ------------- | ---------------- |
| `1`         | ≥ 10          | `9+`             |
| `2`         | ≥ 100         | `99+`            |
| `3`         | ≥ 1000        | `999+`           |

If `maxDigits` is undefined, the full numeric value is displayed without a cap.

<Canvas of={stories.WithMaxDigits} />

## Accessibility

- Use berries as **supplemental visual indicators** alongside descriptive text
- Ensure sufficient color contrast with surrounding elements
- For screen readers, provide appropriate labels on parent elements that describe the berry's
  meaning
- Berries are decorative; important information should not rely solely on the berry color
