@agilant/toga-blox 1.0.7 → 1.0.9

package/src/components/Badge/Badge.stories.tsx

@@ -8,229 +8,116 @@ export default {
 	title: "Components/Badge",
 	component: Badge,
 	argTypes: {
-		badgeSize: {
-			control: "none",
-			options: ["small", "medium", "large"],
-			table: {
-				disable: true,
-			},
-			description:
-				"The size of the badge (small, medium, or large). *Storybook prop only.",
-		},
-		width: {
-			control: "none",
-			table: {
-				disable: true,
-			},
-			description:
-				"Custom width for the badge. Use Tailwind CSS width classes.",
-		},
-		height: {
+		borderColor: {
 			control: "none",
-			table: {
-				disable: true,
-			},
-			description:
-				"Custom height for the badge. Use Tailwind CSS height classes.",
+			description: "Sets the border color of the badge using Tailwind CSS classes. Example: `border-gray-300`.",
 		},
-		color: {
+		borderWidth: {
 			control: "none",
-			table: {
-				disable: true,
-			},
-			options: [
-				"red",
-				"blue",
-				"green",
-				"black",
-				"white",
-				"orange",
-				"purple",
-				"none",
-			],
-			description:
-				"The background color of the badge. Use Tailwind CSS color classes. *Storybook prop only.",
+			description: "Sets the border width of the badge using Tailwind CSS classes. Example: `border-2`.",
 		},
-		borderColor: {
+		borderRadius: {
 			control: "none",
-			options: [
-				"red",
-				"blue",
-				"green",
-				"black",
-				"orange",
-				"purple",
-				"none",
-			],
-			description:
-				"The color of the badge's border. Use Tailwind CSS color classes.",
+			description: "Sets the border radius of the badge using Tailwind CSS classes. Example: `rounded-full`.",
 		},
-		fontColor: {
+		backgroundColor: {
 			control: "none",
-			table: {
-				disable: true,
-			},
-			description:
-				"The text color on the badge. Use Tailwind CSS color classes. *Storybook prop only.",
+			description: "Sets the background color of the badge using Tailwind CSS classes. Example: `bg-gray-100`.",
 		},
-		hoverColor: {
+		badgeContainerClasses: {
 			control: "none",
-			options: ["red", "green", "blue", "orange", "purple", "none"],
-			description:
-				"The background color of the badge when hovered. Use Tailwind CSS color classes.",
+			description: "Additional Tailwind CSS classes for the badge container. Example: `p-2`.",
 		},
-		cursorPointer: {
+		iconSize: {
 			control: "none",
-			description: "Whether the badge should have a pointer cursor.",
-		},
-		image: {
-			table: {
-				disable: true,
-			},
-			description: "The image to display in the badge.",
-		},
-		to: {
-			table: {
-				disable: true,
-			},
-			description: "The link to redirect to when the badge is clicked.",
-		},
-		text: {
-			table: {
-				disable: true,
-			},
-			description: "The text to display inside the badge.",
+			description: "Sets the size of the icon inside the badge using Tailwind CSS classes. Example: `h-6 w-6`.",
 		},
 		hasMobileStyle: {
 			control: "none",
-			description:
-				"Whether the badge uses responsive styles for mobile view.",
+			description: "Indicates whether mobile-specific styles should be applied to the badge.",
 		},
 		mobileIcon: {
-			table: {
-				disable: true,
-			},
 			control: "none",
-			description:
-				"The icon to display in the badge when viewed on mobile.",
+			description: "The icon to be displayed in mobile view.",
 		},
 		mobileIconLabel: {
-			table: {
-				disable: true,
-			},
 			control: "none",
-			description: "Aria-label for the mobile icon.",
+			description: "ARIA label for the mobile icon, used for accessibility.",
 		},
-		href: {
-			table: {
-				disable: true,
-			},
+		hasLeftIcon: {
+			control: "none",
+			description: "Determines if an icon should be displayed on the left side of the badge.",
 		},
-		additionalClasses: {
-			table: {
-				disable: true,
-			},
+		hasRightIcon: {
+			control: "none",
+			description: "Determines if an icon should be displayed on the right side of the badge.",
 		},
 		icon: {
-			table: {
-				disable: true,
-			},
-			description: "The icon to display in the badge.",
+			control: "none",
+			description: "The icon to be displayed inside the badge.",
 		},
-		as: {
-			table: {
-				disable: true,
-			},
+		image: {
+			control: "none",
+			description: "An image to be displayed inside the badge.",
 		},
-		type: {
-			table: {
-				disable: true,
-			},
+		text: {
+			control: "none",
+			description: "The text or content to be displayed inside the badge.",
 		},
-		testId: {
-			table: {
-				disable: true,
-			},
-			description: "Test ID for the badge component.",
+		borderHoverColor: {
+			control: "none",
+			description: "Sets the border hover color of the badge using Tailwind CSS classes. Example: `border-gray-400`.",
 		},
-		onClick: {
-			table: {
-				disable: true,
-			},
+		cursorPointer: {
+			control: "none",
+			description: "Determines if the badge should have a pointer cursor.",
 		},
-		textSize: {
+		type: {
 			control: "none",
-			options: [
-				"text-xs",
-				"text-sm",
-				"text-base",
-				"text-lg",
-				"text-xl",
-				"text-2xl",
-				"text-3xl",
-				"text-4xl",
-				"text-5xl",
-				"text-6xl",
-			],
-			table: {
-				disable: true,
-			},
-			description:
-				"The size of the text inside the badge. Use Tailwind CSS text size classes.",
+			description: "Determines the type of element the badge should render as.",
 		},
-		borderWidth: {
+		hoverColor: {
 			control: "none",
-			description:
-				"The width of the badge's border. Use Tailwind CSS width classes.",
+			description: "Sets the hover color of the badge using Tailwind CSS classes. Example: `hover:bg-gray-200`.",
 		},
-		borderHoverColor: {
+		to: {
 			control: "none",
-			description:
-				"The border color of the badge when hovered. Use Tailwind CSS color classes.",
+			description: "The URL to navigate to when the badge is clicked.",
 		},
-		iconSize: {
+		href: {
 			control: "none",
-			description:
-				"The size of the icon inside the badge. Use Tailwind CSS size classes.",
+			description: "The URL to navigate to when the badge is clicked.",
 		},
-		hasLeftIcon: {
+		color: {
 			control: "none",
-			description:
-				"Whether the badge should display an icon on the left side.",
+			description: "Sets the text color of the badge using Tailwind CSS classes. Example: `text-gray-800`.",
 		},
-		hasRightIcon: {
+		badgeSize: {
 			control: "none",
-			description:
-				"Whether the badge should display an icon on the right side.",
+			description: "Sets the size of the badge using Tailwind CSS classes. Example: `h-8 w-8`.",
 		},
-		style: {
-			table: {
-				disable: true,
-			},
+		iconOrder: {
 			control: "none",
-			description: "Custom inline styles for the badge component.",
+			description: "Determines the order of the icon inside the badge.",
 		},
-		badgeContainerClasses: {
+		testId: {
 			control: "none",
-			description:
-				"Additional classes for the badge container for custom styling. Provide a string with Tailwind CSS classes.",
+			description: "Test ID for the badge component.",
 		},
-		backgroundColor: {
+		textSize: {
 			control: "none",
-			description:
-				"The background color of the badge. Use Tailwind CSS color classes.",
+			description: "Sets the size of the text inside the badge using Tailwind CSS classes. Example: `text-sm`.",
 		},
-		borderRadius: {
+		fontFamily: {
 			control: "none",
-			description:
-				"The border radius of the badge. Use Tailwind CSS border radius classes.",
+			description: "Sets the font family of the text inside the badge using Tailwind CSS classes. Example: `font-serif`.",
 		},
-		iconOrder: {
+		additionalClasses: {
 			control: "none",
-			table: {
-				disable: true,
-			},
-			description: "The order of the icon in the badge.",
+			description: "Additional Tailwind CSS classes for the badge. Example: `mb-2`.",
+		},
+		fontColor: {
+			control: "none", description: "Sets the text color of the badge using Tailwind CSS classes. Example: `text-gray-800`.",
 		},
 	},
 	tags: ["autodocs"],
@@ -243,91 +130,107 @@ const Template: StoryFn<BadgeTypes> = (args) => <Badge {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
-	type: "span",
-	cursorPointer: false,
-	hasMobileStyle: true,
 	backgroundColor: "bg-[#DBEAFE]",
-	mobileIconLabel: "Default Badge",
-	borderColor: "",
-	borderRadius: "rounded",
+	borderRadius: "rounded-md",
 	badgeContainerClasses: "px-3 py-1",
+	hasMobileStyle: true,
+	mobileIconLabel: "Default Badge",
 	text: (
 		<Text
 			color="text-black"
 			fontFamily="font-serif"
 			text="Required"
-			tag="p"
+			tag="span"
 			additionalClasses="font-bold"
 			size="text-sm"
 		/>
 	),
 };
+Default.parameters = {
+	docs: {
+		description: {
+			story: "The default badge component with basic styling, including text and optional mobile-specific styling.",
+		},
+	},
+};
 
 export const BadgeWithLeftIcon = Template.bind({});
 BadgeWithLeftIcon.args = {
-	type: "span",
-	cursorPointer: false,
+	backgroundColor: "bg-[#DAF8E6]",
+	borderRadius: "rounded-md",
+	badgeContainerClasses: "px-3 py-1",
 	hasMobileStyle: true,
 	mobileIconLabel: "Complete",
-	backgroundColor: "bg-[#DAF8E6]",
-	borderRadius: "rounded",
-	badgeContainerClasses: "px-3 py-[3px]",
 	mobileIcon: getFontAwesomeIcon("check"),
+	icon: getFontAwesomeIcon("check"),
+	hasLeftIcon: true,
+	iconSize: "text-sm",
 	text: (
 		<Text
 			color="text-black"
 			fontFamily="font-serif"
 			text="Complete"
-			tag="p"
+			tag="span"
 			size="text-sm"
 		/>
 	),
-	icon: getFontAwesomeIcon("check"),
-	hasLeftIcon: true,
-	iconSize: "text-sm pr-2",
+};
+BadgeWithLeftIcon.parameters = {
+	docs: {
+		description: {
+			story: "A badge with an icon on the left side, typically used to indicate completion or success.",
+		},
+	},
 };
 
 export const BadgeWithRightIcon = Template.bind({});
 BadgeWithRightIcon.args = {
-	type: "span",
-	cursorPointer: false,
+	backgroundColor: "bg-red-100",
+	borderRadius: "rounded-md",
+	badgeContainerClasses: "px-3 py-1",
 	hasMobileStyle: true,
 	mobileIconLabel: "Incomplete",
-	backgroundColor: "bg-red-100",
-	borderRadius: "rounded",
-	badgeContainerClasses: "px-3 py-[3px]",
-	mobileIcon: getFontAwesomeIcon("check"),
+	mobileIcon: getFontAwesomeIcon("xmark"),
+	icon: getFontAwesomeIcon("xmark"),
+	hasRightIcon: true,
+	iconSize: "text-sm",
 	text: (
 		<Text
 			color="text-black"
 			fontFamily="font-serif"
 			text="Incomplete"
-			tag="p"
+			tag="span"
 			size="text-sm"
 		/>
 	),
-	icon: getFontAwesomeIcon("Xmark"),
-	hasRightIcon: true,
-	iconSize: "text-sm pl-2",
+};
+BadgeWithRightIcon.parameters = {
+	docs: {
+		description: {
+			story: "A badge with an icon on the right side, typically used to indicate an incomplete or failed status.",
+		},
+	},
 };
 
 export const CommerceBadge = Template.bind({});
 CommerceBadge.args = {
-	cursorPointer: false,
-	hasMobileStyle: false,
-	mobileIconLabel: "Commerce Badge",
 	backgroundColor: "bg-[#DAF8E6]",
-	borderColor: "",
-
-	borderRadius: "rounded",
+	borderRadius: "rounded-md",
+	badgeContainerClasses: "px-3 py-1",
 	text: (
 		<Text
 			color="text-black"
 			fontFamily="font-serif"
 			text="In Stock"
-			tag="p"
+			tag="span"
 			size="text-sm"
 		/>
 	),
-	badgeContainerClasses: "px-3 py-[3px]",
+};
+CommerceBadge.parameters = {
+	docs: {
+		description: {
+			story: "A badge used in e-commerce contexts to indicate that an item is in stock, with a custom background color and rounded borders.",
+		},
+	},
 };

package/src/components/Badge/Badge.test.tsx

@@ -2,24 +2,37 @@ import { render, screen } from "@testing-library/react";
 import { describe, expect, beforeEach, test } from "vitest";
 import Badge from "./Badge";
 import Text from "../Text/Text";
-import Image from "../Image/Image";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-	faCircleExclamation,
-	faCheck,
-} from "@fortawesome/free-solid-svg-icons";
+import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
+
+describe("FontAwesome Icon Rendering", () => {
+	test("renders exclamation-circle icon", () => {
+		render(getFontAwesomeIcon("exclamationCircle"));
+		const icon = screen.getByTestId("icon");
+		expect(icon).toBeInTheDocument();
+	});
+
+	test("renders check icon", () => {
+		render(getFontAwesomeIcon("check"));
+		const icon = screen.getByTestId("icon");
+		expect(icon).toBeInTheDocument();
+	});
+
+	test("renders xmark icon", () => {
+		render(getFontAwesomeIcon("xmark"));
+		const icon = screen.getByTestId("icon");
+		expect(icon).toBeInTheDocument();
+	});
+});
 
 describe("<Badge />", () => {
 	beforeEach(() => {
 		render(
 			<Badge
 				type="span"
-				color="red"
-				borderColor="red"
-				hoverColor="none"
-				badgeSize="large"
+				borderColor="border-red-500"
+				hoverColor="hover:bg-none"
 				testId="priority-badge"
-				mobileIcon={<FontAwesomeIcon icon={faCircleExclamation} />}
+				mobileIcon={getFontAwesomeIcon("exclamationCircle")}
 				mobileIconLabel="Priority"
 				text={
 					<Text
@@ -41,17 +54,12 @@ describe("<Badge />", () => {
 	});
 
 	test("has correct text", () => {
-		expect(screen.getByTestId("priority-badge")).toHaveTextContent("Priority");
-	});
-
-	test("has correct background color", () => {
-		const badge = screen.getByTestId("priority-badge");
-		expect(badge).toHaveClass("bg-red");
+		expect(screen.getByTestId("badge-text")).toHaveTextContent("Priority");
 	});
 
 	test("has correct border color", () => {
 		const badge = screen.getByTestId("priority-badge");
-		expect(badge).toHaveClass("border-red");
+		expect(badge).toHaveClass("border-red-500");
 	});
 });
 
@@ -60,14 +68,12 @@ describe("<Badge /> with icon", () => {
 		render(
 			<Badge
 				type="span"
-				color="green"
-				borderColor="green"
-				hoverColor="none"
-				badgeSize="large"
+				borderColor="border-green-500"
+				hoverColor="hover:bg-none"
 				testId="icon-badge"
 				cursorPointer={false}
-				icon={<FontAwesomeIcon icon={faCheck} />}
-				mobileIcon={<FontAwesomeIcon icon={faCheck} />}
+				icon={getFontAwesomeIcon("check")}
+				mobileIcon={getFontAwesomeIcon("check")}
 				mobileIconLabel="Complete"
 				text={
 					<Text
@@ -89,21 +95,16 @@ describe("<Badge /> with icon", () => {
 	});
 
 	test("has correct text", () => {
-		expect(screen.getByTestId("icon-badge")).toHaveTextContent("Complete");
-	});
-
-	test("has correct background color", () => {
-		const badge = screen.getByTestId("icon-badge");
-		expect(badge).toHaveClass("bg-green");
+		expect(screen.getByTestId("badge-text")).toHaveTextContent("Complete");
 	});
 
 	test("has correct border color", () => {
 		const badge = screen.getByTestId("icon-badge");
-		expect(badge).toHaveClass("border-green");
+		expect(badge).toHaveClass("border-green-500");
 	});
 
 	test("has correct icon", () => {
-		const icon = screen.getByTestId("badge-icon");
+		const icon = screen.getByTestId("icon");
 		expect(icon).toBeInTheDocument();
 	});
 });
@@ -114,13 +115,12 @@ describe("<Badge /> with pill style", () => {
 			<Badge
 				type="href"
 				href="#"
-				color="blue"
-				borderColor="none"
-				hoverColor="blue"
+				borderColor="border-none"
+				hoverColor="hover:bg-blue-500"
 				testId="pill-badge"
 				cursorPointer={false}
-				icon={<FontAwesomeIcon icon={faCheck} />}
-				mobileIcon={<FontAwesomeIcon icon={faCheck} />}
+				icon={getFontAwesomeIcon("check")}
+				mobileIcon={getFontAwesomeIcon("check")}
 				mobileIconLabel="Complete"
 				text={
 					<>
@@ -143,11 +143,10 @@ describe("<Badge /> with pill style", () => {
 					</>
 				}
 				image={
-					<Image
+					<img
 						src="../../../assets/contact-image.png"
 						alt=""
-						background={false}
-						additionalClasses="flex justify-center w-12 h-12 max-md:hidden"
+						className="flex justify-center w-12 h-12 max-md:hidden"
 					/>
 				}
 			/>
@@ -166,7 +165,7 @@ describe("<Badge /> with pill style", () => {
 
 	test("has correct background color", () => {
 		const pill = screen.getByTestId("pill-badge");
-		expect(pill).toHaveClass("bg-blue");
+		expect(pill).toHaveClass("hover:bg-blue-500");
 	});
 
 	test("has correct image", () => {