@agilant/toga-blox 1.0.17 → 1.0.19

package/README.md

@@ -33,6 +33,10 @@ To stop the services: docker-compose down
 
 To run tests: docker-compose run --rm test
 
+Running App outside of Docker
+
+To run test coverage report: npx vitest run src/components/{COMPONENT NAME HERE} --coverage
+
 📚 Dependencies
 Toga-Blox is built using:
 

package/dist/components/Badge/Badge.js

@@ -4,6 +4,6 @@ const Badge = ({ borderColor, borderWidth, borderRadius, backgroundColor, hasMob
     const badgeBackgroundClasses = `${backgroundColor}`;
     const badgeBorderClasses = `${borderWidth} ${borderColor} ${borderRadius}`;
     const badgeClasses = `inline-flex items-center ${badgeBorderClasses} ${badgeBackgroundClasses} ${badgeContainerClasses}`;
-    return (_jsxs("span", { className: badgeClasses, children: [image && _jsx("span", { className: "mr-2", children: image }), icon && hasLeftIcon && (_jsx("span", { className: `${iconClasses} max-md:hidden mr-2`, children: icon })), mobileIcon && hasMobileStyle && (_jsx("span", { className: `${iconClasses} hidden max-md:flex max-md:p-0 mr-2`, "aria-hidden": "false", "aria-label": mobileIconLabel, children: mobileIcon })), _jsx("div", { className: `${hasMobileStyle ? "max-md:hidden" : ""}`, children: text }), icon && hasRightIcon && (_jsx("span", { className: `${iconClasses} max-md:hidden ml-2`, children: icon }))] }));
+    return (_jsxs("span", { "data-testid": "badge-test-id", className: badgeClasses, children: [image && _jsx("span", { className: "mr-2", children: image }), icon && hasLeftIcon && (_jsx("span", { className: `${iconClasses} max-md:hidden mr-2`, children: icon })), mobileIcon && hasMobileStyle && (_jsx("span", { className: `${iconClasses} hidden max-md:flex max-md:p-0 mr-2`, "aria-hidden": "false", "aria-label": mobileIconLabel, children: mobileIcon })), _jsx("div", { className: `${hasMobileStyle ? "max-md:hidden" : ""}`, children: text }), icon && hasRightIcon && (_jsx("span", { className: `${iconClasses} max-md:hidden ml-2`, children: icon }))] }));
 };
 export default Badge;

package/dist/components/Badge/Badge.stories.d.ts

@@ -5,3 +5,5 @@ export declare const Default: any;
 export declare const BadgeWithLeftIcon: any;
 export declare const BadgeWithRightIcon: any;
 export declare const CommerceBadge: any;
+export declare const DeskBadge: any;
+export declare const SupplyBadge: any;

package/dist/components/Badge/Badge.stories.js

@@ -115,7 +115,8 @@ export default {
             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`.",
+            control: "none",
+            description: "Sets the text color of the badge using Tailwind CSS classes. Example: `text-gray-800`.",
         },
     },
     tags: ["autodocs"],
@@ -194,3 +195,34 @@ CommerceBadge.parameters = {
         },
     },
 };
+export const DeskBadge = Template.bind({});
+DeskBadge.args = {
+    backgroundColor: "bg-black",
+    borderRadius: "rounded-full",
+    badgeContainerClasses: "px-3 py-1",
+    text: (_jsx(Text, { color: "text-white", fontFamily: "font-serif", text: "Closed", tag: "span", size: "text-sm" })),
+};
+DeskBadge.parameters = {
+    docs: {
+        description: {
+            story: "The badges used in the table for desk",
+        },
+    },
+};
+export const SupplyBadge = Template.bind({});
+SupplyBadge.args = {
+    backgroundColor: "bg-gray-300",
+    borderRadius: "rounded-full",
+    badgeContainerClasses: "px-3 py-1",
+    mobileIcon: getFontAwesomeIcon("calculator"),
+    icon: getFontAwesomeIcon("calculator"),
+    hasLeftIcon: true,
+    text: (_jsx(Text, { color: "text-black", fontFamily: "font-serif", text: "Closed", tag: "span", size: "text-sm" })),
+};
+SupplyBadge.parameters = {
+    docs: {
+        description: {
+            story: "The badges used in Supply",
+        },
+    },
+};

package/dist/components/Badge/Badge.test.js

@@ -4,77 +4,100 @@ import { describe, expect, beforeEach, test } from "vitest";
 import Badge from "./Badge";
 import Text from "../Text/Text";
 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(_jsx(Badge, { type: "span", borderColor: "border-red-500", hoverColor: "hover:bg-none", testId: "priority-badge", mobileIcon: getFontAwesomeIcon("exclamationCircle"), mobileIconLabel: "Priority", text: _jsx(Text, { size: "text-md", color: "text-black", text: "Priority", fontFamily: "font-serif", tag: "h2", additionalClasses: "font-bold" }) }));
     });
     test("renders badge", () => {
-        const badge = screen.getByTestId("priority-badge");
+        const badge = screen.getByTestId("badge-test-id");
         expect(badge).toBeInTheDocument();
     });
     test("has correct text", () => {
-        expect(screen.getByTestId("badge-text")).toHaveTextContent("Priority");
+        expect(screen.getByTestId("badge-test-id")).toHaveTextContent("Priority");
     });
     test("has correct border color", () => {
-        const badge = screen.getByTestId("priority-badge");
+        const badge = screen.getByTestId("badge-test-id");
         expect(badge).toHaveClass("border-red-500");
     });
 });
 describe("<Badge /> with icon", () => {
     beforeEach(() => {
-        render(_jsx(Badge, { type: "span", borderColor: "border-green-500", hoverColor: "hover:bg-none", testId: "icon-badge", cursorPointer: false, icon: getFontAwesomeIcon("check"), mobileIcon: getFontAwesomeIcon("check"), mobileIconLabel: "Complete", text: _jsx(Text, { size: "text-md", color: "text-black", text: "Complete", fontFamily: "font-serif", tag: "h2", additionalClasses: "font-bold" }) }));
+        render(_jsx(Badge, { type: "span", borderColor: "border-green-500", hoverColor: "hover:bg-none", testId: "icon-badge", cursorPointer: false, icon: getFontAwesomeIcon("xmark"), mobileIcon: getFontAwesomeIcon("xmark"), mobileIconLabel: "Complete", hasLeftIcon: true, text: _jsx(Text, { size: "text-md", color: "text-black", text: "Complete", fontFamily: "font-serif", tag: "h2", additionalClasses: "font-bold" }) }));
     });
     test("renders badge with icon", () => {
-        const badge = screen.getByTestId("icon-badge");
+        const badge = screen.getByTestId("badge-test-id");
         expect(badge).toBeInTheDocument();
     });
-    test("has correct text", () => {
-        expect(screen.getByTestId("badge-text")).toHaveTextContent("Complete");
-    });
-    test("has correct border color", () => {
-        const badge = screen.getByTestId("icon-badge");
-        expect(badge).toHaveClass("border-green-500");
-    });
-    test("has correct icon", () => {
-        const icon = screen.getByTestId("icon");
-        expect(icon).toBeInTheDocument();
+    test("renders badge with icon", () => {
+        const badge = screen.getByTestId("badge-test-id");
+        expect(badge).toBeInTheDocument();
+        const icon = badge.querySelector('svg[data-icon="xmark"][data-prefix="fas"]');
+        expect(icon).not.toBeNull();
+        expect(icon).toBeInstanceOf(SVGElement);
     });
 });
-describe("<Badge /> with pill style", () => {
+describe("<Badge /> with Image", () => {
     beforeEach(() => {
-        render(_jsx(Badge, { type: "href", href: "#", borderColor: "border-none", hoverColor: "hover:bg-blue-500", testId: "pill-badge", cursorPointer: false, icon: getFontAwesomeIcon("check"), mobileIcon: getFontAwesomeIcon("check"), mobileIconLabel: "Complete", text: _jsxs(_Fragment, { children: [_jsx(Text, { size: "text-md", color: "text-black", fontFamily: "font-serif", text: "Contact Us", tag: "h2", additionalClasses: "pl-2 pb-0 font-bold" }), _jsx(Text, { size: "text-md", color: "text-black", fontFamily: "font-serif", text: "1-800-800-8000", tag: "p", additionalClasses: "pl-2 pt-0" })] }), image: _jsx("img", { src: "../../../assets/contact-image.png", alt: "", className: "flex justify-center w-12 h-12 max-md:hidden" }) }));
-    });
-    test("renders badge with pill style", () => {
-        const pill = screen.getByTestId("pill-badge");
-        expect(pill).toBeInTheDocument();
+        render(_jsx(Badge, { type: "href", href: "#", borderColor: "border-none", hoverColor: "hover:bg-blue-500", cursorPointer: false, icon: getFontAwesomeIcon("check"), mobileIcon: getFontAwesomeIcon("check"), mobileIconLabel: "Complete", text: _jsxs(_Fragment, { children: [_jsx(Text, { size: "text-md", color: "text-black", fontFamily: "font-serif", text: "Contact Us", tag: "h2", additionalClasses: "pl-2 pb-0 font-bold" }), _jsx(Text, { size: "text-md", color: "text-black", fontFamily: "font-serif", text: "1-800-800-8000", tag: "p", additionalClasses: "pl-2 pt-0" })] }), image: _jsx("img", { src: "../../../assets/contact-image.png", alt: "test alt text", className: "flex justify-center w-12 h-12 max-md:hidden" }) }));
     });
     test("has correct text", () => {
-        expect(screen.getByTestId("badge-text")).toHaveTextContent("Contact Us");
-        expect(screen.getByTestId("badge-text")).toHaveTextContent("1-800-800-8000");
+        expect(screen.getByTestId("badge-test-id")).toHaveTextContent("Contact Us");
+        expect(screen.getByTestId("badge-test-id")).toHaveTextContent("1-800-800-8000");
     });
     test("has correct background color", () => {
-        const pill = screen.getByTestId("pill-badge");
-        expect(pill).toHaveClass("hover:bg-blue-500");
+        const badge = screen.getByTestId("badge-test-id");
+        expect(badge).toHaveClass("border-none");
     });
     test("has correct image", () => {
-        const pillImage = screen.getByAltText("");
-        expect(pillImage).toBeInTheDocument();
+        const badgeImage = screen.getByAltText("test alt text");
+        expect(badgeImage).toBeInTheDocument();
+    });
+});
+describe("<Badge /> Tests for icons and images", () => {
+    test("renders with left icon only", () => {
+        render(_jsx(Badge, { icon: getFontAwesomeIcon("xmark"), hasLeftIcon: true, text: _jsx(Text, { text: "With Icon" }), type: "to" }));
+        const badge = screen.getByTestId("badge-test-id");
+        expect(badge).toBeInTheDocument();
+        const icon = badge.querySelector('svg[data-icon="xmark"]');
+        expect(icon).not.toBeNull();
+    });
+    test("renders with image", () => {
+        render(_jsx(Badge, { image: _jsx("img", { src: "image.png", alt: "Test Image" }), text: _jsx(Text, { text: "With Image" }), type: "to" }));
+        const badge = screen.getByTestId("badge-test-id");
+        expect(badge).toBeInTheDocument();
+        const image = screen.getByAltText("Test Image");
+        expect(image).toBeInTheDocument();
+    });
+});
+describe("<Badge /> tests for right badges", () => {
+    test("renders with left icon only", () => {
+        render(_jsx(Badge, { icon: getFontAwesomeIcon("xmark"), hasRightIcon: true, text: _jsx(Text, { text: "With Icon" }), type: "to" }));
+        const badge = screen.getByTestId("badge-test-id");
+        expect(badge).toBeInTheDocument();
+        const icon = badge.querySelector('svg[data-icon="xmark"]');
+        expect(icon).not.toBeNull();
+    });
+});
+describe("<Badge /> - Mobile Icon Tests", () => {
+    test("renders mobile icon when hasMobileStyle is true", () => {
+        render(_jsx(Badge, { mobileIcon: getFontAwesomeIcon("check"), hasMobileStyle: true, mobileIconLabel: "Mobile Icon Label", text: "Mobile Icon Badge", type: "span" }));
+        const badge = screen.getByTestId("badge-test-id");
+        expect(badge).toBeInTheDocument();
+        const mobileIcon = screen.getByLabelText("Mobile Icon Label");
+        expect(mobileIcon).toBeInTheDocument();
+        expect(mobileIcon).toHaveClass("hidden max-md:flex max-md:p-0 mr-2");
+    });
+    test("does not render mobile icon when hasMobileStyle is false", () => {
+        render(_jsx(Badge, { mobileIcon: getFontAwesomeIcon("check"), hasMobileStyle: false, mobileIconLabel: "Mobile Icon Label", text: "No Mobile Style", type: "to" }));
+        const badge = screen.getByTestId("badge-test-id");
+        expect(badge).toBeInTheDocument();
+        const mobileIcon = screen.queryByLabelText("Mobile Icon Label");
+        expect(mobileIcon).not.toBeInTheDocument();
+    });
+    test("mobile icon has correct aria attributes", () => {
+        render(_jsx(Badge, { mobileIcon: getFontAwesomeIcon("check"), hasMobileStyle: true, mobileIconLabel: "Mobile Icon Accessibility Label", text: "Accessible Mobile Icon Badge", type: "to" }));
+        const mobileIcon = screen.getByLabelText("Mobile Icon Accessibility Label");
+        expect(mobileIcon).toBeInTheDocument();
+        expect(mobileIcon).toHaveAttribute("aria-hidden", "false");
     });
 });

package/package.json

@@ -1,13 +1,13 @@
 {
 	"name": "@agilant/toga-blox",
 	"private": false,
-	"version": "1.0.17",
+	"version": "1.0.19",
 	"description": "",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
 	"scripts": {
 		"test": "vitest run",
-		"test:coverage": "vitest run --coverage=v8-to-istanbul",
+		"test:coverage": "vitest run src/**/*.test.tsx --coverage",
 		"blox": "storybook dev -p 6006",
 		"build-storybook": "storybook build",
 		"build-css": "tailwindcss -i ./src/main.css -o ./dist/main.css --minify",