TimelineDetail

TimelineDetail is for incident history, deploy logs, and audit trails where each event has a short summary and optional details.

#Default usage

<TimelineDetail>
  <TimelineDetailItem
    title="Build completed"
    meta="12:30"
    description="All package tasks finished successfully."
    kind="success"
    details="Generated ESM, CJS, and type declarations for public packages."
    defaultOpen
  />
  <TimelineDetailItem
    title="Release approval pending"
    meta="12:34"
    description="Requires npm publish confirmation."
    kind="warning"
    details="Review npm dry-run output before continuing."
  />
</TimelineDetail>

#Import

import { TimelineDetail, TimelineDetailItem } from "@froggdesign/enter-ui-react";

#Accessibility

Expandable items use a button with aria-expanded and aria-controls. Static entries render as regular timeline content.

#API

• TimelineDetail density supports comfortable and compact.
• TimelineDetailItem accepts title, meta, description, kind, details, and defaultOpen.

#Styling

TimelineDetail uses .eui-timeline-detail classes and FroggDesign tokens for connectors, item bodies, expandable controls, and status accents.