@payfit/unity-components
Version:
54 lines (53 loc) • 2.05 kB
TypeScript
import { TextProps } from '../../text/Text.js';
export type PromoDialogSubtitleProps = Omit<TextProps, 'variant' | 'color'>;
/**
* PromoDialogSubtitle displays a subtitle text above the title in a promo dialog.
* It provides consistent styling with body variant and neutral lowest color.
*
* This component should be used within a `PromoDialog` to display additional context
* or information above the main title, such as step indicators or feature labels.
* @param props - The props for the PromoDialogSubtitle component
* @param props.children - The subtitle text to be displayed
* @example
* ```tsx
* import {
* PromoDialog,
* PromoDialogHero,
* PromoDialogSubtitle,
* PromoDialogTitle,
* PromoDialogContent,
* PromoDialogActions,
* DialogButton,
* } 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>
* <PromoDialogSubtitle>Step 1/3</PromoDialogSubtitle>
* <PromoDialogTitle>Welcome</PromoDialogTitle>
* <PromoDialogContent>
* <p>This is the main content of the promo dialog.</p>
* </PromoDialogContent>
* <PromoDialogActions>
* <DialogButton variant="close">Skip</DialogButton>
* <DialogButton variant="confirm">Continue</DialogButton>
* </PromoDialogActions>
* </PromoDialog>
* )
* }
* ```
* @remarks
* - Use this component for displaying contextual information above the title
* - Styled with body variant and content.neutral.lowest color
* - Automatically positioned above PromoDialogTitle when used together
*/
declare const PromoDialogSubtitle: {
({ children, ...rest }: PromoDialogSubtitleProps): import("react/jsx-runtime").JSX.Element;
displayName: string;
};
export { PromoDialogSubtitle };