diff --git a/packages/react/src/sds/ai/F0HILActionConfirmation/F0HILActionConfirmation.tsx b/packages/react/src/sds/ai/F0HILActionConfirmation/F0HILActionConfirmation.tsx index c111a8c8d0..c004efe965 100644 --- a/packages/react/src/sds/ai/F0HILActionConfirmation/F0HILActionConfirmation.tsx +++ b/packages/react/src/sds/ai/F0HILActionConfirmation/F0HILActionConfirmation.tsx @@ -1,35 +1,31 @@ -import { F0Button } from "@/components/F0Button" -import Check from "@/icons/app/Check" +import { F0CardRow } from "@/components/F0Card" import { F0HILActionConfirmationProps } from "./types" export const F0HILActionConfirmation = ({ text, + description, + avatar, confirmationText, onConfirm, cancelText, onCancel, + stackAt = "sm", }: F0HILActionConfirmationProps) => { return ( -
- {text &&

{text}

} -
- - -
-
+ ) } diff --git a/packages/react/src/sds/ai/F0HILActionConfirmation/__stories__/F0HILActionConfirmation.stories.tsx b/packages/react/src/sds/ai/F0HILActionConfirmation/__stories__/F0HILActionConfirmation.stories.tsx index 9b1ce2dc65..0dd32b83fa 100644 --- a/packages/react/src/sds/ai/F0HILActionConfirmation/__stories__/F0HILActionConfirmation.stories.tsx +++ b/packages/react/src/sds/ai/F0HILActionConfirmation/__stories__/F0HILActionConfirmation.stories.tsx @@ -1,15 +1,31 @@ import type { Meta, StoryObj } from "@storybook/react-vite" +import image from "@storybook-static/avatars/person04.jpg" + import { F0HILActionConfirmation } from ".." const meta = { title: "AI/F0HILActionConfirmation", component: F0HILActionConfirmation, parameters: { - layout: "centered", + layout: "padded", + docs: { + description: { + component: + "An inline human-in-the-loop approve/reject row built on `F0CardRow`'s confirm/reject variant: the prompt sits on the left as the row title (with an optional avatar and description) and icon-only ✓ (confirm) / ✗ (reject) buttons pin to the trailing edge.", + }, + }, }, tags: ["autodocs"], + decorators: [ + (Story) => ( +
+ +
+ ), + ], args: { + text: "Send the follow-up email to the candidate?", confirmationText: "Confirm", onConfirm: () => {}, cancelText: "Cancel", @@ -18,23 +34,38 @@ const meta = { argTypes: { text: { control: "text", - description: "Optional descriptive text shown above the action buttons", + description: "The prompt shown as the row title.", + }, + description: { + control: "text", + description: "Optional secondary line shown beneath the title.", + }, + avatar: { + control: "object", + description: "Optional avatar rendered on the left of the row.", + }, + stackAt: { + control: "select", + options: ["sm", "md", "lg", "never"], + description: + "Container width at which the ✓/✗ actions drop onto their own line.", + table: { defaultValue: { summary: "sm" } }, }, confirmationText: { control: "text", - description: "Text displayed on the confirmation button", + description: "Accessible label and tooltip for the confirm (✓) button.", }, onConfirm: { action: "confirmed", - description: "Callback fired when the confirmation button is clicked", + description: "Callback fired when the confirm button is clicked", }, cancelText: { control: "text", - description: "Text displayed on the cancel button", + description: "Accessible label and tooltip for the reject (✗) button.", }, onCancel: { action: "cancelled", - description: "Callback fired when the cancel button is clicked", + description: "Callback fired when the reject button is clicked", }, }, } satisfies Meta @@ -44,15 +75,32 @@ type Story = StoryObj export const Default: Story = { args: { + text: "Send the follow-up email to the candidate?", confirmationText: "Confirm", cancelText: "Cancel", }, } -export const WithDescriptiveText: Story = { +export const WithDescription: Story = { args: { - text: "Are you sure you want to proceed with this action?", - confirmationText: "Yes, proceed", - cancelText: "No, cancel", + text: "Approve 3 days off", + description: "Requested by Jane Cooper · Jun 10–12", + confirmationText: "Approve", + cancelText: "Reject", + }, +} + +export const WithAvatar: Story = { + args: { + avatar: { + type: "person", + firstName: "Jane", + lastName: "Cooper", + src: image, + }, + text: "Jane Cooper", + description: "Requested 3 days off", + confirmationText: "Approve", + cancelText: "Reject", }, } diff --git a/packages/react/src/sds/ai/F0HILActionConfirmation/types.ts b/packages/react/src/sds/ai/F0HILActionConfirmation/types.ts index 5250e98c5b..95199bd681 100644 --- a/packages/react/src/sds/ai/F0HILActionConfirmation/types.ts +++ b/packages/react/src/sds/ai/F0HILActionConfirmation/types.ts @@ -1,25 +1,48 @@ +import type { F0CardRowProps } from "@/components/F0Card" + /** - * Props for the F0HILActionConfirmation component + * Props for the F0HILActionConfirmation component. + * + * Renders an inline approve/reject row built on `F0CardRow`'s confirm/reject + * variant: the prompt as the row title, with icon-only ✓ (confirm) and ✗ + * (reject) buttons at the trailing edge. */ export type F0HILActionConfirmationProps = { /** - * Optional descriptive text shown above the action buttons + * The prompt shown as the row title (e.g. the action awaiting confirmation). + * Required — a confirmation without a prompt has no meaning. */ - text?: string + text: string /** - * Text displayed on the confirmation button + * Optional secondary line shown beneath the title (single line, truncated). + */ + description?: F0CardRowProps["description"] + /** + * Optional avatar rendered on the left of the row. Accepts any avatar type in + * the system (person, company, team, file, icon, emoji, …). + */ + avatar?: F0CardRowProps["avatar"] + /** + * Container width at which the ✓/✗ actions drop onto their own line instead of + * staying inline. Prevents the buttons from overlapping the prompt in narrow + * containers. Set to `"never"` to keep them inline at every width. + * @default "sm" + */ + stackAt?: F0CardRowProps["stackAt"] + /** + * Accessible label and tooltip for the confirm (✓) button. */ confirmationText: string /** - * Callback fired when the confirmation button is clicked + * Callback fired when the confirm button is clicked. */ onConfirm: () => void /** - * Text displayed on the cancel button + * Accessible label and tooltip for the reject (✗) button. */ cancelText: string /** - * Callback fired when the cancel button is clicked + * Callback fired when the reject button is clicked. */ onCancel: () => void }