From 8605bc65274306c9c0e3be4455c8acdea405a603 Mon Sep 17 00:00:00 2001
From: lbaker <lizbaker.pdx@gmail.com>
Date: Fri, 5 Jun 2020 12:12:26 -0700
Subject: [PATCH] chore: Apply requested changes

---
 src/components/Step.js | 25 ++++++++++++-------------
 1 file changed, 12 insertions(+), 13 deletions(-)

diff --git a/src/components/Step.js b/src/components/Step.js
index 37c7066bb..b1409b647 100644
--- a/src/components/Step.js
+++ b/src/components/Step.js
@@ -1,28 +1,27 @@
 import React from 'react';
 import styles from './Step.module.scss';
 import Proptypes from 'prop-types';
+import cx from 'classnames';
 
 const Step = ({ children, number, total }) => {
-  let codeSnippet = null;
-  let childrenWithoutCodeSnippet = null;
-  if (children.length) {
-    codeSnippet = children.find((child) => child?.props?.mdxType === 'pre');
-    childrenWithoutCodeSnippet = children.filter(
-      (child) => child !== codeSnippet
-    );
-  }
+  children = React.Children.toArray(children);
+  const codeSnippet = children.find((child) => child?.props?.mdxType === 'pre');
+  const childrenWithoutCodeSnippet = children.filter(
+    (child) => child !== codeSnippet
+  );
+
   return (
     <div className={styles.wrapper}>
       <p className={styles.stepNumber}>{`Step ${number} of ${total}`}</p>
       <div className={styles.container}>
         <div
-          className={`${styles.stepDetails} ${
-            codeSnippet && styles.stepDetailsWithCode
-          }`}
+          className={cx(styles.stepDetails, {
+            [styles.stepDetailsWithCode]: codeSnippet,
+          })}
         >
-          {childrenWithoutCodeSnippet || children}
+          {childrenWithoutCodeSnippet}
         </div>
-        {codeSnippet && codeSnippet}
+        {codeSnippet}
       </div>
     </div>
   );