Merge pull request #386 from newrelic/liz/step-img

Align images to the right in steps

COMPONENT_GUIDE.md

@@ -163,6 +163,21 @@ return <div>Hello, {props.name}</div>;
 </Step>
 ````
 
+You can also use images in steps. To get an image to appear on the right side as with code blocks, you must use an HTML `img` tag, traditional markdown will not align the image to the right.
+
+```md
+<Step>
+
+# Image example
+
+A step description
+<img src="../images/folder/great-img.png" alt="and here's an image to follow">
+
+</Step>
+```
+
+> Note: keep in mind that a new line is necesary after an `img` tag to ensure proper rendering of subsequent text/markdown.
+
 ## Code Snippet
 
 Code Snippets are automatically formatted by three backticks. This is our preferred method to delineate code snippets, but it's worth noting that markdown will also consider any text that is indented 4 spaces (or 1 tab) to be a code block.

gatsby-config.js

@@ -47,6 +47,7 @@ module.exports = {
             resolve: 'gatsby-remark-images',
             options: {
               maxWidth: 1200,
+              linkImagesToOriginal: false,
             },
           },
         ],

src/components/SideBySide.js

@@ -10,12 +10,26 @@ const SideBySide = ({ className, children, type }) => {
   const types = Array.isArray(type) ? type : [type];
   const childObjects = Children.toArray(children);
   const rendersRightColumn = childObjects.some((child) =>
-    types.some((type) => isMdxType(child, type))
+    types.some(
+      (type) =>
+        isMdxType(child, type) ||
+        isMdxType(child, type, { nestedWithin: 'span' })
+    )
   );
   const sections = splitUsing(childObjects, (child) =>
-    types.some((type) => isMdxType(child, type))
+    types.some(
+      (type) =>
+        isMdxType(child, type) ||
+        isMdxType(child, type, { nestedWithin: 'span' })
+    )
   ).map((section) =>
-    splitWhen(section, (child) => types.some((type) => isMdxType(child, type)))
+    splitWhen(section, (child) =>
+      types.some(
+        (type) =>
+          isMdxType(child, type) ||
+          isMdxType(child, type, { nestedWithin: 'span' })
+      )
+    )
   );
 
   return (

src/components/Step.js

@@ -8,7 +8,7 @@ const Step = ({ children, number, total }) => (
   <div className={styles.wrapper}>
     <p className={styles.stepNumber}>{`Step ${number} of ${total}`}</p>
     <div className={styles.stepDetails}>
-      <SideBySide type="pre">{children}</SideBySide>
+      <SideBySide type={['pre', 'img']}>{children}</SideBySide>
     </div>
   </div>
 );

src/utils/mdx.js

@@ -1 +1,14 @@
-export const isMdxType = (child, type) => child?.props?.mdxType === type;
+export const isMdxType = (child, type, { nestedWithin } = {}) => {
+  if (nestedWithin) {
+    if (
+      child?.props?.mdxType === nestedWithin &&
+      Array.isArray(child.props.children)
+    ) {
+      return child.props.children.some(
+        (child) => child?.props?.mdxType === type
+      );
+    }
+    return false;
+  }
+  return child?.props?.mdxType === type;
+};