From 92455826e7b157c78fa67cac54ffebbcb535b151 Mon Sep 17 00:00:00 2001 From: Afsal K Date: Mon, 22 Apr 2024 14:29:50 +0530 Subject: [PATCH 1/2] refactor(ExpressiveCard): implement typescript types --- .../{ExpressiveCard.js => ExpressiveCard.tsx} | 128 ++++++++++++++++-- 1 file changed, 116 insertions(+), 12 deletions(-) rename packages/ibm-products/src/components/ExpressiveCard/{ExpressiveCard.js => ExpressiveCard.tsx} (54%) diff --git a/packages/ibm-products/src/components/ExpressiveCard/ExpressiveCard.js b/packages/ibm-products/src/components/ExpressiveCard/ExpressiveCard.tsx similarity index 54% rename from packages/ibm-products/src/components/ExpressiveCard/ExpressiveCard.js rename to packages/ibm-products/src/components/ExpressiveCard/ExpressiveCard.tsx index 12be869197..f04ca91c44 100644 --- a/packages/ibm-products/src/components/ExpressiveCard/ExpressiveCard.js +++ b/packages/ibm-products/src/components/ExpressiveCard/ExpressiveCard.tsx @@ -5,7 +5,7 @@ // 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'; @@ -13,20 +13,120 @@ 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 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 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) => { + const validProps = prepareProps(props, [ + 'actionIconsPosition', + 'overflowActions', + 'productive', + 'titleSize', + ]); - return ( - - ); -}); + return ( + + ); + } +); // 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 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 From c6bac794fee1d37db008352285bc51a7bbd1c3b7 Mon Sep 17 00:00:00 2001 From: Afsal K Date: Tue, 23 Apr 2024 09:36:52 +0530 Subject: [PATCH 2/2] fix(expressiveCard): change actionIcons to array --- .../src/components/ExpressiveCard/ExpressiveCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ibm-products/src/components/ExpressiveCard/ExpressiveCard.tsx b/packages/ibm-products/src/components/ExpressiveCard/ExpressiveCard.tsx index f04ca91c44..5ddd8520f5 100644 --- a/packages/ibm-products/src/components/ExpressiveCard/ExpressiveCard.tsx +++ b/packages/ibm-products/src/components/ExpressiveCard/ExpressiveCard.tsx @@ -26,7 +26,7 @@ interface ExpressiveCardProps extends PropsWithChildren { /** * Icons that are displayed on card. Refer to design documentation for implementation guidelines. Note- href will supersede onClick */ - actionIcons?: ActionIcon; + actionIcons?: ActionIcon[]; /** * Content that shows in the body of the card */