feat(components): add border option for Card component

Author: enjojoy

packages/components/src/components/Card/Card.tsx

@@ -34,13 +34,15 @@ export const allowedCardFrameProps = [
 ] as const satisfies FramePropsKeys[];
 type AllowedFrameProps = Pick<FrameProps, (typeof allowedCardFrameProps)[number]>;
 
-const Container = styled.div<{ $fillType: FillType } & TransientProps<AllowedFrameProps>>`
+const Container = styled.div<
+    { $fillType: FillType; $border?: string } & TransientProps<AllowedFrameProps>
+>`
     width: 100%;
     border-radius: ${borders.radii.md};
     background: ${({ theme, $fillType }) =>
         $fillType !== 'none' && theme.backgroundTertiaryDefaultOnElevation0};
     padding: ${spacingsPx.xxxs};
-
+    border: ${({ $border }) => $border || 'none'};
     ${withFrameProps}
 `;
 
@@ -57,6 +59,7 @@ const CardContainer = styled.div<
         $isClickable: boolean;
         $variant?: CardVariant;
         $hasLabel: boolean;
+        $border?: string;
     } & TransientProps<AllowedFrameProps>
 >`
     width: 100%;
@@ -65,6 +68,7 @@ const CardContainer = styled.div<
     position: relative;
     padding: ${mapPaddingTypeToPadding};
     border-radius: ${borders.radii.md};
+    border: ${({ $border }) => $border || 'none'};
     transition:
         background 0.3s,
         box-shadow 0.2s,
@@ -103,6 +107,7 @@ type CommonCardProps = AccessibilityProps & {
     label?: ReactNode;
     variant?: CardVariant;
     'data-testid'?: string;
+    border?: string;
 };
 
 export type CardPropsWithTransientProps = CommonCardProps & TransientProps<AllowedFrameProps>;
@@ -122,6 +127,7 @@ const CardComponent = forwardRef<HTMLDivElement, CardPropsWithTransientProps>(
             label,
             variant,
             'data-testid': dataTest,
+            border,
             ...rest
         },
         ref,
@@ -137,6 +143,7 @@ const CardComponent = forwardRef<HTMLDivElement, CardPropsWithTransientProps>(
                 $isClickable={Boolean(onClick)}
                 $variant={variant}
                 $hasLabel={Boolean(label)}
+                $border={border}
                 onClick={onClick}
                 onMouseEnter={onMouseEnter}
                 className={className}
@@ -165,6 +172,7 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(
             children,
             variant,
             'data-testid': dataTest,
+            border,
             ...rest
         },
         ref,
@@ -181,16 +189,17 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(
             label,
             variant,
             'data-testid': dataTest,
+            border,
         };
         const frameProps = pickAndPrepareFrameProps(rest, allowedCardFrameProps);
 
         return label ? (
-            <Container $fillType={fillType} {...frameProps}>
+            <Container $fillType={fillType} {...frameProps} $border={border}>
                 <LabelContainer $paddingType={paddingType}>{label}</LabelContainer>
                 <CardComponent {...commonProps} ref={ref} />
             </Container>
         ) : (
-            <CardComponent {...commonProps} {...frameProps} ref={ref} />
+            <CardComponent {...commonProps} {...frameProps} border={border} ref={ref} />
         );
     },
 );