Merge branch 'main' into dependabot/npm_and_yarn/storybook/addon-link…

…s-6.2.9
WebDevStudios · Apr 28, 2021 · 7dca6c3 · 7dca6c3
2 parents 5e5b0b4 + 754ab0b
commit 7dca6c3
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 47 deletions.
diff --git a/components/atoms/Image/Image.js b/components/atoms/Image/Image.js
@@ -8,19 +8,20 @@ import styles from './Image.module.css'
  * Render the Display Image component.
  *
  * @author WebDevStudios
- * @param {object} props            The component properties.
- * @param {string} props.alt        The image alt attribute.
- * @param {string} props.anchor     The image anchor.
- * @param {string} props.caption    The image caption.
- * @param {string} props.className  The image class name.
- * @param {string} props.href       A link wrapping the image.
- * @param {number} props.id         The image id.
- * @param {object} props.imageMeta  The image meta.
- * @param {string} props.linkClass  The image link class name.
- * @param {string} props.linkTarget The image link target.
- * @param {string} props.rel        The relationship of the linked URL.
- * @param {string} props.url        The image src attribute.
- * @return {Element}                The DisplayImage component.
+ * @param {object} props               The component properties.
+ * @param {string} props.alt           The image alt attribute.
+ * @param {string} props.anchor        The image anchor.
+ * @param {string} props.caption       The image caption.
+ * @param {string} props.className     The image class name.
+ * @param {string} props.href          A link wrapping the image.
+ * @param {number} props.id            The image id.
+ * @param {object} props.imageMeta     The image meta.
+ * @param {string} props.linkClass     The image link class name.
+ * @param {string} props.linkTarget    The image link target.
+ * @param {bool}   props.nextImageFill Whether next/image should be set to fill or have height/width defined.
+ * @param {string} props.rel           The relationship of the linked URL.
+ * @param {string} props.url           The image src attribute.
+ * @return {Element}                   The DisplayImage component.
  */
 export default function DisplayImage(props) {
   // Set the image size.
@@ -44,7 +45,7 @@ export default function DisplayImage(props) {
   let domains = process.env.NEXT_PUBLIC_IMAGE_DOMAINS
 
   // Split domains string into individual domains.
-  domains = domains.split(', ')
+  domains = !domains || !domains.length ? [] : domains.split(', ')
 
   /**
    * Next.js <Image /> component.
@@ -53,15 +54,21 @@ export default function DisplayImage(props) {
    * @return {Element} The next/image component.
    */
   function NextImage() {
-    return (
-      <Image
-        alt={props?.alt}
-        height={imageSize?.height}
-        id={props?.anchor}
-        src={source}
-        width={imageSize?.width}
-      />
-    )
+    const imageProps = {
+      alt: props?.alt,
+      id: props?.anchor,
+      src: source
+    }
+
+    // Add extra props depending on whether image needs to be set to "fill".
+    if (props?.nextImageFill) {
+      imageProps.layout = 'fill'
+    } else {
+      imageProps.height = imageSize?.height
+      imageProps.width = imageSize?.width
+    }
+
+    return <Image {...imageProps} />
   }
 
   /**
@@ -168,9 +175,18 @@ DisplayImage.propTypes = {
   height: PropTypes.string,
   href: PropTypes.string,
   id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  imageMeta: PropTypes.object,
+  imageMeta: PropTypes.shape({
+    altText: PropTypes.string,
+    mediaItemUrl: PropTypes.string,
+    mediaDetails: PropTypes.shape({
+      height: PropTypes.number,
+      sizes: PropTypes.array,
+      width: PropTypes.number
+    })
+  }),
   linkClass: PropTypes.string,
   linkTarget: PropTypes.string,
+  nextImageFill: PropTypes.bool,
   rel: PropTypes.string,
   url: PropTypes.string,
   width: PropTypes.string

diff --git a/components/blocks/ACF/AcfBlockMediaText/AcfBlockMediaText.js b/components/blocks/ACF/AcfBlockMediaText/AcfBlockMediaText.js
@@ -10,12 +10,6 @@ import PropTypes from 'prop-types'
  * @return {Element}                The component.
  */
 export default function AcfBlockMediaText({attributes}) {
-  // TODO: Query the DB for the image ID and replace the attributes.data with the correct information.
-  attributes.data = {
-    ...attributes.data,
-    image: {}
-  }
-
   return (
     <>
       {attributes ? (

diff --git a/components/organisms/AcfMediaText/AcfMediaText.js b/components/organisms/AcfMediaText/AcfMediaText.js
@@ -1,5 +1,6 @@
 import Button from '@/components/atoms/Button'
 import Container from '@/components/atoms/Container'
+import DisplayImage from '@/components/atoms/Image'
 import cn from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
@@ -13,7 +14,8 @@ import styles from './AcfMediaText.module.css'
  * @param {string}  props.className The className.
  * @param {object}  props.ctaText   The cta text.
  * @param {object}  props.ctaUrl    The cta url.
- * @param {object}  props.image     The image object with url and alt text.
+ * @param {object}  props.image     The image ID.
+ * @param {object}  props.imageMeta The image object with url and details.
  * @param {boolean} props.mediaLeft Whether to show media on the left of the text.
  * @param {string}  props.title     The title.
  * @return {Element}                The AcfMediaText component.
@@ -24,6 +26,7 @@ export default function AcfMediaText({
   ctaText,
   ctaUrl,
   image,
+  imageMeta,
   mediaLeft,
   title
 }) {
@@ -51,13 +54,17 @@ export default function AcfMediaText({
             )}
           </>
         </div>
-        <div className={styles.media}>
-          {image && image.url && (
-            <div className={styles.imageWrap}>
-              <img src={image.url} alt={image.alt} />
-            </div>
-          )}
-        </div>
+        {!!image && (
+          <div className={styles.media}>
+            <DisplayImage
+              className={styles.imageWrap}
+              id={image}
+              alt={imageMeta?.altText}
+              imageMeta={imageMeta}
+              nextImageFill={true}
+            />
+          </div>
+        )}
       </section>
     </Container>
   )
@@ -68,9 +75,15 @@ AcfMediaText.propTypes = {
   className: PropTypes.string,
   ctaText: PropTypes.string,
   ctaUrl: PropTypes.string,
-  image: PropTypes.shape({
-    url: PropTypes.string,
-    alt: PropTypes.string
+  image: PropTypes.number,
+  imageMeta: PropTypes.shape({
+    altText: PropTypes.string,
+    mediaItemUrl: PropTypes.string,
+    mediaDetails: PropTypes.shape({
+      height: PropTypes.number,
+      sizes: PropTypes.array,
+      width: PropTypes.number
+    })
   }),
   mediaLeft: PropTypes.bool,
   title: PropTypes.string

diff --git a/components/organisms/AcfMediaText/AcfMediaText.stories.mdx b/components/organisms/AcfMediaText/AcfMediaText.stories.mdx
@@ -12,10 +12,15 @@ Use this to display media and text in a 50/50 layout.
     <AcfMediaText
       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:
+      image={123}
+      imageMeta={{
+        mediaItemUrl:
           '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'
+        altText: 'Some alt text',
+        mediaDetails: {
+          height: 741,
+          width: 1110
+        }
       }}
       cta={{icon: 'arrowRight', text: 'Take a look'}}
     />
@@ -31,10 +36,15 @@ Media will display on the right on large screens by default. Use the `mediaLeft`
     <AcfMediaText
       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:
+      image={123}
+      imageMeta={{
+        mediaItemUrl:
           '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'
+        altText: 'Some alt text',
+        mediaDetails: {
+          height: 741,
+          width: 1110
+        }
       }}
       cta={{icon: 'arrowRight', text: 'Take a look'}}
       mediaLeft

diff --git a/functions/wordpress/blocks/formatBlockData.js b/functions/wordpress/blocks/formatBlockData.js
@@ -16,11 +16,20 @@ export default async function formatBlockData(blocks) {
   return await Promise.all(
     blocks.map(async (block) => {
       const {name, attributes, innerBlocks} = block
+
       switch (name) {
+        case 'acf/acf-media-text':
+          // Retrieve additional image meta.
+          attributes.data.imageMeta = await getMediaByID(
+            attributes?.data?.image
+          )
+          break
+
         case 'core/image':
           // Retrieve additional image meta.
           attributes.imageMeta = await getMediaByID(attributes?.id)
           break
+
         case 'gravityforms/form':
           // Retrieve form data.
           attributes.formData = await getGfFormById(attributes?.formId)

diff --git a/lib/wordpress/media/queryMediaAttributes.js b/lib/wordpress/media/queryMediaAttributes.js
@@ -3,6 +3,7 @@ import {gql} from '@apollo/client'
 const queryMediaAttributes = gql`
   query GET_MEDIA_ATTS($id: ID!) {
     mediaItem(id: $id, idType: DATABASE_ID) {
+      altText
       mediaItemUrl
       mediaDetails {
         height