import { Source } from "../Image"; export type BannerProps = { /** * Tipo visual do banner. * * Determina o tamanho do banner, aspect ratio e tamanhos mínimos e máximos. */ type: "rd-desktop-category" | "rd-desktop-busca-top-superbanner" | "rd-desktop-home" | "rd-desktop-home-institucional" | "rd-desktop-mini-banner" | "rd-desktop-menu" | "rd-mobile-busca-superbanner" | "rd-mobile-home" | "iab-standard-web-billboard" | "iab-standard-web-large-leaderboard" | "iab-standard-web-leaderboard" | "iab-standard-web-banner" | "iab-standard-web-half-banner" | "iab-standard-web-large-rectangle" | "iab-standard-web-medium-rectangle" | "iab-standard-web-square" | "iab-standard-web-small-square" | "iab-standard-web-small-rectangle" | "iab-standard-web-button" | "iab-standard-web-portrait" | "iab-standard-web-half-page" | "iab-standard-web-wide-skyscraper" | "iab-standard-web-vertical-banner" | "iab-standard-mobile-large-banner" | "iab-standard-mobile-leaderboard" | "iab-standard-mobile-full-page-flex" | "iab-standard-mobile-square" | "iab-standard-mobile-smallsquare" | "iab-flexible-portrait-2:3" | "iab-flexible-portrait-3:4-x-large" | "iab-flexible-portrait-9:16-x-large" | "iab-flexible-portrait-10:16-x-large" | "iab-flexible-landscape-3:2-x-large" | "iab-flexible-landscape-4x3-x-large" | "iab-flexible-landscape-16x9-x-large" | "iab-flexible-landscape-16x10-x-large" | "iab-flexible-horizontal-2:1-half-page-x-large" | "iab-flexible-horizontal-2:1-half-page-small" | "iab-flexible-horizontal-4:1-billboard-x-large" | "iab-flexible-horizontal-6:1-smartphone-banner-x-small" | "iab-flexible-horizontal-8:1-leaderboard-medium" | "iab-flexible-horizontal-10:1-superleaderboard-pushdown-large" | "iab-flexible-vertical-1:2-300x600-large" | "iab-flexible-vertical-1:3-portrait-x-large" | "iab-flexible-vertical-1:4-skyscraper" | "iab-flexible-tiles-1:1-medium-rectangle-medium" | "iab-flexible-tiles-2:1-financial-x-small" | "iab-flexible-tiles-9:16-na-large"; /** * 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. */ alt: string; /** * Atributo padrão do elemento \ do HTML. Caso definido, o container principal renderiza como um link, contendo esse href. */ href?: null; /** * Atribui uma função ao clique de usuário sobre o componente. */ onClick?(): void; /** * Atribui uma função quando o usuário pressiona uma tecla estando com o foco no componente. */ onKeyPress?(): void; /** * Atributo padrão do elemento \ do HTML.Essa propriedade somente pode ser usada, quando a propriedade href é usada. */ download?: null; /** * Atributo padrão do elemento \ do HTML.Essa propriedade somente pode ser usada, quando a propriedade href é usada. */ hreflang?: null; /** * Atributo padrão do elemento \ do HTML.Essa propriedade somente pode ser usada, quando a propriedade href é usada. */ ping?: null; /** * Atributo padrão do elemento \ do HTML.Essa propriedade somente pode ser usada, quando a propriedade href é usada. */ referrerpolicy?: null; /** * Atributo padrão do elemento \ do HTML. Essa propriedade somente pode ser usada, quando a propriedade href é usada. */ rel?: null; /** * Atributo padrão do elemento \ do HTML. Essa propriedade somente pode ser usada, quando a propriedade href é usada. */ target?: null; /** * Atributo padrão do elemento \ do HTML. Essa propriedade somente pode ser usada, quando a propriedade href é usada. */ linkType?: null; /** * Essa Prop inclui um atributo data-qa com o valor configurado no container. */ dataQA?: string | null; /** * Essa Prop inclui um atributo data-collect com o valor configurado no container. */ dataCollect?: string | null; /** * Essa Prop inclui um atributo data-collect-info com o valor configurado no container. */ dataCollectInfo?: string | null; /** * Essa Prop inclui um atributo data-testid com o valor configurado no container. */ dataTestId?: string | null; } | { type: "rd-desktop-category" | "rd-desktop-busca-top-superbanner" | "rd-desktop-home" | "rd-desktop-home-institucional" | "rd-desktop-mini-banner" | "rd-desktop-menu" | "rd-mobile-busca-superbanner" | "rd-mobile-home" | "iab-standard-web-billboard" | "iab-standard-web-large-leaderboard" | "iab-standard-web-leaderboard" | "iab-standard-web-banner" | "iab-standard-web-half-banner" | "iab-standard-web-large-rectangle" | "iab-standard-web-medium-rectangle" | "iab-standard-web-square" | "iab-standard-web-small-square" | "iab-standard-web-small-rectangle" | "iab-standard-web-button" | "iab-standard-web-portrait" | "iab-standard-web-half-page" | "iab-standard-web-wide-skyscraper" | "iab-standard-web-vertical-banner" | "iab-standard-mobile-large-banner" | "iab-standard-mobile-leaderboard" | "iab-standard-mobile-full-page-flex" | "iab-standard-mobile-square" | "iab-standard-mobile-smallsquare" | "iab-flexible-portrait-2:3" | "iab-flexible-portrait-3:4-x-large" | "iab-flexible-portrait-9:16-x-large" | "iab-flexible-portrait-10:16-x-large" | "iab-flexible-landscape-3:2-x-large" | "iab-flexible-landscape-4x3-x-large" | "iab-flexible-landscape-16x9-x-large" | "iab-flexible-landscape-16x10-x-large" | "iab-flexible-horizontal-2:1-half-page-x-large" | "iab-flexible-horizontal-2:1-half-page-small" | "iab-flexible-horizontal-4:1-billboard-x-large" | "iab-flexible-horizontal-6:1-smartphone-banner-x-small" | "iab-flexible-horizontal-8:1-leaderboard-medium" | "iab-flexible-horizontal-10:1-superleaderboard-pushdown-large" | "iab-flexible-vertical-1:2-300x600-large" | "iab-flexible-vertical-1:3-portrait-x-large" | "iab-flexible-vertical-1:4-skyscraper" | "iab-flexible-tiles-1:1-medium-rectangle-medium" | "iab-flexible-tiles-2:1-financial-x-small" | "iab-flexible-tiles-9:16-na-large"; image: Source | Array; alt: string; href: string; onClick?(): void; onKeyPress?(): void; download?: string; hreflang?: string; ping?: string; referrerpolicy?: string; rel?: string; target?: "_self" | "_blank" | "_parent" | "_top"; linkType?: string; dataQA?: string | null; dataCollect?: string | null; dataCollectInfo?: string | null; dataTestId?: string | null; }; /** * O Pulso possui dois componentes para implementação de banner: o Banner e o BannerFrame. Para implementações em que a API entrega o banner já montado, contendo imagem(s) e link, ou um iframe, utilize o BannerFrame, que simplesmente reserva um espaço na tela. Para implementações em que a API entrega o conteúdo do banner, para que montemos sua exibição na página, utilize o Banner, pois ele monta a exibição baseado no recebimento de imagem, link e texto alternativo, utilizando boas práticas de SEO, performance e design. * * Para utlizar esse componente, deve-se importar: * * ``` * import Banner from "@raiadrogasil/pulso-react-components/Banner"; * ``` * * 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 {Banner} from "@raiadrogasil/pulso-react-components/"; * ``` */ declare function Banner({ type, image, alt, href, onClick, onKeyPress, download, hreflang, ping, referrerpolicy, rel, target, linkType, dataQA, dataCollect, dataCollectInfo, dataTestId, }: BannerProps): JSX.Element; export default Banner;