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

UI components for WordPress.

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _element = require("@wordpress/element");

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _emotion = require("emotion");

var _context = require("../context");

var _elevation = require("../elevation");

var _view = require("../view");

var styles = _interopRequireWildcard(require("./styles"));

var _hook = require("./hook");

var _configValues = _interopRequireDefault(require("../../utils/config-values"));

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * @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
  } = (0, _hook.useCard)(props);
  const elevationBorderRadius = isRounded ? _configValues.default.cardBorderRadius : 0;
  const elevationClassName = (0, _element.useMemo)(() => /*#__PURE__*/(0, _emotion.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 (0, _element.createElement)(_view.View, (0, _extends2.default)({}, otherProps, {
    ref: forwardedRef
  }), (0, _element.createElement)(_view.View, {
    css: styles.Content
  }, children), (0, _element.createElement)(_elevation.Elevation, {
    className: elevationClassName,
    isInteractive: false,
    value: elevation ? 1 : 0
  }), (0, _element.createElement)(_elevation.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 = (0, _context.contextConnect)(Card, 'Card');
var _default = ConnectedCard;
exports.default = _default;
//# sourceMappingURL=component.js.map