@payfit/unity-components
Version:
48 lines (47 loc) • 2.05 kB
TypeScript
import { PropsWithChildren } from 'react';
export interface PromoDialogHeroProps extends PropsWithChildren {
/**
* Additional class names for the hero
*/
className?: string;
}
/**
* PromoDialogHero displays a promotional illustration or hero image in promo dialogs.
* It's designed to complement important announcements, feature introductions, or promotional content.
*
* This component is required when using `PromoDialog` and automatically triggers
* a special layout with the hero section on the left (desktop) or top (mobile), and content on the right/bottom.
* @param props - The props for the PromoDialogHero component
* @param props.children - The hero content, typically an Illustration component
* @example
* ```tsx
* import { PromoDialog, PromoDialogHero, DialogTitle, DialogContent } from '@payfit/unity-components'
* import { Illustration } from '@payfit/unity-illustrations'
* import ContractSignature from '@payfit/unity-illustrations/assets/ContractSignature'
*
* function PromoExample() {
* return (
* <PromoDialog>
* <PromoDialogHero>
* <Illustration src={ContractSignature} variant="picture" />
* </PromoDialogHero>
* <DialogTitle>Welcome to our new feature</DialogTitle>
* <DialogContent>
* Discover how this feature can help you...
* </DialogContent>
* </PromoDialog>
* )
* }
* ```
* @remarks
* - This component is specifically designed for promo dialogs and triggers a special horizontal split layout on desktop
* - On mobile devices, the layout automatically adjusts to a vertical stack
* - The hero section has a light blue background by default
* - Use with illustrations from `@payfit/unity-illustrations` for consistent branding
* - **Accessibility**: Hero content is marked as decorative (aria-hidden) as it's purely visual
*/
declare const PromoDialogHero: {
({ children, className }: PromoDialogHeroProps): import("react/jsx-runtime").JSX.Element;
displayName: string;
};
export { PromoDialogHero };