Initial commit

Author: dcooney

components/blocks/BlockAlgolia/BlockAlgolia.js

@@ -14,16 +14,7 @@ export default function BlockParagraph({props}) {
   // TODO Add settings for unused props in default WP Paragraph Block
   const alignment = !align ? 'left' : align
   return (
-    <p
-      className={cn(
-        'container',
-        'container--sm',
-        `text-${alignment}`,
-        className
-      )}
-      id={anchor}
-      tag="p"
-    >
+    <p className={cn(`text-${alignment}`, className)} id={anchor !== null}>
       {content}
     </p>
   )

components/blocks/BlockAlgolia/index.js

@@ -7,6 +7,7 @@ export {default as BlockImageGallery} from './BlockImageGallery'
 export {default as BlockList} from './BlockList'
 export {default as BlockNetflixCarousel} from './BlockNetflixCarousel'
 export {default as BlockParagraph} from './BlockParagraph'
+export {default as BlockHeadings} from './BlockHeadings'
 export {default as BlockSeparator} from './BlockSeparator'
 export {default as BlockShortcode} from './BlockShortcode'
 export {default as BlockSpacer} from './BlockSpacer'

components/blocks/BlockParagraph/BlockParagraph.js

@@ -0,0 +1,15 @@
+.alert {
+  @apply flex items-center px-16 py-8 rounded font-primary text-sm text-white bg-primary;
+
+  & .icon {
+    @apply mr-24;
+  }
+
+  &.success {
+    @apply bg-success;
+  }
+
+  &.error {
+    @apply bg-error;
+  }
+}

components/blocks/index.js

@@ -0,0 +1,46 @@
+import {Canvas, Meta, Story} from '@storybook/addon-docs/blocks'
+import Alert from './'
+
+<Meta title="Components/Molecules/Alert" component={Alert} />
+
+# Alert
+
+Use this to alert the user of an event.
+
+<Canvas>
+  <Story name="Alert">
+    <Alert body="This is an alert." />
+  </Story>
+</Canvas>
+
+## Types
+
+Use different alert types depending on the context of the alert.
+
+<Canvas>
+  <Story name="Types">
+    <Alert className="mb-8" type="default" body="Updates now available!" />
+    <Alert
+      className="mb-8"
+      type="success"
+      icon="checkmarkCircle"
+      body="Your changes have been saved."
+    />
+    <Alert
+      className="mb-8"
+      type="error"
+      icon="eyeOff"
+      body="Oops! Changes were not saved."
+    />
+  </Story>
+</Canvas>
+
+## Icon
+
+Pick any icon from the [icon system](?path=/docs/general-icons--page) to use in your alert.
+
+<Canvas>
+  <Story name="Icon">
+    <Alert icon="shieldOff" body="You are not protected!" type="error" />
+  </Story>
+</Canvas>

components/molecules/BlockRender/Alert.module.css

@@ -0,0 +1,34 @@
+import Icon from '@/components/atoms/Icon'
+import cn from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+import displayBlock from '@/functions/displayBlock'
+
+/**
+ * Render the BlockRender component.
+ *
+ * @param {array} blocks An array of blocks.
+ * @return {Element}     The BlockRender component.
+ */
+export default function BlockRender({blocks}) {
+  return (
+    <>
+      {
+        // If there are blocks, loop over and display.
+        !!blocks &&
+          blocks.length > 0 &&
+          blocks.map((block, index) => {
+            return displayBlock(block, index)
+          })
+      }
+    </>
+  )
+}
+
+BlockRender.propTypes = {
+  blocks: PropTypes.array.isRequired
+}
+
+BlockRender.defaultProps = {
+  blocks: []
+}

components/molecules/BlockRender/Alert.stories.mdx

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

components/molecules/BlockRender/BlockRender.js

@@ -12,24 +12,11 @@ import PropTypes from 'prop-types'
  */
 export default function displayBlock(block, index, siteSettings) {
   const {attributes, name} = block
-  const {algolia} = siteSettings
 
   // prettier-ignore
   switch (name) {
     case 'acf/accordions':
       return <Blocks.BlockAccordions props={attributes} key={index} />
-    case 'acf/algolia':
-      return (
-        <Blocks.BlockAlgolia
-          props={attributes}
-          key={index}
-          indexName={
-            algolia?.indexName
-              ? algolia.indexName
-              : ''
-          }
-        />
-      )
     case 'acf/netflix':
       return (
         <Blocks.BlockNetflixCarousel props={attributes} key={index} />

components/molecules/BlockRender/index.js

@@ -4,6 +4,7 @@ import Layout from '@/components/common/Layout'
 import Link from 'next/link'
 import getArchivePosts from '@/api/frontend/wp/archive/getArchivePosts'
 import getPagePropTypes from '@/functions/getPagePropTypes'
+import BlockRender from '@/components/molecules/BlockRender'
 
 // Define route post type.
 const postType = 'post'
@@ -65,11 +66,7 @@ export default function BlogPost({post, archive, posts, pagination}) {
         <section>
           <article>
             <h1 dangerouslySetInnerHTML={{__html: post?.title}} />
-            <div
-              dangerouslySetInnerHTML={{
-                __html: JSON.stringify(post?.blocks ?? [])
-              }}
-            />
+            <BlockRender blocks={post?.blocks} />
           </article>
         </section>
       </div>