import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks'
import * as ReactionStories from './Reaction.stories'

<Meta of={ReactionStories} />

# Reaction

An emoji, how many people chose it, and whether you are one of them. A
24px pill that toggles — Chip's shape at a control's height.

<Canvas of={ReactionStories.Row} />

## When

- Under a message, in a row of them. `pressed` is **you are one of the
  reactors**: the accent's muted tint and an accent edge, so a glance
  separates "two people, one of them me" from "two people".
- Any emoji at all. Another app may publish one outside your set, and a
  reaction you cannot name is still one you must draw.

<Canvas of={ReactionStories.Pressed} />

## When not

- Standing information nobody can toggle — a status, a category → **Chip**
  (a Chip is not a control).
- **Offering the reactions to choose from** → **ReactionPicker**. This is the
  answer; that is the question, and it is a `Toolbar` so the whole row is one
  Tab stop.
- Any other strip of icon actions → **Toolbar**.
- An action with a verb for a label → **Button**.

## How

```tsx
import { Reaction } from '@estiva-app/ui'

<Reaction emoji="👍" count={2} pressed aria-label="Makes sense, 2" onClick={toggle} />
```

- **`aria-label` is required.** The emoji is `aria-hidden` — a glyph read
  aloud is noise, and its spoken name differs per screen reader — so the
  count is the only visible text and the control would otherwise be
  announced as "2". Pass the meaning and the count.
- It is Base UI's `Toggle`: a real `<button>` with `aria-pressed` and
  `data-pressed`, so "mine" reaches assistive tech as a toggle rather than as
  a colour. It is always `type="button"`, never a form's submit.
- **You own `pressed`.** A press calls `onClick` and changes nothing on its
  own; the pill shows "yours" when your data says so. A write can fail, and
  another client can change the count.
- `disabled` takes it out of the Tab order and ignores presses.

## What it owns

It does these by itself. Write none of them around it.

| It does | So you never write | Refused when written by hand |
|---|---|---|
| Is a toggle: pressed or not, and says so to assistive technology | `aria-pressed` |  |
| Presses on Enter and Space; Tab skips it while disabled | a key handler |  |
| Keeps its 24px in a scrolling column | `shrink-0` |  |

## Keys

| Key | What happens |
|---|---|
| Tab | Moves to the reaction; a disabled one is skipped |
| Enter, Space | Presses it: calls `onClick` |

## Props

<Controls of={ReactionStories.Default} />