From 82b34147d9c9dbbf83124393ba5bf96abb1eb467 Mon Sep 17 00:00:00 2001
From: Zack Stickles <zstickles@gmail.com>
Date: Fri, 5 Jun 2020 16:01:07 -0700
Subject: [PATCH 1/8] feat: created a component that allows for side-by-side
 content

---
 src/components/SideBySide.js          | 31 +++++++++++++++++++++++++++
 src/components/SideBySide.module.scss | 11 ++++++++++
 2 files changed, 42 insertions(+)
 create mode 100644 src/components/SideBySide.js
 create mode 100644 src/components/SideBySide.module.scss

diff --git a/src/components/SideBySide.js b/src/components/SideBySide.js
new file mode 100644
index 000000000..678ea86f4
--- /dev/null
+++ b/src/components/SideBySide.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+
+import styles from './SideBySide.module.scss';
+
+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);
+
+  return (
+    <div className={cx(className, styles.container)}>
+      <div>{rest}</div>
+      {side && <div>{side}</div>}
+    </div>
+  );
+};
+
+SideBySide.propTypes = {
+  children: PropTypes.node.isRequired,
+  type: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  dir: PropTypes.string,
+};
+
+SideBySide.defaultProps = {
+  dir: 'right',
+};
+
+export default SideBySide;
diff --git a/src/components/SideBySide.module.scss b/src/components/SideBySide.module.scss
new file mode 100644
index 000000000..7155d5e97
--- /dev/null
+++ b/src/components/SideBySide.module.scss
@@ -0,0 +1,11 @@
+.container {
+  display: flex;
+
+  div {
+    flex: 1;
+  }
+
+  div:nth-child(2) {
+    margin-left: 1rem;
+  }
+}

From 7ce7d6f108a944af5301f6b9591a6dd0c83618b0 Mon Sep 17 00:00:00 2001
From: Zack Stickles <zstickles@gmail.com>
Date: Fri, 5 Jun 2020 16:01:20 -0700
Subject: [PATCH 2/8] chore: simplified intro component

---
 src/components/Intro.js          | 10 +++++++---
 src/components/Intro.module.scss | 17 ++++-------------
 2 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/src/components/Intro.js b/src/components/Intro.js
index b1d5b0892..cfb7a9571 100644
--- a/src/components/Intro.js
+++ b/src/components/Intro.js
@@ -1,13 +1,17 @@
 import React from 'react';
+import SideBySide from './SideBySide';
+import PropTypes from 'prop-types';
+
 import styles from './Intro.module.scss';
-import Proptypes from 'prop-types';
 
 const Intro = ({ children }) => (
-  <div className={styles.container}>{children}</div>
+  <SideBySide type="Video" className={styles.container}>
+    {children}
+  </SideBySide>
 );
 
 Intro.propTypes = {
-  children: Proptypes.node.isRequired,
+  children: PropTypes.node.isRequired,
 };
 
 export default Intro;
diff --git a/src/components/Intro.module.scss b/src/components/Intro.module.scss
index 96f9fe977..7095b1aeb 100644
--- a/src/components/Intro.module.scss
+++ b/src/components/Intro.module.scss
@@ -1,14 +1,5 @@
-.container {
-  display: flex;
-  p {
-    width: 50%;
-    color: var(--color-neutrals-600);
-    font-size: 1.125rem;
-    line-height: 2rem;
-    margin-right: 1rem;
-  }
-  div {
-    width: 50%;
-    margin-left: 1rem;
-  }
+.container p {
+  color: var(--color-neutrals-600);
+  font-size: 1.125rem;
+  line-height: 2rem;
 }

From 1869a75c40402657b93bd80e319facde7d12af51 Mon Sep 17 00:00:00 2001
From: Zack Stickles <zstickles@gmail.com>
Date: Fri, 5 Jun 2020 16:04:42 -0700
Subject: [PATCH 3/8] chore: added the ability to specify direction

---
 src/components/SideBySide.js          |  2 +-
 src/components/SideBySide.module.scss | 16 ++++++++++++++--
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/SideBySide.js b/src/components/SideBySide.js
index 678ea86f4..f37d3cf6d 100644
--- a/src/components/SideBySide.js
+++ b/src/components/SideBySide.js
@@ -10,7 +10,7 @@ const SideBySide = ({ className, children, type, dir }) => {
   const rest = childObjects.filter((child) => child !== side);
 
   return (
-    <div className={cx(className, styles.container)}>
+    <div className={cx(className, styles.container, styles[dir])}>
       <div>{rest}</div>
       {side && <div>{side}</div>}
     </div>
diff --git a/src/components/SideBySide.module.scss b/src/components/SideBySide.module.scss
index 7155d5e97..7c1871a1b 100644
--- a/src/components/SideBySide.module.scss
+++ b/src/components/SideBySide.module.scss
@@ -5,7 +5,19 @@
     flex: 1;
   }
 
-  div:nth-child(2) {
-    margin-left: 1rem;
+  &.right {
+    flex-direction: row;
+
+    div:nth-child(2) {
+      margin-left: 1rem;
+    }
+  }
+
+  &.left {
+    flex-direction: row-reverse;
+
+    div:nth-child(2) {
+      margin-right: 1rem;
+    }
   }
 }

From 0ab3a269b440f23978369b23092974b51bae8bd7 Mon Sep 17 00:00:00 2001
From: Zack Stickles <zstickles@gmail.com>
Date: Fri, 5 Jun 2020 16:06:26 -0700
Subject: [PATCH 4/8] chore: restricting prop possibilities

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

diff --git a/src/components/SideBySide.js b/src/components/SideBySide.js
index f37d3cf6d..19c076694 100644
--- a/src/components/SideBySide.js
+++ b/src/components/SideBySide.js
@@ -21,7 +21,7 @@ SideBySide.propTypes = {
   children: PropTypes.node.isRequired,
   type: PropTypes.string.isRequired,
   className: PropTypes.string,
-  dir: PropTypes.string,
+  dir: PropTypes.oneOf(['right', 'left']),
 };
 
 SideBySide.defaultProps = {

From 925fc74cde8420b31c396dd849ef02bf11b79f3b Mon Sep 17 00:00:00 2001
From: Zack Stickles <zstickles@gmail.com>
Date: Fri, 5 Jun 2020 16:13:27 -0700
Subject: [PATCH 5/8] chore: selector specificity

---
 src/components/SideBySide.module.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/SideBySide.module.scss b/src/components/SideBySide.module.scss
index 7c1871a1b..3b48eb7db 100644
--- a/src/components/SideBySide.module.scss
+++ b/src/components/SideBySide.module.scss
@@ -1,14 +1,14 @@
 .container {
   display: flex;
 
-  div {
+  > div {
     flex: 1;
   }
 
   &.right {
     flex-direction: row;
 
-    div:nth-child(2) {
+    > div:nth-child(2) {
       margin-left: 1rem;
     }
   }
@@ -16,7 +16,7 @@
   &.left {
     flex-direction: row-reverse;
 
-    div:nth-child(2) {
+    > div:nth-child(2) {
       margin-right: 1rem;
     }
   }

From 1c3640f4492a14d40236c27321a7759cc1595d6c Mon Sep 17 00:00:00 2001
From: Zack Stickles <zstickles@gmail.com>
Date: Fri, 5 Jun 2020 16:13:46 -0700
Subject: [PATCH 6/8] chore: simplifying step component

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

diff --git a/src/components/Step.js b/src/components/Step.js
index b1409b647..206f2fda4 100644
--- a/src/components/Step.js
+++ b/src/components/Step.js
@@ -1,7 +1,9 @@
 import React from 'react';
-import styles from './Step.module.scss';
 import Proptypes from 'prop-types';
 import cx from 'classnames';
+import SideBySide from './SideBySide';
+
+import styles from './Step.module.scss';
 
 const Step = ({ children, number, total }) => {
   children = React.Children.toArray(children);
@@ -13,15 +15,8 @@ const Step = ({ children, number, total }) => {
   return (
     <div className={styles.wrapper}>
       <p className={styles.stepNumber}>{`Step ${number} of ${total}`}</p>
-      <div className={styles.container}>
-        <div
-          className={cx(styles.stepDetails, {
-            [styles.stepDetailsWithCode]: codeSnippet,
-          })}
-        >
-          {childrenWithoutCodeSnippet}
-        </div>
-        {codeSnippet}
+      <div className={styles.stepDetails}>
+        <SideBySide type="pre">{children}</SideBySide>
       </div>
     </div>
   );
diff --git a/src/components/Step.module.scss b/src/components/Step.module.scss
index 597f2b52d..1591bc1d6 100644
--- a/src/components/Step.module.scss
+++ b/src/components/Step.module.scss
@@ -3,17 +3,14 @@
   box-sizing: border-box;
   padding-top: 1.5rem;
   margin-top: 2rem;
+
   .stepNumber {
     font-size: 0.75rem;
     color: var(--color-neutrals-600);
   }
 }
-.container {
-  display: flex;
-}
+
 .stepDetails {
-  margin-right: 1rem;
-  line-height: 1.5rem;
   h1:first-child,
   h2:first-child,
   h3:first-child,
@@ -27,10 +24,3 @@
     font-size: 1rem;
   }
 }
-.stepDetailsWithCode {
-  width: 50%;
-}
-.container > pre {
-  width: 50%;
-  margin-left: 1rem;
-}

From 906c36d13dfa236be12d28ca14c7d001ba3976f0 Mon Sep 17 00:00:00 2001
From: Zack Stickles <zstickles@gmail.com>
Date: Fri, 5 Jun 2020 16:17:15 -0700
Subject: [PATCH 7/8] chore: mobile responsiveness

---
 src/components/SideBySide.module.scss | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/components/SideBySide.module.scss b/src/components/SideBySide.module.scss
index 3b48eb7db..f79337163 100644
--- a/src/components/SideBySide.module.scss
+++ b/src/components/SideBySide.module.scss
@@ -20,4 +20,13 @@
       margin-right: 1rem;
     }
   }
+
+  @media (max-width: 760px) {
+    display: block;
+
+    &.left > div:nth-child(2),
+    &.right > div:nth-child(2) {
+      margin: 0;
+    }
+  }
 }

From 95fb3d211d6a1fd8a310bbf6182a5a8d19dd2c15 Mon Sep 17 00:00:00 2001
From: Zack Stickles <zstickles@gmail.com>
Date: Fri, 5 Jun 2020 16:21:57 -0700
Subject: [PATCH 8/8] chore: simplified step component

---
 src/components/Step.js | 23 +++++++----------------
 1 file changed, 7 insertions(+), 16 deletions(-)

diff --git a/src/components/Step.js b/src/components/Step.js
index 206f2fda4..6eb3ce2f4 100644
--- a/src/components/Step.js
+++ b/src/components/Step.js
@@ -1,26 +1,17 @@
 import React from 'react';
 import Proptypes from 'prop-types';
-import cx from 'classnames';
 import SideBySide from './SideBySide';
 
 import styles from './Step.module.scss';
 
-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.stepDetails}>
-        <SideBySide type="pre">{children}</SideBySide>
-      </div>
+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>
     </div>
-  );
-};
+  </div>
+);
 
 Step.propTypes = {
   children: Proptypes.node.isRequired,