Comment
Shows one comment, with who wrote it, their role, when, and what they said, in a thread or a table cell, and whether it was edited or revoked.
A thread
Render each comment as an li in a CommentList, newest first. A rule parts the comments.
- Dr Tom Ellis·Registrar, GMU A·
Seen on arrival. Happy to accept once the echo is booked.
- Dr Grace KimRegistrar, GMU C
Cardiac issues now lead: transferring to Team A for ongoing management.
import {
Comment,
CommentAuthor,
CommentHeader,
CommentList,
CommentRole,
CommentText,
CommentTime,
} from "@cadence-clinical/ui";
<CommentList aria-label="Comments, newest first">
{comments.map((comment) => (
<Comment key={comment.id} render={<li />}>
<CommentHeader>
<CommentAuthor>{comment.author}</CommentAuthor>
<CommentRole>{comment.role}</CommentRole>
<CommentTime dateTime={comment.at}>{formatTime(comment.at)}</CommentTime>
</CommentHeader>
<CommentText>{comment.text}</CommentText>
</Comment>
))}
</CommentList>;In a table cell
Set size="compact" and put the text first. It is cut to one line, and the author and time follow on a second. The role is left out.
Cardiac issues now lead: transferring to Team A for ongoing management.
<Comment size="compact">
<CommentText>{latest.text}</CommentText>
<CommentHeader>
<CommentAuthor>{latest.author}</CommentAuthor>
<CommentTime dateTime={latest.at}>{formatTime(latest.at)}</CommentTime>
</CommentHeader>
</Comment>In a table row of three lines, set lines={2}, and the text takes two lines before it is cut.
<Comment size="compact" lines={2}>
…
</Comment>With its author's actions
Put the author's actions in CommentActions, after the text: Edit and Delete for the few seconds they may, with the time left, then Revoke. A compact comment leaves them out.
Echo booked for 1400. Happy to accept after it.
<Comment>
<CommentHeader>…</CommentHeader>
<CommentText>{comment.text}</CommentText>
<CommentActions>
<Button
variant="ghost"
size="sm"
aria-label={`Edit your comment: ${comment.text}`}
onClick={edit}
>
<Pencil aria-hidden data-icon="inline-start" />
Edit
</Button>
<Button
variant="ghost"
size="sm"
aria-label={`Delete your comment: ${comment.text}`}
onClick={remove}
>
<Trash2 aria-hidden data-icon="inline-start" />
Delete
</Button>
<span role="timer">{`Editable for ${secondsLeft} s`}</span>
</CommentActions>
</Comment>Edited
CommentEdited in the header says the words changed after they were posted.
Echo booked for 1400. Happy to accept after it.
<CommentHeader>
<CommentAuthor>{comment.author}</CommentAuthor>
<CommentTime dateTime={comment.at}>{formatTime(comment.at)}</CommentTime>
{comment.editedAt ? <CommentEdited /> : null}
</CommentHeader>Revoked
Set status="revoked" and add a CommentRevoked after the text. In a compact comment, put CommentRevoked in the header, where it is the icon and "Revoked".
Revoked: Echo booked for 1400. Happy to accept after it.
Revoked: Echo booked for 1400. Happy to accept after it.
<Comment status={comment.revoked ? "revoked" : "active"}>
<CommentHeader>…</CommentHeader>
<CommentText>{comment.text}</CommentText>
{comment.revoked ? (
<CommentRevoked
by={comment.revoked.by}
time={formatTime(comment.revoked.at)}
dateTime={comment.revoked.at}
/>
) : null}
</Comment>Drafted by an AI
CommentProvenance says what drafted the comment, who reviewed it and what it came from. In a compact comment, put it in the header, where it is the icon and "AI draft".
Oxygen requirement rose this afternoon. Review at 2200.
<CommentProvenance
drafter="Handover assistant"
reviewedBy="Dr Ravi Patel"
sources={[{ label: "Progress note 18 Oct 1600", href: "/notes/1600" }]}
/>