@payfit/unity-components
Version:
69 lines (68 loc) • 2.82 kB
TypeScript
import { ButtonProps } from 'react-aria-components/Button';
import { LinkProps } from 'react-aria-components/Link';
type AIOutcomeCardContentProps = {
/** Renders the prescribed outcome icon in the leading card slot. */
icon: React.ReactNode;
/** Renders visual-only action content in the trailing card slot. */
actions?: React.ReactNode;
};
type AIOutcomeCardLinkProps = Omit<LinkProps, 'className' | 'style'> & AIOutcomeCardContentProps & {
asElement?: 'a';
};
type AIOutcomeCardButtonProps = Omit<ButtonProps, 'className' | 'style'> & AIOutcomeCardContentProps & {
asElement: 'button';
};
/** Props for {@link RawAIOutcomeCard}. */
export type RawAIOutcomeCardProps = AIOutcomeCardLinkProps | AIOutcomeCardButtonProps;
/**
* Gives people a clear next step after an AI-generated outcome.
* Renders one accessible card surface with a prescribed icon, composed title
* and description, and optional trailing visual actions. It can be either a native
* link or a native button.
* @param props - Link or button props, outcome content, and trailing actions.
* @param props.icon - The fixed Outcome Card icon treatment.
* @param props.actions - Visual-only content rendered at the trailing edge of
* the card.
* @param props.children - Compose `AIOutcomeCardTitle` and
* `AIOutcomeCardDescription` to name and describe the outcome.
* @see {@link RawAIOutcomeCardProps} for all available props.
* @see {@link AIOutcomeCardTitle} and {@link AIOutcomeCardDescription} for the
* accessible name and description parts.
* @example
* ```tsx
* import {
* AIOutcomeCardAction,
* AIOutcomeCardActions,
* AIOutcomeCardDescription,
* AIOutcomeCardIcon,
* AIOutcomeCardTitle,
* RawAIOutcomeCard,
* } from '@payfit/unity-components/ai-kit'
*
* export function PaidLeaveOutcome() {
* return (
* <RawAIOutcomeCard
* actions={
* <AIOutcomeCardActions>
* <AIOutcomeCardAction>View</AIOutcomeCardAction>
* </AIOutcomeCardActions>
* }
* href="/leave/requests/123"
* icon={<AIOutcomeCardIcon name="Calendar" />}
* >
* <AIOutcomeCardTitle>Paid leave</AIOutcomeCardTitle>
* <AIOutcomeCardDescription>
* View paid leave request
* </AIOutcomeCardDescription>
* </RawAIOutcomeCard>
* )
* }
* ```
* @remarks
* `AIOutcomeCardTitle` supplies the card's accessible name and
* `AIOutcomeCardDescription` supplies its accessible description. Keep
* `actions` free of links, buttons, menu triggers, and other interactive
* elements because the card is the sole interactive surface.
*/
declare const RawAIOutcomeCard: import('react').ForwardRefExoticComponent<RawAIOutcomeCardProps & import('react').RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
export { RawAIOutcomeCard };