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/wizard-exports.md

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

packages/delete-wizard/package.json

@@ -27,16 +27,25 @@
     "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/emotion": "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",
@@ -46,7 +55,6 @@
     "url": "https://jira.mongodb.org/projects/LG/summary"
   },
   "devDependencies": {
-    "@faker-js/faker": "^10.1.0",
-    "@leafygreen-ui/typography": "workspace:^"
+    "@faker-js/faker": "^10.1.0"
   }
 }

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

@@ -53,7 +53,7 @@ export const LiveExample: StoryObj<typeof DeleteWizard> = {
       window.location.reload();
     };
 
-    const handleStepChange = step => {
+    const handleStepChange = (step: number) => {
       console.log('[STORYBOOK] step changed to ', step);
     };
 

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+
+import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
+import { Link } from '@leafygreen-ui/typography';
+
+import { RecommendationCard } from './RecommendationCard';
+
+export default {
+  title: 'Templates/DeleteWizard/RecommendationCard',
+  component: RecommendationCard,
+  args: {
+    category: 'Things',
+    title: 'Do a thing',
+    description: 'Before deleting, you need to do a thing.',
+    link: <Link href="https://mongodb.design">mongodb.design</Link>,
+  },
+};
+
+export const LiveExample: StoryObj<typeof RecommendationCard> = {
+  render: args => <RecommendationCard {...args} />,
+};
+export const DarkMode: StoryObj<typeof RecommendationCard> = {
+  args: {
+    // @ts-expect-error darkMode is not a prop on RecommendationCard
+    darkMode: true,
+  },
+  render: args => (
+    <LeafyGreenProvider darkMode>
+      <RecommendationCard {...args} />
+    </LeafyGreenProvider>
+  ),
+};

packages/delete-wizard/src/RecommendationCard/RecommendationCard.styles.ts

@@ -0,0 +1,10 @@
+import { css } from '@leafygreen-ui/emotion';
+import { spacing } from '@leafygreen-ui/tokens';
+
+export const titleStyles = css`
+  font-weight: 600;
+  margin-block: ${spacing[200]}px;
+`;
+export const descriptionStyles = css`
+  margin-block: ${spacing[200]}px;
+`;

packages/delete-wizard/src/RecommendationCard/RecommendationCard.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { Badge } from '@leafygreen-ui/badge';
+import { Card } from '@leafygreen-ui/card';
+import { BaseFontSize } from '@leafygreen-ui/tokens';
+import { Body, Description } from '@leafygreen-ui/typography';
+
+import { descriptionStyles, titleStyles } from './RecommendationCard.styles';
+import type { RecommendationCardProps } from './RecommendationCard.types';
+
+export const RecommendationCard = ({
+  category,
+  title,
+  description,
+  link,
+}: RecommendationCardProps) => {
+  return (
+    <Card>
+      <Badge>{category}</Badge>
+      <Body baseFontSize={BaseFontSize.Body2} className={titleStyles}>
+        {title}
+      </Body>
+      <Description className={descriptionStyles}>{description}</Description>
+      {link}
+    </Card>
+  );
+};

packages/delete-wizard/src/RecommendationCard/RecommendationCard.types.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+
+export interface RecommendationCardProps {
+  category: string;
+  title: string;
+  description: string;
+  link: ReactNode;
+}

packages/delete-wizard/src/RecommendationCard/index.ts

@@ -0,0 +1,2 @@
+export { RecommendationCard } from './RecommendationCard';
+export { type RecommendationCardProps } from './RecommendationCard.types';

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

@@ -0,0 +1,171 @@
+import React from 'react';
+import { faker } from '@faker-js/faker';
+import { StoryMetaType } from '@lg-tools/storybook-utils';
+import { StoryObj } from '@storybook/react';
+
+import { css } from '@leafygreen-ui/emotion';
+import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
+
+import { defaultLoadingDescription } from './constants';
+import { ReviewCard } from './ReviewCard';
+import { ReviewState } from './ReviewCard.types';
+import { ReviewCardTitleWithCountEmphasis } from './utils';
+
+faker.seed(0);
+
+export default {
+  title: 'Templates/DeleteWizard/ReviewCard',
+  component: ReviewCard,
+  parameters: {
+    default: 'LiveExample',
+  },
+  argTypes: {
+    title: {
+      control: 'text',
+    },
+    loadingTitle: {
+      control: 'text',
+    },
+    state: {
+      control: 'select',
+      options: Object.values(ReviewState),
+    },
+  },
+  args: {
+    state: ReviewState.Review,
+    title: (
+      <ReviewCardTitleWithCountEmphasis
+        verb="Terminate"
+        count={6}
+        resource="clusters"
+      />
+    ),
+    description: 'Completing this action will terminate all clusters',
+    errorTitle: 'Error loading clusters',
+    errorDescription: 'Could not fetch clusters. Please try again later',
+    loadingTitle: 'Loading cluster data',
+    loadingDescription: defaultLoadingDescription,
+    completedTitle: 'No clusters detected',
+    completedDescription: 'Required action complete',
+    children: faker.lorem.paragraphs(4),
+  },
+} satisfies StoryMetaType<typeof ReviewCard>;
+
+export const LiveExample: StoryObj<typeof ReviewCard> = {
+  render: ({ children, ...args }) => (
+    <ReviewCard {...args}>
+      <div
+        className={css`
+          padding: 16px 24px;
+        `}
+      >
+        {children}
+      </div>
+    </ReviewCard>
+  ),
+};
+
+export const Review: StoryObj<typeof ReviewCard> = {
+  parameters: {
+    controls: {
+      exclude: [
+        'state',
+        'errorTitle',
+        'errorDescription',
+        'loadingTitle',
+        'loadingDescription',
+        'completedTitle',
+        'completedDescription',
+      ],
+    },
+  },
+  args: {
+    state: ReviewState.Review,
+  },
+  render: LiveExample.render,
+};
+
+export const ReviewDarkMode: StoryObj<typeof ReviewCard> = {
+  parameters: {
+    controls: {
+      exclude: [
+        'state',
+        'errorTitle',
+        'errorDescription',
+        'loadingTitle',
+        'loadingDescription',
+        'completedTitle',
+        'completedDescription',
+      ],
+    },
+  },
+  args: {
+    darkMode: true,
+    state: ReviewState.Review,
+  },
+  render: args => (
+    <LeafyGreenProvider darkMode>
+      <ReviewCard {...args}></ReviewCard>
+    </LeafyGreenProvider>
+  ),
+};
+
+export const Loading: StoryObj<typeof ReviewCard> = {
+  parameters: {
+    controls: {
+      exclude: [
+        'state',
+        'title',
+        'description',
+        'errorTitle',
+        'errorDescription',
+        'completedTitle',
+        'completedDescription',
+      ],
+    },
+  },
+  args: {
+    state: ReviewState.Loading,
+  },
+  render: LiveExample.render,
+};
+
+export const Complete: StoryObj<typeof ReviewCard> = {
+  parameters: {
+    controls: {
+      exclude: [
+        'state',
+        'title',
+        'description',
+        'errorTitle',
+        'errorDescription',
+        'loadingTitle',
+        'loadingDescription',
+      ],
+    },
+  },
+  args: {
+    state: ReviewState.Complete,
+  },
+  render: LiveExample.render,
+};
+
+export const Error: StoryObj<typeof ReviewCard> = {
+  parameters: {
+    controls: {
+      exclude: [
+        'state',
+        'title',
+        'description',
+        'completedTitle',
+        'completedDescription',
+        'loadingTitle',
+        'loadingDescription',
+      ],
+    },
+  },
+  args: {
+    state: ReviewState.Error,
+  },
+  render: LiveExample.render,
+};

packages/delete-wizard/src/ReviewCard/ReviewCard.styles.ts

@@ -0,0 +1,22 @@
+import { css } from '@leafygreen-ui/emotion';
+import { spacing } from '@leafygreen-ui/tokens';
+
+export const reviewCardStyles = css`
+  width: 100%;
+  & h6 {
+    display: block;
+  }
+`;
+
+export const descriptionBodyStyles = css`
+  margin-top: 4px;
+`;
+
+export const expandableCardContentStyles = css`
+  padding: unset;
+`;
+
+export const cardContentWrapperStyles = css`
+  padding-bottom: ${spacing[400]}px;
+  overflow: hidden;
+`;