@primer/react-brand/lib/CTABanner/CTABanner.d.ts

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

import React from 'react';
import type { BaseProps } from '../component-helpers';
import { HeadingProps } from '../Heading';
import { TextProps } from '../Text';
/**
 * Design tokens
 */
import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/cta-banner/colors-with-modes.css';
export declare const CTABannerBackgroundColors: readonly ["default", "subtle"];
type ResponsiveMap<T> = {
    narrow?: T;
    regular?: T;
    wide?: T;
};
type ResponsiveBackgroundImageSrcMap = ResponsiveMap<string | string[]>;
type BackgroundColors = (typeof CTABannerBackgroundColors)[number] | AnyString;
type ResponsiveBackgroundColorMap = ResponsiveMap<BackgroundColors>;
type ResponsiveBackgroundImagePositionMap = ResponsiveMap<string | string[]>;
type ResponsiveBackgroundImageSizeMap = ResponsiveMap<string | string[]>;
export type CTABannerProps = BaseProps<HTMLElement> & React.HTMLAttributes<HTMLElement> & {
    /**
     * The alignment of the content within the banner.
     */
    align?: 'start' | 'center';
    /**
     * A flag to add a border to the banner.
     */
    hasBorder?: boolean;
    /**
     * A flag to remove the shadow from the banner.
     */
    hasShadow?: boolean;
    /**
     * A flag to remove the background from the banner.
     */
    hasBackground?: boolean;
    /**
     * Optional, custom background color.
     */
    backgroundColor?: BackgroundColors | ResponsiveBackgroundColorMap;
    /**
     * Optional, custom background image.
     */
    backgroundImageSrc?: string | ResponsiveBackgroundImageSrcMap;
    /**
     * Optional, custom background position.
     */
    backgroundImagePosition?: string | ResponsiveBackgroundImagePositionMap;
    /**
     * Optional, custom background size.
     */
    backgroundImageSize?: string | ResponsiveBackgroundImageSizeMap;
    /**
     * Escape-hatch for inserting custom React components.
     * Warning:
     *   This prop isn't advertised in our docs but remains part of the public API for edge-cases.
     *   Need to use this prop? Please check in with #primer-brand first to confirm correct usage.
     */
    trailingComponent?: React.FunctionComponent;
};
type CTABannerHeadingProps = BaseProps<HTMLHeadingElement> & {
    children: React.ReactNode | React.ReactNode[];
} & HeadingProps;
type CTABannerDescriptionProps = React.HtmlHTMLAttributes<HTMLParagraphElement> & BaseProps<HTMLParagraphElement> & {
    variant?: TextProps['variant'];
};
export declare const CTABanner: React.ForwardRefExoticComponent<Omit<CTABannerProps, "ref"> & React.RefAttributes<HTMLElement>> & {
    Heading: React.ForwardRefExoticComponent<Omit<CTABannerHeadingProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
    Description: React.ForwardRefExoticComponent<Omit<CTABannerDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
    ButtonGroup: React.ForwardRefExoticComponent<Omit<Omit<import("../ButtonGroup").ButtonGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
};
export {};