Merge branch 'staging' into feature/114-file-upload-field

Author: oddevan

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,26 @@
+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.url        The full URL path of the image.
+ * @return {Element}                The Image component.
  */
 export default function Image({
   alt,
@@ -80,6 +80,5 @@ Image.propTypes = {
   linkClass: PropTypes.string,
   linkTarget: PropTypes.string,
   rel: PropTypes.string,
-  sizeSlug: PropTypes.string,
   url: PropTypes.string
 }

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/RichText/RichText.module.css

@@ -10,7 +10,7 @@
   &.ol,
   & p,
   &.p {
-    @apply mb-20;
+    @apply mb-8;
   }
 
   & ul,
@@ -62,26 +62,26 @@
   /* Heading Styles */
   & h1,
   &.h1 {
-    @apply mb-20;
+    @apply mb-10;
   }
 
   & h2,
   &.h2 {
-    @apply mb-20;
+    @apply mb-10;
   }
 
   & h3,
   &.h3 {
-    @apply mb-20;
+    @apply mb-10;
   }
 
   & h4,
   &.h4 {
-    @apply mb-12;
+    @apply mb-10;
   }
 
   & h5,
   &.h5 {
-    @apply mb-12;
+    @apply mb-10;
   }
 }

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,14 @@ 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.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/atoms/TwitterEmbed/TwitterEmbed.js

@@ -0,0 +1,41 @@
+import RichText from '@/components/atoms/RichText'
+import cn from 'classnames'
+import PropTypes from 'prop-types'
+import {TwitterTweetEmbed} from 'react-twitter-embed'
+import styles from './TwitterEmbed.module.css'
+
+/**
+ * TwitterEmbed Block
+ *
+ * @author WebDevStudios
+ * @param {object} props           TwitterEmbed component props.
+ * @param {string} props.className Optional className.
+ * @param {string} props.caption   Optional caption.
+ * @param {string} props.url       The full URL to the video.
+ * @return {Element}               The TwitterEmbed component.
+ */
+export default function TwitterEmbed({className, caption, url}) {
+  const tweetURL = url ? url.split('/') : '' // Split URL string into array.
+  const tweetId = tweetURL ? tweetURL[tweetURL.length - 1] : '' // Get ID from url array.
+
+  return (
+    <>
+      {!!tweetId && (
+        <div className={cn(styles.twitterEmbed, className)}>
+          <TwitterTweetEmbed tweetId={tweetId} />
+          {!!caption && (
+            <div className={styles.caption}>
+              <RichText tag="span">{caption}</RichText>
+            </div>
+          )}
+        </div>
+      )}
+    </>
+  )
+}
+
+TwitterEmbed.propTypes = {
+  className: PropTypes.string,
+  caption: PropTypes.string,
+  url: PropTypes.string.isRequired
+}

components/atoms/TwitterEmbed/TwitterEmbed.module.css

@@ -0,0 +1,7 @@
+.twitterEmbed {
+  @apply block;
+
+  & .caption {
+    @apply text-center text-xs pt-12;
+  }
+}