Merge pull request #507 from WebDevStudios/feature/410-media-text-block

Feature/410 media text block
WebDevStudios · Jun 10, 2021 · 63b8c6c · 63b8c6c · vercel · Jun 10, 2021
2 parents 449dd52 + 65512f9
commit 63b8c6c
Show file tree

Hide file tree

Showing 3 changed files with 186 additions and 35 deletions.
diff --git a/components/blocks/Gutenberg/BlockMediaText/BlockMediaText.js b/components/blocks/Gutenberg/BlockMediaText/BlockMediaText.js
@@ -9,19 +9,79 @@ import PropTypes from 'prop-types'
  *
  * @author WebDevStudios
  * @param  {object}  props             The component properties.
- * @param  {object}  props.media       Media props.
  * @param  {Array}   props.innerBlocks The array of inner blocks to display.
+ * @param  {object}  props.media       Media props.
  * @return {Element}                   The Code component.
  */
-export default function BlockMediaText({media, innerBlocks}) {
+export default function BlockMediaText({innerBlocks, media}) {
+  /* eslint-disable no-unused-vars */
+  const {
+    anchor,
+    backgroundColorHex,
+    caption,
+    className,
+    focalPoint,
+    gradientHex,
+    href,
+    imageFill,
+    isStackedOnMobile,
+    linkClass,
+    linkTarget,
+    mediaAlt,
+    mediaId,
+    mediaPosition,
+    mediaType,
+    mediaWidth,
+    mediaUrl,
+    rel,
+    sizeSlug,
+    style,
+    textColorHex,
+    verticalAlignment
+  } = media
+  /* eslint-enable no-unused-vars */
+
+  // Determine background and text colors, using stylelint-accepted const names.
+  const backgroundcolor =
+    backgroundColorHex || style?.color?.background || 'inherit'
+  const textcolor = textColorHex || style?.color?.text || 'inherit'
+  const background = gradientHex || style?.color?.gradient || 'inherit'
+  const gridtemplatecolumns =
+    mediaPosition === 'left' ? `${mediaWidth}% 1fr` : `1fr ${mediaWidth}%`
+
+  // Create style object for button.
+  const mediaTextStyle = {
+    background: background,
+    backgroundColor: backgroundcolor,
+    color: textcolor,
+    gridTemplateColumns: gridtemplatecolumns
+  }
+
+  const newFocalPoint = {}
+
+  // Convert focal point values to percent.
+  if (imageFill) {
+    const x = parseFloat(focalPoint?.x || '.5') ?? 0.5
+    const y = parseFloat(focalPoint?.y || '.5') ?? 0.5
+
+    newFocalPoint.x = `${x * 100}%`
+    newFocalPoint.y = `${y * 100}%`
+  }
+
   return (
     <>
       {!!media && innerBlocks?.length && (
         <MediaText
-          id={media?.anchor}
-          className={media?.className}
-          mediaLeft={media?.mediaPosition === 'left' ? true : false}
-          image={{url: media?.mediaUrl, alt: media?.mediaAlt}}
+          className={className}
+          focalPoint={newFocalPoint}
+          id={anchor}
+          image={{url: mediaUrl, alt: mediaAlt}}
+          imageFill={imageFill}
+          mediaLeft={mediaPosition === 'left' ? true : false}
+          mediaWidth={mediaWidth}
+          style={mediaTextStyle}
+          stackOnMobile={isStackedOnMobile}
+          verticalAlignment={verticalAlignment}
         >
           <Blocks blocks={innerBlocks} />
         </MediaText>
@@ -31,27 +91,39 @@ export default function BlockMediaText({media, innerBlocks}) {
 }
 
 BlockMediaText.propTypes = {
+  innerBlocks: PropTypes.arrayOf(
+    PropTypes.shape({
+      attributes: PropTypes.object,
+      name: PropTypes.string
+    })
+  ),
   media: PropTypes.shape({
     anchor: PropTypes.string,
+    backgroundColorHex: PropTypes.string,
     caption: PropTypes.string,
     className: PropTypes.string,
+    focalPoint: PropTypes.shape({
+      x: PropTypes.string,
+      y: PropTypes.string
+    }),
+    gradientHex: PropTypes.string,
     href: PropTypes.string,
-    linkTarget: PropTypes.string,
+    imageFill: PropTypes.bool,
+    isStackedOnMobile: PropTypes.bool,
     linkClass: PropTypes.string,
-    rel: PropTypes.string,
-    sizeSlug: PropTypes.string,
+    linkTarget: PropTypes.string,
     mediaAlt: PropTypes.string,
     mediaId: PropTypes.number,
+    mediaPosition: PropTypes.string,
     mediaType: PropTypes.string,
+    mediaWidth: PropTypes.number,
     mediaUrl: PropTypes.string,
-    mediaPosition: PropTypes.string
-  }),
-  innerBlocks: PropTypes.arrayOf(
-    PropTypes.shape({
-      name: PropTypes.string,
-      attributes: PropTypes.object
-    })
-  )
+    rel: PropTypes.string,
+    sizeSlug: PropTypes.string,
+    style: PropTypes.object,
+    textColorHex: PropTypes.string,
+    verticalAlignment: PropTypes.string
+  })
 }
 BlockMediaText.defaultProps = {
   media: PropTypes.shape({

diff --git a/components/organisms/MediaText/MediaText.js b/components/organisms/MediaText/MediaText.js
@@ -8,26 +8,36 @@ 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  {string}  props.id        Optional element ID.
- * @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.
+ * @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.focalPoint        The focal point coordinates for the image fill setting.
+ * @param  {string}  props.id                Optional element ID.
+ * @param  {object}  props.image             The image object with url and alt text.
+ * @param  {boolean} props.imageFill         Whether to crop image to fill.
+ * @param  {boolean} props.mediaLeft         Whether to show media on the left of the text.
+ * @param  {boolean} props.stackOnMobile     Whether to stack media and text on mobile.
+ * @param  {object}  props.style             Custom media text styles.
+ * @param  {string}  props.title             The title.
+ * @param  {string}  props.verticalAlignment Vertical alignment of text.
+ * @return {Element}                         The MediaText component.
  */
 export default function MediaText({
   body,
   children,
   className,
   cta,
+  focalPoint,
   id,
   image,
+  imageFill,
   mediaLeft,
-  title
+  stackOnMobile,
+  style,
+  title,
+  verticalAlignment
 }) {
   useEffect(() => {
     if ((children && title) || (children && body) || (children && cta)) {
@@ -37,14 +47,26 @@ export default function MediaText({
     }
   })
 
+  const imageFillStyle = !imageFill
+    ? null
+    : {
+        backgroundImage: `url(${image?.url || ''})`,
+        backgroundPosition: `${focalPoint.x} ${focalPoint.y}`
+      }
+
   return (
     <section
       id={id}
       className={cn(
         styles.mediaText,
         mediaLeft ? styles.mediaLeft : null,
-        className
+        className,
+        !stackOnMobile ? styles.noStack : null,
+        verticalAlignment === 'top' ? styles.alignTop : null,
+        verticalAlignment === 'bottom' ? styles.alignBottom : null,
+        imageFill && image?.url ? styles.imageFill : null
       )}
+      style={style}
     >
       <div className={styles.text}>
         {children ? (
@@ -66,7 +88,7 @@ export default function MediaText({
           </>
         )}
       </div>
-      <div className={styles.media}>
+      <div className={styles.media} style={imageFillStyle}>
         {image && image.url && (
           <DisplayImage
             className={styles.imageWrap}
@@ -89,13 +111,25 @@ MediaText.propTypes = {
     url: PropTypes.string,
     icon: PropTypes.string
   }),
+  focalPoint: PropTypes.shape({
+    x: PropTypes.string,
+    y: PropTypes.string
+  }),
   id: PropTypes.string,
   image: PropTypes.shape({
     url: PropTypes.string,
     alt: PropTypes.string
   }),
+  imageFill: PropTypes.bool,
   mediaLeft: PropTypes.bool,
-  title: PropTypes.string
+  stackOnMobile: PropTypes.bool,
+  style: PropTypes.shape({
+    background: PropTypes.string,
+    backgroundColor: PropTypes.string,
+    color: PropTypes.string
+  }),
+  title: PropTypes.string,
+  verticalAlignment: PropTypes.string
 }
 
 MediaText.defaultProps = {

diff --git a/components/organisms/MediaText/MediaText.module.css b/components/organisms/MediaText/MediaText.module.css
@@ -1,13 +1,21 @@
 .mediaText {
-  @apply md:grid md:grid-cols-12 md:gap-16 mb-12;
+  @apply md:grid md:grid-cols-12 mb-12 rounded;
+
+  &.noStack {
+    @apply grid grid-cols-12;
+  }
 
   & .text,
   & .media {
     @apply col-span-6 flex flex-col items-start justify-center;
+
+    grid-row: 1;
   }
 
   & .text {
-    @apply items-start;
+    @apply items-start p-8;
+
+    grid-column: 1;
 
     & .title {
       @apply mb-8;
@@ -19,8 +27,10 @@
   }
 
   & .media {
+    grid-column: 2;
+
     & .imageWrap {
-      @apply relative h-0 w-full rounded bg-opacity-20;
+      @apply relative h-0 w-full rounded bg-opacity-20 mb-0;
 
       padding-top: 67.58%; /* Aspect ratio box - https://css-tricks.com/aspect-ratio-boxes */
     }
@@ -32,15 +42,50 @@
 
   &.mediaLeft {
     & .media {
-      grid-row-start: 1;
+      grid-column: 1;
     }
 
     & .text {
       @apply items-end;
 
+      grid-column: 2;
+
       & .body {
         @apply text-right;
       }
     }
   }
+
+  &.alignTop {
+    & .text,
+    & .media {
+      @apply justify-start;
+    }
+  }
+
+  &.alignBottom {
+    & .text,
+    & .media {
+      @apply justify-end;
+    }
+  }
+
+  &.imageFill {
+    & .media {
+      @apply h-full max-w-full rounded;
+
+      min-height: 15.5rem;
+
+      & .imageWrap {
+        @apply pt-0;
+      }
+
+      & img {
+        clip: rect(0, 0, 0, 0);
+        height: 1px;
+        margin: -1px;
+        width: 1px;
+      }
+    }
+  }
 }