add basic card for non-review states

TheSonOfThomp · TheSonOfThomp · commit b609238aed33 · 2025-12-15T16:06:45.000-05:00
diff --git a/packages/delete-wizard/src/ReviewCard/ReviewCard.styles.ts b/packages/delete-wizard/src/ReviewCard/ReviewCard.styles.ts
@@ -2,11 +2,16 @@ 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;
 `;
diff --git a/packages/delete-wizard/src/ReviewCard/ReviewCard.tsx b/packages/delete-wizard/src/ReviewCard/ReviewCard.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 
+import { Card } from '@leafygreen-ui/card';
 import { ExpandableCard } from '@leafygreen-ui/expandable-card';
+import { Body, Subtitle } from '@leafygreen-ui/typography';
 
 import {
   defaultCompleteDescription,
@@ -12,6 +14,7 @@ import {
 } from './constants';
 import {
   cardContentWrapperStyles,
+  descriptionBodyStyles,
   expandableCardContentStyles,
   reviewCardStyles,
 } from './ReviewCard.styles';
@@ -31,34 +34,43 @@ export const ReviewCard = ({
   children,
   ...rest
 }: ReviewCardProps) => {
+  if (state === ReviewState.Review) {
+    return (
+      <ExpandableCard
+        title={title}
+        description={description}
+        className={reviewCardStyles}
+        contentClassName={expandableCardContentStyles}
+        defaultOpen={false}
+        {...rest}
+      >
+        <div className={cardContentWrapperStyles}>{children}</div>
+      </ExpandableCard>
+    );
+  }
+
   return (
-    <ExpandableCard
-      title={
+    <Card className={reviewCardStyles}>
+      <Subtitle>
         <ReviewCardTitleElement
           state={state}
           title={title}
           completedTitle={completedTitle}
           loadingTitle={loadingTitle}
           errorTitle={errorTitle}
         />
-      }
-      description={
-        <ReviewCardDescription
-          state={state}
-          description={description}
-          completedDescription={completedDescription}
-          loadingDescription={loadingDescription}
-          errorDescription={errorDescription}
-        />
-      }
-      className={reviewCardStyles}
-      contentClassName={expandableCardContentStyles}
-      defaultOpen={false}
-      {...rest}
-    >
-      {state === ReviewState.Review && (
-        <div className={cardContentWrapperStyles}>{children}</div>
+      </Subtitle>
+      {description && (
+        <Body as="div" className={descriptionBodyStyles}>
+          <ReviewCardDescription
+            state={state}
+            description={description}
+            completedDescription={completedDescription}
+            loadingDescription={loadingDescription}
+            errorDescription={errorDescription}
+          />
+        </Body>
       )}
-    </ExpandableCard>
+    </Card>
   );
 };
diff --git a/packages/delete-wizard/src/ReviewCard/utils/ReviewCardDescription.tsx b/packages/delete-wizard/src/ReviewCard/utils/ReviewCardDescription.tsx
@@ -46,7 +46,7 @@ export const ReviewCardDescription = ({
       return (
         <>
           <Spinner
-            size={Size.Small}
+            size={Size.XSmall}
             // direction={'horizontal'}
             // description={loadingDescription}
           />
