Card: refactor subcomponents folder structure

docs/manifest.json

@@ -707,10 +707,40 @@
 		"markdown_source": "../packages/components/src/button/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "CardBody",
+		"slug": "card-body",
+		"markdown_source": "../packages/components/src/card/card-body/README.md",
+		"parent": "components"
+	},
+	{
+		"title": "CardDivider",
+		"slug": "card-divider",
+		"markdown_source": "../packages/components/src/card/card-divider/README.md",
+		"parent": "components"
+	},
+	{
+		"title": "CardFooter",
+		"slug": "card-footer",
+		"markdown_source": "../packages/components/src/card/card-footer/README.md",
+		"parent": "components"
+	},
+	{
+		"title": "CardHeader",
+		"slug": "card-header",
+		"markdown_source": "../packages/components/src/card/card-header/README.md",
+		"parent": "components"
+	},
+	{
+		"title": "CardMedia",
+		"slug": "card-media",
+		"markdown_source": "../packages/components/src/card/card-media/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "Card",
 		"slug": "card",
-		"markdown_source": "../packages/components/src/card/README.md",
+		"markdown_source": "../packages/components/src/card/card/README.md",
 		"parent": "components"
 	},
 	{

packages/components/src/card/docs/body.md → packages/components/src/card/card-body/README.md

@@ -32,4 +32,4 @@ Determines the amount of padding within the component.
 -   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.
+Note: This component is connected to [`<Card />`'s Context](../card/README.md#context). Passing props directly to this component will override the props derived from context.

packages/components/src/card/body.js → packages/components/src/card/card-body/index.js

@@ -6,8 +6,8 @@ import classnames from 'classnames';
 /**
  * Internal dependencies
  */
-import { BodyUI } from './styles/card-styles';
-import { useCardContext } from './context';
+import { BodyUI } from '../styles';
+import { useCardContext } from '../context';
 
 export const defaultProps = {
 	isShady: false,

packages/components/src/card/docs/divider.md → packages/components/src/card/card-divider/README.md

@@ -1,6 +1,6 @@
 # CardDivider
 
-CardDivider renders an optional divider within a [`<Card />`](../).
+CardDivider renders an optional divider within a [`<Card />`](../card/README.md).
 
 ## Usage
 

packages/components/src/card/divider.js → packages/components/src/card/card-divider/index.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * Internal dependencies
  */
-import { DividerUI } from './styles/card-styles';
+import { DividerUI } from '../styles';
 
 export function CardDivider( props ) {
 	const { className, ...additionalProps } = props;

packages/components/src/card/docs/footer.md → packages/components/src/card/card-footer/README.md

@@ -1,6 +1,6 @@
 # CardFooter
 
-CardFooter renders an optional footer within a [`<Card />`](../).
+CardFooter renders an optional footer within a [`<Card />`](../card/README.md).
 
 ## Usage
 
@@ -16,7 +16,7 @@ const Example = () => (
 
 ### Flex
 
-Underneath, CardFooter uses the layout component [`<Flex/>`](../../flex/README.md). This improves the alignment of child items within the component.
+Underneath, CardFooter uses the layout component [`<Flex/>`](../../flex/flex/README.md). This improves the alignment of child items within the component.
 
 ```jsx
 import {
@@ -39,7 +39,7 @@ const Example = () => (
 );
 ```
 
-Check out [the documentation](../../flex/README.md) on `<Flex/>` for more details on layout composition.
+Check out [the documentation](../../flex/flex/README.md) on `<Flex/>` for more details on layout composition.
 
 ## Props
 
@@ -75,4 +75,4 @@ Determines the amount of padding within the component.
 -   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.
+Note: This component is connected to [`<Card />`'s Context](../card/README.md#context). Passing props directly to this component will override the props derived from context.

packages/components/src/card/footer.js → packages/components/src/card/card-footer/index.js

@@ -6,8 +6,8 @@ import classnames from 'classnames';
 /**
  * Internal dependencies
  */
-import { FooterUI } from './styles/card-styles';
-import { useCardContext } from './context';
+import { FooterUI } from '../styles';
+import { useCardContext } from '../context';
 
 export const defaultProps = {
 	isBorderless: false,

packages/components/src/card/docs/header.md → packages/components/src/card/card-header/README.md

@@ -1,6 +1,6 @@
 # CardHeader
 
-CardHeader renders an optional header within a [`<Card />`](../).
+CardHeader renders an optional header within a [`<Card />`](../card/README.md).
 
 ## Usage
 
@@ -16,7 +16,7 @@ const Example = () => (
 
 ### Flex
 
-Underneath, CardHeader uses the layout component [`<Flex/>`](../../flex/README.md). This improves the alignment of child items within the component.
+Underneath, CardHeader uses the layout component [`<Flex/>`](../../flex/flex/README.md). This improves the alignment of child items within the component.
 
 ```jsx
 import {
@@ -39,7 +39,7 @@ const Example = () => (
 );
 ```
 
-Check out [the documentation](../../flex/README.md) on `<Flex/>` for more details on layout composition.
+Check out [the documentation](../../flex/flex/README.md) on `<Flex/>` for more details on layout composition.
 
 ## Props
 
@@ -75,4 +75,4 @@ Determines the amount of padding within the component.
 -   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.
+Note: This component is connected to [`<Card />`'s Context](../card/README.md#context). Passing props directly to this component will override the props derived from context.

packages/components/src/card/header.js → packages/components/src/card/card-header/index.js

@@ -6,8 +6,8 @@ import classnames from 'classnames';
 /**
  * Internal dependencies
  */
-import { HeaderUI } from './styles/card-styles';
-import { useCardContext } from './context';
+import { HeaderUI } from '../styles';
+import { useCardContext } from '../context';
 
 export const defaultProps = {
 	isBorderless: false,

packages/components/src/card/docs/media.md → packages/components/src/card/card-media/README.md

@@ -1,6 +1,6 @@
 # CardMedia
 
-CardMedia provides a container for media elements, and renders within a [`<Card />`](../).
+CardMedia provides a container for media elements, and renders within a [`<Card />`](../card/README.md).
 
 ## Usage
 

packages/components/src/card/media.js → packages/components/src/card/card-media/index.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * Internal dependencies
  */
-import { MediaUI } from './styles/card-styles';
+import { MediaUI } from '../styles';
 
 export function CardMedia( props ) {
 	const { className, ...additionalProps } = props;

packages/components/src/card/README.md → packages/components/src/card/card/README.md

@@ -44,11 +44,11 @@ Determines the amount of padding within the component.
 
 This component provides a collection of sub-component that can be used to compose various interfaces.
 
--   [`<CardBody />`](./docs/body.md)
--   [`<CardDivider />`](./docs/divider.md)
--   [`<CardFooter />`](./docs/footer.md)
--   [`<CardHeader />`](./docs/header.md)
--   [`<CardMedia />`](./docs/media.md)
+-   [`<CardBody />`](../card-body/README.md)
+-   [`<CardDivider />`](../card-divider/README.md)
+-   [`<CardFooter />`](../card-footer/README.md)
+-   [`<CardHeader />`](../card-header/README.md)
+-   [`<CardMedia />`](../card-media/README.md)
 
 ### Sub-Components Example
 

packages/components/src/card/card/index.js

@@ -0,0 +1,51 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import { CardContext } from '../context';
+import { CardUI } from '../styles';
+
+export const defaultProps = {
+	isBorderless: false,
+	isElevated: false,
+	size: 'medium',
+};
+
+export function Card( props ) {
+	const {
+		className,
+		isBorderless,
+		isElevated,
+		size,
+		...additionalProps
+	} = props;
+	const { Provider } = CardContext;
+
+	const contextProps = {
+		isBorderless,
+		isElevated,
+		size,
+	};
+
+	const classes = classnames(
+		'components-card',
+		isBorderless && 'is-borderless',
+		isElevated && 'is-elevated',
+		size && `is-size-${ size }`,
+		className
+	);
+
+	return (
+		<Provider value={ contextProps }>
+			<CardUI { ...additionalProps } className={ classes } />
+		</Provider>
+	);
+}
+
+Card.defaultProps = defaultProps;
+
+export default Card;

packages/components/src/card/index.js

@@ -1,51 +1,6 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * Internal dependencies
- */
-import { CardContext } from './context';
-import { CardUI } from './styles/card-styles';
-
-export const defaultProps = {
-	isBorderless: false,
-	isElevated: false,
-	size: 'medium',
-};
-
-export function Card( props ) {
-	const {
-		className,
-		isBorderless,
-		isElevated,
-		size,
-		...additionalProps
-	} = props;
-	const { Provider } = CardContext;
-
-	const contextProps = {
-		isBorderless,
-		isElevated,
-		size,
-	};
-
-	const classes = classnames(
-		'components-card',
-		isBorderless && 'is-borderless',
-		isElevated && 'is-elevated',
-		size && `is-size-${ size }`,
-		className
-	);
-
-	return (
-		<Provider value={ contextProps }>
-			<CardUI { ...additionalProps } className={ classes } />
-		</Provider>
-	);
-}
-
-Card.defaultProps = defaultProps;
-
-export default Card;
+export { default as Card } from './card';
+export { default as CardBody } from './card-body';
+export { default as CardDivider } from './card-divider';
+export { default as CardFooter } from './card-footer';
+export { default as CardHeader } from './card-header';
+export { default as CardMedia } from './card-media';

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

@@ -6,10 +6,7 @@ import { text, boolean } from '@storybook/addon-knobs';
 /**
  * Internal dependencies
  */
-import Card from '../index';
-import CardBody from '../body';
-import CardFooter from '../footer';
-import CardHeader from '../header';
+import { Card, CardBody, CardFooter, CardHeader } from '../';
 import { getCardStoryProps } from './_utils';
 
 export default { title: 'Components/Card', component: Card };

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

@@ -6,8 +6,7 @@ import { boolean, text } from '@storybook/addon-knobs';
 /**
  * Internal dependencies
  */
-import Card from '../index';
-import CardBody from '../body';
+import { Card, CardBody } from '../';
 import { getCardStoryProps } from './_utils';
 
 export default { title: 'Components/Card/Body', component: CardBody };

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

@@ -1,9 +1,7 @@
 /**
  * Internal dependencies
  */
-import Card from '../index';
-import CardBody from '../body';
-import CardDivider from '../divider';
+import { Card, CardBody, CardDivider } from '../';
 import { getCardStoryProps } from './_utils';
 
 export default { title: 'Components/Card/Divider', component: CardDivider };

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

@@ -6,8 +6,7 @@ import { boolean, text } from '@storybook/addon-knobs';
 /**
  * Internal dependencies
  */
-import Card from '../index';
-import CardFooter from '../footer';
+import { Card, CardFooter } from '../';
 import Button from '../../button';
 import { FlexBlock, FlexItem } from '../../flex';
 import { getCardStoryProps } from './_utils';

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

@@ -6,8 +6,7 @@ import { boolean, text } from '@storybook/addon-knobs';
 /**
  * Internal dependencies
  */
-import Card from '../index';
-import CardHeader from '../header';
+import { Card, CardHeader } from '../';
 import Button from '../../button';
 import { FlexBlock, FlexItem } from '../../flex';
 import { getCardStoryProps } from './_utils';

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

@@ -7,11 +7,7 @@ import styled from '@emotion/styled';
 /**
  * Internal dependencies
  */
-import Card from '../index';
-import CardBody from '../body';
-import CardFooter from '../footer';
-import CardHeader from '../header';
-import CardMedia from '../media';
+import { Card, CardBody, CardFooter, CardHeader, CardMedia } from '../';
 import { getCardStoryProps } from './_utils';
 
 export default { title: 'Components/Card/Media', component: CardMedia };

packages/components/src/card/styles/card-styles.js → packages/components/src/card/styles.js

@@ -11,8 +11,8 @@ import { HorizontalRule } from '@wordpress/primitives';
 /**
  * Internal dependencies
  */
-import { Flex } from '../../flex';
-import { COLORS, space } from '../../utils';
+import { Flex } from '../flex';
+import { COLORS, space } from '../utils';
 
 export const styleProps = {
 	borderColor: COLORS.lightGray[ 500 ],

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

@@ -6,7 +6,7 @@ import { shallow } from 'enzyme';
 /**
  * Internal dependencies
  */
-import CardBody from '../body';
+import { CardBody } from '../';
 
 describe( 'CardBody', () => {
 	describe( 'basic rendering', () => {