Adding code block and code cleanup of other blocks

Author: dcooney

components/atoms/Code/Code.js

@@ -0,0 +1,42 @@
+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'
+
+/**
+ * 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.
+ */
+export default function Code({id, className, content}) {
+  // Use the className to pass the langauge.
+  const language = className ? className : 'javascript'
+
+  // Replace any `<` encoded HTML.
+  const code = content.replace(/&lt;/g, '<')
+
+  return (
+    <>
+      {!!content && (
+        <div id={id ? id : null} className={styles.code}>
+          <SyntaxHighlighter style={tomorrow} language={language}>
+            {code}
+          </SyntaxHighlighter>
+        </div>
+      )}
+    </>
+  )
+}
+
+Code.propTypes = {
+  id: PropTypes.string,
+  content: PropTypes.string,
+  className: PropTypes.string
+}

components/atoms/Code/Code.module.css

@@ -0,0 +1,7 @@
+.code {
+  @apply mb-40;
+
+  & > pre {
+    @apply rounded-larger;
+  }
+}

components/atoms/Code/Code.stories.mdx

@@ -0,0 +1,42 @@
+import {Meta, Story, Canvas} from '@storybook/addon-docs/blocks'
+
+import Separator from '.'
+
+<Meta title="Components/Atoms/Separator" component={Separator} />
+
+# Separator
+
+Use this component to display a page separator with top and bottom margins. Use it anywhere you would use an `<hr>` element.
+
+<Canvas>
+  <Story name="Component">
+    <Separator />
+  </Story>
+</Canvas>
+
+## Full Width
+
+The default separator is equal to the container width. To get a full width separator, set the `fullWidth` prop to true.
+
+<Canvas>
+  <Story name="Full Width">
+    <Separator fullWidth />
+  </Story>
+</Canvas>
+
+## Controls
+
+Play around with `<Separator />` props in the [Canvas tab of the Controls story](?path=/story/design-system-atoms-separator--controls).
+
+export const Template = (args) => <Separator {...args} />
+
+<Canvas>
+  <Story
+    name="Controls"
+    args={{
+      fullWidth: false
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>

components/atoms/Code/index.js

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

components/atoms/Image/Image.js

@@ -75,7 +75,7 @@ Image.propTypes = {
   anchor: PropTypes.string,
   caption: PropTypes.string,
   className: PropTypes.string,
-  id: PropTypes.number,
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   href: PropTypes.string,
   linkClass: PropTypes.string,
   linkTarget: PropTypes.string,

components/atoms/Separator/Separator.js

@@ -7,14 +7,11 @@ import styles from './Separator.module.css'
  * Render the Separator component.
  *
  * @author WebDevStudios
- * @param {object}  props           The component attributes as props.
- * @param {string}  props.className Optional classname.
- * @param {boolean} props.fullWidth Is this a fullwidth block.
- * @return {Element}                The Separator component.
+ * @param {string}  className Optional classname.
+ * @param {boolean} fullWidth Is this a fullwidth block.
+ * @return {Element} The Separator component.
  */
-export default function Separator(props) {
-  const {className, fullWidth} = props
-
+export default function Separator({className, fullWidth}) {
   return (
     <>
       {fullWidth ? (

components/atoms/Spacer/Spacer.js

@@ -6,14 +6,11 @@ import tailwindConfig from '../../../tailwind.config'
  * Render the Spacer component.
  *
  * @author WebDevStudios
- * @param {object} props        The component attributes as props.
- * @param {string} props.anchor Optional anchor/id.
- * @param {number} props.height The height of the spacer.
- * @return {Element}            The Spacer component.
+ * @param {string} anchor Optional anchor/id.
+ * @param {number} height The height of the spacer.
+ * @return {Element} The Spacer component.
  */
-export default function Spacer(props) {
-  const {height, anchor} = props
-
+export default function Spacer({height, anchor}) {
   const rootEmVal = parseFloat(tailwindConfig.theme.fontSize['root-em'])
 
   return (

components/blocks/BlockCode/BlockCode.js

@@ -0,0 +1,23 @@
+import Code from '@/components/atoms/Code'
+import PropTypes from 'prop-types'
+
+/**
+ * Code Block
+ *
+ * The core Code block from Gutenberg.
+ *
+ * @author WebDevStudios
+ * @param {string} className Optional classnames.
+ * @param {string} anchor    Optional anchor/id.
+ * @param {string} content   The content of the block.
+ * @return {Element} The Code component.
+ */
+export default function BlockCode({anchor, className, content}) {
+  return <Code className={className} id={anchor} content={content} />
+}
+
+BlockCode.propTypes = {
+  anchor: PropTypes.string,
+  content: PropTypes.string,
+  className: PropTypes.string
+}

components/blocks/BlockCode/index.js

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

components/blocks/index.js

@@ -1,7 +1,7 @@
 // Create default exports for each Block.
 export {default as BlockAccordions} from './BlockAccordions'
 export {default as BlockQuote} from './BlockQuote'
-export {default as PullQuote} from './BlockPullQuote'
+export {default as BlockPullQuote} from './BlockPullQuote'
 export {default as BlockImage} from './BlockImage'
 export {default as BlockImageGallery} from './BlockImageGallery'
 export {default as BlockList} from './BlockList'
@@ -13,3 +13,4 @@ export {default as BlockShortcode} from './BlockShortcode'
 export {default as BlockSpacer} from './BlockSpacer'
 export {default as BlockVideoEmbed} from './BlockVideoEmbed'
 export {default as BlockTable} from './BlockTable'
+export {default as BlockCode} from './BlockCode'