Milestone

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

import * as MilestoneListStories from './MilestoneList.stories';

<Meta of={MilestoneListStories} name='Usage' />

<Title />

## Purpose

A list of milestones on one line: steps people read in order, such as the stages of an application process, each with a heading, a subtitle and a short body.

## TL;DR: Chain of Thought, Timeline or Milestone List?

- **Chain of Thought:** an agent's reasoning under a reply, behind a summary line ("Thought for 17s") that opens on demand. No line, no rail.
- **Timeline:** events that happened or are happening, one line each (status icon, label, time). Always open, and the main content of a screen: a deploy history, an event log, an agent's run. Optional rail between the icons.
- **Milestone List:** steps people read in order, often still ahead of them, with a heading and a paragraph each on a card. One line runs down the whole list: the stages of an application process.

Quick test:

1. Do the steps sit under a reply and need to stay out of the way? **Chain of Thought.**
2. Otherwise, does each entry have a status icon or a time at the end of the row? **Timeline.**
3. Otherwise, does each have a heading and a paragraph? **Milestone List.**

A Chain of Thought is built from a Timeline and uses the same rows, and it can sit inside a Timeline as one entry in a log. Do not mix Timeline Items and Milestones in one list.

## Usage

Use it for a timeline of milestones. For a log of events that happened (deploys, checks, an agent's work), use Timeline instead; the Timeline page compares the two and Chain of Thought.

- Each child becomes a list item; put Milestones in it.
- Milestones sit on the default Panel. `variant='flat'` turns the cards off for text on the line; a Milestone can set `variant` itself to differ from the rest.
- `subtitlePosition='start'` moves each subtitle to the left of the line, beside the dot, and falls back to under the title only at phone widths (under 480px).

## Implementation

See the table below for the available props. Milestone has its own page.

<hr />

<Canvas of={MilestoneListStories.Default} />
<Controls of={MilestoneListStories.Default} />