From 136389cc8e8bd081d2e7af55d991c8dce5c3f999 Mon Sep 17 00:00:00 2001
From: Jerel Miller <jmiller@newrelic.com>
Date: Thu, 11 Jun 2020 09:28:21 -0700
Subject: [PATCH 01/18] feat: Format code in code snippet where possible

---
 src/components/CodeSnippet.js |  4 +++-
 src/hooks/useFormattedCode.js | 14 ++++++++++++++
 2 files changed, 17 insertions(+), 1 deletion(-)
 create mode 100644 src/hooks/useFormattedCode.js

diff --git a/src/components/CodeSnippet.js b/src/components/CodeSnippet.js
index 9f6b82615..fb8c0d27c 100644
--- a/src/components/CodeSnippet.js
+++ b/src/components/CodeSnippet.js
@@ -4,6 +4,7 @@ import Highlight, { defaultProps } from 'prism-react-renderer';
 import github from 'prism-react-renderer/themes/github';
 import styles from './CodeSnippet.module.scss';
 import cx from 'classnames';
+import useFormattedCode from '../hooks/useFormattedCode';
 
 const copyCode = (code, setCopied) => {
   const textArea = document.createElement('textarea');
@@ -18,6 +19,7 @@ const copyCode = (code, setCopied) => {
 const CodeSnippet = ({ children, copy, className, lineNumbers }) => {
   const language = className.replace('language-', '');
   const [copied, setCopied] = useState(false);
+  const formattedCode = useFormattedCode(children);
 
   return (
     <div>
@@ -25,7 +27,7 @@ const CodeSnippet = ({ children, copy, className, lineNumbers }) => {
         <Highlight
           {...defaultProps}
           theme={github}
-          code={children}
+          code={formattedCode}
           language={language}
         >
           {({ style, tokens, getLineProps, getTokenProps }) => (
diff --git a/src/hooks/useFormattedCode.js b/src/hooks/useFormattedCode.js
new file mode 100644
index 000000000..a559e765e
--- /dev/null
+++ b/src/hooks/useFormattedCode.js
@@ -0,0 +1,14 @@
+import { useMemo } from 'react';
+import formatCode from '../utils/formatCode';
+
+const useFormattedCode = (code, options) => {
+  return useMemo(() => {
+    try {
+      return formatCode(code, options);
+    } catch (e) {
+      return code;
+    }
+  }, [code, options]);
+};
+
+export default useFormattedCode;

From 11acfca67c613c8e9be2d50cbb3507491ea8ba4a Mon Sep 17 00:00:00 2001
From: Jerel Miller <jmiller@newrelic.com>
Date: Thu, 11 Jun 2020 09:44:13 -0700
Subject: [PATCH 02/18] chore: Some styling updates to the code snippet

---
 src/components/CodeSnippet.js          |  8 ++++----
 src/components/CodeSnippet.module.scss | 21 +++++++++++----------
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/components/CodeSnippet.js b/src/components/CodeSnippet.js
index fb8c0d27c..fc651d63a 100644
--- a/src/components/CodeSnippet.js
+++ b/src/components/CodeSnippet.js
@@ -19,7 +19,7 @@ const copyCode = (code, setCopied) => {
 const CodeSnippet = ({ children, copy, className, lineNumbers }) => {
   const language = className.replace('language-', '');
   const [copied, setCopied] = useState(false);
-  const formattedCode = useFormattedCode(children);
+  const formattedCode = useFormattedCode(children ?? '');
 
   return (
     <div>
@@ -27,14 +27,14 @@ const CodeSnippet = ({ children, copy, className, lineNumbers }) => {
         <Highlight
           {...defaultProps}
           theme={github}
-          code={formattedCode}
+          code={formattedCode.trim()}
           language={language}
         >
           {({ style, tokens, getLineProps, getTokenProps }) => (
-            <pre style={{ ...style, padding: '20px' }}>
+            <pre className={styles.codeContainer} style={style}>
               {tokens.map((line, i) => (
                 <div key={i} {...getLineProps({ line, key: i })}>
-                  {lineNumbers !== 'false' && i < tokens.length - 1 && (
+                  {lineNumbers !== 'false' && (
                     <span className={styles.lineNumber}>{i + 1}</span>
                   )}
                   {line.map((token, key) => (
diff --git a/src/components/CodeSnippet.module.scss b/src/components/CodeSnippet.module.scss
index d5c365c15..03d38b7ff 100644
--- a/src/components/CodeSnippet.module.scss
+++ b/src/components/CodeSnippet.module.scss
@@ -1,23 +1,24 @@
 .container {
-  height: 170px;
   font-family: Menlo;
   line-height: 1rem;
   font-size: 0.75rem;
+  max-height: 26rem;
+  overflow: auto;
+}
 
-  pre {
-    box-sizing: border-box;
-    margin: 0;
-    height: 100%;
-    overflow-y: auto;
-    padding: 20px 20px 20px 10px;
-  }
+.codeContainer {
+  box-sizing: border-box;
+  margin: 0;
+  height: 100%;
+  overflow-y: auto;
+  padding: 1rem;
 }
 
 .lineNumber {
   display: inline-block;
-  width: 20px;
+  width: 1.25rem;
   text-align: right;
-  padding-right: 1em;
+  padding-right: 1rem;
   user-select: none;
   opacity: 0.5;
 }

From a075eda079b2f837a125298466e77db858e369d4 Mon Sep 17 00:00:00 2001
From: Jerel Miller <jmiller@newrelic.com>
Date: Thu, 11 Jun 2020 11:52:21 -0700
Subject: [PATCH 03/18] feat: Add a splitUsing utility function

---
 src/utils/__tests__/splitUsing.js | 37 +++++++++++++++++++++++++++++++
 src/utils/splitUsing.js           | 20 +++++++++++++++++
 2 files changed, 57 insertions(+)
 create mode 100644 src/utils/__tests__/splitUsing.js
 create mode 100644 src/utils/splitUsing.js

diff --git a/src/utils/__tests__/splitUsing.js b/src/utils/__tests__/splitUsing.js
new file mode 100644
index 000000000..a5b864f61
--- /dev/null
+++ b/src/utils/__tests__/splitUsing.js
@@ -0,0 +1,37 @@
+import splitUsing from '../splitUsing';
+
+test('splits the list into chunks at the indexes where the predicate is true', () => {
+  const list = [1, 2, 3, 2, 5, 5];
+
+  const result = splitUsing(list, (num) => num === 2);
+
+  expect(result).toEqual([
+    [1, 2],
+    [3, 2],
+    [5, 5],
+  ]);
+});
+
+test('returns empty list if there are no items', () => {
+  const list = [];
+
+  const result = splitUsing(list, () => true);
+
+  expect(result).toEqual([]);
+});
+
+test('handles list where no items satisfy the predicate', () => {
+  const list = [0, 1, 2, 3];
+
+  const result = splitUsing(list, (num) => num === 10);
+
+  expect(result).toEqual([[0, 1, 2, 3]]);
+});
+
+test('handles list where all items satisfy the predicate', () => {
+  const list = [0, 0, 0, 0];
+
+  const result = splitUsing(list, (num) => num === 0);
+
+  expect(result).toEqual([[0], [0], [0], [0]]);
+});
diff --git a/src/utils/splitUsing.js b/src/utils/splitUsing.js
new file mode 100644
index 000000000..49f13797c
--- /dev/null
+++ b/src/utils/splitUsing.js
@@ -0,0 +1,20 @@
+const splitUsing = (list, predicate) => {
+  const { groups, items } = list.reduce(
+    ({ groups, items }, item) => {
+      if (predicate(item)) {
+        return { groups: groups.concat([items.concat(item)]), items: [] };
+      }
+
+      return { groups: groups, items: items.concat(item) };
+    },
+    { groups: [], items: [] }
+  );
+
+  if (items.length > 1) {
+    return [...groups, items];
+  }
+
+  return groups;
+};
+
+export default splitUsing;

From 17d946bfb0009f39b5e46bf5c46459cab5175805 Mon Sep 17 00:00:00 2001
From: Jerel Miller <jmiller@newrelic.com>
Date: Thu, 11 Jun 2020 12:06:22 -0700
Subject: [PATCH 04/18] feat: Add a splitWhen utility

---
 src/utils/__tests__/splitWhen.js | 28 ++++++++++++++++++++++++++++
 src/utils/splitWhen.js           | 15 +++++++++++++++
 2 files changed, 43 insertions(+)
 create mode 100644 src/utils/__tests__/splitWhen.js
 create mode 100644 src/utils/splitWhen.js

diff --git a/src/utils/__tests__/splitWhen.js b/src/utils/__tests__/splitWhen.js
new file mode 100644
index 000000000..ac3c27088
--- /dev/null
+++ b/src/utils/__tests__/splitWhen.js
@@ -0,0 +1,28 @@
+import splitWhen from '../splitWhen';
+
+test('splits the list into 2 chunks where the predicate is true', () => {
+  const list = [1, 2, 3, 4, 5];
+
+  const result = splitWhen(list, (num) => num === 3);
+
+  expect(result).toEqual([
+    [1, 2],
+    [3, 4, 5],
+  ]);
+});
+
+test('returns empty list if there are no items', () => {
+  const list = [];
+
+  const result = splitWhen(list, () => true);
+
+  expect(result).toEqual([]);
+});
+
+test('handles list where no items satisfy the predicate', () => {
+  const list = [1, 2, 3];
+
+  const result = splitWhen(list, (num) => num === 10);
+
+  expect(result).toEqual([[1, 2, 3], []]);
+});
diff --git a/src/utils/splitWhen.js b/src/utils/splitWhen.js
new file mode 100644
index 000000000..5f9febb60
--- /dev/null
+++ b/src/utils/splitWhen.js
@@ -0,0 +1,15 @@
+const splitWhen = (list, predicate) => {
+  if (list.length === 0) {
+    return [];
+  }
+
+  const idx = list.findIndex((item) => predicate(item));
+
+  if (idx === -1) {
+    return [list, []];
+  }
+
+  return [list.slice(0, idx), list.slice(idx)];
+};
+
+export default splitWhen;

From dabb1a7cc27a358ee7e14ee9085308f61dca83ae Mon Sep 17 00:00:00 2001
From: Jerel Miller <jmiller@newrelic.com>
Date: Thu, 11 Jun 2020 12:11:28 -0700
Subject: [PATCH 05/18] feat: Better handling of text followed by code snippets
 by creating sections at each code snippet point

---
 src/components/SideBySide.js          | 36 ++++++++++++++++-----------
 src/components/SideBySide.module.scss | 36 +++++++--------------------
 2 files changed, 31 insertions(+), 41 deletions(-)

diff --git a/src/components/SideBySide.js b/src/components/SideBySide.js
index 19c076694..f60443e0a 100644
--- a/src/components/SideBySide.js
+++ b/src/components/SideBySide.js
@@ -1,18 +1,31 @@
-import React from 'react';
+import React, { Children, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-
 import styles from './SideBySide.module.scss';
+import splitUsing from '../utils/splitUsing';
+import splitWhen from '../utils/splitWhen';
+
+const isMdxType = (child, type) => child?.props?.mdxType === type;
 
-const SideBySide = ({ className, children, type, dir }) => {
-  const childObjects = React.Children.toArray(children);
-  const side = childObjects.find((child) => child?.props?.mdxType === type);
-  const rest = childObjects.filter((child) => child !== side);
+const SideBySide = ({ className, children, type }) => {
+  const childObjects = Children.toArray(children);
+  const rendersRightColumn = childObjects.some((child) =>
+    isMdxType(child, type)
+  );
+  const sections = splitUsing(childObjects, (child) =>
+    isMdxType(child, type)
+  ).map((section) => splitWhen(section, (child) => isMdxType(child, type)));
 
   return (
-    <div className={cx(className, styles.container, styles[dir])}>
-      <div>{rest}</div>
-      {side && <div>{side}</div>}
+    <div className={cx(className, styles.container)}>
+      {sections.map(([left, right], idx) => (
+        <Fragment key={idx}>
+          <div className={cx({ [styles.spanColumns]: !rendersRightColumn })}>
+            {left}
+          </div>
+          {rendersRightColumn && <div>{right}</div>}
+        </Fragment>
+      ))}
     </div>
   );
 };
@@ -21,11 +34,6 @@ SideBySide.propTypes = {
   children: PropTypes.node.isRequired,
   type: PropTypes.string.isRequired,
   className: PropTypes.string,
-  dir: PropTypes.oneOf(['right', 'left']),
-};
-
-SideBySide.defaultProps = {
-  dir: 'right',
 };
 
 export default SideBySide;
diff --git a/src/components/SideBySide.module.scss b/src/components/SideBySide.module.scss
index f79337163..84ce66400 100644
--- a/src/components/SideBySide.module.scss
+++ b/src/components/SideBySide.module.scss
@@ -1,32 +1,14 @@
 .container {
-  display: flex;
-
-  > div {
-    flex: 1;
-  }
-
-  &.right {
-    flex-direction: row;
-
-    > div:nth-child(2) {
-      margin-left: 1rem;
-    }
-  }
-
-  &.left {
-    flex-direction: row-reverse;
-
-    > div:nth-child(2) {
-      margin-right: 1rem;
-    }
-  }
+  display: grid;
+  grid-template-columns: 50% 50%;
+  grid-gap: 1rem;
 
   @media (max-width: 760px) {
-    display: block;
-
-    &.left > div:nth-child(2),
-    &.right > div:nth-child(2) {
-      margin: 0;
-    }
+    grid-template-columns: 100%;
+    grid-gap: 0;
   }
 }
+
+.spanColumns {
+  grid-column: span 2;
+}

From 6417df5bd26567d85fd83a7cbabd8a89dbc286d7 Mon Sep 17 00:00:00 2001
From: Jerel Miller <jmiller@newrelic.com>
Date: Thu, 11 Jun 2020 12:13:46 -0700
Subject: [PATCH 06/18] chore: Use code font var for code snippets

---
 src/components/CodeSnippet.module.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/CodeSnippet.module.scss b/src/components/CodeSnippet.module.scss
index 03d38b7ff..49376c175 100644
--- a/src/components/CodeSnippet.module.scss
+++ b/src/components/CodeSnippet.module.scss
@@ -1,5 +1,5 @@
 .container {
-  font-family: Menlo;
+  font-family: var(--code-font);
   line-height: 1rem;
   font-size: 0.75rem;
   max-height: 26rem;
@@ -12,6 +12,7 @@
   height: 100%;
   overflow-y: auto;
   padding: 1rem;
+  font-family: var(--code-font);
 }
 
 .lineNumber {

From 7505183a3d62bf04b9f399e9b399003784893663 Mon Sep 17 00:00:00 2001
From: Jerel Miller <jmiller@newrelic.com>
Date: Thu, 11 Jun 2020 12:22:36 -0700
Subject: [PATCH 07/18] feat: Create a FeatherIcon component

---
 src/components/FeatherIcon.js          | 34 ++++++++++++++++++++++++++
 src/components/FeatherIcon.module.scss |  9 +++++++
 2 files changed, 43 insertions(+)
 create mode 100644 src/components/FeatherIcon.js
 create mode 100644 src/components/FeatherIcon.module.scss

diff --git a/src/components/FeatherIcon.js b/src/components/FeatherIcon.js
new file mode 100644
index 000000000..f6c977635
--- /dev/null
+++ b/src/components/FeatherIcon.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import styles from './FeatherIcon.module.scss';
+
+const FeatherIcon = ({ className, name }) => {
+  const paths = ICONS[name];
+
+  return paths ? (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      className={cx(styles.icon, className)}
+    >
+      {paths}
+    </svg>
+  ) : null;
+};
+
+const ICONS = {
+  copy: (
+    <>
+      <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+    </>
+  ),
+};
+
+FeatherIcon.propTypes = {
+  className: PropTypes.string,
+  name: PropTypes.oneOf(Object.keys(ICONS)),
+};
+
+export default FeatherIcon;
diff --git a/src/components/FeatherIcon.module.scss b/src/components/FeatherIcon.module.scss
new file mode 100644
index 000000000..21bf3806e
--- /dev/null
+++ b/src/components/FeatherIcon.module.scss
@@ -0,0 +1,9 @@
+.icon {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  width: 1em;
+  height: 1em;
+}

From df680e2d6ee8e2d909592321cf7d9e12d58894c7 Mon Sep 17 00:00:00 2001
From: Jerel Miller <jmiller@newrelic.com>
Date: Thu, 11 Jun 2020 12:30:31 -0700
Subject: [PATCH 08/18] feat: Accept size prop for feather icon

---
 src/components/FeatherIcon.js          | 6 ++++--
 src/components/FeatherIcon.module.scss | 2 --
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/FeatherIcon.js b/src/components/FeatherIcon.js
index f6c977635..5143b4793 100644
--- a/src/components/FeatherIcon.js
+++ b/src/components/FeatherIcon.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import styles from './FeatherIcon.module.scss';
 
-const FeatherIcon = ({ className, name }) => {
+const FeatherIcon = ({ className, name, size = '1em' }) => {
   const paths = ICONS[name];
 
   return paths ? (
@@ -11,6 +11,7 @@ const FeatherIcon = ({ className, name }) => {
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24"
       className={cx(styles.icon, className)}
+      style={{ width: size, height: size }}
     >
       {paths}
     </svg>
@@ -28,7 +29,8 @@ const ICONS = {
 
 FeatherIcon.propTypes = {
   className: PropTypes.string,
-  name: PropTypes.oneOf(Object.keys(ICONS)),
+  name: PropTypes.oneOf(Object.keys(ICONS)).isRequired,
+  size: PropTypes.string,
 };
 
 export default FeatherIcon;
diff --git a/src/components/FeatherIcon.module.scss b/src/components/FeatherIcon.module.scss
index 21bf3806e..d40449e2e 100644
--- a/src/components/FeatherIcon.module.scss
+++ b/src/components/FeatherIcon.module.scss
@@ -4,6 +4,4 @@
   stroke-width: 2;
   stroke-linecap: round;
   stroke-linejoin: round;
-  width: 1em;
-  height: 1em;
 }

From d6017745d45ddb490d5cf9bc747f6dd556575aa1 Mon Sep 17 00:00:00 2001
From: Jerel Miller <jmiller@newrelic.com>
Date: Thu, 11 Jun 2020 12:30:51 -0700
Subject: [PATCH 09/18] feat: Use inline svg rather than background image for
 copy icon in code snippet

---
 src/components/CodeSnippet.js          |  5 +++--
 src/components/CodeSnippet.module.scss | 11 ++---------
 2 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/src/components/CodeSnippet.js b/src/components/CodeSnippet.js
index fc651d63a..29c58b8a8 100644
--- a/src/components/CodeSnippet.js
+++ b/src/components/CodeSnippet.js
@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import Highlight, { defaultProps } from 'prism-react-renderer';
 import github from 'prism-react-renderer/themes/github';
 import styles from './CodeSnippet.module.scss';
-import cx from 'classnames';
 import useFormattedCode from '../hooks/useFormattedCode';
+import FeatherIcon from './FeatherIcon';
 
 const copyCode = (code, setCopied) => {
   const textArea = document.createElement('textarea');
@@ -47,8 +47,9 @@ const CodeSnippet = ({ children, copy, className, lineNumbers }) => {
         </Highlight>
       </div>
       {copy !== 'false' && (
-        <div className={cx({ [styles.copied]: copied }, styles.copyBar)}>
+        <div className={styles.copyBar}>
           <button type="button" onClick={() => copyCode(children, setCopied)}>
+            <FeatherIcon name="copy" size="1rem" className={styles.copyIcon} />
             {copied ? 'Copied!' : 'Copy output'}
           </button>
         </div>
diff --git a/src/components/CodeSnippet.module.scss b/src/components/CodeSnippet.module.scss
index 49376c175..89c37fdaa 100644
--- a/src/components/CodeSnippet.module.scss
+++ b/src/components/CodeSnippet.module.scss
@@ -30,16 +30,9 @@
   justify-content: flex-end;
   align-items: center;
   background: var(--color-neutrals-200);
-  height: 35px;
-  background-image: url('../images/copy.svg');
-  background-size: 1rem;
-  background-repeat: no-repeat;
-  background-position: 83% 50%;
 
   button {
-    padding-right: 1rem;
     font-size: 0.75rem;
-    font-family: var(--primary-font-family);
     color: var(--color-brand-800);
     background: none;
     border: none;
@@ -47,6 +40,6 @@
   }
 }
 
-.copied {
-  background-position: 88% 50%;
+.copyIcon {
+  margin-right: 0.5rem;
 }

From 52bdb61703f68a0a30968205adf88f8dce1ac41f Mon Sep 17 00:00:00 2001
From: Jerel Miller <jmiller@newrelic.com>
Date: Thu, 11 Jun 2020 12:39:32 -0700
Subject: [PATCH 10/18] chore: Wrap code snippet in <code /> tag

---
 src/components/CodeSnippet.js          | 22 ++++++++++++----------
 src/components/CodeSnippet.module.scss |  2 --
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/CodeSnippet.js b/src/components/CodeSnippet.js
index 29c58b8a8..7933ebc4d 100644
--- a/src/components/CodeSnippet.js
+++ b/src/components/CodeSnippet.js
@@ -32,16 +32,18 @@ const CodeSnippet = ({ children, copy, className, lineNumbers }) => {
         >
           {({ style, tokens, getLineProps, getTokenProps }) => (
             <pre className={styles.codeContainer} style={style}>
-              {tokens.map((line, i) => (
-                <div key={i} {...getLineProps({ line, key: i })}>
-                  {lineNumbers !== 'false' && (
-                    <span className={styles.lineNumber}>{i + 1}</span>
-                  )}
-                  {line.map((token, key) => (
-                    <span key={key} {...getTokenProps({ token, key })} />
-                  ))}
-                </div>
-              ))}
+              <code>
+                {tokens.map((line, i) => (
+                  <div key={i} {...getLineProps({ line, key: i })}>
+                    {lineNumbers !== 'false' && (
+                      <span className={styles.lineNumber}>{i + 1}</span>
+                    )}
+                    {line.map((token, key) => (
+                      <span key={key} {...getTokenProps({ token, key })} />
+                    ))}
+                  </div>
+                ))}
+              </code>
             </pre>
           )}
         </Highlight>
diff --git a/src/components/CodeSnippet.module.scss b/src/components/CodeSnippet.module.scss
index 89c37fdaa..967027458 100644
--- a/src/components/CodeSnippet.module.scss
+++ b/src/components/CodeSnippet.module.scss
@@ -1,5 +1,4 @@
 .container {
-  font-family: var(--code-font);
   line-height: 1rem;
   font-size: 0.75rem;
   max-height: 26rem;
@@ -12,7 +11,6 @@
   height: 100%;
   overflow-y: auto;
   padding: 1rem;
-  font-family: var(--code-font);
 }
 
 .lineNumber {

From ebf65fdc6bb0c03b6e935e22d3e795df8d14966a Mon Sep 17 00:00:00 2001
From: Jerel Miller <jmiller@newrelic.com>
Date: Thu, 11 Jun 2020 12:45:56 -0700
Subject: [PATCH 11/18] feat: Create a useClipboard hook. Move copy clipboard
 code into a util function

---
 src/hooks/useClipboard.js    | 26 ++++++++++++++++++++++++++
 src/utils/copyToClipboard.js | 11 +++++++++++
 2 files changed, 37 insertions(+)
 create mode 100644 src/hooks/useClipboard.js
 create mode 100644 src/utils/copyToClipboard.js

diff --git a/src/hooks/useClipboard.js b/src/hooks/useClipboard.js
new file mode 100644
index 000000000..307c276bc
--- /dev/null
+++ b/src/hooks/useClipboard.js
@@ -0,0 +1,26 @@
+import { useEffect, useState, useCallback } from 'react';
+import copyToClipboard from '../utils/copyToClipboard';
+
+const useClipboard = ({ duration = 1000 } = {}) => {
+  const [copied, setCopied] = useState(false);
+  const copy = useCallback((text) => {
+    copyToClipboard(text);
+    setCopied(true);
+  }, []);
+
+  useEffect(() => {
+    if (copied && duration) {
+      const id = setTimeout(() => {
+        setCopied(false);
+      }, duration);
+
+      return () => {
+        clearTimeout(id);
+      };
+    }
+  }, [copied, duration]);
+
+  return [copied, copy];
+};
+
+export default useClipboard;
diff --git a/src/utils/copyToClipboard.js b/src/utils/copyToClipboard.js
new file mode 100644
index 000000000..7404dbee4
--- /dev/null
+++ b/src/utils/copyToClipboard.js
@@ -0,0 +1,11 @@
+const copyToClipboard = (text) => {
+  const textArea = document.createElement('textarea');
+
+  textArea.value = text;
+  document.body.appendChild(textArea);
+  textArea.select();
+  document.execCommand('copy');
+  document.body.removeChild(textArea);
+};
+
+export default copyToClipboard;

From 3f1c35a2eaa318395b371224cdb4ba070233696c Mon Sep 17 00:00:00 2001
From: Jerel Miller <jmiller@newrelic.com>
Date: Thu, 11 Jun 2020 12:46:37 -0700
Subject: [PATCH 12/18] refactor: Use useClipboard in code snippet

---
 src/components/CodeSnippet.js | 19 +++++--------------
 1 file changed, 5 insertions(+), 14 deletions(-)

diff --git a/src/components/CodeSnippet.js b/src/components/CodeSnippet.js
index 7933ebc4d..986210c7a 100644
--- a/src/components/CodeSnippet.js
+++ b/src/components/CodeSnippet.js
@@ -1,25 +1,16 @@
-import React, { useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import Highlight, { defaultProps } from 'prism-react-renderer';
 import github from 'prism-react-renderer/themes/github';
+import FeatherIcon from './FeatherIcon';
 import styles from './CodeSnippet.module.scss';
+import useClipboard from '../hooks/useClipboard';
 import useFormattedCode from '../hooks/useFormattedCode';
-import FeatherIcon from './FeatherIcon';
-
-const copyCode = (code, setCopied) => {
-  const textArea = document.createElement('textarea');
-  textArea.value = code;
-  document.body.appendChild(textArea);
-  textArea.select();
-  document.execCommand('copy');
-  document.body.removeChild(textArea);
-  setCopied(true);
-};
 
 const CodeSnippet = ({ children, copy, className, lineNumbers }) => {
   const language = className.replace('language-', '');
-  const [copied, setCopied] = useState(false);
   const formattedCode = useFormattedCode(children ?? '');
+  const [copied, copyCode] = useClipboard();
 
   return (
     <div>
@@ -50,7 +41,7 @@ const CodeSnippet = ({ children, copy, className, lineNumbers }) => {
       </div>
       {copy !== 'false' && (
         <div className={styles.copyBar}>
-          <button type="button" onClick={() => copyCode(children, setCopied)}>
+          <button type="button" onClick={() => copyCode(children)}>
             <FeatherIcon name="copy" size="1rem" className={styles.copyIcon} />
             {copied ? 'Copied!' : 'Copy output'}
           </button>

From 6fec89f12426d07e7f1b0aee1847bef6368cc1aa Mon Sep 17 00:00:00 2001
From: Jerel Miller <jmiller@newrelic.com>
Date: Thu, 11 Jun 2020 12:49:22 -0700
Subject: [PATCH 13/18] chore: Copy the formatted code instead of the raw value

---
 src/components/CodeSnippet.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/CodeSnippet.js b/src/components/CodeSnippet.js
index 986210c7a..0ecef8fba 100644
--- a/src/components/CodeSnippet.js
+++ b/src/components/CodeSnippet.js
@@ -41,7 +41,7 @@ const CodeSnippet = ({ children, copy, className, lineNumbers }) => {
       </div>
       {copy !== 'false' && (
         <div className={styles.copyBar}>
-          <button type="button" onClick={() => copyCode(children)}>
+          <button type="button" onClick={() => copyCode(formattedCode.trim())}>
             <FeatherIcon name="copy" size="1rem" className={styles.copyIcon} />
             {copied ? 'Copied!' : 'Copy output'}
           </button>

From 4081baeb9e6362ccb89bed96cab0e017cd4868c2 Mon Sep 17 00:00:00 2001
From: Jerel Miller <jmiller@newrelic.com>
Date: Thu, 11 Jun 2020 16:20:15 -0700
Subject: [PATCH 14/18] fix: Compare splitUsing > 0 instead of 1

---
 src/utils/splitUsing.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/splitUsing.js b/src/utils/splitUsing.js
index 49f13797c..e29621772 100644
--- a/src/utils/splitUsing.js
+++ b/src/utils/splitUsing.js
@@ -10,7 +10,7 @@ const splitUsing = (list, predicate) => {
     { groups: [], items: [] }
   );
 
-  if (items.length > 1) {
+  if (items.length > 0) {
     return [...groups, items];
   }
 

From 0e82c9475d10a1b2e5e8b157fb6ecce1bf39541e Mon Sep 17 00:00:00 2001
From: Jerel Miller <jmiller@newrelic.com>
Date: Thu, 11 Jun 2020 16:21:37 -0700
Subject: [PATCH 15/18] chore: Add second code snippet in example guide

---
 src/markdown-pages/example.mdx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/markdown-pages/example.mdx b/src/markdown-pages/example.mdx
index 0b37e2620..6daffdd2d 100644
--- a/src/markdown-pages/example.mdx
+++ b/src/markdown-pages/example.mdx
@@ -44,6 +44,12 @@ Use the New Relic One CLI to update the application UUID and run the application
 ```shell lineNumbers=false
 cd /nr1-howto/add-time-picker
 ```
+
+Once that is done, run the following:
+
+```shell lineNumbers=false
+npm start
+```
 </Step>
 
 <Step>
@@ -76,7 +82,7 @@ You'll get a URL to access New Relic One and see your application running locall
 
 One the New Relic home page, there's a new launcher to the Add time picker application.
 
-Click the launcher, and the dashboard opens with your New Relic account transactions. 
+Click the launcher, and the dashboard opens with your New Relic account transactions.
 
 
 ### Related info

From a0cfad4f2821d60ed392ce69d609a8d2c786a56c Mon Sep 17 00:00:00 2001
From: Jerel Miller <jmiller@newrelic.com>
Date: Thu, 11 Jun 2020 16:30:27 -0700
Subject: [PATCH 16/18] refactor: Extract isMdxType to own util file

---
 src/components/SideBySide.js | 3 +--
 src/utils/mdx.js             | 1 +
 2 files changed, 2 insertions(+), 2 deletions(-)
 create mode 100644 src/utils/mdx.js

diff --git a/src/components/SideBySide.js b/src/components/SideBySide.js
index f60443e0a..662b31c68 100644
--- a/src/components/SideBySide.js
+++ b/src/components/SideBySide.js
@@ -4,8 +4,7 @@ import cx from 'classnames';
 import styles from './SideBySide.module.scss';
 import splitUsing from '../utils/splitUsing';
 import splitWhen from '../utils/splitWhen';
-
-const isMdxType = (child, type) => child?.props?.mdxType === type;
+import { isMdxType } from '../utils/mdx';
 
 const SideBySide = ({ className, children, type }) => {
   const childObjects = Children.toArray(children);
diff --git a/src/utils/mdx.js b/src/utils/mdx.js
new file mode 100644
index 000000000..40cb182ab
--- /dev/null
+++ b/src/utils/mdx.js
@@ -0,0 +1 @@
+export const isMdxType = (child, type) => child?.props?.mdxType === type;

From 3a6cf8589eeb1731effb1c386ef76d7bfb24f8f2 Mon Sep 17 00:00:00 2001
From: Jerel Miller <jmiller@newrelic.com>
Date: Thu, 11 Jun 2020 16:31:41 -0700
Subject: [PATCH 17/18] fix: Ensure Steps handles a single child. Use the
 Children utility instead

---
 src/components/Steps.js | 22 ++++++----------------
 1 file changed, 6 insertions(+), 16 deletions(-)

diff --git a/src/components/Steps.js b/src/components/Steps.js
index 9e68e3151..5c5dd55a8 100644
--- a/src/components/Steps.js
+++ b/src/components/Steps.js
@@ -1,24 +1,14 @@
-import React from 'react';
+import { Children, cloneElement } from 'react';
 import PropTypes from 'prop-types';
+import { isMdxType } from '../utils/mdx';
 
 const Steps = ({ children }) => {
-  // get the number of steps
-  const totalSteps = children.filter(
-    (child) => child?.props?.mdxType === 'Step'
+  const totalSteps = Children.toArray(children).filter((child) =>
+    isMdxType(child, 'Step')
   ).length;
 
-  // return the children with additional props
-  return (
-    <>
-      {children.map((child, index) => ({
-        ...child,
-        props: {
-          ...child.props,
-          number: index + 1,
-          total: totalSteps,
-        },
-      }))}
-    </>
+  return Children.map(children, (child, index) =>
+    cloneElement(child, { number: index + 1, total: totalSteps })
   );
 };
 

From 2088cc04f7a0dd48cda923077afbb51c32365fbc Mon Sep 17 00:00:00 2001
From: Jerel Miller <jmiller@newrelic.com>
Date: Thu, 11 Jun 2020 16:46:50 -0700
Subject: [PATCH 18/18] chore: Update the component guide to include
 information about multiple code blocks

---
 COMPONENT_GUIDE.md | 136 ++++++++++++++++++++++++++++-----------------
 1 file changed, 85 insertions(+), 51 deletions(-)

diff --git a/COMPONENT_GUIDE.md b/COMPONENT_GUIDE.md
index 844d61e39..205027f9c 100644
--- a/COMPONENT_GUIDE.md
+++ b/COMPONENT_GUIDE.md
@@ -1,17 +1,17 @@
 # Globally available components
 
-
 ## Video
 
-`<Video />` component provides formatting for videos in markdown. 
+`<Video />` component provides formatting for videos in markdown.
+
+### Usage
 
-### Usage 
+The Video component requires two props:
 
-The Video component requires two props: 
 - `id`: the video ID
 - `type`: the host of the video. Accepted values are:
-    - `wistia`
-    - `youtube`
+  - `wistia`
+  - `youtube`
 
 ```md
 <Video id="zxunt1u1as" type="wistia"/>
@@ -19,10 +19,11 @@ The Video component requires two props:
 
 ## Intro
 
-The `<Intro />` component provides formatting for the title and introduction of the markdown document. 
+The `<Intro />` component provides formatting for the title and introduction of the markdown document.
 
 ### Usage
-It takes the title provided in the Frontmatter and accepts plain text for the description. An example of Frontmatter that will have a title of __Example Guide__: 
+
+It takes the title provided in the Frontmatter and accepts plain text for the description. An example of Frontmatter that will have a title of **Example Guide**:
 
 ```
 ---
@@ -34,9 +35,9 @@ description: 'Example guide page'
 ---
 ```
 
- It also accepts a `<Video />` component as a child, which it will place on the left side of the description. 
+It also accepts a `<Video />` component as a child, which it will place on the left side of the description.
 
-```md 
+```md
 <Intro>
 This is a description for the markdown guide.
 
@@ -46,35 +47,37 @@ This is a description for the markdown guide.
 
 If there is a more than plain text and a `<Video />` (such as a code snippet or another component) the content will be posted on the left side below the description.
 
-
 ## Steps
 
-The `<Steps />` is a required container for the individual `<Step />` components and will autonumber from top to bottom. 
+The `<Steps />` is a required container for the individual `<Step />` components and will autonumber from top to bottom.
 
-### Usage 
+### Usage
 
 The Steps component accepts `<Step/>` components as its children and will increment by the number of child components.
 
-```md 
+```md
 <Steps>
 
 <Step>
 
 ## Step 1
+
 Step 1 description.
 </Step>
 
 <Step>
 
 ## Step 2
+
 Step 2 description
 </Step>
 
 </Steps>
 ```
 
-If there is markdown content not wrapped by a `<Step />` component, it will still auto-increment for that content, so be sure to wrap all content with the Step component. For example: 
-```md 
+If there is markdown content not wrapped by a `<Step />` component, it will still auto-increment for that content, so be sure to wrap all content with the Step component. For example:
+
+```md
 <Steps>
 
 <Step>
@@ -90,67 +93,98 @@ This will read as Step 3 of 3.
 </Steps>
 ```
 
-## Step 
+## Step
 
 ### Usage
 
-The individual `<Step />` expects an optional h2 as the title of the step. 
+The `<Step />` component renders a single step in the series of steps. This is
+meant to use in conjunction with `<Steps />`, so this component **MUST** be
+wrapped by `<Steps />` to work properly. The following example will contain 2
+steps:
 
 ```md
-<Step>
-
-## Step Title
-</Step>
+<Steps>
+  <Step>Some information about step 1</Step>
+  <Step>Some information about step 2</Step>
+</Steps>
 ```
 
-A second h2 tag will render as a normal H2 tag and not as the step title. 
+The previous example will interpret the text inside of the `<Step />` as plain
+text. If you would like the `<Step />` component to interpret the text as
+markdown content, include a line break after the opening tag:
 
 ```md
 <Step>
 
-## Step Title 
-## Normal h2 title
+# This is a title for the step.
+
+This is some information about this step.
 </Step>
 ```
-There must be a line break before the h2 tag or the component will not render it correctly. For example, this will __not__ render correctly: 
-```md
+
+You can intersperse code blocks inside of the step. Code snippets will always
+render in a right column next to the description.
+
+````md
 <Step>
-## Step Title
-</Step>
+
+# A code example
+
+Run the following command in your terminal:
+
+```shell
+npm start
 ```
 
-Step will also take plain text as a description and a code snippet in standard three back tick form. 
-```md
+</Step>
+````
+
+You can include multiple code blocks in a single step. Code blocks will always
+be rendered to the right of the text that precedes it.
+
+````md
 <Step>
 
-## Step Title
-Step description
+# Another code example
 
-    ```shell
-    finishstep
-    ```
-</Step>
+Run the following in your terminal:
+
+```shell
+npm start
 ```
-The code snippet will always render to the right.
+
+When that is running, edit index.js and replace the component with the following
+code:
+
+```js
+return <div>Hello, {props.name}</div>;
+```
+
+</Step>
+````
 
 ## Code Snippet
 
-Code Snippets are automatically formatted by three backticks. 
+Code Snippets are automatically formatted by three backticks.
 
 ### Usage
 
-There are three props that can be supplied to a code snippet. 
+There are three props that can be supplied to a code snippet.
+
+- `language`: The first prop must be a code language. [Here](https://prismjs.com/#supported-languages) is a list of accepted languages for syntax highlighting.
 
-- `language`: The first prop must be a code language. [Here](https://prismjs.com/#supported-languages) is a list of accepted languages for syntax highlighting. 
+  ````md
+  ```jsx
+  ```
+  ````
 
-    ```md
-    ```jsx
-    ```
-- `lineNumbers`: `true` or `false`. Will show line numbers of the left side of the code, defaults to `true`. 
-    ```md
-    ```jsx lineNumbers=false
-    ```
+- `lineNumbers`: `true` or `false`. Will show line numbers of the left side of the code, defaults to `true`.
+  ````md
+  ```jsx lineNumbers=false
+  ```
+  ````
 - `copy`: `true` or `false`. Will display or not display the copy button, defaults to `true`
-    ```md
-    ```jsx copy=false
-    ```
+  ````md
+  ```jsx copy=false
+  ```
+  ````