Merge pull request #98 from newrelic/zstickles/intro-component-fixes

Intro & Step Component Bug Fixes

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;

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;
 }

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, styles[dir])}>
+      <div>{rest}</div>
+      {side && <div>{side}</div>}
+    </div>
+  );
+};
+
+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;

src/components/SideBySide.module.scss

@@ -0,0 +1,32 @@
+.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;
+    }
+  }
+
+  @media (max-width: 760px) {
+    display: block;
+
+    &.left > div:nth-child(2),
+    &.right > div:nth-child(2) {
+      margin: 0;
+    }
+  }
+}

src/components/Step.js

@@ -1,31 +1,17 @@
 import React from 'react';
-import styles from './Step.module.scss';
 import Proptypes from 'prop-types';
-import cx from 'classnames';
+import SideBySide from './SideBySide';
 
-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
-  );
+import styles from './Step.module.scss';
 
-  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>
+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,

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;
-}