@primer/react-brand/lib/Hero/Hero.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 type { HeroAlign, HeroVariant } from './HeroContext';
/**
 * Design tokens
 */
import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/hero/base.css';
export type HeroProps = BaseProps<HTMLElement> & {
    align?: HeroAlign;
    imageContainerClassName?: string;
    imageContainerStyle?: React.CSSProperties;
    imageContainerRef?: React.RefObject<HTMLDivElement | null>;
    imageBackgroundColor?: 'default' | 'subtle';
    variant?: HeroVariant;
    enableAnimation?: boolean;
    /**
     * 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;
    'data-testid'?: string;
};
export declare const Hero: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<HeroProps>, "ref"> & React.RefAttributes<HTMLElement>> & {
    Heading: React.ForwardRefExoticComponent<Omit<import("./sub-components").HeroHeadingProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
    Description: React.ForwardRefExoticComponent<(Omit<{
        size?: typeof import("..").TextSizes[number];
        weight?: import("..").TextWeightVariants | import("..").ResponsiveWeightMap;
    } & BaseProps<HTMLParagraphElement> & {
        font?: import("..").TextFontVariants;
        size?: typeof import("..").TextSizes[number];
        variant?: typeof import("..").TextVariants[number];
        weight?: import("..").TextWeightVariants | import("..").ResponsiveWeightMap;
        align?: "start" | "center" | "end";
        hasAntiAliasing?: boolean;
    } & {
        as?: typeof import("..").TextTags[number];
    } & React.HTMLAttributes<HTMLParagraphElement> & {
        as?: "p";
    } & {
        children?: React.ReactNode | undefined;
    }, "ref"> | Omit<{
        size?: typeof import("..").TextSizes[number];
        weight?: import("..").TextWeightVariants | import("..").ResponsiveWeightMap;
    } & BaseProps<HTMLParagraphElement> & {
        font?: import("..").TextFontVariants;
        size?: typeof import("..").TextSizes[number];
        variant?: typeof import("..").TextVariants[number];
        weight?: import("..").TextWeightVariants | import("..").ResponsiveWeightMap;
        align?: "start" | "center" | "end";
        hasAntiAliasing?: boolean;
    } & {
        as?: typeof import("..").TextTags[number];
    } & React.HTMLAttributes<HTMLSpanElement> & BaseProps<HTMLSpanElement> & {
        as?: "span";
    } & {
        children?: React.ReactNode | undefined;
    }, "ref"> | Omit<{
        size?: typeof import("..").TextSizes[number];
        weight?: import("..").TextWeightVariants | import("..").ResponsiveWeightMap;
    } & BaseProps<HTMLParagraphElement> & {
        font?: import("..").TextFontVariants;
        size?: typeof import("..").TextSizes[number];
        variant?: typeof import("..").TextVariants[number];
        weight?: import("..").TextWeightVariants | import("..").ResponsiveWeightMap;
        align?: "start" | "center" | "end";
        hasAntiAliasing?: boolean;
    } & {
        as?: typeof import("..").TextTags[number];
    } & React.HTMLAttributes<HTMLDivElement> & BaseProps<HTMLDivElement> & {
        as?: "div";
    } & {
        children?: React.ReactNode | undefined;
    }, "ref"> | Omit<{
        size?: typeof import("..").TextSizes[number];
        weight?: import("..").TextWeightVariants | import("..").ResponsiveWeightMap;
    } & BaseProps<HTMLParagraphElement> & {
        font?: import("..").TextFontVariants;
        size?: typeof import("..").TextSizes[number];
        variant?: typeof import("..").TextVariants[number];
        weight?: import("..").TextWeightVariants | import("..").ResponsiveWeightMap;
        align?: "start" | "center" | "end";
        hasAntiAliasing?: boolean;
    } & {
        as?: typeof import("..").TextTags[number];
    } & React.HTMLAttributes<HTMLElement> & BaseProps<HTMLElement> & {
        as?: "strong";
    } & {
        children?: React.ReactNode | undefined;
    }, "ref"> | Omit<{
        size?: typeof import("..").TextSizes[number];
        weight?: import("..").TextWeightVariants | import("..").ResponsiveWeightMap;
    } & BaseProps<HTMLParagraphElement> & {
        font?: import("..").TextFontVariants;
        size?: typeof import("..").TextSizes[number];
        variant?: typeof import("..").TextVariants[number];
        weight?: import("..").TextWeightVariants | import("..").ResponsiveWeightMap;
        align?: "start" | "center" | "end";
        hasAntiAliasing?: boolean;
    } & {
        as?: typeof import("..").TextTags[number];
    } & React.HTMLAttributes<HTMLElement> & BaseProps<HTMLElement> & {
        as?: "em";
    } & {
        children?: React.ReactNode | undefined;
    }, "ref">) & React.RefAttributes<HTMLParagraphElement>>;
    PrimaryAction: React.ForwardRefExoticComponent<(Omit<{
        as?: "a" | "button";
        href: string;
    } & import("..").ButtonBaseProps & BaseProps<HTMLAnchorElement> & {
        as?: "a";
    } & {
        children?: React.ReactNode | undefined;
    }, "ref"> | Omit<{
        as?: "a" | "button";
        href: string;
    } & import("..").ButtonBaseProps & BaseProps<HTMLButtonElement> & {
        as?: "button";
    } & {
        children?: React.ReactNode | undefined;
    }, "ref">) & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
    SecondaryAction: React.ForwardRefExoticComponent<(Omit<{
        as?: "a" | "button";
        href: string;
    } & import("..").ButtonBaseProps & BaseProps<HTMLAnchorElement> & {
        as?: "a";
    } & {
        children?: React.ReactNode | undefined;
    }, "ref"> | Omit<{
        as?: "a" | "button";
        href: string;
    } & import("..").ButtonBaseProps & BaseProps<HTMLButtonElement> & {
        as?: "button";
    } & {
        children?: React.ReactNode | undefined;
    }, "ref">) & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
    Image: React.ForwardRefExoticComponent<(Omit<{
        position?: import("./HeroContext").HeroMediaPositions;
        enableBorder?: boolean;
    } & React.ImgHTMLAttributes<HTMLImageElement> & BaseProps<HTMLImageElement> & {
        src: string;
        alt: string;
        aspectRatio?: import("..").ImageAspectRatio;
        media?: string;
        borderRadius?: import("..").ImageBorderRadiusOptions;
        srcSet?: Pick<React.ImgHTMLAttributes<HTMLImageElement>, "srcSet">;
    } & {
        as?: "img";
        srcSet?: Pick<React.ImgHTMLAttributes<HTMLImageElement>, "srcSet">;
    }, "ref"> | Omit<{
        position?: import("./HeroContext").HeroMediaPositions;
        enableBorder?: boolean;
    } & React.ImgHTMLAttributes<HTMLImageElement> & BaseProps<HTMLImageElement> & {
        src: string;
        alt: string;
        aspectRatio?: import("..").ImageAspectRatio;
        media?: string;
        borderRadius?: import("..").ImageBorderRadiusOptions;
        srcSet?: Pick<React.ImgHTMLAttributes<HTMLImageElement>, "srcSet">;
    } & {
        as: "picture";
        sources?: {
            srcset: string;
            media: string;
        }[];
        srcSet?: undefined;
    }, "ref">) & React.RefAttributes<HTMLImageElement>>;
    Video: React.ForwardRefExoticComponent<(Omit<{
        position?: import("./HeroContext").HeroMediaPositions;
        enableBorder?: boolean;
        'data-testid'?: string;
    } & BaseProps<HTMLDivElement> & {
        children?: React.ReactNode | undefined;
    } & {
        poster?: never;
        posterAltText?: never;
        posterTitle?: never;
    }, "ref"> | Omit<{
        position?: import("./HeroContext").HeroMediaPositions;
        enableBorder?: boolean;
        'data-testid'?: string;
    } & BaseProps<HTMLDivElement> & {
        children?: React.ReactNode | undefined;
    } & {
        poster: string;
        posterAltText: string;
        posterTitle: string;
    }, "ref">) & React.RefAttributes<HTMLDivElement>>;
    Label: React.ForwardRefExoticComponent<Omit<import("./sub-components").HeroLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
    Eyebrow: React.ForwardRefExoticComponent<Omit<import("./sub-components").HeroEyebrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
    testIds: {
        root: string;
        readonly video: string;
        readonly grid: string;
        readonly imageWrapper: string;
    };
};