Merge pull request #31086 from Kuirak/react-albus-make-step-object-augmentable

Made StepProps augmentable according to docs

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<WizardProps>;
 
 export interface StepsProps {
-    step?: WizardStepObject;
+    step?: StepObject;
 }
 
 export const Steps: React.ComponentType<StepsProps>;
 
-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 <Step> 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<StepProps>;

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 = () => (
     <Wizard
         basename="path"
@@ -19,6 +25,7 @@ const Example = () => (
             <Steps>
                 <Step
                     id="merlin"
+                    quote="Camelot isn't built on magic, but on people, on their faith"
                     render={() => (
                         <div>
                             <h1>Merlin</h1>
@@ -28,6 +35,7 @@ const Example = () => (
                 />
                 <Step
                     id="gandalf"
+                    quote="A wizard is never late, nor is he early. He arrives precisely when he means to."
                     render={stepWiz => (
                         <div>
                             <h1>Gandalf</h1>