@agilant/toga-blox 1.0.9 → 1.0.10

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@agilant/toga-blox",
 	"private": false,
-	"version": "1.0.9",
+	"version": "1.0.10",
 	"description": "",
 	"main": "index.js",
 	"types": "dist/index.d.ts",

package/src/components/Text/Text.stories.tsx

@@ -7,28 +7,65 @@ export default {
 	component: Text,
 	argTypes: {
 		size: {
-			control: "none",
-			description: "The font size for the text. Use Tailwind CSS classes like 'text-xs', 'text-sm', 'text-md', 'text-lg', 'text-xl', 'text-2xl', 'text-3xl'. Default is 'text-base'.",
+			control: {
+				type: "select", // Dropdown control
+			},
+			options: [
+				"text-xs",
+				"text-sm",
+				"text-md",
+				"text-lg",
+				"text-xl",
+				"text-2xl",
+				"text-3xl",
+				"text-base",
+			], // Define options explicitly
+			description:
+				"The font size for the text. Use Tailwind CSS classes like 'text-xs', 'text-sm', 'text-md', etc. Default is 'text-base'.",
 		},
 		color: {
-			control: "none",
-			description: "The color of the text. Use Tailwind CSS classes like 'text-red-800', 'text-blue-800', 'text-green-800', 'text-slate-950', 'text-black', etc. Default is 'text-black'.",
+			control: {
+				type: "select", // Dropdown control
+			},
+			options: [
+				"text-red-800",
+				"text-blue-800",
+				"text-green-800",
+				"text-slate-950",
+				"text-black",
+			],
+			description:
+				"The color of the text. Use Tailwind CSS classes like 'text-red-800', 'text-blue-800', 'text-black', etc. Default is 'text-black'.",
 		},
 		tag: {
-			control: "none",
-			description: "The type of HTML element the text should be. Options include 'h1', 'h2', 'h3', 'h4', 'h5', 'p', 'span'. Default is 'span'.",
+			control: {
+				type: "select", // Dropdown control
+			},
+			options: ["h1", "h2", "h3", "h4", "h5", "p", "span"], // Ensure valid HTML tags are listed
+			description:
+				"The type of HTML element the text should be. Options include 'h1', 'h2', 'p', etc. Default is 'span'.",
 		},
 		fontFamily: {
-			control: "none",
-			description: "The type of font family. Use Tailwind CSS classes like 'font-sans', 'font-mono', 'font-serif'. Default is 'font-sans'.",
+			control: {
+				type: "select", // Dropdown control
+			},
+			options: ["font-sans", "font-mono", "font-serif"], // Define the font-family options
+			description:
+				"The type of font family. Use Tailwind CSS classes like 'font-sans', 'font-mono', etc. Default is 'font-sans'.",
 		},
 		text: {
-			control: "none",
+			control: {
+				type: "text", // Text input control
+			},
 			description: "The main text displayed on the component.",
+			defaultValue: "Testing",
 		},
 		additionalClasses: {
-			control: "none",
+			control: {
+				type: "text", // Text input control
+			},
 			description: "Additional Tailwind CSS classes to be added.",
+			defaultValue: "",
 		},
 	},
 	tags: ["autodocs"],

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

@@ -7,10 +7,10 @@ describe("<Text />", () => {
 		render(
 			<Text
 				text="Testing"
-				size="md"
-				color="red"
+				size="text-md"
+				color="text-red-500"
 				tag="h1"
-				fontFamily="sans"
+				fontFamily="font-sans"
 			/>
 		);
 	});
@@ -23,30 +23,23 @@ describe("<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");
-	// });
+	test("renders correct font color", () => {
+		const textElement = screen.getByTestId("text");
+		expect(textElement).toHaveClass("text-red-500");
+	});
 
-	FIXME: test("renders correct font size", () => {
-		// Check for class or style attribute
+	test("renders correct font size", () => {
 		const textElement = screen.getByTestId("text");
-		expect(textElement).toHaveClass("text-md"); // Or the specific class for medium size
+		expect(textElement).toHaveClass("text-md");
 	});
 
 	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'
+		expect(textElement.tagName).toBe("H1");
 	});
 });

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

@@ -1,120 +1,113 @@
 import React from "react";
-
-import Toaster, { ToasterTypes } from ".";
+import Toaster from ".";
 import { Meta, StoryFn } from "@storybook/react";
-import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
 
 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: {
 		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: getFontAwesomeIcon("x"),
-	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: getFontAwesomeIcon("check"),
-	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: getFontAwesomeIcon("exclamation"),
-	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,60 +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 { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
 
-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="bg-blue-500"
-				icon={getFontAwesomeIcon("coffee")}
-			/>
+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,70 +1,65 @@
 import React from "react";
-import Button from "../FormButton/FormButton";
 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 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";
+	// Pull out colorClass and icon from statusProps
+	const { colorClass, icon: maybeIcon } = statusProps;
+
+	// We'll combine colorClass with other container styles
+	const containerClasses = colorClass ?? "";
+
+	// 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>
-			) : null}
-			<div className="flex items-center justify-between">
-				<span className={`mr-2`}>{icon}</span>
-				<span className={textColorClass}>{message}</span>
-				{clearMessage && !hasClearText && (
-					<span className="cursor-pointer hover:bg-gray-200 py-1 px-2 rounded-md">
-						<span
-							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}`}
 						>
-							{getFontAwesomeIcon("times")}
-						</span>
-					</span>
-				)}
-				{hasClearText && clearText && (
-					<Button
-						onClick={handleClearMessage}
-						text={clearText}
-						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: string;
-	icon?: JSX.Element | null;
-	fullColor?: boolean;
-	hasBumper?: boolean;
-	title?: string;
-	hasClearText?: boolean;
-	clearText?: string;
+	hasClearButton?: boolean;
+	statusProps?: StatusProps;
 }

package/tailwind.config.js

@@ -1,5 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 
+const colors = require("tailwindcss/colors");
+
 module.exports = {
 	mode: "jit",
 	content: ["./src/**/*.{js,jsx,ts,tsx}"],
@@ -30,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"],