Merge Develop branch to Main branch for auto deployment

src/app.js

@@ -9,37 +9,37 @@ import {
   NotFoundView,
   RegistrationView,
   TravelView,
+  Knit9View,
 } from './views'
 
 import { Header, Footer, Banner } from '@components/layout'
 
-const menuOptions = [
-  {
-    path: '/',
-    label: 'Home',
-    view: <HomeView />,
-  },
+const pastKnits = [
+  { path: '/past-knits/knit9', label: 'KNIT 9'},
+  { path: 'https://learn.fabric-testbed.net/knowledge-base/knit-8-a-fabric-community-workshop/', label: 'KNIT 8' },
+  { path: 'https://learn.fabric-testbed.net/knowledge-base/knit-7-a-fabric-community-workshop/', label: 'KNIT 7' },
   {
-    path: '/registration',
-    label: 'Registration',
-    view: <RegistrationView />,
+    label: 'Additional KNITs',
+    subsubItems: [
+      { path: 'https://learn.fabric-testbed.net/knowledge-base/knit-6-a-fabric-community-workshop/', label: 'KNIT 6' },
+      { path: 'https://learn.fabric-testbed.net/knowledge-base/knit-5-a-fabric-community-workshop/', label: 'KNIT 5' },
+      { path: 'https://learn.fabric-testbed.net/knowledge-base/knit-winter-21-a-fabric-community-workshop', label: 'KNIT 4' },
+    ],
   },
+]
+
+const menuOptions = [
+  { path: '/', label: 'Home' },
+  { path: '/registration', label: 'Registration' },
+  { path: '/travel', label: 'Travel Info' },
+  { path: '/cfa', label: 'Calls for Action' },
+  { path: '/agenda', label: 'Agenda' },
   {
-    path: '/travel',
-    label: 'Travel Info',
-    view: <TravelView />,
+    label: 'Past KNITs',
+    path: '/past-knits', // Parent path
+    subItems: pastKnits,
   },
-  {
-    path: '/cfa',
-    label: 'Calls for Action',
-    view: <CfaView />,
-  }
-  // {
-  //   path: '/agenda',
-  //   label: 'Agenda',
-  //   view: <AgendaView />,
-  // }
-]
+];
 
 export const App = () => {
   return (
@@ -49,18 +49,15 @@ export const App = () => {
       <Menu options={ menuOptions } />
       <main>
         <Routes>
-          {
-            // we'll build the routes from the main menu items.
-            // note this implementation only supports a flat,
-            // one-level navigation structure.
-            menuOptions.map(({ path, view, label }) => (
-              <Route
-                key={ `route-${ label }` }
-                path={ path }
-                element={ view }
-              />
-            ))
-          }
+          <Route path="/" element={ <HomeView /> } />
+          <Route path="/registration" element={ <RegistrationView /> } />
+          <Route path="/travel" element={ <TravelView /> } />
+          <Route path="/cfa" element={ <CfaView /> } />
+          <Route path="/agenda" element={ <AgendaView /> } />
+          <Route path="/past-knits">
+            <Route path="knit9" element={ <Knit9View /> } />
+          </Route>
+
           <Route path="__markdown" element={ <MarkdownView /> } />
           <Route path="*" element={ <NotFoundView /> } />
         </Routes>

src/components/icons/chevron-icons.js

@@ -0,0 +1,50 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+const ChevronIcon = ({ size = 24, fill = "#000", children, ...rest }) => (
+  <svg
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    height={`${size}px`}
+    width={`${size}px`}
+    fill={fill}
+    viewBox="0 0 24 24"
+    {...rest}
+  >
+    {children}
+  </svg>
+);
+
+export const ChevronUpIcon = props => (
+  <ChevronIcon {...props}>
+    <path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z" />
+    <path d="M0 0h24v24H0z" fill="none" />
+  </ChevronIcon>
+);
+
+export const ChevronDownIcon = props => (
+  <ChevronIcon {...props}>
+    <path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" />
+    <path d="M0 0h24v24H0z" fill="none" />
+  </ChevronIcon>
+);
+
+export const ChevronLeftIcon = props => (
+  <ChevronIcon {...props}>
+    <path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z" />
+  </ChevronIcon>
+);
+
+export const ChevronRightIcon = props => (
+  <ChevronIcon {...props}>
+    <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" />
+  </ChevronIcon>
+);
+
+const requiredProps = {
+  fill: PropTypes.string,
+  size: PropTypes.number,
+  children: PropTypes.node,
+};
+
+ChevronIcon.propTypes = requiredProps;

src/components/icons/index.js

@@ -0,0 +1,2 @@
+export * from './chevron-icons'
+export * from './link-icons'

src/components/link/external-link.js

@@ -1,6 +1,6 @@
 import { Fragment } from 'react'
 import { BaseLinkPropTypes } from './'
-import { ExternalLinkIcon } from './'
+import { ExternalLinkIcon } from '../icons'
 import { Button, Link } from '@mui/joy'
 
 export const ExternalLink = ({ to, children, button, ...props }) => {
@@ -25,8 +25,8 @@ export const ExternalLink = ({ to, children, button, ...props }) => {
             target="_blank"
             rel="noopener noreferrer"
             { ...props }
-          >{ children }</Link>
-          <ExternalLinkIcon /> 
+          >{ children }<ExternalLinkIcon /> </Link>
+
         </Fragment>
       )}
     </Fragment>

src/components/link/index.js

@@ -1,4 +1,3 @@
 export * from './link'
-export * from './link-icon'
 export * from './external-link'
 export * from './mail-to-link'

src/components/link/mail-to-link.js

@@ -1,6 +1,6 @@
 import { Fragment } from 'react'
 import { BaseLinkPropTypes } from './'
-import { MailtoLinkIcon } from './'
+import { MailtoLinkIcon } from '../icons'
 
 export const MailtoLink = ({ to, children }) => {
   return (

src/components/menu/desktop-menu/index.js

@@ -0,0 +1,70 @@
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+import { NavLink, useLocation } from 'react-router-dom'
+import { ChevronDownIcon } from '../../icons/chevron-icons'
+import { MenuContainer, MenuLink, MenuItem  } from './menuComponents'
+import { Submenu, SubmenuHeader } from './submenuComponents'
+
+export const DesktopMenu = ({ options = [] }) => {
+  const location = useLocation() // used to determine active paths
+  const [openSubmenu, setOpenSubmenu] = useState(-1)
+
+  const handleOpenSubmenu = (index) => () => setOpenSubmenu(index)
+  const handleCloseSubmenu = () => setOpenSubmenu(-1)
+
+  // determine if a path is active
+  const isActive = (path, subItems) => {
+    if (location.pathname === path) return true; // direct match
+    if (subItems) {
+      return subItems.some((item) =>
+        location.pathname.startsWith(item.path)
+      )
+    }
+    return false
+  }
+
+  return (
+    <MenuContainer role="navigation" aria-label="Desktop menu">
+      {options.map(({ label, path, subItems }, index) => (
+        <MenuItem
+          key={path || label}
+          onMouseOver={subItems ? handleOpenSubmenu(index) : undefined}
+          onMouseOut={subItems ? handleCloseSubmenu : undefined}
+        >
+          {subItems ? (
+            <>
+              <SubmenuHeader
+                active={isActive(path, subItems)}
+                open={openSubmenu === index}
+                aria-label={`${label} submenu`}
+              >
+                {label}
+                <ChevronDownIcon size={ 16 } fill="var(--knit-palette-primary-900)"/>
+              </SubmenuHeader>
+              {openSubmenu === index && <Submenu items={subItems} />}
+            </>
+          ) : (
+            <MenuLink as={NavLink} to={path} active={isActive(path)}>
+              {label}
+            </MenuLink>
+          )}
+        </MenuItem>
+      ))}
+    </MenuContainer>
+  )
+}
+
+DesktopMenu.propTypes = {
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string.isRequired,
+      path: PropTypes.string,
+      subItems: PropTypes.arrayOf(
+        PropTypes.shape({
+          label: PropTypes.string.isRequired,
+          path: PropTypes.string.isRequired,
+        })
+      ),
+    })
+  ),
+}

src/components/menu/desktop-menu/menuComponents.js

@@ -0,0 +1,49 @@
+import PropTypes from 'prop-types'
+import { styled } from '@mui/system'
+import { Box, List } from '@mui/joy'
+import { Link } from '@components/link'
+
+export const MenuContainer = ({ children }) => (
+  <List
+    orientation="horizontal"
+    aria-label="menu bar"
+    role="menubar"
+    sx={{
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      height: '100%',
+    }}
+  >
+    {children}
+  </List>
+)
+
+MenuContainer.propTypes = {
+  children: PropTypes.node.isRequired,
+}
+
+export const MenuItem = styled(Box)({
+  position: 'relative',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  height: '100%',
+  backgroundColor: 'transparent',
+  transition: 'background-color 250ms',
+  '&:hover': {
+    backgroundColor: '#0001',
+    color: 'var(--knit-palette-primary-dark)',
+  },
+})
+
+export const MenuLink = styled(Link)({
+  padding: '0.5rem 1rem',
+  textDecoration: 'none',
+  textTransform: 'uppercase',
+  letterSpacing: '0.75px',
+  color: 'var(--knit-palette-primary-900)',
+  '&[aria-current="page"]': {
+    backgroundColor: '#0002',
+  },
+})