Fix props

Author: itsamoreh

components/atoms/Code/Code.js

@@ -1,19 +1,18 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import styles from './Code.module.css'
 import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter'
 import {tomorrow} from 'react-syntax-highlighter/dist/cjs/styles/prism'
+import styles from './Code.module.css'
 
 /**
  * Render the Code component.
  *
  * @author WebDevStudios
- * @param {object}      props           The component attributes as props.
- * @param {string}      props.className Optional classname.
- * @param props.id
- * @param props.content
- * @param {boolean}     props.fullWidth Is this a fullwidth block.
- * @return {Element} The Code component.
+ * @param {object} props           The component attributes as props.
+ * @param {string} props.className Optional classname.
+ * @param {string} props.id        The optional ID.
+ * @param {string} props.content   The content for inside the code block.
+ * @return {Element}               The Code component.
  */
 export default function Code({id, className, content}) {
   // Use the className to pass the langauge.

components/atoms/Image/Image.js

@@ -1,26 +1,27 @@
+import RichText from '@/components/atoms/RichText'
+import cn from 'classnames'
 import Link from 'next/link'
 import PropTypes from 'prop-types'
 import React from 'react'
-import RichText from '@/components/atoms/RichText'
 import styles from './Image.module.css'
-import cn from 'classnames'
 
 /**
  * Render the Image component.
  *
  * @author WebDevStudios
- * @param {string} anchor     The anchor/id of the block.
- * @param {string} alt        The image alt text.
- * @param {string} caption    The image caption.
- * @param {string} className  The image class.
- * @param {string} id         The image ID.
- * @param {string} href       The URL of the link.
- * @param {string} linkTarget Target for the link.
- * @param {string} linkClass  Class for the link.
- * @param {string} rel        The rel attribute for the link.
- * @param {string} sizeSlug   The WP image size.
- * @param {string} url        The full URL path of the image.
- * @return {Element} The Image component.
+ * @param {object} props            The component properties.
+ * @param {string} props.anchor     The anchor/id of the block.
+ * @param {string} props.alt        The image alt text.
+ * @param {string} props.caption    The image caption.
+ * @param {string} props.className  The image class.
+ * @param {string} props.id         The image ID.
+ * @param {string} props.href       The URL of the link.
+ * @param {string} props.linkTarget Target for the link.
+ * @param {string} props.linkClass  Class for the link.
+ * @param {string} props.rel        The rel attribute for the link.
+ * @param {string} props.sizeSlug   The WP image size.
+ * @param {string} props.url        The full URL path of the image.
+ * @return {Element}                The Image component.
  */
 export default function Image({
   alt,

components/atoms/PullQuote/PullQuote.js

@@ -7,11 +7,12 @@ import styles from './PullQuote.module.css'
  * PullQuote Block
  *
  * @author WebDevStudios
- * @param {string} value     The pull quote content of the block.
- * @param {string} citation  The optional author citation.
- * @param {string} id        Optional anchor/id.
- * @param {string} className Optional classnames.
- * @return {Element} The PullQuote component.
+ * @param {object} props           The component properties.
+ * @param {string} props.value     The pull quote content of the block.
+ * @param {string} props.citation  The optional author citation.
+ * @param {string} props.id        Optional anchor/id.
+ * @param {string} props.className Optional classnames.
+ * @return {Element}               The PullQuote component.
  */
 export default function PullQuote({value, citation, id, className}) {
   return (

components/atoms/Quote/Quote.js

@@ -9,11 +9,12 @@ import styles from './Quote.module.css'
  * The core Quote block from Gutenberg.
  *
  * @author WebDevStudios
- * @param {string} value     The quote content of the block.
- * @param {string} citation  The optional author citation.
- * @param {string} id        Optional anchor/id.
- * @param {string} className Optional classnames.
- * @return {Element} The Quote component.
+ * @param {object} props           The component properties.
+ * @param {string} props.value     The quote content of the block.
+ * @param {string} props.citation  The optional author citation.
+ * @param {string} props.id        Optional anchor/id.
+ * @param {string} props.className Optional classnames.
+ * @return {Element}               The Quote component.
  */
 export default function Quote({value, citation, id, className}) {
   return (

components/atoms/Separator/Separator.js

@@ -8,9 +8,10 @@ import styles from './Separator.module.css'
  * Render the Separator component.
  *
  * @author WebDevStudios
- * @param {string}  className Optional classname.
- * @param {boolean} fullWidth Is this a fullwidth block.
- * @return {Element} The Separator component.
+ * @param {object}  props           The component properties.
+ * @param {string}  props.className Optional classname.
+ * @param {boolean} props.fullWidth Is this a fullwidth block.
+ * @return {Element}                The Separator component.
  */
 export default function Separator({className, fullWidth}) {
   return (

components/atoms/Spacer/Spacer.js

@@ -5,9 +5,10 @@ import React from 'react'
  * Render the Spacer component.
  *
  * @author WebDevStudios
- * @param {string} anchor Optional anchor/id.
- * @param {number} height The height of the spacer.
- * @return {Element} The Spacer component.
+ * @param {object} props        The component properties.
+ * @param {string} props.anchor Optional anchor/id.
+ * @param {number} props.height The height of the spacer.
+ * @return {Element}            The Spacer component.
  */
 export default function Spacer({height, anchor}) {
   const rootEmVal = 16

components/atoms/Table/Table.js

@@ -7,14 +7,15 @@ import styles from './Table.module.css'
  * Table Block
  *
  * @author WebDevStudios
- * @param {string} id        Optional anchor/id.
- * @param {string} head      The optional table head array.
- * @param {string} body      The table body array.
- * @param {string} body      The table body array.
- * @param {string} foot      The optional table foorter array.
- * @param {string} caption   Optional table caption.
- * @param {string} className Optional classnames.
- * @return {Element} The Table component.
+ * @param {object} props           The component properties.
+ * @param {string} props.id        Optional anchor/id.
+ * @param {string} props.head      The optional table head array.
+ * @param {string} props.body      The table body array.
+ * @param {string} props.body      The table body array.
+ * @param {string} props.foot      The optional table foorter array.
+ * @param {string} props.caption   Optional table caption.
+ * @param {string} props.className Optional classnames.
+ * @return {Element}               The Table component.
  */
 export default function Table({id, head, body, foot, caption, className}) {
   return (

components/molecules/ButtonGroup/ButtonGroup.js

@@ -9,11 +9,12 @@ import styles from './ButtonGroup.module.css'
  * Render the ButtonGroup component.
  *
  * @author WebDevStudios
- * @param {string}  id                   The id of the block.
- * @param {string}  orientation          The orientation of buttons.
- * @param {string}  contentJustification The justification of the buttons.
- * @param {element} children             The children props to render.
- * @return {Element}                     The ButtonGroup component.
+ * @param {object}  props                      The component properties.
+ * @param {string}  props.id                   The id of the block.
+ * @param {string}  props.orientation          The orientation of buttons.
+ * @param {string}  props.contentJustification The justification of the buttons.
+ * @param {element} props.children             The children props to render.
+ * @return {Element}                           The ButtonGroup component.
  */
 export default function ButtonGroup({
   id,

components/molecules/ImageGallery/ImageGallery.js

@@ -9,12 +9,13 @@ import styles from './ImageGallery.module.css'
  * Render the ImageGallery component.
  *
  * @author WebDevStudios
- * @param {string} anchor    The anchor/id of the block.
- * @param {string} caption   The image caption.
- * @param {string} className The image class.
- * @param {number} columns   The amount of columns.
- * @param {Array}  images    The array of images.
- * @return {Element} The ImageGallery component.
+ * @param {object} props           The component properties.
+ * @param {string} props.anchor    The anchor/id of the block.
+ * @param {string} props.caption   The image caption.
+ * @param {string} props.className The image class.
+ * @param {number} props.columns   The amount of columns.
+ * @param {Array}  props.images    The array of images.
+ * @return {Element}               The ImageGallery component.
  */
 export default function ImageGallery({
   anchor,

components/organisms/Header/Header.js

@@ -9,7 +9,10 @@ import styles from './Header.module.css'
 // TODO: Create mobile menu.
 
 /**
- * Render Header component.
+ * Render the ImageGallery component.
+ *
+ * @author WebDevStudios
+ * @return {Element} The Header component.
  */
 export default function Header() {
   const {menus} = useContext(MenuContext)