関係行RelationshipRowExperimental
Two PersonCells side by side with a connector (⟷ by default) and an optional relationship label: the 'person ⟷ person' unit. Models the pairings that define people-heavy domains — manager↔report (1on1), helper↔client (訪問介護), 利用者↔担当ケアマネ (ケアプラン), approver chains, mentor↔mentee. Each side is a full PersonCell (avatar + name + secondary/tertiary + status); a trailing slot holds a badge/chevron/actions. Presentational by default — let an interactive row (a wrapping link, DataTable onRowClick) own activation rather than nesting a button.
プレビュー
Props
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| from | PersonCellProps | - | 左の人物(PersonCell の全プロップ: name/secondary/tertiary/avatar/presence/trailing…)。 |
| to | PersonCellProps | - | 右の人物(同上)。 |
| relationshipLabel | ReactNode | - | コネクタ下の小ラベル=関係の種類(担当 / 上司 / 訪問 など)。 |
| connector | ReactNode | ⟷ | 2人の間のグリフ/要素。既定は双方向矢印。 |
| trailing | ReactNode | - | 末尾スロット(ステータスバッジ / シェブロン / アクション)。 |
| size | "sm" | "md" | "lg" | - | 両 PersonCell に伝播(from/to が各自 size で上書き可)。 |
Usage
import { RelationshipRow, Badge } from "@gunjo/ui"
// 利用者 ⟷ 担当ケアマネ — each side is a full PersonCell
<RelationshipRow
from={{ name: "渡辺 文雄", secondary: "利用者・要介護3", avatar: { fallback: "渡" } }}
relationshipLabel="担当"
to={{ name: "田渕 美和子", secondary: "介護支援専門員" }}
trailing={<Badge variant="success">交付済</Badge>}
/>