parent)': undefined,
+ large: 'large',
+ medium: 'medium',
+ small: 'small',
+ xSmall: 'xSmall',
+ },
+ undefined,
+ KNOBS_GROUPS.CardFooter
+ ),
+ };
+
+ // Do not pass the `size` and `isBorderless` props when their value is `undefined`.
+ // This allows the `CardHeader`, `CardBody` and `CardFooter` components to use
+ // the values that are set on the parent `Card` component by default.
+ for ( const componentProps of [ cardHeaderProps, cardFooterProps ] ) {
+ for ( const prop of [ 'isBorderless', 'size' ] ) {
+ if ( typeof componentProps[ prop ] === 'undefined' ) {
+ delete componentProps[ prop ];
+ }
+ }
+ }
+
+ return (
+
+
+ CardHeader
+
+
+ CardBody
+
+
+ CardBody (before CardDivider)
+
+
+
+ CardBody (after CardDivider)
+
+
+ 
+
+
+ CardFooter
+
+
+
+ );
+};
diff --git a/packages/components/src/card/stories/media.js b/packages/components/src/card/stories/media.js
deleted file mode 100644
index db7597d9c6b571..00000000000000
--- a/packages/components/src/card/stories/media.js
+++ /dev/null
@@ -1,160 +0,0 @@
-/**
- * External dependencies
- */
-import { boolean, number, select, text } from '@storybook/addon-knobs';
-import styled from '@emotion/styled';
-
-/**
- * Internal dependencies
- */
-import { Card, CardBody, CardFooter, CardHeader, CardMedia } from '../';
-import { getCardStoryProps } from './_utils';
-
-export default { title: 'Components/Card/Media', component: CardMedia };
-
-const DummyImage = () => (
- 
-);
-
-export const _default = () => {
- const mediaOnTop = boolean( 'Example: On Top', true );
- const props = getCardStoryProps();
-
- const showTopContent = ! mediaOnTop;
- const showBottomContent = ! showTopContent;
- const content = text( 'Body: children', 'Content' );
-
- return (
-
- { showTopContent && { content } }
-
-
-
- { showBottomContent && { content } }
-
- );
-};
-
-export const onTop = () => {
- const props = getCardStoryProps();
-
- return (
-
-
-
-
-
- Content
-
-
- );
-};
-
-export const onBottom = () => {
- const props = getCardStoryProps();
-
- return (
-
- Content
-
-
-
-
- );
-};
-
-export const headerAndFooter = () => {
- const props = getCardStoryProps();
-
- return (
-
- Header Content
-
-
-
- Caption
-
- );
-};
-
-export const iframeEmbed = () => {
- const props = getCardStoryProps();
-
- return (
-
- Header Content
-
-
-
-
- );
-};
-
-/**
- * Referring to other styled components:
- * https://www.styled-components.com/docs/advanced#referring-to-other-components
- * https://www.styled-components.com/docs/advanced#caveat
- */
-const StyledCardMedia = styled( CardMedia )( '' );
-const StyledCardBody = styled( CardBody )( '' );
-
-const HorizontallyAlignedCard = styled( Card )`
- display: flex;
-
- &.is-right {
- flex-direction: row-reverse;
- }
-
- ${ StyledCardBody } {
- flex: 1;
- }
-
- ${ StyledCardMedia } {
- &.is-left {
- border-radius: 3px 0 0 3px;
- }
- &.is-right {
- border-radius: 0 3px 3px 0;
- }
- }
-`;
-
-export const horizontallyAligned = () => {
- const align = select(
- 'Example: Align',
- {
- left: 'left',
- right: 'right',
- },
- 'left'
- );
- const maxWidth = number( 'Example: Media Width', 200 );
- const content = text( 'Body: children', 'Content' );
- const classes = `is-${ align }`;
-
- return (
- <>
-
- Note: This story demonstrates how this UI may be created. It
- requires extra styling.
-
-
-
-
-
- { content }
-
-
- );
-};