@carbon/ibm-security/es/components/Card/Card.js

Carbon for Cloud & Cognitive IBM Security UI components

import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["className", "children", "label", "link", "header", "body", "footer", "onClick"];
/**
 * @file Card.
 * @copyright IBM Security 2019, 2021
 */

import classnames from 'classnames';
import { array, element, func, node, oneOfType, shape, string } from 'prop-types';
import React, { Fragment } from 'react';
import { getComponentNamespace } from '../../globals/namespace';
export var namespace = getComponentNamespace('card');
var Card = function Card(_ref) {
  var className = _ref.className,
    children = _ref.children,
    label = _ref.label,
    link = _ref.link,
    header = _ref.header,
    body = _ref.body,
    footer = _ref.footer,
    onClick = _ref.onClick,
    other = _objectWithoutProperties(_ref, _excluded);
  var cardHeader = header && /*#__PURE__*/React.createElement("div", {
    className: "".concat(namespace, "__header")
  }, header.tag && /*#__PURE__*/React.createElement("p", {
    className: "".concat(namespace, "__header__tag")
  }, header.tag), header.image && /*#__PURE__*/React.createElement("img", {
    className: "".concat(namespace, "__header__image"),
    alt: label,
    src: header.image
  }), /*#__PURE__*/React.createElement("h1", {
    className: "".concat(namespace, "__header__title")
  }, header.title));
  var cardBody = body && /*#__PURE__*/React.createElement("div", {
    className: "".concat(namespace, "__body")
  }, body.text && /*#__PURE__*/React.createElement("p", {
    className: "".concat(namespace, "__body__text")
  }, body.text), body.children);
  var cardFooter = footer && /*#__PURE__*/React.createElement("div", {
    className: "".concat(namespace, "__footer")
  }, footer.children);
  var content = /*#__PURE__*/React.createElement(Fragment, null, cardHeader, cardBody, cardFooter, children);
  var classNames = classnames(namespace, className, _defineProperty({}, "".concat(namespace, "__link"), link));
  return link ? /*#__PURE__*/React.createElement("a", _extends({
    className: classNames,
    href: link,
    "aria-label": label,
    onClick: onClick
  }, other), content) : /*#__PURE__*/React.createElement("div", _extends({
    className: classNames
  }, other), content);
};

/** Card child elements. */
var children = oneOfType([array, element, string]);
Card.defaultProps = {
  body: null,
  children: null,
  className: '',
  footer: null,
  header: null,
  label: '',
  link: null,
  onClick: null
};
Card.propTypes = {
  /** @type {Record<string, any>} An object list of body props. */
  body: shape({
    children: children,
    /** @type {string} The text of the body. */
    text: string
  }),
  children: children,
  /** @type {string} The class. */
  className: string,
  /** @type {Record<string, any>} An object list of footer props. */
  footer: shape({
    children: children
  }),
  /** @type {Record<string, any>} An object list of header props. */
  header: shape({
    /** @type {string} The image of the header. */
    image: string,
    /** @type {string} Card header tag. */
    tag: node,
    /** @type {string} The title of the header. */
    title: string.isRequired
  }),
  /** @type {string} The alt tag content for an image, if included in the header object. */
  label: string,
  /** @type {string} The link. */
  link: string,
  /** @type {string} Click handler. */
  onClick: func
};
export default Card;