@carbon/ibm-products/es/components/ExpressiveCard/ExpressiveCard.js

Carbon for IBM Products

/**
 * Copyright IBM Corp. 2020, 2025
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
import React__default, { forwardRef } from 'react';
import PropTypes from '../../_virtual/index.js';
import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
import { pkg } from '../../settings.js';
import { prepareProps } from '../../global/js/utils/props-helper.js';
import { Card } from '../Card/Card.js';

const componentName = 'ExpressiveCard';
let ExpressiveCard = /*#__PURE__*/forwardRef((props, ref) => {
  const validProps = prepareProps(props, ['actionIconsPosition', 'overflowActions', 'productive', 'titleSize']);
  return /*#__PURE__*/React__default.createElement(Card, _extends({
    ref: ref
  }, validProps, getDevtoolsProps(componentName)));
});

// Return a placeholder if not released and not enabled by feature flag
ExpressiveCard = pkg.checkComponentEnabled(ExpressiveCard, componentName);
ExpressiveCard.propTypes = {
  /**
   * Icons that are displayed on the card. Refer to design documentation for implementation guidelines. Note: href is deprecated. Set link.href for href functionality. If you are setting link object, href is a required property. link object supports all anchor element properties. Precedence: link.href > href. If link.href or href is set => anchor element, else button.
   */
  /**@ts-ignore */
  actionIcons: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.string,
    icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
    onKeyDown: PropTypes.func,
    onClick: PropTypes.func,
    iconDescription: PropTypes.string,
    /**
     * @deprecated please use the `link.href` instead
     */
    href: PropTypes.string,
    link: PropTypes.shape({
      href: PropTypes.string.isRequired
    })
  })),
  /**
   * Content that shows in the body of the card
   */
  children: PropTypes.node,
  /**
   * Optional user provided class
   */
  className: PropTypes.string,
  /**
   * Optional prop that allows you to pass any component.
   */
  decorator: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
  /**
   * Optional header description
   */
  description: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.node]),
  /**
   * Optional label for the top of the card
   */
  label: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.node]),
  /**
   * Optional media content like an image to be placed in the card
   */
  media: PropTypes.node,
  /**
   * Establishes the position of the media in the card
   */
  mediaPosition: PropTypes.oneOf(['top', 'left']),
  /**
   * Provides the callback for a clickable card
   */
  onClick: PropTypes.func,
  /**
   * Function that's called from the primary button or action icon
   */
  onPrimaryButtonClick: PropTypes.func,
  /**
   * Function that's called from the secondary button
   */
  onSecondaryButtonClick: PropTypes.func,
  /**
   * Provides the icon that's displayed at the top of the card
   */
  /**@ts-ignore */
  pictogram: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
  /**
   * Optionally specify an href for your Button to become an <a> element
   */
  primaryButtonHref: PropTypes.string,
  /**
   * Optional prop to allow overriding the icon rendering. Can be a React component class
   */
  /**@ts-ignore */
  primaryButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
  /**
   * Establishes the kind of button displayed for the primary button
   */
  primaryButtonKind: PropTypes.oneOf(['primary', 'ghost']),
  /**
   * The text that's displayed in the primary button
   */
  primaryButtonText: PropTypes.string,
  /**
   * Optionally specify an href for your Button to become an <a> element
   */
  secondaryButtonHref: PropTypes.string,
  /**
   * Optional prop to allow overriding the icon rendering. Can be a React component class
   */
  /**@ts-ignore */
  secondaryButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
  /**
   * Establishes the kind of button displayed for the secondary button
   */
  secondaryButtonKind: PropTypes.oneOf(['secondary', 'ghost']),
  /**
   * The text that's displayed in the secondary button
   */
  secondaryButtonText: PropTypes.string,
  /**
   * **Experimental:** For all cases a `Slug` component can be provided.
   * Clickable tiles only accept a boolean value of true and display a hollow slug.
   * @deprecated please use the `decorator` prop
   */
  slug: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
  /**
   * Title that's displayed at the top of the card
   */
  title: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.node])
};
ExpressiveCard.displayName = componentName;

export { ExpressiveCard };