@agilant/toga-blox 1.0.8 → 1.0.10

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

@@ -1,122 +1,113 @@
 import React from "react";
-
-import Toaster, { ToasterTypes } from ".";
+import Toaster 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",
+			control: "array",
+			description:
+				"The main messages displayed on the toaster, passed as an array.",
 		},
 		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",
+				"Additional Tailwind CSS classes for the toaster container.",
 		},
-		hasBumper: {
+		hasClearButton: {
 			control: "boolean",
-			description: "toggle the left bumper toaster",
+			description: "Toggle to show or hide the clear message button.",
 		},
 		clearMessage: {
-			table: {
-				disable: true,
-			},
+			action: "Message Cleared!",
+		},
+		statusProps: {
+			control: "object",
+			description:
+				"Object containing colorClass and optional icon config.",
 		},
 	},
-
 	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>
-);
+const Template: StoryFn = (args) => <Toaster message={[]} {...args} />;
 
+/**
+ * Default
+ */
 export const Default = Template.bind({});
 Default.args = {
-	message: "Your action was successful!",
-	additionalClasses: `border-blue-500 ${minWidth}`,
+	message: ["Your action was successful!"],
+	statusProps: {
+		// Pass the literal Tailwind classes instead of color: "green"
+		colorClass: "bg-green-100 border border-green-500 text-green-800",
+	},
+	additionalClasses: "p-5",
 };
 
+/**
+ * WithIconFail
+ */
 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}`,
+	message: ["Your action failed!"],
+	statusProps: {
+		// Red variant
+		colorClass: "bg-red-100 border border-red-500 text-red-800",
+		icon: { icon: "x", type: "solid" },
+	},
+	additionalClasses: "p-5",
 };
 
+/**
+ * WithIconSuccess
+ */
 export const WithIconSuccess = Template.bind({});
 WithIconSuccess.args = {
-	...Default.args,
-	color: "green-800",
-	icon: <FontAwesomeIcon icon={faCheck} />,
-	additionalClasses: `border-green-500 ${minWidth}`,
+	message: ["Action completed successfully!"],
+	statusProps: {
+		// Green variant
+		colorClass: "bg-green-100 border border-green-600 text-green-800",
+		icon: { icon: "circleCheck", type: "solid" },
+	},
+	additionalClasses: "p-5",
 };
 
+/**
+ * WithIconAlert
+ */
 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}`,
+	message: ["Alert: Are you sure?"],
+	statusProps: {
+		// Gray variant
+		colorClass: "bg-yellow-100 border border-yellow-500 text-yellow-800",
+		icon: { icon: "triangleExclamation", type: "solid" },
+	},
+	additionalClasses: "p-5",
 };
 
+/**
+ * HasClearMessage
+ */
 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",
+	message: [
+		"Message can be cleared and input has different padding from the additionalClasses prop",
+	],
+	hasClearButton: true,
+	clearMessage: () => {
+		alert("Message Cleared!");
+	},
+	statusProps: {
+		// Orange variant
+		colorClass: "bg-orange-100 border border-orange-500 text-orange-800",
+		icon: { icon: "circleCheck", type: "solid" },
+	},
+	additionalClasses: "py-2 px-5",
 };

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

@@ -1,61 +1,67 @@
-import { render, screen, fireEvent } from "@testing-library/react";
-import { describe, expect, beforeEach, test, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, 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");
-	});
+const testId = "toaster-test-id";
+const testMessage = "Test Message";
 
-	test("renders with an icon when provided", () => {
-		render(
-			<Toaster
-				message="Test Message"
-				color="blue-500"
-				icon={<FontAwesomeIcon icon={faCoffee} />}
-			/>
+describe("Toaster Component Tests", () => {
+	test("renders the FA icon when passed in props", () => {
+		const customStatusProps = {
+			icon: { icon: "circleCheck", type: "solid" as "solid" },
+		};
+		const { container } = render(
+			<Toaster message={["Success!"]} statusProps={customStatusProps} />
 		);
-		expect(screen.getByTestId("toaster")).toBeInTheDocument();
+		const iconEl = container.querySelector(".fa-circle-check");
+		expect(iconEl).toBeInTheDocument();
 	});
-
-	test("renders the title when provided", () => {
-		render(
-			<Toaster
-				message="Test Message"
-				color="red-500"
-				title="Test Title"
-			/>
+	test("does not render an icon when icon is not in props", () => {
+		const customStatusProps = {};
+		const { container } = render(
+			<Toaster message={["Success!"]} statusProps={customStatusProps} />
 		);
-		expect(screen.getByTestId("toaster")).toHaveTextContent("Test Title");
+		const iconEl = container.querySelector(".fa-circle-check");
+		expect(iconEl).not.toBeInTheDocument();
 	});
 
-	test("renders with full color background", () => {
+	test("renders correct colors for status", () => {
+		const customStatusProps = {
+			colorClass: "bg-green-100 border border-green-500 text-green-800",
+		};
 		render(
-			<Toaster
-				message="Test Message"
-				color="blue-500"
-				title="Test Title"
-				fullColor
-			/>
+			<Toaster message={[testMessage]} statusProps={customStatusProps} />
+		);
+		expect(screen.getByTestId(testId)).toHaveTextContent(testMessage);
+		expect(screen.getByTestId(testId)).toHaveClass(
+			`${customStatusProps.colorClass}`
 		);
-		expect(screen.getByTestId("toaster")).toHaveClass("bg-blue-500");
 	});
+	test("calls clearMessage callback when the clear button is clicked", async () => {
+		// Arrange
+		const mockClearMessage = vi.fn();
+		const mockAlert = vi
+			.spyOn(window, "alert")
+			.mockImplementation(() => {});
 
-	test("clears the message on clear icon click", async () => {
-		const clearMessage = vi.fn();
 		render(
 			<Toaster
-				message="Test Message"
-				color="orange-500"
-				clearMessage={clearMessage}
+				message={[testMessage]}
+				hasClearButton
+				clearMessage={mockClearMessage}
 			/>
 		);
-		const clearButton = screen.getByTestId("clearMessage");
-		fireEvent.click(clearButton);
-		expect(clearMessage).toHaveBeenCalled();
+
+		// Act - Click the clear button
+		const clearButton = screen.getByTestId("clear-button");
+		await userEvent.click(clearButton);
+
+		// Assert
+		expect(mockAlert).toHaveBeenCalledWith("Message Cleared!");
+		expect(mockClearMessage).toHaveBeenCalledWith(true);
+
+		// Cleanup
+		mockAlert.mockRestore();
 	});
 });

package/src/components/Toaster/Toaster.tsx

@@ -1,78 +1,65 @@
-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 ".";
+import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
 
 const Toaster: React.FC<ToasterTypes> = ({
 	message,
-	additionalClasses = "",
+	additionalClasses,
 	clearMessage,
-	color,
-	icon,
-	fullColor = false,
-	hasBumper = true,
-	title = "",
-	hasClearText,
-	clearText,
+	hasClearButton,
+
+	statusProps = {
+		colorClass: "bg-gray-100 border border-gray-500 text-gay-800",
+		icon: { icon: "circleCheck", type: "solid" },
+	},
 }) => {
 	const handleClearMessage = () => {
 		if (clearMessage) {
+			alert("Message Cleared!");
 			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";
+	// Pull out colorClass and icon from statusProps
+	const { colorClass, icon: maybeIcon } = statusProps;
+
+	// We'll combine colorClass with other container styles
+	const containerClasses = colorClass ?? "";
 
-	const textColorClass = fullColor ? "text-white" : "text-black";
+	// Your existing custom classes
+	const shadowClasses = `shadow-lg shadow-boxShadow rounded-lg`;
+	const closeButtonClasses = `cursor-pointer text-xs ml-4`;
 
 	return (
 		<div
-			data-testid="toaster"
-			className={`${borderClass} border-${color} p-4 shadow-lg shadow-boxShadow text-sm ${backgroundColorClass} rounded ${additionalClasses}`}
+			data-testid="toaster-test-id"
+			role="alert"
+			aria-live="polite"
+			className={`${shadowClasses} ${containerClasses} ${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"
+			{message.map((msg, index) => (
+				<div key={index} className="flex items-center">
+					{maybeIcon && (
+						<div className="mr-4">
+							{getFontAwesomeIcon(maybeIcon.icon, maybeIcon.type)}
+						</div>
+					)}
+
+					<p className={index === 0 ? "font-semibold ml-2" : "ml-2"}>
+						{msg}
+					</p>
+
+					{hasClearButton && (
+						<div
+							data-testid="clear-button"
+							className={`${closeButtonClasses}`}
 							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>
+						>
+							{getFontAwesomeIcon("x", "solid")}
+						</div>
+					)}
+				</div>
+			))}
 		</div>
 	);
 };

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

@@ -1,12 +1,13 @@
+interface StatusProps {
+	// color: string;
+	icon?: { icon: string; type: "solid" | "regular" };
+	colorClass?: string;
+}
+
 export interface ToasterTypes {
-	message: string;
+	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;
+	hasClearButton?: boolean;
+	statusProps?: StatusProps;
 }

package/src/utils/assertTagName.tsx

@@ -1,4 +1,4 @@
-import { TagName } from "../components/Text/Text";
+import { TagName } from "../components/Text/Text.types";
 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}`);

package/src/utils/generateAccordionItem.tsx

@@ -1,6 +1,5 @@
 import React, { Fragment, useState } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";
+import { getFontAwesomeIcon } from "./getFontAwesomeIcon";
 
 type NavItem = {
 	title: string;
@@ -63,21 +62,16 @@ export const Accordion: React.FC<AccordionProps> = ({
 						<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}
-								/>
+								{getFontAwesomeIcon(
+									"chevronDown",
+									`text-xs transition-transform duration-300 transform ${accordionExpanded[index] ? "rotate-180" : ""}`
+								)}
 							</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"
-						}`}
+						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
 					>

package/src/utils/generateFooterContacts.tsx

@@ -1,12 +1,7 @@
 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";
+import { getFontAwesomeIcon } from "./getFontAwesomeIcon";
 
 interface ContactProps {
 	contactDataList: {
@@ -24,11 +19,11 @@ export const FooterContacts: React.FC<ContactProps> = ({ contactDataList }) => {
 	return contactDataList.map((contact) => {
 		const contactDetails = [
 			{
-				icon: faPhone,
+				icon: getFontAwesomeIcon("phone"),
 				text: contact.phone,
 			},
 			{
-				icon: faEnvelope,
+				icon: getFontAwesomeIcon("envelope"),
 				text: contact.email,
 			},
 		];
@@ -39,7 +34,7 @@ export const FooterContacts: React.FC<ContactProps> = ({ contactDataList }) => {
 				data-testid="contact-info"
 				className="flex flex-col pt-2 w-60"
 			>
-				<ContactInfoItem icon={faLocationDot}>
+				<ContactInfoItem icon={getFontAwesomeIcon("location-dot")}>
 					<a
 						className="flex flex-col hover:underline"
 						href={contact.googleLink}

package/src/utils/getFontAwesomeIcon.tsx

@@ -1,23 +1,18 @@
 import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IconDefinition } from "@fortawesome/free-solid-svg-icons";
 import * as Icons from "@fortawesome/free-solid-svg-icons";
 
-export const getFontAwesomeIcon = (
-	iconName: string
-): React.ReactElement | null => {
+export const getFontAwesomeIcon = (iconName: string, className = ""): React.ReactElement | null => {
 	try {
-		// Extract the required icon using bracket notation
-		const iconKey = `fa${iconName.charAt(0).toUpperCase()}${iconName.slice(
-			1
-		)}`;
-		const icon = (Icons as any)[iconKey];
+		const iconKey = `fa${iconName.charAt(0).toUpperCase()}${iconName.slice(1)}`;
+		const icon = Icons[iconKey as keyof typeof Icons] as IconDefinition;
 
-		if (!icon) {
-			throw new Error(`Icon not found: ${iconName}`);
+		if (icon) {
+			return <FontAwesomeIcon icon={icon} className={className} />;
+		} else {
+			throw new Error(`Icon not found or invalid type: ${iconName}`);
 		}
-
-		// Render the FontAwesomeIcon with the selected icon
-		return <FontAwesomeIcon icon={icon} />;
 	} catch (error) {
 		console.error(`Error loading Font Awesome icon: ${iconName}`, error);
 		return null;

package/tailwind.config.js

@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 
+const colors = require("tailwindcss/colors");
 
 module.exports = {
 	mode: "jit",
@@ -7,12 +8,23 @@ module.exports = {
 
 	theme: {
 		extend: {
+			width: {
+				"42px": "42px",
+				"26px": "26px",
+				"18px": "18px",
+			},
+			height: {
+				"42px": "42px",
+				"26px": "26px",
+				"18px": "18px",
+			},
 			maxHeight: {
 				"view-page": "1000px",
 			},
 			fontSize: {
 				"3xl": "2.25rem",
 				xxs: ".6rem",
+				"11px": "11px",
 			},
 			minWidth: {
 				navDropDown: "25em",
@@ -20,6 +32,11 @@ module.exports = {
 			maxWidth: {
 				pageSectionMaxWidth: "1500px",
 			},
+			colors: {
+				// Add any custom colors here or extend the default palette
+				yellow: colors.yellow,
+				orange: colors.orange,
+			},
 		},
 		fontFamily: {
 			sans: ["ui-sans-serif"],
@@ -27,6 +44,4 @@ module.exports = {
 			mono: ["ui-monospace"],
 		},
 	},
-
-	plugins: [require("daisyui")],
 };