refactor(ExpressiveCard): implement typescript types

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

@@ -5,28 +5,128 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-import React, { forwardRef } from 'react';
+import React, { PropsWithChildren, ReactNode, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { Card } from '../Card';
 
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import { prepareProps } from '../../global/js/utils/props-helper';
 import { pkg } from '../../settings';
 
+type ActionIcon = {
+  id?: string;
+  icon?: () => void | object;
+  onKeydown?: () => void;
+  onClick?: () => void;
+  iconDescription?: string;
+  href?: string;
+};
+
+interface ExpressiveCardProps extends PropsWithChildren {
+  /**
+   * Icons that are displayed on card. Refer to design documentation for implementation guidelines. Note- href will supersede onClick
+   */
+  actionIcons?: ActionIcon[];
+  /**
+   * Content that shows in the body of the card
+   */
+  // children: PropTypes.node,
+  /**
+   * Optional user provided class
+   */
+  className?: string;
+  /**
+   * Optional header description
+   */
+  description?: string | object | ReactNode;
+  /**
+   * 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;
+  /**
+   * Establishes the position of the media in the card
+   */
+  mediaPosition?: 'top' | 'left';
+  /**
+   * Provides the callback for a clickable card
+   */
+  onClick?: () => void;
+  /**
+   * Function that's called from the primary button or action icon
+   */
+  onPrimaryButtonClick?: () => void;
+  /**
+   * Function that's called from the secondary button
+   */
+  onSecondaryButtonClick?: () => void;
+  /**
+   * Provides the icon that's displayed at the top of the card
+   */
+  pictogram?: () => void | object;
+  /**
+   * Optionally specify an href for your Button to become an <a> element
+   */
+  primaryButtonHref?: string;
+  /**
+   * Optional prop to allow overriding the icon rendering. Can be a React component class
+   */
+  primaryButtonIcon?: () => void | object;
+  /**
+   * Establishes the kind of button displayed for the primary button
+   */
+  primaryButtonKind?: 'primary' | 'ghost';
+  /**
+   * The text that's displayed in the primary button
+   */
+  primaryButtonText?: string;
+  /**
+   * Optionally specify an href for your Button to become an <a> element
+   */
+  secondaryButtonHref?: string;
+  /**
+   * Optional prop to allow overriding the icon rendering. Can be a React component class
+   */
+  secondaryButtonIcon?: () => void | object;
+  /**
+   * Establishes the kind of button displayed for the secondary button
+   */
+  secondaryButtonKind?: 'secondary' | 'ghost';
+  /**
+   * The text that's displayed in the secondary button
+   */
+  secondaryButtonText?: 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.
+   */
+  slug?: ReactNode | boolean;
+
+  /**
+   * Title that's displayed at the top of the card
+   */
+  title?: string | object | ReactNode;
+}
+
 const componentName = 'ExpressiveCard';
 
-export let ExpressiveCard = forwardRef((props, ref) => {
-  const validProps = prepareProps(props, [
-    'actionIconsPosition',
-    'overflowActions',
-    'productive',
-    'titleSize',
-  ]);
+export let ExpressiveCard = forwardRef(
+  (props: ExpressiveCardProps, ref: React.Ref<HTMLDivElement>) => {
+    const validProps = prepareProps(props, [
+      'actionIconsPosition',
+      'overflowActions',
+      'productive',
+      'titleSize',
+    ]);
 
-  return (
-    <Card ref={ref} {...validProps} {...getDevtoolsProps(componentName)} />
-  );
-});
+    return (
+      <Card ref={ref} {...validProps} {...getDevtoolsProps(componentName)} />
+    );
+  }
+);
 
 // Return a placeholder if not released and not enabled by feature flag
 ExpressiveCard = pkg.checkComponentEnabled(ExpressiveCard, componentName);
@@ -35,6 +135,7 @@ ExpressiveCard.propTypes = {
   /**
    * Icons that are displayed on card. Refer to design documentation for implementation guidelines. Note- href will supersede onClick
    */
+  /**@ts-ignore */
   actionIcons: PropTypes.arrayOf(
     PropTypes.shape({
       id: PropTypes.string,
@@ -92,6 +193,7 @@ ExpressiveCard.propTypes = {
   /**
    * Provides the icon that's displayed at the top of the card
    */
+  /**@ts-ignore */
   pictogram: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * Optionally specify an href for your Button to become an <a> element
@@ -100,6 +202,7 @@ ExpressiveCard.propTypes = {
   /**
    * Optional prop to allow overriding the icon rendering. Can be a React component class
    */
+  /**@ts-ignore */
   primaryButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * Establishes the kind of button displayed for the primary button
@@ -116,6 +219,7 @@ ExpressiveCard.propTypes = {
   /**
    * Optional prop to allow overriding the icon rendering. Can be a React component class
    */
+  /**@ts-ignore */
   secondaryButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * Establishes the kind of button displayed for the secondary button