@carbon/ibm-products/es/components/GetStartedCard/GetStartedCard.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 from 'react';
import PropTypes from '../../_virtual/index.js';
import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
import { pkg } from '../../settings.js';
import { Card } from '../Card/Card.js';

const componentName = 'GetStartedCard';
/**
 * GetStartedCard a card with icon, number, and media variants
 */
let GetStartedCard = /*#__PURE__*/React__default.forwardRef((props, ref) => {
  return /*#__PURE__*/React__default.createElement(Card, _extends({}, props, {
    ref,
    getStarted: true
  }, getDevtoolsProps(componentName)));
});

// Return a placeholder if not released and not enabled by feature flag
GetStartedCard = pkg.checkComponentEnabled(GetStartedCard, componentName);
GetStartedCard.displayName = componentName;
GetStartedCard.propTypes = {
  /**
   * Provide an optional class to be applied to the containing node.
   */
  className: PropTypes.string,
  /**
   * Optional if the card should be disabled
   */
  disabled: PropTypes.bool,
  /**
   * Provides the action icon that's displayed at the footer of the card
   */
  /**@ts-ignore */
  footerActionIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
  /**
   * Optional label for the top of the card
   */
  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
  /**
   * Optional media content like an image to be placed in the card
   */
  media: PropTypes.node,
  /**
   * Icons that are displayed on the card showing the time and skill needed
   */
  /**@ts-ignore */
  metadata: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.string,
    icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
    iconDescription: PropTypes.string
  })),
  /**
   * Provides the callback for a clickable card
   */
  onClick: PropTypes.func.isRequired,
  /**
   * Provides the icon that's displayed at the top of the card
   */
  /**@ts-ignore */
  pictogram: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
  /**
   * Provides number for card for tasks in a sequential order
   */
  sequence: PropTypes.number,
  /**
   * Provides the status that's displayed at the top of the card
   */
  status: PropTypes.oneOf(['complete', 'incomplete']),
  /**
   * Title that's displayed at the top of the card
   */
  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
};

export { GetStartedCard };