From ac627c2ae4b4c580388ba7102a25043c9c914b00 Mon Sep 17 00:00:00 2001 From: R A Van Epps Date: Thu, 19 Aug 2021 15:37:48 -0600 Subject: [PATCH 1/3] Fix proptypes --- components/atoms/Image/Image.js | 7 +++++-- components/atoms/Image/Image.stories.mdx | 15 +++++++-------- 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/components/atoms/Image/Image.js b/components/atoms/Image/Image.js index 229f6b429..24ca77a26 100644 --- a/components/atoms/Image/Image.js +++ b/components/atoms/Image/Image.js @@ -12,7 +12,9 @@ import styles from './Image.module.css' * @param {string} props.alt The image alt attribute. * @param {string} props.anchor The image anchor. * @param {string} props.caption The image caption. + * @param {any} props.children React children. * @param {string} props.className The image class name. + * @param {number} props.height The image height. * @param {string} props.href A link wrapping the image. * @param {number} props.id The image id. * @param {object} props.imageMeta The image meta. @@ -21,6 +23,7 @@ import styles from './Image.module.css' * @param {boolean} 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. + * @param {number} props.width The image width. * @return {Element} The DisplayImage component. */ export default function DisplayImage(props) { @@ -179,7 +182,7 @@ DisplayImage.propTypes = { caption: PropTypes.string, children: PropTypes.any, className: PropTypes.string, - height: PropTypes.string, + height: PropTypes.number, href: PropTypes.string, id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), imageMeta: PropTypes.shape({ @@ -196,5 +199,5 @@ DisplayImage.propTypes = { nextImageFill: PropTypes.bool, rel: PropTypes.string, url: PropTypes.string, - width: PropTypes.string + width: PropTypes.number } diff --git a/components/atoms/Image/Image.stories.mdx b/components/atoms/Image/Image.stories.mdx index 6c3583e10..ccb6fc051 100644 --- a/components/atoms/Image/Image.stories.mdx +++ b/components/atoms/Image/Image.stories.mdx @@ -12,9 +12,9 @@ Use this component to display a image. @@ -28,10 +28,10 @@ Add a link to the image using the `href` prop. @@ -48,10 +48,9 @@ export const Template = (args) => args={{ alt: 'A screenshot of the codebase.', caption: 'A screenshot of the codebase.', - height: '480', - url: - 'https://nextjs.wpengine.com/wp-content/uploads/2021/02/nextjs-wordpress-starter.jpg', - width: '640' + height: 480, + url: 'https://nextjs.wpengine.com/wp-content/uploads/2021/02/nextjs-wordpress-starter.jpg', + width: 640 }} > {Template.bind({})} From 21ddc29b141c2349111795aac997e9c29bc9d5a2 Mon Sep 17 00:00:00 2001 From: R A Van Epps Date: Thu, 19 Aug 2021 15:52:31 -0600 Subject: [PATCH 2/3] Flip img dimension order --- components/atoms/Image/Image.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/atoms/Image/Image.js b/components/atoms/Image/Image.js index 24ca77a26..aeaaafbeb 100644 --- a/components/atoms/Image/Image.js +++ b/components/atoms/Image/Image.js @@ -29,8 +29,8 @@ import styles from './Image.module.css' export default function DisplayImage(props) { // Set the image size. const imageSize = { - height: props?.imageMeta?.mediaDetails?.height ?? props?.height, - width: props?.imageMeta?.mediaDetails?.width ?? props?.width + height: props?.height ?? props?.imageMeta?.mediaDetails?.height, + width: props?.width ?? props?.imageMeta?.mediaDetails?.width } // Set the image src. From 26536c8691876052851c26ddaa8fc43d1786166b Mon Sep 17 00:00:00 2001 From: R A Van Epps Date: Thu, 19 Aug 2021 15:52:52 -0600 Subject: [PATCH 3/3] Specify image block attributes --- .../blocks/Gutenberg/BlockImage/BlockImage.js | 75 ++++++++++++++++++- 1 file changed, 71 insertions(+), 4 deletions(-) diff --git a/components/blocks/Gutenberg/BlockImage/BlockImage.js b/components/blocks/Gutenberg/BlockImage/BlockImage.js index 989f6fb71..5c656d12c 100644 --- a/components/blocks/Gutenberg/BlockImage/BlockImage.js +++ b/components/blocks/Gutenberg/BlockImage/BlockImage.js @@ -7,13 +7,80 @@ import PropTypes from 'prop-types' * The core Image block from Gutenberg. * * @author WebDevStudios - * @param {object} props The component props. - * @return {Element} The Block Image component. + * @param {object} props The component props. + * @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 {number} props.height The image height. + * @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. + * @param {number} props.width The image width. + * @return {Element} The Block Image component. */ export default function BlockImage(props) { - return + const { + alt, + anchor, + caption, + className, + height, + href, + id, + imageMeta, + linkClass, + linkTarget, + rel, + url, + width + } = props + + return ( + + ) } BlockImage.propTypes = { - props: PropTypes.object + props: PropTypes.shape({ + alt: PropTypes.string, + anchor: PropTypes.string, + caption: PropTypes.string, + className: PropTypes.string, + height: PropTypes.number, + href: PropTypes.string, + id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + 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, + rel: PropTypes.string, + url: PropTypes.string, + width: PropTypes.number + }) }