Doc blocks and logo component

Author: dcooney

api/wordpress/_global/getMenus.js

@@ -2,6 +2,8 @@ import {gql} from '@apollo/client'
 import {initializeWpApollo} from '../connector'
 import filterByLocation from '@/api/wordpress/menus/filterByLocation'
 
+// TODO: Rebakah to look at the way this query is set up in terms of file structure
+
 /**
  * Get menu data from WPGraphQL.
  *

api/wordpress/menus/filterByLocation.js

@@ -6,7 +6,7 @@ import formatHeirarchialMenu from '@/api/wordpress/menus/formatHeirarchialMenu'
  * @author WebDevStudios
  * @param {Array} menus     The array of WP menus to filter.
  * @param {Array} locations The array of locations for filtering.
- * @return {object}           An object containing the requested locations as individual objects.
+ * @return {object}         An object containing the requested locations as individual objects.
  */
 export default function filterByLocation(menus, locations) {
   const data = {}

components/atoms/Logo/Logo.js

@@ -0,0 +1,17 @@
+import Link from 'next/link'
+
+export default function Logo() {
+  return (
+    <Link href="/">
+      <a>
+        <img
+          src="/logo.svg"
+          alt="site logo"
+          loading="lazy"
+          height="128"
+          width="128"
+        />
+      </a>
+    </Link>
+  )
+}

components/atoms/Logo/index.js

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

components/common/ActiveLink.js

@@ -1,9 +1,18 @@
+import Link from 'next/link'
 import {useRouter} from 'next/router'
 import PropTypes from 'prop-types'
-import Link from 'next/link'
 import React, {Children} from 'react'
 
-export default function ActiveLink({children, activeClassName, ...props}) {
+/**
+ * Component to set an active link.
+ *
+ * @author WebDevStudios
+ * @see https://nextjs.org/docs/api-reference/next/link
+ * @param {object} children    Child objects for rendering.
+ * @param {object} activeClass The classname for the active element.
+ * @param {object} props.href  The href to be added as a link.
+ */
+export default function ActiveLink({children, activeClass, ...props}) {
   const {asPath} = useRouter()
   const child = Children.only(children)
   const childClassName = child.props.className || ''
@@ -23,7 +32,7 @@ export default function ActiveLink({children, activeClassName, ...props}) {
 
   const className =
     asPath === stripTrailingSlash(props.href) || asPath === props.as
-      ? `${childClassName} ${activeClassName}`.trim()
+      ? `${childClassName} ${activeClass}`.trim()
       : childClassName
 
   return (
@@ -37,6 +46,6 @@ export default function ActiveLink({children, activeClassName, ...props}) {
 
 ActiveLink.propTypes = {
   children: PropTypes.object,
-  activeClassName: PropTypes.string,
+  activeClass: PropTypes.string,
   props: PropTypes.object
 }

components/molecules/Navigation/Navigation.js

@@ -1,6 +1,6 @@
 import ActiveLink from '@/components/common/ActiveLink'
-import styles from './Navigation.module.css'
 import cn from 'classnames'
+import styles from './Navigation.module.css'
 
 /**
  * @param props

components/organisms/Header/Header.js

@@ -1,40 +1,14 @@
-import Link from 'next/link'
-import {useContext, useState} from 'react'
+import Logo from '@/components/atoms/Logo'
+import {MenuContext} from '@/components/common/MenuProvider'
 import AlgoliaSearch from '@/components/molecules/AlgoliaSearch'
 import Navigation from '@/components/molecules/Navigation'
-import styles from './Header.module.css'
-import Hamburger from 'hamburger-react'
-import {MenuContext} from '@/components/common/MenuProvider'
 import cn from 'classnames'
+import {useContext, useState} from 'react'
+import styles from './Header.module.css'
 
 // TODO: Create Storybook for this component.
-// TODO: Split Logo into component.
 // TODO: Create mobile menu.
 
-function Logo() {
-  return (
-    <Link href="/">
-      <a>
-        <img
-          src="/logo.svg"
-          alt="site logo"
-          loading="lazy"
-          height="128"
-          width="128"
-        />
-      </a>
-    </Link>
-  )
-}
-
-function Drawer({menu}) {
-  return (
-    <div className="bg-white dark:bg-gray-900 absolute w-56 h-screen py-12 px-4 top-0 right-0 flex flex-col shadow-md z-50">
-      <Navigation menu={menu} styles={styles} className={styles.header} />
-    </div>
-  )
-}
-
 /**
  * Render the header as a component.
  */
@@ -59,9 +33,6 @@ export default function Header() {
           styles={styles}
           className={cn(styles.primaryMenu, isOpen && styles.open)}
         />
-        <span className="hidden">
-          <Hamburger label="Show menu" toggled={isOpen} toggle={setOpen} />
-        </span>
       </div>
     </header>
   )