import { Source } from "../Image"; export type TagType = { description?: string; tagBackgroundColor?: string; tagColor?: string; } | null; export type ButtonType = { buttonType?: "button" | "submit"; dataCollect?: string | null | undefined; dataCollectInfo?: string | null | undefined; dataQA?: string | null | undefined; dataTestId?: string | null | undefined; disabled?: boolean | undefined; label: string; name?: string | undefined; onClick?: Function | undefined; onMouseDown?: Function | undefined; onMouseUp?: Function | undefined; type: "conversion" | "conversion-secondary"; value?: string | undefined; } | null; export type FavoriteType = { dataCollect?: string | null; dataCollectInfo?: string | null; dataQA?: string | null; dataTestId?: string | null; enabled: boolean; onClick?(event: MouseEvent): void; onKeyDown?(event: KeyboardEvent): void; onKeyPress?(event: KeyboardEvent): void; onKeyUp?(event: KeyboardEvent): void; } | null; export type CounterType = { dataCollect?: string | undefined; dataCollectDecrease?: string | undefined; dataCollectIncrease?: string | undefined; dataCollectInfo?: string | undefined; dataCollectInfoDecrease?: string | undefined; dataCollectInfoIncrease?: string | undefined; dataQA?: string | undefined; dataQADecrease?: string | undefined; dataQAIncrease?: string | undefined; dataTestId?: string | undefined; dataTestIdDecrease?: string | undefined; dataTestIdIncrease?: string | undefined; disabled?: boolean | undefined; error?: boolean | undefined; id: string; max?: string | undefined; maxlength?: number | undefined; min?: string | undefined; minlength?: number | undefined; name: string; onChange?: Function | undefined; onDecrease?: Function | undefined; onIncrease?: Function | undefined; readonly?: boolean | undefined; required?: boolean | undefined; size?: number | undefined; tabindex?: number | undefined; value?: string | undefined; width?: string | undefined; } | null; export type RatingType = { average: number; }; export interface CardProductProps { /** * Define um princípio ativo ou genérico de medicamento. */ activePrinciple?: string; /** * Caso definido, inclui o componente button, para interação com o card. * * type ButtonType = { * buttonType?: "button" | "submit"; * dataCollect?: string | null | undefined; * dataCollectInfo?: string | null | undefined; * dataQA?: string | null | undefined; * dataTestId?: string | null | undefined; * disabled?: boolean | undefined; * label: string; * name?: string | undefined; * onClick?: Function | undefined; * onMouseDown?: Function | undefined; * onMouseUp?: Function | undefined; * type: "conversion" | "conversion-secondary"; * value?: string | undefined; * } | null; */ button?: ButtonType; /** * Caso definido, inclui o componente counter, para interação com o card. * * type CounterType = { * dataCollect?: string | undefined; * dataCollectDecrease?: string | undefined; * dataCollectIncrease?: string | undefined; * dataCollectInfo?: string | undefined; * dataCollectInfoDecrease?: string | undefined; * dataCollectInfoIncrease?: string | undefined; * dataQA?: string | undefined; * dataQADecrease?: string | undefined; * dataQAIncrease?: string | undefined; * dataTestId?: string | undefined; * dataTestIdDecrease?: string | undefined; * dataTestIdIncrease?: string | undefined; * disabled?: string | undefined; * error?: boolean | undefined; * id: string; * max?: string | undefined; * maxlength?: number | undefined; * min?: string | undefined; * minlength?: number | undefined; * name: string; * onChange?: Function | undefined; * onDecrease?: Function | undefined; * onIncrease?: Function | undefined; * readonly?: boolean | undefined; * required?: boolean | undefined; * size?: number | undefined; * tabindex?: number | undefined; * value?: string | undefined; * width?: string | undefined; * } | null; */ counter?: CounterType; /** * Apresenta mensagem padrão de produto fora de estoque. */ emptyStock?: boolean; /** * Caso definido, inclui o componente favorite, para interação com o card. * * type FavoriteType = { * dataCollect?: string | null; * dataCollectInfo?: string | null; * dataQA?: string | null; * dataTestId?: string | null; * enabled: boolean; * onClick?(event: MouseEvent): void; * onKeyDown?(event: KeyboardEvent): void; * onKeyPress?(event: KeyboardEvent): void; * onKeyUp?(event: KeyboardEvent): void; * } | null; * */ favorite?: FavoriteType; /** * Apresenta pergunta padrão para o usuário, se deseja ser avisado, quando o produto estiver disponível. */ getNotification?: boolean; /** * Define um preço taxado, para o caso de mecânica "de/por". */ fullPrice?: string; /** * Imagem do banner. Pode ser configurada uma única imagem ou um array de imagens. * * O array de imagem serve para que se carregue diferentes formatos, tamanhos e densidades, que serão carregadas de acordo com as configurações do browser utilizado pelo usuário. As imagens serão carregadas como dentro de um elemento , incluindo os atributos media e/ou type, de acordo com o item definido no Array, o que definirá para o browser quando aquela versão deve ser carregada. * * O array deve conter um item sem media e type definidos, que será usado como padrão, para os casos em que não se encaixe nas demais regras, ou seja, para browsers antigos ou situações que possam não ter sido contempladas nos media queries. * * Caso o array possua mais de um item sem media e type definidos, será utilizado o item de índice menor. * * type Source = { * src: string; * media?: string; * type?: string; * }; * * As dimensões da imagem devem corresponder ao aspect ratio do type definido e ao tamanho com que ela será carregada na página (alguns banners possuem tamanho fixo e outros se adaptam ao tamanho do container pai, mantendo o aspect ratio). A documentação de design possui os tamanhos e aspect ratio de cada tipo. * */ image: Source | Array; /** * Define uma descrição alternativa para a imagem. */ imageAlt: string; /** * Define nome do fabricante; */ manufacturer?: string; /** * Apresenta texto informativo padrão, para informar que o preço refere-se à desconto do fabricante. */ manufacturerDiscount: boolean; /** * Define preço do produto */ price?: string; /** * Define texto de condição para o preço. */ priceCondition?: string; /** * Link para o produto. */ productLink?: string; /** * Define texto de quantidade contida na embalagem. */ quantity?: string; /** * Caso definida, inclui o componente tag no card. * * * type TagType = { * description?: string; * tagBackgroundColor?: string; * tagColor?: string; * } | null; */ tag?: TagType; /** * Define nome do produto. */ title: string; /** * Define tipo de tag a ser usada no título do produto. */ titleTag?: "h1" | "h2" | "h3" | "h4" | "h5"; /** * Define formato visual do card. */ type: "vertical" | "horizontal"; rating?: RatingType; } /** * Para utlizar esse componente, deve-se importar: * * ``` * import Banner from "@raiadrogasil/pulso-react-components/CardProduct"; * ``` * * ou * * * *
* * Obs: O método com chaves importa o código de todos os componentes, mesmo os que não estão listados entre as chave. Portanto, por questão de performance, é desaconselhado seu uso. * *
* ``` * import {CardProduct} from "@raiadrogasil/pulso-react-components/"; * ``` */ declare function CardProduct({ type, title, titleTag, manufacturer, quantity, activePrinciple, fullPrice, price, priceCondition, manufacturerDiscount, button, tag, favorite, image, imageAlt, productLink, emptyStock, getNotification, counter, rating, }: CardProductProps): JSX.Element; export default CardProduct;