Merge pull request #135 from newrelic/zstickles/intro-optional-prop

Add ability to have CodeSnippets in Intros

src/components/Intro.js

@@ -4,14 +4,26 @@ import PropTypes from 'prop-types';
 
 import styles from './Intro.module.scss';
 
-const Intro = ({ children }) => (
-  <SideBySide type="Video" className={styles.container}>
+const Intro = ({ children, type }) => (
+  <SideBySide type={type} className={styles.container}>
     {children}
   </SideBySide>
 );
 
+// Only video or code is supported at the moment
+const SUPPORTED_TYPES = PropTypes.oneOf(['Video', 'pre']);
+
 Intro.propTypes = {
   children: PropTypes.node.isRequired,
+  // either a single supported type, or an array of supported types
+  type: PropTypes.oneOfType([
+    SUPPORTED_TYPES,
+    PropTypes.arrayOf(SUPPORTED_TYPES),
+  ]),
+};
+
+Intro.defaultProps = {
+  type: 'Video',
 };
 
 export default Intro;

src/components/SideBySide.js

@@ -7,13 +7,16 @@ import splitWhen from '../utils/splitWhen';
 import { isMdxType } from '../utils/mdx';
 
 const SideBySide = ({ className, children, type }) => {
+  const types = Array.isArray(type) ? type : [type];
   const childObjects = Children.toArray(children);
   const rendersRightColumn = childObjects.some((child) =>
-    isMdxType(child, type)
+    types.some((type) => isMdxType(child, type))
   );
   const sections = splitUsing(childObjects, (child) =>
-    isMdxType(child, type)
-  ).map((section) => splitWhen(section, (child) => isMdxType(child, type)));
+    types.some((type) => isMdxType(child, type))
+  ).map((section) =>
+    splitWhen(section, (child) => types.some((type) => isMdxType(child, type)))
+  );
 
   return (
     <div className={cx(className, styles.container)}>
@@ -31,7 +34,10 @@ const SideBySide = ({ className, children, type }) => {
 
 SideBySide.propTypes = {
   children: PropTypes.node.isRequired,
-  type: PropTypes.string.isRequired,
+  type: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string),
+  ]).isRequired,
   className: PropTypes.string,
 };
 

src/components/Video.js

@@ -3,27 +3,26 @@ import PropTypes from 'prop-types';
 
 import styles from './Video.module.scss';
 
-const Video = ({ id, type, title }) => {
-  const src = {
-    youtube: `//www.youtube.com/embed/${id}?modestbranding=1`,
-    wistia: `//fast.wistia.net/embed/iframe/${id}`,
-  };
-  return (
-    <div className={styles.video}>
-      <iframe
-        src={src[type]}
-        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-        title={title}
-        frameBorder="0"
-        allowFullScreen
-      />
-    </div>
-  );
+const videoPlatforms = {
+  youtube: (id) => `//www.youtube.com/embed/${id}?modestbranding=1`,
+  wistia: (id) => `//fast.wistia.net/embed/iframe/${id}`,
 };
 
+const Video = ({ id, type, title }) => (
+  <div className={styles.video}>
+    <iframe
+      src={videoPlatforms[type](id)}
+      allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+      title={title}
+      frameBorder="0"
+      allowFullScreen
+    />
+  </div>
+);
+
 Video.propTypes = {
   id: PropTypes.string.isRequired,
-  type: PropTypes.string.isRequired,
+  type: PropTypes.oneOf(Object.keys(videoPlatforms)).isRequired,
   title: PropTypes.string,
 };