From 0856ce01c45d7220cc8e42574d08d8bf3da0f299 Mon Sep 17 00:00:00 2001
From: ariellalgilmore <ariellalgilmore@gmail.com>
Date: Wed, 24 Jul 2024 12:04:16 -0700
Subject: [PATCH] feat(GetStartedCard): update to typescript

---
 .../{GetStartedCard.js => GetStartedCard.tsx} | 85 +++++++++++++++++--
 1 file changed, 78 insertions(+), 7 deletions(-)
 rename packages/ibm-products/src/components/GetStartedCard/{GetStartedCard.js => GetStartedCard.tsx} (56%)

diff --git a/packages/ibm-products/src/components/GetStartedCard/GetStartedCard.js b/packages/ibm-products/src/components/GetStartedCard/GetStartedCard.tsx
similarity index 56%
rename from packages/ibm-products/src/components/GetStartedCard/GetStartedCard.js
rename to packages/ibm-products/src/components/GetStartedCard/GetStartedCard.tsx
index fb551b7b1d..323a8cb933 100644
--- a/packages/ibm-products/src/components/GetStartedCard/GetStartedCard.js
+++ b/packages/ibm-products/src/components/GetStartedCard/GetStartedCard.tsx
@@ -5,9 +5,9 @@
  * 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';
@@ -15,14 +15,82 @@ 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]),
 
   /**