UNPKG

@payfit/unity-components

Version:

41 lines (40 loc) 2.31 kB
import { PropsWithChildren } from 'react'; import { ButtonProps } from '../../button/Button.js'; export interface FunnelPageActionProps extends PropsWithChildren<Omit<ButtonProps, 'variant' | 'color' | 'size'>> { /** * The action type determines the default styling and behavior. * - 'previous': Uses secondary variant for navigation back, outlined in rebrand * - 'next': Uses primary variant for progression forward * - 'optional': Uses ghost variant for optional actions like skip */ actionType: 'previous' | 'next' | 'optional'; } /** * The `FunnelPageAction` component is a wrapper around the Button component specifically designed for funnel page actions. * It provides sensible defaults based on the action type while allowing full customization through Button props. * @param {FunnelPageActionProps} props - The props for the `FunnelPageAction` component * @example * ```tsx * import { FunnelPageAction } from '@payfit/unity-components' * * function Example() { * return ( * <FunnelPageAction actionType="next" onPress={handleNext}> * Next * </FunnelPageAction> * ) * } * ``` * @remarks * - Automatically applies appropriate button variants based on action type * - Previous actions use secondary variant in legacy and outlined in rebrand, next actions use primary variant * - Optional actions use ghost variant for less prominent actions * - Automatically sets DataDog's session replay privacy to `data-dd-privacy="allow"` * @see {@link FunnelPageActionProps} for all available props * @see Source code in {@link https://github.com/PayFit/hr-apps/blob/master/libs/shared/unity/components/src/components/funnel-layout/parts GitHub} * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=10802-11500&m=dev Figma} * @see Design docs in {@link https://www.payfit.design/24f360409/p/88f9fc-funnel/b/24ca6f Payfit.design} * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/layout-funnellayout-funnelpage-funnelpageaction--docs unity-components.payfit.io} */ declare const FunnelPageAction: import('react').ForwardRefExoticComponent<FunnelPageActionProps & import('react').RefAttributes<HTMLButtonElement>>; export { FunnelPageAction };