Gutenboarding: Drop FSE reuse/use MediaCard (#38456)

* Copy and use Card from Gutenberg

* Replace FSE reuse with new component

* Override position:fixed to enable scrolling

client/landing/gutenboarding/components/card/README.md

@@ -0,0 +1,104 @@
+# THIS IS TEMPORARY
+
+This is an unreleased component copied from
+[`@wordpress/components`](https://github.com/WordPress/gutenberg/tree/master/packages/components/src/card).
+
+_It should not be heavily modified, it will be replaced with the published component soon._
+
+# Card
+
+Card provides a flexible and extensible content container.
+
+## Usage
+
+```jsx
+import { Card, CardBody } from '@wordpress/components';
+
+const Example = () => (
+	<Card>
+		<CardBody>...</CardBody>
+	</Card>
+);
+```
+
+## 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. |
+
+## Sub-Components
+
+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)
+
+### Sub-Components Example
+
+```jsx
+import {
+	Card,
+	CardBody,
+	CardDivider,
+	CardFooter,
+	CardHeader,
+	CardMedia
+} from '@wordpress/components';
+
+const Example = () => (
+	<Card>
+		<CardHeader>
+			...
+		</CardHeader>
+		<CardBody>
+			...
+		<CardBody>
+		<CardDivider />
+		<CardBody>
+			...
+		<CardBody>
+		<CardMedia>
+			<img src="..." />
+		</CardMedia>
+		<CardHeader>
+			...
+		</CardHeader>
+	</Card>
+);
+```
+
+### Context
+
+`<Card />`'s sub-components are connected to `<Card />` using [Context](https://reactjs.org/docs/context.html). Certain props like `size` and `variant` are passed through to the sub-components.
+
+In the following example, the `<CardBody />` will render with a size of `small`:
+
+```jsx
+import { Card, CardBody } from '@wordpress/components';
+
+const Example = () => (
+	<Card size="small">
+		<CardBody>...</CardBody>
+	</Card>
+);
+```
+
+These sub-components are designed to be flexible. The Context props can be overridden by the sub-component(s) as required. In the following example, the last `<CardBody />` will render it's specified size:
+
+```jsx
+import { Card, CardBody } from '@wordpress/components';
+
+const Example = () => (
+	<Card size="small">
+		<CardBody>...</CardBody>
+		<CardBody>...</CardBody>
+		<CardBody size="large">...</CardBody>
+	</Card>
+);
+```

client/landing/gutenboarding/components/card/body.js

@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import { BodyUI } from './styles/card-styles';
+import { useCardContext } from './context';
+
+export const defaultProps = {
+	isShady: false,
+	size: 'medium',
+};
+
+export function CardBody( props ) {
+	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;

client/landing/gutenboarding/components/card/context.js

@@ -0,0 +1,7 @@
+/**
+ * External dependencies
+ */
+import { createContext, useContext } from '@wordpress/element';
+
+export const CardContext = createContext( {} );
+export const useCardContext = () => useContext( CardContext );

client/landing/gutenboarding/components/card/divider.js

@@ -0,0 +1,22 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import { DividerUI } from './styles/card-styles';
+
+export function CardDivider( props ) {
+	const { className, ...additionalProps } = props;
+
+	const classes = classnames( 'components-card__divider', className );
+
+	return (
+		<DividerUI { ...additionalProps } children={ null } className={ classes } role="separator" />
+	);
+}
+
+export default CardDivider;

client/landing/gutenboarding/components/card/footer.js

@@ -0,0 +1,35 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import { FooterUI } from './styles/card-styles';
+import { useCardContext } from './context';
+
+export const defaultProps = {
+	isBorderless: false,
+	isShady: false,
+	size: 'medium',
+};
+
+export function CardFooter( props ) {
+	const { className, isShady, ...additionalProps } = props;
+	const mergedProps = { ...defaultProps, ...useCardContext(), ...props };
+	const { isBorderless, size } = mergedProps;
+
+	const classes = classnames(
+		'components-card__footer',
+		isBorderless && 'is-borderless',
+		isShady && 'is-shady',
+		size && `is-size-${ size }`,
+		className
+	);
+
+	return <FooterUI { ...additionalProps } className={ classes } />;
+}
+
+export default CardFooter;

client/landing/gutenboarding/components/card/header.js

@@ -0,0 +1,35 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import { HeaderUI } from './styles/card-styles';
+import { useCardContext } from './context';
+
+export const defaultProps = {
+	isBorderless: false,
+	isShady: false,
+	size: 'medium',
+};
+
+export function CardHeader( props ) {
+	const { className, isShady, ...additionalProps } = props;
+	const mergedProps = { ...defaultProps, ...useCardContext(), ...props };
+	const { isBorderless, size } = mergedProps;
+
+	const classes = classnames(
+		'components-card__header',
+		isBorderless && 'is-borderless',
+		isShady && 'is-shady',
+		size && `is-size-${ size }`,
+		className
+	);
+
+	return <HeaderUI { ...additionalProps } className={ classes } />;
+}
+
+export default CardHeader;

client/landing/gutenboarding/components/card/index.js

@@ -0,0 +1,46 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+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;

client/landing/gutenboarding/components/card/media.js

@@ -0,0 +1,20 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import { MediaUI } from './styles/card-styles';
+
+export function CardMedia( props ) {
+	const { className, ...additionalProps } = props;
+
+	const classes = classnames( 'components-card__media', className );
+
+	return <MediaUI { ...additionalProps } className={ classes } />;
+}
+
+export default CardMedia;