Merge pull request #680 from NASA-IMPACT/scaffold-user-guide

Add user guide placeholder page and "learn" menu dropdown
NASA-IMPACT · Sep 16, 2024 · 73a4dea · 73a4dea
2 parents 8e5cbb2 + 874c12c
commit 73a4dea
Show file tree

Hide file tree

Showing 11 changed files with 372 additions and 116 deletions.
diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
@@ -126,7 +126,7 @@ jobs:
 
       - name: Upload test results
         if: always()
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v4
         with:
           name: playwright-report
           path: playwright-report

diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
     "@reach/combobox": "^0.18.0",
     "@reach/disclosure": "^0.18.0",
     "@reach/listbox": "^0.18.0",
+    "@reach/menu-button": "^0.18.0",
     "@reach/visually-hidden": "^0.18.0",
     "@turf/area": "^6.5.0",
     "@turf/bbox": "^6.5.0",

diff --git a/playwright/e2e/header.spec.ts b/playwright/e2e/header.spec.ts
@@ -22,12 +22,12 @@ test.describe("Header", () => {
     await expect(nasaLogo).toBeVisible()
 
     const navItems = await page.locator("nav").locator("li")
-    await expect(navItems).toHaveCount(5)
+    await expect(navItems).toHaveCount(6)
 
     await expect(navItems.nth(0)).toHaveText("Explore")
-    await expect(navItems.nth(1)).toHaveText("Glossary")
-    await expect(navItems.nth(2)).toHaveText("About")
-    await expect(navItems.nth(3)).toHaveText("FAQS")
-    await expect(navItems.nth(4)).toHaveText("Contact")
+    await expect(navItems.nth(2)).toHaveText("Glossary")
+    await expect(navItems.nth(3)).toHaveText("FAQ")
+    await expect(navItems.nth(4)).toHaveText("About")
+    await expect(navItems.nth(5)).toHaveText("Contact")
   })
 })
diff --git a/src/components/__tests__/__snapshots__/header.test.js.snap b/src/components/__tests__/__snapshots__/header.test.js.snap
@@ -323,10 +323,109 @@ exports[`Header renders correctly 1`] = `
         </button>
       </div>
       <nav
-        className="header__PageNavWrapper-sc-4sefiz-3 jXxXzR"
+        className="header__PageNavWrapper-sc-4sefiz-3 hUCvO"
         mode="lightTheme"
         role="navigation"
-      />
+      >
+        <ul
+          className="nav__PrimeMenu-sc-1uj1llz-3 hqkQAg"
+          mode="lightTheme"
+        >
+          <li>
+            <a
+              className="nav__StyledLink-sc-1uj1llz-0 gvtfTJ"
+              href="/explore"
+              onClick={[Function]}
+              title="View the explore page"
+            >
+              Explore
+            </a>
+          </li>
+          <li>
+            <a
+              className="nav__StyledLink-sc-1uj1llz-0 gvtfTJ"
+            >
+              Learn
+               
+              <svg
+                height="16"
+                role="img"
+                version="1.1"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <title>
+                  Chevron Down
+                </title>
+                <rect
+                  fill="none"
+                  height="16"
+                  width="16"
+                />
+                <polygon
+                  fill="#262a31"
+                  points="12.586,4.586 8,9.172 3.414,4.586 2,6 8,12 14,6"
+                />
+              </svg>
+            </a>
+            <section
+              className="nav__PrimeMenuBlock-sc-1uj1llz-1 bzpwcB"
+            >
+              <h6
+                className="nav__PrimeMenuBlockTitle-sc-1uj1llz-2 dWwnBZ"
+              >
+                Learn
+              </h6>
+              <ul
+                aria-label="submenu"
+                className="nav__PrimeSubmenu-sc-1uj1llz-4 juhfVu"
+              >
+                <li>
+                  <a
+                    className="nav__StyledLink-sc-1uj1llz-0 gvtfTJ"
+                    href="/glossary"
+                    onClick={[Function]}
+                    title="Explore the glossary"
+                  >
+                    Glossary
+                  </a>
+                </li>
+                <li>
+                  <a
+                    className="nav__StyledLink-sc-1uj1llz-0 gvtfTJ"
+                    href="/faq"
+                    onClick={[Function]}
+                    title="Explore the FAQ"
+                  >
+                    FAQ
+                  </a>
+                </li>
+              </ul>
+            </section>
+          </li>
+          <li>
+            <a
+              className="nav__StyledLink-sc-1uj1llz-0 gvtfTJ"
+              href="/about"
+              onClick={[Function]}
+              title="Learn more"
+            >
+              About
+            </a>
+          </li>
+          <li>
+            <a
+              className="nav__StyledLink-sc-1uj1llz-0 gvtfTJ"
+              href="/contact"
+              onClick={[Function]}
+              title="Send feedback"
+            >
+              Contact
+            </a>
+          </li>
+        </ul>
+      </nav>
     </div>
   </header>
 </div>

diff --git a/src/components/header.js b/src/components/header.js
@@ -5,10 +5,11 @@ import { Link } from "gatsby"
 
 import { colors, layout, breakpoints } from "../theme"
 import { CaseiLogoIcon, CloseIcon, HamburgerIcon } from "../icons"
-import { NEGATIVE } from "../utils/constants"
+import { NEGATIVE, POSITIVE } from "../utils/constants"
 import StickyBanner from "./sticky-banner"
 import Button from "./button"
 import NasaLogoIcon from "../icons/nasa-logo"
+import NavList from "./nav"
 
 const reveal = keyframes`
 0% {
@@ -78,7 +79,7 @@ const PageNavWrapper = styled.div`
   z-index: 20;
   display: flex;
   flex-flow: column nowrap;
-  padding: 5rem 1rem 1rem;
+  padding: 5rem 2rem 1rem;
   overflow: auto;
   pointer-events: auto;
   background-color: ${({ mode }) => mode && colors[mode].background};
@@ -173,18 +174,11 @@ const PageNavGlobalStyle = createGlobalStyle`
   }
 `
 
-const Header = ({ shortname, children, mode }) => {
-  const offsetCalculator = (scrollDirection, _, currentScroll) => {
-    if (scrollDirection === "scroll-down" && currentScroll > 250) {
-      return `-${document.getElementById("main-header").clientHeight}px`
-    } else {
-      return 0
-    }
-  }
-
+const Header = ({ shortname, mode }) => {
   const [navRevealed, setNavRevealed] = useState(false)
+
   return (
-    <StickyBanner offsetCalculator={offsetCalculator} navRevealed={navRevealed}>
+    <StickyBanner navRevealed={navRevealed}>
       <PageHeaderSelf id="main-header" mode={mode}>
         <PageHeaderInner>
           <PageHeadline>
@@ -225,7 +219,10 @@ const Header = ({ shortname, children, mode }) => {
             role="navigation"
             revealed={navRevealed}
           >
-            {children}
+            <NavList
+              mode={POSITIVE}
+              onLinkClick={() => setNavRevealed(false)}
+            />
           </PageNavWrapper>
         </PageHeaderInner>
       </PageHeaderSelf>

diff --git a/src/components/layout/layout.js b/src/components/layout/layout.js
@@ -17,7 +17,6 @@ import "@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css"
 import "../global.css"
 
 import Header from "../header"
-import Nav from "../nav"
 import Footer from "../footer"
 
 import { POSITIVE } from "../../utils/constants"
@@ -45,12 +44,8 @@ const Layout = ({ children }) => {
 
   return (
     <Container id="top" data-cy="page">
-      <Header shortname={data.site.siteMetadata.shortname} mode={POSITIVE}>
-        <Nav mode={POSITIVE} />
-      </Header>
-
+      <Header shortname={data.site.siteMetadata.shortname} mode={POSITIVE} />
       <main>{children}</main>
-
       <Footer shortname={data.site.siteMetadata.shortname} />
     </Container>
   )