Merge pull request #395 from WebDevStudios/feature/383-code-todos-fe

Feature/383 todos paragraph
WebDevStudios · May 13, 2021 · a6f7efd · a6f7efd · vercel · May 13, 2021
2 parents e934c8a + 834fe97
commit a6f7efd
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 20 deletions.
diff --git a/components/atoms/RichText/RichText.js b/components/atoms/RichText/RichText.js
@@ -7,32 +7,63 @@ import styles from './RichText.module.css'
 /**
  * Render the RichText component.
  *
- * @param  {object}  props            RichText component props.
- * @param  {string}  props.attributes Optional element attributes.
- * @param  {string}  props.children   Child component(s) to render.
- * @param  {string}  props.className  Optional classNames.
- * @param  {string}  props.id         Optional element ID.
- * @param  {string}  props.tag        The type of element to render.
- * @return {Element}                  The RichText component.
+ * @param  {object}  props                 RichText component props.
+ * @param  {string}  props.attributes      Optional element attributes.
+ * @param  {string}  props.backgroundColor The background color.
+ * @param  {string}  props.children        Child component(s) to render.
+ * @param  {string}  props.className       Optional classNames.
+ * @param  {boolean} props.dropCap         Whether or not there should be a drop cap.
+ * @param  {string}  props.id              Optional element ID.
+ * @param  {object}  props.inlineStyles    Inline styles.
+ * @param  {string}  props.tag             The type of element to render.
+ * @param  {string}  props.textColor       The text color.
+ * @return {Element}                       The RichText component.
  */
-export default function RichText({attributes, children, className, id, tag}) {
+export default function RichText({
+  attributes,
+  backgroundColor,
+  children,
+  className,
+  dropCap,
+  id,
+  inlineStyles,
+  tag,
+  textColor
+}) {
   const tagClassName = tag !== 'div' ? tag : ''
   return React.createElement(tag, {
     ...attributes,
-    className: cn(styles.richtext, styles?.[tagClassName], className),
+    className: cn(
+      styles.richtext,
+      styles?.[tagClassName],
+      dropCap && styles.dropcap,
+      className
+    ),
     id: id || null,
-    dangerouslySetInnerHTML: createMarkup(children)
+    dangerouslySetInnerHTML: createMarkup(children),
+    style: {
+      color: textColor ?? 'inherit',
+      backgroundColor: backgroundColor ?? 'inherit',
+      fontSize:
+        inlineStyles?.typography?.fontSize &&
+        `${inlineStyles.typography.fontSize}`
+    }
   })
 }
 
 RichText.propTypes = {
   attributes: PropTypes.object,
+  backgroundColor: PropTypes.string,
   children: PropTypes.string.isRequired,
   className: PropTypes.string,
+  dropCap: PropTypes.bool,
   id: PropTypes.string,
-  tag: PropTypes.string
+  inlineStyles: PropTypes.object,
+  tag: PropTypes.string,
+  textColor: PropTypes.string
 }
 
 RichText.defaultProps = {
+  dropCap: false,
   tag: 'div'
 }
diff --git a/components/atoms/RichText/RichText.module.css b/components/atoms/RichText/RichText.module.css
@@ -3,6 +3,12 @@
     @apply text-center;
   }
 
+  &.dropcap {
+    &::first-letter {
+      @apply float-left mr-4 text-8xl font-bold;
+    }
+  }
+
   /* List Styles */
   &.ul,
   &.ol {

diff --git a/components/blocks/Gutenberg/BlockParagraph/BlockParagraph.js b/components/blocks/Gutenberg/BlockParagraph/BlockParagraph.js
@@ -8,21 +8,37 @@ import PropTypes from 'prop-types'
  * The core Paragraph block from Gutenberg.
  *
  * @author WebDevStudios
- * @param  {object}  props           The component props.
- * @param  {string}  props.className Optional classnames.
- * @param  {string}  props.align     Optional alignment style.
- * @param  {string}  props.anchor    Optional anchor/id.
- * @param  {string}  props.content   The content of the block.
- * @return {Element}                 The RichText component.
+ * @param  {object}  props                    The component props.
+ * @param  {string}  props.backgroundColorHex The background color hex value.
+ * @param  {string}  props.className          Optional classnames.
+ * @param  {string}  props.align              Optional alignment style.
+ * @param  {string}  props.anchor             Optional anchor/id.
+ * @param  {string}  props.content            The content of the block.
+ * @param  {boolean} props.dropCap            Whether the paragraph has a drop cap.
+ * @param  {object}  props.style              The style attributes (Typography panel).
+ * @param  {string}  props.textColorHex       The text color hex value.
+ * @return {Element}                          The RichText component.
  */
-export default function BlockParagraph({className, align, anchor, content}) {
-  // TODO Add settings for unused props in default WP Paragraph Block
+export default function BlockParagraph({
+  align,
+  anchor,
+  backgroundColorHex,
+  className,
+  content,
+  dropCap,
+  style,
+  textColorHex
+}) {
   const alignment = !align ? 'left' : align
   return (
     <RichText
       className={cn(`text-${alignment}`, className)}
       id={anchor}
       tag="p"
+      dropCap={dropCap}
+      textColor={textColorHex || style?.color?.text || null}
+      backgroundColor={backgroundColorHex || style?.color?.background || null}
+      inlineStyles={style}
     >
       {content}
     </RichText>
@@ -32,6 +48,10 @@ export default function BlockParagraph({className, align, anchor, content}) {
 BlockParagraph.propTypes = {
   align: PropTypes.string,
   anchor: PropTypes.string,
+  backgroundColorHex: PropTypes.string,
   className: PropTypes.string,
-  content: PropTypes.string
+  content: PropTypes.string,
+  dropCap: PropTypes.bool,
+  style: PropTypes.object,
+  textColorHex: PropTypes.string
 }