@agilant/toga-blox 1.0.9 → 1.0.11

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

@@ -1,322 +0,0 @@
-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"
-						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

@@ -1,243 +0,0 @@
-import React, { useState } from "react";
-import { motion, AnimatePresence, MotionConfig } from "framer-motion";
-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 = "bg-white",
-	bottomBorderColor = "border-b-2",
-	hasGlass = false,
-
-	logoBorderRadius = "rounded-md",
-	logoHoverColor = "hover:bg-gray-200",
-
-	hasAnimatedHamburgerButton = false,
-	hasMobileMenu,
-	mobileLeft = true,
-	mobileRight = false,
-	mobileMenuBackground = "bg-white",
-
-	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 = 1,
-	navOrder = 2,
-	inputOrder = 3,
-	badgeOrder = 4,
-	iconsOrder = 5,
-}) => {
-	const [navSideMenuVisibility, setNavSideMenuVisibility] = useState(false);
-
-	const handleNav = () => {
-		setNavSideMenuVisibility(!navSideMenuVisibility);
-	};
-
-	const burgerAriaLabel = navSideMenuVisibility
-		? "Select to close menu"
-		: "Select to open menu";
-	const burgerExpandedAlert = navSideMenuVisibility ? "True" : "False";
-
-	const logoClasses = `${logoBorderRadius} ${logoHoverColor}`;
-	const headerClasses = `${backgroundColor} ${bottomBorderColor}`;
-	const mobileMenuClasses = mobileMenuBackground;
-
-	const justifyNavClass = justifyMap[justifyNav as keyof typeof justifyMap];
-	const justifyInputClass = justifyMap[justifyInput as keyof typeof justifyMap];
-	const justifyBadgeClass = justifyMap[justifyBadge as keyof typeof justifyMap];
-	const justifyIconsClass = justifyMap[justifyIcons as keyof typeof justifyMap];
-
-	return (
-		<HeaderProvider
-			hasMobileIcons={hasMobileIcons}
-			hasMobileNavItems={hasMobileNavItems}
-			hasMobileBadge={hasMobileBadge}
-			hasMobileSearchBar={hasMobileSearchBar}
-			iconsData={iconsData}
-			hasIcons={hasIcons}
-			hasNavItems={hasNavItems}
-			hasBadge={hasBadge}
-			hasSearchBar={hasSearchBar}
-			mobileCloseIcon={getFontAwesomeIcon("X")}
-		>
-			<header
-				data-testid="header"
-				className={`border-b-2 h-20 z-[1000] top-0 w-full px-2 ${headerClasses} ${hasGlass ? "glass" : ""}`}
-			>
-				<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 ${justifyNavClass} max-xl:hidden order-${navOrder}`}>
-						{hasNavItems && nav}
-					</div>
-
-					{/* INPUT */}
-					{hasSearchBar && (
-						<div
-							className={`flex flex-auto items-center ${justifyInputClass} 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 ${justifyBadgeClass} 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 ${justifyIconsClass} max-xl:hidden order-${iconsOrder}`} data-testid="header-icons">
-							{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

@@ -1,52 +0,0 @@
-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;
-}