diff --git a/types/react-albus/index.d.ts b/types/react-albus/index.d.ts index be546011d4..ccc0ac8582 100644 --- a/types/react-albus/index.d.ts +++ b/types/react-albus/index.d.ts @@ -9,13 +9,13 @@ import * as React from "react"; import { History } from "history"; -export interface WizardStepObject { +export interface StepObject { id: string; } export interface WizardContext { - step: WizardStepObject; - steps: WizardStepObject[]; + step: StepObject; + steps: StepObject[]; history: History; next: () => void; previous: () => void; @@ -42,13 +42,24 @@ export interface WizardProps { export const Wizard: React.ComponentType; export interface StepsProps { - step?: WizardStepObject; + step?: StepObject; } export const Steps: React.ComponentType; -export type StepProps = { id: string } & ( +export type StepProps = StepObject & ( | { render?: (wizard: WizardContext) => React.ReactNode } | { children: (wizard: WizardContext) => React.ReactNode }); +/** + * In addition to id, any additional props added to will be available on each step object. + * This can be used to add names, descriptions, or other metadata to each step. + * To use this feature globally in your project you need to augment the StepObject + * @example + * declare module "react-albus" { + * interface StepObject { + * propName: string; + * } + * } + */ export const Step: React.ComponentType; diff --git a/types/react-albus/react-albus-tests.tsx b/types/react-albus/react-albus-tests.tsx index 2f31733b1d..57fe8147d1 100644 --- a/types/react-albus/react-albus-tests.tsx +++ b/types/react-albus/react-albus-tests.tsx @@ -1,6 +1,12 @@ import * as React from "react"; import { Wizard, Step, Steps, withWizard } from "react-albus"; +declare module "react-albus" { + interface StepObject { + quote?: string; + } +} + const Example = () => ( ( (

Merlin

@@ -28,6 +35,7 @@ const Example = () => ( /> (

Gandalf