diff --git a/packages/gamut/src/Card/elements.tsx b/packages/gamut/src/Card/elements.tsx index 64a6184fa7..d538b8b18f 100644 --- 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)( ); export const StaticCardWrapper = styled( - Background, - styledOptions + Background )(cardVariants, shadowVariants, hoverState); // const PatternWrapper = styled(Box)(patternHoverState); @@ -74,11 +73,12 @@ export const CardWrapper: React.FC = ({ /> )} {children} diff --git a/packages/gamut/src/Card/styles.tsx b/packages/gamut/src/Card/styles.tsx index e6402c109f..7c5d02fccb 100644 --- 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 index a4fe464931..7064a9c238 100644 --- 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 ; + export type CardAnchorProps = StyleProps & WithChildrenProp;