@agilant/toga-blox 1.0.5 → 1.0.7

package/.gitattributes

@@ -0,0 +1,5 @@
+* text=auto eol=lf
+*.bat text eol=crlf
+*.sh text eol=lf
+*.png binary
+*.jpg binary

package/README.md

@@ -23,7 +23,9 @@ Install Docker from Docker's official website.
 
 Once Docker is installed, use the following commands to manage the Docker containers:
 
-build the Docker images: docker-compose build
+build the Docker images: docker-compose build --no-cache
+
+install the required packages using the docker: docker-compose run --rm ui npm install
 
 To start the services: docker-compose up
 

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@agilant/toga-blox",
 	"private": false,
-	"version": "1.0.5",
+	"version": "1.0.7",
 	"description": "",
 	"main": "index.js",
 	"types": "dist/index.d.ts",
@@ -17,22 +17,23 @@
 	"author": "",
 	"license": "ISC",
 	"dependencies": {
-		"daisyui": "^3",
+		"@emotion/is-prop-valid": "^1.1.3",
 		"@storybook/addon-docs": "^7.6.6",
 		"@storybook/addon-viewport": "^7.6.10",
+		"@tanstack/react-virtual": "^3.1.3",
+		"@tanstack/virtual-core": "^3.1.3",
 		"classnames": "^2.5.1",
+		"daisyui": "^3",
+		"esbuild-wasm": "^0.23.0",
+		"framer-motion": "^11.0.8",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"framer-motion": "^11.0.8",
-		"tslib": "^2.3.0",
-		"@emotion/is-prop-valid": "^1.1.3",
-		"@tanstack/virtual-core": "^3.1.3",
-		"@tanstack/react-virtual": "^3.1.3"
+		"tslib": "^2.3.0"
 	},
 	"devDependencies": {
 		"@fortawesome/fontawesome-svg-core": "^6.5.1",
-		"@fortawesome/free-solid-svg-icons": "^6.5.1",
-		"@fortawesome/react-fontawesome": "^0.2.0",
+		"@fortawesome/free-solid-svg-icons": "^6.5.2",
+		"@fortawesome/react-fontawesome": "^0.2.2",
 		"@storybook/addon-a11y": "^7.6.8",
 		"@storybook/addon-essentials": "^7.6.6",
 		"@storybook/addon-interactions": "^7.6.6",
@@ -42,8 +43,8 @@
 		"@storybook/react": "^7.6.6",
 		"@storybook/react-vite": "^7.6.6",
 		"@storybook/test": "^7.6.6",
-		"@testing-library/jest-dom": "^6.2.0",
-		"@testing-library/react": "^14.1.2",
+		"@testing-library/jest-dom": "^6.4.6",
+		"@testing-library/react": "^14.3.1",
 		"@testing-library/user-event": "^14.5.2",
 		"@types/react-router-dom": "^5.3.3",
 		"@vitejs/plugin-react": "^4.2.1",
@@ -59,12 +60,12 @@
 		"typescript": "^5.3.3",
 		"vite": "^4.5.1",
 		"vite-tsconfig-paths": "^4.2.2",
-		"vitest": "^1.2.1"
+		"vitest": "^1.6.0"
 	},
 	"peerDependencies": {
 		"@fortawesome/fontawesome-svg-core": "^1.2.35",
-		"@fortawesome/free-solid-svg-icons": "^5.15.4",
-		"@fortawesome/react-fontawesome": "^0.1.15",
+		"@fortawesome/free-solid-svg-icons": "^6.5.2",
+		"@fortawesome/react-fontawesome": "^0.2.2",
 		"react-router-dom": "^5.2.0"
 	}
 }

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

@@ -2,7 +2,6 @@ import { Meta, StoryFn } from "@storybook/react";
 import Text from "../Text/Text";
 import Badge from "./Badge";
 import { BadgeTypes } from "./Badge.types";
-import Image from "../Image/Image";
 import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
 
 export default {
@@ -10,12 +9,35 @@ export default {
 	component: Badge,
 	argTypes: {
 		badgeSize: {
-			control: "select",
+			control: "none",
 			options: ["small", "medium", "large"],
-			description: "The size of the badge.",
+			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: {
+			control: "none",
+			table: {
+				disable: true,
+			},
+			description:
+				"Custom height for the badge. Use Tailwind CSS height classes.",
 		},
 		color: {
-			control: "select",
+			control: "none",
+			table: {
+				disable: true,
+			},
 			options: [
 				"red",
 				"blue",
@@ -26,10 +48,11 @@ export default {
 				"purple",
 				"none",
 			],
-			description: "The badge color.",
+			description:
+				"The background color of the badge. Use Tailwind CSS color classes. *Storybook prop only.",
 		},
 		borderColor: {
-			control: "select",
+			control: "none",
 			options: [
 				"red",
 				"blue",
@@ -39,20 +62,25 @@ export default {
 				"purple",
 				"none",
 			],
-			description: "The border color of the badge.",
+			description:
+				"The color of the badge's border. Use Tailwind CSS color classes.",
 		},
 		fontColor: {
-			control: "select",
-			options: ["white", "black"],
-			description: "The text color on the button.",
+			control: "none",
+			table: {
+				disable: true,
+			},
+			description:
+				"The text color on the badge. Use Tailwind CSS color classes. *Storybook prop only.",
 		},
 		hoverColor: {
-			control: "select",
+			control: "none",
 			options: ["red", "green", "blue", "orange", "purple", "none"],
-			description: "The background color on hover",
+			description:
+				"The background color of the badge when hovered. Use Tailwind CSS color classes.",
 		},
 		cursorPointer: {
-			control: "boolean",
+			control: "none",
 			description: "Whether the badge should have a pointer cursor.",
 		},
 		image: {
@@ -61,15 +89,6 @@ export default {
 			},
 			description: "The image to display in the badge.",
 		},
-		tagStyle: {
-			control: "boolean",
-			description: "Whether the badge is a tag style.",
-		},
-		tagStyleIconColor: {
-			control: "select",
-			options: ["red", "blue", "green", "orange", "purple", "black"],
-			description: "The color of the icon for tag style.",
-		},
 		to: {
 			table: {
 				disable: true,
@@ -80,24 +99,27 @@ export default {
 			table: {
 				disable: true,
 			},
-			description: "The text to display in the badge.",
+			description: "The text to display inside the badge.",
 		},
 		hasMobileStyle: {
-			control: "boolean",
-			description: "Whether the badge uses responsive styles or not.",
+			control: "none",
+			description:
+				"Whether the badge uses responsive styles for mobile view.",
 		},
-
 		mobileIcon: {
 			table: {
 				disable: true,
 			},
+			control: "none",
 			description:
-				"The icon to display in the badge when on mobile view.",
+				"The icon to display in the badge when viewed on mobile.",
 		},
 		mobileIconLabel: {
 			table: {
 				disable: true,
 			},
+			control: "none",
+			description: "Aria-label for the mobile icon.",
 		},
 		href: {
 			table: {
@@ -113,6 +135,7 @@ export default {
 			table: {
 				disable: true,
 			},
+			description: "The icon to display in the badge.",
 		},
 		as: {
 			table: {
@@ -128,12 +151,87 @@ export default {
 			table: {
 				disable: true,
 			},
+			description: "Test ID for the badge component.",
 		},
 		onClick: {
 			table: {
 				disable: true,
 			},
 		},
+		textSize: {
+			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.",
+		},
+		borderWidth: {
+			control: "none",
+			description:
+				"The width of the badge's border. Use Tailwind CSS width classes.",
+		},
+		borderHoverColor: {
+			control: "none",
+			description:
+				"The border color of the badge when hovered. Use Tailwind CSS color classes.",
+		},
+		iconSize: {
+			control: "none",
+			description:
+				"The size of the icon inside the badge. Use Tailwind CSS size classes.",
+		},
+		hasLeftIcon: {
+			control: "none",
+			description:
+				"Whether the badge should display an icon on the left side.",
+		},
+		hasRightIcon: {
+			control: "none",
+			description:
+				"Whether the badge should display an icon on the right side.",
+		},
+		style: {
+			table: {
+				disable: true,
+			},
+			control: "none",
+			description: "Custom inline styles for the badge component.",
+		},
+		badgeContainerClasses: {
+			control: "none",
+			description:
+				"Additional classes for the badge container for custom styling. Provide a string with Tailwind CSS classes.",
+		},
+		backgroundColor: {
+			control: "none",
+			description:
+				"The background color of the badge. Use Tailwind CSS color classes.",
+		},
+		borderRadius: {
+			control: "none",
+			description:
+				"The border radius of the badge. Use Tailwind CSS border radius classes.",
+		},
+		iconOrder: {
+			control: "none",
+			table: {
+				disable: true,
+			},
+			description: "The order of the icon in the badge.",
+		},
 	},
 	tags: ["autodocs"],
 	parameters: {
@@ -146,139 +244,90 @@ const Template: StoryFn<BadgeTypes> = (args) => <Badge {...args} />;
 export const Default = Template.bind({});
 Default.args = {
 	type: "span",
-	color: "red",
-	borderColor: "red",
-	hoverColor: "none",
-	badgeSize: "large",
 	cursorPointer: false,
-	tagStyle: false,
 	hasMobileStyle: true,
-	mobileIcon: getFontAwesomeIcon("exclamation"),
-	mobileIconLabel: "Priority",
-	testId: "priority-badge",
+	backgroundColor: "bg-[#DBEAFE]",
+	mobileIconLabel: "Default Badge",
+	borderColor: "",
+	borderRadius: "rounded",
+	badgeContainerClasses: "px-3 py-1",
 	text: (
 		<Text
-			size="md"
-			color="primary"
-			fontFamily="serif"
-			text="Priority"
+			color="text-black"
+			fontFamily="font-serif"
+			text="Required"
 			tag="p"
 			additionalClasses="font-bold"
+			size="text-sm"
 		/>
 	),
 };
 
-export const Processing = Template.bind({});
-Processing.args = {
+export const BadgeWithLeftIcon = Template.bind({});
+BadgeWithLeftIcon.args = {
 	type: "span",
-	color: "purple",
-	borderColor: "purple",
-	hoverColor: "none",
-	badgeSize: "large",
 	cursorPointer: false,
-	tagStyle: false,
-	hasMobileStyle: false,
-	mobileIcon: getFontAwesomeIcon("exclamation"),
-	mobileIconLabel: "Processing",
-	testId: "priority-badge",
+	hasMobileStyle: true,
+	mobileIconLabel: "Complete",
+	backgroundColor: "bg-[#DAF8E6]",
+	borderRadius: "rounded",
+	badgeContainerClasses: "px-3 py-[3px]",
+	mobileIcon: getFontAwesomeIcon("check"),
 	text: (
 		<Text
-			size="md"
-			color="primary"
-			fontFamily="serif"
-			text="Processing"
+			color="text-black"
+			fontFamily="font-serif"
+			text="Complete"
 			tag="p"
-			additionalClasses="font-bold"
+			size="text-sm"
 		/>
 	),
+	icon: getFontAwesomeIcon("check"),
+	hasLeftIcon: true,
+	iconSize: "text-sm pr-2",
 };
 
-export const BadgeWithIcon = Template.bind({});
-BadgeWithIcon.args = {
+export const BadgeWithRightIcon = Template.bind({});
+BadgeWithRightIcon.args = {
 	type: "span",
-	color: "green",
-	hoverColor: "none",
-	borderColor: "green",
-	badgeSize: "large",
 	cursorPointer: false,
-	tagStyle: false,
 	hasMobileStyle: true,
+	mobileIconLabel: "Incomplete",
+	backgroundColor: "bg-red-100",
+	borderRadius: "rounded",
+	badgeContainerClasses: "px-3 py-[3px]",
 	mobileIcon: getFontAwesomeIcon("check"),
-	mobileIconLabel: "Complete",
 	text: (
 		<Text
-			size="md"
-			color="primary"
-			fontFamily="serif"
-			text="Complete"
+			color="text-black"
+			fontFamily="font-serif"
+			text="Incomplete"
 			tag="p"
+			size="text-sm"
 		/>
 	),
-	icon: getFontAwesomeIcon("check"),
-};
-
-export const PillStyle = Template.bind({});
-PillStyle.args = {
-	type: "href",
-	href: "#",
-	color: "blue",
-	hoverColor: "blue",
-	borderColor: "none",
-	tagStyle: false,
-	hasMobileStyle: true,
-	mobileIcon: getFontAwesomeIcon("phone"),
-	mobileIconLabel: "Contact Us",
-	text: (
-		<>
-			<Text
-				size="md"
-				color="primary"
-				fontFamily="serif"
-				text="Contact Us"
-				tag="h2"
-				additionalClasses="pl-2 pb-0 font-bold"
-			/>
-			<Text
-				size="md"
-				color="primary"
-				fontFamily="serif"
-				text="1-800-800-8000"
-				tag="p"
-				additionalClasses="pl-2 pt-0"
-			/>
-		</>
-	),
-	image: (
-		<Image
-			src="../../../assets/contact-image.png"
-			alt=""
-			background={false}
-			additionalClasses="flex justify-center w-12 h-12 max-md:hidden"
-		/>
-	),
+	icon: getFontAwesomeIcon("Xmark"),
+	hasRightIcon: true,
+	iconSize: "text-sm pl-2",
 };
 
-export const TagStyle = Template.bind({});
-TagStyle.args = {
-	type: "span",
-	color: "white",
-	hoverColor: "none",
-	borderColor: "red",
-	badgeSize: "large",
-	tagStyle: true,
-	tagStyleIconColor: "red",
+export const CommerceBadge = Template.bind({});
+CommerceBadge.args = {
 	cursorPointer: false,
-	hasMobileStyle: true,
-	mobileIcon: getFontAwesomeIcon("D"),
-	mobileIconLabel: "Damaged",
+	hasMobileStyle: false,
+	mobileIconLabel: "Commerce Badge",
+	backgroundColor: "bg-[#DAF8E6]",
+	borderColor: "",
+
+	borderRadius: "rounded",
 	text: (
 		<Text
-			size="md"
-			color="primary"
-			fontFamily="serif"
-			text="Damaged"
+			color="text-black"
+			fontFamily="font-serif"
+			text="In Stock"
 			tag="p"
+			size="text-sm"
 		/>
 	),
-	icon: getFontAwesomeIcon("D"),
+	badgeContainerClasses: "px-3 py-[3px]",
 };

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

@@ -23,10 +23,10 @@ describe("<Badge />", () => {
 				mobileIconLabel="Priority"
 				text={
 					<Text
-						size="md"
-						color="black"
+						size="text-md"
+						color="text-black"
 						text="Priority"
-						fontFamily="serif"
+						fontFamily="font-serif"
 						tag="h2"
 						additionalClasses="font-bold"
 					/>
@@ -46,14 +46,13 @@ describe("<Badge />", () => {
 
 	test("has correct background color", () => {
 		const badge = screen.getByTestId("priority-badge");
-		expect(badge).toHaveClass("bg-red-200");
+		expect(badge).toHaveClass("bg-red");
 	});
 
 	test("has correct border color", () => {
 		const badge = screen.getByTestId("priority-badge");
-		expect(badge).toHaveClass("border-red-500");
+		expect(badge).toHaveClass("border-red");
 	});
-
 });
 
 describe("<Badge /> with icon", () => {
@@ -66,17 +65,16 @@ describe("<Badge /> with icon", () => {
 				hoverColor="none"
 				badgeSize="large"
 				testId="icon-badge"
-				tagStyle={false}
 				cursorPointer={false}
 				icon={<FontAwesomeIcon icon={faCheck} />}
 				mobileIcon={<FontAwesomeIcon icon={faCheck} />}
 				mobileIconLabel="Complete"
 				text={
 					<Text
-						size="md"
-						color="black"
+						size="text-md"
+						color="text-black"
 						text="Complete"
-						fontFamily="serif"
+						fontFamily="font-serif"
 						tag="h2"
 						additionalClasses="font-bold"
 					/>
@@ -96,19 +94,18 @@ describe("<Badge /> with icon", () => {
 
 	test("has correct background color", () => {
 		const badge = screen.getByTestId("icon-badge");
-		expect(badge).toHaveClass("bg-teal-100");
+		expect(badge).toHaveClass("bg-green");
 	});
 
 	test("has correct border color", () => {
 		const badge = screen.getByTestId("icon-badge");
-		expect(badge).toHaveClass("border-teal-700");
+		expect(badge).toHaveClass("border-green");
 	});
 
 	test("has correct icon", () => {
 		const icon = screen.getByTestId("badge-icon");
 		expect(icon).toBeInTheDocument();
 	});
-
 });
 
 describe("<Badge /> with pill style", () => {
@@ -116,12 +113,11 @@ describe("<Badge /> with pill style", () => {
 		render(
 			<Badge
 				type="href"
-				to="#"
+				href="#"
 				color="blue"
 				borderColor="none"
 				hoverColor="blue"
 				testId="pill-badge"
-				tagStyle={false}
 				cursorPointer={false}
 				icon={<FontAwesomeIcon icon={faCheck} />}
 				mobileIcon={<FontAwesomeIcon icon={faCheck} />}
@@ -129,17 +125,17 @@ describe("<Badge /> with pill style", () => {
 				text={
 					<>
 						<Text
-							size="md"
-							color="primary"
-							fontFamily="serif"
+							size="text-md"
+							color="text-black"
+							fontFamily="font-serif"
 							text="Contact Us"
 							tag="h2"
 							additionalClasses="pl-2 pb-0 font-bold"
 						/>
 						<Text
-							size="md"
-							color="primary"
-							fontFamily="serif"
+							size="text-md"
+							color="text-black"
+							fontFamily="font-serif"
 							text="1-800-800-8000"
 							tag="p"
 							additionalClasses="pl-2 pt-0"
@@ -165,21 +161,16 @@ describe("<Badge /> with pill style", () => {
 
 	test("has correct text", () => {
 		expect(screen.getByTestId("badge-text")).toHaveTextContent("Contact Us");
-	});
-
-	test("has correct text", () => {
-		expect(screen.getByTestId("badge-text")).toHaveTextContent(
-			"1-800-800-8000"
-		);
+		expect(screen.getByTestId("badge-text")).toHaveTextContent("1-800-800-8000");
 	});
 
 	test("has correct background color", () => {
 		const pill = screen.getByTestId("pill-badge");
-		expect(pill).toHaveClass("bg-blue-200");
+		expect(pill).toHaveClass("bg-blue");
 	});
 
 	test("has correct image", () => {
-		const pillImage = screen.getByTestId("image");
+		const pillImage = screen.getByAltText("");
 		expect(pillImage).toBeInTheDocument();
 	});
 });