@wonderflow/react-components
Version:
UI components from Wonderflow's Wanda design system
47 lines • 2.1 kB
TypeScript
import React, { PropsWithChildren } from 'react';
import { ProductCardFooterComponent } from './product-card-footer/product-card-footer';
import { ProductCardHeaderComponent, ProductCardHeaderProps } from './product-card-header/product-card-header';
import { ProductCardKpisComponent, ProductCardKpisProps } from './product-card-kpis/product-card-kpis';
import { ProductCardMediaComponent, ProductCardMediaProps } from './product-card-media/product-card-media';
export declare type ProductCardProps = PropsWithClass<PropsWithChildren<{
/**
* Change the product card layout.
*/
direction?: 'vertical' | 'horizontal';
/**
* Add a border to the card to increase its visual weight and contrast.
*/
bordered?: boolean;
/**
* Change the style of the card when it is hovered.
*/
highlightOnHover?: boolean;
/**
* Set the content to be displayed on the overlay layer.
*/
overlayActions?: React.ReactNode;
/**
* Add content to the footer.
*/
footer?: React.ReactNode;
/**
* Set the loading state showing a skeleton.
*/
isLoading?: boolean;
/**
* Shows a colored cover with the first two letters of the title.
*/
hasColoredCover?: boolean;
/**
* Set an action to be performed when clicked.
*/
onClick?: () => void;
}>> & Pick<ProductCardMediaProps, 'ratio' | 'source'> & Pick<ProductCardHeaderProps, 'title' | 'titleRows' | 'subtitle' | 'menuActions'> & Pick<ProductCardKpisProps, 'rating' | 'feedbackCount' | 'votesCount' | 'votesRating' | 'users' | 'skus' | 'sentiment' | 'priceMin' | 'priceMax' | 'nps' | 'kpisRowGap' | 'kpiItems' | 'groups' | 'tgw' | 'skusCap' | 'usersCap' | 'currency' | 'currencyDecimals'>;
export declare type ProductCardComponent = React.ForwardRefExoticComponent<ProductCardProps> & {
Media: ProductCardMediaComponent;
Kpis: ProductCardKpisComponent;
Header: ProductCardHeaderComponent;
Footer: ProductCardFooterComponent;
};
export declare const ProductCard: ProductCardComponent;
//# sourceMappingURL=product-card.d.ts.map