Merge branch 'staging' into feature/33-breadcrumbs

Author: ravewebdev

.eslintrc.js

@@ -33,7 +33,13 @@ module.exports = {
   rules: {
     'func-style': ['error', 'declaration'],
     'jsdoc/check-indentation': 'warn',
-    'jsdoc/check-line-alignment': ['warn', 'always'],
+    'jsdoc/check-line-alignment': [
+      'warn',
+      'always',
+      {
+        tags: ['author', 'param', 'see']
+      }
+    ],
     'jsdoc/require-param': [
       'warn',
       {

.gitignore

@@ -30,6 +30,7 @@ yarn-error.log*
 .env.development.local
 .env.test.local
 .env.production.local
+wpe.json
 
 # storybook
 build-storybook.log

api/wordpress/_global/getPostTypeArchive.js

@@ -29,7 +29,7 @@ export const archiveQuerySeo = {
  * @param {string}  cursor   Start/end cursor for pagination.
  * @param {boolean} getNext  Whether to retrieve next set of posts (true) or previous set (false).
  * @param {number}  perPage  Number of posts per page.
- * @return {object}          Object containing Apollo client instance and post archive data or error object.
+ * @return {object} Object containing Apollo client instance and post archive data or error object.
  */
 export default async function getPostTypeArchive(
   postType,
@@ -40,7 +40,7 @@ export default async function getPostTypeArchive(
   perPage = 10
 ) {
   // Retrieve post type query.
-  const query = archiveQuerySeo?.[postType] ?? null
+  const query = archiveQuerySeo?.[postType]?.query ?? null
 
   // Get/create Apollo instance.
   const apolloClient = initializeWpApollo()

components/organisms/MediaText/MediaText.js

@@ -2,29 +2,39 @@ import Button from '@/components/atoms/Button'
 import Container from '@/components/atoms/Container'
 import cn from 'classnames'
 import PropTypes from 'prop-types'
-import React from 'react'
+import React, {useEffect} from 'react'
 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 {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.
+ * @return {Element} The MediaText component.
  */
 export default function MediaText({
   body,
+  children,
   className,
   cta,
   image,
   mediaLeft,
   title
 }) {
+  useEffect(() => {
+    if ((children && title) || (children && body) || (children && cta)) {
+      console.warn(
+        'The title, body and cta props are ignored when using children.'
+      )
+    }
+  })
+
   return (
     <Container>
       <section
@@ -35,17 +45,23 @@ export default function MediaText({
         )}
       >
         <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}
-              type="primary"
-              size="md"
-            />
+          {children ? (
+            children
+          ) : (
+            <>
+              {title && <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}
+                  type="primary"
+                  size="md"
+                />
+              )}
+            </>
           )}
         </div>
         <div className={styles.media}>
@@ -63,6 +79,7 @@ export default function MediaText({
 MediaText.propTypes = {
   body: PropTypes.string,
   className: PropTypes.string,
+  children: PropTypes.element,
   cta: PropTypes.shape({
     text: PropTypes.string,
     url: PropTypes.string,

components/organisms/MediaText/MediaText.stories.mdx

@@ -41,3 +41,25 @@ Media will display on the right on large screens by default. Use the `mediaLeft`
     />
   </Story>
 </Canvas>
+
+## Children
+
+You can display children as an element using the `children` prop. If used, the `title`, `body`, and `cta` will not display.
+
+<Canvas>
+  <Story name="Children">
+    <MediaText
+      children={
+        <div>
+          <p>Hi I'm a child element!</p>
+        </div>
+      }
+      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'
+      }}
+      mediaLeft
+    />
+  </Story>
+</Canvas>

package.json

@@ -59,7 +59,7 @@
     "eslint": "^7.18.0",
     "eslint-config-prettier": "^7.2.0",
     "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jsdoc": "^31.3.3",
+    "eslint-plugin-jsdoc": "^31.4.0",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-react": "^7.22.0",
@@ -68,7 +68,7 @@
     "husky": "^4.3.8",
     "lint-staged": "^10.5.3",
     "next-seo": "^4.17.0",
-    "next-sitemap": "^1.4.13",
+    "next-sitemap": "^1.4.15",
     "postcss-flexbugs-fixes": "^4.2.1",
     "postcss-preset-env": "^6.7.0",
     "prettier": "^2.2.1",

yarn.lock

@@ -5942,10 +5942,10 @@ eslint-plugin-import@^2.22.1:
     resolve "^1.17.0"
     tsconfig-paths "^3.9.0"
 
-eslint-plugin-jsdoc@^31.3.3:
-  version "31.3.3"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-31.3.3.tgz#e4ca6d37162f91b0430e4fe036dc096513dba99c"
-  integrity sha512-7kmYu7qQpwe4gCLTBGSpwkiCzmsDlQui7HNlEArUE6Jbqb6ddWpn4Q4X26bOpcByRsyAwm+0xwZtWmJVSue+kw==
+eslint-plugin-jsdoc@^31.4.0:
+  version "31.4.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-31.4.0.tgz#70e00f5f8f7cc695de36319d0e761e1a784ae10e"
+  integrity sha512-NX387IVQrA/ZE9F1tpeEFzZDsXb/BJS4HdT1ZH0RME3O/4DJF8GNQnjMSia8O3gFx/kjfASsdmK5LglVs+xGLA==
   dependencies:
     comment-parser "1.1.1"
     debug "^4.3.1"
@@ -9263,10 +9263,10 @@ next-seo@^4.17.0:
   resolved "https://registry.yarnpkg.com/next-seo/-/next-seo-4.17.0.tgz#fb3dbe0ed7414aa9d83872ef5d8510980a6dae7e"
   integrity sha512-/hnb3oq7bhi8s7bup7+Lm6VzzgRucj+JrWtp+dJiYs/04H0N/NhmE9MpepixQ16fFj6G/39JLYxhzsO/QZG/Kw==
 
-next-sitemap@^1.4.13:
-  version "1.4.13"
-  resolved "https://registry.yarnpkg.com/next-sitemap/-/next-sitemap-1.4.13.tgz#2c7638f1a48a43db8aa138e53cf9c857e540052f"
-  integrity sha512-jaf6VsYHU5zIJUYiciN6xSrGqrMoT3xwrmLvCk+//B9jxg+aXqTdl3jKH9QYcHSf5aHo/skAmqMbiXZqaEfwjg==
+next-sitemap@^1.4.15:
+  version "1.4.15"
+  resolved "https://registry.yarnpkg.com/next-sitemap/-/next-sitemap-1.4.15.tgz#6c4529c5550d7051338010642e253323f5ddcf67"
+  integrity sha512-pkkfyZHKEVdgLf7t41uWbCbC0Wj/8m9+9COlV3QBWmbrTSlOZiiXj9zqrRjd3vKhvHOnEHvqIsOkWtxg5hnZgw==
   dependencies:
     "@corex/deepmerge" "^2.5.3"
     matcher "^3.0.0"