Merge pull request #3 from adamviktora/delete-modal-tbd

feat(DeleteModal): first version

.gitignore

@@ -9,6 +9,7 @@ coverage
 .cache
 .tmp
 .eslintcache
+generated
 
 # package managers
 yarn-error.log

packages/module/patternfly-docs/content/design-guidelines/design-guidelines.md

@@ -1,10 +1,10 @@
 ---
 # Sidenav top-level section
 # should be the same for all markdown files for each extension
-section: extensions
+section: AI-infra-ui-components
 # Sidenav secondary level section
 # should be the same for all markdown files for each extension
-id: AI-infra-ui-components
+id: DeleteModal
 # Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
 source: design-guidelines
 ---

packages/module/patternfly-docs/content/examples/DeleteModal.md

@@ -0,0 +1,23 @@
+---
+# Sidenav top-level section
+# should be the same for all markdown files
+section: AI-infra-ui-components
+# Sidenav secondary level section
+# should be the same for all markdown files
+id: DeleteModal
+# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
+source: react
+# If you use typescript, the name of the interface to display props for
+# These are found through the sourceProps function provided in patternfly-docs.source.js
+propComponents: ['DeleteModal']
+---
+
+import { DeleteModal } from "@patternfly/ai-infra-ui-components";
+
+Note: this component documents the API and enhances the [existing DeleteModal](https://github.com/opendatahub-io/odh-dashboard/blob/main/frontend/src/pages/projects/components/DeleteModal.tsx) component from odh-dashboard. It can be imported from [@patternfly/ai-infra-ui-components](https://www.npmjs.com/package/@patternfly/AI-infra-ui-components). Alternatively, it can be used within the odh-dashboard via the import: `~/pages/projects/components/DeleteModal`
+
+### Example
+
+```js file="./DeleteModalBasic.tsx"
+
+```

packages/module/patternfly-docs/content/examples/DeleteModalBasic.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { Button, Stack, StackItem } from '@patternfly/react-core';
+import { DeleteModal } from '@patternfly/ai-infra-ui-components';
+
+export const DeleteModalBasic: React.FunctionComponent = () => {
+  const [isModalRecoverableOpen, setIsModalRecoverableOpen] = React.useState(false);
+  const [isModalDestructiveOpen, setIsModalDestructiveOpen] = React.useState(false);
+  const [isModalExtraDestructiveOpen, setIsModalExtraDestructiveOpen] = React.useState(false);
+
+  return (
+    <>
+      <Stack hasGutter style={{ marginBottom: '2rem' }}>
+        <StackItem>
+          <Button variant="primary" onClick={() => setIsModalRecoverableOpen(true)}>
+            Show delete modal (Easily recoverable)
+          </Button>
+        </StackItem>
+        <StackItem>
+          <Button variant="primary" onClick={() => setIsModalDestructiveOpen(true)}>
+            Show delete modal (Destructive)
+          </Button>
+        </StackItem>
+        <StackItem>
+          <Button variant="primary" onClick={() => setIsModalExtraDestructiveOpen(true)}>
+            Show delete modal (Extra destructive)
+          </Button>
+        </StackItem>
+      </Stack>
+
+      {isModalRecoverableOpen && (
+        <DeleteModal
+          title="Delete [item]?"
+          deleteName="item-name"
+          onDelete={() => {}}
+          deleteVariant="easily-recoverable"
+          onClose={() => setIsModalRecoverableOpen(false)}
+        >
+          The <strong>item-name</strong> item will be deleted.
+        </DeleteModal>
+      )}
+
+      {isModalDestructiveOpen && (
+        <DeleteModal
+          title="Delete [item]?"
+          deleteName="item-name"
+          onDelete={() => {}}
+          deleteVariant="destructive"
+          onClose={() => setIsModalDestructiveOpen(false)}
+        >
+          The <strong>item-name</strong> item will be deleted. [Brief sentence describing consequence of action].
+        </DeleteModal>
+      )}
+
+      {isModalExtraDestructiveOpen && (
+        <DeleteModal
+          title="Delete [item]?"
+          deleteName="item-name"
+          onDelete={() => {}}
+          deleteVariant="extra-destructive"
+          onClose={() => setIsModalExtraDestructiveOpen(false)}
+        >
+          The <strong>item-name</strong> item will be deleted. [Brief sentence describing consequence of action].
+        </DeleteModal>
+      )}
+    </>
+  );
+};