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

<Meta of={LinkPartsStories} />

# LinkParts

The small parts the link widgets are built from: the pickers, the conversation count, a status's shape and a progress ring.

<Canvas of={LinkPartsStories.Pickers} />

## When

- **LinkPickers** — a status and an owner, changed in place. A picker with no `onChange`, or `readOnly`, reads as words in the same place.
- **CommentCount** — how much was said, as a link to where it is read; brighter, with a dot, when there is something unread for a member.
- **StatusMark** — a status as its shape, which reads without colour; its words on hover.
- **ProgressRing** — how far along, as a ring and a count.
- **LinkedIcon**, **LinkKey** — the icon for what a link stands for, and its key.

<Canvas of={LinkPartsStories.PickersReadOnly} />
<Canvas of={LinkPartsStories.Conversation} />
<Canvas of={LinkPartsStories.Marks} />

## When not

- A whole link → **LinkChip**, **LinkRow**, **LinkCard**.
- A choice in a form → **Select**.

## How

```tsx
import { LinkPickers, CommentCount } from '@estiva-app/ui'

<LinkPickers status={{ value: statusKey, options: statuses, onChange: setStatus }} owner={{ value: ownerKey, options: people }} ownerLabel="Owner" />
<CommentCount conversation={{ count: 4, href: conversationHref, unread: isMemberWithUnread }} />
```

- `unread` only for a member of the conversation: anyone else sees the count alone.

## What it owns

| It does | So you never write |
|---|---|
| Draws a value as words where it may not be changed | a disabled select |
| Says the count and whether it is unread to a screen reader | an `aria-label` of your own |

## Props

<Controls of={LinkPartsStories.PickersReadOnly} />