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

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

import React, { HTMLAttributes, SVGProps } from 'react';
import { BaseProps } from '../component-helpers';
import type { AvatarProps } from '../';
import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/testimonial/base.css';
import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/testimonial/colors-with-modes.css';
type TestimonialSize = 'small' | 'large';
export declare const TestimonialQuoteMarkColors: readonly ["default", "blue", "coral", "green", "gray", "indigo", "lemon", "lime", "orange", "pink", "purple", "red", "teal", "yellow", "blue-purple", "green-blue", "pink-blue", "purple-red", "red-orange"];
export declare const defaultQuoteMarkColor: "default";
export declare const TestimonialVariants: readonly ["subtle", "default", "minimal"];
type TestimonialVariant = (typeof TestimonialVariants)[number];
export declare const defaultTestimonialVariant: TestimonialVariant;
export type TestimonialProps = {
    /**
     * Sets alternative appearance for the testimonial
     */
    variant?: TestimonialVariant;
    /**
     * Applies an optional border where a variant supports it
     */
    hasBorder?: boolean;
    /**
     * Valid children include Testimonial.Name, Testimonial.Avatar, and Testimonial.Name
     */
    children: React.ReactNode | React.ReactElement<QuoteProps> | React.ReactElement<NameProps> | React.ReactElement<AvatarProps> | React.ReactElement<LogoProps>[];
    /**
     * Sets the testimonial text size
     */
    size?: TestimonialSize;
    /** Sets the color of the quote mark */
    quoteMarkColor?: (typeof TestimonialQuoteMarkColors)[number];
} & BaseProps<HTMLElement> & React.HTMLAttributes<HTMLElement>;
/**
 * Testimonial quote child element
 * <Testimonial.Quote>
 */
type QuoteProps = React.HTMLAttributes<HTMLElement> & BaseProps<HTMLElement>;
/**
 * Testimonial name child element
 * <Testimonial.Name>
 */
type NameProps = {
    position?: string;
} & React.HTMLAttributes<HTMLElement> & BaseProps<HTMLElement>;
/**
 * Testimonial logo child element
 * <Testimonial.Logo>
 */
type LogoProps = {
    children: React.ReactElement<SVGProps<SVGSVGElement>> | React.ReactElement<HTMLAttributes<HTMLImageElement>>;
} & React.HTMLAttributes<HTMLImageElement> & BaseProps<HTMLImageElement>;
/**
 * Testimonial avatar child element
 * <Testimonial.Avatar>
 */
declare function _Avatar({ size, ...rest }: AvatarProps): import("react/jsx-runtime").JSX.Element;
/**
 * Use Testimonial to display a quote from a customer or user.
 * @see https://primer.style/brand/components/Testimonial
 */
export declare const Testimonial: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<TestimonialProps>, "ref"> & React.RefAttributes<unknown>> & {
    Quote: React.ForwardRefExoticComponent<Omit<QuoteProps, "ref"> & React.RefAttributes<unknown>>;
    Name: React.ForwardRefExoticComponent<Omit<NameProps, "ref"> & React.RefAttributes<unknown>>;
    Avatar: typeof _Avatar;
    Logo: React.ForwardRefExoticComponent<Omit<LogoProps, "ref"> & React.RefAttributes<unknown>>;
};
export {};