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

<Meta of={ContainerHeaderStories} />

# ContainerHeader

The bar across the top of a column — a list, a thread, a side panel: its
title, and the buttons that act on the whole column at the right edge. 48px,
with a hairline under it.

<Canvas of={ContainerHeaderStories.WithActions} />

## When

- The top of a column in a frame: the list beside the conversation, the
  thread, a side panel. One per column.
- The column's own actions — new, sort, close — as IconButtons with tooltips
  in `actions`.
- `titleMenu`: the title opens a menu of the column's views, its chevron
  drawn; the title and the chevron are one button.

<Canvas of={ContainerHeaderStories.WithTitleMenu} />

## When not

- One section inside a column → **SectionHeader**, the 32px row with a
  SectionLabel.
- The top of the whole app → **TopBar**.
- A dialog's title → **DialogShell**, which draws this bar with the dialog's own 18px title.

- A row you draw yourself at the top of a column — your own padding and a line
  under it → this part. Its numbers are every column's. The lint refuses the
  hand-made row (`estiva/no-handmade-header`).
- A whole list column, header and scrolling list → **ListColumn**, which draws
  this bar at its top.

## How

```tsx
import { ContainerHeader, IconButton } from '@estiva-app/ui'

<ContainerHeader
  title="All items"
  chevron
  actions={
    <IconButton tooltip="New item" aria-label="New item" onClick={openNew}>
      <IconEdit size={16} stroke={1.5} />
    </IconButton>
  }
/>
```

- A string title is one line in `body-2-strong` and keeps its width. Anything
  else — an EditableText, a title over a caption — takes the room left and is
  drawn as given.

<Canvas of={ContainerHeaderStories.WithRichTitle} />

- Only offer a button that does something: a button with nothing behind it is
  a promise the column cannot keep.

## 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 |
|---|---|---|
| Draws the column's bar: 48px tall, the title 16px in at 14px medium, the actions 16px from the right, a hairline under it | a row of your own with padding and a border |  |
| Keeps its 48px in a scrolling column | `shrink-0` |  |

## Props

<Controls of={ContainerHeaderStories.Default} />