@agilant/toga-blox 1.0.5

package/src/components/Input/Input.test.tsx

@@ -0,0 +1,90 @@
+import "../../../dist/main.css";
+import { render, screen } from "@testing-library/react";
+import { describe, test, expect, beforeEach } from "vitest";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCircleArrowRight } from "@fortawesome/free-solid-svg-icons";
+import Input from "./Input";
+import Text from "../Text/Text";
+import FormButton from "../FormButton/FormButton";
+
+describe("<Input /> with all props", () => {
+	beforeEach(() => {
+		render(
+			<Input
+				hasValidation={false}
+				// LABEL
+				label={
+					<Text
+						size="md"
+						color="primary"
+						fontFamily="serif"
+						text="Search for items"
+						tag="h2"
+						additionalClasses="mb-0 pb-2 pl-2"
+					/>
+				}
+				labelVisible={true}
+				labelPlacement="left"
+				// INPUT DETAILS
+				inputName="search"
+				inputType="text"
+				// PLACEHOLDER
+				hasPlaceholder={true}
+				placeholder="Search for items"
+				// ICONS
+				hasLeftIcon={false}
+				hasRightIcon={false}
+				iconColor="black"
+				// INPUT STYLES
+				inputTextSize="medium"
+				inputShape="cornered"
+				borderColor="green"
+				backgroundColor="none"
+				inputWidth="w-96"
+				// BUTTON
+				hasButton={true}
+				button={
+					<FormButton
+						text="Submit"
+						as="button"
+						hoverBackground="green"
+						color="green"
+						icon={<FontAwesomeIcon icon={faCircleArrowRight} />}
+						fontColor="white"
+						additionalClasses="items-center px-4"
+						borderColor="green"
+						hoverFontColor="black"
+						shape="cornered"
+					/>
+				}
+			/>
+		);
+	});
+
+	test("renders Input component", () => {
+		expect(screen.getByTestId("input-container")).toBeInTheDocument();
+		expect(screen.getByTestId("input-element")).toBeInTheDocument();
+	});
+
+	test("renders correct Input label", () => {
+		expect(screen.getByTestId("input-label")).toBeInTheDocument();
+		expect(screen.getByTestId("input-label")).toHaveTextContent(
+			"Search for items"
+		);
+	});
+
+	test("renders correct button", () => {
+		expect(screen.getByTestId("submit-button")).toBeInTheDocument();
+		expect(screen.getByTestId("submit-button")).toHaveTextContent("Submit");
+	});
+
+	test("contains correct placeholder text", () => {
+		const input = screen.getByTestId("input-element");
+		expect(input).toHaveAttribute("placeholder", "Search for items");
+	});
+
+	test("renders correct border color class", () => {
+		const inputElement = screen.getByTestId("input-element");
+		expect(inputElement).toHaveClass("border-teal-500");
+	});
+});

package/src/components/Input/Input.tsx

@@ -0,0 +1,226 @@
+import React, { useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCircleArrowRight } from "@fortawesome/free-solid-svg-icons";
+import FormButton from "../FormButton/FormButton";
+import { InputTypes } from ".";
+import { validateInput } from "../../utils/inputValidation";
+
+import {
+	getInputBorderClassNames,
+	getInputPaddingClassNames,
+	getInputBackgroundClassNames,
+	getInputTextClasses,
+	getInputShape,
+	getLabelPlacement,
+	getLabelVisibility,
+	getSuccessColorClasses,
+	getErrorColorClasses,
+	getIconClasses,
+	inputButtonWithClasses,
+} from "./inputClassNames";
+
+const Input: React.FC<InputTypes> = ({
+	// FUNCTIONALITY
+	hasValidation = false,
+	errorMessage,
+	regex,
+	setControlledState,
+	controlledState,
+	// LABEL
+	label,
+	labelVisible = true,
+	labelPlacement,
+
+	// INPUT DETAILS
+	inputName,
+	inputType,
+
+	// PLACEHOLDER
+	hasPlaceholder = true,
+	placeholder,
+
+	// ICONS
+	hasLeftIcon,
+	hasRightIcon,
+	leftIcon,
+	rightIcon,
+	iconColor,
+	iconBackgroundColor,
+
+	// INPUT STYLES
+	inputTextSize,
+	inputShape,
+	borderColor = "primary",
+	backgroundColor,
+	inputWidth,
+	errorBorder,
+	successBorder,
+
+	// BUTTON
+	hasButton,
+	button = (
+		<FormButton
+			text="Submit"
+			as="button"
+			hoverBackground="green"
+			color="red"
+			icon={<FontAwesomeIcon icon={faCircleArrowRight} />}
+			fontColor="white"
+			borderColor="green"
+			hoverFontColor="black"
+			shape="cornered"
+			additionalClasses="h-full"
+		/>
+	),
+}) => {
+	const [isValid, setIsValid] = useState<string>("");
+	const [termInternal, setTermInternal] = useState<string>("");
+	const [inputBorderClasses, setInputBorderClasses] = useState<string>(
+		getInputBorderClassNames(borderColor)
+	);
+
+	let iconClasses = getIconClasses(
+		iconColor,
+		iconBackgroundColor,
+		inputShape
+	);
+
+	let errorColor = getErrorColorClasses(errorBorder);
+	let successColor = getSuccessColorClasses(successBorder);
+	let inputPaddingClasses = getInputPaddingClassNames(
+		hasButton,
+		hasLeftIcon,
+		hasRightIcon
+	);
+	let inputBackgroundClasses = getInputBackgroundClassNames(backgroundColor);
+	let inputShapeClasses = getInputShape(inputShape);
+	let inputWithButtonClasses = inputButtonWithClasses(inputShape);
+	let labelVisibility = getLabelVisibility(labelVisible);
+	let labelPlacementClasses = getLabelPlacement(labelPlacement);
+	let inputTextClasses = getInputTextClasses(inputTextSize);
+	let inputBorderColor = getInputBorderClassNames(borderColor);
+	const inputValue = termInternal || controlledState || "";
+	const setTerm = setControlledState || setTermInternal;
+
+	const handleBorderStyles = () => {
+		if (isValid !== "Success" && isValid !== "") {
+			setInputBorderClasses(errorColor);
+		} else if (isValid === "Success") {
+			setInputBorderClasses(successColor);
+		} else if (isValid === "") {
+			setInputBorderClasses(getInputBorderClassNames(borderColor));
+		}
+	};
+
+	const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		setTerm(e.target.value);
+
+		if (hasValidation) {
+			let validation =
+				validateInput &&
+				regex &&
+				errorMessage &&
+				validateInput(inputValue, regex, errorMessage);
+			setIsValid(validation || "");
+			handleBorderStyles();
+		}
+	};
+
+	return (
+		<div
+			className={`${labelPlacementClasses} w-full`}
+			data-testid="input-container"
+		>
+			<label
+				htmlFor={`pb-1 pl-1 ${inputName}`}
+				className={`${labelVisibility}`}
+				data-testid="input-label"
+			>
+				{label}
+			</label>
+			{hasButton ? (
+				<div className={`relative ${inputWidth} flex`}>
+					<div className="flex-1">
+						{hasLeftIcon && (
+							<div
+								className={`absolute bottom-1  flex items-center justify-center size-10 pointer-events-none ${iconClasses} `}
+							>
+								{leftIcon}
+							</div>
+						)}
+						<input
+							type={inputType}
+							placeholder={
+								hasPlaceholder ? placeholder : undefined
+							}
+							name={inputName}
+							id={inputName}
+							onChange={handleChange}
+							value={inputValue}
+							data-testid="input-element"
+							className={`block w-full border-2 p-2 ${inputTextClasses} ${inputWithButtonClasses} ${inputBackgroundClasses} ${inputPaddingClasses}  ${
+								!hasValidation
+									? inputBorderColor
+									: inputBorderClasses
+							}`}
+						/>
+					</div>
+
+					<div>
+						{hasButton && (
+							<div
+								className={`${inputShape} flex items-center justify-center h-full`}
+								data-testid="submit-button"
+							>
+								<div className="h-full bg-red-500">
+									{button}
+								</div>
+							</div>
+						)}
+					</div>
+				</div>
+			) : (
+				<div className={`relative ${inputWidth} flex`}>
+					{hasLeftIcon && (
+						<div
+							className={`absolute top-[1px] flex items-center justify-center size-10 pointer-events-none ${iconClasses} `}
+						>
+							{leftIcon}
+						</div>
+					)}
+					<input
+						type={inputType}
+						placeholder={hasPlaceholder ? placeholder : undefined}
+						name={inputName}
+						id={inputName}
+						onChange={handleChange}
+						value={inputValue}
+						data-testid="input-element"
+						className={`block w-full border-2 ${inputTextClasses} ${inputShapeClasses} ${inputBackgroundClasses} ${inputPaddingClasses} ${
+							!hasValidation
+								? inputBorderColor
+								: inputBorderClasses
+						}`}
+					/>
+					{hasRightIcon && (
+						<div
+							className={`absolute  end-1 flex items-center justify-center size-10 pointer-events-none ${iconClasses}`}
+						>
+							{rightIcon}
+						</div>
+					)}
+					{hasButton && (
+						<div
+							className={`${inputShape} flex items-center inset-y-0 end-1.5`}
+							data-testid="submit-button"
+						>
+							{button}
+						</div>
+					)}
+				</div>
+			)}
+		</div>
+	);
+};
+Input.displayName = "Memo(Input)";
+export default Input;

package/src/components/Input/Input.types.ts

@@ -0,0 +1,52 @@
+import React from "react";
+
+export interface InputTypes {
+	// FUNCTIONALITY
+	onChange?: (
+		e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>
+	) => void;
+	value?: string;
+	hasValidation?: boolean;
+	validateInput?: (inputValue: string | number, inputType: string) => string;
+	hasErrorMessage?: boolean;
+	errorMessage?: string;
+	regex?: RegExp;
+	setControlledState?: (value: string) => void;
+	controlledState?: string;
+	// LABEL
+	labelVisible: boolean;
+	label: React.ReactNode; // text that is displayed as the label, required bc it's either shown or only shown to screen readers
+	labelPlacement?: "top" | "left";
+	// INPUT DETAILS
+	inputType: string;
+	inputName: string; // required bc connects the label to the input
+	// PLACEHOLDER
+	hasPlaceholder: boolean;
+	placeholder: string;
+	// ICONS
+	hasLeftIcon?: boolean;
+	hasRightIcon?: boolean;
+	leftIcon?: React.ReactNode;
+	rightIcon?: React.ReactNode;
+	iconColor?: "green" | "blue" | "black" | string;
+	iconBackgroundColor?:
+		| "green"
+		| "white"
+		| "blue"
+		| "green"
+		| "none"
+		| string;
+	// INPUT STYLE
+	inputTextSize?: "small" | "medium" | "large" | string;
+	inputWidth?: string;
+	inputShape?: "cornered" | "semiRounded" | "rounded" | string;
+	borderColor?: "green" | "blue" | "grey" | "black" | "none" | string;
+	backgroundColor?: "white" | "blue" | "green" | "none" | string;
+	additionalClasses?: string | undefined;
+	errorBorder?: "red" | "orange" | string;
+	successBorder?: "green" | "blue" | "grey" | "black" | string;
+	// BUTTON
+	hasButton?: boolean;
+	button?: React.ReactNode;
+	onButtonClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}

package/src/components/Input/InputMemoTypes.tsx

@@ -0,0 +1,32 @@
+import { InputTypes } from ".";
+
+export const arePropsEqual = (prevProps: InputTypes, nextProps: InputTypes) => {
+	return (
+		prevProps.hasValidation === nextProps.hasValidation &&
+		prevProps.errorMessage === nextProps.errorMessage &&
+		prevProps.regex === nextProps.regex &&
+		prevProps.label === nextProps.label &&
+		prevProps.labelVisible === nextProps.labelVisible &&
+		prevProps.labelPlacement === nextProps.labelPlacement &&
+		prevProps.inputName === nextProps.inputName &&
+		prevProps.inputType === nextProps.inputType &&
+		prevProps.hasPlaceholder === nextProps.hasPlaceholder &&
+		prevProps.placeholder === nextProps.placeholder &&
+		prevProps.hasLeftIcon === nextProps.hasLeftIcon &&
+		prevProps.hasRightIcon === nextProps.hasRightIcon &&
+		prevProps.leftIcon === nextProps.leftIcon &&
+		prevProps.rightIcon === nextProps.rightIcon &&
+		prevProps.iconColor === nextProps.iconColor &&
+		prevProps.iconBackgroundColor === nextProps.iconBackgroundColor &&
+		prevProps.inputTextSize === nextProps.inputTextSize &&
+		prevProps.inputShape === nextProps.inputShape &&
+		prevProps.borderColor === nextProps.borderColor &&
+		prevProps.backgroundColor === nextProps.backgroundColor &&
+		prevProps.inputWidth === nextProps.inputWidth &&
+		prevProps.errorBorder === nextProps.errorBorder &&
+		prevProps.successBorder === nextProps.successBorder &&
+		prevProps.additionalClasses === nextProps.additionalClasses &&
+		prevProps.hasButton === nextProps.hasButton &&
+		prevProps.button === nextProps.button
+	);
+};

package/src/components/Input/index.ts

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

package/src/components/Input/inputClassNames.tsx

@@ -0,0 +1,169 @@
+import classNames from "classNames";
+
+// edits the input container border color & focus outline color
+export const getInputBorderClassNames = (borderColor: string | undefined) =>
+	classNames({
+		"border-teal-500 focus-within:outline-teal-500 focus-within:outline focus-within:outline-2 focus-within:outline-offset-1":
+			borderColor === "green",
+		"border-blue-500 focus-within:outline-blue-500 focus-within:outline focus-within:outline-2 focus-within:outline-offset-1":
+			borderColor === "blue",
+		"border-slate-400 focus-within:outline-slate-400 focus-within:outline focus-within:outline-2 focus-within:outline-offset-1":
+			borderColor === "grey",
+		"border-black focus-within:outline-black focus-within:outline focus-within:outline-2 focus-within:outline-offset-1":
+			borderColor === "black",
+		"border-transparent focus-within:outline-transparent focus-within:outline focus-within:outline-2 focus-within:outline-offset-1":
+			borderColor === "none",
+		[`border-${borderColor} focus-within:outline-${borderColor} focus-within:outline focus-within:outline-2 focus-within:outline-offset-1`]:
+			borderColor !== undefined,
+	});
+
+export const getSuccessColorClasses = (successBorder: string | undefined) =>
+	classNames({
+		"focus-within:outline-green-500 border-green-500 focus-within:outline focus-within:outline-2 focus-within:outline-offset-1":
+			successBorder === "green",
+		"focus-within:outline-blue-500 border-blue-500 focus-within:outline focus-within:outline-2 focus-within:outline-offset-1":
+			successBorder === "blue",
+		"focus-within:outline-grey-500 border-grey-500 focus-within:outline focus-within:outline-2 focus-within:outline-offset-1":
+			successBorder === "grey",
+		"focus-within:outline-black border-black focus-within:outline focus-within:outline-2 focus-within:outline-offset-1":
+			successBorder === "black",
+		[`focus-within:outline-${successBorder} border-${successBorder} focus-within:outline focus-within:outline-2 focus-within:outline-offset-1`]:
+			successBorder !== undefined,
+	});
+
+export const getErrorColorClasses = (errorBorder: string | undefined) =>
+	classNames({
+		"focus-within:outline-red-500 border-red-500 focus-within:outline focus-within:outline-2 focus-within:outline-offset-1":
+			errorBorder === "red",
+		"focus-within:outline-orange-500 border-orange-500 focus-within:outline focus-within:outline-2 focus-within:outline-offset-1":
+			errorBorder === "orange",
+		"focus-within:outline-black border-black focus-within:outline focus-within:outline-2 focus-within:outline-offset-1":
+			errorBorder === "black",
+		[`focus-within:outline-${errorBorder} border-${errorBorder} focus-within:outline focus-within:outline-2 focus-within:outline-offset-1`]:
+			errorBorder !== undefined,
+	});
+
+export const getInputPaddingClassNames = (
+	hasButton: boolean | undefined,
+	hasLeftIcon: boolean | undefined,
+	hasRightIcon: boolean | undefined
+) =>
+	classNames({
+		// NO ICONS OR BUTTON
+		"py-2 px-3":
+			hasButton === false &&
+			hasLeftIcon === false &&
+			hasRightIcon === false,
+
+		// LEFT ICON AND BUTTON
+		"py-3 pl-14":
+			hasButton === true &&
+			hasLeftIcon === true &&
+			hasRightIcon === false,
+
+		// BUTTON ONLY
+		"py-3 px-3":
+			hasButton === true &&
+			hasLeftIcon === false &&
+			hasRightIcon === false,
+
+		// LEFT ICON ONLY
+		"pl-12 py-2":
+			hasLeftIcon === true &&
+			hasRightIcon === false &&
+			hasButton === false,
+
+		// RIGHT ICON ONLY
+		"pr-10 py-2 pl-3":
+			hasRightIcon === true &&
+			hasLeftIcon === false &&
+			hasButton === false,
+
+		// DUAL ICONS ONLY
+		"py-2 pl-12":
+			hasRightIcon === true &&
+			hasLeftIcon === true &&
+			hasButton === false,
+	});
+
+// edits the background color of the input element
+export const getInputBackgroundClassNames = (
+	backgroundColor: string | undefined
+) =>
+	classNames({
+		"bg-white": backgroundColor === "white",
+		"bg-blue-100": backgroundColor === "blue",
+		"bg-slate-100": backgroundColor === "grey",
+		"bg-transparent": backgroundColor === "none",
+		[`bg-${backgroundColor}`]: backgroundColor !== undefined,
+	});
+
+// edits text styles of the input element
+export const getInputTextClasses = (inputTextSize: string | undefined) => {
+	return classNames({
+		"text-sm": inputTextSize === "small",
+		"text-md": inputTextSize === "medium",
+		"text-lg": inputTextSize === "large",
+		[`text-${inputTextSize}`]: inputTextSize !== undefined,
+	});
+};
+
+// manages the border radius of the input
+export const getInputShape = (inputShape: string | undefined) =>
+	classNames({
+		"rounded-none": inputShape === "cornered",
+		"rounded-md": inputShape === "semiRounded",
+		"rounded-full": inputShape === "rounded",
+	});
+
+// manages the border radius of the input when the input has a button with it
+export const inputButtonWithClasses = (inputShape: string | undefined) =>
+	classNames({
+		"rounded-tl-none rounded-bl-none": true,
+		"rounded-tr-none rounded-br-none": inputShape === "cornered",
+		"rounded-tr-md rounded-br-md": inputShape === "semiRounded",
+		"rounded-tr-full rounded-br-full": inputShape === "rounded",
+	});
+
+// manages the placement of the label
+export const getLabelPlacement = (labelPlacement: string | undefined) =>
+	classNames({
+		"flex items-center pr-3": labelPlacement === "left",
+		"": labelPlacement === "top",
+	});
+
+// toggles whether label is visible or not
+export const getLabelVisibility = (labelVisible: boolean | undefined) =>
+	classNames({
+		"sr-only": labelVisible === false,
+		"": labelVisible === true,
+	});
+
+export const getIconClasses = (
+	iconColor: string | undefined,
+	iconBackgroundColor: string | undefined,
+	inputShape: string | undefined
+) => {
+	return classNames(
+		{
+			"text-blue-500": iconColor === "blue",
+			"text-teal-500": iconColor === "green",
+			"text-black": iconColor === "black",
+			"text-white": iconColor === "white",
+			[`text-${iconColor}`]: iconColor !== undefined,
+		},
+		{
+			"bg-blue-200": iconBackgroundColor === "blue",
+			"bg-slate-200": iconBackgroundColor === "grey",
+			"bg-teal-100": iconBackgroundColor === "green",
+			"bg-black": iconBackgroundColor === "black",
+			"bg-transparent": iconBackgroundColor === "none",
+			[`bg-${iconBackgroundColor}`]: iconBackgroundColor !== undefined,
+		},
+		{
+			"rounded-none": inputShape === "cornered",
+			"rounded-md": inputShape === "semiRounded",
+			"rounded-full": inputShape === "rounded",
+		}
+	);
+};

package/src/components/MobileMenu/MobileMenu.tsx

@@ -0,0 +1,41 @@
+
+import { MobileMenuTypes } from "./MobileMenu.types";
+import { useHeaderContext } from "../Header/headerContext";
+
+const MobileMenu: React.FC<MobileMenuTypes> = ({
+	badge,
+	nav,
+	input,
+	icons,
+	mobileMenuClasses,
+}) => {
+	const {
+		hasMobileIcons,
+		hasMobileNavItems,
+		hasMobileBadge,
+		hasMobileSearchBar,
+	} = useHeaderContext();
+
+	return (
+		<nav
+			data-testid="secondary-nav"
+			aria-label="Secondary navigation"
+			className={`flex flex-col justify-start z-[1000] top-0 w-full h-full pt-16 pb-12 px-4 overflow-scroll ${mobileMenuClasses}`}
+		>
+			{hasMobileNavItems && <div className="mb-12">{nav}</div>}
+			{hasMobileBadge && (
+				<div className="flex w-1/2 mb-12 mx-auto">{badge}</div>
+			)}
+			{hasMobileIcons && icons && (
+				<div className="flex justify-around w-full mb-12">{icons}</div>
+			)}
+			{hasMobileSearchBar && (
+				<div className="flex w-full [&:has(:focus-visible)]:ring-2">
+					{input}
+				</div>
+			)}
+		</nav>
+	);
+};
+
+export default MobileMenu;

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

@@ -0,0 +1,30 @@
+import { DUMMYICONCOMPASSDATA, DUMMYICONTOGADATA } from "../Header/DUMMYICONDATA.json";
+import { TagName } from "../Text";
+
+
+export interface MobileMenuTypes {
+	onClick?: (
+		e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>
+	) => void;
+	handleNav?: () => void;
+	hasSearchBar?: boolean;
+	hasNavItems?: boolean;
+	hasBadge?: boolean;
+	hasIcons?: boolean;
+
+	hasMobileIcons?: boolean;
+	hasMobileNavItems?: boolean;
+	hasMobileBadge?: boolean;
+	hasMobileSearchBar?: boolean;
+	mobileMenuClasses?: string;
+
+	hasGlass?: boolean;
+	backgroundColor?: string;
+
+	nav?: React.ReactNode;
+	badge?: React.ReactNode;
+	input?: React.ReactNode;
+	icons?: React.ReactNode;
+
+	mobileCloseIcon?: JSX.Element | undefined | null;
+}

package/src/components/MobileMenu/index.ts

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