diff --git a/src/components/CornerDialog/CornerDialog.stories.tsx b/src/components/CornerDialog/CornerDialog.stories.tsx index f9bdf7d8..c434613a 100644 --- a/src/components/CornerDialog/CornerDialog.stories.tsx +++ b/src/components/CornerDialog/CornerDialog.stories.tsx @@ -52,3 +52,88 @@ export const Default: Story = { onCloseClick: action('onCloseClick'), }, }; + +export const Decision: Story = { + args: { + intent: 'none', + title: 'Title', + content: 'Description', + actions: [ + { label: 'Cancel', onClick: action('onCancelClick') }, + { + label: 'Accept', + onClick: action('onAcceptClick'), + appearance: 'primary', + }, + ], + onCloseClick: action('onCloseClick'), + }, +}; + +export const Confirmation: Story = { + args: { + intent: 'none', + title: 'Title', + content: 'Description', + actions: [ + { + label: 'Accept', + onClick: action('onAcceptClick'), + appearance: 'primary', + }, + ], + onCloseClick: action('onCloseClick'), + }, +}; + +export const NegativeWithDestructiveButton: Story = { + args: { + intent: 'negative', + title: 'Title', + content: 'Description', + actions: [ + { label: 'Cancel', onClick: action('onCancelClick') }, + { + label: 'Remove', + onClick: action('onRemoveClick'), + appearance: `primary`, + intent: 'destructive', + }, + ], + onCloseClick: action('onCloseClick'), + }, +}; + +export const WarningAndAdditionalAction: Story = { + args: { + intent: 'warning', + title: 'Title', + content: 'Description', + actions: [ + { + label: 'Find out more', + onClick: action('onFindOutMoreClick'), + custom: { + default: { + position: 'absolute', + left: 0, + }, + }, + }, + { label: 'Cancel', onClick: action('onCancelClick') }, + { + label: 'Accept', + onClick: action('onAcceptClick'), + appearance: 'primary', + }, + ], + onCloseClick: action('onCloseClick'), + custom: { + innerElements: { + footer: { + position: 'relative', + }, + }, + }, + }, +};