@carbon/ibm-products/es/components/ProductiveCard/ProductiveCard.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 = 'ProductiveCard';
let ProductiveCard = /*#__PURE__*/forwardRef((_ref, ref) => {
  let {
    actionsPlacement = 'top',
    ...rest
  } = _ref;
  const validProps = prepareProps(rest, ['media', 'mediaPosition', 'pictogram', 'primaryButtonClick', 'productive', 'secondaryButtonKind']);
  return /*#__PURE__*/React__default.createElement(Card, _extends({}, validProps, {
    actionsPlacement,
    ref,
    productive: true
  }, getDevtoolsProps(componentName)));
});

// Return a placeholder if not released and not enabled by feature flag
ProductiveCard = pkg.checkComponentEnabled(ProductiveCard, componentName);
ProductiveCard.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
    })
  })),
  /**
   * Determines if the action icons are on the top or bottom of the card
   */
  actionsPlacement: PropTypes.oneOf(['top', 'bottom']),
  /**
   * Content that shows in the body of the card
   */
  children: PropTypes.node,
  /**
   * Optional user provided class
   */
  className: PropTypes.string,
  /**
   * Designates which zones of the card are clickable. Refer to design documentation for implementation guidelines
   */
  clickZone: PropTypes.oneOf(['one', 'two', 'three']),
  /**
   * 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]),
  /**
   * Sets the text for the OverflowMenu trigger button tooltip and OverflowMenu aria label,
   * gets overridden by the `overflowAriaLabel` prop.
   *
   * @deprecated Please use the `overflowAriaLabel` prop instead.
   */
  iconDescription: PropTypes.string,
  /**
   * Optional label for the top of the card
   */
  label: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.node]),
  /**
   * 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 or action icon
   */
  onSecondaryButtonClick: PropTypes.func,
  /**
   * Use an overflow menu instead of action icons. Refer to design documentation for implementation guidelines
   */
  /**@ts-ignore */
  overflowActions: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.string,
    itemText: PropTypes.string,
    onClick: PropTypes.func,
    onKeyDown: PropTypes.func
  })),
  /**
   * Sets the text for the OverflowMenu aria label and the OverflowMenu trigger button tooltip.
   * Overrides `iconDescription` prop.
   */
  overflowAriaLabel: PropTypes.string,
  /**
   * Determines if the primary button is enabled or not
   */
  primaryButtonDisabled: PropTypes.bool,
  /**
   * 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]),
  /**
   * Determines if the primary button is on the top or bottom of the card
   */
  primaryButtonPlacement: PropTypes.oneOf(['top', 'bottom']),
  /**
   * The text that's displayed in the primary button
   */
  /**@ts-ignore */
  primaryButtonText: PropTypes.node,
  /**
   * 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]),
  /**
   * Determines if the secondary button is on the top or bottom of the card
   */
  secondaryButtonPlacement: PropTypes.oneOf(['top', 'bottom']),
  /**
   * The text that's displayed in the secondary button
   */
  /**@ts-ignore */
  secondaryButtonText: PropTypes.node,
  /**
   * **Experimental:** For all cases a `Slug` component can be provided.
   * Clickable tiles only accept a boolean value of true and display a hollow slug.
   */
  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]),
  /**
   * Determines title size
   */
  titleSize: PropTypes.oneOf(['default', 'large'])
};
ProductiveCard.displayName = componentName;

export { ProductiveCard };