@agilant/toga-blox 1.0.5

package/src/components/Nav/Nav.tsx

@@ -0,0 +1,242 @@
+import React, { useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
+import { DUMMYNAVDATA } from "./DUMMYNAVDATA.json";
+import Image from "../Image/Image";
+
+import { Accordion } from "../../utils/generateAccordionItem";
+import {
+	getParentHoverClassNames,
+	getParentHoverTextClassNames,
+	getParentStyleClasses,
+	getParentTextSizeClasses,
+	getParentTextColorClasses,
+	getSubmenuClasses,
+	getSubmenuHoverClasses,
+	getSubmenuTextSizeClasses,
+	getSubmenuTextColorClasses,
+	getNavBackgroundColor,
+	getMobileHiddenBreakpoint,
+	getMobileFlexBreakpoint,
+} from "./navClassNames";
+import { NavTypes } from ".";
+
+const Nav: React.FC<NavTypes> = ({
+	navData = DUMMYNAVDATA,
+	navBackgroundColor,
+
+	parentBackground,
+	parentBorderColor,
+	parentShape,
+	parentTextColor,
+	parentTextSize,
+
+	parentHoverBackground,
+	parentHoverFontColor,
+	parentHoverUnderline,
+	parentHoverBorderColor,
+
+	submenuBackgroundColor,
+	submenuTextColor,
+	submenuTextSize,
+
+	includeSubmenuImages,
+	submenuHoverBackground,
+	submenuHoverTextColor,
+	submenuHoverBorderStyle,
+	submenuHoverBorderColor,
+
+	mobileBreakpoint,
+
+	accordionParentStyle = "border-b border-black p-2 w-full",
+	accordionExpandedStyle = "w-full py-3",
+}) => {
+	const [navExpanded, setNavExpanded] = useState<Record<string, boolean>>(
+		navData.reduce(
+			(acc, _, index) => ({ ...acc, [index.toString()]: false }),
+			{}
+		)
+	);
+	let navBackgroundColorClasses = getNavBackgroundColor(navBackgroundColor);
+
+	let hoverClasses = getParentHoverClassNames(
+		parentHoverBackground,
+		parentHoverBorderColor
+	);
+
+	let parentHoverTextClasses = getParentHoverTextClassNames(
+		parentHoverFontColor,
+		parentHoverUnderline
+	);
+
+	let parentStyleClasses = getParentStyleClasses(
+		parentBackground,
+		parentBorderColor,
+		parentShape
+	);
+
+	let parentTextSizeClasses = getParentTextSizeClasses(parentTextSize);
+	let parentTextColorClasses = getParentTextColorClasses(parentTextColor);
+
+	let submenuStyleClasses = getSubmenuClasses(submenuBackgroundColor);
+	let submenuHoverClasses = getSubmenuHoverClasses(
+		submenuHoverBackground,
+		submenuHoverTextColor,
+		submenuHoverBorderStyle,
+		submenuHoverBorderColor
+	);
+
+	let submenuTextSizeClasses = getSubmenuTextSizeClasses(submenuTextSize);
+	let submenuTextColorClasses = getSubmenuTextColorClasses(submenuTextColor);
+
+	let mobileHiddenBreakpointClasses =
+		getMobileHiddenBreakpoint(mobileBreakpoint);
+	let mobileFlexBreakpointClasses = getMobileFlexBreakpoint(mobileBreakpoint);
+
+	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 ${navBackgroundColorClasses} `}
+			data-testid="nav"
+		>
+			<ul
+				className={`flex w-full items-center ${mobileHiddenBreakpointClasses}`}
+				aria-label="Main Menu"
+				data-testid="main-menu"
+			>
+				{navData.map((item, 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 ${hoverClasses} ${parentStyleClasses} `}
+									data-testid={`parent-button-${item.title}`}
+								>
+									<div
+										className={`flex w-full p-4 justify-between items-center ${parentTextSizeClasses} ${parentTextColorClasses} ${parentHoverTextClasses}`}
+									>
+										<div className="px-2">{item.title}</div>
+										<FontAwesomeIcon
+											className={`text-xs transition-transform duration-300 transform ${
+												navExpanded[index]
+													? "rotate-180"
+													: ""
+											}`}
+											icon={faChevronDown}
+										/>
+									</div>
+								</div>
+
+								<div
+									className={`absolute min-w-navDropDown top-16 overflow-x-scroll transition-[max-height] duration-500 ease-in-out ${submenuStyleClasses} ${
+										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 ${submenuStyleClasses} ${submenuHoverClasses} ${submenuTextSizeClasses} ${submenuTextColorClasses}`}
+											>
+												<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 ${hoverClasses} ${parentHoverTextClasses} ${parentStyleClasses} ${parentTextSizeClasses} ${parentTextColorClasses}`}
+									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 ${mobileFlexBreakpointClasses}`}
+				data-testid="accordion-nav"
+			>
+				<Accordion
+					navData={navData}
+					accordionParentStyle={accordionParentStyle}
+					accordionExpandedStyle={accordionExpandedStyle}
+				/>
+			</div>
+		</nav>
+	);
+};
+
+export default Nav;

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

@@ -0,0 +1,35 @@
+import { DUMMYNAVDATA } from "./DUMMYNAVDATA.json";
+
+export interface NavTypes {
+	navData?: typeof DUMMYNAVDATA;
+	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;
+}

package/src/components/Nav/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./Nav";
+export * from "./Nav.types";

package/src/components/Nav/navClassNames.tsx

@@ -0,0 +1,192 @@
+import classNames from "classNames";
+
+export const getNavBackgroundColor = (navBackgroundColor: string | undefined) => {
+	return classNames(
+		{
+			"bg-blue-500": navBackgroundColor === "blue",
+			"bg-teal-800": navBackgroundColor === "green",
+			":bg-gray-500": navBackgroundColor === "grey",
+			":bg-transparent": navBackgroundColor === "none",
+		})
+};
+
+export const getParentHoverClassNames = (
+	parentHoverBackground: string | undefined,
+	parentHoverBorderColor: string | undefined,
+) => {
+	return classNames(
+		{
+			"hover:bg-blue-800": parentHoverBackground === "blue",
+			"hover:bg-teal-800": parentHoverBackground === "green",
+			"hover:bg-gray-800": parentHoverBackground === "grey",
+			"hover:bg-white": parentHoverBackground === "white",
+			"hover:bg-transparent text-black": parentHoverBackground === "none",
+		},
+		{
+			"hover:border-blue-300": parentHoverBorderColor === "blue",
+			"hover:border-teal-300": parentHoverBorderColor === "green",
+			"hover:border-gray-300": parentHoverBorderColor === "grey",
+			"hover:border-black": parentHoverBorderColor === "black",
+			"hover:border-transparent": parentHoverBorderColor === "none",
+		},
+
+	);
+};
+
+
+export const getParentHoverTextClassNames = (
+	parentHoverFontColor: string | undefined,
+	parentHoverUnderline: boolean | undefined
+) => {
+	return classNames(
+		{
+			"hover:text-blue-800": parentHoverFontColor === "blue",
+			"hover:text-teal-800": parentHoverFontColor === "green",
+			"hover:text-slate-100": parentHoverFontColor === "white",
+			"hover:text-slate-950": parentHoverFontColor === "black",
+		},
+		{
+			"hover:underline hover:underline-offset-4":
+				parentHoverUnderline === true,
+			"": parentHoverUnderline === false,
+		}
+	);
+};
+
+export const getParentStyleClasses = (
+	parentBackground: string | undefined,
+	parentBorderColor: string | undefined,
+	parentShape: string | undefined,
+) => {
+	return classNames(
+		{
+			"bg-blue-800": parentBackground === "blue",
+			"bg-teal-800": parentBackground === "green",
+			"bg-gray-800": parentBackground === "grey",
+			"bg-black": parentBackground === "black",
+			"bg-white": parentBackground === "white",
+			"bg-transparent": parentBackground === "none",
+		},
+		{
+			"border-blue-300": parentBorderColor === "blue",
+			"border-teal-300": parentBorderColor === "green",
+			"border-gray-300": parentBorderColor === "grey",
+			"border-black": parentBorderColor === "black",
+			"border-transparent": parentBorderColor === "none",
+		},
+		{
+			"rounded-none": parentShape === "cornered",
+			"rounded-md": parentShape === "semiRounded",
+			"rounded-full": parentShape === "rounded",
+		}
+	);
+};
+
+
+export const getParentTextSizeClasses = (parentTextSize: string | undefined) => {
+	return classNames({
+		"text-xs": parentTextSize === "xs",
+		"text-sm": parentTextSize === "sm",
+		"text-md": parentTextSize === "md",
+		"text-lg": parentTextSize === "lg",
+	});
+}
+
+export const getParentTextColorClasses = (parentTextColor: string | undefined) => {
+	return classNames({
+		"text-slate-100": parentTextColor === "white",
+		"text-slate-950": parentTextColor === "black",
+	});
+}
+
+export const getSubmenuTextSizeClasses = (
+	parentTextSize: string | undefined
+) => {
+	return classNames({
+		"text-xs": parentTextSize === "xs",
+		"text-sm": parentTextSize === "sm",
+		"text-md": parentTextSize === "md",
+		"text-lg": parentTextSize === "lg",
+	});
+};
+
+export const getSubmenuTextColorClasses = (submenuTextColor: string | undefined) => {
+	return classNames({
+		"text-slate-100": submenuTextColor === "white",
+		"text-slate-950": submenuTextColor === "black",
+	});
+};
+
+export const getSubmenuClasses = (
+	submenuBackgroundColor: string | undefined
+) => {
+	return classNames(
+		{
+			"bg-blue-100": submenuBackgroundColor === "blue",
+			"bg-teal-100": submenuBackgroundColor === "green",
+			"bg-gray-100": submenuBackgroundColor === "grey",
+			"bg-white": submenuBackgroundColor === "white",
+			"bg-transparent": submenuBackgroundColor === "none",
+		},
+	);
+};
+
+export const getSubmenuHoverClasses = (
+	submenuHoverBackground: string | undefined,
+	submenuHoverTextColor: string | undefined,
+	submenuHoverBorderStyle: string | undefined,
+	submenuHoverBorderColor: string | undefined
+
+) => {
+
+	return classNames(
+		{
+			"hover:bg-blue-50": submenuHoverBackground === "blue",
+			"hover:bg-teal-50": submenuHoverBackground === "green",
+			"hover:bg-gray-50": submenuHoverBackground === "grey",
+			"hover:bg-white": submenuHoverBackground === "white",
+			"hover:bg-transparent": submenuHoverBackground === "none",
+		},
+		{
+			"hover:text-slate-100": submenuHoverTextColor === "white",
+			"hover:text-slate-950": submenuHoverTextColor === "black",
+		},
+		{
+			"hover:border-y-1 border-x-0": submenuHoverBorderStyle === "top-bottom",
+			"hover:border-x-1 border-y-0": submenuHoverBorderStyle === "right-left",
+			"hover:border-b-1 border-t-0 border-x-0":
+				submenuHoverBorderStyle === "bottom",
+			"hover:border-transparent": submenuHoverBorderStyle === "none",
+		},
+		{
+			"hover:border-blue-600": submenuHoverBorderColor === "blue",
+			"hover:border-teal-600 ": submenuHoverBorderColor === "green",
+			"hover:border-black": submenuHoverBorderColor === "black",
+			"hover:border-transparent ": submenuHoverBorderColor === "none",
+		}
+	);
+};
+
+export const getMobileHiddenBreakpoint = (mobileBreakpoint: string | undefined) => {
+	return classNames({
+		"max-sm:hidden": mobileBreakpoint === "small",
+		"max-md:hidden": mobileBreakpoint === "medium",
+		"max-lg:hidden": mobileBreakpoint === "large",
+		"max-xl:hidden": mobileBreakpoint === "extraLarge",
+	});
+};
+
+export const getMobileFlexBreakpoint = (
+	mobileBreakpoint: string | undefined
+) => {
+	return classNames({
+		"max-sm:flex max-sm:flex-col": mobileBreakpoint === "small",
+		"max-md:flex max-md:flex-col": mobileBreakpoint === "medium",
+		"max-lg:flex max-lg:flex-col": mobileBreakpoint === "large",
+		"max-xl:flex max-xl:flex-col": mobileBreakpoint === "extraLarge",
+	});
+};
+
+
+
+

package/src/components/Page/TableDataDummy.tsx

@@ -0,0 +1,216 @@
+import React from "react";
+
+export const TableDataDummy: React.FC = () => {
+	return (
+		<div className="overflow-x-auto min-w-full">
+			<table className="table ">
+				<thead>
+					<tr>
+						<th></th>
+						<th>Name</th>
+						<th>Job</th>
+						<th>company</th>
+						<th>location</th>
+						<th>Last Login</th>
+						<th>Favorite Color</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr>
+						<th>1</th>
+						<td>Cy Ganderton</td>
+						<td>Quality Control Specialist</td>
+						<td>Littel, Schaden and Vandervort</td>
+						<td>Canada</td>
+						<td>12/16/2020</td>
+						<td>Blue</td>
+					</tr>
+					<tr>
+						<th>2</th>
+						<td>Hart Hagerty</td>
+						<td>Desktop Support Technician</td>
+						<td>Zemlak, Daniel and Leannon</td>
+						<td>United States</td>
+						<td>12/5/2020</td>
+						<td>Purple</td>
+					</tr>
+					<tr>
+						<th>3</th>
+						<td>Brice Swyre</td>
+						<td>Tax Accountant</td>
+						<td>Carroll Group</td>
+						<td>China</td>
+						<td>8/15/2020</td>
+						<td>Red</td>
+					</tr>
+					<tr>
+						<th>4</th>
+						<td>Marjy Ferencz</td>
+						<td>Office Assistant I</td>
+						<td>Rowe-Schoen</td>
+						<td>Russia</td>
+						<td>3/25/2021</td>
+						<td>Crimson</td>
+					</tr>
+					<tr>
+						<th>5</th>
+						<td>Yancy Tear</td>
+						<td>Community Outreach Specialist</td>
+						<td>Wyman-Ledner</td>
+						<td>Brazil</td>
+						<td>5/22/2020</td>
+						<td>Indigo</td>
+					</tr>
+					<tr>
+						<th>6</th>
+						<td>Irma Vasilik</td>
+						<td>Editor</td>
+						<td>Wiza, Bins and Emard</td>
+						<td>Venezuela</td>
+						<td>12/8/2020</td>
+						<td>Purple</td>
+					</tr>
+					<tr>
+						<th>7</th>
+						<td>Meghann Durtnal</td>
+						<td>Staff Accountant IV</td>
+						<td>Schuster-Schimmel</td>
+						<td>Philippines</td>
+						<td>2/17/2021</td>
+						<td>Yellow</td>
+					</tr>
+					<tr>
+						<th>8</th>
+						<td>Sammy Seston</td>
+						<td>Accountant I</td>
+						<td>O'Hara, Welch and Keebler</td>
+						<td>Indonesia</td>
+						<td>5/23/2020</td>
+						<td>Crimson</td>
+					</tr>
+					<tr>
+						<th>9</th>
+						<td>Lesya Tinham</td>
+						<td>Safety Technician IV</td>
+						<td>Turner-Kuhlman</td>
+						<td>Philippines</td>
+						<td>2/21/2021</td>
+						<td>Maroon</td>
+					</tr>
+					<tr>
+						<th>10</th>
+						<td>Zaneta Tewkesbury</td>
+						<td>VP Marketing</td>
+						<td>Sauer LLC</td>
+						<td>Chad</td>
+						<td>6/23/2020</td>
+						<td>Green</td>
+					</tr>
+					<tr>
+						<th>11</th>
+						<td>Andy Tipple</td>
+						<td>Librarian</td>
+						<td>Hilpert Group</td>
+						<td>Poland</td>
+						<td>7/9/2020</td>
+						<td>Indigo</td>
+					</tr>
+					<tr>
+						<th>12</th>
+						<td>Sophi Biles</td>
+						<td>Recruiting Manager</td>
+						<td>Gutmann Inc</td>
+						<td>Indonesia</td>
+						<td>2/12/2021</td>
+						<td>Maroon</td>
+					</tr>
+					<tr>
+						<th>13</th>
+						<td>Florida Garces</td>
+						<td>Web Developer IV</td>
+						<td>Gaylord, Pacocha and Baumbach</td>
+						<td>Poland</td>
+						<td>5/31/2020</td>
+						<td>Purple</td>
+					</tr>
+					<tr>
+						<th>14</th>
+						<td>Maribeth Popping</td>
+						<td>Analyst Programmer</td>
+						<td>Deckow-Pouros</td>
+						<td>Portugal</td>
+						<td>4/27/2021</td>
+						<td>Aquamarine</td>
+					</tr>
+					<tr>
+						<th>15</th>
+						<td>Moritz Dryburgh</td>
+						<td>Dental Hygienist</td>
+						<td>Schiller, Cole and Hackett</td>
+						<td>Sri Lanka</td>
+						<td>8/8/2020</td>
+						<td>Crimson</td>
+					</tr>
+					<tr>
+						<th>16</th>
+						<td>Reid Semiras</td>
+						<td>Teacher</td>
+						<td>Sporer, Sipes and Rogahn</td>
+						<td>Poland</td>
+						<td>7/30/2020</td>
+						<td>Green</td>
+					</tr>
+					<tr>
+						<th>17</th>
+						<td>Alec Lethby</td>
+						<td>Teacher</td>
+						<td>Reichel, Glover and Hamill</td>
+						<td>China</td>
+						<td>2/28/2021</td>
+						<td>Khaki</td>
+					</tr>
+					<tr>
+						<th>18</th>
+						<td>Aland Wilber</td>
+						<td>Quality Control Specialist</td>
+						<td>Kshlerin, Rogahn and Swaniawski</td>
+						<td>Czech Republic</td>
+						<td>9/29/2020</td>
+						<td>Purple</td>
+					</tr>
+					<tr>
+						<th>19</th>
+						<td>Teddie Duerden</td>
+						<td>Staff Accountant III</td>
+						<td>Pouros, Ullrich and Windler</td>
+						<td>France</td>
+						<td>10/27/2020</td>
+						<td>Aquamarine</td>
+					</tr>
+					<tr>
+						<th>20</th>
+						<td>Lorelei Blackstone</td>
+						<td>Data Coordiator</td>
+						<td>Witting, Kutch and Greenfelder</td>
+						<td>Kazakhstan</td>
+						<td>6/3/2020</td>
+						<td>Red</td>
+					</tr>
+				</tbody>
+				<tfoot>
+					<tr>
+						<th></th>
+						<th>Name</th>
+						<th>Job</th>
+						<th>company</th>
+						<th>location</th>
+						<th>Last Login</th>
+						<th>Favorite Color</th>
+					</tr>
+				</tfoot>
+			</table>
+		</div>
+	);
+};
+
+export default TableDataDummy;