@codecademy/gamut

72.3.072.3.1-alpha.f273fd.0
ConfirmDeletePrompt.tsx
+ConfirmDeletePrompt.tsxNew file
+49
Index: ConfirmDeletePrompt.tsx
===================================================================
--- ConfirmDeletePrompt.tsx
+++ ConfirmDeletePrompt.tsx
@@ -0,0 +1,49 @@
+import { Dialog } from '@codecademy/gamut';
+import * as React from 'react';
+
+export interface ConfirmDeletePromptProps {
+  /**
+   * Whether the confirmation prompt is open.
+   */
+  isOpen: boolean;
+  /**
+   * Called on Escape, outside-click, the built-in close button, or either
+   * action button. Must flip `isOpen` to `false` — the prompt never closes
+   * itself.
+   */
+  onRequestClose: () => void;
+  /**
+   * Called when the user confirms the delete action, after the prompt has
+   * already been asked to close.
+   */
+  onConfirm: () => void;
+  /**
+   * Label for the thing being deleted, substituted into the confirmation
+   * copy, e.g. `"this comment"`. Defaults to `"this item"`.
+   */
+  itemLabel?: string;
+}
+
+/**
+ * A confirm/cancel prompt for a destructive delete action (e.g. removing a
+ * row from a list). Built on Gamut's `Dialog`, which already provides the
+ * dismiss (Escape / outside-click / close button) and focus-trap behavior —
+ * see the `gamut-modal` skill for how that works under the hood.
+ */
+export const ConfirmDeletePrompt: React.FC<ConfirmDeletePromptProps> = ({
+  isOpen,
+  onRequestClose,
+  onConfirm,
+  itemLabel = 'this item',
+}) => (
+  <Dialog
+    cancelCta={{ children: 'Cancel' }}
+    confirmCta={{ children: 'Delete', onClick: onConfirm }}
+    isOpen={isOpen}
+    title="Delete item?"
+    variant="danger"
+    onRequestClose={onRequestClose}
+  >
+    Are you sure you want to delete {itemLabel}?
+  </Dialog>
+);