From ee58f4641cb020339571fd29a6628c46c54c3ed0 Mon Sep 17 00:00:00 2001
From: Jerel Miller <jerelmiller@gmail.com>
Date: Thu, 15 Oct 2020 18:11:39 -0700
Subject: [PATCH] fix: add back step counter within a tutorial section

---
 src/components/TutorialSection.js | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/components/TutorialSection.js b/src/components/TutorialSection.js
index edde5d8b8..18bf09ed6 100644
--- a/src/components/TutorialSection.js
+++ b/src/components/TutorialSection.js
@@ -1,8 +1,14 @@
-import React from 'react';
+import React, { Children, cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/core';
+import { isMdxType } from '../utils/mdx';
 
 const TutorialSection = ({ children }) => {
+  const totalSteps = Children.toArray(children).filter((child) =>
+    isMdxType(child, 'TutorialStep')
+  ).length;
+  let step = 1;
+
   return (
     <section
       css={css`
@@ -13,7 +19,13 @@ const TutorialSection = ({ children }) => {
         }
       `}
     >
-      {children}
+      {Children.map(children, (child) => {
+        if (isMdxType(child, 'TutorialStep')) {
+          return cloneElement(child, { stepNumber: step++, totalSteps });
+        }
+
+        return child;
+      })}
     </section>
   );
 };