@payfit/unity-components
Version:
41 lines (40 loc) • 2.31 kB
TypeScript
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 };