@agilant/toga-blox 1.0.9 → 1.0.11

package/src/components/Nav/Nav.stories.tsx

@@ -1,181 +0,0 @@
-import { Meta, StoryFn } from "@storybook/react";
-import Nav, { NavTypes } from ".";
-import { DUMMYCOMPASSNAVDATA } from "./DUMMYNAVDATA.json";
-
-import { withStoryBook } from "../../hoc";
-
-// Wrap your component with the HOC
-const StoryBookViewNav = withStoryBook(Nav);
-
-export default {
-	title: "Components/Nav",
-	argTypes: {
-		navBackgroundColor: {
-			control: {
-				type: "color",
-			},
-		},
-		navData: {
-			table: {
-				disable: true,
-			},
-		},
-		parentHoverBackground: {
-			control: {
-				type: "select",
-			},
-			options: ["blue", "green", "grey", "white", "none"],
-		},
-		parentHoverFontColor: {
-			control: {
-				type: "select",
-			},
-			options: ["blue", "green", "white", "black"],
-		},
-		parentHoverUnderline: {
-			control: {
-				type: "boolean",
-			},
-		},
-		parentHoverBorderColor: {
-			control: {
-				type: "select",
-			},
-			options: ["blue", "green", "grey", "black", "none"],
-		},
-		parentBackground: {
-			control: {
-				type: "select",
-			},
-			options: ["blue", "green", "grey", "black", "white", "none"],
-		},
-		parentBorderColor: {
-			control: {
-				type: "select",
-			},
-			options: ["blue", "green", "grey", "black", "none"],
-		},
-		parentShape: {
-			control: {
-				type: "select",
-			},
-			options: ["cornered", "semiRounded", "rounded"],
-		},
-		parentTextSize: {
-			control: "select",
-			options: ["xs", "sm", "md", "lg"],
-			description: "The font size for the parent menu item text.",
-		},
-		parentTextColor: {
-			control: {
-				type: "select",
-			},
-			options: ["black", "white"],
-		},
-		includeSubmenuImages: {
-			control: {
-				type: "boolean",
-			},
-		},
-		submenuTextSize: {
-			control: "select",
-			options: ["xs", "sm", "md", "lg"],
-			description: "The font size for the submenu text.",
-		},
-		submenuBackgroundColor: {
-			control: {
-				type: "select",
-			},
-			options: ["blue", "green", "grey", "white", "none"],
-		},
-		submenuHoverBackground: {
-			control: {
-				type: "select",
-			},
-			options: ["blue", "green", "grey", "white", "none"],
-		},
-		submenuHoverTextColor: {
-			control: {
-				type: "select",
-			},
-			options: ["black", "white"],
-		},
-		submenuTextColor: {
-			control: {
-				type: "select",
-			},
-			options: ["black", "white"],
-		},
-		submenuHoverBorderStyle: {
-			control: {
-				type: "select",
-			},
-			options: ["top-bottom", "right-left", "bottom", "none"],
-		},
-		submenuHoverBorderColor: {
-			control: {
-				type: "select",
-			},
-			options: ["blue", "green", "black", "none"],
-		},
-		mobileBreakpoint: {
-			control: {
-				type: "select",
-			},
-			options: ["small", "medium", "large", "extraLarge"],
-		},
-	},
-} as Meta<NavTypes>;
-
-const Template: StoryFn<typeof StoryBookViewNav> = (args) => (
-	<StoryBookViewNav
-		{...args}
-		storybookStyle={{
-			backgroundColor: args.navBackgroundColor,
-		}}
-	/>
-);
-
-export const Default = Template.bind({});
-Default.args = {
-	navBackgroundColor: "#a7d2ff",
-
-	parentHoverBackground: "none",
-	parentHoverFontColor: "black",
-	parentHoverUnderline: true,
-	parentHoverBorderColor: "black",
-	parentShape: "cornered",
-	parentBackground: "none",
-	parentBorderColor: "none",
-	parentTextSize: "md",
-
-	includeSubmenuImages: false,
-	submenuBackgroundColor: "blue",
-	submenuHoverBackground: "white",
-
-	mobileBreakpoint: "small",
-};
-
-export const Compass = Template.bind({});
-Compass.args = {
-	navBackgroundColor: "#00b9a8",
-	navData: DUMMYCOMPASSNAVDATA,
-	parentHoverBackground: "none",
-	parentHoverFontColor: "black",
-	parentHoverUnderline: true,
-	parentHoverBorderColor: "none",
-
-	parentShape: "cornered",
-	parentBackground: "none",
-	parentBorderColor: "none",
-	parentTextColor: "white",
-	parentTextSize: "lg",
-
-	includeSubmenuImages: true,
-	submenuBackgroundColor: "white",
-	submenuHoverBackground: "white",
-	submenuHoverBorderStyle: "top-bottom",
-	submenuHoverBorderColor: "green",
-
-	mobileBreakpoint: "small",
-};

package/src/components/Nav/Nav.test.tsx

@@ -1,89 +0,0 @@
-import "../../../dist/main.css";
-import { render, screen } from "@testing-library/react";
-import { describe, test, expect, beforeEach } from "vitest";
-
-import Nav from "./Nav";
-import { DUMMYNAVDATA } from "./DUMMYNAVDATA.json";
-
-
-describe("<Nav /> without submenu images", () => {
-	beforeEach(() => {
-		render(
-			<Nav
-				navData={DUMMYNAVDATA}
-				navBackgroundColor={"gray"}
-				parentBackground={"grey"}
-				parentBorderColor={"none"}
-				parentShape={"cornered"}
-				parentTextColor={"black"}
-				parentTextSize={"sm"}
-				parentHoverBackground={"black"}
-				parentHoverFontColor={"white"}
-				parentHoverUnderline={true}
-				parentHoverBorderColor={"none"}
-				submenuBackgroundColor={"blue"}
-				submenuTextColor={"white"}
-				submenuTextSize={"text-base"}
-				submenuHoverBackground={"blue"}
-				submenuHoverTextColor={"white"}
-				submenuHoverBorderStyle={"border-b"}
-				submenuHoverBorderColor={"black"}
-				mobileBreakpoint={"medium"}
-				accordionParentStyle={"border-b border-black p-2 w-full"}
-				accordionExpandedStyle={"w-full py-3"}
-			/>
-		);
-	});
-
-	test("renders Nav component", () => {
-		expect(screen.getByTestId("nav")).toBeInTheDocument();
-	});
-
-	test("ul element has correct classes and aria-label", () => {
-		const ulElement = screen.getByTestId("main-menu");
-		expect(ulElement).toHaveAttribute("aria-label", "Main Menu");
-	});
-
-	test("nav has correct mobile breakpoint", () => {
-		const nav = screen.getByTestId("main-menu");
-		expect(nav).toHaveClass("max-md:hidden");
-	});
-
-	test("correct number of parent menu items are rendered", () => {
-		const parentMenuItems = screen.getAllByTestId("parent-menu-item");
-		expect(parentMenuItems).toHaveLength(DUMMYNAVDATA.length);
-	});
-
-	test("renders correct parent menu button text", () => {
-		const parentMenuItemAbout = screen.getByTestId("parent-button-About");
-			expect(parentMenuItemAbout).toBeInTheDocument();
-			expect(parentMenuItemAbout).toHaveTextContent("About");
-	});
-
-	test("renders correct parent menu background color", () => {
-		const parentMenuItemAbout = screen.getByTestId("parent-button-About");
-		expect(parentMenuItemAbout).toHaveClass("bg-gray-800");
-	});
-
-	test("renders correct parent linked menu item text", () => {
-		const parentMenuItemCommunity = screen.getByTestId("parent-link-Community");
-			expect(parentMenuItemCommunity).toBeInTheDocument();
-			expect(parentMenuItemCommunity).toHaveTextContent("Community");
-	});
-
-	test("parent linked menu item has correct link", () => {
-		const parentMenuItemCommunity = screen.getByTestId("parent-link-Community")
-		expect(parentMenuItemCommunity).toHaveAttribute("href", "fake link");
-	});
-
-	test("accordion component is rendered", () => {
-		const accordion = screen.getByTestId("accordion-nav");
-		expect(accordion).toBeInTheDocument();
-	});
-
-	test("accordion nav has correct mobile breakpoint", () => {
-		const nav = screen.getByTestId("accordion-nav");
-		expect(nav).toHaveClass("max-md:flex");
-	});
-
-});

package/src/components/Nav/Nav.tsx

@@ -1,179 +0,0 @@
-import React, { useState } from "react";
-import data from "./DUMMYNAVDATA.json";
-import Image from "../Image/Image";
-import { Accordion } from "../../utils/generateAccordionItem";
-import { NavTypes, NavItem } from "./Nav.types";
-import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
-
-const DUMMYNAVDATA = data.DUMMYNAVDATA as NavItem[];
-
-const Nav: React.FC<NavTypes> = ({
-	navData = DUMMYNAVDATA,
-	navBackgroundColor = "bg-white",
-
-	parentBackground = "bg-white",
-	parentBorderColor = "border-gray-200",
-	parentShape = "rounded-md",
-	parentTextColor = "text-gray-800",
-	parentTextSize = "text-base",
-
-	parentHoverBackground = "hover:bg-gray-200",
-	parentHoverFontColor = "hover:text-black",
-	parentHoverUnderline = "hover:underline",
-	parentHoverBorderColor = "hover:border-gray-400",
-
-	submenuBackgroundColor = "bg-white",
-	submenuTextColor = "text-gray-800",
-	submenuTextSize = "text-sm",
-
-	includeSubmenuImages = false,
-	submenuHoverBackground = "hover:bg-gray-200",
-	submenuHoverTextColor = "hover:text-black",
-	submenuHoverBorderStyle = "hover:border-gray-400",
-	submenuHoverBorderColor = "hover:border-gray-400",
-
-	mobileBreakpoint = "max-xl",
-
-	accordionParentStyle = "border-b border-black p-2 w-full",
-	accordionExpandedStyle = "w-full py-3",
-}) => {
-	const [navExpanded, setNavExpanded] = useState<Record<string, boolean>>(
-		navData.reduce(
-			(acc: Record<string, boolean>, _: NavItem, index: number) => ({
-				...acc,
-				[index.toString()]: false,
-			}),
-			{}
-		)
-	);
-
-	const toggleNav = (index: number) => {
-		setNavExpanded((prevState) => ({
-			...Object.fromEntries(
-				Object.keys(prevState).map((key) => [
-					key,
-					key === index.toString() ? !prevState[key] : false,
-				])
-			),
-		}));
-	};
-
-	const handleParentClick = (index: number) => {
-		toggleNav(index);
-	};
-
-	const handleKeyDown = (
-		event: React.KeyboardEvent<HTMLLIElement | HTMLDivElement>,
-		index: number
-	) => {
-		if (event.key === "Enter") {
-			toggleNav(index);
-		}
-	};
-
-	return (
-		<nav
-			className={`flex justify-around ${navBackgroundColor}`}
-			data-testid="nav"
-		>
-			<ul
-				className={`flex w-full items-center ${mobileBreakpoint}:hidden`}
-				aria-label="Main Menu"
-				data-testid="main-menu"
-			>
-				{navData.map((item: NavItem, index: number) => (
-					<div className={`flex w-full justify-center`} key={item.title}>
-						{item.to === "" ? (
-							<li
-								className={`flex w-auto cursor-pointer relative`}
-								role="button"
-								onClick={() => handleParentClick(index)}
-								aria-expanded={navExpanded[index]}
-								tabIndex={0}
-								onKeyDown={(event) => handleKeyDown(event, index)}
-								data-testid="parent-menu-item"
-							>
-								<div
-									className={`flex w-full items-center border-2 h-10 ${parentHoverBackground} ${parentHoverBorderColor} ${parentShape} ${parentBackground}`}
-									data-testid={`parent-button-${item.title}`}
-								>
-									<div
-										className={`flex w-full p-4 justify-between items-center ${parentTextSize} ${parentTextColor} ${parentHoverFontColor} ${parentHoverUnderline}`}
-									>
-										<div className="px-2">{item.title}</div>
-										{getFontAwesomeIcon(
-											"chevron-down",
-											`text-xs transition-transform duration-300 transform ${navExpanded[index] ? "rotate-180" : ""
-											}`
-										)}
-									</div>
-								</div>
-
-								<div
-									className={`absolute min-w-navDropDown top-16 overflow-x-scroll transition-[max-height] duration-500 ease-in-out ${submenuBackgroundColor} ${navExpanded[index] ? "max-h-60" : "max-h-0"
-										}`}
-									aria-hidden={!navExpanded[index]}
-									tabIndex={-1}
-								>
-									<ul className="w-full">
-										{item.links.map((link) => (
-											<li
-												key={link.menuItem}
-												className={`flex py-2 border-4 border-transparent w-auto align-center ${submenuBackgroundColor} ${submenuHoverBackground} ${submenuHoverBorderStyle} ${submenuHoverBorderColor} ${submenuTextSize} ${submenuTextColor}`}
-											>
-												<a
-													href={link.link}
-													className="flex hover:underline w-full justify-start items-center pl-1"
-													data-testid={link.menuItem}
-													tabIndex={navExpanded[index] ? 0 : -1}
-												>
-													{includeSubmenuImages && (
-														<Image
-															src={link.src}
-															alt={link.alt}
-															background={false}
-															additionalClasses="w-12 h-12 mr-2"
-															data-testid={`submenu-image-${link.menuItem}`}
-														/>
-													)}
-													{link.menuItem}
-												</a>
-											</li>
-										))}
-									</ul>
-								</div>
-							</li>
-						) : (
-							<li
-								className="w-auto"
-								onKeyDown={(event) => handleKeyDown(event, index)}
-								data-testid="parent-menu-item"
-							>
-								<a
-									href={item.to}
-									className={`flex flex-col p-4 w-full border-2 relative items-center h-10 justify-center ${parentHoverBackground} ${parentHoverFontColor} ${parentHoverUnderline} ${parentBackground} ${parentBorderColor} ${parentShape} ${parentTextSize} ${parentTextColor}`}
-									tabIndex={0}
-									data-testid={`parent-link-${item.title}`}
-								>
-									<div className="px-2">{item.title}</div>
-								</a>
-							</li>
-						)}
-					</div>
-				))}
-			</ul>
-			<div
-				className={`hidden w-full items-center ${mobileBreakpoint}:flex`}
-				data-testid="accordion-nav"
-			>
-				<Accordion
-					navData={navData}
-					accordionParentStyle={accordionParentStyle}
-					accordionExpandedStyle={accordionExpandedStyle}
-				/>
-			</div>
-		</nav>
-	);
-};
-
-export default Nav;

package/src/components/Nav/Nav.types.tsx

@@ -1,47 +0,0 @@
-export interface NavLink {
-	menuItem: string;
-	link: string;
-	src: string | null;
-	alt: string;
-}
-
-export interface NavItem {
-	id: string | number;
-	title: string;
-	to: string;
-	links: NavLink[];
-}
-
-export interface NavTypes {
-	navData?: NavItem[];
-	navBackgroundColor?: string;
-
-	parentHoverBackground?: string;
-	parentHoverFontColor?: string;
-	parentHoverUnderline?: boolean;
-	parentHoverBorderColor?: string;
-
-	parentBorderColor?: string;
-	parentBackground?: string;
-	parentShape?: string;
-
-	parentTextColor?: string;
-	parentTextSize?: string;
-	parentTextWeight?: string;
-
-	submenuBackgroundColor?: string;
-	submenuTextColor?: string;
-	submenuTextSize?: string;
-	submenuTextWeight?: string;
-
-	includeSubmenuImages?: boolean;
-	submenuHoverBackground?: string;
-	submenuHoverTextColor?: string;
-	submenuHoverBorderStyle?: string;
-	submenuHoverBorderColor?: string;
-
-	mobileBreakpoint?: string;
-
-	accordionParentStyle?: string;
-	accordionExpandedStyle?: string;
-}