Merge branch 'staging' into feature/60-finish-comments

Author: oddevan

components/atoms/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,36 @@
+import Link from 'next/link'
+import PropTypes from 'prop-types'
+import styles from './Breadcrumbs.module.css'
+
+/**
+ * Render the Breadcrumbs component.
+ *
+ * @author WebDevStudios
+ * @param {object} props             The component attributes as props.
+ * @param {Array}  props.breadcrumbs The breadcrumb array.
+ * @return {Element}                 The Breadcrumbs component.
+ */
+export default function Breadcrumbs({breadcrumbs}) {
+  return (
+    <>
+      {!!breadcrumbs?.length && (
+        <ul className={styles.breadcrumbs}>
+          {breadcrumbs.map((breadcrumb, index) => (
+            <li key={index}>
+              <Link href={breadcrumb?.url}>
+                <a>{breadcrumb?.text}</a>
+              </Link>
+              {index < breadcrumbs.length - 1 && (
+                <span className={styles.sep}> &raquo; </span>
+              )}
+            </li>
+          ))}
+        </ul>
+      )}
+    </>
+  )
+}
+
+Breadcrumbs.propTypes = {
+  breadcrumbs: PropTypes.array.isRequired
+}

components/atoms/Breadcrumbs/Breadcrumbs.module.css

@@ -0,0 +1,11 @@
+ul.breadcrumbs {
+  @apply mb-8 flex;
+
+  & li {
+    @apply text-sm font-semibold;
+
+    & .sep {
+      @apply px-2 opacity-50 font-normal;
+    }
+  }
+}

components/atoms/Breadcrumbs/Breadcrumbs.stories.mdx

@@ -0,0 +1,30 @@
+import {Meta, Story, Canvas} from '@storybook/addon-docs/blocks'
+
+import Breadcrumbs from '.'
+
+export const crumbs = [
+  {
+    text: 'Home',
+    url: '/'
+  },
+  {
+    text: 'About',
+    url: '/about'
+  },
+  {
+    text: 'Our Team',
+    url: '/about/team'
+  }
+]
+
+<Meta title="Components/Atoms/Breadcrumbs" component={Breadcrumbs} />
+
+# Breadcrumbs
+
+Use this component to display site breadcrumbs.
+
+<Canvas>
+  <Story name="Component">
+    <Breadcrumbs breadcrumbs={crumbs} />
+  </Story>
+</Canvas>

components/atoms/Breadcrumbs/index.js

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

components/atoms/Container/Container.js

@@ -1,18 +1,38 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import styles from './Container.module.css'
+import cn from 'classnames'
 
 /**
  * Render the Container component.
  *
- * @param {object}  props          Container component props.
- * @param {Element} props.children Container children.
- * @return {Element}               The Container component.
+ * @param {object}  props            Container component props.
+ * @param {object}  props.children   Container children.
+ * @param {boolean} props.paddingTop Should container render top padding.
+ * @param {boolean} props.paddingBtm Should container render bottom padding.
+ * @return {Element}                 The Container component.
  */
-export default function Container({children}) {
-  return <div className={styles.containerW}>{children && children}</div>
+export default function Container({children, paddingTop, paddingBtm}) {
+  return (
+    <div
+      className={cn(
+        styles.containerW,
+        paddingTop && styles.paddingTop,
+        paddingBtm && styles.paddingBtm
+      )}
+    >
+      {children && children}
+    </div>
+  )
 }
 
 Container.propTypes = {
-  children: PropTypes.element
+  children: PropTypes.node,
+  paddingTop: PropTypes.bool,
+  paddingBtm: PropTypes.bool
+}
+
+Container.defaultProps = {
+  paddingTop: true,
+  paddingBtm: true
 }

components/atoms/Container/Container.module.css

@@ -1,3 +1,11 @@
 .containerW {
   @apply container;
+
+  &.paddingTop {
+    @apply pt-12;
+  }
+
+  &.paddingBtm {
+    @apply pb-12;
+  }
 }

components/atoms/Heading/Heading.js

@@ -0,0 +1,43 @@
+import createMarkup from '@/functions/createMarkup'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+/**
+ * Render the Heading component.
+ *
+ * @param {object} props           The props object.
+ * @param {string} props.children  The elements or text you'd like to render inside the heading.
+ * @param {string} props.className The optional classname.
+ * @param {string} props.id        The optional ID.
+ * @param {string} props.tag       The tag name you'd like the heading to render as.
+ * @return {Element}               The Heading element.
+ */
+export default function Heading({children, className, id, tag}) {
+  if (typeof children === 'string') {
+    return React.createElement(tag, {
+      className,
+      id,
+      dangerouslySetInnerHTML: createMarkup(children)
+    })
+  } else {
+    return React.createElement(
+      tag,
+      {
+        className,
+        id
+      },
+      children
+    )
+  }
+}
+
+Heading.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+  className: PropTypes.string,
+  id: PropTypes.string,
+  tag: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6'])
+}
+
+Heading.defaultProps = {
+  tag: 'h1'
+}

components/atoms/Heading/Heading.stories.mdx

@@ -0,0 +1,62 @@
+import {Meta, Story, Canvas} from '@storybook/addon-docs/blocks'
+
+import Heading from '.'
+
+<Meta title="Components/Atoms/Heading" component={Heading} />
+
+# Heading
+
+Use this component inside other components when you need to dynamically set the heading tag that's used.
+For example, a card's heading might need to be `<h2>` in one place but an `<h3>` when used somewhere else.
+
+This component is deliberatley unstyled. Pass down class names with the `className` prop.
+
+<Canvas>
+  <Story name="Component">
+    <Heading>This is a heading</Heading>
+  </Story>
+</Canvas>
+
+# Tag
+
+`<h1>` through `<h6>` tags are supported.
+
+<Canvas>
+  <Story name="Tag">
+    <Heading tag="h1">This is an h1</Heading>
+    <Heading tag="h2">This is an h2</Heading>
+    <Heading tag="h3">This is an h3</Heading>
+    <Heading tag="h4">This is an h4</Heading>
+    <Heading tag="h5">This is an h5</Heading>
+    <Heading tag="h6">This is an h6</Heading>
+  </Story>
+</Canvas>
+
+# Markup Support
+
+This component supports various types of children content including strings of HTML and standard JSX. The following shows both content types being passed in as children.
+
+<Canvas>
+  <Story name="Markup Support">
+    <Heading tag="h1">{'<strong>String</strong> of HTML Example'}</Heading>
+    <Heading tag="h1">
+      <strong>Object</strong> of JSX Example
+    </Heading>
+  </Story>
+</Canvas>
+
+## Controls
+
+export const Template = (args) => <Heading {...args}>{args.children}</Heading>
+
+<Canvas>
+  <Story
+    name="Controls"
+    args={{
+      tag: 'h1',
+      children: 'This is a heading'
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>

components/atoms/Heading/index.js

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

components/atoms/Separator/Separator.js

@@ -1,7 +1,6 @@
 import cn from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
-import Container from '../Container'
 import styles from './Separator.module.css'
 
 /**
@@ -19,9 +18,7 @@ export default function Separator({className, fullWidth}) {
       {fullWidth ? (
         <hr className={cn(styles.separator, className)} />
       ) : (
-        <Container>
-          <hr className={cn(styles.separator, className)} />
-        </Container>
+        <hr className={cn(styles.separator, className)} />
       )}
     </>
   )