@carbon/ibm-products
Version:
Carbon for IBM Products
78 lines (77 loc) • 2.44 kB
TypeScript
import React, { PropsWithChildren, ReactNode } from 'react';
interface Metadata {
id?: string;
icon?: () => ReactNode;
iconDescription?: string;
}
type LinkType = {
href: string;
} & {
[key: string]: unknown;
};
export interface ActionIcon extends Metadata {
onKeydown?: (event: KeyboardEvent) => void;
onClick?: (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
/**
* @deprecated please use the `link.href` instead
*/
href?: string;
link?: LinkType;
}
type OverflowActions = {
id?: string;
itemText?: string;
onClick?: () => void;
onKeydown?: () => void;
};
interface CardProp extends PropsWithChildren {
actionIcons?: readonly ActionIcon[];
actionsPlacement?: 'top' | 'bottom';
children?: ReactNode;
className?: string;
clickZone?: 'one' | 'two' | 'three';
description?: ReactNode;
disabled?: boolean;
footerActionIcon?: React.ElementType;
getStarted?: boolean;
label?: ReactNode;
media?: ReactNode;
mediaPosition?: 'top' | 'left';
metadata?: readonly Metadata[];
onClick?: () => void;
onKeyDown?: () => void;
onPrimaryButtonClick?: () => void;
onSecondaryButtonClick?: () => void;
overflowActions?: readonly OverflowActions[];
overflowAriaLabel?: string;
pictogram?: () => ReactNode;
primaryButtonDisabled?: boolean;
primaryButtonHref?: string;
primaryButtonIcon?: React.ElementType;
primaryButtonKind?: 'primary' | 'ghost';
primaryButtonPlacement?: 'top' | 'bottom';
primaryButtonText?: string;
productive?: boolean;
secondaryButtonDisabled?: boolean;
secondaryButtonHref?: string;
secondaryButtonIcon?: React.ElementType;
secondaryButtonKind?: 'secondary' | 'ghost';
secondaryButtonPlacement?: 'top' | 'bottom';
secondaryButtonText?: string;
sequence?: number;
iconDescription?: string;
/**
* Clickable tiles only accept a boolean value of true and display a hollow slug.
* @deprecated please use the `decorator` prop
*/
slug?: ReactNode | boolean;
/**
* Optional prop that allows you to pass any component.
*/
decorator?: ReactNode | boolean;
status?: 'complete' | 'incomplete';
title?: ReactNode;
titleSize?: 'default' | 'large';
}
export declare const Card: React.ForwardRefExoticComponent<CardProp & React.RefAttributes<HTMLDivElement>>;
export {};