@wordpress/components/build-module/ui/card/component.js

UI components for WordPress.

import _extends from "@babel/runtime/helpers/esm/extends";
import { css as _css } from "emotion";
import { createElement } from "@wordpress/element";

/**
 * WordPress dependencies
 */
import { useMemo } from '@wordpress/element';
/**
 * Internal dependencies
 */

import { contextConnect } from '../context';
import { Elevation } from '../elevation';
import { View } from '../view';
import * as styles from './styles';
import { useCard } from './hook';
import CONFIG from '../../utils/config-values';
/**
 * @param {import('../context').ViewOwnProps<import('./types').CardProps, 'div'>} props
 * @param {import('react').Ref<any>} forwardedRef
 */

function Card(props, forwardedRef) {
  const {
    children,
    elevation,
    isRounded = true,
    ...otherProps
  } = useCard(props);
  const elevationBorderRadius = isRounded ? CONFIG.cardBorderRadius : 0;
  const elevationClassName = useMemo(() => /*#__PURE__*/_css({
    borderRadius: elevationBorderRadius
  }, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdWkvY2FyZC9jb21wb25lbnQuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBK0JRIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdWkvY2FyZC9jb21wb25lbnQuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdlbW90aW9uJztcblxuLyoqXG4gKiBXb3JkUHJlc3MgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IHVzZU1lbW8gfSBmcm9tICdAd29yZHByZXNzL2VsZW1lbnQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjb250ZXh0Q29ubmVjdCB9IGZyb20gJy4uL2NvbnRleHQnO1xuaW1wb3J0IHsgRWxldmF0aW9uIH0gZnJvbSAnLi4vZWxldmF0aW9uJztcbmltcG9ydCB7IFZpZXcgfSBmcm9tICcuLi92aWV3JztcbmltcG9ydCAqIGFzIHN0eWxlcyBmcm9tICcuL3N0eWxlcyc7XG5pbXBvcnQgeyB1c2VDYXJkIH0gZnJvbSAnLi9ob29rJztcbmltcG9ydCBDT05GSUcgZnJvbSAnLi4vLi4vdXRpbHMvY29uZmlnLXZhbHVlcyc7XG5cbi8qKlxuICogQHBhcmFtIHtpbXBvcnQoJy4uL2NvbnRleHQnKS5WaWV3T3duUHJvcHM8aW1wb3J0KCcuL3R5cGVzJykuQ2FyZFByb3BzLCAnZGl2Jz59IHByb3BzXG4gKiBAcGFyYW0ge2ltcG9ydCgncmVhY3QnKS5SZWY8YW55Pn0gZm9yd2FyZGVkUmVmXG4gKi9cbmZ1bmN0aW9uIENhcmQoIHByb3BzLCBmb3J3YXJkZWRSZWYgKSB7XG5cdGNvbnN0IHsgY2hpbGRyZW4sIGVsZXZhdGlvbiwgaXNSb3VuZGVkID0gdHJ1ZSwgLi4ub3RoZXJQcm9wcyB9ID0gdXNlQ2FyZChcblx0XHRwcm9wc1xuXHQpO1xuXHRjb25zdCBlbGV2YXRpb25Cb3JkZXJSYWRpdXMgPSBpc1JvdW5kZWQgPyBDT05GSUcuY2FyZEJvcmRlclJhZGl1cyA6IDA7XG5cblx0Y29uc3QgZWxldmF0aW9uQ2xhc3NOYW1lID0gdXNlTWVtbyhcblx0XHQoKSA9PiBjc3MoIHsgYm9yZGVyUmFkaXVzOiBlbGV2YXRpb25Cb3JkZXJSYWRpdXMgfSApLFxuXHRcdFsgZWxldmF0aW9uQm9yZGVyUmFkaXVzIF1cblx0KTtcblxuXHRyZXR1cm4gKFxuXHRcdDxWaWV3IHsgLi4ub3RoZXJQcm9wcyB9IHJlZj17IGZvcndhcmRlZFJlZiB9PlxuXHRcdFx0PFZpZXcgY3NzPXsgc3R5bGVzLkNvbnRlbnQgfT57IGNoaWxkcmVuIH08L1ZpZXc+XG5cdFx0XHQ8RWxldmF0aW9uXG5cdFx0XHRcdGNsYXNzTmFtZT17IGVsZXZhdGlvbkNsYXNzTmFtZSB9XG5cdFx0XHRcdGlzSW50ZXJhY3RpdmU9eyBmYWxzZSB9XG5cdFx0XHRcdHZhbHVlPXsgZWxldmF0aW9uID8gMSA6IDAgfVxuXHRcdFx0Lz5cblx0XHRcdDxFbGV2YXRpb25cblx0XHRcdFx0Y2xhc3NOYW1lPXsgZWxldmF0aW9uQ2xhc3NOYW1lIH1cblx0XHRcdFx0aXNJbnRlcmFjdGl2ZT17IGZhbHNlIH1cblx0XHRcdFx0dmFsdWU9eyBlbGV2YXRpb24gfVxuXHRcdFx0Lz5cblx0XHQ8L1ZpZXc+XG5cdCk7XG59XG5cbi8qKlxuICogYENhcmRgIGlzIGEgbGF5b3V0IGNvbXBvbmVudCwgcHJvdmlkaW5nIGEgZmxleGlibGUgYW5kIGV4dGVuc2libGUgY29udGVudCBjb250YWluZXIuXG4gKlxuICogYENhcmRgIHByb3ZpZGVzIGNvbnZlbmllbnQgc3ViLWNvbXBvbmVudHMgc3VjaCBhcyBgQ2FyZEJvZHlgLCBgQ2FyZEhlYWRlcmAsIGFuZCBgQ2FyZEZvb3RlcmAuXG4gKlxuICogQGV4YW1wbGVcbiAqIGBgYGpzeFxuICogaW1wb3J0IHtcbiAqICAgQ2FyZCxcbiAqICAgQ2FyZEhlYWRlcixcbiAqICAgQ2FyZEJvZHksXG4gKiAgIENhcmRGb290ZXIsXG4gKiAgIFRleHQsXG4gKiAgIEhlYWRpbmcsXG4gKiB9IGZyb20gYEB3b3JkcHJlc3MvY29tcG9uZW50c2A7XG4gKlxuICogZnVuY3Rpb24gRXhhbXBsZSgpIHtcbiAqICAgcmV0dXJuIChcbiAqICAgICA8Q2FyZD5cbiAqICAgICAgIDxDYXJkSGVhZGVyPlxuICogICAgICAgICA8SGVhZGluZyBzaXplPXsgNCB9PkNhcmQgVGl0bGU8L0hlYWRpbmc+XG4gKiAgICAgICA8L0NhcmRIZWFkZXI+XG4gKiAgICAgICA8Q2FyZEJvZHk+XG4gKiAgICAgICAgIDxUZXh0PkNhcmQgQ29udGVudDwvVGV4dD5cbiAqICAgICAgIDwvQ2FyZEJvZHk+XG4gKiAgICAgICA8Q2FyZEZvb3Rlcj5cbiAqICAgICAgICAgPFRleHQ+Q2FyZCBGb290ZXI8L1RleHQ+XG4gKiAgICAgICA8L0NhcmRGb290ZXI+XG4gKiAgICAgPC9DYXJkPlxuICogICApO1xuICogfVxuICogYGBgXG4gKi9cbmNvbnN0IENvbm5lY3RlZENhcmQgPSBjb250ZXh0Q29ubmVjdCggQ2FyZCwgJ0NhcmQnICk7XG5cbmV4cG9ydCBkZWZhdWx0IENvbm5lY3RlZENhcmQ7XG4iXX0= */"), [elevationBorderRadius]);
  return createElement(View, _extends({}, otherProps, {
    ref: forwardedRef
  }), createElement(View, {
    css: styles.Content
  }, children), createElement(Elevation, {
    className: elevationClassName,
    isInteractive: false,
    value: elevation ? 1 : 0
  }), createElement(Elevation, {
    className: elevationClassName,
    isInteractive: false,
    value: elevation
  }));
}
/**
 * `Card` is a layout component, providing a flexible and extensible content container.
 *
 * `Card` provides convenient sub-components such as `CardBody`, `CardHeader`, and `CardFooter`.
 *
 * @example
 * ```jsx
 * import {
 *   Card,
 *   CardHeader,
 *   CardBody,
 *   CardFooter,
 *   Text,
 *   Heading,
 * } from `@wordpress/components`;
 *
 * function Example() {
 *   return (
 *     <Card>
 *       <CardHeader>
 *         <Heading size={ 4 }>Card Title</Heading>
 *       </CardHeader>
 *       <CardBody>
 *         <Text>Card Content</Text>
 *       </CardBody>
 *       <CardFooter>
 *         <Text>Card Footer</Text>
 *       </CardFooter>
 *     </Card>
 *   );
 * }
 * ```
 */


const ConnectedCard = contextConnect(Card, 'Card');
export default ConnectedCard;
//# sourceMappingURL=component.js.map