Add mediaLeft option

Author: itsamoreh

components/organisms/MediaText/MediaText.js

@@ -8,26 +8,42 @@ import styles from './MediaText.module.css'
 /**
  * Render the MediaText component.
  *
- * @param {object} props           MediaText component props.
- * @param {string} props.body      The body text.
- * @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 {string} props.title     The title.
- * @return {Element}               The MediaText component.
+ * @param {object}  props           MediaText component props.
+ * @param {string}  props.body      The body text.
+ * @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.
  */
-export default function MediaText({body, className, cta, image, title}) {
+export default function MediaText({
+  body,
+  className,
+  cta,
+  image,
+  mediaLeft,
+  title
+}) {
   return (
     <Container>
-      <section className={cn(styles.mediaText, className)}>
-        <div className={styles.content}>
+      <section
+        className={cn(
+          styles.mediaText,
+          mediaLeft ? styles.mediaLeft : null,
+          className
+        )}
+      >
+        <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}
+              iconPosition="right"
               type="primary"
               size="md"
             />
@@ -50,26 +66,17 @@ MediaText.propTypes = {
   className: PropTypes.string,
   cta: PropTypes.shape({
     text: PropTypes.string,
-    url: PropTypes.string
+    url: PropTypes.string,
+    icon: PropTypes.string
   }),
   image: PropTypes.shape({
     url: PropTypes.string,
     alt: PropTypes.string
   }),
+  mediaLeft: PropTypes.bool,
   title: PropTypes.string
 }
 
 MediaText.defaultProps = {
-  title: 'Here is a H2 headline in a bold font.',
-  body:
-    'Let me tell you a little story about how I went sledging in the Australian Alps, and got lost in the process. Oh what a riot that was, and I nearly lost...',
-  cta: {
-    text: 'Learn More',
-    url: '#'
-  },
-  image: {
-    url:
-      'https://images.unsplash.com/photo-1611458181887-e4a588329222?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60',
-    alt: 'Bridge over river'
-  }
+  mediaLeft: false
 }

components/organisms/MediaText/MediaText.module.css

@@ -1,12 +1,12 @@
 .mediaText {
   @apply desktop:grid desktop:grid-cols-12 desktop:gap-16;
 
-  & .content,
+  & .text,
   & .media {
     @apply col-span-6 p-16 flex flex-col items-start justify-center;
   }
 
-  & .content {
+  & .text {
     & .title {
       @apply mb-8 text-h2 font-secondary;
     }
@@ -27,4 +27,18 @@
       @apply absolute top-0 left-0 w-full h-full object-cover rounded-largest;
     }
   }
+
+  &.mediaLeft {
+    & .media {
+      grid-row-start: 1;
+    }
+
+    & .text {
+      @apply items-end;
+
+      & .body {
+        @apply text-right;
+      }
+    }
+  }
 }

components/organisms/MediaText/MediaText.stories.mdx

@@ -5,16 +5,39 @@ import MediaText from './'
 
 # Component
 
-Use this to display a large CTA, usually at the top of a page.
+Use this to display media and text in a 50/50 layout.
 
 <Canvas>
   <Story name="Component">
     <MediaText
-      subtitle="Check it out"
       title="New Designs"
       body="Our amazing new design is here! Get it while it's hot, it won't be hot for long... uh oh, already cooling."
-      backgroundImage="https://images.unsplash.com/photo-1610991149688-c1321006bcc1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1110&q=60"
+      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'
+      }}
       cta={{icon: 'arrowRight', text: 'Take a look'}}
     />
   </Story>
 </Canvas>
+
+## Media Left
+
+Media will display on the right on large screens by default. Use the `mediaLeft` prop to display the media on the left side.
+
+<Canvas>
+  <Story name="MediaLeft">
+    <MediaText
+      title="New Designs"
+      body="Our amazing new design is here! Get it while it's hot, it won't be hot for long... uh oh, already cooling."
+      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'
+      }}
+      cta={{icon: 'arrowRight', text: 'Take a look'}}
+      mediaLeft
+    />
+  </Story>
+</Canvas>