@agilant/toga-blox 1.0.5

package/src/components/Nav/DUMMYNAVDATA.json

@@ -0,0 +1,234 @@
+{
+	"DUMMYNAVDATA": [
+		{
+			"id": "1",
+			"title": "About",
+			"to": "",
+			"links": [
+				{
+					"menuItem": "Features",
+					"link": "#",
+					"src": null,
+					"alt": ""
+				},
+				{
+					"menuItem": "Pricing",
+					"link": "#",
+					"src": null,
+					"alt": ""
+				},
+				{
+					"menuItem": "Support",
+					"link": "#",
+					"src": null,
+					"alt": ""
+				},
+				{
+					"menuItem": "Forums",
+					"link": "#",
+					"src": null,
+					"alt": ""
+				}
+			]
+		},
+		{
+			"id": 2,
+			"title": "Projects",
+			"to": "",
+			"links": [
+				{
+					"menuItem": "Contribute",
+					"link": "#",
+					"src": null,
+					"alt": ""
+				},
+				{
+					"menuItem": "Media assets",
+					"link": "#",
+					"src": null,
+					"alt": ""
+				},
+				{
+					"menuItem": "Changelog",
+					"link": "#",
+					"src": null,
+					"alt": ""
+				},
+				{
+					"menuItem": "Releases",
+					"link": "#",
+					"src": null,
+					"alt": ""
+				},
+				{
+					"menuItem": "Upcoming",
+					"link": "#",
+					"src": null,
+					"alt": ""
+				},
+				{
+					"menuItem": "Past",
+					"link": "#",
+					"src": null,
+					"alt": ""
+				},
+				{
+					"menuItem": "Extra",
+					"link": "#",
+					"src": null,
+					"alt": ""
+				},
+				{
+					"menuItem": "Extra Two",
+					"link": "#",
+					"src": null,
+					"alt": ""
+				}
+			]
+		},
+		{
+			"id": 3,
+			"title": "Community",
+			"to": "fake link",
+			"links": [
+				{
+					"menuItem": "Join Discord",
+					"link": "#",
+					"src": null,
+					"alt": ""
+				},
+				{
+					"menuItem": "Follow on Twitter",
+					"link": "#",
+					"src": null,
+					"alt": ""
+				},
+				{
+					"menuItem": "Email newsletter",
+					"link": "#",
+					"src": null,
+					"alt": ""
+				},
+				{
+					"menuItem": "GitHub discussions",
+					"link": "#",
+					"src": null,
+					"alt": ""
+				}
+			]
+		},
+		{
+			"id": 4,
+			"title": "Store",
+			"to": "",
+			"links": [
+				{
+					"menuItem": "Computers",
+					"link": "#",
+					"src": null,
+					"alt": ""
+				},
+				{
+					"menuItem": "IpadsIpadsIpadsIpadsIpadsIpadsIpadsIpads",
+					"link": "#",
+					"src": null,
+					"alt": ""
+				},
+				{
+					"menuItem": "Accessories",
+					"link": "#",
+					"src": null,
+					"alt": ""
+				}
+			]
+		}
+	],
+	"DUMMYCOMPASSNAVDATA": [
+		{
+			"id": "1",
+			"title": "Products",
+			"to": "",
+			"links": [
+				{
+					"menuItem": "Features",
+					"link": "#",
+					"src": null,
+					"alt": ""
+				},
+				{
+					"menuItem": "Pricing",
+					"link": "#",
+					"src": null,
+					"alt": ""
+				},
+				{
+					"menuItem": "Support",
+					"link": "#",
+					"src": null,
+					"alt": ""
+				},
+				{
+					"menuItem": "Forums",
+					"link": "#",
+					"src": null,
+					"alt": ""
+				}
+			]
+		},
+		{
+			"id": 2,
+			"title": "Kits",
+			"to": "",
+			"links": [
+				{
+					"menuItem": "Contribute",
+					"link": "#",
+					"src": null,
+					"alt": ""
+				},
+				{
+					"menuItem": "Media assets",
+					"link": "#",
+					"src": null,
+					"alt": ""
+				},
+				{
+					"menuItem": "Changelog",
+					"link": "#",
+					"src": null,
+					"alt": ""
+				},
+				{
+					"menuItem": "Releases",
+					"link": "#",
+					"src": null,
+					"alt": ""
+				},
+				{
+					"menuItem": "Upcoming",
+					"link": "#",
+					"src": null,
+					"alt": ""
+				},
+				{
+					"menuItem": "Past",
+					"link": "#",
+					"src": null,
+					"alt": ""
+				},
+				{
+					"menuItem": "Extra",
+					"link": "#",
+					"src": null,
+					"alt": ""
+				},
+				{
+					"menuItem": "Extra Two",
+					"link": "#",
+					"src": null,
+					"alt": ""
+				}
+			]
+		}
+	]
+}

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

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

@@ -0,0 +1,89 @@
+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");
+	});
+
+});