@agilant/toga-blox 1.0.23 → 1.0.25

package/dist/components/BaseButton/BaseButton.test.js

@@ -3,7 +3,6 @@ import { render, screen, fireEvent } from "@testing-library/react";
 import { describe, expect, test, vi } from "vitest";
 import Button from "./BaseButton";
 import { MemoryRouter } from "react-router-dom";
-import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCheck } from "@fortawesome/free-solid-svg-icons";
 describe("Button", () => {
@@ -22,7 +21,6 @@ describe("Button", () => {
         expect(screen.getByText("Default Button")).toHaveTextContent("Default Button");
     });
     test("renders the button with an icon", () => {
-        const icon = getFontAwesomeIcon("check");
         render(_jsx(Button, { text: "Search Button", icon: _jsx(FontAwesomeIcon, { icon: faCheck }) }));
         const buttonElement = screen.getByText("Search Button");
         expect(buttonElement).toHaveTextContent("Search Button");

package/dist/components/ImageContainer/ImageContainer.js

@@ -1,7 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 const ImageContainer = (props) => {
-    const { imageUrl, backgroundColor, borderRadius, size, alternativeText, userInitials, additionalClasses, } = props;
-    console.log(`${borderRadius} ${backgroundColor} ${size} flex items-center justify-center overflow-hidden ${additionalClasses}`, "in component ");
-    return (_jsx("div", { className: `${borderRadius} ${backgroundColor} ${size} flex items-center justify-center overflow-hidden ${additionalClasses}`, children: imageUrl ? (_jsx("img", { src: imageUrl, alt: alternativeText, className: `${size}` })) : (_jsx("p", { className: `text-xs text-white w-full h-full flex justify-center items-center `, children: userInitials || "N/A" })) }));
+    const { imageUrl, backgroundColor, borderRadius, size, alternativeText, userInitials, additionalClasses, inlineBackgroundColor, } = props;
+    return (_jsx("div", { style: {
+            backgroundColor: inlineBackgroundColor
+                ? inlineBackgroundColor
+                : backgroundColor,
+        }, className: `${borderRadius} ${backgroundColor} ${size} flex items-center justify-center overflow-hidden ${additionalClasses}`, children: imageUrl ? (_jsx("img", { src: imageUrl, alt: alternativeText, className: `${size}` })) : (_jsx("p", { className: `text-xs text-white w-full h-full flex justify-center items-center `, children: userInitials || "N/A" })) }));
 };
 export default ImageContainer;

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

@@ -4,3 +4,4 @@ export default _default;
 export declare const Default: any;
 export declare const ProfileIcon: any;
 export declare const WithoutImage: any;
+export declare const WithInlineBackgroundColor: any;

package/dist/components/ImageContainer/ImageContainer.stories.js

@@ -66,3 +66,12 @@ WithoutImage.args = {
     userInitials: "AS",
     backgroundColor: "bg-gray-500",
 };
+export const WithInlineBackgroundColor = Template.bind({});
+WithInlineBackgroundColor.args = {
+    imageUrl: "",
+    borderRadius: "rounded-full",
+    size: "h-14 w-14",
+    alternativeText: "",
+    userInitials: "AS",
+    inlineBackgroundColor: "hsl(354,94%,74%)",
+};

package/dist/components/ImageContainer/ImageContainer.test.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { describe, it, expect } from "vitest";
-import { render } from "@testing-library/react";
+import { describe, it, expect, test } from "vitest";
+import { render, screen } from "@testing-library/react";
 import ImageContainer from "./ImageContainer";
 describe("ImageContainer Component", () => {
     const testUrl = "https://via.placeholder.com/150";
@@ -21,3 +21,43 @@ describe("ImageContainer Component", () => {
         expect(imageElement).toHaveClass("rounded-full");
     });
 });
+describe("ImageContainer - inlineBackgroundColor", () => {
+    test("applies inlineBackgroundColor style when provided", () => {
+        const inlineBackgroundColor = "rgb(255, 0, 0)";
+        render(_jsx(ImageContainer, { imageUrl: "", inlineBackgroundColor: inlineBackgroundColor, borderRadius: "rounded-full", size: "w-10 h-10", userInitials: "AB", additionalClasses: "shadow-md" }));
+        const container = screen.getByText("AB").parentElement;
+        expect(container).toHaveStyle(`background-color: ${inlineBackgroundColor}`);
+    });
+    test("does not apply inline style when inlineBackgroundColor is not provided but applies backgroundColor prop", () => {
+        const backgroundColor = "bg-blue-500";
+        render(_jsx(ImageContainer, { imageUrl: "", backgroundColor: backgroundColor, borderRadius: "rounded-full", size: "w-10 h-10", userInitials: "AB", additionalClasses: "shadow-md" }));
+        const container = screen.getByText("AB").parentElement;
+        expect(container).not.toHaveStyle(`background-color: ${backgroundColor}`);
+    });
+});
+describe("ImageContainer - userInitials", () => {
+    test("renders userInitials when imageUrl is not provided", () => {
+        render(_jsx(ImageContainer, { imageUrl: "", userInitials: "AB", borderRadius: "rounded-full", size: "w-10 h-10", backgroundColor: "bg-blue-500" }));
+        // Assert that user initials are displayed
+        const initials = screen.getByText("AB");
+        expect(initials).toBeInTheDocument();
+        expect(initials).toHaveTextContent("AB");
+    });
+    test("renders default fallback text when userInitials is not provided", () => {
+        render(_jsx(ImageContainer, { imageUrl: "", userInitials: "", borderRadius: "rounded-full", size: "w-10 h-10", backgroundColor: "bg-blue-500" }));
+        // Assert that default fallback text is displayed
+        const fallbackText = screen.getByText("N/A");
+        expect(fallbackText).toBeInTheDocument();
+        expect(fallbackText).toHaveTextContent("N/A");
+    });
+    test("does not render userInitials when imageUrl is provided", () => {
+        render(_jsx(ImageContainer, { imageUrl: "https://via.placeholder.com/150", userInitials: "AB", borderRadius: "rounded-full", size: "w-10 h-10", backgroundColor: "bg-blue-500" }));
+        // Assert that user initials are not displayed
+        const initials = screen.queryByText("AB");
+        expect(initials).not.toBeInTheDocument();
+        // Assert that the image is displayed instead
+        const image = screen.getByRole("img");
+        expect(image).toBeInTheDocument();
+        expect(image).toHaveAttribute("src", "https://via.placeholder.com/150");
+    });
+});

package/dist/components/ImageContainer/ImageContainer.types.d.ts

@@ -6,4 +6,5 @@ export interface ImageContainerProps {
     alternativeText?: string;
     userInitials?: string;
     additionalClasses?: string;
+    inlineBackgroundColor?: string;
 }

package/package.json

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