Merge pull request #497 from WebDevStudios/feature/410-pullquote-block

Feature/410 pullquote block

components/atoms/PullQuote/PullQuote.js

@@ -7,37 +7,61 @@ import styles from './PullQuote.module.css'
  * PullQuote Block
  *
  * @author WebDevStudios
- * @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.
+ * @param  {object}  props            The component properties.
+ * @param  {string}  props.citation   The optional author citation.
+ * @param  {string}  props.className  Optional classnames.
+ * @param  {string}  props.id         Optional anchor/id.
+ * @param  {object}  props.style      Custom pullquote styles.
+ * @param  {boolean} props.styleSolid Whether this pullquote has the solid style.
+ * @param  {string}  props.value      The pull quote content of the block.
+ * @return {Element}                  The PullQuote component.
  */
-export default function PullQuote({value, citation, id, className}) {
+export default function PullQuote({
+  citation,
+  className,
+  id,
+  style,
+  styleSolid,
+  value
+}) {
   return (
     <>
       {!!value && (
-        <figure id={id ? id : null} className={cn(styles.pullquote, className)}>
-          <blockquote>
-            <div className={styles.content}>
-              <RichText tag="div">{value}</RichText>
-            </div>
-          </blockquote>
-          {!!citation && (
-            <figcaption className={styles.cite}>
-              ~ <RichText tag="span">{citation}</RichText>
-            </figcaption>
+        <figure
+          id={id ? id : null}
+          className={cn(
+            styles.pullquote,
+            className,
+            styleSolid && styles.styleSolid
           )}
+          style={style}
+        >
+          <div className={styles.wrap}>
+            <blockquote>
+              <div className={styles.content}>
+                <RichText tag="div">{value}</RichText>
+              </div>
+            </blockquote>
+            {!!citation && (
+              <figcaption className={styles.cite}>
+                ~ <RichText tag="span">{citation}</RichText>
+              </figcaption>
+            )}
+          </div>
         </figure>
       )}
     </>
   )
 }
 
 PullQuote.propTypes = {
-  id: PropTypes.string,
+  citation: PropTypes.string,
   className: PropTypes.string,
-  value: PropTypes.string,
-  citation: PropTypes.string
+  id: PropTypes.string,
+  style: PropTypes.shape({
+    backgroundColor: PropTypes.string,
+    color: PropTypes.string
+  }),
+  styleSolid: PropTypes.bool,
+  value: PropTypes.string
 }

components/atoms/PullQuote/PullQuote.module.css

@@ -8,4 +8,10 @@
   & figcaption {
     @apply font-bold;
   }
+
+  &.styleSolid {
+    & .wrap {
+      @apply max-w-60 text-left mr-auto ml-auto;
+    }
+  }
 }

components/blocks/Gutenberg/BlockPullQuote/BlockPullQuote.js

@@ -7,27 +7,70 @@ import PropTypes from 'prop-types'
  * The core Pull Quote block from Gutenberg.
  *
  * @author WebDevStudios
- * @param  {object}  props           The component props.
- * @param  {string}  props.value     The quote content of the block.
- * @param  {string}  props.citation  The optional author citation.
- * @param  {string}  props.anchor    Optional anchor/id.
- * @param  {string}  props.className Optional classnames.
- * @return {Element}                 The Quote component.
+ * @param  {object}  props                 The component props.
+ * @param  {string}  props.anchor          Optional anchor/id.
+ * @param  {string}  props.citation        The optional author citation.
+ * @param  {string}  props.className       Optional classnames.
+ * @param  {string}  props.customMainColor The custom background color.
+ * @param  {string}  props.customTextColor The custom text color.
+ * @param  {string}  props.mainColorHex    The background color hex value.
+ * @param  {string}  props.textColorHex    The text color hex value.
+ * @param  {string}  props.value           The quote content of the block.
+ * @return {Element}                       The Quote component.
  */
-export default function BlockPullQuote({value, citation, anchor, className}) {
+export default function BlockPullQuote({
+  anchor,
+  citation,
+  className,
+  customMainColor,
+  customTextColor,
+  mainColorHex,
+  textColorHex,
+  value
+}) {
+  // Determine background and text colors, using stylelint-accepted const names.
+  const backgroundcolor = mainColorHex || customMainColor || 'inherit'
+  const textcolor = textColorHex || customTextColor || 'inherit'
+
+  // Create style object for pullquote.
+  const pullQuoteStyle = {
+    backgroundColor: backgroundcolor,
+    color: textcolor
+  }
+
+  // Extract pullquote style.
+  const styleSolid = className && className.includes('is-style-solid-color')
+
+  // Remove styles from className.
+  className &&
+    className
+      .replace('is-style-solid-color', '')
+      .replace('is-style-default', '')
+
+  // Remove background for default style.
+  if (!styleSolid) {
+    pullQuoteStyle.backgroundColor = 'inherit'
+  }
+
   return (
     <PullQuote
-      id={anchor}
+      citation={citation}
       className={className}
+      id={anchor}
+      style={pullQuoteStyle}
+      styleSolid={styleSolid}
       value={value}
-      citation={citation}
     />
   )
 }
 
 BlockPullQuote.propTypes = {
-  value: PropTypes.string,
-  citation: PropTypes.string,
   anchor: PropTypes.string,
-  className: PropTypes.string
+  citation: PropTypes.string,
+  className: PropTypes.string,
+  customMainColor: PropTypes.string,
+  customTextColor: PropTypes.string,
+  mainColorHex: PropTypes.string,
+  textColorHex: PropTypes.string,
+  value: PropTypes.string
 }

tailwind.config.js

@@ -19,6 +19,9 @@ module.exports = {
           lg: '1024px',
           xl: '1280px'
         }
+      },
+      maxWidth: {
+        60: '60%'
       }
     }
   },