Merge pull request #4732 from HedvigInsurance/09-18-update-card-size

tech: Update Card component size variants
HedvigInsurance · Sep 19, 2024 · 0323db5 · 0323db5
2 parents e0d99b4 + 635e951
commit 0323db5
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 22 deletions.
diff --git a/packages/ui/src/components/Card/Card.css.ts b/packages/ui/src/components/Card/Card.css.ts
@@ -6,14 +6,10 @@ import { tokens } from '../../theme'
 const cardPadding = createVar()
 
 export const cardRoot = recipe({
-  base: [
-    yStack({ gap: 'md' }),
-    {
-      position: 'relative',
-      borderRadius: tokens.radius.xl,
-      padding: cardPadding,
-    },
-  ],
+  base: {
+    position: 'relative',
+    padding: cardPadding,
+  },
   variants: {
     variant: {
       primary: {
@@ -28,17 +24,30 @@ export const cardRoot = recipe({
     },
 
     size: {
-      md: {
-        vars: {
-          [cardPadding]: tokens.space.lg,
+      md: [
+        yStack({ gap: 'sm' }),
+        {
+          borderRadius: tokens.radius.md,
+          vars: {
+            [cardPadding]: tokens.space.md,
+          },
         },
-      },
+      ],
+      lg: [
+        yStack({ gap: 'md' }),
+        {
+          borderRadius: tokens.radius.xl,
+          vars: {
+            [cardPadding]: tokens.space.lg,
+          },
+        },
+      ],
     },
   },
 
   defaultVariants: {
     variant: 'primary',
-    size: 'md',
+    size: 'lg',
   },
 })
 

diff --git 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',
   },
 }
diff --git 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) {