feat(components): add border to Card

trezor · Jan 20, 2025 · a56ae2b · a56ae2b
1 parent 2946049
commit a56ae2b
Showing 1 changed file with 12 additions and 3 deletions.
diff --git a/packages/components/src/components/Card/Card.tsx b/packages/components/src/components/Card/Card.tsx
@@ -34,12 +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 +60,7 @@ const CardContainer = styled.div<
         $isClickable: boolean;
         $variant?: CardVariant;
         $hasLabel: boolean;
+        $border?: string;
     } & TransientProps<AllowedFrameProps>
 >`
     width: 100%;
@@ -65,6 +69,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,
@@ -102,6 +107,7 @@ type CommonCardProps = AccessibilityProps & {
     className?: string;
     label?: ReactNode;
     variant?: CardVariant;
+    border?: string;
     'data-testid'?: string;
 };
 
@@ -121,6 +127,7 @@ const CardComponent = forwardRef<HTMLDivElement, CardPropsWithTransientProps>(
             tabIndex,
             label,
             variant,
+            border,
             'data-testid': dataTest,
             ...rest
         },
@@ -137,6 +144,7 @@ const CardComponent = forwardRef<HTMLDivElement, CardPropsWithTransientProps>(
                 $isClickable={Boolean(onClick)}
                 $variant={variant}
                 $hasLabel={Boolean(label)}
+                $border={border}
                 onClick={onClick}
                 onMouseEnter={onMouseEnter}
                 className={className}
@@ -163,6 +171,7 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(
             className,
             tabIndex,
             children,
+            border,
             variant,
             'data-testid': dataTest,
             ...rest
@@ -185,12 +194,12 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(
         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} ref={ref} border={border} />
         );
     },
 );