From a11b911c00f7939b32ffcbda74ee17067e9ee9a2 Mon Sep 17 00:00:00 2001
From: lbaker <lizbaker.pdx@gmail.com>
Date: Fri, 5 Jun 2020 10:07:33 -0700
Subject: [PATCH 1/3] chore: Tweak step component for text only steps

---
 src/components/Step.js          | 22 ++++++++++++++++------
 src/components/Step.module.scss |  4 +++-
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/components/Step.js b/src/components/Step.js
index 56c18f445..37c7066bb 100644
--- a/src/components/Step.js
+++ b/src/components/Step.js
@@ -3,16 +3,26 @@ import styles from './Step.module.scss';
 import Proptypes from 'prop-types';
 
 const Step = ({ children, number, total }) => {
-  const codeSnippet = children.find((child) => child?.props?.mdxType === 'pre');
-  const childrenWithoutCodeSnippet = children.filter(
-    (child) => child !== codeSnippet
-  );
+  let codeSnippet = null;
+  let childrenWithoutCodeSnippet = null;
+  if (children.length) {
+    codeSnippet = children.find((child) => child?.props?.mdxType === 'pre');
+    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}>{childrenWithoutCodeSnippet}</div>
-        {codeSnippet}
+        <div
+          className={`${styles.stepDetails} ${
+            codeSnippet && styles.stepDetailsWithCode
+          }`}
+        >
+          {childrenWithoutCodeSnippet || children}
+        </div>
+        {codeSnippet && codeSnippet}
       </div>
     </div>
   );
diff --git a/src/components/Step.module.scss b/src/components/Step.module.scss
index 94c9cef31..597f2b52d 100644
--- a/src/components/Step.module.scss
+++ b/src/components/Step.module.scss
@@ -13,7 +13,6 @@
 }
 .stepDetails {
   margin-right: 1rem;
-  width: 50%;
   line-height: 1.5rem;
   h1:first-child,
   h2:first-child,
@@ -28,6 +27,9 @@
     font-size: 1rem;
   }
 }
+.stepDetailsWithCode {
+  width: 50%;
+}
 .container > pre {
   width: 50%;
   margin-left: 1rem;

From b0a581ccb2bcbfdabc34b55b61bfe657da161535 Mon Sep 17 00:00:00 2001
From: lbaker <lizbaker.pdx@gmail.com>
Date: Fri, 5 Jun 2020 10:14:42 -0700
Subject: [PATCH 2/3] chore: Add example of new functionality

---
 src/markdown-pages/example.mdx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/markdown-pages/example.mdx b/src/markdown-pages/example.mdx
index 46e74f87c..0b37e2620 100644
--- a/src/markdown-pages/example.mdx
+++ b/src/markdown-pages/example.mdx
@@ -27,13 +27,13 @@ This guide requires that you have the following:
 
 <Step>
 
-## Clone the example application
-This repo contains an example application and code that supports a handful of how to guides for cool and useful features you migth want in your applications. If you've tried other how to guides, you might have already cloned this repo, in which case, you should probably go ahead and update from master.
+## This is a step with a title and description
+But it doesn't include a code snippet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel orci dignissim, egestas turpis non, ultricies erat. Nullam id magna molestie, volutpat ipsum vitae, bibendum ligula.
+</Step>
 
-```shell lineNumbers=false
-git clone https://github.com/newrelic/nr1-how-to.git
-```
+<Step>
 
+This is a step with no title or code snippet, only description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel orci dignissim, egestas turpis non, ultricies erat. Nullam id magna molestie, volutpat ipsum vitae, bibendum ligula.
 </Step>
 
 <Step>

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 3/3] 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>
   );