From d23748c6c40ca77013d5c33475ae5aecf804d37a Mon Sep 17 00:00:00 2001
From: Conrad Reuter <conrad.reuter@enavo.com>
Date: Fri, 21 Sep 2018 12:51:40 +0200
Subject: [PATCH] [react-albus] Add function-as-children as an alternative to
 the render-prop to Step

---
 types/react-albus/index.d.ts            |  7 +++++--
 types/react-albus/react-albus-tests.tsx | 13 +++++++++----
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/types/react-albus/index.d.ts b/types/react-albus/index.d.ts
index d9d6b5ff99..9d34c93c64 100644
--- a/types/react-albus/index.d.ts
+++ b/types/react-albus/index.d.ts
@@ -1,6 +1,7 @@
 // Type definitions for react-albus 2.0
 // Project: https://github.com/americanexpress/react-albus#readme
 // Definitions by: Sindre Seppola <https://github.com/sseppola>
+//                 Conrad Reuter <https://github.com/conradreuter>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.8
 
@@ -34,5 +35,7 @@ export const Steps: React.ComponentType<{
 
 export const Step: React.ComponentType<{
     id: string;
-    render: (wizard: WizardContext) => React.ReactNode;
-}>;
+} & (
+    | { render?: (wizard: WizardContext) => React.ReactNode; }
+    | { children: (wizard: WizardContext) => React.ReactNode; }
+)>;
diff --git a/types/react-albus/react-albus-tests.tsx b/types/react-albus/react-albus-tests.tsx
index 3654845923..ed744c3e6f 100644
--- a/types/react-albus/react-albus-tests.tsx
+++ b/types/react-albus/react-albus-tests.tsx
@@ -37,15 +37,20 @@ const Example = () => (
                         </div>
                     )}
                 />
-                <Step
-                    id="dumbledore"
-                    render={({ previous }) => (
+                <Step id="dumbledore">
+                    {({ previous, next }) => (
                         <div>
                             <h1>Dumbledore</h1>
                             <button onClick={previous}>Previous</button>
+                            <button onClick={next}>Next</button>
                         </div>
                     )}
-                />
+                </Step>
+                <Step id="harry">
+                    <div>
+                        <h1>Harry</h1>
+                    </div>
+                </Step>
             </Steps>
         )}
     />