carbon-react
Version:
A library of reusable React components for easily building user interfaces.
44 lines (43 loc) • 1.95 kB
TypeScript
import React from "react";
import { MarginProps } from "styled-system";
import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
export type Steps = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
interface StepFlowAriaProps {
/** Prop to specify the aria-label of the component */
"aria-label"?: string;
/** Prop to specify the aria-labelledby of the component */
"aria-labelledby"?: string;
/** Prop to specify the aria-describedby of the component */
"aria-describedby"?: string;
}
export interface StepFlowProps extends StepFlowAriaProps, MarginProps, TagProps {
/** A category for the user journey. */
category?: string;
/** The title of the current step, this can be a string or a valid React node
* which contains the `<StepFlowTitle />` component as a descendant.
*/
title: React.ReactNode;
/** Set the variant of the internal 'Typography' component which contains the title.
* However, despite the chosen variant the styling will always be overridden.
*/
titleVariant?: "h1" | "h2";
/** The total steps in the user journey. */
totalSteps: Steps;
/**
* The current step of the user journey. If the set `currentStep` is higher than
* `totalSteps`the value of `currentStep` will be that of `totalSteps` instead.
*/
currentStep: Steps;
/** Determines if the progress indicator is shown. */
showProgressIndicator?: boolean;
/** Determines if the close icon button is shown */
showCloseIcon?: boolean;
/** function runs when user click dismiss button */
onDismiss?: (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>) => void;
}
export type StepFlowHandle = {
/** Programmatically focus on root container of Dialog. */
focus: () => void;
} | null;
export declare const StepFlow: React.ForwardRefExoticComponent<StepFlowProps & React.RefAttributes<StepFlowHandle>>;
export default StepFlow;