Adding separator block and docblocks

Author: dcooney

components/atoms/Separator/Separator.js

@@ -0,0 +1,38 @@
+import cn from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+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.
+ */
+export default function Separator(props) {
+  const {className, fullWidth} = props
+
+  return (
+    <>
+      {fullWidth ? (
+        <hr className={cn(styles.separator, className)} />
+      ) : (
+        <div>
+          <hr className={cn(styles.separator, className)} />
+        </div>
+      )}
+    </>
+  )
+}
+
+Separator.propTypes = {
+  className: PropTypes.string,
+  fullWidth: PropTypes.bool.isRequired
+}
+
+Separator.defaultProps = {
+  fullWidth: false
+}

components/atoms/Separator/Separator.module.css

@@ -0,0 +1,5 @@
+.separator {
+  @apply w-full bg-tertiary-lightest border-none my-40;
+
+  height: 1px;
+}

components/atoms/Separator/Separator.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/Separator/index.js

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

components/blocks/BlockHeadings/BlockHeadings.js

@@ -9,10 +9,17 @@ import React from 'react'
  * The core Headings 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.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 {string}    props.level     The heading level.
+ * @return {Element}               The RichText component.
  */
 export default function BlockHeadings({props}) {
-  const {anchor, align, className, content, level} = props
+  const {className, align, anchor, content, level} = props
   const alignment = !align ? 'left' : align
 
   return (

components/blocks/BlockParagraph/BlockParagraph.js

@@ -8,7 +8,13 @@ import PropTypes from 'prop-types'
  * The core Paragraph 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.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.
  */
 export default function BlockParagraph({props}) {
   const {className, align, anchor, content} = props
@@ -29,9 +35,6 @@ BlockParagraph.propTypes = {
   props: PropTypes.object.isRequired,
   align: PropTypes.string,
   anchor: PropTypes.string,
-  backgroundColor: PropTypes.string,
   className: PropTypes.string,
-  content: PropTypes.string,
-  fontSize: PropTypes.string,
-  textColor: PropTypes.string
+  content: PropTypes.string
 }

components/blocks/BlockSeparator/BlockSeparator.js

@@ -1,3 +1,4 @@
+import Separator from '@/components/atoms/Separator'
 import PropTypes from 'prop-types'
 
 /**
@@ -6,24 +7,25 @@ import PropTypes from 'prop-types'
  * The core Separator 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.className Optional classnames.
+ * @param {string}    props.anchor    Optional anchor/id.
+ * @return {Element}               The Separator component.
  */
 export default function BlockSeparator({props}) {
-  const {className, color, anchor} = props
+  const {className, anchor} = props
 
   const isFullWidth =
     (className && className.includes('is-style-full-width')) > 0 ? true : false
 
   return (
-    <pre>
-      {JSON.stringify(isFullWidth, {className, color, anchor}, null, 2)}
-    </pre>
+    <Separator className={className} anchor={anchor} fullWidth={isFullWidth} />
   )
 }
 
 BlockSeparator.propTypes = {
   props: PropTypes.object.isRequired,
   className: PropTypes.string,
-  color: PropTypes.string,
   anchor: PropTypes.string
 }