Merge branch 'staging' into develop

Author: gregrickaby

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/Button/Button.module.css

@@ -1,5 +1,5 @@
 .button {
-  @apply inline-flex items-center justify-center rounded border transition-colors duration-150 ease-in-out cursor-pointer uppercase font-secondary;
+  @apply inline-flex items-center justify-center rounded border transition-colors duration-150 ease-in-out cursor-pointer uppercase;
 
   & svg {
     @apply ml-12;
@@ -21,19 +21,19 @@
 
   /* SIZES */
   &.lg {
-    @apply px-16 py-12 text-h5;
+    @apply px-6 py-3;
 
     line-height: 1.5625rem;
   }
 
   &.md {
-    @apply px-16 py-12 text-sm;
+    @apply px-3 py-1.5;
 
     line-height: 1.25rem;
   }
 
   &.sm {
-    @apply px-16 py-8 text-caption;
+    @apply px-1.5 py-0.5;
 
     line-height: 1.0625rem;
   }
@@ -44,15 +44,15 @@
 
   /* TYPES */
   &.primary {
-    @apply bg-primary text-white border-white border-opacity-0;
+    @apply bg-white;
 
     &.disabled {
       @apply opacity-50;
     }
   }
 
   &.secondary {
-    @apply bg-white bg-opacity-0 text-primary border-primary;
+    @apply bg-black text-white;
 
     &.disabled {
       @apply opacity-50;

components/atoms/Code/Code.js

@@ -1,19 +1,18 @@
 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'
+import styles from './Code.module.css'
 
 /**
  * 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.
+ * @param {object} props           The component attributes as props.
+ * @param {string} props.className Optional classname.
+ * @param {string} props.id        The optional ID.
+ * @param {string} props.content   The content for inside the code block.
+ * @return {Element}               The Code component.
  */
 export default function Code({id, className, content}) {
   // Use the className to pass the langauge.

components/atoms/Code/Code.module.css

@@ -2,6 +2,6 @@
   @apply mb-40;
 
   & > pre {
-    @apply rounded-larger;
+    @apply rounded;
   }
 }

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'
+}