@primer/react-brand
Version:
Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.
107 lines (106 loc) • 5.01 kB
TypeScript
import React from 'react';
import { HeadingProps, type ImageProps } 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"];
export declare const CardCTAVariants: readonly ["text", "arrow", "none"];
export declare const CardBackgroundColors: readonly ["default", "subtle", "none"];
export declare const CardTokenPositions: readonly ["block-start", "block-end"];
export declare const CardLabelVariants: readonly ["token", "accent-text"];
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 declare const defaultCardCTAVariant: "text";
export declare const defaultCardLabelVariant: "token";
export type CardVariants = (typeof CardVariants)[number];
export type CardCTAVariant = (typeof CardCTAVariants)[number];
export type CardTokenPosition = (typeof CardTokenPositions)[number];
export type CardLabelVariant = (typeof CardLabelVariants)[number];
export type CardBackgroundColor = (typeof CardBackgroundColors)[number];
type CardLeadingVisual = React.ReactElement | React.ComponentType<{
className?: string;
}>;
export type CardProps = {
/**
* Specify alternative card appearance
*/
variant?: CardVariants;
/**
* Valid children include Card.Image, Card.Icon, Card.Label, Card.Tokens, Card.Heading, and Card.Description
*/
children: React.ReactNode | React.ReactElement<CardImageProps> | React.ReactElement<CardIconProps> | React.ReactElement<CardLabelProps> | React.ReactElement<CardTokensProps> | 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;
/**
* Specifies the presentation of the call-to-action area
*/
ctaVariant?: CardCTAVariant;
/**
* Optional, custom background color.
*/
backgroundColor?: CardBackgroundColor;
/**
* A visual that appears before the heading, commonly used for a logo or brand mark
*/
leadingVisual?: CardLeadingVisual;
/**
* Adds a border to the card.
*/
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 = {
position?: 'block-start' | 'block-end';
} & ImageProps;
declare function CardImage({ className, ...rest }: CardImageProps): import("react/jsx-runtime").JSX.Element;
type CardIconProps = IconProps;
type CardTokensProps = BaseProps<HTMLDivElement> & {
children: React.ReactNode | React.ReactNode[];
position?: CardTokenPosition;
};
type CardLabelProps = Omit<BaseProps<HTMLSpanElement>, 'animate'> & Omit<React.ComponentPropsWithoutRef<'span'>, 'children'> & {
children: React.ReactNode | React.ReactNode[];
variant?: CardLabelVariant;
};
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;
Icon: ({ className, hasBackground, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
Label: React.ForwardRefExoticComponent<Omit<CardLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
Tokens: React.ForwardRefExoticComponent<Omit<CardTokensProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
Heading: React.ForwardRefExoticComponent<Omit<CardHeadingProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
Description: React.ForwardRefExoticComponent<Omit<CardDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
};
export {};