fix type.

packages/components/CONTRIBUTING.md

@@ -364,7 +364,7 @@ Primary.args = {
 
 A great tool to use when writing stories is the [Storybook Controls addon](https://storybook.js.org/addons/@storybook/addon-controls). Ideally props should be exposed by using this addon, which provides a graphical UI to interact dynamically with the component without needing to write code. Avoid using [Knobs](https://storybook.js.org/addons/@storybook/addon-knobs) for new stories, as this addon is deprecated.
 
-The default value of each control should coincide with the default value of the props (i.e. it should be `undefined` if a prop is not required). A story should, therefore, also explicitly show how values from the Context System are applied to (sub)components. A good example of how this may look like is the [`Card` story](https://wordpress.github.io/gutenberg/?path=/story/components-card--default) (code [here](/packages/components/src/card/stories/index.js)).
+The default value of each control should coincide with the default value of the props (i.e. it should be `undefined` if a prop is not required). A story should, therefore, also explicitly show how values from the Context System are applied to (sub)components. A good example of how this may look like is the [`Card` story](https://wordpress.github.io/gutenberg/?path=/story/components-card--default) (code [here](/packages/components/src/card/stories/index.tsx)).
 
 Storybook can be started on a local machine by running `npm run storybook:dev`. Alternatively, the components' catalogue (up to date with the latest code on `trunk`) can be found at [wordpress.github.io/gutenberg/](https://wordpress.github.io/gutenberg/).
 

packages/components/src/card/card-body/component.tsx

@@ -12,10 +12,8 @@ import { View } from '../../view';
 import { useCardBody } from './hook';
 import type { BodyProps } from '../types';
 
-export type CardBodyProps = WordPressComponentProps< BodyProps, 'div' >;
-
 function CardBody(
-	props: CardBodyProps,
+	props: WordPressComponentProps< BodyProps, 'div' >,
 	forwardedRef: ForwardedRef< HTMLDivElement >
 ) {
 	const { isScrollable, ...otherProps } = useCardBody( props );
@@ -42,9 +40,6 @@ function CardBody(
  * </Card>
  * ```
  */
-const ConnectedCardBody = contextConnect< CardBodyProps >(
-	CardBody,
-	'CardBody'
-);
+const ConnectedCardBody = contextConnect< BodyProps >( CardBody, 'CardBody' );
 
 export default ConnectedCardBody;

packages/components/src/card/card-body/hook.ts

@@ -6,12 +6,14 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useContextSystem } from '../../ui/context';
+import { useContextSystem, WordPressComponentProps } from '../../ui/context';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
-import type { CardBodyProps } from './component';
+import type { BodyProps } from '../types';
 
-export function useCardBody( props: CardBodyProps ) {
+export function useCardBody(
+	props: WordPressComponentProps< BodyProps, 'div' >
+) {
 	const {
 		className,
 		isScrollable = false,

packages/components/src/card/card-divider/component.tsx

@@ -10,14 +10,8 @@ import { contextConnect, WordPressComponentProps } from '../../ui/context';
 import { Divider, DividerProps } from '../../divider';
 import { useCardDivider } from './hook';
 
-export type CardDividerProps = WordPressComponentProps<
-	DividerProps,
-	'hr',
-	false
->;
-
 function CardDivider(
-	props: CardDividerProps,
+	props: WordPressComponentProps< DividerProps, 'hr', false >,
 	forwardedRef: ForwardedRef< HTMLHRElement >
 ) {
 	const dividerProps = useCardDivider( props );
@@ -40,7 +34,7 @@ function CardDivider(
  * </Card>
  * ```
  */
-const ConnectedCardDivider = contextConnect< CardDividerProps >(
+const ConnectedCardDivider = contextConnect< DividerProps >(
 	CardDivider,
 	'CardDivider'
 );

packages/components/src/card/card-divider/hook.ts

@@ -6,12 +6,14 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useContextSystem } from '../../ui/context';
+import { useContextSystem, WordPressComponentProps } from '../../ui/context';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
-import type { CardDividerProps } from './component';
+import type { DividerProps } from '../../divider';
 
-export function useCardDivider( props: CardDividerProps ) {
+export function useCardDivider(
+	props: WordPressComponentProps< DividerProps, 'hr', false >
+) {
 	const { className, ...otherProps } = useContextSystem(
 		props,
 		'CardDivider'

packages/components/src/card/card-footer/component.tsx

@@ -11,10 +11,8 @@ import { Flex } from '../../flex';
 import { useCardFooter } from './hook';
 import type { FooterProps } from '../types';
 
-export type CardFooterProps = WordPressComponentProps< FooterProps, 'div' >;
-
 function CardFooter(
-	props: CardFooterProps,
+	props: WordPressComponentProps< FooterProps, 'div' >,
 	forwardedRef: ForwardedRef< HTMLDivElement >
 ) {
 	const footerProps = useCardFooter( props );
@@ -35,7 +33,7 @@ function CardFooter(
  * </Card>
  * ```
  */
-const ConnectedCardFooter = contextConnect< CardFooterProps >(
+const ConnectedCardFooter = contextConnect< FooterProps >(
 	CardFooter,
 	'CardFooter'
 );

packages/components/src/card/card-footer/hook.ts

@@ -6,12 +6,14 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useContextSystem } from '../../ui/context';
+import { useContextSystem, WordPressComponentProps } from '../../ui/context';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
-import type { CardFooterProps } from './component';
+import type { FooterProps } from '../types';
 
-export function useCardFooter( props: CardFooterProps ) {
+export function useCardFooter(
+	props: WordPressComponentProps< FooterProps, 'div' >
+) {
 	const {
 		className,
 		justify,

packages/components/src/card/card-header/component.tsx

@@ -10,10 +10,8 @@ import type { HeaderProps } from '../types';
  */
 import type { ForwardedRef } from 'react';
 
-export type CardHeaderProps = WordPressComponentProps< HeaderProps, 'div' >;
-
 function CardHeader(
-	props: CardHeaderProps,
+	props: WordPressComponentProps< HeaderProps, 'div' >,
 	forwardedRef: ForwardedRef< HTMLDivElement >
 ) {
 	const headerProps = useCardHeader( props );
@@ -34,7 +32,7 @@ function CardHeader(
  * </Card>
  * ```
  */
-const ConnectedCardHeader = contextConnect< CardHeaderProps >(
+const ConnectedCardHeader = contextConnect< HeaderProps >(
 	CardHeader,
 	'CardHeader'
 );

packages/components/src/card/card-header/hook.ts

@@ -6,12 +6,14 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useContextSystem } from '../../ui/context';
+import { useContextSystem, WordPressComponentProps } from '../../ui/context';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
-import type { CardHeaderProps } from './component';
+import type { HeaderProps } from '../types';
 
-export function useCardHeader( props: CardHeaderProps ) {
+export function useCardHeader(
+	props: WordPressComponentProps< HeaderProps, 'div' >
+) {
 	const {
 		className,
 		isBorderless = false,

packages/components/src/card/card-media/component.tsx

@@ -11,10 +11,8 @@ import { View } from '../../view';
 import { useCardMedia } from './hook';
 import type { MediaProps } from '../types';
 
-export type CardMediaProps = WordPressComponentProps< MediaProps, 'div' >;
-
 function CardMedia(
-	props: CardMediaProps,
+	props: WordPressComponentProps< MediaProps, 'div' >,
 	forwardedRef: ForwardedRef< HTMLDivElement >
 ) {
 	const cardMediaProps = useCardMedia( props );
@@ -39,7 +37,7 @@ function CardMedia(
  * );
  * ```
  */
-const ConnectedCardMedia = contextConnect< CardMediaProps >(
+const ConnectedCardMedia = contextConnect< MediaProps >(
 	CardMedia,
 	'CardMedia'
 );

packages/components/src/card/card-media/hook.ts

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import type { ComponentProps } from 'react';
-
 /**
  * WordPress dependencies
  */
@@ -11,12 +6,14 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useContextSystem } from '../../ui/context';
+import { useContextSystem, WordPressComponentProps } from '../../ui/context';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
-import type { CardMedia } from '../index';
+import type { MediaProps } from '../types';
 
-export function useCardMedia( props: ComponentProps< typeof CardMedia > ) {
+export function useCardMedia(
+	props: WordPressComponentProps< MediaProps, 'div' >
+) {
 	const { className, ...otherProps } = useContextSystem( props, 'CardMedia' );
 
 	const cx = useCx();

packages/components/src/card/card/component.tsx

@@ -25,10 +25,8 @@ import CONFIG from '../../utils/config-values';
 import { useCx } from '../../utils/hooks/use-cx';
 import type { Props } from '../types';
 
-export type CardProps = WordPressComponentProps< Props, 'div' >;
-
 function Card(
-	props: CardProps,
+	props: WordPressComponentProps< Props, 'div' >,
 	forwardedRef: ForwardedRef< HTMLDivElement >
 ) {
 	const {
@@ -112,6 +110,6 @@ function Card(
  * }
  * ```
  */
-const ConnectedCard = contextConnect< CardProps >( Card, 'Card' );
+const ConnectedCard = contextConnect< Props >( Card, 'Card' );
 
 export default ConnectedCard;

packages/components/src/card/card/hook.ts

@@ -7,11 +7,13 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useContextSystem } from '../../ui/context';
+import { useContextSystem, WordPressComponentProps } from '../../ui/context';
 import { useSurface } from '../../surface';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
-import type { CardProps } from './component';
+import type { Props } from '../types';
+
+type CardProps = WordPressComponentProps< Props, 'div' >;
 
 function useDeprecatedProps( {
 	elevation,

packages/components/src/card/stories/index.tsx

@@ -0,0 +1,63 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import {
+	Card,
+	CardHeader,
+	CardBody,
+	CardDivider,
+	CardMedia,
+	CardFooter,
+} from '../index';
+import { Text } from '../../text';
+import { Heading } from '../../heading';
+import Button from '../../button';
+
+const meta: ComponentMeta< typeof Card > = {
+	component: Card,
+	subcomponents: { CardHeader, CardBody, CardDivider, CardMedia, CardFooter },
+	title: 'Components/Card',
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { source: { state: 'open' } },
+	},
+};
+
+export default meta;
+
+export const Default: ComponentStory< typeof Card > = ( props ) => {
+	return (
+		<Card { ...props }>
+			<CardHeader>
+				<Heading>CardHeader</Heading>
+			</CardHeader>
+			<CardBody>
+				<Text>CardBody</Text>
+			</CardBody>
+			<CardBody>
+				<Text>CardBody (before CardDivider)</Text>
+			</CardBody>
+			<CardDivider />
+			<CardBody>
+				<Text>CardBody (after CardDivider)</Text>
+			</CardBody>
+			<CardMedia>
+				<img
+					alt="Card Media"
+					src="https://images.unsplash.com/photo-1566125882500-87e10f726cdc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1867&q=80"
+				/>
+			</CardMedia>
+			<CardFooter>
+				<Text>CardFooter</Text>
+				<Button variant="secondary">Action Button</Button>
+			</CardFooter>
+		</Card>
+	);
+};

packages/components/src/card/types.ts

@@ -93,5 +93,5 @@ type MarginalSubComponentProps = BaseSubComponentProps & {
 export type HeaderProps = MarginalSubComponentProps;
 
 export type FooterProps = MarginalSubComponentProps & {
-	justify: CSSProperties[ 'justifyContent' ];
+	justify?: CSSProperties[ 'justifyContent' ];
 };