@agilant/toga-blox 1.0.5

package/src/components/Header/Header.test.tsx

@@ -0,0 +1,323 @@
+import "../../../dist/main.css";
+import { render, screen } from "@testing-library/react";
+import { describe, test, expect, beforeEach } from "vitest";
+import Header from "./Header";
+import Image from "../Image/Image";
+import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
+import DUMMYICONDATA from "./DUMMYICONDATA.json";
+import { DUMMYNAVDATA } from "../Nav/DUMMYNAVDATA.json";
+import DynamicIconList from "../GenericList/templates/DynamicIconList";
+import GenericList from "../GenericList/GenericList";
+import Badge from "../Badge";
+import Text from "../Text/Text";
+import Nav from "../Nav";
+
+describe("<Header /> with all props (badge, icons, input, logo)", () => {
+	beforeEach(() => {
+		render(
+			<Header
+				nav={
+					<Nav
+						navData={DUMMYNAVDATA}
+						navBackgroundColor={"#FFFFF"}
+						parentHoverBackground={"blue"}
+						parentHoverFontColor={"white"}
+						parentHoverUnderline={true}
+						parentHoverBorderColor={"none"}
+						parentShape={"cornered"}
+						parentBackground={"none"}
+						parentBorderColor={"none"}
+						submenuBackgroundColor={"blue"}
+						submenuHoverBackground={"white"}
+						submenuHoverBorderStyle={"bottom"}
+						submenuHoverBorderColor={"black"}
+						mobileBreakpoint={"extraLarge"}
+						accordionParentStyle={
+							"cornered p-2 w-full border-b-2 border-b-blue-700 text-black"
+						}
+						accordionExpandedStyle={"pl-2 py-3"}
+					/>
+				}
+				logo={
+					<Image
+						src="../../../assets/Logo.png"
+						alt="Generic Company Logo."
+						background={false}
+						additionalClasses=" w-40 "
+					/>
+				}
+				badge={
+					<Badge
+						type="href"
+						to="#"
+						color="green"
+						hoverColor="green"
+						borderColor="none"
+						tagStyle={false}
+						mobileIcon={getFontAwesomeIcon("phone")}
+						mobileIconLabel="Contact Us"
+						onClick={() => alert("Redirect to Contact Us page")}
+						image={
+							<Image
+								src="../../../assets/contact-image.png"
+								alt=""
+								background={false}
+								additionalClasses="flex justify-center w-8 h-8 max-md:hidden"
+							/>
+						}
+						text={
+							<>
+								<Text
+									size="sm"
+									color="primary"
+									fontFamily="serif"
+									text="Contact Us"
+									tag="h2"
+									additionalClasses="pl-2 pb-0 font-bold"
+								/>
+								<Text
+									size="xs"
+									color="primary"
+									fontFamily="serif"
+									text="1-800-800-8000"
+									tag="p"
+									additionalClasses="pl-2 pt-0"
+								/>
+							</>
+						}
+					/>
+				}
+				backgroundColor="gray"
+				mobileOpenIcon={getFontAwesomeIcon("hamburger")}
+				mobileCloseIcon={getFontAwesomeIcon("X")}
+				mobileLeft={true}
+				mobileRight={false}
+				logoHoverColor="blue"
+				logoBorderRadius={true}
+				hasIcons={true}
+				icons={
+					<GenericList
+						data={DUMMYICONDATA.DUMMYICONCOMPASSDATA}
+						renderItem={(item) => <DynamicIconList item={item} />}
+						itemHeight={20}
+						containerHeight={72}
+						listType="unordered"
+						containerClasses="bg-gray-100 w-36 border-2 border-teal-500"
+						listDirection="vertical"
+						hasVirtualization={false}
+					/>
+				}
+				hasSearchBar={true}
+				hasNavItems={true}
+				hasBadge={true}
+			/>
+		);
+	});
+
+	test("renders Header component", () => {
+		expect(screen.getByTestId("header")).toBeInTheDocument();
+	});
+
+	test("renders correct background color class", () => {
+		const header = screen.getByTestId("header");
+		expect(header).toHaveClass("bg-slate-200");
+	});
+
+	test("contains correct logo from Image component", () => {
+		const headerLogo = screen.getByTestId("header-logo");
+		const logoImage = headerLogo.querySelector("img");
+		expect(logoImage).toHaveAttribute("src", "../../../assets/Logo.png");
+	});
+
+	test("contains correct alt text from Image component", () => {
+		const headerLogo = screen.getByTestId("header-logo");
+		const logoImage = headerLogo.querySelector("img");
+		expect(logoImage).toHaveAttribute("alt", "Generic Company Logo.");
+	});
+
+	// TODO: refactor/expand test when nav is created
+	test("contains correct placeholder nav menus", () => {
+		expect(screen.getByTestId("nav")).toBeInTheDocument();
+	});
+
+	// TODO: refactor/expand test when input is added
+	test("contains correct placeholder input", () => {
+		expect(
+			screen.getByTestId("header-placeholder-input")
+		).toBeInTheDocument();
+	});
+
+	test("contains correct badge", () => {
+		expect(screen.getByTestId("header-badge")).toBeInTheDocument();
+
+		const badge = screen.getByTestId("header-badge");
+		expect(badge).toHaveTextContent("Contact Us");
+		expect(badge).toHaveTextContent("1-800-800-8000");
+	});
+
+	test("contains correct icon images", () => {
+		expect(screen.getByTestId("user")).toBeInTheDocument();
+		expect(screen.getByTestId("circle-info")).toBeInTheDocument();
+		expect(screen.getByTestId("bell")).toBeInTheDocument();
+		expect(screen.getByTestId("cart-shopping")).toBeInTheDocument();
+	});
+});
+
+describe("<Header /> with logo and one icon", () => {
+	beforeEach(() => {
+		render(
+			<Header
+				logo={
+					<Image
+						src="../../../assets/Logo.png"
+						alt="Another Generic Company Logo."
+						background={false}
+						additionalClasses=" w-40 "
+					/>
+				}
+				hasMobileMenu={true}
+				backgroundColor="gray"
+				mobileOpenIcon={getFontAwesomeIcon("hamburger")}
+				mobileCloseIcon={getFontAwesomeIcon("X")}
+				mobileLeft={false}
+				mobileRight={true}
+				logoHoverColor="blue"
+				logoBorderRadius={true}
+				hasIcons={true}
+				icons={
+					<GenericList
+						data={DUMMYICONDATA.DUMMYICONCOMPASSDATA}
+						renderItem={(item) => <DynamicIconList item={item} />}
+						itemHeight={20}
+						containerHeight={72}
+						listType="unordered"
+						containerClasses="bg-gray-100 w-36 border-2 border-teal-500"
+						listDirection="vertical"
+						hasVirtualization={false}
+					/>
+				}
+				hasSearchBar={false}
+				hasNavItems={false}
+				hasBadge={false}
+			/>
+		);
+	});
+
+	test("renders Header component", () => {
+		expect(screen.getByTestId("header")).toBeInTheDocument();
+	});
+
+	test("renders correct background color class", () => {
+		const header = screen.getByTestId("header");
+		expect(header).toHaveClass("bg-slate-200");
+	});
+
+	test("contains correct logo from Image component", () => {
+		const headerLogo = screen.getByTestId("header-logo");
+		const logoImage = headerLogo.querySelector("img");
+		expect(logoImage).toHaveAttribute("src", "../../../assets/Logo.png");
+	});
+
+	test("contains correct alt text from Image component", () => {
+		const headerLogo = screen.getByTestId("header-logo");
+		const logoImage = headerLogo.querySelector("img");
+		expect(logoImage).toHaveAttribute(
+			"alt",
+			"Another Generic Company Logo."
+		);
+	});
+
+	test("does not contain badge", () => {
+		expect(
+			document.querySelector('[data-testid="header-badge"]')
+		).toBeNull();
+	});
+
+	test("contains correct icon images", () => {
+		const info = document.querySelector('[data-testid="circle-info"]');
+		expect(info).toBeInTheDocument();
+
+		const notifications = document.querySelector('[data-testid="bell"]');
+		expect(notifications).toBeInTheDocument();
+
+		const cart = document.querySelector('[data-testid="cart-shopping"]');
+		expect(cart).toBeInTheDocument();
+	});
+
+	test("does not contain placeholder input", () => {
+		expect(
+			document.querySelector('[data-testid="header-placeholder-input"]')
+		).toBeNull();
+	});
+
+	test("does not contain nav items", () => {
+		expect(document.querySelector('[data-testid="nav"]')).toBeNull();
+	});
+
+	test("contains mobile open icon on right, not present on left", () => {
+		const rightMobileOpenIcon = document.querySelector(
+			'[data-testid="header-right-mobile-open-icon"]'
+		);
+		expect(rightMobileOpenIcon).not.toBeNull();
+
+		const leftMobileOpenIcon = document.querySelector(
+			'[data-testid="header-left-mobile-open-icon"]'
+		);
+		expect(leftMobileOpenIcon).toBeNull();
+	});
+});
+
+describe("<Header /> with both mobileLeft and mobileRight set to true, mobileRight is default", () => {
+	beforeEach(() => {
+		render(
+			<Header
+				logo={
+					<Image
+						src="../../../assets/Logo.png"
+						alt="Another Generic Company Logo."
+						background={false}
+						additionalClasses=" w-40 "
+					/>
+				}
+				hasMobileMenu={true}
+				backgroundColor="red"
+				mobileOpenIcon={getFontAwesomeIcon("hamburger")}
+				mobileCloseIcon={getFontAwesomeIcon("X")}
+				mobileLeft={true}
+				mobileRight={true}
+				logoHoverColor="blue"
+				logoBorderRadius={true}
+				hasIcons={true}
+				icons={
+					<GenericList
+						data={DUMMYICONDATA.DUMMYICONTOGADATA}
+						renderItem={(item) => <DynamicIconList item={item} />}
+						itemHeight={20}
+						containerHeight={72}
+						listType="unordered"
+						containerClasses="bg-gray-100 w-36 border-2 border-teal-500"
+						listDirection="vertical"
+						hasVirtualization={false}
+					/>
+				}
+				hasSearchBar={false}
+				hasNavItems={false}
+				hasBadge={false}
+			/>
+		);
+	});
+
+	test("defaults to mobile open icon on right, not present on left", () => {
+		expect(
+			document.querySelector(
+				'[data-testid="header-right-mobile-open-icon"]'
+			)
+		).not.toBeNull();
+
+		expect(
+			document.querySelector(
+				'[data-testid="header-left-mobile-open-icon"]'
+			)
+		).toBeNull();
+	});
+});

package/src/components/Header/Header.tsx

@@ -0,0 +1,289 @@
+import React, { useState } from "react";
+import { motion, AnimatePresence, MotionConfig } from "framer-motion";
+
+import {
+	getLogoClasses,
+	getHeaderClasses,
+	getMobileMenuClasses,
+} from "./headerClassNames";
+import { HeaderTypes } from "./Header.types";
+import MobileMenu from "../MobileMenu/MobileMenu";
+import { HeaderProvider } from "./headerContext";
+import HamburgerButton from "../HamburgerButton/HamburgerButton";
+import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
+const justifyMap = {
+	start: "justify-start",
+	center: "justify-center",
+	end: "justify-end",
+	between: "justify-between",
+	around: "justify-around",
+};
+
+const Header: React.FC<HeaderTypes> = ({
+	logo,
+	badge,
+	nav,
+	input,
+	icons,
+
+	backgroundColor,
+	bottomBorderColor,
+	hasGlass = false,
+
+	logoBorderRadius,
+	logoHoverColor,
+
+	hasAnimatedHamburgerButton = false,
+	hasMobileMenu,
+	mobileLeft = true,
+	mobileRight = false,
+	mobileMenuBackground,
+
+	iconsData,
+
+	hasIcons = false,
+	hasNavItems = false,
+	hasBadge = false,
+	hasSearchBar = false,
+
+	hasMobileIcons = true,
+	hasMobileNavItems = true,
+	hasMobileBadge = true,
+	hasMobileSearchBar = true,
+
+	justifyNav = "center",
+	justifyInput = "center",
+	justifyBadge = "center",
+	justifyIcons = "center",
+
+	logoOrder,
+	navOrder,
+	inputOrder,
+	badgeOrder,
+	iconsOrder,
+}) => {
+	const [navSideMenuVisibility, setNavSideMenuVisibility] =
+		useState<boolean>(false);
+
+	const handleNav = () => {
+		setNavSideMenuVisibility(!navSideMenuVisibility);
+	};
+
+	const burgerAriaLabel = navSideMenuVisibility
+		? "Select to close menu"
+		: "Select to open menu";
+	const burgerExpandedAlert = navSideMenuVisibility ? "True" : "False";
+
+	if (mobileRight) {
+		mobileLeft = false;
+	} else if (mobileLeft) {
+		mobileRight = false;
+	}
+
+	let logoClasses = getLogoClasses(logoBorderRadius, logoHoverColor);
+	let headerClasses = getHeaderClasses(backgroundColor, bottomBorderColor);
+	let mobileMenuClasses = getMobileMenuClasses(mobileMenuBackground);
+
+	justifyNav = justifyMap[justifyNav as keyof typeof justifyMap];
+	justifyInput = justifyMap[justifyInput as keyof typeof justifyMap];
+	justifyBadge = justifyMap[justifyBadge as keyof typeof justifyMap];
+	justifyIcons = justifyMap[justifyIcons as keyof typeof justifyMap];
+
+	return (
+		<HeaderProvider
+			hasMobileIcons={hasMobileIcons}
+			hasMobileNavItems={hasMobileNavItems}
+			hasMobileBadge={hasMobileBadge}
+			hasMobileSearchBar={hasMobileSearchBar}
+			iconsData={iconsData}
+			hasIcons={false}
+			hasNavItems={false}
+			hasBadge={false}
+			hasSearchBar={false}
+			mobileCloseIcon={null}
+		>
+			<header
+				data-testid="header"
+				className={`${headerClasses} border-b-2 h-20 z-[1000] top-0 w-full px-2 ${
+					hasGlass ? "glass" : "bg-white"
+				}`}
+			>
+				<div className="flex min-h-20">
+					{/* LEFT MOBILE OPEN ICON */}
+					{hasMobileMenu && mobileLeft && (
+						<div
+							className="pl-2 mx-auto my-auto hidden max-xl:flex"
+							data-testid="header-left-mobile-open-icon"
+						>
+							{hasAnimatedHamburgerButton ? (
+								<HamburgerButton
+									burgerAriaLabel={burgerAriaLabel}
+									burgerExpandedAlert={burgerExpandedAlert}
+									animateBoolean={navSideMenuVisibility}
+									handleNav={handleNav}
+								/>
+							) : (
+								<button
+									aria-label={burgerAriaLabel}
+									aria-expanded={
+										burgerExpandedAlert === "True"
+											? true
+											: false
+									}
+									data-testid="hamburger-button"
+									onClick={handleNav}
+									className="flex flex-col space-y-1 relative z-10 p-2"
+								>
+									{burgerExpandedAlert === "True"
+										? getFontAwesomeIcon("X")
+										: getFontAwesomeIcon("hamburger")}
+								</button>
+							)}
+						</div>
+					)}
+
+					{/* LOGO */}
+					<div
+						className={`flex  flex-auto items-center pl-1 order-${logoOrder}`}
+					>
+						<a
+							className={logoClasses}
+							href=""
+							data-testid="header-logo"
+						>
+							{logo}
+						</a>
+					</div>
+
+					{/* NAV MENUS */}
+					<div
+						className={`flex flex-auto ${justifyNav} max-xl:hidden order-${navOrder}`}
+					>
+						{hasNavItems && nav}
+					</div>
+
+					{/* INPUT */}
+					{hasSearchBar && (
+						<div
+							className={`flex flex-auto items-center ${justifyInput} max-xl:hidden order-${inputOrder}`}
+							data-testid="header-placeholder-input"
+						>
+							<div className="2xl:flex w-full [&:has(:focus-visible)]:ring-2">
+								{input}
+							</div>
+						</div>
+					)}
+
+					{/* BADGE AND ICONS */}
+					{hasBadge && (
+						<div
+							className={`flex flex-auto items-center ${justifyBadge} max-xl:justify-end order-${badgeOrder}`}
+							data-testid="header-badge"
+						>
+							<div className="w-fit">{badge}</div>
+						</div>
+					)}
+					{hasIcons && (
+						<div
+							className={`flex flex-auto items-center ${justifyIcons} max-xl:hidden order-${iconsOrder}`}
+							data-testid="header-icons"
+						>
+							{/* FIXME: we need to find a way to keep the type tight for this and still deal with the error */}
+							{/* @ts-ignore */}
+							{icons}
+						</div>
+					)}
+
+					{/* RIGHT MOBILE OPEN ICON */}
+					{hasMobileMenu && mobileRight && (
+						<div
+							className="pr-2 mx-auto my-auto hidden max-xl:flex"
+							data-testid="header-right-mobile-open-icon"
+						>
+							{hasAnimatedHamburgerButton ? (
+								<HamburgerButton
+									burgerAriaLabel={burgerAriaLabel}
+									burgerExpandedAlert={burgerExpandedAlert}
+									animateBoolean={navSideMenuVisibility}
+									handleNav={handleNav}
+								/>
+							) : (
+								<button
+									aria-label={burgerAriaLabel}
+									aria-expanded={
+										burgerExpandedAlert === "True"
+											? true
+											: false
+									}
+									data-testid="hamburger-button"
+									onClick={handleNav}
+									className="flex flex-col space-y-1 relative z-10 p-2"
+								>
+									{burgerExpandedAlert === "True"
+										? getFontAwesomeIcon("X")
+										: getFontAwesomeIcon("hamburger")}
+								</button>
+							)}
+						</div>
+					)}
+					{/* MOBILE MENU */}
+					<AnimatePresence>
+						{hasMobileMenu && navSideMenuVisibility && (
+							<div>
+								<MotionConfig
+									transition={{
+										type: "spring",
+										bounce: 0.1,
+									}}
+								>
+									<motion.div
+										key="mobile-nav"
+										variants={{
+											hide: {
+												x: mobileRight
+													? "100%"
+													: "-100%",
+												transition: {
+													type: "spring",
+													bounce: 0.1,
+													when: "afterChildren",
+													staggerChildren: 0.25,
+												},
+											},
+											show: {
+												x: "0%",
+												transition: {
+													type: "spring",
+													bounce: 0.1,
+													when: "beforeChildren",
+													staggerChildren: 0.25,
+												},
+											},
+										}}
+										initial="hide"
+										animate="show"
+										exit="hide"
+										className="fixed inset-0 flex flex-col justify-center space-y-10"
+									>
+										<MobileMenu
+											handleNav={handleNav}
+											badge={badge}
+											nav={nav}
+											input={input}
+											icons={icons}
+											mobileMenuClasses={
+												mobileMenuClasses
+											}
+										/>
+									</motion.div>
+								</MotionConfig>
+							</div>
+						)}
+					</AnimatePresence>
+				</div>
+			</header>
+		</HeaderProvider>
+	);
+};
+
+export default Header;

package/src/components/Header/Header.types.ts

@@ -0,0 +1,52 @@
+import { DUMMYICONCOMPASSDATA, DUMMYICONTOGADATA } from "./DUMMYICONDATA.json";
+
+export interface HeaderTypes {
+	onClick?: (
+		e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>
+	) => void;
+	nav?: React.ReactNode;
+	logo?: React.ReactNode;
+	badge?: React.ReactNode;
+	icons?: React.ReactNode;
+	input?: React.ReactNode;
+	children?: React.ReactNode;
+
+	logoHoverColor?: string;
+	logoBorderRadius?: boolean;
+
+	backgroundColor?: string;
+	bottomBorderColor?: string;
+	hasGlass?: boolean;
+
+	hasAnimatedHamburgerButton?: boolean;
+	mobileOpenIcon?: JSX.Element | undefined | null;
+	mobileCloseIcon?: JSX.Element | null;
+	mobileLeft?: boolean;
+	mobileRight?: boolean;
+	mobileMenuBackground?: string;
+
+	iconsData?: typeof DUMMYICONCOMPASSDATA | typeof DUMMYICONTOGADATA;
+
+	hasIcons?: boolean;
+	hasSearchBar?: boolean;
+	hasNavItems?: boolean;
+	hasBadge?: boolean;
+
+	hasMobileMenu?: boolean;
+
+	hasMobileIcons?: boolean;
+	hasMobileNavItems?: boolean;
+	hasMobileBadge?: boolean;
+	hasMobileSearchBar?: boolean;
+
+	justifyNav?: string;
+	justifyInput?: string;
+	justifyBadge?: string;
+	justifyIcons?: string;
+
+	logoOrder?: number;
+	navOrder?: number;
+	inputOrder?: number;
+	badgeOrder?: number;
+	iconsOrder?: number;
+}

package/src/components/Header/headerClassNames.tsx

@@ -0,0 +1,50 @@
+import classNames from "classNames";
+
+
+export const getLogoClasses = (logoBorderRadius: boolean | undefined, logoHoverColor: string | undefined) => {
+
+	return classNames(
+		"border-transparent",
+		"p-1",
+		{
+			"rounded-full": logoBorderRadius === true,
+			"rounded-none": logoBorderRadius === false,
+		},
+		{
+			"hover:bg-blue-300": logoHoverColor === "blue",
+			"hover:bg-red-300": logoHoverColor === "red",
+			"hover:bg-teal-100": logoHoverColor === "green",
+		}
+	);
+};
+
+export const getHeaderClasses = (backgroundColor: string | undefined, bottomBorderColor: string | undefined,) => {
+	return classNames(
+		{
+			"bg-teal-100": backgroundColor === "green",
+			"bg-blue-100": backgroundColor === "blue",
+			"bg-slate-200": backgroundColor === "gray",
+			"bg-transparent": backgroundColor === "none",
+		},
+		{
+			"border-teal-500": bottomBorderColor === "green",
+			"border-blue-500": bottomBorderColor === "blue",
+			"border-slate-950": bottomBorderColor === "black",
+			"border-transparent": bottomBorderColor === "none",
+		}
+	);
+};
+
+export const getMobileMenuClasses = (
+	mobileMenuBackground: string | undefined,
+) => {
+	return classNames(
+		{
+			"bg-teal-50": mobileMenuBackground === "green",
+			"bg-blue-50": mobileMenuBackground === "blue",
+			"bg-slate-100": mobileMenuBackground === "gray",
+			"bg-slate-50": mobileMenuBackground === "white",
+			"bg-transparent": mobileMenuBackground === "none",
+		}
+	);
+};