@primer/react-brand
Version:
Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.
72 lines (71 loc) • 3.39 kB
TypeScript
import React from 'react';
import { HeadingProps, type ImageProps, LabelColors } from '..';
import { type IconProps } from '../Icon';
import type { BaseProps } from '../component-helpers';
/**
* Design tokens
*/
import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/card/base.css';
import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/card/colors-with-modes.css';
export declare const CardVariants: readonly ["default", "minimal", "torchlight"];
export declare const CardIconColors: readonly ["default", "blue", "coral", "green", "gray", "indigo", "lemon", "lime", "orange", "pink", "purple", "red", "teal", "yellow"];
export declare const defaultCardIconColor: "default";
export type CardVariants = (typeof CardVariants)[number];
export type CardProps = {
/**
* Specify alternative card appearance
*/
variant?: CardVariants;
/**
* Valid children include Card.Image, Card.Heading, and Card.Description
*/
children: React.ReactNode | React.ReactElement<CardImageProps> | React.ReactElement<CardIconProps> | React.ReactElement<CardLabelProps> | React.ReactElement<CardHeadingProps> | React.ReactElement<CardDescriptionProps>;
/**
* Disable the default hover animation
*/
disableAnimation?: boolean;
/**
* The href of the link
* */
href: string;
/**
* Changes the cta text of the card
* */
ctaText?: string;
hasBorder?: boolean;
/**
* Fills the width of the parent container and removes the default max-width.
*/
fullWidth?: boolean;
/**
* Aligns the card content
*/
align?: 'start' | 'center';
} & Omit<BaseProps<HTMLDivElement>, 'animate'> & Omit<React.ComponentPropsWithoutRef<'div'>, 'onMouseEnter' | 'onMouseLeave' | 'onFocus' | 'onBlur'> & Pick<React.ComponentPropsWithoutRef<'a'>, 'onMouseEnter' | 'onMouseLeave' | 'onFocus' | 'onBlur'>;
type CardImageProps = ImageProps;
declare function CardImage({ className, ...rest }: CardImageProps): import("react/jsx-runtime").JSX.Element;
type CardIconProps = IconProps;
type CardLabelProps = BaseProps<HTMLSpanElement> & {
children: React.ReactNode | React.ReactNode[];
color?: (typeof LabelColors)[number];
};
type CardHeadingProps = BaseProps<HTMLHeadingElement> & {
children: React.ReactNode | React.ReactNode[];
as?: Exclude<HeadingProps['as'], 'h1'>;
href?: string;
} & Omit<HeadingProps, 'onMouseEnter' | 'onMouseLeave' | 'onFocus' | 'onBlur'> & React.ComponentPropsWithoutRef<'a'>;
type CardDescriptionProps = BaseProps<HTMLParagraphElement> & {
children: React.ReactNode | React.ReactNode[];
};
/**
* Card component:
* {@link https://primer.style/brand/components/Card/ See usage examples}.
*/
export declare const Card: React.ForwardRefExoticComponent<Omit<CardProps, "ref"> & React.RefAttributes<HTMLDivElement>> & {
Image: typeof CardImage;
Label: React.ForwardRefExoticComponent<Omit<CardLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
Icon: ({ className, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
Heading: React.ForwardRefExoticComponent<Omit<CardHeadingProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
Description: React.ForwardRefExoticComponent<Omit<CardDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
};
export {};