@wix/design-system/dist/types/CardGalleryItem/CardGalleryItem.types.d.ts

@wix/design-system

import React from 'react';
import { ProportionProps } from '../Proportion';
import { ValuesOf } from '../utils/typeUtils';
import { SIZES } from './CardGalleryItem.constants';
import { DragHandleProps } from '../DragHandle/DragHandle.types';
export type CardGalleryItemProps = {
    /** Accepts a <Badge/> or any other static indicator. Passed element will be displayed at the top left corner of a card. */
    badge?: React.ReactNode;
    /** Set card title. */
    title?: React.ReactNode;
    /** Set card subtitle. */
    subtitle?: React.ReactNode;
    /** Accepts any component to be rendered as a suffix of the card's footer. */
    suffix?: React.ReactNode;
    /** Show drag handle */
    draggable?: boolean;
    /** Extra props to pass to the `<DragHandle />` element. */
    dragHandleProps?: Partial<DragHandleProps>;
    /** Indicates the element is dragging. */
    dragging?: boolean;
    /** Removes buttons when other element is dragging and this card is droppable. */
    droppable?: boolean;
    /** Show disabled drag handle. */
    dragDisabled?: boolean;
    /** Specifies the tab order of the component. */
    tabIndex?: number;
    /**
     * Set card size.
     * @default 'medium'
     */
    size?: ValuesOf<typeof SIZES>;
    /** Specifies background image URL. */
    backgroundImageUrl?: string;
    /** Accepts any component to be rendered as a background image. */
    backgroundImageNode?: React.ReactNode;
    /** Defines properties for the primary action button. */
    primaryActionProps?: {
        /** Label of primary action button. */
        label?: React.ReactNode;
        /** On click handler of primary action button and of the whole card. */
        onClick?: React.MouseEventHandler<HTMLDivElement>;
        /** Disable the primary action button */
        disabled?: boolean;
        /** Message to be displayed when primary action button is disabled. */
        disabledMessage?: string;
    };
    /** Defines properties for the secondary action button. */
    secondaryActionProps?: {
        /** Label of secondary action text button */
        label?: React.ReactNode;
        /** On click handler of secondary action text button. */
        onClick?: React.MouseEventHandler<HTMLButtonElement>;
    };
    /** Defines a popover menu to be displayed on hover at the top right corner or a card. */
    settingsMenu?: React.ReactNode;
    /** Applies a data-hook HTML attribute that can be used in the tests. */
    dataHook?: string;
    /**
     * Recommended values:
     * - Square - 1
     * - Portrait - 3/4
     * - Cinema - 16/9
     * - Landscape - 4/3
     * - Custom number (e.g. 1.5)
     * @default 1.6
     */
    aspectRatio?: ProportionProps['aspectRatio'];
    /**
     * Sets placement of background image.
     * @default 'top'
     */
    imagePlacement?: 'top' | 'side';
    /**
     * Sets suffix behavior to appear only on card hover.
     * @default false
     */
    showSuffixOnHover?: boolean;
    /**
     * Sets skin to the card item.
     * @default 'standard'
     */
    skin?: 'standard' | 'outlined';
    /**
     * Sets when the skin is visible.
     * @default 'always'
     */
    skinVisibility?: 'always' | 'hover';
    /** Accepts any component to be rendered under default footer. Only on imagePlacement 'top'. */
    footer?: React.ReactNode;
};
//# sourceMappingURL=CardGalleryItem.types.d.ts.map