UNPKG

@primer/react

Version:

An implementation of GitHub's Primer Design System using React

117 lines 4.5 kB
import React from 'react'; import { type ButtonProps } from '../Button'; import type { ForwardRefComponent as PolymorphicForwardRefComponent } from '../utils/polymorphic'; export type BannerVariant = 'critical' | 'info' | 'success' | 'upsell' | 'warning'; export type BannerProps = React.ComponentPropsWithoutRef<'section'> & { /** * Provide an optional label to override the default name for the Banner * landmark region */ 'aria-label'?: string; /** * Provide an optional className to add to the outermost element rendered by * the Banner */ className?: string; /** * Provide an optional description for the Banner. This should provide * supplemental information about the Banner */ description?: React.ReactNode; /** * Specify whether the title of the Banner should be visible or not. */ hideTitle?: boolean; /** * Provide a custom icon for the Banner. This is only available when `variant` is `info` or `upsell` */ icon?: React.ReactNode; /** * Optionally provide a handler to be called when the banner is dismissed. * Providing this prop will show a dismiss button. */ onDismiss?: () => void; /** * Provide an optional primary action for the Banner. */ primaryAction?: React.ReactNode; /** * Provide an optional secondary action for the Banner */ secondaryAction?: React.ReactNode; /** * The title for the Banner. This will be used as the accessible name and is * required unless `Banner.Title` is used as a child. */ title?: React.ReactNode; /** * Specify the type of the Banner */ variant?: BannerVariant; }; export declare const Banner: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & { /** * Provide an optional label to override the default name for the Banner * landmark region */ 'aria-label'?: string; /** * Provide an optional className to add to the outermost element rendered by * the Banner */ className?: string; /** * Provide an optional description for the Banner. This should provide * supplemental information about the Banner */ description?: React.ReactNode; /** * Specify whether the title of the Banner should be visible or not. */ hideTitle?: boolean; /** * Provide a custom icon for the Banner. This is only available when `variant` is `info` or `upsell` */ icon?: React.ReactNode; /** * Optionally provide a handler to be called when the banner is dismissed. * Providing this prop will show a dismiss button. */ onDismiss?: () => void; /** * Provide an optional primary action for the Banner. */ primaryAction?: React.ReactNode; /** * Provide an optional secondary action for the Banner */ secondaryAction?: React.ReactNode; /** * The title for the Banner. This will be used as the accessible name and is * required unless `Banner.Title` is used as a child. */ title?: React.ReactNode; /** * Specify the type of the Banner */ variant?: BannerVariant; } & React.RefAttributes<HTMLElement>>; type HeadingElement = 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; export type BannerTitleProps<As extends HeadingElement> = { as?: As; className?: string; } & React.ComponentPropsWithoutRef<As extends 'h2' ? 'h2' : As>; export declare function BannerTitle<As extends HeadingElement>(props: BannerTitleProps<As>): React.JSX.Element; export type BannerDescriptionProps = React.ComponentPropsWithoutRef<'div'>; export declare function BannerDescription({ children, className, ...rest }: BannerDescriptionProps): React.JSX.Element; export type BannerActionsProps = { primaryAction?: React.ReactNode; secondaryAction?: React.ReactNode; }; export declare function BannerActions({ primaryAction, secondaryAction }: BannerActionsProps): React.JSX.Element; export type BannerPrimaryActionProps = Omit<ButtonProps, 'variant'>; declare const BannerPrimaryAction: PolymorphicForwardRefComponent<"button", BannerPrimaryActionProps>; export type BannerSecondaryActionProps = Omit<ButtonProps, 'variant'>; declare const BannerSecondaryAction: PolymorphicForwardRefComponent<"button", BannerSecondaryActionProps>; export { BannerPrimaryAction, BannerSecondaryAction }; //# sourceMappingURL=Banner.d.ts.map