@agilant/toga-blox 1.0.5

package/src/components/Text/Text.test.tsx

@@ -0,0 +1,52 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, beforeEach, test } from "vitest";
+import Text from "./Text";
+
+describe("<Text />", () => {
+	beforeEach(() => {
+		render(
+			<Text
+				text="Testing"
+				size="md"
+				color="red"
+				tag="h1"
+				fontFamily="sans"
+			/>
+		);
+	});
+
+	test("renders Text component", () => {
+		expect(screen.getByTestId("text")).toBeInTheDocument();
+	});
+
+	test("contain correct text", () => {
+		expect(screen.getByTestId("text")).toHaveTextContent("Testing");
+	});
+
+	// Style-based tests might need adjustments
+
+	// test("renders correct font color", () => {
+	// 	// Adjust the test based on how the color is applied
+	// 	// For example, if using Tailwind, check for the relevant class instead
+	// 	const textElement = screen.getByTestId("text");
+	// 	expect(textElement).toHaveClass("text-red-500");
+	// });
+
+	FIXME: test("renders correct font size", () => {
+		// Check for class or style attribute
+		const textElement = screen.getByTestId("text");
+		expect(textElement).toHaveClass("text-md"); // Or the specific class for medium size
+	});
+
+	test("renders correct font family", () => {
+		const textElement = screen.getByTestId("text");
+		// Check for the presence of the Tailwind CSS class for 'sans' font family
+		expect(textElement).toHaveClass("font-sans");
+	});
+
+	test("renders correct element type", () => {
+		// Assuming 'as' prop is set to 'h1' in your test setup
+		const textElement = screen.getByTestId("text");
+		expect(textElement.tagName).toBe("H1"); // Check that the element is an 'h1'
+	});
+});

package/src/components/Text/Text.tsx

@@ -0,0 +1,80 @@
+import React, { ReactNode } from "react";
+import { TextTypes } from "./Text.types";
+
+const sizeClassesMap = {
+	xs: "text-xs",
+	sm: "text-sm",
+	md: "text-md",
+	lg: "text-lg",
+	xl: "text-xl",
+	xxl: "text-2xl",
+	xxxl: "text-3xl",
+};
+
+const colorClassesMap: { [key: string]: string } = {
+	slate: "text-slate-950",
+	red: "text-red-800",
+	blue: "text-blue-800",
+	green: "text-teal-800",
+	black: "text-slate-950",
+	white: "text-slate-100",
+};
+
+const fontFamilyMap = {
+	sans: "font-sans",
+	serif: "font-serif",
+	mono: "font-mono",
+};
+
+const Text: React.FC<TextTypes> = ({
+	size,
+	color = "slate",
+	tag = "span",
+	text,
+	fontFamily = "sans",
+	additionalClasses,
+	...props
+}) => {
+	const textSizeClasses = sizeClassesMap[size as keyof typeof sizeClassesMap];
+	const textColorClasses = colorClassesMap[color];
+	const fontFamilyClasses =
+		fontFamilyMap[fontFamily as keyof typeof fontFamilyMap];
+
+	let textClasses = `
+		${additionalClasses}
+	    ${textSizeClasses}
+		${textColorClasses}
+		${fontFamilyClasses}
+
+	  `;
+
+	// Fixing the TS error on TagName w/ adding type string triggered this error on ElementTag:
+		// The error message is indicating that a string value is not assignable to
+		// the type React.ElementType. This is because React.ElementType is expecting
+		// a React component, not a string. However, in React, a string can be used
+		// as a component if it represents a valid HTML tag.
+
+		// The issue here is that TypeScript is not correctly inferring the type of tag.
+		// You can solve this by explicitly telling TypeScript that tag can be a string
+		// representing a valid HTML tag or a React component. Here's how you can do it:
+		// This tells TypeScript that tag can be a string representing a valid HTML tag
+		// (like "span", "div", etc.) or a React component. This should solve your issue.
+		// If it doesn't, please provide more context or check the rest of
+		// your code for potential type mismatches.
+
+	// Solution:
+	const ElementTag: React.ElementType = tag as
+		| keyof JSX.IntrinsicElements
+		| React.ComponentType;
+
+	// Was previously:
+	// const ElementTag = tag ?? "span";
+
+	return (
+		<ElementTag data-testid="text" className={`${textClasses}`} {...props}>
+			{text}
+		</ElementTag>
+	);
+};
+
+export default Text;

package/src/components/Text/Text.types.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+
+export type TagName = "span" | "p" | "h1" | "h2" | "h3" | "h4" | "h5" | string;
+
+export interface TextTypes {
+	size: string;
+	color: "red" | "blue" | "green" | "black" | "slate" | string;
+	tag?: TagName;
+	text: ReactNode;
+	fontFamily: "sans" | "mono" | "serif" | string;
+	additionalClasses?: string | undefined;
+}

package/src/components/Text/index.ts

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

package/src/components/Toaster/Toaster.stories.tsx

@@ -0,0 +1,122 @@
+import React from "react";
+
+import Toaster, { ToasterTypes } from ".";
+import { Meta, StoryFn } from "@storybook/react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCheck, faExclamation, faX } from "@fortawesome/free-solid-svg-icons";
+
+export default {
+	title: "Components/Toaster",
+	component: Toaster,
+	argTypes: {
+		color: {
+			control: "select",
+			description: "The main color displayed on the toaster",
+			options: ["green-800", "red-800", "blue-800", "orange-800"],
+		},
+
+		icon: {
+			table: {
+				disable: true,
+			},
+		},
+		title: {
+			table: {
+				disable: true,
+			},
+		},
+		message: {
+			control: "text",
+			description: "The main text displayed on the toaster",
+		},
+		additionalClasses: {
+			table: {
+				disable: true,
+			},
+		},
+		clearText: {
+			control: "text",
+			description:
+				"The text displayed on the clear message button if set to true",
+		},
+		hasClearText: {
+			control: "boolean",
+			description: "must be set to true to display the clear text button",
+		},
+		fullColor: {
+			control: "boolean",
+			description: "toggle the background color of toaster",
+		},
+		hasBumper: {
+			control: "boolean",
+			description: "toggle the left bumper toaster",
+		},
+		clearMessage: {
+			table: {
+				disable: true,
+			},
+		},
+	},
+
+	tags: ["autodocs"],
+	parameters: {
+		// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+		layout: "centered",
+	},
+} as Meta;
+
+const minWidth = "min-w-[200px]";
+
+const Template: StoryFn<ToasterTypes> = (args) => (
+	<div className="">
+		<Toaster {...args} />
+	</div>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+	message: "Your action was successful!",
+	additionalClasses: `border-blue-500 ${minWidth}`,
+};
+
+export const WithIconFail = Template.bind({});
+WithIconFail.args = {
+	...Default.args,
+	message: "Your action failed!",
+	color: "red-800",
+	icon: <FontAwesomeIcon icon={faX} />,
+	additionalClasses: `border-red-500 ${minWidth}`,
+};
+
+export const WithIconSuccess = Template.bind({});
+WithIconSuccess.args = {
+	...Default.args,
+	color: "green-800",
+	icon: <FontAwesomeIcon icon={faCheck} />,
+	additionalClasses: `border-green-500 ${minWidth}`,
+};
+
+export const WithIconAlert = Template.bind({});
+WithIconAlert.args = {
+	...Default.args,
+	message: "Alert, are you sure!",
+	color: "orange-800",
+	icon: <FontAwesomeIcon icon={faExclamation} />,
+	additionalClasses: `border-orange-500  ${minWidth}`,
+};
+
+export const HasClearMessage = Template.bind({});
+HasClearMessage.args = {
+	...Default.args,
+	clearText: "Clear Message",
+	color: "blue-800",
+	hasClearText: true,
+	clearMessage: () => alert("Message Cleared!"),
+};
+
+export const FullColor = Template.bind({});
+FullColor.args = {
+	...Default.args,
+	fullColor: true,
+	color: "blue-800",
+};

package/src/components/Toaster/Toaster.test.tsx

@@ -0,0 +1,61 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, expect, beforeEach, test, vi } from "vitest";
+import Toaster from "./Toaster";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCoffee, faTimes } from "@fortawesome/free-solid-svg-icons";
+
+describe("Toaster Component Tests", () => {
+	test("renders correctly with minimal props", () => {
+		render(<Toaster message="Test Message" color="green-500" />);
+		expect(screen.getByTestId("toaster")).toHaveTextContent("Test Message");
+		expect(screen.getByTestId("toaster")).toHaveClass("border-green-500");
+	});
+
+	test("renders with an icon when provided", () => {
+		render(
+			<Toaster
+				message="Test Message"
+				color="blue-500"
+				icon={<FontAwesomeIcon icon={faCoffee} />}
+			/>
+		);
+		expect(screen.getByTestId("toaster")).toBeInTheDocument();
+	});
+
+	test("renders the title when provided", () => {
+		render(
+			<Toaster
+				message="Test Message"
+				color="red-500"
+				title="Test Title"
+			/>
+		);
+		expect(screen.getByTestId("toaster")).toHaveTextContent("Test Title");
+	});
+
+	test("renders with full color background", () => {
+		render(
+			<Toaster
+				message="Test Message"
+				color="blue-500"
+				title="Test Title"
+				fullColor
+			/>
+		);
+		expect(screen.getByTestId("toaster")).toHaveClass("bg-blue-500");
+	});
+
+	test("clears the message on clear icon click", async () => {
+		const clearMessage = vi.fn();
+		render(
+			<Toaster
+				message="Test Message"
+				color="orange-500"
+				clearMessage={clearMessage}
+			/>
+		);
+		const clearButton = screen.getByTestId("clearMessage");
+		fireEvent.click(clearButton);
+		expect(clearMessage).toHaveBeenCalled();
+	});
+});

package/src/components/Toaster/Toaster.tsx

@@ -0,0 +1,80 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React from "react";
+import Button from "../FormButton/FormButton";
+import { faTimes } from "@fortawesome/free-solid-svg-icons";
+import { ToasterTypes } from ".";
+
+const Toaster: React.FC<ToasterTypes> = ({
+	message,
+	additionalClasses = "",
+	clearMessage,
+	color,
+	icon,
+	fullColor = false,
+	hasBumper = true,
+	title = "",
+	hasClearText,
+	clearText,
+}) => {
+	const handleClearMessage = () => {
+		if (clearMessage) {
+			clearMessage(true);
+		}
+	};
+
+	// Simplified Color Handling
+	const iconColorMap: { [key: string]: string } = {
+		"green-800": "text-green-800",
+		"red-800": "text-red-800",
+		"orange-800": "text-orange-800",
+		"blue-800": "text-blue-800",
+	};
+	const iconClass = iconColorMap[color] || "";
+	// Improved CSS Class Composition
+	const borderClass = `border ${
+		hasBumper ? `border-l-4 border-${color}` : "border-l-1"
+	} `;
+	const backgroundColorClass = fullColor ? `bg-${color}` : "bg-white";
+
+	const textColorClass = fullColor ? "text-white" : "text-black";
+
+	return (
+		<div
+			data-testid="toaster"
+			className={`${borderClass} border-${color} p-4 shadow-lg shadow-boxShadow text-sm ${backgroundColorClass} rounded ${additionalClasses}`}
+		>
+			{title ? (
+				<h3 className="ml-8 font-bold text-xl text-left">{title}</h3>
+			) : (
+				<></>
+			)}
+			<div className="flex items-center justify-between">
+				<span className={`mr-2 ${iconClass}`}>{icon}</span>
+				<span className={textColorClass}>{message}</span>
+				{clearMessage && !hasClearText && (
+					<span className="cursor-pointer hover:bg-gray-200 py-1 px-2 rounded-md">
+						<FontAwesomeIcon
+							data-testid="clearMessage"
+							onClick={handleClearMessage}
+							className={`cursor-pointer ${textColorClass}`}
+							icon={faTimes}
+						/>
+					</span>
+				)}
+				{hasClearText && clearText && (
+					<Button
+						onClick={handleClearMessage}
+						text={clearText}
+						color="primary"
+						shape="outline"
+						type={"button"}
+						isDisabled={false}
+						additionalClasses="ml-2 px-4"
+					/>
+				)}
+			</div>
+		</div>
+	);
+};
+
+export default Toaster;

package/src/components/Toaster/Toaster.types.ts

@@ -0,0 +1,12 @@
+export interface ToasterTypes {
+	message: string;
+	additionalClasses?: string;
+	clearMessage?: React.Dispatch<React.SetStateAction<boolean>>;
+	color: "green-800" | "red-800" | "yellow-800" | "blue-800" | "orange-800";
+	icon?: JSX.Element;
+	fullColor?: boolean;
+	hasBumper?: boolean;
+	title?: string;
+	hasClearText?: boolean;
+	clearText?: string;
+}

package/src/components/Toaster/index.ts

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

package/src/hoc/index.ts

@@ -0,0 +1,2 @@
+// src/hoc/index.ts
+export { default as withStoryBook } from "./styling/withStoryBook";

package/src/hoc/styling/withStoryBook.tsx

@@ -0,0 +1,19 @@
+import React, { CSSProperties } from "react";
+
+export interface WithStoryBookProps {
+	storybookStyle?: CSSProperties;
+}
+
+const withStoryBook = <P extends object>(
+	Component: React.ComponentType<P>
+): React.FC<P & WithStoryBookProps> => {
+	return ({ storybookStyle, ...props }: WithStoryBookProps) => {
+		return (
+			<div style={storybookStyle}>
+				<Component {...(props as P)} />
+			</div>
+		);
+	};
+};
+
+export default withStoryBook;

package/src/main.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/setupTests.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/src/userHoc/index.ts

@@ -0,0 +1 @@
+export { default as withMemo } from "./withMemo";

package/src/userHoc/withMemo.tsx

@@ -0,0 +1,20 @@
+// withMemo.jsx
+import React, { memo } from "react";
+
+// Define a generic type that extends React component props
+type ComponentType<P = {}> = React.ComponentType<P>;
+
+// This is the type for the props comparison function
+type ArePropsEqual<P> = (
+	prevProps: Readonly<P>,
+	nextProps: Readonly<P>
+) => boolean;
+
+const withMemo = <P extends {}>(
+	Component: ComponentType<P>,
+	arePropsEqual?: ArePropsEqual<P>
+) => {
+	return memo(Component, arePropsEqual);
+};
+
+export default withMemo;

package/src/utils/assertTagName.tsx

@@ -0,0 +1,7 @@
+import { TagName } from "../components/Text/Text";
+function assertTagName(tag: string): asserts tag is TagName {
+	if (!["span", "p", "h1", "h2", "h3", "h4", "h5"].includes(tag)) {
+		throw new Error(`Invalid tag name: ${tag}`);
+	}
+}
+export default assertTagName;

package/src/utils/generateAccordionItem.tsx

@@ -0,0 +1,102 @@
+import React, { Fragment, useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";
+
+type NavItem = {
+	title: string;
+	links: { link: string; menuItem: string }[];
+};
+
+type AccordionProps = {
+	navData: NavItem[];
+	accordionParentStyle: string;
+	accordionExpandedStyle: string;
+};
+
+export const Accordion: React.FC<AccordionProps> = ({
+	navData,
+	accordionParentStyle,
+	accordionExpandedStyle,
+}) => {
+	// setting state to be an object, with each key being the index of the accordion item ->
+	//  allows for multiple accordions to be open at once
+	// had to reduce in order for aria-expanded to work
+	const [accordionExpanded, setAccordionExpanded] = useState<
+		Record<number, boolean>
+	>(navData.reduce((acc, _, index) => ({ ...acc, [index]: false }), {}));
+
+	const toggleAccordion = (index: number) => {
+		setAccordionExpanded((prevState) => ({
+			...prevState,
+			[index]: !prevState[index],
+		}));
+	};
+
+	// Expand the accordion when Enter key is pressed for tab users
+	const handleKeyDown = (
+		event: React.KeyboardEvent<HTMLDivElement>,
+		index: number
+	) => {
+		if (event.key === "Enter") {
+			toggleAccordion(index);
+		}
+	};
+
+	return (
+		<>
+			{navData.map((item: NavItem, index: number) => (
+				<Fragment key={item.title}>
+					{/* SCREEN READER:
+						1. should announce expanded status
+						2. should announce that parent item is a button
+						3. should announce title of accordion
+						4. should be able to use enter key to open
+						5. should announce that this is a navigation */}
+					<div
+						className={`cursor-pointer ${accordionParentStyle}`}
+						role="button"
+						onClick={() => toggleAccordion(index)}
+						aria-expanded={accordionExpanded[index]}
+						tabIndex={0}
+						onKeyDown={(event) => handleKeyDown(event, index)} // Attach handleKeyDown function here
+					>
+						<div className="px-6 text-left items-center h-10 select-none flex justify-between flex-row">
+							<div className="flex w-3/4">{item.title}</div>
+							<div className="flex w-1/2 justify-end">
+								<FontAwesomeIcon
+									className={`text-xs transition-transform duration-300 transform ${
+										accordionExpanded[index]
+											? "rotate-180"
+											: ""
+									}`}
+									icon={faChevronDown}
+								/>
+							</div>
+						</div>
+					</div>
+					<div
+						className={`px-6 w-full overflow-hidden transition-[max-height] duration-500 ease-in-out  ${
+							accordionExpanded[index] ? "max-h-96" : "max-h-0"
+						}`}
+						aria-hidden={!accordionExpanded[index]}
+						tabIndex={accordionExpanded[index] ? 0 : -1} // Set tabIndex dynamically
+					>
+						<ul className={`${accordionExpandedStyle}`}>
+							{item.links.map((link) => (
+								<li key={link.menuItem} className="py-1">
+									<a
+										href={link.link}
+										className="hover:underline"
+										data-testid={link.menuItem}
+									>
+										{link.menuItem}
+									</a>
+								</li>
+							))}
+						</ul>
+					</div>
+				</Fragment>
+			))}
+		</>
+	);
+};

package/src/utils/generateFooterContacts.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+import Text from "../components/Text/Text";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+	faEnvelope,
+	faLocationDot,
+	faPhone,
+} from "@fortawesome/free-solid-svg-icons";
+import { ContactInfoItem } from "../components/Footer/ContactInfoItem";
+
+interface ContactProps {
+	contactDataList: {
+		id: string;
+		address: string;
+		city: string;
+		state: string;
+		googleLink: string;
+		phone: string;
+		email: string;
+	}[];
+}
+
+export const FooterContacts: React.FC<ContactProps> = ({ contactDataList }) => {
+	return contactDataList.map((contact) => {
+		const contactDetails = [
+			{
+				icon: faPhone,
+				text: contact.phone,
+			},
+			{
+				icon: faEnvelope,
+				text: contact.email,
+			},
+		];
+
+		return (
+			<div
+				key={contact.id}
+				data-testid="contact-info"
+				className="flex flex-col pt-2 w-60"
+			>
+				<ContactInfoItem icon={faLocationDot}>
+					<a
+						className="flex flex-col hover:underline"
+						href={contact.googleLink}
+						target="_blank"
+					>
+						{[contact.address, contact.city, contact.state].map(
+							(text, index) => (
+								<Text
+									key={index}
+									size={""}
+									color={""}
+									text={text}
+									fontFamily={""}
+								/>
+							)
+						)}
+					</a>
+				</ContactInfoItem>
+				{contactDetails.map((detail, index) => (
+					<ContactInfoItem key={index} icon={detail.icon}>
+						<Text
+							size={""}
+							color={""}
+							text={detail.text}
+							fontFamily={""}
+							additionalClasses="my-1"
+						/>
+					</ContactInfoItem>
+				))}
+			</div>
+		);
+	});
+};