added box props

Codecademy · Feb 25, 2025 · a532ae5 · a532ae5
1 parent 2ef51b3
commit a532ae5
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 6 deletions.
diff --git a/packages/gamut/src/Card/elements.tsx b/packages/gamut/src/Card/elements.tsx
@@ -1,5 +1,5 @@
 import { CheckerDense } from '@codecademy/gamut-patterns';
-import { Background, Colors, styledOptions } from '@codecademy/gamut-styles';
+import { Background, Colors } from '@codecademy/gamut-styles';
 import styled from '@emotion/styled';
 import { useState } from 'react';
 
@@ -23,8 +23,7 @@ export const DynamicCardWrapper = styled(Box)<CardWrapperProps>(
 );
 
 export const StaticCardWrapper = styled(
-  Background,
-  styledOptions
+  Background
 )<CardWrapperProps>(cardVariants, shadowVariants, hoverState);
 
 // const PatternWrapper = styled(Box)(patternHoverState);
@@ -74,11 +73,12 @@ export const CardWrapper: React.FC<CardWrapperProps> = ({
         />
       )}
       <SelectedWrapper
+        {...rest}
         bg={variant !== 'default' ? (variant as Colors) : 'white'}
         variant={variant}
         shadow={shadow}
         isInteractive={isInteractive}
-        {...rest}
+
       >
         {children}
       </SelectedWrapper>

diff --git a/packages/gamut/src/Card/styles.tsx b/packages/gamut/src/Card/styles.tsx
@@ -6,7 +6,7 @@ export const cardVariants = variant({
   defaultVariant: 'default',
   base: {
     border: 1,
-    borderRadius: 'md',
+    borderRadius: 'none',
     p: 16,
     color: 'text',
     maxWidth: '100%',
@@ -50,6 +50,7 @@ export const shadowVariants = variant({
 
 export const hoverState = states({
   isInteractive: {
+    borderRadius: 'md',
     '&:hover': {
       transition: 'box-shadow 200ms ease',
       boxShadow: `0px 0px ${theme.colors['shadow-primary']}`,

diff --git a/packages/gamut/src/Card/types.tsx b/packages/gamut/src/Card/types.tsx
@@ -1,6 +1,8 @@
 import { PatternProps } from '@codecademy/gamut-patterns';
 import { StyleProps } from '@codecademy/variance';
+import { ComponentProps } from 'react';
 
+import { Box } from '../Box';
 import { WithChildrenProp } from '../utils';
 import {
   cardAnchorVariants,
@@ -18,10 +20,12 @@ export interface CardWrapperProps
   isHovering?: boolean;
 }
 
-export interface CardProps extends CardWrapperProps {
+export interface BaseCardProps extends CardWrapperProps {
   href?: string;
   onClick?: () => void;
 }
 
+export type CardProps = BaseCardProps & ComponentProps<typeof Box> ;
+
 export type CardAnchorProps = StyleProps<typeof cardAnchorVariants> &
   WithChildrenProp;