@payfit/unity-components
Version:
150 lines (149 loc) • 6.93 kB
TypeScript
import { VariantProps } from '@payfit/unity-themes';
import { PropsWithChildren } from 'react';
export declare const promoDialog: import('tailwind-variants').TVReturnType<{
[key: string]: {
[key: string]: import('tailwind-merge').ClassNameValue | {
content?: import('tailwind-merge').ClassNameValue;
overlay?: import('tailwind-merge').ClassNameValue;
layoutWrapper?: import('tailwind-merge').ClassNameValue;
wrapper?: import('tailwind-merge').ClassNameValue;
dismissIcon?: import('tailwind-merge').ClassNameValue;
contentColumn?: import('tailwind-merge').ClassNameValue;
scrollableContent?: import('tailwind-merge').ClassNameValue;
actionsWrapper?: import('tailwind-merge').ClassNameValue;
};
};
} | {
[x: string]: {
[x: string]: import('tailwind-merge').ClassNameValue | {
content?: import('tailwind-merge').ClassNameValue;
overlay?: import('tailwind-merge').ClassNameValue;
layoutWrapper?: import('tailwind-merge').ClassNameValue;
wrapper?: import('tailwind-merge').ClassNameValue;
dismissIcon?: import('tailwind-merge').ClassNameValue;
contentColumn?: import('tailwind-merge').ClassNameValue;
scrollableContent?: import('tailwind-merge').ClassNameValue;
actionsWrapper?: import('tailwind-merge').ClassNameValue;
};
};
} | {}, {
overlay: string[];
wrapper: string[];
content: string[];
dismissIcon: string[];
layoutWrapper: string[];
contentColumn: string[];
scrollableContent: string[];
actionsWrapper: string[];
}, undefined, {
[key: string]: {
[key: string]: import('tailwind-merge').ClassNameValue | {
content?: import('tailwind-merge').ClassNameValue;
overlay?: import('tailwind-merge').ClassNameValue;
layoutWrapper?: import('tailwind-merge').ClassNameValue;
wrapper?: import('tailwind-merge').ClassNameValue;
dismissIcon?: import('tailwind-merge').ClassNameValue;
contentColumn?: import('tailwind-merge').ClassNameValue;
scrollableContent?: import('tailwind-merge').ClassNameValue;
actionsWrapper?: import('tailwind-merge').ClassNameValue;
};
};
} | {}, {
overlay: string[];
wrapper: string[];
content: string[];
dismissIcon: string[];
layoutWrapper: string[];
contentColumn: string[];
scrollableContent: string[];
actionsWrapper: string[];
}, import('tailwind-variants').TVReturnType<unknown, {
overlay: string[];
wrapper: string[];
content: string[];
dismissIcon: string[];
layoutWrapper: string[];
contentColumn: string[];
scrollableContent: string[];
actionsWrapper: string[];
}, undefined, unknown, unknown, undefined>>;
export interface PromoDialogProps extends PropsWithChildren<VariantProps<typeof promoDialog>> {
/** aria-label has to be defined if the dialog does not have a visible label*/
'aria-label'?: string;
/** Controls the open state of the dialog. Use only in controlled mode (along with the `onOpenChange` callback) */
isOpen?: boolean;
/** it is used for controlled mode (need to be used with isOpen property) */
onOpenChange?: (isOpen: boolean) => void;
/** if false it does not allow to close the modal when click outside, default: true*/
isDismissable?: boolean;
}
/**
* The PromoDialog component provides a specialized modal interface for promotional content,
* feature announcements, and important communications that benefit from visual emphasis.
*
* Use PromoDialog when you want to introduce new features, highlight important updates, or present
* promotional content with a compelling illustration. It features a hero section for illustrations
* and automatically adapts its layout between mobile (vertical stack) and desktop (horizontal split).
*
* The PromoDialog requires several parts working together:
* - `PromoDialogHero`: Contains the promotional illustration (required)
* - `PromoDialogTitle`: Displays the title of the dialog
* - `PromoDialogContent`: Contains the main content of the dialog (required)
* - `PromoDialogActions`: Contains action buttons for user interaction
* - `DialogButton`: Handles specific actions (close, confirm, or danger)
* @param props - The props for the PromoDialog component
* @param props.children - The dialog content including hero, title, content, and actions
* @param props.isOpen - Controls the open state in controlled mode
* @param props.onOpenChange - Callback fired when open state changes
* @param props.isDismissable - Whether the dialog can be dismissed by clicking outside or pressing Escape
* @see {@link PromoDialogProps} for all available props
* @example
* ```tsx
* import {
* PromoDialog,
* DialogTrigger,
* PromoDialogHero,
* PromoDialogTitle,
* PromoDialogContent,
* PromoDialogActions,
* DialogButton
* } from '@payfit/unity-components'
* import { Illustration } from '@payfit/unity-illustrations'
*
* function FeatureAnnouncement() {
* return (
* <DialogTrigger>
* <Button>Learn more</Button>
* <PromoDialog>
* <PromoDialogHero>
* <Illustration src={ContractSignature} variant="picture" />
* </PromoDialogHero>
* <PromoDialogTitle>Introducing our new feature</PromoDialogTitle>
* <PromoDialogContent>
* Discover how this feature can help you...
* </PromoDialogContent>
* <PromoDialogActions>
* <DialogButton variant="close">Maybe later</DialogButton>
* <DialogButton variant="confirm">Get started</DialogButton>
* </PromoDialogActions>
* </PromoDialog>
* </DialogTrigger>
* )
* }
* ```
* @remarks
* - Content scrolls when it overflows, with a sticky footer
* - Layout adapts automatically: vertical on mobile, horizontal split on desktop
* - Hero section is mandatory and displays on the left (desktop) or top (mobile)
* - Shadow appears on footer when content is scrollable
* - **Accessibility**: Either `PromoDialogTitle` or `aria-label` prop is required for screen readers
* - **Accessibility**: Dialog traps focus and can be closed with Escape key when dismissable
* - **Accessibility**: Close button is keyboard accessible with proper ARIA labels
* - **Accessibility**: Supports prefers-reduced-motion for users with motion sensitivities
* [API Docs](https://unity-components.payfit.io/?path=/docs/feedback-promodialog--docs) • [Design Docs](https://www.payfit.design/24f360409/p/01f5dc-dialog)
*/
declare function PromoDialog({ children, isOpen, onOpenChange, isDismissable, ...rest }: PromoDialogProps): import("react/jsx-runtime").JSX.Element;
declare namespace PromoDialog {
var displayName: string;
}
export { PromoDialog };