@carbon/ibm-products/lib/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.
 */

'use strict';

var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
var React = require('react');
var index = require('../../_virtual/index.js');
var devtools = require('../../global/js/utils/devtools.js');
var settings = require('../../settings.js');
var propsHelper = require('../../global/js/utils/props-helper.js');
var Card = require('../Card/Card.js');

const componentName = 'ExpressiveCard';
exports.ExpressiveCard = /*#__PURE__*/React.forwardRef((props, ref) => {
  const validProps = propsHelper.prepareProps(props, ['actionIconsPosition', 'overflowActions', 'productive', 'titleSize']);
  return /*#__PURE__*/React.createElement(Card.Card, _rollupPluginBabelHelpers.extends({
    ref: ref
  }, validProps, devtools.getDevtoolsProps(componentName)));
});

// Return a placeholder if not released and not enabled by feature flag
exports.ExpressiveCard = settings.pkg.checkComponentEnabled(exports.ExpressiveCard, componentName);
exports.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: index.default.arrayOf(index.default.shape({
    id: index.default.string,
    icon: index.default.oneOfType([index.default.func, index.default.object]),
    onKeyDown: index.default.func,
    onClick: index.default.func,
    iconDescription: index.default.string,
    /**
     * @deprecated please use the `link.href` instead
     */
    href: index.default.string,
    link: index.default.shape({
      href: index.default.string.isRequired
    })
  })),
  /**
   * Content that shows in the body of the card
   */
  children: index.default.node,
  /**
   * Optional user provided class
   */
  className: index.default.string,
  /**
   * Optional prop that allows you to pass any component.
   */
  decorator: index.default.oneOfType([index.default.node, index.default.bool]),
  /**
   * Optional header description
   */
  description: index.default.oneOfType([index.default.string, index.default.object, index.default.node]),
  /**
   * Optional label for the top of the card
   */
  label: index.default.oneOfType([index.default.string, index.default.object, index.default.node]),
  /**
   * Optional media content like an image to be placed in the card
   */
  media: index.default.node,
  /**
   * Establishes the position of the media in the card
   */
  mediaPosition: index.default.oneOf(['top', 'left']),
  /**
   * Provides the callback for a clickable card
   */
  onClick: index.default.func,
  /**
   * Function that's called from the primary button or action icon
   */
  onPrimaryButtonClick: index.default.func,
  /**
   * Function that's called from the secondary button
   */
  onSecondaryButtonClick: index.default.func,
  /**
   * Provides the icon that's displayed at the top of the card
   */
  /**@ts-ignore */
  pictogram: index.default.oneOfType([index.default.func, index.default.object]),
  /**
   * Optionally specify an href for your Button to become an <a> element
   */
  primaryButtonHref: index.default.string,
  /**
   * Optional prop to allow overriding the icon rendering. Can be a React component class
   */
  /**@ts-ignore */
  primaryButtonIcon: index.default.oneOfType([index.default.func, index.default.object]),
  /**
   * Establishes the kind of button displayed for the primary button
   */
  primaryButtonKind: index.default.oneOf(['primary', 'ghost']),
  /**
   * The text that's displayed in the primary button
   */
  primaryButtonText: index.default.string,
  /**
   * Optionally specify an href for your Button to become an <a> element
   */
  secondaryButtonHref: index.default.string,
  /**
   * Optional prop to allow overriding the icon rendering. Can be a React component class
   */
  /**@ts-ignore */
  secondaryButtonIcon: index.default.oneOfType([index.default.func, index.default.object]),
  /**
   * Establishes the kind of button displayed for the secondary button
   */
  secondaryButtonKind: index.default.oneOf(['secondary', 'ghost']),
  /**
   * The text that's displayed in the secondary button
   */
  secondaryButtonText: index.default.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: index.default.oneOfType([index.default.node, index.default.bool]),
  /**
   * Title that's displayed at the top of the card
   */
  title: index.default.oneOfType([index.default.string, index.default.object, index.default.node])
};
exports.ExpressiveCard.displayName = componentName;