Merge branch 'staging' into feature/149-card

Author: itsamoreh

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/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)} />
       )}
     </>
   )

components/common/Layout.js

@@ -28,9 +28,6 @@ export default function Layout({children, seo, hasJsonLd}) {
         }
       ]
 
-  // Extract breadcrumbs from SEO.
-  const breadcrumbs = seo?.breadcrumbs
-
   return (
     <>
       <NextSeo
@@ -58,21 +55,7 @@ export default function Layout({children, seo, hasJsonLd}) {
       )}
       <Meta />
       <Header />
-      <main>
-        {/* TODO: extract breadcrumbs to component and make pretty. */}
-        {!!breadcrumbs && !!breadcrumbs.length && (
-          <div>
-            {breadcrumbs.map((breadcrumb, index) => (
-              <span key={index}>
-                <a href={breadcrumb?.url}>{breadcrumb?.text}</a>
-                {index < breadcrumbs.length - 1 && <span> &raquo; </span>}
-              </span>
-            ))}
-          </div>
-        )}
-
-        {children}
-      </main>
+      <main>{children}</main>
       <Footer social={seo?.social} siteTitle={seo?.siteTitle} />
     </>
   )

components/molecules/AlgoliaResults/AlgoliaResults.js

@@ -1,6 +1,5 @@
 import {searchResultsClient} from '@/api/algolia/connector'
 import {AlgoliaContext} from '@/components/common/AlgoliaProvider'
-import cn from 'classnames'
 import PropTypes from 'prop-types'
 import React, {useContext} from 'react'
 import {Configure, InstantSearch} from 'react-instantsearch-dom'
@@ -21,7 +20,7 @@ import SearchResults from './templates/SearchResults'
 export default function AlgoliaResults({config}) {
   const {indexName} = useContext(AlgoliaContext)
   return (
-    <section className={cn('container', styles.algoliaResults)}>
+    <div className={styles.algoliaResults}>
       {config.query !== '' && (
         <InstantSearch
           searchClient={config.query !== '' ? searchResultsClient : ''}
@@ -32,7 +31,7 @@ export default function AlgoliaResults({config}) {
         </InstantSearch>
       )}
       {config.query === '' && <NoResults query={config.query} />}
-    </section>
+    </div>
   )
 }
 

components/molecules/AlgoliaResults/AlgoliaResults.module.css

@@ -1,16 +1,7 @@
 .algoliaResults {
-  @apply pt-20 pb-40;
-
-  & h1 {
-    @apply mb-8;
-
-    font-size: 30px;
-  }
-
   /* Results Header */
   & .resultsHeader {
-    @apply flex justify-between items-center;
-    @apply mb-32;
+    @apply flex justify-between items-center mb-12;
 
     & .total {
       & span {
@@ -44,24 +35,20 @@
       @apply text-center;
 
       & > ul {
-        @apply grid gap-12 grid-cols-1 text-left;
+        @apply grid gap-4 grid-cols-1 text-left;
       }
 
       /* Hit */
       & .hit {
-        @apply p-20 border;
-
-        & h3 {
-          @apply font-semibold;
-        }
+        @apply p-8 border;
 
         & .date {
-          @apply italic mb-8;
+          @apply italic mb-4;
         }
       }
 
       & > button {
-        @apply inline-block m-auto mt-44 border rounded px-24 py-8 transition-colors duration-200 ease-in-out;
+        @apply inline-block m-auto mt-8 border rounded p-4 transition-colors duration-200 ease-in-out;
 
         &[disabled] {
           @apply opacity-25 cursor-not-allowed;