Modify Card component to accept header (#417)

* Add BoxWithHeading component

x

* Address feedback to utilize existing Card component

* Address feedback round 2

src/system/Card/Card.stories.tsx

@@ -8,4 +8,22 @@ export default {
 	component: Card,
 };
 
-export const Default = () => <Card> Hello </Card>;
+export const Default = () => <Card>Hello</Card>;
+
+export const WithHeader = () => <Card header="Header">This is a card with a header.</Card>;
+
+export const DefaultSecondary = () => <Card variant="secondary">Hello</Card>;
+
+export const WithHeaderSecondary = () => (
+	<Card header="Header" variant="secondary">
+		This is a card with a header.
+	</Card>
+);
+
+export const DefaultIndent = () => <Card variant="indent">Hello</Card>;
+
+export const WithHeaderIndent = () => (
+	<Card header="Header" variant="indent">
+		This is a card with a header.
+	</Card>
+);

src/system/Card/Card.test.tsx

@@ -29,4 +29,15 @@ describe( '<Card />', () => {
 		// Check for accessibility issues
 		expect( await axe( container ) ).toHaveNoViolations();
 	} );
+
+	it( 'renders the Card component with a header', async () => {
+		const { container } = render( <Card header="Card Header">Card text</Card> );
+
+		expect( screen.getByText( 'Card Header' ) ).toBeInTheDocument();
+
+		expect( screen.getByText( 'Card text' ) ).toBeInTheDocument();
+
+		// Check for accessibility issues
+		expect( await axe( container ) ).toHaveNoViolations();
+	} );
 } );

src/system/Card/Card.tsx

@@ -1,3 +1,5 @@
+/** @jsxImportSource theme-ui */
+
 /**
  * External dependencies
  */
@@ -10,30 +12,57 @@ import { BoxProps } from 'theme-ui';
  */
 import { Box } from '..';
 
+export enum CardVariant {
+	'primary',
+	'secondary',
+	'indent',
+}
+
 export interface CardProps {
-	variant?: string;
+	variant?: keyof typeof CardVariant;
 	sx?: BoxProps[ 'sx' ];
 	className?: Argument;
+	header?: React.ReactNode;
+	children?: React.ReactNode;
 }
 
 type CardBoxProps = CardProps & BoxProps;
 
 export const Card = forwardRef< HTMLElement, CardBoxProps >(
 	(
-		{ variant = 'primary', sx = {}, className, ...props }: CardBoxProps,
+		{ variant = 'primary', header, sx = {}, className, children, ...props }: CardProps,
 		ref: Ref< HTMLElement >
-	) => (
-		<Box
-			ref={ ref }
-			sx={ {
-				// pass variant prop to sx
-				variant: `cards.${ variant }`,
-				...sx,
-			} }
-			className={ classNames( 'vip-card-component', className ) }
-			{ ...props }
-		/>
-	)
+	) => {
+		return (
+			<Box
+				ref={ ref }
+				sx={ {
+					// pass variant prop to sx
+					variant: `cards.${ variant }`,
+					...sx,
+				} }
+				className={ classNames( 'vip-card-component', className ) }
+				{ ...props }
+			>
+				{ header && (
+					<div
+						sx={ {
+							variant: `cards.${ variant }.header`,
+						} }
+					>
+						{ header }
+					</div>
+				) }
+				<div
+					sx={ {
+						variant: `cards.${ variant }.children`,
+					} }
+				>
+					{ children }
+				</div>
+			</Box>
+		);
+	}
 );
 
 Card.displayName = 'Card';

src/system/theme/index.js

@@ -250,23 +250,50 @@ export default {
 
 	cards: {
 		primary: {
-			padding: 3,
 			borderRadius: 2,
 			backgroundColor: 'layer.2',
 			boxShadow: 'low',
+			header: {
+				backgroundColor: 'layer.1',
+				borderTopLeftRadius: 2,
+				borderTopRightRadius: 2,
+				p: 3,
+				fontWeight: 'bold',
+				display: 'flex',
+			},
+			children: {
+				p: 3,
+			},
 		},
 		secondary: {
 			borderRadius: 2,
-			p: 3,
 			boxShadow: 'none',
 			border: '1px solid',
 			borderColor: 'borders.2',
+			header: {
+				backgroundColor: 'layer.1',
+				borderTopLeftRadius: 2,
+				borderTopRightRadius: 2,
+				p: 3,
+				fontWeight: 'bold',
+				display: 'flex',
+			},
+			children: {
+				p: 3,
+			},
 		},
 		indent: {
 			borderRadius: 2,
-			p: 3,
 			boxShadow: 'none',
 			backgroundColor: 'backgroundMuted',
+			header: {
+				display: 'flex',
+				fontWeight: 'bold',
+				p: 3,
+			},
+			children: {
+				p: 3,
+			},
 		},
 	},