Card: update to g2 implementation

packages/components/CHANGELOG.md

@@ -2,9 +2,18 @@
 
 ## Unreleased
 
+### New Feature
+
+-   Update the border color used in `CardBody`, `CardHeader`, `CardFooter`, and `CardDivider` to a different shade of gray, in order to match the color used in other components ([#32566](https://github.com/WordPress/gutenberg/pull/32566)).
+
 ### Deprecation
 
 -   `isPrimary`, `isSecondary`, `isTertiary` and `isLink` props in `Button` have been deprecated. Use `variant` instead ([#31713](https://github.com/WordPress/gutenberg/pull/31713)).
+-   `isElevated` prop in `Card` has been deprecated. Use `elevation` instead ([#32566](https://github.com/WordPress/gutenberg/pull/32566)).
+
+### Internal
+
+-   `Card`, `CardBody`, `CardHeader`, `CardFooter`, `CardMedia`, and `CardDivider` components have been re-written from the ground up ([#32566](https://github.com/WordPress/gutenberg/pull/32566)).
 
 ## 14.1.0 (2021-05-20)
 

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

@@ -1,6 +1,6 @@
 # CardBody
 
-CardBody renders an optional content area for a [`<Card />`](../).
+`CardBody` renders an optional content area for a [`Card`](/packages/components/src/card/card/README.md). Multiple `CardBody` components can be used within `Card` if needed.
 
 ## Usage
 
@@ -16,20 +16,26 @@ const Example = () => (
 
 ## Props
 
-### isShady
+Note: This component is connected to [`Card`'s Context](/packages/components/src/card/card/README.md#context). The value of the `size` prop is derived from the `Card` parent component (if there is one). Setting this prop directly on this component will override any derived values.
+
+### `isScrollable`: `boolean`
+
+Determines if the component is scrollable.
+
+-   Required: No
+-   Default: `true`
+
+### `isShady`: `boolean`
 
 Renders with a light gray background color.
 
--   Type: `Boolean`
 -   Required: No
 -   Default: `false`
 
-### size
+### `size`: `string`
 
 Determines the amount of padding within the component.
 
--   Type: `String`
--   Required: No
--   Default: `medium`
-
-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.
+- Required: No
+- Default: `medium`
+- Allowed values: `xSmall`, `small`, `medium`, `large`

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

@@ -0,0 +1,40 @@
+/**
+ * Internal dependencies
+ */
+import { contextConnect } from '../../ui/context';
+import { Scrollable } from '../../scrollable';
+import { View } from '../../view';
+import { useCardBody } from './hook';
+
+/**
+ * @param {import('../../ui/context').PolymorphicComponentProps<import('../types').BodyProps, 'div'>} props
+ * @param {import('react').Ref<any>}                                                                  forwardedRef
+ */
+function CardBody( props, forwardedRef ) {
+	const { isScrollable, ...otherProps } = useCardBody( props );
+
+	if ( isScrollable ) {
+		return <Scrollable { ...otherProps } ref={ forwardedRef } />;
+	}
+
+	return <View { ...otherProps } ref={ forwardedRef } />;
+}
+
+/**
+ * `CardBody` renders an optional content area for a `Card`.
+ * Multiple `CardBody` components can be used within `Card` if needed.
+ *
+ * @example
+ * ```jsx
+ * import { Card, CardBody } from `@wordpress/components`;
+ *
+ * <Card>
+ * 	<CardBody>
+ * 		...
+ * 	</CardBody>
+ * </Card>
+ * ```
+ */
+const ConnectedCardBody = contextConnect( CardBody, 'CardBody' );
+
+export default ConnectedCardBody;

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

@@ -0,0 +1,48 @@
+/**
+ * External dependencies
+ */
+import { cx } from 'emotion';
+
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { useContextSystem } from '../../ui/context';
+import * as styles from '../styles';
+
+/**
+ * @param {import('../../ui/context').PolymorphicComponentProps<import('../types').BodyProps, 'div'>} props
+ */
+export function useCardBody( props ) {
+	const {
+		className,
+		isScrollable = true,
+		isShady = false,
+		size = 'medium',
+		...otherProps
+	} = useContextSystem( props, 'CardBody' );
+
+	const classes = useMemo(
+		() =>
+			cx(
+				styles.Body,
+				styles.borderRadius,
+				styles.cardPaddings[ size ],
+				isShady && styles.shady,
+				// This classname is added for legacy compatibility reasons.
+				'components-card__body',
+				className
+			),
+		[ className, isShady, size ]
+	);
+
+	return {
+		...otherProps,
+		className: classes,
+		isScrollable,
+	};
+}

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

@@ -1,37 +1,2 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * Internal dependencies
- */
-import { BodyUI } from '../styles';
-import { useCardContext } from '../context';
-
-export const defaultProps = {
-	isShady: false,
-	size: 'medium',
-};
-
-/* eslint-disable jsdoc/valid-types */
-/**
- * @param { import('../types').BodyProps & JSX.IntrinsicElements['div'] } props
- */
-export function CardBody( props ) {
-	/* eslint-enable jsdoc/valid-types */
-	const { className, isShady, ...additionalProps } = props;
-	const mergedProps = { ...defaultProps, ...useCardContext(), ...props };
-	const { size } = mergedProps;
-
-	const classes = classnames(
-		'components-card__body',
-		isShady && 'is-shady',
-		size && `is-size-${ size }`,
-		className
-	);
-
-	return <BodyUI { ...additionalProps } className={ classes } />;
-}
-
-export default CardBody;
+export { default } from './component';
+export { useCardBody } from './hook';

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

@@ -1,6 +1,6 @@
 # CardDivider
 
-CardDivider renders an optional divider within a [`<Card />`](../card/README.md).
+`CardDivider` renders an optional divider within a [`Card`](/packages/components/src/card/card/README.md). It is typically used to divide multiple `CardBody` components from each other.
 
 ## Usage
 
@@ -15,3 +15,9 @@ const Example = () => (
 	</Card>
 );
 ```
+
+## Props
+
+### Inherited props
+
+`CardDivider` inherits all of the [`Divider` props](/packages/components/src/divider/README.md#props).

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

@@ -0,0 +1,35 @@
+/**
+ * Internal dependencies
+ */
+import { contextConnect } from '../../ui/context';
+import { Divider } from '../../divider';
+import { useCardDivider } from './hook';
+
+/**
+ * @param {import('../../ui/context').PolymorphicComponentProps<import('../../divider').DividerProps, 'hr'>} props
+ * @param {import('react').Ref<any>}                                                                         forwardedRef
+ */
+function CardDivider( props, forwardedRef ) {
+	const dividerProps = useCardDivider( props );
+
+	return <Divider { ...dividerProps } ref={ forwardedRef } />;
+}
+
+/**
+ * `CardDivider` renders an optional divider within a `Card`.
+ * It is typically used to divide multiple `CardBody` components from each other.
+ *
+ * @example
+ * ```jsx
+ * import { Card, CardBody, CardDivider } from `@wordpress/components`;
+ *
+ * <Card>
+ *  <CardBody>...</CardBody>
+ *  <CardDivider />
+ *  <CardBody>...</CardBody>
+ * </Card>
+ * ```
+ */
+const ConnectedCardDivider = contextConnect( CardDivider, 'CardDivider' );
+
+export default ConnectedCardDivider;

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

@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import { cx } from 'emotion';
+
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { useContextSystem } from '../../ui/context';
+import * as styles from '../styles';
+
+/**
+ * @param {import('../../ui/context').PolymorphicComponentProps<import('../../divider').DividerProps, 'hr'>} props
+ */
+export function useCardDivider( props ) {
+	const { className, ...otherProps } = useContextSystem(
+		props,
+		'CardDivider'
+	);
+
+	const classes = useMemo(
+		() =>
+			cx(
+				styles.Divider,
+				styles.borderColor,
+				// This classname is added for legacy compatibility reasons.
+				'components-card__divider',
+				className
+			),
+		[ className ]
+	);
+
+	return {
+		...otherProps,
+		className: classes,
+	};
+}

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

@@ -1,31 +1,2 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * Internal dependencies
- */
-import { DividerUI } from '../styles';
-
-/* eslint-disable jsdoc/valid-types */
-/**
- * @param { JSX.IntrinsicElements['hr'] } props
- */
-export function CardDivider( props ) {
-	/* eslint-enable jsdoc/valid-types */
-	const { className, ...additionalProps } = props;
-
-	const classes = classnames( 'components-card__divider', className );
-
-	return (
-		<DividerUI
-			{ ...additionalProps }
-			children={ null }
-			className={ classes }
-			role="separator"
-		/>
-	);
-}
-
-export default CardDivider;
+export { default } from './component';
+export { useCardDivider } from './hook';