@payfit/unity-components
Version:
132 lines (131 loc) • 5.19 kB
TypeScript
import { VariantProps } from '@payfit/unity-themes';
export declare const funnelTopBar: import('tailwind-variants').TVReturnType<{
[key: string]: {
[key: string]: import('tailwind-merge').ClassNameValue | {
base?: import('tailwind-merge').ClassNameValue;
title?: import('tailwind-merge').ClassNameValue;
titleWrapper?: import('tailwind-merge').ClassNameValue;
};
};
} | {
[x: string]: {
[x: string]: import('tailwind-merge').ClassNameValue | {
base?: import('tailwind-merge').ClassNameValue;
title?: import('tailwind-merge').ClassNameValue;
titleWrapper?: import('tailwind-merge').ClassNameValue;
};
};
} | {}, {
base: string[];
titleWrapper: string[];
title: string[];
}, undefined, {
[key: string]: {
[key: string]: import('tailwind-merge').ClassNameValue | {
base?: import('tailwind-merge').ClassNameValue;
title?: import('tailwind-merge').ClassNameValue;
titleWrapper?: import('tailwind-merge').ClassNameValue;
};
};
} | {}, {
base: string[];
titleWrapper: string[];
title: string[];
}, import('tailwind-variants').TVReturnType<unknown, {
base: string[];
titleWrapper: string[];
title: string[];
}, undefined, unknown, unknown, undefined>>;
export interface FunnelTopBarProps extends VariantProps<typeof funnelTopBar> {
/** The title text to display in the funnel top bar */
title: string;
/**
* Custom content to display in the leading area (left side).
* Typically a logo on first step or a back button on subsequent steps.
* @example
* ```tsx
* // With FunnelBackButton
* <FunnelTopBar
* leading={<FunnelBackButton label="Back" onPress={handleBack} />}
* title="My Funnel"
* />
*
* // With logo
* <FunnelTopBar
* leading={<PayFitBrand color="original" />}
* title="Get Started"
* />
* ```
*/
leading?: React.ReactNode;
/**
* Label for the back button.
* @deprecated Use `leading` with <FunnelBackButton> instead. Will be removed in v2.0.
* @example
* ```tsx
* // Old way (deprecated)
* <FunnelTopBar
* backButtonLabel="Back"
* onBackButtonPress={handleBack}
* title="My Funnel"
* />
*
* // New way (recommended)
* <FunnelTopBar
* leading={<FunnelBackButton label="Back" onPress={handleBack} />}
* title="My Funnel"
* />
* ```
*/
backButtonLabel?: string;
/**
* Callback function to be called when the back button is pressed.
* @deprecated Use `leading` with <FunnelBackButton> instead. Will be removed in v2.0.
*/
onBackButtonPress?: () => void;
/** Optional actions slot to display in the top bar */
actions?: React.ReactNode;
/** Optional flag to show or hide the progress indicator. Defaults to false */
showProgress?: boolean;
/** The current progress in the funnel */
progressValue?: number;
/** Custom progress announcement for screen readers. */
progressAnnouncement?: string;
/** current task description */
currentTaskDescription?: string;
}
/**
* The `FunnelTopBar` component provides the header navigation for funnel layouts with back button, title, and optional progress indicator.
* It creates a responsive top bar that displays the funnel title, navigation controls, and progress status with proper accessibility attributes.
* You can control the progress display and customize the back button behavior to guide users through multi-step processes.
* @param {FunnelTopBarProps} props - The props for the `FunnelTopBar` component
* @example
* ```tsx
* import { FunnelTopBar } from '@payfit/unity-components'
*
* function Example() {
* return (
* <FunnelTopBar
* title="Setup Process"
* backButtonLabel="Back"
* onBackButtonPress={handleBack}
* showProgress={true}
* progressValue={75}
* progressAnnouncement="2 out of 3 tasks completed"
* />
* )
* }
* ```
* @remarks
* - Automatically adapts back button display based on screen size
* - Provides live progress announcements for screen readers
* - Supports optional global actions in the top bar
* - Automatically sets DataDog's session replay privacy to `data-dd-privacy="allow"`
* @see {@link FunnelTopBarProps} 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-funneltopbar--docs unity-components.payfit.io}
*/
declare const FunnelTopBar: import('react').ForwardRefExoticComponent<FunnelTopBarProps & import('react').RefAttributes<HTMLDivElement>>;
export { FunnelTopBar };