Card: Enhance CardHeader and CardFooter with Flex (#22916)

This update enhances the CardHeader and CardFooter sub-components of Card with the new layout-based Flex component. This improves the alignment of child content for common header/footer use-cases.

The various Card `README.md` files were updated to reflect the changes.

packages/components/src/card/README.md

@@ -16,11 +16,29 @@ const Example = () => (
 
 ## Props
 
-Name | Type | Default | Description
---- | --- | --- | ---
-`isBorderless` | `boolean` | `false` | Determines the border style of the card.
-`isElevated` | `boolean` | `false` | Determines the elevation style of the card.
-`size` | `string` | `medium` | Determines the amount of padding within the card.
+### isBorderless
+
+Determines the border style of the card.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `false`
+
+### isElevated
+
+Determines the elevation style of the card.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `false`
+
+### size
+
+Determines the amount of padding within the component.
+
+-   Type: `String`
+-   Required: No
+-   Default: `medium`
 
 ## Sub-Components
 
@@ -41,27 +59,19 @@ import {
 	CardDivider,
 	CardFooter,
 	CardHeader,
-	CardMedia
+	CardMedia,
 } from '@wordpress/components';
 
 const Example = () => (
 	<Card>
-		<CardHeader>
-			...
-		</CardHeader>
-		<CardBody>
-			...
-		</CardBody>
+		<CardHeader>...</CardHeader>
+		<CardBody>...</CardBody>
 		<CardDivider />
-		<CardBody>
-			...
-		</CardBody>
+		<CardBody>...</CardBody>
 		<CardMedia>
 			<img src="..." />
 		</CardMedia>
-		<CardHeader>
-			...
-		</CardHeader>
+		<CardHeader>...</CardHeader>
 	</Card>
 );
 ```

packages/components/src/card/docs/body.md

@@ -16,9 +16,20 @@ const Example = () => (
 
 ## Props
 
-Name | Type | Default | Description
---- | --- | --- | ---
-`isShady` | `boolean` | `false` | Renders with a light gray background color.
-`size` | `string` | `medium` | Determines the amount of padding within the component.
+### isShady
+
+Renders with a light gray background color.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `false`
+
+### size
+
+Determines the amount of padding within the component.
+
+-   Type: `String`
+-   Required: No
+-   Default: `medium`
 
 Note: This component is connected to [`<Card />`'s Context](../README.md#context). Passing props directly to this component will override the props derived from context.

packages/components/src/card/docs/footer.md

@@ -14,13 +14,65 @@ const Example = () => (
 );
 ```
 
+### Flex
+
+Underneath, CardFooter uses the layout component [`<Flex/>`](../../flex/README.md). This improves the alignment of child items within the component.
+
+```jsx
+import {
+	Button,
+	Card,
+	CardFooter,
+	FlexItem,
+	FlexBlock,
+} from '@wordpress/components';
+
+const Example = () => (
+	<Card>
+		<CardFooter>
+			<FlexBlock>Content</FlexBlock>
+			<FlexItem>
+				<Button>Action</Button>
+			</FlexItem>
+		</CardFooter>
+	</Card>
+);
+```
+
+Check out [the documentation](../../flex/README.md) on `<Flex/>` for more details on layout composition.
+
 ## Props
 
-Name | Type | Default | Description
---- | --- | --- | ---
-`isBorderless` | `boolean` | `false` | Determines the border style of the card.
-`isElevated` | `boolean` | `false` | Determines the elevation style of the card.
-`isShady` | `boolean` | `false` | Renders with a light gray background color.
-`size` | `string` | `medium` | Determines the amount of padding within the component.
+### isBorderless
+
+Determines the border style of the card.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `false`
+
+### isElevated
+
+Determines the elevation style of the card.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `false`
+
+### isShady
+
+Renders with a light gray background color.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `false`
+
+### size
+
+Determines the amount of padding within the component.
+
+-   Type: `String`
+-   Required: No
+-   Default: `medium`
 
 Note: This component is connected to [`<Card />`'s Context](../README.md#context). Passing props directly to this component will override the props derived from context.

packages/components/src/card/docs/header.md

@@ -14,13 +14,65 @@ const Example = () => (
 );
 ```
 
+### Flex
+
+Underneath, CardHeader uses the layout component [`<Flex/>`](../../flex/README.md). This improves the alignment of child items within the component.
+
+```jsx
+import {
+	Button,
+	Card,
+	CardHeader,
+	FlexItem,
+	FlexBlock,
+} from '@wordpress/components';
+
+const Example = () => (
+	<Card>
+		<CardHeader>
+			<FlexBlock>Content</FlexBlock>
+			<FlexItem>
+				<Button>Action</Button>
+			</FlexItem>
+		</CardHeader>
+	</Card>
+);
+```
+
+Check out [the documentation](../../flex/README.md) on `<Flex/>` for more details on layout composition.
+
 ## Props
 
-Name | Type | Default | Description
---- | --- | --- | ---
-`isBorderless` | `boolean` | `false` | Determines the border style of the card.
-`isElevated` | `boolean` | `false` | Determines the elevation style of the card.
-`isShady` | `boolean` | `false` | Renders with a light gray background color.
-`size` | `string` | `medium` | Determines the amount of padding within the component.
+### isBorderless
+
+Determines the border style of the card.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `false`
+
+### isElevated
+
+Determines the elevation style of the card.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `false`
+
+### isShady
+
+Renders with a light gray background color.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `false`
+
+### size
+
+Determines the amount of padding within the component.
+
+-   Type: `String`
+-   Required: No
+-   Default: `medium`
 
 Note: This component is connected to [`<Card />`'s Context](../README.md#context). Passing props directly to this component will override the props derived from context.

packages/components/src/card/stories/_index.js

@@ -1,10 +1,7 @@
 /**
  * External dependencies
  */
-
-/* eslint-disable import/no-extraneous-dependencies */
 import { text, boolean } from '@storybook/addon-knobs';
-/* eslint-enable import/no-extraneous-dependencies */
 
 /**
  * Internal dependencies

packages/components/src/card/stories/_utils.js

@@ -1,9 +1,7 @@
 /**
  * External dependencies
  */
-/* eslint-disable import/no-extraneous-dependencies */
 import { boolean, select } from '@storybook/addon-knobs';
-/* eslint-enable import/no-extraneous-dependencies */
 
 export const getCardProps = ( props = {} ) => {
 	const { size } = props;

packages/components/src/card/stories/body.js

@@ -1,9 +1,7 @@
 /**
  * External dependencies
  */
-/* eslint-disable import/no-extraneous-dependencies */
 import { boolean, text } from '@storybook/addon-knobs';
-/* eslint-enable import/no-extraneous-dependencies */
 
 /**
  * Internal dependencies

packages/components/src/card/stories/footer.js

@@ -1,15 +1,15 @@
 /**
  * External dependencies
  */
-/* eslint-disable import/no-extraneous-dependencies */
 import { boolean, text } from '@storybook/addon-knobs';
-/* eslint-enable import/no-extraneous-dependencies */
 
 /**
  * Internal dependencies
  */
 import Card from '../index';
 import CardFooter from '../footer';
+import Button from '../../button';
+import { FlexBlock, FlexItem } from '../../flex';
 import { getCardStoryProps } from './_utils';
 
 export default { title: 'Components/Card/Footer', component: CardFooter };
@@ -25,3 +25,20 @@ export const _default = () => {
 		</Card>
 	);
 };
+
+export const alignment = () => {
+	const props = getCardStoryProps();
+	const content = text( 'Footer: children', 'Content' );
+	const isShady = boolean( 'Footer: isShady', false );
+
+	return (
+		<Card { ...props }>
+			<CardFooter isShady={ isShady }>
+				<FlexBlock>{ content }</FlexBlock>
+				<FlexItem>
+					<Button isPrimary>Action</Button>
+				</FlexItem>
+			</CardFooter>
+		</Card>
+	);
+};

packages/components/src/card/stories/header.js

@@ -1,27 +1,44 @@
 /**
  * External dependencies
  */
-/* eslint-disable import/no-extraneous-dependencies */
 import { boolean, text } from '@storybook/addon-knobs';
-/* eslint-enable import/no-extraneous-dependencies */
 
 /**
  * Internal dependencies
  */
 import Card from '../index';
 import CardHeader from '../header';
+import Button from '../../button';
+import { FlexBlock, FlexItem } from '../../flex';
 import { getCardStoryProps } from './_utils';
 
 export default { title: 'Components/Card/Header', component: CardHeader };
 
 export const _default = () => {
 	const props = getCardStoryProps();
-	const content = text( 'Footer: children', 'Content' );
-	const isShady = boolean( 'Footer: isShady', false );
+	const content = text( 'Header: children', 'Content' );
+	const isShady = boolean( 'Header: isShady', false );
 
 	return (
 		<Card { ...props }>
 			<CardHeader isShady={ isShady }>{ content }</CardHeader>
 		</Card>
 	);
 };
+
+export const alignment = () => {
+	const props = getCardStoryProps();
+	const content = text( 'Header: children', 'Content' );
+	const isShady = boolean( 'Header: isShady', false );
+
+	return (
+		<Card { ...props }>
+			<CardHeader isShady={ isShady }>
+				<FlexBlock>{ content }</FlexBlock>
+				<FlexItem>
+					<Button isPrimary>Action</Button>
+				</FlexItem>
+			</CardHeader>
+		</Card>
+	);
+};

packages/components/src/card/stories/media.js

@@ -1,9 +1,7 @@
 /**
  * External dependencies
  */
-/* eslint-disable import/no-extraneous-dependencies */
 import { boolean, number, select, text } from '@storybook/addon-knobs';
-/* eslint-enable import/no-extraneous-dependencies */
 import styled from '@emotion/styled';
 
 /**