Adding Spacer block and component.

Author: dcooney

components/atoms/Spacer/Spacer.js

@@ -0,0 +1,32 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import tailwindConfig from '../../../tailwind.config'
+
+/**
+ * @param props
+ */
+export default function Spacer(props) {
+  const {pxHeight, anchor} = props
+
+  const rootEmVal = parseFloat(tailwindConfig.theme.fontSize['root-em'])
+
+  return (
+    <div
+      id={anchor || null}
+      style={{
+        /* stylelint-disable-next-line value-keyword-case */
+        height: `${pxHeight / rootEmVal}rem`
+      }}
+      aria-hidden="true"
+    />
+  )
+}
+
+Spacer.propTypes = {
+  anchor: PropTypes.string,
+  pxHeight: PropTypes.number.isRequired
+}
+
+Spacer.defaultProps = {
+  pxHeight: 40
+}

components/atoms/Spacer/Spacer.module.css

@@ -0,0 +1,9 @@
+.divider {
+  @apply w-full py-0 border-blue-500 my-40;
+
+  opacity: 0.1;
+
+  @media print {
+    @apply hidden;
+  }
+}

components/atoms/Spacer/Spacer.stories.mdx

@@ -0,0 +1,42 @@
+import {Meta, Story, Canvas} from '@storybook/addon-docs/blocks'
+
+import Spacer from '.'
+
+<Meta title="Components/Atoms/Spacer" component={Spacer} />
+
+# Spacer
+
+Use this component to display a spacer with a height. Use it anywhere you would need a blank spacing element.
+
+<Canvas>
+  <Story name="Component">
+    <Spacer pxHeight={100} />
+  </Story>
+</Canvas>
+
+## Height
+
+Specify the height in pixels as a `number`. The component will convert it to rem based on the tailwind config file's `root-em` value.
+
+<Canvas>
+  <Story name="Height">
+    <Spacer pxHeight={400} />
+  </Story>
+</Canvas>
+
+## Controls
+
+Play around with `<Spacer />` props in the [Canvas tab of the Controls story](?path=/story/design-system-atoms-spacer--controls).
+
+export const Template = (args) => <Spacer {...args} />
+
+<Canvas>
+  <Story
+    name="Controls"
+    args={{
+      pxHeight: 100
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>

components/atoms/Spacer/index.js

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

components/blocks/BlockSpacer/BlockSpacer.js

@@ -1,3 +1,4 @@
+import Spacer from '@/components/atoms/Spacer'
 import PropTypes from 'prop-types'
 
 /**
@@ -6,11 +7,15 @@ import PropTypes from 'prop-types'
  * The core Spacer block from Gutenberg.
  *
  * @author WebDevStudios
- * @param {object} props The component attributes as props.
+ * @param props.props
+ * @param {object}    props        The component attributes as props.
+ * @param {string}    props.anchor Optional anchor/id.
+ * @param {string}    props.height The height of the spacer.
+ * @return {Element}               The Spacer component.
  */
 export default function BlockSpacer({props}) {
   const {anchor, height} = props
-  return <pre>{JSON.stringify({anchor, height}, null, 2)}</pre>
+  return <Spacer pxHeight={height} id={anchor} />
 }
 
 BlockSpacer.propTypes = {