UXE-37: feat(Delete Wizard) delete action cards

.changeset/delete-wizard-cards.md

@@ -0,0 +1,29 @@
+---
+'@leafygreen-ui/delete-wizard': minor
+---
+
+Creates reusable `RecommendationCard` & `ReviewCard` for Deletion Wizards
+
+```tsx
+<RecommendationCard
+  category="Things"
+  title="Do a thing"
+  description="Before deleting, you need to do a thing."
+  link={<Link href="https://mongodb.design">mongodb.design</Link>}
+/>,
+```
+
+```tsx
+<ReviewCard
+  title={
+    <ReviewCardTitleWithCountEmphasis
+      verb="Terminate"
+      count={6}
+      resource="clusters"
+    />
+  }
+  description="Completing this action will terminate all clusters"
+>
+  <Table>...</Table>
+</ReviewCard>
+```

.changeset/delete-wizard.md

@@ -0,0 +1,64 @@
+---
+'@leafygreen-ui/delete-wizard': minor
+---
+
+Initial release of `DeleteWizard`.
+
+```tsx
+<DeleteWizard
+  onStepChange={...}
+  onCancel={...}
+  onDelete={...}
+>
+  <DeleteWizard.Header
+    pageTitle="Demo Delete Wizard"
+  />
+  <DeleteWizard.Step requiresAcknowledgement>
+    <DeleteWizard.StepContent>
+      <div>Step 1 contents<div>
+    </DeleteWizard.StepContent>
+    <DeleteWizard.Footer
+      backButtonText="Go back"
+      cancelButtonText="Cancel flow"
+      primaryButtonText='Continue to next step'
+    />
+  </DeleteWizard.Step>
+
+  <DeleteWizard.Step requiresAcknowledgement>
+    <DeleteWizard.StepContent>
+      <div>Step 2 contents<div>
+    </DeleteWizard.StepContent>
+    <DeleteWizard.Footer
+      backButtonText="Go back"
+      cancelButtonText="Cancel flow"
+      primaryButtonText='Delete my thing'
+    />
+  </DeleteWizard.Step>
+</DeleteWizard>
+```
+
+### DeleteWizard
+Establishes a context, and only renders the `activeStep` (managed internally, or provided with the `activeStep` prop). Accepts a `DeleteWizard.Header` and any number of `DeleteWizard.Step`s as children. 
+
+`DeleteWizard` and all sub-components include template styling. 
+
+### DeleteWizard.Header
+A convenience wrapper around `CanvasHeader`
+
+### DeleteWizard.Step
+A convenience wrapper around `Wizard.Step` to ensure the correct context. 
+Like the basic `Wizard.Step`,  of `requiresAcknowledgement` is true, the step must have `isAcknowledged` set in context, (or passed in as a controlled prop) for the Footer's primary button to be enabled. (see the Wizard and DeleteWizard demos in Storybook)
+
+
+### DeleteWizard.StepContent
+A styled `div` for use inside a `DeleteWizard.Step` to ensure proper page scrolling and footer positioning
+
+### DeleteWizard.Footer
+A wrapper around `Wizard.Footer` with embedded styles and convenience props for the DeleteWizard template. 
+`DeleteWizard.Footer` accepts optional `backButtonText`, `cancelButtonText` and `primaryButtonText` props for simpler wizard creation. 
+The primary button variant is defined based on the `activeStep`— `"danger"` for the final steps, and `"primary"` for all preceding steps.
+Also defines the `leftGlyph` to <TrashIcon /> for the final step.
+
+You can override this behavior by providing the button props object (see FormFooter).
+
+Use the top level `onDelete`, `onCancel` and `onStepChange` callbacks to handle footer button clicks.

.changeset/wizard-exports.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/wizard': patch
+---
+
+Exports `WizardSubComponentProperties` type

packages/delete-wizard/README.md

@@ -0,0 +1,80 @@
+# Delete Wizard
+
+![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/delete-wizard.svg)
+
+#### [View on MongoDB.design](https://www.mongodb.design/component/delete-wizard/live-example/)
+
+## Installation
+
+### PNPM
+
+```shell
+pnpm add @leafygreen-ui/delete-wizard
+```
+
+### Yarn
+
+```shell
+yarn add @leafygreen-ui/delete-wizard
+```
+
+### NPM
+
+```shell
+npm install @leafygreen-ui/delete-wizard
+```
+
+```tsx
+<DeleteWizard>
+  <DeleteWizard.Header
+    pageTitle="Demo Delete Wizard"
+  />
+  <DeleteWizard.Step requiresAcknowledgement>
+    <DeleteWizard.StepContent>
+      <div>Step 1 contents<div>
+    </DeleteWizard.StepContent>
+    <DeleteWizard.Footer
+      primaryButtonProps={{
+        children: 'Continue to next step',
+      }}
+    />
+  </DeleteWizard.Step>
+
+  <DeleteWizard.Step requiresAcknowledgement>
+    <DeleteWizard.StepContent>
+      <div>Step 2 contents<div>
+    </DeleteWizard.StepContent>
+    <DeleteWizard.Footer
+      primaryButtonProps={{
+        leftGlyph: <TrashIcon />,
+        variant: 'danger',
+        children: 'Delete my thing',
+        onClick: handleDelete,
+      }}
+    />
+  </DeleteWizard.Step>
+</DeleteWizard>
+```
+
+### DeleteWizard
+
+Establishes a context, and only renders the `activeStep` (managed internally, or provided with the `activeStep` prop). Accepts a `DeleteWizard.Header` and any number of `DeleteWizard.Step`s as children.
+
+`DeleteWizard` and all sub-components include template styling.
+
+### DeleteWizard.Header
+
+A convenience wrapper around `CanvasHeader`
+
+### DeleteWizard.Step
+
+A convenience wrapper around `Wizard.Step` to ensure the correct context.
+Like the basic `Wizard.Step`, of `requiresAcknowledgement` is true, the step must have `isAcknowledged` set in context, (or passed in as a controlled prop) for the Footer's primary button to be enabled. (see the Wizard and DeleteWizard demos in Storybook)
+
+### DeleteWizard.StepContent
+
+A styled `div` for use inside a `DeleteWizard.Step` to ensure proper page scrolling and footer positioning
+
+### DeleteWizard.Footer
+
+A wrapper around Wizard.Footer with embedded styles for the DeleteWizard template

packages/delete-wizard/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@leafygreen-ui/delete-wizard",
+  "version": "0.0.1",
+  "description": "LeafyGreen UI Kit Delete Wizard",
+  "main": "./dist/umd/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/types/index.d.ts",
+  "license": "Apache-2.0",
+  "exports": {
+    ".": {
+      "require": "./dist/umd/index.js",
+      "import": "./dist/esm/index.js",
+      "types": "./dist/types/index.d.ts"
+    },
+    "./testing": {
+      "require": "./dist/umd/testing/index.js",
+      "import": "./dist/esm/testing/index.js",
+      "types": "./dist/types/testing/index.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "lg-build bundle",
+    "tsc": "lg-build tsc",
+    "docs": "lg-build docs"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@leafygreen-ui/badge": "workspace:^",
+    "@leafygreen-ui/canvas-header": "workspace:^",
+    "@leafygreen-ui/card": "workspace:^",
+    "@leafygreen-ui/expandable-card": "workspace:^",
+    "@leafygreen-ui/compound-component": "workspace:^",
+    "@leafygreen-ui/form-footer": "workspace:^",
+    "@leafygreen-ui/icon": "workspace:^",
+    "@leafygreen-ui/lib": "workspace:^",
+    "@leafygreen-ui/loading-indicator": "workspace:^",
+    "@leafygreen-ui/skeleton-loader": "workspace:^",
+    "@leafygreen-ui/tokens": "workspace:^",
+    "@leafygreen-ui/typography": "workspace:^",
+    "@leafygreen-ui/wizard": "workspace:^",
+    "@lg-tools/test-harnesses": "workspace:^"
+  },
+  "peerDependencies": {
+    "@leafygreen-ui/emotion": "workspace:^5.0.0",
+    "@leafygreen-ui/leafygreen-provider": "workspace:^5.0.0 || ^4.0.0 || ^3.2.0"
+  },
+  "homepage": "https://github.com/mongodb/leafygreen-ui/tree/main/packages/delete-wizard",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mongodb/leafygreen-ui"
+  },
+  "bugs": {
+    "url": "https://jira.mongodb.org/projects/LG/summary"
+  },
+  "devDependencies": {
+    "@faker-js/faker": "^10.1.0"
+  }
+}

packages/delete-wizard/src/DeleteWizard.stories.tsx

@@ -0,0 +1,144 @@
+/* eslint-disable no-console */
+import React from 'react';
+import { faker } from '@faker-js/faker';
+import { StoryObj } from '@storybook/react';
+import { userEvent, within } from '@storybook/test';
+
+import { css } from '@leafygreen-ui/emotion';
+import BeakerIcon from '@leafygreen-ui/icon/Beaker';
+import { BackLink, Body } from '@leafygreen-ui/typography';
+
+import { ExampleStepContent } from './testUtils/ExampleStepContent';
+import { DeleteWizard } from '.';
+
+faker.seed(0);
+const demoResourceName = faker.database.mongodbObjectId();
+const demoSteps = [
+  {
+    description: faker.lorem.paragraph(),
+    content: faker.lorem.paragraphs(24),
+  },
+  {
+    description: faker.lorem.paragraph(),
+    content: faker.lorem.paragraphs(24),
+  },
+];
+
+export default {
+  title: 'Templates/DeleteWizard',
+  component: DeleteWizard,
+};
+
+export const LiveExample: StoryObj<typeof DeleteWizard> = {
+  parameters: {
+    controls: {
+      exclude: ['children', 'onStepChange'],
+    },
+    chromatic: {
+      disableSnapshot: true,
+    },
+  },
+  args: {
+    activeStep: undefined,
+  },
+  render: args => {
+    const handleCancel = () => {
+      console.log('[STORYBOOK]: Cancelling wizard. Reloading iFrame');
+      window.location.reload();
+    };
+
+    const handleDelete = () => {
+      alert('[STORYBOOK]: Deleting thing!');
+      console.log('[STORYBOOK]: Deleting thing! Reloading iFrame');
+      window.location.reload();
+    };
+
+    const handleStepChange = (step: number) => {
+      console.log('[STORYBOOK] step changed to ', step);
+    };
+
+    return (
+      <div
+        className={css`
+          margin: -100px;
+        `}
+      >
+        <DeleteWizard
+          activeStep={args.activeStep}
+          onStepChange={handleStepChange}
+          onCancel={handleCancel}
+          onDelete={handleDelete}
+          className={css`
+            height: 100vh;
+            width: 100vw;
+          `}
+        >
+          <DeleteWizard.Header
+            pageTitle="Demo Delete Wizard"
+            resourceName={demoResourceName}
+            resourceIcon={<BeakerIcon />}
+            backLink={<BackLink href="#">Back</BackLink>}
+            className={css`
+              margin-inline: 72px;
+            `}
+          />
+          <DeleteWizard.Step>
+            <ExampleStepContent
+              index={0}
+              description={demoSteps[0].description}
+              content={demoSteps[0].content.split('\n').map((p, i) => (
+                <Body key={i}>{p}</Body>
+              ))}
+            />
+            <DeleteWizard.Footer
+              cancelButtonText="Cancel wizard"
+              primaryButtonText="Continue to next step"
+            />
+          </DeleteWizard.Step>
+
+          <DeleteWizard.Step requiresAcknowledgement>
+            <ExampleStepContent
+              index={1}
+              description={demoSteps[1].description}
+              content={demoSteps[1].content.split('\n').map((p, i) => (
+                <Body key={i}>{p}</Body>
+              ))}
+            />
+            <DeleteWizard.Footer
+              backButtonText="Go back"
+              cancelButtonText="Cancel wizard"
+              primaryButtonText="Delete the thing"
+            />
+          </DeleteWizard.Step>
+        </DeleteWizard>
+      </div>
+    );
+  },
+};
+
+export const Step1: StoryObj<typeof DeleteWizard> = {
+  args: {
+    activeStep: 0,
+  },
+  render: LiveExample.render,
+};
+
+export const Step2Default: StoryObj<typeof DeleteWizard> = {
+  args: {
+    activeStep: 1,
+  },
+  render: LiveExample.render,
+};
+
+export const Step2Acknowledged: StoryObj<typeof DeleteWizard> = {
+  args: {
+    activeStep: 1,
+  },
+  play: ({ canvasElement }) => {
+    const checkbox = within(canvasElement).getByTestId(
+      'acknowledgement-checkbox',
+    );
+    userEvent.click(checkbox);
+  },
+  render: LiveExample.render,
+};