Merge branch 'staging' into feature/lazy-blocks

Author: itsamoreh

components/atoms/Columns/Columns.js

@@ -0,0 +1,39 @@
+import cn from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+import styles from './Columns.module.css'
+
+/**
+ * Render the Columns component.
+ *
+ * @param {object} props             Container component props.
+ * @param {string} props.id          Optional ID/Anchor.
+ * @param {string} props.className   Optional className.
+ * @param {string} props.columnCount Total number of columns.
+ * @param {object} props.children    React children.
+ * @return {Element}                 The Columns component.
+ */
+export default function Columns({id, className, columnCount, children}) {
+  return (
+    <div
+      id={id || null}
+      className={cn(
+        styles.columns,
+        columnCount && styles[`columns-${columnCount}`],
+        className
+      )}
+    >
+      {children && children}
+    </div>
+  )
+}
+
+Columns.propTypes = {
+  id: PropTypes.string,
+  className: PropTypes.string,
+  columnCount: PropTypes.number,
+  children: PropTypes.node
+}
+Columns.defaultProps = {
+  columnCount: 3
+}

components/atoms/Columns/Columns.module.css

@@ -0,0 +1,27 @@
+.columns {
+  @apply grid gap-16 grid-cols-3;
+
+  &.columns-1 {
+    @apply grid-cols-1;
+  }
+
+  &.columns-2 {
+    @apply grid-cols-2;
+  }
+
+  &.columns-3 {
+    @apply grid-cols-3;
+  }
+
+  &.columns-4 {
+    @apply grid-cols-4;
+  }
+
+  &.columns-5 {
+    @apply grid-cols-5;
+  }
+
+  &.columns-6 {
+    @apply grid-cols-6;
+  }
+}

components/atoms/Columns/index.js

@@ -0,0 +1 @@
+export {default} from './Columns'

components/blocks/BlockButtons/BlockButtons.js

@@ -8,13 +8,15 @@ import PropTypes from 'prop-types'
  * The core Buttons block from Gutenberg.
  *
  * @author WebDevStudios
- * @param {object} props                              The component prope
- * @param {object} props.options                      Option props object.
- * @param {string} props.options.anchor               The anchor/id of the block.
- * @param {string} props.options.orientation          The orientation of buttons.
- * @param {string} props.options.contentJustification The justification of the buttons.
- * @param {Array}  props.innerBlocks                  The array of inner blocks to display.
- * @return {Element}                                  The Buttons component.
+ * @param {object}          props                        The component properties.
+ * @param props.options
+ * @param {object}          options                      Option props object.
+ * @param {string}          options.anchor               The anchor/id of the block.
+ * @param {string}          options.orientation          The orientation of buttons.
+ * @param {string}          options.contentJustification The justification of the buttons.
+ * @param props.innerBlocks
+ * @param {Array}           innerBlocks                  The array of inner blocks to display.
+ * @return {Element}                            The Buttons component.
  */
 export default function BlockButtons({options, innerBlocks}) {
   return (

components/blocks/BlockColumns/BlockColumns.js

@@ -0,0 +1,54 @@
+import Columns from '@/components/atoms/Columns'
+import Blocks from '@/components/molecules/Blocks'
+import PropTypes from 'prop-types'
+
+/**
+ * Columns Block
+ *
+ * The core Columns block from Gutenberg.
+ *
+ * @author WebDevStudios
+ * @param {object}          props             The component properties.
+ * @param {string}          options.anchor    The optional anchor/id of the block.
+ * @param {string}          options.className The optional classname.
+ * @param props.options
+ * @param props.innerBlocks
+ * @param {Array}           innerBlocks       The array of inner blocks to display.
+ * @return {Element}                 The Columns component.
+ */
+export default function BlockColumns({options, innerBlocks}) {
+  return (
+    <>
+      {!!innerBlocks?.length && (
+        <Columns
+          id={options?.anchor}
+          className={options?.className}
+          columnCount={innerBlocks?.length}
+        >
+          {innerBlocks.map((block, index) => {
+            return (
+              <div key={`column-${index}`}>
+                {!!block?.innerBlocks?.length && (
+                  <Blocks blocks={block.innerBlocks} />
+                )}
+              </div>
+            )
+          })}
+        </Columns>
+      )}
+    </>
+  )
+}
+
+BlockColumns.propTypes = {
+  options: PropTypes.shape({
+    anchor: PropTypes.string,
+    className: PropTypes.string
+  }),
+  innerBlocks: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string,
+      attributes: PropTypes.object
+    })
+  )
+}

components/blocks/BlockColumns/index.js

@@ -0,0 +1 @@
+export {default} from './BlockColumns'

components/blocks/BlockCover/BlockCover.js

@@ -0,0 +1,42 @@
+import Blocks from '@/components/molecules/Blocks'
+import Hero from '@/components/organisms/Hero'
+import PropTypes from 'prop-types'
+
+/**
+ * Cover Block
+ *
+ * The core Columns block from Gutenberg.
+ *
+ * @author WebDevStudios
+ * @param {object}          props        The component properties.
+ * @param {string}          media.anchor The optional anchor/id of the block.
+ * @param {string}          media.url    The background image URL.
+ * @param props.media
+ * @param props.innerBlocks
+ * @param {Array}           innerBlocks  The array of inner blocks to display.
+ * @return {Element}            The Cover component.
+ */
+export default function BlockCover({media, innerBlocks}) {
+  return (
+    <>
+      {!!media?.url && (
+        <Hero backgroundImage={media.url} id={media?.anchor}>
+          {!!innerBlocks?.length && <Blocks blocks={innerBlocks} />}
+        </Hero>
+      )}
+    </>
+  )
+}
+
+BlockCover.propTypes = {
+  media: PropTypes.shape({
+    anchor: PropTypes.string,
+    url: PropTypes.string
+  }),
+  innerBlocks: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string,
+      attributes: PropTypes.object
+    })
+  )
+}

components/blocks/BlockCover/index.js

@@ -0,0 +1 @@
+export {default} from './BlockCover'

components/blocks/index.js

@@ -3,6 +3,8 @@ export {default as BlockAccordions} from './BlockAccordions'
 export {default as BlockButton} from './BlockButton'
 export {default as BlockButtons} from './BlockButtons'
 export {default as BlockCode} from './BlockCode'
+export {default as BlockColumns} from './BlockColumns'
+export {default as BlockCover} from './BlockCover'
 export {default as BlockHeadings} from './BlockHeadings'
 export {default as BlockHero} from './BlockHero'
 export {default as BlockImage} from './BlockImage'

components/organisms/Hero/Hero.js

@@ -16,6 +16,7 @@ import styles from './Hero.module.css'
  * @param {object} props.ctaUrl          The cta url.
  * @param {string} props.subtitle        Text for the subtitle.
  * @param {string} props.title           Text for the title.
+ * @param {object} props.children        React children.
  * @return {Element}                     The Hero component.
  */
 export default function Hero({
@@ -66,5 +67,6 @@ Hero.propTypes = {
   ctaText: PropTypes.string,
   ctaUrl: PropTypes.string,
   subtitle: PropTypes.string,
-  title: PropTypes.string.isRequired
+  children: PropTypes.node,
+  title: PropTypes.string
 }