@octopusdeploy/design-system-components/dist/src/components/Card/CardGroup.d.ts

The design systems component library.

import type { AdornmentBadge, AdornmentIcon, AdornmentTag } from "./Adornment";
import type { CardButtonProps, CardLinkProps } from "./Card";
type CardGroupProps = SingleSelectCardGroupProps | MultiSelectCardGroupProps | ActionCardGroupProps;
interface SingleSelectCardGroupProps {
    /**
     * The type of card group. "single-select" allows only one card to be selected at a time.
     */
    type: "single-select";
    /**
     * The list of cards to display in the group, which can be either detailed or compact cards.
     */
    items: DetailedCardItem[] | CompactCardItem[];
    /**
     * The value of the currently selected card, which should match the `value` of one of the items in the `items` array. This is used to determine which card is selected.
     */
    value: string;
    /**
     * The callback function that is called when a card is selected.
     */
    onChange: (value: string) => void;
    /**
     * The name of the card group, which is used for accessibility purposes to group related cards together, similar to the name attribute of a radio button.
     */
    groupName: string;
}
interface MultiSelectCardGroupProps {
    /**
     * The type of card group. "multi-select" allows multiple cards to be selected at a time.
     */
    type: "multi-select";
    /**
     * The list of cards to display in the group, which can be either detailed or compact cards.
     */
    items: DetailedCardItem[] | CompactCardItem[];
    /**
     * The values of the currently selected cards, which should match the `value` of one or more items in the `items` array. This is used to determine which cards are selected.
     */
    value: string[];
    /**
     * The callback function that is called with updated values when a card is selected or deselected.
     */
    onChange: (value: string[]) => void;
    /**
     * The name of the card group, which is used for accessibility purposes to group related cards together, similar to the name attribute of a checkbox.
     */
    groupName: string;
}
interface ActionCardGroupProps {
    /**
     * The type of card group. "action" uses action cards, which are designed to display information and actions related to a specific item.
     */
    type: "action";
    /**
     * The list of action cards to display in the group.
     */
    items: ActionCardItem[];
}
export interface DetailedCardItem {
    /**
     * Identifier used to track this card's selection.
     */
    value: string;
    /**
     * The adornment to display at the top of the card, which can be an icon, avatar, tag, or badge.
     */
    adornment?: AdornmentIcon | AdornmentTag | AdornmentBadge;
    /**
     * The title of the card
     */
    title: string;
    /**
     * The description text of the card
     */
    description: string;
    /**
     * Whether the card is disabled.
     */
    disabled?: boolean;
}
export interface CompactCardItem {
    /**
     * Identifier used to track this card's selection.
     */
    value: string;
    /**
     * The adornment to display in front of the title, which can be an icon or avatar.
     */
    adornment?: AdornmentIcon;
    /**
     * The title of the card
     */
    title: string;
    /**
     * Whether the card is disabled.
     */
    disabled?: boolean;
}
export interface ActionCardItem {
    /**
     * The adornments to display on the top of the card, which can include a leading icon and an optional trailing tag or badge.
     */
    adornments?: ActionCardAdornments;
    /**
     * The title of the action card.
     */
    title: string;
    /**
     * The subtitle of the action card.
     */
    subtitle?: string;
    /**
     * The description of the action card.
     */
    description: string;
    /**
     * The primary action of the action card, although it display as a secondary button.
     */
    primaryAction?: CardButtonProps;
    /**
     * The secondary action of the action card, which can be a quiet button or a (external) link.
     */
    secondaryAction?: CardButtonProps | CardLinkProps;
    /**
     * Whether the card actions are disabled.
     */
    disabled?: boolean;
}
interface ActionCardAdornments {
    /**
     * The adornment to display on the top left of the card, which can be an icon or avatar.
     */
    leadingAdornment: AdornmentIcon;
    /**
     * The adornment to display on the top right of the card, which can be a tag or badge.
     */
    trailingAdornment?: AdornmentTag | AdornmentBadge;
}
export declare function CardGroup(props: CardGroupProps): import("react/jsx-runtime").JSX.Element;
export {};