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

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

import React, { type PropsWithChildren } from 'react';
import type { BaseProps } from '../component-helpers';
import { HeadingProps, TextProps } from '../';
/**
 * Design tokens
 */
import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/logosuite/colors-with-modes.css';
import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/logosuite/base.css';
export type LogoSuiteProps = {
    /**
     * The horizontal alignment of the LogoSuite.
     */
    align?: 'start' | 'center' | 'justify';
    /**
     * Whether to render a divider immediately after the LogoSuite.
     */
    hasDivider?: boolean;
    /**
     * Test id for the root LogoSuite element.
     */
    'data-testid'?: string;
} & BaseProps<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>;
export type LogoSuiteHeadingProps = BaseProps<HTMLHeadingElement> & HeadingProps & {
    /**
     * Whether to visually hide the heading.
     */
    visuallyHidden?: boolean;
};
export type LogoSuiteDescriptionProps = BaseProps<HTMLParagraphElement> & TextProps & {
    children: React.ReactNode | React.ReactNode[];
};
export type LogoSuiteLogoBarProps = BaseProps<HTMLDivElement> & {
    children: React.ReactNode | React.ReactNode[];
    /**
     * The gap between logos
     */
    gap?: 'default' | 'condensed';
    /**
     * Enables an optional marquee effect
     */
    marquee?: boolean;
    /**
     * The speed of the marquee effect
     */
    marqueeSpeed?: 'slow' | 'normal' | 'idle';
    /**
     * The stylistic variant of the LogoBar.
     */
    variant?: 'muted' | 'emphasis';
};
/**
 * Use LogoSuite to present a list of logos, such as sponsors or vendors.
 * @see https://primer.style/brand/components/LogoSuite
 */
export declare const LogoSuite: (({ align, children, className, hasDivider, "data-testid": testId, }: PropsWithChildren<LogoSuiteProps>) => import("react/jsx-runtime").JSX.Element) & {
    Heading: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<LogoSuiteHeadingProps>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
    Description: React.ForwardRefExoticComponent<(Omit<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 | React.ReactNode[];
    }, "ref"> | Omit<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 | React.ReactNode[];
    }, "ref"> | Omit<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 | React.ReactNode[];
    }, "ref"> | Omit<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 | React.ReactNode[];
    }, "ref"> | Omit<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 | React.ReactNode[];
    }, "ref">) & React.RefAttributes<HTMLParagraphElement>>;
    Logobar: React.ForwardRefExoticComponent<Omit<LogoSuiteLogoBarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
    testIds: {
        root: string;
        readonly marqueeGroup: string;
    };
};