From 4c24bdd36e46d3ec2620113c47a633a5851aca63 Mon Sep 17 00:00:00 2001
From: Rafael Youakeem <youakeem@gmail.com>
Date: Wed, 18 Sep 2024 14:42:59 +0200
Subject: [PATCH 1/3] Update Card component size variants

---
 packages/ui/src/components/Card/Card.css.ts | 37 +++++++++++++--------
 packages/ui/src/components/Card/Card.tsx    | 11 +++---
 2 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/packages/ui/src/components/Card/Card.css.ts b/packages/ui/src/components/Card/Card.css.ts
index dbefc9066e..6aa19ff64e 100644
--- a/packages/ui/src/components/Card/Card.css.ts
+++ b/packages/ui/src/components/Card/Card.css.ts
@@ -4,16 +4,14 @@ import { xStack, yStack } from '../../patterns'
 import { tokens } from '../../theme'
 
 const cardPadding = createVar()
+const cardRadius = createVar()
 
 export const cardRoot = recipe({
-  base: [
-    yStack({ gap: 'md' }),
-    {
-      position: 'relative',
-      borderRadius: tokens.radius.xl,
-      padding: cardPadding,
-    },
-  ],
+  base: {
+    position: 'relative',
+    borderRadius: cardRadius,
+    padding: cardPadding,
+  },
   variants: {
     variant: {
       primary: {
@@ -28,17 +26,30 @@ export const cardRoot = recipe({
     },
 
     size: {
-      md: {
-        vars: {
-          [cardPadding]: tokens.space.lg,
+      md: [
+        yStack({ gap: 'xs' }),
+        {
+          vars: {
+            [cardPadding]: tokens.space.md,
+            [cardRadius]: tokens.radius.md,
+          },
         },
-      },
+      ],
+      lg: [
+        yStack({ gap: 'md' }),
+        {
+          vars: {
+            [cardPadding]: tokens.space.lg,
+            [cardRadius]: tokens.radius.xl,
+          },
+        },
+      ],
     },
   },
 
   defaultVariants: {
     variant: 'primary',
-    size: 'md',
+    size: 'lg',
   },
 })
 
diff --git a/packages/ui/src/components/Card/Card.tsx b/packages/ui/src/components/Card/Card.tsx
index 1e82dc3a97..d3b0fcdccb 100644
--- a/packages/ui/src/components/Card/Card.tsx
+++ b/packages/ui/src/components/Card/Card.tsx
@@ -1,20 +1,23 @@
 import { Slot } from '@radix-ui/react-slot'
 import { type RecipeVariants } from '@vanilla-extract/recipes'
 import clsx from 'clsx'
-import { type ComponentProps, type PropsWithChildren } from 'react'
+import { forwardRef, type ComponentProps, type PropsWithChildren } from 'react'
 import { Heading } from '../Heading/Heading'
 import { Text } from '../Text/Text'
 import { cardAside, cardHeader, cardRoot } from './Card.css'
 
 type RootStyleProps = RecipeVariants<typeof cardRoot>
 type RootProps = ComponentProps<'article'> & RootStyleProps
-function CardRoot({ variant, size, className, children, ...props }: RootProps) {
+const CardRoot = forwardRef(function CardRoot(
+  { variant, size, className, children, ...props }: RootProps,
+  ref: RootProps['ref'],
+) {
   return (
-    <article className={clsx(cardRoot({ variant, size }), className)} {...props}>
+    <article className={clsx(cardRoot({ variant, size }), className)} {...props} ref={ref}>
       {children}
     </article>
   )
-}
+})
 
 type HeaderProps = ComponentProps<'header'>
 function CardHeader({ className, children, ...props }: HeaderProps) {

From 2f855846721b36dffef41182aeae905a42f02a73 Mon Sep 17 00:00:00 2001
From: Rafael Youakeem <youakeem@gmail.com>
Date: Wed, 18 Sep 2024 14:57:11 +0200
Subject: [PATCH 2/3] Remove Card radius var

---
 packages/ui/src/components/Card/Card.css.ts | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/ui/src/components/Card/Card.css.ts b/packages/ui/src/components/Card/Card.css.ts
index 6aa19ff64e..effbb28e72 100644
--- a/packages/ui/src/components/Card/Card.css.ts
+++ b/packages/ui/src/components/Card/Card.css.ts
@@ -4,12 +4,10 @@ import { xStack, yStack } from '../../patterns'
 import { tokens } from '../../theme'
 
 const cardPadding = createVar()
-const cardRadius = createVar()
 
 export const cardRoot = recipe({
   base: {
     position: 'relative',
-    borderRadius: cardRadius,
     padding: cardPadding,
   },
   variants: {
@@ -27,20 +25,20 @@ export const cardRoot = recipe({
 
     size: {
       md: [
-        yStack({ gap: 'xs' }),
+        yStack({ gap: 'sm' }),
         {
+          borderRadius: tokens.radius.md,
           vars: {
             [cardPadding]: tokens.space.md,
-            [cardRadius]: tokens.radius.md,
           },
         },
       ],
       lg: [
         yStack({ gap: 'md' }),
         {
+          borderRadius: tokens.radius.xl,
           vars: {
             [cardPadding]: tokens.space.lg,
-            [cardRadius]: tokens.radius.xl,
           },
         },
       ],

From 635e951a344c2b6e17fec4166fb77a181990818a Mon Sep 17 00:00:00 2001
From: Rafael Youakeem <youakeem@gmail.com>
Date: Wed, 18 Sep 2024 14:57:49 +0200
Subject: [PATCH 3/3] Add size controls to Card stories

---
 .../ui/src/components/Card/Card.stories.tsx   | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/packages/ui/src/components/Card/Card.stories.tsx b/packages/ui/src/components/Card/Card.stories.tsx
index 02df90281d..0aaacac836 100644
--- a/packages/ui/src/components/Card/Card.stories.tsx
+++ b/packages/ui/src/components/Card/Card.stories.tsx
@@ -19,6 +19,10 @@ const meta: Meta<Controls> = {
       options: ['primary', 'secondary'],
       control: { type: 'select' },
     },
+    size: {
+      options: ['md', 'lg'],
+      control: { type: 'radio' },
+    },
   },
   parameters: {
     design: {
@@ -35,7 +39,7 @@ type Story = StoryObj<Controls>
 export const Default: Story = {
   render: (args: Controls) => (
     <div style={{ maxWidth: '400px' }}>
-      <Card.Root variant={args.variant}>
+      <Card.Root variant={args.variant} size={args.size}>
         <Card.Aside>
           <IconButton variant="secondary">
             <CrossIcon />
@@ -57,13 +61,14 @@ export const Default: Story = {
   ),
   args: {
     variant: 'primary',
+    size: 'lg',
   },
 }
 
 export const WithBadge: Story = {
   render: (args: Controls) => (
     <div style={{ maxWidth: '400px' }}>
-      <Card.Root variant={args.variant}>
+      <Card.Root variant={args.variant} size={args.size}>
         <Card.Aside>
           <Badge color="green50">20%</Badge>
         </Card.Aside>
@@ -83,13 +88,14 @@ export const WithBadge: Story = {
   ),
   args: {
     variant: 'primary',
+    size: 'lg',
   },
 }
 
 export const WithoutAside: Story = {
   render: (args: Controls) => (
     <div style={{ maxWidth: '400px' }}>
-      <Card.Root variant={args.variant}>
+      <Card.Root variant={args.variant} size={args.size}>
         <Card.Header>
           <Card.Media>
             <BasePillow fill={tokens.colors.amber300} />
@@ -106,13 +112,14 @@ export const WithoutAside: Story = {
   ),
   args: {
     variant: 'primary',
+    size: 'lg',
   },
 }
 
 export const WithoutPillow: Story = {
   render: (args: Controls) => (
     <div style={{ maxWidth: '400px' }}>
-      <Card.Root variant={args.variant}>
+      <Card.Root variant={args.variant} size={args.size}>
         <Card.Header>
           <Card.Heading>
             <Card.Title>Homeowner Insurance</Card.Title>
@@ -126,13 +133,14 @@ export const WithoutPillow: Story = {
   ),
   args: {
     variant: 'primary',
+    size: 'lg',
   },
 }
 
 export const Secondary: Story = {
   render: (args: Controls) => (
     <div style={{ maxWidth: '400px' }}>
-      <Card.Root variant={args.variant}>
+      <Card.Root variant={args.variant} size={args.size}>
         <Tooltip.Root>
           <Card.Aside>
             <Tooltip.Trigger>
@@ -151,5 +159,6 @@ export const Secondary: Story = {
   ),
   args: {
     variant: 'secondary',
+    size: 'md',
   },
 }