@agilant/toga-blox 1.0.18 → 1.0.20

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/dist/components/Card/DUMMYPRODUCTDATA.json

@@ -387,8 +387,7 @@
     ],
     "DUMMYCOMPASSPRODUCTDATA": [
         {
-            "id": "1",
-            "title": " Environmental Services - Lenovo ThinkPad Universal USB-C Dock",
+            "id": "1 - Environmental Services - Lenovo ThinkPad Universal USB-C Dock",
             "rating": 5,
             "link": "#",
             "inStock": true,

package/dist/components/Card/templates/HorizontalCardTemplate.js

@@ -4,7 +4,7 @@ import Text from "../../Text/Text";
 import Image from "../../Image/Image";
 import { getFontAwesomeIcon } from "../../../utils/getFontAwesomeIcon";
 const HorizontalCardTemplate = ({ data }) => {
-    return (_jsxs(_Fragment, { children: [_jsx("a", { href: "#", className: `flex justify-center w-72  max-sm:w-full`, "data-testid": "card", children: _jsx(Image, { background: false, src: data.imageUrl, alt: data.altText }) }), _jsxs("div", { className: "flex flex-col justify-between w-3/4 h-full p-3 max-sm:w-full", children: [_jsx("div", { className: "flex h-full mb-12 max-sm:mb-2", children: _jsx("a", { href: data.link, children: _jsx(Text, { tag: data.titleProps.tag, size: data.titleProps.size, text: data.title, color: "black", fontFamily: "", additionalClasses: data.titleProps.additionalClasses }) }) }), _jsxs("div", { className: `flex justify-between mb-12  max-sm:flex-col max-sm:items-end max-sm:mb-2`, children: [_jsx("div", { className: "flex items-center space-x-1 rtl:space-x-reverse max-sm:mb-1", children: _jsx(Text, { tag: data.identifierProps.tag, size: data.identifierProps.size, text: data.identifier, color: "", fontFamily: "", additionalClasses: data.identifierProps.additionalClasses }) }), _jsxs("div", { className: "flex items-center justify-center px-2 max-sm:mb-1", children: [_jsx("div", { className: "pr-2 text-xs", children: data.inStock === true
+    return (_jsxs(_Fragment, { children: [_jsx("a", { href: "#", className: `flex justify-center w-72  max-sm:w-full`, children: _jsx(Image, { background: false, src: data.imageUrl, alt: data.altText }) }), _jsxs("div", { className: "flex flex-col justify-between w-3/4 h-full p-3 max-sm:w-full", children: [_jsx("div", { className: "flex h-full mb-12 max-sm:mb-2", children: _jsx("a", { href: data.link, children: _jsx(Text, { tag: data.titleProps.tag, size: data.titleProps.size, text: data.title, color: "black", fontFamily: "", additionalClasses: data.titleProps.additionalClasses }) }) }), _jsxs("div", { className: `flex justify-between mb-12  max-sm:flex-col max-sm:items-end max-sm:mb-2`, children: [_jsx("div", { className: "flex items-center space-x-1 rtl:space-x-reverse max-sm:mb-1", children: _jsx(Text, { tag: data.identifierProps.tag, size: data.identifierProps.size, text: data.identifier, color: "", fontFamily: "", additionalClasses: data.identifierProps.additionalClasses }) }), _jsxs("div", { className: "flex items-center justify-center px-2 max-sm:mb-1", children: [_jsx("div", { className: "pr-2 text-xs", children: data.inStock === true
                                             ? getFontAwesomeIcon(data.inStockProps.inStockIcon)
                                             : getFontAwesomeIcon(data.inStockProps.outOfStockIcon) }), _jsx(Text, { tag: data.inStockProps.tag, size: data.inStockProps.size, text: data.inStock === true
                                             ? "In Stock"

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

@@ -0,0 +1,4 @@
+import React from "react";
+import { ImageContainerProps } from "./ImageContainer.types";
+declare const ImageContainer: React.FC<ImageContainerProps>;
+export default ImageContainer;

package/dist/components/ImageContainer/ImageContainer.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+const ImageContainer = React.memo(({ imageUrl, backgroundColor, borderRadius, size, alternativeText, userInitials, additionalClasses, }) => {
+    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" })) }));
+});
+export default ImageContainer;

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

@@ -0,0 +1,6 @@
+import { Meta } from "@storybook/react";
+declare const _default: Meta;
+export default _default;
+export declare const Default: any;
+export declare const ProfileIcon: any;
+export declare const WithoutImage: any;

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

@@ -0,0 +1,68 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ImageContainer from "./ImageContainer";
+export default {
+    title: "Components/ImageContainer",
+    component: ImageContainer,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "centered",
+    },
+    argTypes: {
+        imageUrl: {
+            control: "none",
+            description: "Image url of the image.",
+        },
+        backgroundColor: {
+            control: "none",
+            description: "Background color if the image is not present.",
+        },
+        borderRadius: {
+            control: "none",
+            description: "Styles for the content.",
+        },
+        size: {
+            control: "none",
+            description: "Size of the container.",
+        },
+        profileIcon: {
+            control: "none",
+            description: "Profile icon image.",
+        },
+        alternativeText: {
+            control: "none",
+            description: "Alternative text for the image.",
+        },
+        userInitials: {
+            control: "none",
+            description: "User initials if there is no image.",
+        },
+        additionalClasses: {
+            control: "none",
+            description: "Additional styling classes of the image container.",
+        },
+    },
+};
+const Template = (args) => (_jsx(ImageContainer, { ...args }));
+export const Default = Template.bind({});
+Default.args = {
+    imageUrl: "data:image/jpeg;base64,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",
+    borderRadius: "rounded-md",
+    size: "size-80",
+    alternativeText: "image",
+};
+export const ProfileIcon = Template.bind({});
+ProfileIcon.args = {
+    imageUrl: "https://img.freepik.com/premium-vector/avatar-profile-icon-flat-style-female-user-profile-vector-illustration-isolated-background-women-profile-sign-business-concept_157943-38866.jpg",
+    borderRadius: "rounded-full",
+    size: "h-[75px] w-[75px]",
+    alternativeText: "profile image",
+};
+export const WithoutImage = Template.bind({});
+WithoutImage.args = {
+    imageUrl: "",
+    borderRadius: "rounded-full",
+    size: "h-14 w-14",
+    alternativeText: "",
+    userInitials: "AS",
+    backgroundColor: "bg-gray-500",
+};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect, beforeEach } from "vitest";
+import { render, screen } from "@testing-library/react";
+import ImageContainer from "./ImageContainer";
+describe("ImageContainer Component", () => {
+    beforeEach(() => {
+        render(_jsx(ImageContainer, { imageUrl: "data=image/jpeg;base64,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", borderRadius: "rounded-md", size: "size-80", alternativeText: "image" }));
+    });
+    it("renders children content", () => {
+        const { getByText } = render(_jsx(ImageContainer, { imageUrl: "data=image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxASEBAQEBEWFRAWGRUWEBUVGQ8QEBUSGBYYGxgXFxcYICkgGxolHhcYITEhJyorLi4wGB8zODMsNzQtLi0BCgoKDg0OGxAQGS4dHiItKzcxLS0tKy0tLS8tLTUtLy0tLS0wLS0tLS0tLy0uLS0tLS0tLS0uLS0tLS0tKy0rLf/AABEIAMgAyAMBIgACEQEDEQH/xAAcAAEAAgMBAQEAAAAAAAAAAAAABQYBBAcDAgj/xABAEAABAwIDBQQIBAQFBQEAAAABAAIDBBEFEjEGEyFBUSJCgZEHFCMyUmFxwWKhsdEXkrLwNDVzovEkdMLh4hX/xAAaAQEAAgMBAAAAAAAAAAAAAAAAAQQCAwUG/8QAKxEAAgIBBAIBAgUFAAAAAAAAAAECEQMEEiExE0FRFNEiMnGB8AVDUmHB/9oADAMBAAIRAxEAPwDuKIiAIiIAiIgCIiAIiIDCIq3txjPq9OWNPtZLtb1A7zv76rGclFWzbhxSyzUI9s2cJ2hjnnmhbow2Yfjt735/kptcXwasdE5sjPea64+fyXX8PrGzRMlZo4X+nUFadPm8iafZd/qOi+nknHr/AKbSIisHNCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiA85ZA1pc42ABJJ0AC41tPjBqJ3yk2YOEY6MH76+KunpFxnJGKZh7b+MnyZ08fsVyXEai5yDQa/MrUsUtRlWKPXs7OkcdHp3qp9viKN3D60km+hPD5K/7A4zlkNM89l/GO/J3MeP2XMaT3fFStJVOBBBs5pBB53GhW/X6NYGsuNcLsx0Gr+sjLT5ny+UzvaBRWzeLCpp2S97SQdHjX9/FSqwi01aOVOEoScZdoyiIpMQiIgCIiAIiIAiIgCIiAIiIAiIgCIiAwtfEKtsMT5XmzWgk/sthc49JeOi4pmnsss6X5u7rfv4hYTlS479FjS4PNkUXwu2/hFM2hxZ8kkkrj23kkfhHIeAVeX3NKXOJP8AwvNdrQ6XwY+fzPs0/wBR1n1GSo8Qjwl/o3KT3fFbDXWN1r0nu+K91YnFSTT6KUJuElKLpouGwuN7icNcfZS2a7oHd0/bxXWV+eoX2PyXYtiMZ9Ypw1x9rHZr+pHdd4/ZeelieDI8b69Hd1MlqsS1Ee+pfr8/uWRERZHNCIiAIiIAiIgCIiAIiIAiIgCIiAIiICM2gxRtNA+U6jgwdXnQLgmLVrpXuJNySS49XHUq3ekvaHezbmM9iO4+ru8ft5qhK7odPul5ZdLr7m7Pl8OLxR/NLv8AT0vuF9MYSQACSTYAak/uvlXz0VbP76c1Ug9nCexfR0v/AM6/UhdPLkWODkzmRjbo98d2KNNQwytF5W/4rn73MfJp4Knr9Czwte1zHi7XAhwOhB1C4btHhLqWokhOg4xn4mHQ/Xl4Knpc7nal2bckK5RGKe2Sxo01Qx5PY92QdWH9tVArINuKz1WnWaFe10btJqPDPnmL4aP0LG8OAcDcEXBGhBX2qV6OMc3sXq7z24/cvqWdPD7hXVcdX77N2XHslXa9P5RlERSawiIgCIiAIiIAiIgCIiAIiIDCru3OOikpXOB9q/sx9b8z4fsrA5wAJJsBxK4Ptxj5rKpzmn2LOzEOrR3vFbsGF5ZV69jeofiZASyFxLjqV8Ii7sYqKpdFKUnJtvtmxQUj5pY4Yxd73BrR8z9l+hMBwplLTx07NGjiebnd5x+puqF6JNn+Dq6QdWQX/wB7/t5rpq5OtzbpbV0jfijSsyqj6RMD39PvmD2sVz83R94ffwVuWCFUhNwkpI2tWqPzsisO2+B+q1Lg0eyku+LoOrfD9LKvLuQmpRUkVGqdG9guJOp5o5matPEdRzHku50FWyWNkrDdrwCF+fl0H0YY5Zxo5DwN3Q3695v38CqOrwf3I/v9y1jy7o7X66+x0lERc8yCIiAIiIAiIgCIiAIiIDCyi166rZDG+WQ2YwFzj8h907BTPSntBuYBTRn2sw7dtWxaH+bTzXHVI4/ir6qolqH949kfCzut8lHLu6fF44V7Kc5bmFJbPYS+rqYqdnePaPwsHvO8lGrsfos2f3FOamQe1mAy31bFy89fJNRl8cG/YhHcy5UVKyKNkUYsxgDWjoAthEXCLgREQEDtjgoq6ZzAPat7UR/EO746eS4o4EEg8CNR0X6IXJ/SRge5n9YYPZyk5ujZefnr5q9o8tPYzTlj7KcvSmndG9sjDZ7SHNI5ELzRdJq0aDu+z2KtqqeOZupFnj4XjUf31CklyT0dY5uKjcvPspbD5CTunx08l1tcXPi8c69FuErRlERaTIIiIAiIgCIiAIiIDC5j6W9oPdoYz0fPb/Yz7+Svu0OLMpKeSof3R2R8Tzwa3xK/PdbVPlkfLIbve4ucepP2V3RYd0tz6RpyypUeCIsgLrlcn9iMBNZVsYR7JvbmP4B3fqTw813pjQAABYDgBysq3sBgHqlI3MLTSWfL1Hwt8B+ZKsy4mqzeSfHSLWONIyiIqxsCIiAwo/HsLbUwSQO7w7J+Fw90+akVhE2naB+e6qndG98bxZ7SWuHzH2XkuhelDA7FtYwcDZs1uujXfbyXPV28ORZIJlSSpmQV2jYnHPWqZpcfas7EvUkDg7xH3XFlO7G42aSpa8n2T+zKPw/F4a+aw1OLfDjtGWOVM7ai+WuBAI05L6XHLIREQBERAEREBhZWFXtt8eFHSPe0+1f2IRr2z3vAcfJTGLk0kQ3Ss576UtoN/UCmjPsoT2ujpeflp4lUZZc4kkniTqTqf/awu/ixqEVFFOUtzsK5ejLZ/wBZqd88Xhhs49HSd1v05+HzVRp4XPe1jAS9xDWgalx4AL9A7LYK2kpY4B7wF5D8Uh94/b6ALRrM2yFLtmeONsmERFxi0EREAREQBERAa9dSsljfE8XY8FrvofuuFY1hr6aeSB+rTwPxN5O8Qu+qkekvA97CKlg9pEO3bnFz8tfNWtJl2Sp9M15I2rOWIiLrFY6v6N8c30Hq7z7WIDLfV0XLy08lc1wXAsUdTVEc7O6e0PiYfeC7nSVLZGMkYbscA5p6grk6rFsla6ZZxytHuiIqpsCIiAIiID5JXCdvcf8AXKtxabwx3ZF0I5v8T+QC65tdBVSUr4qQDeSdlxJDcrD7xHz5eK5f/DXEfhj/AJwr2j8cW5SfJpy2+EU5Fcf4a4j8Mf8AOFmP0aYgSARGBcXOcGwvquh9Ri/yRp2P4JT0TbP53urZB2WXbDfm/vO8Bw8fkurLUwqgZTwxwRizGAAfPqT8yeK21xs+V5JuRahHaqMoiLUZBERAEREAREQBfD2Aggi4IsRyIX2iA4dtZgppKl8YHsz2oj+A8vDRQy7Ptrs/65AAy2+Ybxk8Bx95pPQ/ZUP+H1f8LP5wurh1MXFbnyVpY3fBVF0X0X4571G89XQ36d5o/XzUL/D6v+Fn84XtRbEYlFIyWMMD2EOac41B/RTmniyQa3IRUk+jrKLygc4taXjK4gZhe4B5i69VySyEREAREQBFhVza3HJacRx0zA+d2Z1jcgRMaS48OfD9VMYuTpEN0WRFqYZWtnhjmZ7r2hw+V9R9QeHgtpQ0SEVZqccqJppIKCNjt2css0pdumu+EAcSU9YxWEtMkcNRGSA4RZmStude1wI/vgs/G/kx3FnWEUPNijxXxUoA3bonSE8c2YOt5LFKzKyYWVhQ2yuKSVML5JA0OEj2DLcCzTw15ok6siyaREUEhYVe2sxuWnEcdO0PqH5iGkEjdsaS48DqpbCa9s8EczNHtBt0PMeBuPBZODUd3oi+TcWEVUp9qiK+almaGx5gyKQAjtkXyuJ4XPL6JGDldeg3Ra1leNVIWse4ahpI8BdaGzVe+opYZ3gB7wSQ24bwcRwv9FFOrFkoih8X/wD0M49V3G7t2t7vc+a50y8rWUHQYpi00k8TBSh0Lg199+ASenksljtXaIbouqLUwzf7pvrGTfcc27zbvXhbNx0stpYGRlERAEREB8k8yqZgOK00lTU1k00bbnc07XOY0iFupsfiPFT208c76Z8dO28klmXu1uRjvedx+X6r5ptmqJjGM9WidlAGZ0cbnOIAFySNStkXFRd+zF8siNj6yOOepomSNfGCZactIcMjveZcdD+pVprHERyFvvBri3624Ku41gO7dT1FDCxssT+0xgji3kbuDgTwF/3KtASbTakhG+it+j5rRh8Jbq4vLzzL85Bv5BfOKY3XwiV5ommFmY598y5YL9rKBzHGy8WUFXRSSGkjE9K9xeYS4RvjcdchPDKsYhNiFXG+BtIIGPGV8kr2us062a3jf5rZSct3DTI9UWTDqnewxS2tna11tbZgDZQdV/nEH/bv/rKnaCm3UUUV75GtbfS9gBf8lFT0EpxKGcN9k2FzHOu3g8uuBbVa41b/AHJfROqsej3/AAsn+tL+oVnVJwI4hSxviFBvAZHvDt9Czg49OKQVxa/QPtF2S6h8LxCsfJlno9yyxOfexycelm8V97StndTSMpm3lf2Bxa3KHe865PIX/JY7adE3wQGC4rTy1dTVyzRtt7Gna57GkRt1dY8nH7r12TrIo6mpo45GviJ31MWuDmhrvfZwPI8vqpaj2Zo2RsYaeJxa0AudHG5ziBqSRqtDHMADDBUUMDGzxPBLWCOLeRng5p0Gn3W3dFtoxploVMosMjqZ8Whk0L4iDza4MNnDoVchooPA6CWOqr5HtsyR8ZjN2nMA0g6HhqsIOk/57Jas0sJxOQMnoao/9TGx2V3KaLKbPB69f+VubC/5fTfR39blnanA/WYw6M5amO5hfprqw/I6f2V7bJ0ckNHBFK3LI0HMLg2u4nUcOayk4uFruyFdkuqxst/jMU/1Gf0uVnUDgFBLHU18j22ZI9jozdpzAA30PBYRf4X/AD2ZPtE+iIsCQiIgCIiALCi9oJ5GRsMZcAXtErmN3j2RWN3NbY8bgDQ63TA5mvDyyqM7OFrhgew8w7KB+Yup28WRZKIoOMzVMk1pnRRRvMbRGI87ntAzOcXA8LmwAtotjCKmTPNBK7O+LIQ+wbnjeDlJA4B1wRw6KdvAslUUbg9Q9+/zm+WaRrdBZrTwHBMVqHsfSBpsHzZX6G7d1K63m0eSiuaFkiijq6oe2opWA2a8yZxw42ZcfmtTaVszIzNHUSM4xNygQlnaka0ntNJvZx58lKjbS+RZOLK1KWB0bCHSukPE5n5Mw4adkAW4KPosTc3D21UhzOEW8foC4ht+Sjb8CyaRQgoass3nrRE9s2TLH6uD8FrZrcr3vzSqxRzsOfVR9l5hc9uhyuyk89bFTt+BZNoq5Pi8oppmvIZVRBua1rOBcLSN/C7j9DcKQx+eVkQMeYdpokcxu8kZEfec1tjc6cjromxiyTWVEYHO12csqjO0W4OEYkYeNwcoB49COSl1DVMmwijcIqHv9YzG+WV7W6CzQG2HBR2AYtKTkqDfeOk9XfYAHK9wMZ/EALjqPop2siyxIoagxJwoBUyHM5sb3u0BOW/T6LEFDVOa2R1U5sps4tDYjAL93KRmI+ea6bfkWTaLCysSQiIgCIiA1K6OVwG5kDHA37TQ9jh8JFwfncHktbDqCRssk8zmmRzWstG0sYGtJIvckk9rVYRNz6DR8SYfMySSSmkYGyHNJHI1zmZ7AZmlpBBNhcLYwygMe8e9+eaQgyOtlHAWa1o5NA+6yimyDUhoaqN0u6khyPe+QB7JS4ZuVw8LaxOhdKxln5JWOa+N1szQ8AjiObSCR4oibndijxpqCZ0zJqh7CWBwibG1zWgutmcS4kk2FugWxi1EZojGDa7o3X192Rrv/FZRL5sUbbhwWhQ4YG0raZ/aaGbt+oDhaxRFFsk1Bh9YGbkVDN3bKJMjvWAz65sua3et4Laq8Ma6lfSx9lpjMbOdhlsPqiKXJkUeOPYIKhjbOySN4B443ZcZmOHNpt5gLdropXNG6kDHg37TQ9jgL9kjW3HUHkiJuYo1aCgkEz55nMMhaGARtLWhoJNySSSePgpVERuyTSw+jMe9ub55HSDlYOtw/Ja0eDN9W9Xe6/ae5rx2XNcZHPa5vQi6Im5ij0w/DAylbTSHOMhY82tmBvfh4rWioaxrRE2oZuxwa8sJnDRoNcpdyzW8ERN7tkUTQWURQSEREB//2Q==", borderRadius: "rounded-md", size: "size-80", alternativeText: "image" }));
+        expect(getByText("Test Child")).toBeInTheDocument();
+    });
+    it("displays children in a horizontal row", () => {
+        const section = screen.getByTestId("section");
+        expect(section).toHaveClass("flex-row");
+    });
+});

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

@@ -0,0 +1,9 @@
+export interface ImageContainerProps {
+    imageUrl?: string;
+    backgroundColor?: string;
+    borderRadius?: string;
+    size?: string;
+    alternativeText?: string;
+    userInitials?: string;
+    additionalClasses?: string;
+}

package/dist/components/ImageContainer/ImageContainer.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/PageSection/PageSection.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import { PageSectionTypes } from "./PageSection.types";
+import { PageSectionTypes } from ".";
 declare const Section: React.FC<PageSectionTypes>;
 export default Section;

package/dist/components/PageSection/PageSection.stories.js

@@ -9,6 +9,7 @@ import CompassCardTemplate from "../Card/templates/CompassCardTemplate";
 export default {
     title: "Components/Section",
     component: Section,
+    tags: ["autodocs"],
     argTypes: {
         children: {
             control: {
@@ -25,16 +26,16 @@ export default {
 const Template = (args) => _jsx(Section, { ...args });
 export const Default = Template.bind({});
 Default.args = {
-    sectionContainerClasses: " flex flex-row justify-center items-center flex-wrap lg:gap-10 gap-6  my-20 lg:max-h-view-page  max-h-fit  min-h-fit overflow-scroll px-6",
+    sectionContainerClasses: " flex flex-row justify-center items-center flex-wrap lg:gap-10 gap-4  my-20 lg:max-h-view-page  max-h-fit  min-h-fit overflow-scroll px-4",
     children: (_jsxs(_Fragment, { children: [_jsx("div", { className: "bg-red-400 p-4", children: "Content 1" }), _jsx("div", { className: "bg-green-400 p-4", children: "Content 2" }), _jsx("div", { className: "bg-blue-400 p-4", children: "Content 3" })] })),
 };
 export const HorizontalCardsSection = Template.bind({});
 HorizontalCardsSection.args = {
     sectionContainerClasses: "w-full bg-slate-100 flex flex-col p-6 justify-center items-center",
-    children: (_jsxs(_Fragment, { children: [_jsx(Text, { tag: "h1", size: "lg", text: "Example of a section with horizontal cards:", color: "black", fontFamily: "", additionalClasses: "pb-12 text-xl font-bold" }), _jsx(GenericList, { data: DUMMYPRODUCTDATA, listType: "none", renderItem: (item) => (_jsx(Card, { containerClasses: "flex mb-6 max-sm:w-1/2 max-sm:flex-col overflow-hidden", cardBackgroundColor: item.cardBackgroundColor, cardBorderRadius: item.cardBorderRadius, cardBorderColor: item.cardBorderColor, cardBoxShadow: item.cardBoxShadow, children: _jsx(HorizontalCardTemplate, { data: item }) }, item.id)) })] })),
+    children: (_jsxs(_Fragment, { children: [_jsx(Text, { tag: "h1", size: "lg", text: "Example of a section with horizontal cards:", color: "black", fontFamily: "", additionalClasses: "pb-12" }), _jsx(GenericList, { data: DUMMYPRODUCTDATA, listType: "none", renderItem: (item) => (_jsx(Card, { containerClasses: "flex mb-6 max-sm:w-1/2 max-sm:flex-col overflow-hidden", cardBackgroundColor: item.cardBackgroundColor, cardBorderRadius: item.cardBorderRadius, cardBorderColor: item.cardBorderColor, cardBoxShadow: item.cardBoxShadow, children: _jsx(HorizontalCardTemplate, { data: item }) }, item.id)) })] })),
 };
 export const CompassCardsSection = Template.bind({});
 CompassCardsSection.args = {
     sectionContainerClasses: "w-full bg-slate-100 flex flex-col p-6 justify-center items-center h-[100%]",
-    children: (_jsxs(_Fragment, { children: [_jsx(Text, { tag: "h1", size: "lg", text: "Example of a section with compass cards:", color: "black", fontFamily: "", additionalClasses: "pb-12 text-xl font-bold" }), _jsx(GenericList, { data: DUMMYCOMPASSPRODUCTDATA, listType: "none", containerClasses: "w-full grid grid-cols-4 gap-y-12 gap-x-8 h-full max-lg:grid-cols-2 max-lg:gap-y-12 max-lg:gap-x-2 max-md:gap-12 max-sm:w-[90%] max-sm:gap-8 justify-items-center", renderItem: (item) => (_jsx(Card, { containerClasses: "w-full h-full shadow-md overflow-hidden rounded-md transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300 max-lg:transition-none max-lg:hover:transform-none max-w-72", cardBackgroundColor: item.cardBackgroundColor, cardBorderRadius: item.cardBorderRadius, cardBorderColor: item.cardBorderColor, cardBoxShadow: item.cardBoxShadow, children: _jsx(CompassCardTemplate, { data: item }) }, item.id)) })] })),
+    children: (_jsxs(_Fragment, { children: [_jsx(Text, { tag: "h1", size: "lg", text: "Example of a section with horizontal cards:", color: "black", fontFamily: "", additionalClasses: "pb-12" }), _jsx(GenericList, { data: DUMMYCOMPASSPRODUCTDATA, listType: "none", containerClasses: "w-full grid grid-cols-4 gap-y-12 gap-x-8 h-full max-lg:grid-cols-2 max-lg:gap-y-12 max-lg:gap-x-2 max-md:gap-12 max-sm:w-[90%] max-sm:gap-8 justify-items-center", renderItem: (item) => (_jsx(Card, { containerClasses: "w-full h-full shadow-md overflow-hidden rounded-md transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300 max-lg:transition-none max-lg:hover:transform-none max-w-72", cardBackgroundColor: item.cardBackgroundColor, cardBorderRadius: item.cardBorderRadius, cardBorderColor: item.cardBorderColor, cardBoxShadow: item.cardBoxShadow, children: _jsx(CompassCardTemplate, { data: item }) }, item.id)) })] })),
 };

package/dist/components/PageSection/PageSections.test.js

@@ -6,9 +6,8 @@ import Text from "../Text/Text";
 import Card from "../Card/Card";
 import GenericList from "../GenericList/GenericList";
 import CompassCardTemplate from "../Card/templates/CompassCardTemplate";
-import { DUMMYPRODUCTDATA, DUMMYCOMPASSPRODUCTDATA, } from "../../components/Card/DUMMYPRODUCTDATA.json";
-import HorizontalCardTemplate from "../Card/templates/HorizontalCardTemplate";
-describe("Section Component(<Section />)", () => {
+import { DUMMYCOMPASSPRODUCTDATA } from "../../components/Card/DUMMYPRODUCTDATA.json";
+describe("<Section />", () => {
     beforeEach(() => {
         render(_jsx(Section, { sectionContainerClasses: "flex flex-row justify-center items-center flex-wrap lg:gap-10 gap-4  my-20 lg:max-h-view-page  max-h-fit  min-h-fit overflow-scroll px-4", children: _jsxs(_Fragment, { children: [_jsx("div", { className: "bg-red-400 p-4", children: "Content 1" }), _jsx("div", { className: "bg-green-400 p-4", children: "Content 2" }), _jsx("div", { className: "bg-blue-400 p-4", children: "Content 3" })] }) }));
     });
@@ -21,21 +20,12 @@ describe("Section Component(<Section />)", () => {
         expect(section).toHaveClass("flex-row");
     });
 });
-describe("<Section /> with horizontal cards", () => {
-    it("displays correct cards", () => {
-        render(_jsx(Section, { sectionContainerClasses: "w-full bg-slate-100 flex flex-col p-6 justify-center items-center", children: _jsxs(_Fragment, { children: [_jsx(Text, { tag: "h1", size: "lg", text: "Example of a section with horizontal cards:", color: "black", fontFamily: "", additionalClasses: "pb-12 text-xl font-bold" }), _jsx(GenericList, { data: DUMMYPRODUCTDATA, listType: "none", renderItem: (item) => (_jsx(Card, { containerClasses: "flex mb-6 max-sm:w-1/2 max-sm:flex-col overflow-hidden", cardBackgroundColor: item.cardBackgroundColor, cardBorderRadius: item.cardBorderRadius, cardBorderColor: item.cardBorderColor, cardBoxShadow: item.cardBoxShadow, children: _jsx(HorizontalCardTemplate, { data: item }) }, item.id)) })] }) }));
-        const cards = screen.queryAllByTestId("card");
-        expect(cards.length).toBe(6);
-        const cardTitles = screen.getAllByText("Crothall iPads - Environmental Services");
-        expect(cardTitles).toHaveLength(2);
-    });
-});
 describe("<Section /> with compass cards", () => {
     it("displays correct cards", () => {
         render(_jsx(Section, { sectionContainerClasses: "flex flex-row justify-center items-center flex-wrap lg:gap-10 gap-4  my-20 lg:max-h-view-page max-h-fit  min-h-fit overflow-scroll px-4", children: _jsxs(_Fragment, { children: [_jsx(Text, { tag: "h1", size: "lg", text: "Example of a section with horizontal cards:", color: "black", fontFamily: "", additionalClasses: "pb-12" }), _jsx("div", { className: "grid grid-cols-4 gap-8 h-[100%] max-xl:gap-1 max-lg:grid-cols-2 max-lg:gap-y-24 max-lg:justify-items-center", children: _jsx(GenericList, { data: DUMMYCOMPASSPRODUCTDATA, listType: "none", renderItem: (item) => (_jsx(Card, { containerClasses: "w-3/4", cardBackgroundColor: item.cardBackgroundColor, cardBorderRadius: item.cardBorderRadius, cardBorderColor: item.cardBorderColor, cardBoxShadow: item.cardBoxShadow, children: _jsx(CompassCardTemplate, { data: item }) })) }) })] }) }));
         const cards = screen.queryAllByTestId("card");
         expect(cards.length).toBe(16);
-        expect(cards[0]).toHaveTextContent("Environmental Services - Lenovo ThinkPad Universal USB-C Dock");
+        expect(cards[0]).toHaveTextContent("Compass Sales Lenovo TP X13 Yoga G3 Laptop");
         expect(cards[3]).toHaveTextContent("Exec RoadWarrior");
     });
 });

package/dist/components/Toaster/Toaster.js

@@ -13,9 +13,8 @@ const Toaster = ({ message, additionalClasses, clearMessage, hasClearButton, sta
     const containerClasses = colorClass ?? "";
     const shadowClasses = `shadow-lg shadow-boxShadow rounded-lg`;
     const closeButtonClasses = `cursor-pointer text-xs`;
-    const messageClasses = `grid grid-cols-[24px_1fr_24px] items-center gap-x-2`;
-    return (_jsx("div", { "data-testid": "toaster-test-id", role: "alert", "aria-live": "polite", className: `${shadowClasses} ${containerClasses} ${additionalClasses}`, children: message.map((msg, index) => (_jsxs("div", { className: messageClasses, children: [_jsx("div", { children: index === 0 && maybeIcon
+    return (_jsx("div", { "data-testid": "toaster-test-id", role: "alert", "aria-live": "polite", className: `${shadowClasses} ${containerClasses} ${additionalClasses}`, children: message.map((msg, index) => (_jsxs("div", { className: "flex items-center p-2", children: [_jsx("div", { className: "w-6 flex-none mr-2", children: index === 0 && maybeIcon
                         ? getFontAwesomeIcon(maybeIcon.icon, maybeIcon.type)
-                        : null }), _jsx("p", { className: index === 0 && "font-semibold", children: msg }), _jsx("div", { children: index === 0 && hasClearButton && (_jsx("div", { "data-testid": "clear-button", className: closeButtonClasses, onClick: handleClearMessage, children: getFontAwesomeIcon("x", "solid") })) })] }, index))) }));
+                        : null }), _jsx("div", { className: "flex-grow", children: _jsx("p", { className: index === 0 && "font-semibold", children: msg }) }), _jsx("div", { className: "w-6 flex-none ml-2", children: index === 0 && hasClearButton && (_jsx("div", { "data-testid": "clear-button", className: closeButtonClasses, onClick: handleClearMessage, children: getFontAwesomeIcon("x", "solid") })) })] }, index))) }));
 };
 export default Toaster;

package/dist/components/Toaster/Toaster.test.js

@@ -39,7 +39,6 @@ describe("Toaster Component Tests", () => {
         const clearButton = screen.getByTestId("clear-button");
         await userEvent.click(clearButton);
         // Assert
-        expect(mockAlert).toHaveBeenCalledWith("Message Cleared!");
         expect(mockClearMessage).toHaveBeenCalledWith(true);
         // Cleanup
         mockAlert.mockRestore();

package/package.json

@@ -1,13 +1,13 @@
 {
 	"name": "@agilant/toga-blox",
 	"private": false,
-	"version": "1.0.18",
+	"version": "1.0.20",
 	"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",