TimelineItem

One entry of a composed Timeline. Extra content goes in children.

Import

import { TimelineItem } from "@jcsoftdev/ui/containers";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/containers/timeline.

Usage

<TimelineItem items={items} />

Props

Prop	Type	Default	Description
id	string		Kept so a TimelineFeedItem can be spread as is; React uses it as the key.
time	string		Display time, e.g. “Hace 5 min” or “14:30”.
title *	ReactNode
children	ReactNode		Extra content under the text: attachments, chips, actions.
group	string		Items with the same group sit under one heading (e.g. “Hoy”).
status	"done" | "error" | "pending" | "current"		Process state. done and error get a check or cross and a spoken state, current sets aria-current="step" and rings the marker, pending dims the item. Independent of tone.
icon	ReactNode		Icon inside the marker; without it the marker is a dot (a check or cross for done and error).
tone	"neutral" | "accent" | "success" | "warning" | "danger"		Marker colour. Without it the tone follows status, or is neutral.
dateTime	string		Machine-readable value for the <time> element.
description	ReactNode
actor	string		Person or system that did it.

* marks a required prop.

It also accepts the native props of the element or primitive it renders (for example className, id, aria-* and event handlers).

Storybook stories

• Default
• Ungrouped
• Narrow
• Brutal Preset
• Statuses
• Composed

Source

packages/ui/src/containers/timeline/timeline.tsx