Allow arbitrary children in MediaText

Author: itsamoreh

components/organisms/MediaText/MediaText.js

@@ -2,29 +2,39 @@ import Button from '@/components/atoms/Button'
 import Container from '@/components/atoms/Container'
 import cn from 'classnames'
 import PropTypes from 'prop-types'
-import React from 'react'
+import React, {useEffect} from 'react'
 import styles from './MediaText.module.css'
 
 /**
  * Render the MediaText component.
  *
  * @param {object}  props           MediaText component props.
  * @param {string}  props.body      The body text.
+ * @param {element} props.children  The child elements.
  * @param {string}  props.className The className.
  * @param {object}  props.cta       The cta object with text and url strings.
  * @param {object}  props.image     The image object with url and alt text.
  * @param {boolean} props.mediaLeft Whether to show media on the left of the text.
  * @param {string}  props.title     The title.
- * @return {Element}                The MediaText component.
+ * @return {Element} The MediaText component.
  */
 export default function MediaText({
   body,
+  children,
   className,
   cta,
   image,
   mediaLeft,
   title
 }) {
+  useEffect(() => {
+    if ((children && title) || (children && body) || (children && cta)) {
+      console.warn(
+        'The title, body and cta props are ignored when using children.'
+      )
+    }
+  })
+
   return (
     <Container>
       <section
@@ -35,17 +45,23 @@ export default function MediaText({
         )}
       >
         <div className={styles.text}>
-          <h1 className={styles.title}>{title}</h1>
-          {body && <p className={styles.body}>{body}</p>}
-          {cta && (
-            <Button
-              className={styles.button}
-              url={cta.url ? cta.url : null}
-              text={cta.text ? cta.text : null}
-              icon={cta.icon ? cta.icon : null}
-              type="primary"
-              size="md"
-            />
+          {children ? (
+            children
+          ) : (
+            <>
+              {title && <h1 className={styles.title}>{title}</h1>}
+              {body && <p className={styles.body}>{body}</p>}
+              {cta && (
+                <Button
+                  className={styles.button}
+                  url={cta.url ? cta.url : null}
+                  text={cta.text ? cta.text : null}
+                  icon={cta.icon ? cta.icon : null}
+                  type="primary"
+                  size="md"
+                />
+              )}
+            </>
           )}
         </div>
         <div className={styles.media}>
@@ -63,6 +79,7 @@ export default function MediaText({
 MediaText.propTypes = {
   body: PropTypes.string,
   className: PropTypes.string,
+  children: PropTypes.element,
   cta: PropTypes.shape({
     text: PropTypes.string,
     url: PropTypes.string,

components/organisms/MediaText/MediaText.stories.mdx

@@ -41,3 +41,25 @@ Media will display on the right on large screens by default. Use the `mediaLeft`
     />
   </Story>
 </Canvas>
+
+## Children
+
+You can display children as an element using the `children` prop. If used, the `title`, `body`, and `cta` will not display.
+
+<Canvas>
+  <Story name="Children">
+    <MediaText
+      children={
+        <div>
+          <p>Hi I'm a child element!</p>
+        </div>
+      }
+      image={{
+        url:
+          'https://images.unsplash.com/photo-1610991149688-c1321006bcc1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1110&q=60',
+        alt: 'Some alt text'
+      }}
+      mediaLeft
+    />
+  </Story>
+</Canvas>