Komponen / Tampilan data
Timeline
Riwayat aktivitas dokumen — siapa, melakukan apa, kapan — dengan penanda jenis: persetujuan, penolakan, menunggu, komentar.
Import
tsx
import { Timeline } from '@divistant/circca-react';Props · Timeline
Dirender sebagai <ol>; menerima atribut <ol>.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| className | string | — | Kelas tambahan (digabung aman dengan tailwind-merge). |
Props · Timeline.Item
Dirender sebagai <li>. Fungsi `formatDateTime` ("12 Sep 2026, 09.12") ikut diekspor.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| actor | ReactNode | — | Siapa (properti Figma "Actor"): nama orang, atau "Sistem". |
| action | ReactNode | — | Melakukan apa (properti Figma "Action"), huruf kecil: "menyetujui PO". |
| time | Date | string | number | ReactNode | — | Kapan (properti Figma "Time"). Date/ISO diformat "12 Sep 2026, 09.12" dalam <time dateTime>; teks bebas apa adanya. |
| type | 'event' | 'pending' | 'approved' | 'rejected' | 'comment' | 'event' | Jenis aktivitas (properti Figma "Type") → penanda di rail. |
| typeLabel | string | false | — | Nama jenis untuk pembaca layar. Bawaan: Aktivitas, Menunggu, Disetujui, Ditolak, Komentar. |
| connector | boolean | otomatis | Garis penghubung (properti Figma "Connector"). Bawaan tampil kecuali di item terakhir. |
| children | ReactNode | — | Komentar atau alasan (properti Figma "Comment"), dalam kotak abu. |
Sumber
Kode komponen ada di packages/react/src/components/timeline. Gaya hanya memakai kelas token Circca HIG — tidak ada warna, spasi, atau radius mentah.