-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* add colour for header border * modify top header to match design * add translations for topnavbar * modify paragraph line height * remove default ul, ol, and li styling and apply to TextRender * add styling to list on homepage * create TopNavBar, add animations to menu.css * add TopNavBar to Layout.js * apply correct fonts to TopNavBar * replace margins in img/lang toggle with padding * add aria labels, create unit test * create story entry for TopNavBar * augment TopNavBar unit test * add featureflag for TopNavBar in Layout.js
- Loading branch information
Showing
15 changed files
with
436 additions
and
348 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,142 @@ | ||
| import Link from "next/link"; | ||
| import React, { useState } from "react"; | ||
|
|
||
| export function TopNavBar({ | ||
| homeLink, | ||
| homeLinkLabel, | ||
| updatesLink, | ||
| updatesLinkLabel, | ||
| projectsLink, | ||
| projectsLinkLabel, | ||
| navAriaLabel, | ||
| buttonAriaLabel, | ||
| }) { | ||
| const [isOpen, setIsOpen] = useState(false); | ||
| const [isTransitioningClosed, setIsTransitioningClosed] = useState(false); | ||
|
|
||
| //Handles the opening and closing of our nav | ||
| const handleClick = () => { | ||
| isOpen ? animateCloseMenu() : setIsOpen(!isOpen); | ||
| }; | ||
|
|
||
| const animateCloseMenu = () => { | ||
| setIsTransitioningClosed(true); | ||
| setTimeout(() => { | ||
| setIsTransitioningClosed(false); | ||
| setIsOpen(!isOpen); | ||
| }, 250); | ||
| }; | ||
|
|
||
| return ( | ||
| <nav | ||
| aria-label={navAriaLabel} | ||
| className="bg-custom-gray-lightest min-h-[64px] flex justify-end" | ||
| > | ||
| {/* Desktop Nav Menu */} | ||
| <div className="hidden lg:flex w-full self-center justify-between layout-container"> | ||
| <Link href={homeLink} className="font-body font-semibold text-h3"> | ||
| {homeLinkLabel} | ||
| </Link> | ||
| <div className="lg:mr-16"> | ||
| <Link href={projectsLink} className="font-body mr-10 text-p"> | ||
| {projectsLinkLabel} | ||
| </Link> | ||
| <Link href={updatesLink} className="font-body text-p"> | ||
| {updatesLinkLabel} | ||
| </Link> | ||
| </div> | ||
| </div> | ||
| {/* Mobile Nav Menu */} | ||
| <div className="static lg:hidden mt-5 flex flex-col w-full mr-4"> | ||
| <button | ||
| aria-label={buttonAriaLabel} | ||
| aria-haspopup="true" | ||
| aria-expanded={isOpen ? "true" : "false"} | ||
| aria-controls="menu" | ||
| onClick={handleClick} | ||
| className="self-end" | ||
| > | ||
| {isOpen ? ( | ||
| <div | ||
| className={`${ | ||
| isTransitioningClosed ? "fade-out" : "fade-in" | ||
| } -mt-1 p-1.5`} | ||
| > | ||
| <svg | ||
| width="20" | ||
| height="20" | ||
| viewBox="0 0 17 17" | ||
| fill="none" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| className="exit-icon" | ||
| > | ||
| <path d="M11.3775 8.25L16.0683 3.55922C16.6439 2.98359 16.6439 2.05031 16.0683 1.47422L15.0258 0.431719C14.4502 -0.143906 13.5169 -0.143906 12.9408 0.431719L8.25 5.1225L3.55922 0.431719C2.98359 -0.143906 2.05031 -0.143906 1.47422 0.431719L0.431719 1.47422C-0.143906 2.04984 -0.143906 2.98312 0.431719 3.55922L5.1225 8.25L0.431719 12.9408C-0.143906 13.5164 -0.143906 14.4497 0.431719 15.0258L1.47422 16.0683C2.04984 16.6439 2.98359 16.6439 3.55922 16.0683L8.25 11.3775L12.9408 16.0683C13.5164 16.6439 14.4502 16.6439 15.0258 16.0683L16.0683 15.0258C16.6439 14.4502 16.6439 13.5169 16.0683 12.9408L11.3775 8.25Z" /> | ||
| </svg> | ||
| </div> | ||
| ) : ( | ||
| <div className={`${isTransitioningClosed ? "fade-in" : ""} -mt-1`}> | ||
| <svg | ||
| width="32" | ||
| height="32" | ||
| viewBox="0 0 24 24" | ||
| fill="none" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| > | ||
| <path | ||
| d="M4 18L20 18" | ||
| stroke="#000000" | ||
| stroke-width="2" | ||
| stroke-linecap="round" | ||
| /> | ||
| <path | ||
| d="M4 12L20 12" | ||
| stroke="#000000" | ||
| stroke-width="2" | ||
| stroke-linecap="round" | ||
| /> | ||
| <path | ||
| d="M4 6L20 6" | ||
| stroke="#000000" | ||
| stroke-width="2" | ||
| stroke-linecap="round" | ||
| /> | ||
| </svg> | ||
| </div> | ||
| )} | ||
| </button> | ||
| {isOpen ? ( | ||
| <ul | ||
| id="menu" | ||
| className={`${ | ||
| isTransitioningClosed ? "fade-out" : "fade-in" | ||
| } absolute w-full flex flex-col mt-8 pb-4 bg-custom-gray-lightest drop-shadow-xl`} | ||
| > | ||
| <li | ||
| className={`${ | ||
| isTransitioningClosed ? "decrease-margin" : "expand-margin" | ||
| } my-2 ml-4`} | ||
| > | ||
| <Link href={homeLink}>{homeLinkLabel}</Link> | ||
| </li> | ||
| <li | ||
| className={`${ | ||
| isTransitioningClosed ? "decrease-margin" : "expand-margin" | ||
| } my-2 ml-4`} | ||
| > | ||
| <Link href={projectsLink}>{projectsLinkLabel}</Link> | ||
| </li> | ||
| <li | ||
| className={`${ | ||
| isTransitioningClosed ? "decrease-margin" : "expand-margin" | ||
| } my-2 ml-4`} | ||
| > | ||
| <Link href={updatesLink}>{updatesLinkLabel}</Link> | ||
| </li> | ||
| </ul> | ||
| ) : ( | ||
| "" | ||
| )} | ||
| </div> | ||
| </nav> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import React from "react"; | ||
| import { TopNavBar } from "./TopNavBar"; | ||
|
|
||
| export default { | ||
| title: "Components/Molecules/TopNavBar", | ||
| component: TopNavBar, | ||
| }; | ||
|
|
||
| const Template = (args) => <TopNavBar {...args}></TopNavBar>; | ||
|
|
||
| export const Primary = Template.bind({}); | ||
|
|
||
| Primary.args = { | ||
| homeLink: "#home", | ||
| homeLinkLabel: "Home", | ||
| updatesLink: "#updates", | ||
| updatesLinkLabel: "Updates", | ||
| projectsLink: "#projects", | ||
| projectsLinkLabel: "Projects", | ||
| navAriaLabel: "nav-aria-label", | ||
| buttonAriaLabel: "button-aria-label", | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| /** | ||
| * @jest-environment jsdom | ||
| */ | ||
| import { render, screen } from "@testing-library/react"; | ||
| import "@testing-library/jest-dom/extend-expect"; | ||
| import { axe, toHaveNoViolations } from "jest-axe"; | ||
| import { Primary } from "./TopNavBar.stories"; | ||
|
|
||
| expect.extend(toHaveNoViolations); | ||
|
|
||
| describe("TopNavBar", () => { | ||
| it("renders the TopNavBar with expected props on desktop", () => { | ||
| render(<Primary {...Primary.args} />); | ||
| expect(screen.getByLabelText("nav-aria-label")).toBeTruthy(); | ||
| expect(screen.getByLabelText("button-aria-label")).toBeTruthy(); | ||
| expect(screen.getByText("Home")).toBeTruthy(); | ||
| expect(screen.getByText("Updates")).toBeTruthy(); | ||
| }); | ||
|
|
||
| it("renders the TopNavBar with expected props on mobile", () => { | ||
| render(<Primary {...Primary.args} />); | ||
| global.innerWidth = 500; | ||
| expect(screen.getByLabelText("nav-aria-label")).toBeTruthy(); | ||
| expect(screen.getByLabelText("button-aria-label")).toBeTruthy(); | ||
| expect(screen.getByText("Home")).toBeTruthy(); | ||
| expect(screen.getByText("Updates")).toBeTruthy(); | ||
| }); | ||
|
|
||
| it("has no a11y violations", async () => { | ||
| const { container } = render(<Primary {...Primary.args} />); | ||
| const results = await axe(container); | ||
| expect(results).toHaveNoViolations(); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,3 @@ | ||
| export default function ListItem(props) { | ||
| return <li>{props.children}</li>; | ||
| return <li className="ml-10 text-[20px]">{props.children}</li>; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,3 @@ | ||
| export default function UnorderedList(props) { | ||
| return <ol>{props.children}</ol>; | ||
| return <ol className="list-decimal">{props.children}</ol>; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,3 @@ | ||
| export default function UnorderedList(props) { | ||
| return <ul>{props.children}</ul>; | ||
| return <ul className="list-disc">{props.children}</ul>; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.