feat(GetStartedCard): update to typescript (#5719)

packages/ibm-products/src/components/GetStartedCard/GetStartedCard.js → packages/ibm-products/src/components/GetStartedCard/GetStartedCard.tsx

@@ -5,24 +5,92 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
-
+import React, { PropsWithChildren, ReactNode } from 'react';
 import PropTypes from 'prop-types';
+import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
 
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import { pkg } from '../../settings';
 
 import { Card } from '../Card';
 const componentName = 'GetStartedCard';
 
+type MetaData = {
+  id?: string;
+  icon?: () => void | object;
+  iconDescription?: string;
+};
+
+interface GetStartedCardProps extends PropsWithChildren {
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className?: string;
+
+  /**
+   * Optional if the card should be disabled
+   */
+  disabled?: boolean;
+
+  /**
+   * Provides the action icon that's displayed at the footer of the card
+   */
+  footerActionIcon: () => void | object;
+
+  /**
+   * Optional label for the top of the card
+   */
+  label?: string | object | ReactNode;
+
+  /**
+   * Optional media content like an image to be placed in the card
+   */
+  media?: ReactNode;
+
+  /**
+   * Icons that are displayed on the card showing the time and skill needed
+   */
+  metadata: MetaData[];
+
+  /**
+   * Provides the callback for a clickable card
+   */
+  onClick?: () => void;
+
+  /**
+   * Provides the icon that's displayed at the top of the card
+   */
+  pictogram?: CarbonIconType;
+
+  /**
+   * Provides number for card for tasks in a sequential order
+   */
+  sequence?: number;
+
+  /**
+   * Provides the status that's displayed at the top of the card
+   */
+  status?: 'complete' | 'incomplete';
+
+  /**
+   * Title that's displayed at the top of the card
+   */
+  title?: string | object | ReactNode;
+}
+
 /**
  * GetStartedCard a card with icon, number, and media variants
  */
-export let GetStartedCard = React.forwardRef(({ ...rest }, ref) => {
-  return (
-    <Card getStarted ref={ref} {...rest} {...getDevtoolsProps(componentName)} />
-  );
-});
+export let GetStartedCard = React.forwardRef(
+  (props: GetStartedCardProps, ref: React.Ref<HTMLDivElement>) => {
+    return (
+      <Card
+        {...{ ...props, ref, getStarted: true }}
+        {...getDevtoolsProps(componentName)}
+      />
+    );
+  }
+);
 
 // Return a placeholder if not released and not enabled by feature flag
 GetStartedCard = pkg.checkComponentEnabled(GetStartedCard, componentName);
@@ -43,6 +111,7 @@ GetStartedCard.propTypes = {
   /**
    * Provides the action icon that's displayed at the footer of the card
    */
+  /**@ts-ignore */
   footerActionIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 
   /**
@@ -62,6 +131,7 @@ GetStartedCard.propTypes = {
   /**
    * Icons that are displayed on the card showing the time and skill needed
    */
+  /**@ts-ignore */
   metadata: PropTypes.arrayOf(
     PropTypes.shape({
       id: PropTypes.string,
@@ -78,6 +148,7 @@ GetStartedCard.propTypes = {
   /**
    * Provides the icon that's displayed at the top of the card
    */
+  /**@ts-ignore */
   pictogram: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 
   /**