synapse-react-client/dist/components/GenericCard/GenericCard.d.ts

[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie

import { CardLabel } from '@/components/row_renderers/utils/CardFooter';
import { FileHandleAssociation } from '@sage-bionetworks/synapse-types';
import React from 'react';
import { DescriptionConfig } from '../CardContainerLogic';
import { HeaderCardVariant } from '../HeaderCard';
import { SustainabilityScorecardProps } from '../SustainabilityScorecard/SustainabilityScorecard';
/** Resolved CTA link configuration with actual href values (as opposed to CTACardLink which uses column names) */
export type CTALinkConfig = {
    text: React.ReactNode;
    href?: string;
    target?: string;
};
export type GenericCardProps = {
    /** String representing the 'type' of object. This is displayed as a label on the card. */
    type: string;
    /** The title displayed on the card. */
    title: string;
    /** Optionally provide href/target if the title should be a link */
    titleLinkConfiguration?: {
        href: string;
        target: string;
    };
    /** Optionally provide configuration if the title should be a link to a Synapse FileHandle */
    titleAsFileHandleLinkConfiguration?: {
        /** The FileHandleAssociation used to get access to the file handle */
        fileHandleAssociation: FileHandleAssociation;
        /** Whether a 'download' icon should be shown */
        showDownloadIcon: boolean;
    };
    /** An optional subtitle to be displayed on the card */
    subtitle?: string;
    /** An description to be displayed on the card */
    description: string;
    /** An optional description subtitle to be displayed on the card */
    descriptionSubTitle?: string;
    /** Configuration for altering the display of the description prop */
    descriptionConfig?: DescriptionConfig;
    /** Optional slot for adding content to the top of the card */
    cardTopContent?: React.ReactNode;
    /** Optional slot for adding action buttons to the top of the card */
    cardTopButtons?: React.ReactNode;
    /** If true, a HeaderCard component will be rendered */
    isHeader?: boolean;
    /** The variant of HeaderCard to render if `isHeader` is true */
    headerCardVariant?: HeaderCardVariant;
    /** Set to true if the icon is an arbitrary image. The card styles will be updated to accommodate the image
     * @default false */
    useStylesForDisplayedImage?: boolean;
    /**
     * The rendered icon on the card
     */
    icon: React.ReactNode;
    /**
     * The card labels to be displayed in the footer of the card
     */
    labels?: CardLabel[];
    /**
     * The initial number of labels to display in the footer of the card
     */
    secondaryLabelLimit?: number;
    /**
     * Optional configuration for displaying CTA button(s) on the card. Accepts a single config or an array.
     */
    ctaLinkConfig?: CTALinkConfig | CTALinkConfig[];
    /**
     * The rendered icon list on the card
     */
    renderedIconList?: React.ReactNode;
    /**
     * Optional sustainability scorecard to be displayed on the header card
     */
    sustainabilityScorecard?: SustainabilityScorecardProps;
    /**
     * Optional ReactNode to be rendered next to the card type
     */
    cardTypeAdornment?: React.ReactNode;
    /**
     * Optional content to render to the right of the title/subtitle/description area.
     */
    titleAreaRightContent?: React.ReactNode;
    /**
     * Character count threshold for truncating description
     * @default 400
     */
    charCountCutoff?: number;
};
/**
 * Generic portal card UI component with a predefined layout
 */
export declare const GenericCard: React.ForwardRefExoticComponent<GenericCardProps & React.RefAttributes<HTMLDivElement>>;
export default GenericCard;
//# sourceMappingURL=GenericCard.d.ts.map