Merge pull request #95 from newrelic/liz/tweak-step

Tweak step component

src/components/Step.js

@@ -1,17 +1,26 @@
 import React from 'react';
 import styles from './Step.module.scss';
 import Proptypes from 'prop-types';
+import cx from 'classnames';
 
 const Step = ({ children, number, total }) => {
+  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}>{childrenWithoutCodeSnippet}</div>
+        <div
+          className={cx(styles.stepDetails, {
+            [styles.stepDetailsWithCode]: codeSnippet,
+          })}
+        >
+          {childrenWithoutCodeSnippet}
+        </div>
         {codeSnippet}
       </div>
     </div>

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;

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>