@agilant/toga-blox 1.0.25 → 1.0.27

package/dist/components/ImageContainer/ImageContainer.js

@@ -1,10 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 const ImageContainer = (props) => {
-    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" })) }));
+    const { imageUrl, backgroundColor, borderRadius, size, alternativeText, userInitials, additionalClasses, style, imageClasses, } = props;
+    return (_jsx("div", { style: style, className: `${borderRadius} ${backgroundColor} ${size} flex items-center justify-center overflow-hidden ${additionalClasses}`, children: imageUrl ? (_jsx("img", { src: imageUrl, alt: alternativeText, className: `${imageClasses}` })) : (_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.js

@@ -40,6 +40,17 @@ export default {
             control: "none",
             description: "Additional styling classes of the image container.",
         },
+        tyle: {
+            control: {
+                type: "object", // Text input control
+            },
+            description: "Inline CSS styles to be added.",
+            defaultValue: "",
+        },
+        imageClasses: {
+            control: "none",
+            description: "Additional styling classes of the image.",
+        },
     },
 };
 const Template = (args) => (_jsx(ImageContainer, { ...args }));
@@ -73,5 +84,5 @@ WithInlineBackgroundColor.args = {
     size: "h-14 w-14",
     alternativeText: "",
     userInitials: "AS",
-    inlineBackgroundColor: "hsl(354,94%,74%)",
+    style: { backgroundColor: "hsl(354,94%,74%)" },
 };

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

@@ -21,10 +21,10 @@ describe("ImageContainer Component", () => {
         expect(imageElement).toHaveClass("rounded-full");
     });
 });
-describe("ImageContainer - inlineBackgroundColor", () => {
-    test("applies inlineBackgroundColor style when provided", () => {
+describe("ImageContainer - inline styles ", () => {
+    test("applies inline style BackgroundColor 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" }));
+        render(_jsx(ImageContainer, { imageUrl: "", style: { backgroundColor: 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}`);
     });

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

@@ -6,5 +6,6 @@ export interface ImageContainerProps {
     alternativeText?: string;
     userInitials?: string;
     additionalClasses?: string;
-    inlineBackgroundColor?: string;
+    style?: React.CSSProperties;
+    imageClasses?: string;
 }

package/dist/components/Text/Text.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-const Text = ({ size = "text-base", color = "text-black", tag = "span", text, fontFamily = "font-sans", additionalClasses = "", ...props }) => {
+const Text = ({ size = "text-base", color = "text-black", tag = "span", text, fontFamily = "font-sans", additionalClasses = "", style = {}, ...props }) => {
     const ElementTag = tag;
     const className = `
 		${size}
@@ -7,6 +7,6 @@ const Text = ({ size = "text-base", color = "text-black", tag = "span", text, fo
 		${fontFamily}
 		${additionalClasses}
 	`;
-    return (_jsx(ElementTag, { "data-testid": "text", className: className, ...props, children: text }));
+    return (_jsx(ElementTag, { "data-testid": "text", className: className, style: style, ...props, children: text }));
 };
 export default Text;

package/dist/components/Text/Text.stories.js

@@ -61,6 +61,13 @@ export default {
             description: "Additional Tailwind CSS classes to be added.",
             defaultValue: "",
         },
+        style: {
+            control: {
+                type: "object", // Text input control
+            },
+            description: "Inline CSS styles to be added.",
+            defaultValue: "",
+        },
     },
     tags: ["autodocs"],
     parameters: {

package/dist/components/Text/Text.test.js

@@ -4,7 +4,7 @@ import { describe, expect, beforeEach, test } from "vitest";
 import Text from "./Text";
 describe("<Text />", () => {
     beforeEach(() => {
-        render(_jsx(Text, { text: "Testing", size: "text-md", color: "text-red-500", tag: "h1", fontFamily: "font-sans" }));
+        render(_jsx(Text, { text: "Testing", size: "text-md", color: "text-red-500", tag: "h1", fontFamily: "font-sans", style: { fontSize: "24px" } }));
     });
     test("renders Text component", () => {
         expect(screen.getByTestId("text")).toBeInTheDocument();
@@ -28,4 +28,10 @@ describe("<Text />", () => {
         const textElement = screen.getByTestId("text");
         expect(textElement.tagName).toBe("H1");
     });
+    test("applies inline styles correctly", () => {
+        const textElement = screen.getByTestId("text");
+        expect(textElement).toHaveStyle({
+            fontSize: "24px",
+        });
+    });
 });

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

@@ -7,4 +7,5 @@ export interface TextTypes {
     text: ReactNode;
     fontFamily?: string;
     additionalClasses?: string;
+    style?: React.CSSProperties;
 }

package/package.json

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