@agilant/toga-blox 1.0.8 → 1.0.9

package/src/components/MobileMenu/MobileMenu.types.tsx

@@ -1,5 +1,3 @@
-import { DUMMYICONCOMPASSDATA, DUMMYICONTOGADATA } from "../Header/DUMMYICONDATA.json";
-import { TagName } from "../Text";
 
 
 export interface MobileMenuTypes {

package/src/components/Nav/DUMMYNAVDATA.json

@@ -32,7 +32,7 @@
 			]
 		},
 		{
-			"id": 2,
+			"id": "2",
 			"title": "Projects",
 			"to": "",
 			"links": [
@@ -87,7 +87,7 @@
 			]
 		},
 		{
-			"id": 3,
+			"id": "3",
 			"title": "Community",
 			"to": "fake link",
 			"links": [
@@ -118,7 +118,7 @@
 			]
 		},
 		{
-			"id": 4,
+			"id": "4",
 			"title": "Store",
 			"to": "",
 			"links": [
@@ -176,7 +176,7 @@
 			]
 		},
 		{
-			"id": 2,
+			"id": "2",
 			"title": "Kits",
 			"to": "",
 			"links": [

package/src/components/Nav/Nav.tsx

@@ -1,97 +1,51 @@
 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 data 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 ".";
+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,
+	navBackgroundColor = "bg-white",
 
-	parentBackground,
-	parentBorderColor,
-	parentShape,
-	parentTextColor,
-	parentTextSize,
+	parentBackground = "bg-white",
+	parentBorderColor = "border-gray-200",
+	parentShape = "rounded-md",
+	parentTextColor = "text-gray-800",
+	parentTextSize = "text-base",
 
-	parentHoverBackground,
-	parentHoverFontColor,
-	parentHoverUnderline,
-	parentHoverBorderColor,
+	parentHoverBackground = "hover:bg-gray-200",
+	parentHoverFontColor = "hover:text-black",
+	parentHoverUnderline = "hover:underline",
+	parentHoverBorderColor = "hover:border-gray-400",
 
-	submenuBackgroundColor,
-	submenuTextColor,
-	submenuTextSize,
+	submenuBackgroundColor = "bg-white",
+	submenuTextColor = "text-gray-800",
+	submenuTextSize = "text-sm",
 
-	includeSubmenuImages,
-	submenuHoverBackground,
-	submenuHoverTextColor,
-	submenuHoverBorderStyle,
-	submenuHoverBorderColor,
+	includeSubmenuImages = false,
+	submenuHoverBackground = "hover:bg-gray-200",
+	submenuHoverTextColor = "hover:text-black",
+	submenuHoverBorderStyle = "hover:border-gray-400",
+	submenuHoverBorderColor = "hover:border-gray-400",
 
-	mobileBreakpoint,
+	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, _, index) => ({ ...acc, [index.toString()]: false }),
+			(acc: Record<string, boolean>, _: NavItem, index: number) => ({
+				...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) => ({
@@ -119,19 +73,16 @@ const Nav: React.FC<NavTypes> = ({
 
 	return (
 		<nav
-			className={`flex justify-around ${navBackgroundColorClasses} `}
+			className={`flex justify-around ${navBackgroundColor}`}
 			data-testid="nav"
 		>
 			<ul
-				className={`flex w-full items-center ${mobileHiddenBreakpointClasses}`}
+				className={`flex w-full items-center ${mobileBreakpoint}:hidden`}
 				aria-label="Main Menu"
 				data-testid="main-menu"
 			>
-				{navData.map((item, index: number) => (
-					<div
-						className={`flex w-full justify-center`}
-						key={item.title}
-					>
+				{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`}
@@ -139,54 +90,42 @@ const Nav: React.FC<NavTypes> = ({
 								onClick={() => handleParentClick(index)}
 								aria-expanded={navExpanded[index]}
 								tabIndex={0}
-								onKeyDown={(event) =>
-									handleKeyDown(event, index)
-								}
+								onKeyDown={(event) => handleKeyDown(event, index)}
 								data-testid="parent-menu-item"
 							>
 								<div
-									className={`flex w-full items-center border-2 h-10 ${hoverClasses} ${parentStyleClasses} `}
+									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 ${parentTextSizeClasses} ${parentTextColorClasses} ${parentHoverTextClasses}`}
+										className={`flex w-full p-4 justify-between items-center ${parentTextSize} ${parentTextColor} ${parentHoverFontColor} ${parentHoverUnderline}`}
 									>
 										<div className="px-2">{item.title}</div>
-										<FontAwesomeIcon
-											className={`text-xs transition-transform duration-300 transform ${
-												navExpanded[index]
-													? "rotate-180"
-													: ""
-											}`}
-											icon={faChevronDown}
-										/>
+										{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 ${submenuStyleClasses} ${
-										navExpanded[index]
-											? "max-h-60"
-											: "max-h-0"
-									}`}
+									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 `}>
+									<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}`}
+												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
-													}
+													tabIndex={navExpanded[index] ? 0 : -1}
 												>
 													{includeSubmenuImages && (
 														<Image
@@ -207,14 +146,12 @@ const Nav: React.FC<NavTypes> = ({
 						) : (
 							<li
 								className="w-auto"
-								onKeyDown={(event) =>
-									handleKeyDown(event, index)
-								}
-								data-testid={`parent-menu-item`}
+								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}`}
+									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}`}
 								>
@@ -226,7 +163,7 @@ const Nav: React.FC<NavTypes> = ({
 				))}
 			</ul>
 			<div
-				className={`hidden w-full items-center ${mobileFlexBreakpointClasses}`}
+				className={`hidden w-full items-center ${mobileBreakpoint}:flex`}
 				data-testid="accordion-nav"
 			>
 				<Accordion

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

@@ -1,7 +1,19 @@
-import { DUMMYNAVDATA } from "./DUMMYNAVDATA.json";
+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?: typeof DUMMYNAVDATA;
+	navData?: NavItem[];
 	navBackgroundColor?: string;
 
 	parentHoverBackground?: string;

package/src/components/Page/ViewPageTemplate.stories.tsx

@@ -211,7 +211,7 @@ ViewWithHeroAndCardsWithGlassHeader.args = {
 						cardBoxShadow={item.cardBoxShadow}
 						key={item.id}
 					>
-						<CompassCardTemplate data={item} />
+						<CompassCardTemplate data={{ ...item, title: "" }} />
 					</Card>
 				)}
 			/>
@@ -435,7 +435,7 @@ CompassPageView.args = {
 							cardBoxShadow={item.cardBoxShadow}
 							key={item.id}
 						>
-							<CompassCardTemplate data={item} />
+							<CompassCardTemplate data={{ ...item, title: "" }} />
 						</Card>
 					)}
 				/>

package/src/components/Page/ViewPageTemplate.test.tsx

@@ -77,7 +77,6 @@ describe("<ViewTemplatePage />", () => {
 								color="green"
 								hoverColor="green"
 								borderColor="none"
-								tagStyle={false}
 								mobileIcon={getFontAwesomeIcon("phone")}
 								mobileIconLabel="Contact Us"
 								onClick={() =>
@@ -191,6 +190,7 @@ describe("<ViewTemplatePage />", () => {
 							<div className="w-3/4 grid grid-cols-4 gap-8 h-[100%] max-xl:gap-1 max-lg:grid-cols-2 max-lg:gap-y-24 max-lg:justify-items-center">
 								<GenericList
 									data={DUMMYCOMPASSPRODUCTDATA}
+									listType="none"
 									renderItem={(item) => (
 										<Card
 											containerClasses={"w-3/4"}

package/src/components/Page/ViewPageTemplate.types.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import { ReactNode } from "react";
 
 export interface ViewPageTemplateTypes {
 	children: ReactNode;

package/src/components/PageSection/PageSection.stories.tsx

@@ -58,6 +58,7 @@ HorizontalCardsSection.args = {
 			/>
 			<GenericList
 				data={DUMMYPRODUCTDATA}
+				listType="none"
 				renderItem={(item) => (
 					<Card
 						containerClasses={
@@ -93,10 +94,11 @@ CompassCardsSection.args = {
 			/>
 			<GenericList
 				data={DUMMYCOMPASSPRODUCTDATA}
+				listType="none"
 				containerClasses="w-full grid grid-cols-4 gap-y-12 gap-x-8 h-full max-lg:grid-cols-2 max-lg:gap-y-12 max-lg:gap-x-2 max-md:gap-12 max-sm:w-[90%] max-sm:gap-8 justify-items-center"
 				renderItem={(item) => (
 					<Card
-						containerClasses={
+						containerClasses={ 
 							"w-full h-full shadow-md overflow-hidden rounded-md transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300 max-lg:transition-none max-lg:hover:transform-none max-w-72"
 						}
 						cardBackgroundColor={item.cardBackgroundColor}

package/src/components/PageSection/PageSections.test.tsx

@@ -1,4 +1,4 @@
-import { describe, it, expect, beforeEach, test } from "vitest";
+import { describe, it, expect, beforeEach } from "vitest";
 import { render, screen } from "@testing-library/react";
 import Section from "./PageSection";
 import Text from "../Text/Text";
@@ -56,6 +56,7 @@ describe("<Section /> with compass cards", () => {
 						<div className="grid grid-cols-4 gap-8 h-[100%] max-xl:gap-1 max-lg:grid-cols-2 max-lg:gap-y-24 max-lg:justify-items-center">
 							<GenericList
 								data={DUMMYCOMPASSPRODUCTDATA}
+								listType="none"
 								renderItem={(item) => (
 									<Card
 										containerClasses={"w-3/4"}

package/src/components/SearchInput/SearchInput.stories.tsx

@@ -0,0 +1,144 @@
+import { Meta, StoryFn } from "@storybook/react";
+import SearchInput from "./SearchInput";
+import { SearchInputProps } from "./SearchInput.types";
+import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
+
+export default {
+	title: "Components/SearchInput",
+	component: SearchInput,
+	tags: ["autodocs"],
+	argTypes: {
+		onButtonClick: { control: "none", table: { disable: true } },
+		inputType: { control: "none", table: { disable: true } },
+		inputName: { control: "none", table: { disable: true } },
+		placeholder: { control: "none" },
+		hasPlaceholder: { control: "none" },
+		inputTextSize: { control: "none" },
+		inputShape: { control: "none" },
+		backgroundColor: { control: "none" },
+		inputWidth: { control: "none" },
+		inputBorderClasses: { control: "none" },
+		buttonText: { control: "none", table: { disable: true } },
+		buttonIcon: { control: "none", table: { disable: true } },
+		buttonIconClasses: { control: "none" },
+		buttonClasses: { control: "none" },
+		containerClasses: { control: "none" },
+	},
+	parameters: { layout: "centered" },
+} as Meta;
+
+const Template: StoryFn<SearchInputProps> = (args) => <SearchInput {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+	inputType: "text",
+	inputName: "default",
+	hasPlaceholder: true,
+	placeholder: "Type something...",
+	inputTextSize: "text-base",
+	inputShape: "rounded-md",
+	backgroundColor: "bg-white",
+	inputWidth: "w-80",
+	inputBorderClasses: "border border-gray-300",
+	buttonText: <span>Search</span>,
+	buttonClasses: "bg-blue-500 text-white px-4 py-2 rounded-md",
+	buttonIcon: getFontAwesomeIcon("search"),
+	buttonIconClasses: "text-white",
+	containerClasses: "flex items-center space-x-2",
+	onButtonClick: (value) => alert(`Button clicked with input: ${value}`),
+};
+
+export const CommerceSearchInput = Template.bind({});
+CommerceSearchInput.args = {
+	inputType: "search",
+	inputName: "commerceSearch",
+	hasPlaceholder: true,
+	placeholder: "Search for product...",
+	inputTextSize: "text-sm",
+	inputShape: "",
+	backgroundColor: "bg-gray-50",
+	inputWidth: "w-full",
+	inputBorderClasses: "border border-gray-300 focus:outline-none rounded-l-md",
+	buttonIcon: getFontAwesomeIcon("search"),
+	buttonIconClasses: "text-white",
+	buttonClasses: "bg-teal-600 p-2 rounded-r-md hover:bg-teal-700",
+	containerClasses: "flex items-center shadow-sm overflow-hidden",
+	onButtonClick: (value) => console.log(`Searching for: ${value}`),
+};
+
+
+export const WithIconButton = Template.bind({});
+WithIconButton.args = {
+	inputType: "search",
+	inputName: "searchIcon",
+	hasPlaceholder: true,
+	placeholder: "Search...",
+	inputTextSize: "text-md",
+	inputShape: "rounded-full",
+	backgroundColor: "bg-gray-50",
+	inputWidth: "w-64",
+	inputBorderClasses: "border border-gray-400",
+	buttonIcon: getFontAwesomeIcon("magnifying-glass"),
+	buttonIconClasses: "text-blue-500",
+	buttonClasses: "p-2",
+	containerClasses: "flex items-center",
+	onButtonClick: (value) => console.log(`Searching for: ${value}`),
+};
+
+export const WithoutButton = Template.bind({});
+WithoutButton.args = {
+	inputType: "text",
+	inputName: "withoutButton",
+	hasPlaceholder: true,
+	placeholder: "No button here...",
+	inputTextSize: "text-sm",
+	inputShape: "rounded",
+	backgroundColor: "bg-gray-100",
+	inputWidth: "w-full",
+	inputBorderClasses: "border border-gray-300",
+	containerClasses: "flex items-center",
+	onButtonClick: () => { },
+};
+
+export const CustomizedButton = Template.bind({});
+CustomizedButton.args = {
+	inputType: "text",
+	inputName: "customButton",
+	hasPlaceholder: true,
+	placeholder: "Enter your query...",
+	inputTextSize: "text-lg",
+	inputShape: "rounded-lg",
+	backgroundColor: "bg-white",
+	inputWidth: "w-96",
+	inputBorderClasses: "border border-blue-500",
+	buttonText: (
+		<span className="flex items-center space-x-1">
+			{getFontAwesomeIcon("arrow-right")}
+			<span>Go</span>
+		</span>
+	),
+	buttonClasses:
+		"bg-green-600 text-white hover:bg-green-700 transition-colors rounded-full px-5 py-2",
+	buttonIcon: null,
+	containerClasses: "flex items-center space-x-3",
+	onButtonClick: (value) => alert(`Navigating with: ${value}`),
+};
+
+export const DisabledInput = Template.bind({});
+DisabledInput.args = {
+	inputType: "text",
+	inputName: "disabledInput",
+	hasPlaceholder: true,
+	placeholder: "Disabled...",
+	inputTextSize: "text-sm",
+	inputShape: "rounded",
+	backgroundColor: "bg-gray-200",
+	inputWidth: "w-72",
+	inputBorderClasses: "border border-gray-400 cursor-not-allowed",
+	buttonText: <span>Disabled</span>,
+	buttonClasses: "bg-gray-500 text-gray-300 px-4 py-2 rounded",
+	buttonIcon: getFontAwesomeIcon("ban"),
+	buttonIconClasses: "text-gray-400",
+	containerClasses: "flex items-center",
+	onButtonClick: () => alert("Button is disabled."),
+};

package/src/components/SearchInput/SearchInput.tsx

@@ -0,0 +1,81 @@
+import React, { useState } from "react";
+import FormButton from "../FormButton/FormButton";
+import { SearchInputProps } from "./SearchInput.types";
+
+const SearchInput: React.FC<SearchInputProps> = ({
+	label,
+	inputName,
+	inputType,
+	hasPlaceholder,
+	placeholder,
+	inputTextSize,
+	inputShape,
+	backgroundColor,
+	inputWidth,
+	inputBorderClasses,
+	buttonClasses,
+	buttonText,
+	buttonIcon,
+	buttonIconClasses,
+	containerClasses,
+	onButtonClick,
+	role,
+	ariaLabel,
+}) => {
+	const [inputValue, setInputValue] = useState<string>("");
+
+	const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		setInputValue(e.target.value);
+	};
+
+	const handleButtonClick = (
+		event: React.MouseEvent<
+			HTMLButtonElement | HTMLAnchorElement,
+			MouseEvent
+		>
+	) => {
+		event.preventDefault();
+		if (event.currentTarget instanceof HTMLButtonElement) {
+			onButtonClick(inputValue);
+		}
+	};
+
+	return (
+		<div className={containerClasses} role={role} aria-label={ariaLabel}>
+			<form className="w-full">
+				<label htmlFor={inputName} className={`sr-only`}>
+					{label}
+				</label>
+				<div className="flex w-full">
+					<div className="flex w-full">
+						<input
+							type={inputType}
+							placeholder={
+								hasPlaceholder ? placeholder : undefined
+							}
+							name={inputName}
+							id={inputName}
+							value={inputValue}
+							onChange={handleInputChange}
+							className={`flex p-2 ${inputTextSize} ${inputShape} ${backgroundColor} ${inputWidth} ${inputBorderClasses}`}
+						/>
+						<div
+							className={`flex items-center justify-center h-full`}
+						>
+							<FormButton
+								text={buttonText}
+								icon={buttonIcon}
+								iconClasses={buttonIconClasses}
+								as="button"
+								additionalClasses={buttonClasses}
+								onClick={handleButtonClick}
+							/>
+						</div>
+					</div>
+				</div>
+			</form>
+		</div>
+	);
+};
+
+export default SearchInput;

package/src/components/SearchInput/SearchInput.types.ts

@@ -0,0 +1,28 @@
+import React from "react";
+
+export interface SearchInputProps {
+	onChange?: (
+		e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>
+	) => void;
+	value?: string;
+	label: React.ReactNode;
+	role?: string;
+	ariaLabel?: string;
+	inputType: string;
+	inputName: string;
+	hasPlaceholder: boolean;
+	placeholder: string;
+	containerClasses?: string;
+	inputTextSize?: string;
+	inputWidth?: string;
+	inputShape?: string;
+	borderColor?: string;
+	backgroundColor?: string;
+	inputBorderClasses?: string;
+	additionalClasses?: string;
+	buttonText?: JSX.Element;
+	buttonClasses?: string;
+	buttonIcon?: JSX.Element | null;
+	buttonIconClasses?: string;
+	onButtonClick: (inputValue: string) => void;
+}