@agilant/toga-blox 1.0.10 → 1.0.11

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

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

package/dist/components/Badge/Badge.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Badge = ({ borderColor, borderWidth, borderRadius, backgroundColor, hasMobileStyle, mobileIcon, mobileIconLabel, iconSize, hasLeftIcon, hasRightIcon, icon, image, text, badgeContainerClasses, }) => {
+    const iconClasses = `${iconSize}`;
+    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 }))] }));
+};
+export default Badge;

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

@@ -0,0 +1,7 @@
+import { Meta } from "@storybook/react";
+declare const _default: Meta;
+export default _default;
+export declare const Default: any;
+export declare const BadgeWithLeftIcon: any;
+export declare const BadgeWithRightIcon: any;
+export declare const CommerceBadge: any;

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

@@ -0,0 +1,196 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Text from "../Text/Text";
+import Badge from "./Badge";
+import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
+export default {
+    title: "Components/Badge",
+    component: Badge,
+    argTypes: {
+        borderColor: {
+            control: "none",
+            description: "Sets the border color of the badge using Tailwind CSS classes. Example: `border-gray-300`.",
+        },
+        borderWidth: {
+            control: "none",
+            description: "Sets the border width of the badge using Tailwind CSS classes. Example: `border-2`.",
+        },
+        borderRadius: {
+            control: "none",
+            description: "Sets the border radius of the badge using Tailwind CSS classes. Example: `rounded-full`.",
+        },
+        backgroundColor: {
+            control: "none",
+            description: "Sets the background color of the badge using Tailwind CSS classes. Example: `bg-gray-100`.",
+        },
+        badgeContainerClasses: {
+            control: "none",
+            description: "Additional Tailwind CSS classes for the badge container. Example: `p-2`.",
+        },
+        iconSize: {
+            control: "none",
+            description: "Sets the size of the icon inside the badge using Tailwind CSS classes. Example: `h-6 w-6`.",
+        },
+        hasMobileStyle: {
+            control: "none",
+            description: "Indicates whether mobile-specific styles should be applied to the badge.",
+        },
+        mobileIcon: {
+            control: "none",
+            description: "The icon to be displayed in mobile view.",
+        },
+        mobileIconLabel: {
+            control: "none",
+            description: "ARIA label for the mobile icon, used for accessibility.",
+        },
+        hasLeftIcon: {
+            control: "none",
+            description: "Determines if an icon should be displayed on the left side of the badge.",
+        },
+        hasRightIcon: {
+            control: "none",
+            description: "Determines if an icon should be displayed on the right side of the badge.",
+        },
+        icon: {
+            control: "none",
+            description: "The icon to be displayed inside the badge.",
+        },
+        image: {
+            control: "none",
+            description: "An image to be displayed inside the badge.",
+        },
+        text: {
+            control: "none",
+            description: "The text or content to be displayed inside the badge.",
+        },
+        borderHoverColor: {
+            control: "none",
+            description: "Sets the border hover color of the badge using Tailwind CSS classes. Example: `border-gray-400`.",
+        },
+        cursorPointer: {
+            control: "none",
+            description: "Determines if the badge should have a pointer cursor.",
+        },
+        type: {
+            control: "none",
+            description: "Determines the type of element the badge should render as.",
+        },
+        hoverColor: {
+            control: "none",
+            description: "Sets the hover color of the badge using Tailwind CSS classes. Example: `hover:bg-gray-200`.",
+        },
+        to: {
+            control: "none",
+            description: "The URL to navigate to when the badge is clicked.",
+        },
+        href: {
+            control: "none",
+            description: "The URL to navigate to when the badge is clicked.",
+        },
+        color: {
+            control: "none",
+            description: "Sets the text color of the badge using Tailwind CSS classes. Example: `text-gray-800`.",
+        },
+        badgeSize: {
+            control: "none",
+            description: "Sets the size of the badge using Tailwind CSS classes. Example: `h-8 w-8`.",
+        },
+        iconOrder: {
+            control: "none",
+            description: "Determines the order of the icon inside the badge.",
+        },
+        testId: {
+            control: "none",
+            description: "Test ID for the badge component.",
+        },
+        textSize: {
+            control: "none",
+            description: "Sets the size of the text inside the badge using Tailwind CSS classes. Example: `text-sm`.",
+        },
+        fontFamily: {
+            control: "none",
+            description: "Sets the font family of the text inside the badge using Tailwind CSS classes. Example: `font-serif`.",
+        },
+        additionalClasses: {
+            control: "none",
+            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`.",
+        },
+    },
+    tags: ["autodocs"],
+    parameters: {
+        layout: "centered",
+    },
+};
+const Template = (args) => _jsx(Badge, { ...args });
+export const Default = Template.bind({});
+Default.args = {
+    backgroundColor: "bg-[#DBEAFE]",
+    borderRadius: "rounded-md",
+    badgeContainerClasses: "px-3 py-1",
+    hasMobileStyle: true,
+    mobileIconLabel: "Default Badge",
+    text: (_jsx(Text, { color: "text-black", fontFamily: "font-serif", text: "Required", tag: "span", additionalClasses: "font-bold", size: "text-sm" })),
+};
+Default.parameters = {
+    docs: {
+        description: {
+            story: "The default badge component with basic styling, including text and optional mobile-specific styling.",
+        },
+    },
+};
+export const BadgeWithLeftIcon = Template.bind({});
+BadgeWithLeftIcon.args = {
+    backgroundColor: "bg-[#DAF8E6]",
+    borderRadius: "rounded-md",
+    badgeContainerClasses: "px-3 py-1",
+    hasMobileStyle: true,
+    mobileIconLabel: "Complete",
+    mobileIcon: getFontAwesomeIcon("check"),
+    icon: getFontAwesomeIcon("check"),
+    hasLeftIcon: true,
+    iconSize: "text-sm",
+    text: (_jsx(Text, { color: "text-black", fontFamily: "font-serif", text: "Complete", tag: "span", size: "text-sm" })),
+};
+BadgeWithLeftIcon.parameters = {
+    docs: {
+        description: {
+            story: "A badge with an icon on the left side, typically used to indicate completion or success.",
+        },
+    },
+};
+export const BadgeWithRightIcon = Template.bind({});
+BadgeWithRightIcon.args = {
+    backgroundColor: "bg-red-100",
+    borderRadius: "rounded-md",
+    badgeContainerClasses: "px-3 py-1",
+    hasMobileStyle: true,
+    mobileIconLabel: "Incomplete",
+    mobileIcon: getFontAwesomeIcon("xmark"),
+    icon: getFontAwesomeIcon("xmark"),
+    hasRightIcon: true,
+    iconSize: "text-sm",
+    text: (_jsx(Text, { color: "text-black", fontFamily: "font-serif", text: "Incomplete", tag: "span", size: "text-sm" })),
+};
+BadgeWithRightIcon.parameters = {
+    docs: {
+        description: {
+            story: "A badge with an icon on the right side, typically used to indicate an incomplete or failed status.",
+        },
+    },
+};
+export const CommerceBadge = Template.bind({});
+CommerceBadge.args = {
+    backgroundColor: "bg-[#DAF8E6]",
+    borderRadius: "rounded-md",
+    badgeContainerClasses: "px-3 py-1",
+    text: (_jsx(Text, { color: "text-black", fontFamily: "font-serif", text: "In Stock", tag: "span", size: "text-sm" })),
+};
+CommerceBadge.parameters = {
+    docs: {
+        description: {
+            story: "A badge used in e-commerce contexts to indicate that an item is in stock, with a custom background color and rounded borders.",
+        },
+    },
+};

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

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

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

@@ -0,0 +1,80 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { render, screen } from "@testing-library/react";
+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");
+        expect(badge).toBeInTheDocument();
+    });
+    test("has correct text", () => {
+        expect(screen.getByTestId("badge-text")).toHaveTextContent("Priority");
+    });
+    test("has correct border color", () => {
+        const badge = screen.getByTestId("priority-badge");
+        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" }) }));
+    });
+    test("renders badge with icon", () => {
+        const badge = screen.getByTestId("icon-badge");
+        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();
+    });
+});
+describe("<Badge /> with pill style", () => {
+    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();
+    });
+    test("has correct text", () => {
+        expect(screen.getByTestId("badge-text")).toHaveTextContent("Contact Us");
+        expect(screen.getByTestId("badge-text")).toHaveTextContent("1-800-800-8000");
+    });
+    test("has correct background color", () => {
+        const pill = screen.getByTestId("pill-badge");
+        expect(pill).toHaveClass("hover:bg-blue-500");
+    });
+    test("has correct image", () => {
+        const pillImage = screen.getByAltText("");
+        expect(pillImage).toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,25 @@
+import React, { ReactNode } from "react";
+export interface BadgeTypes {
+    onClick?: (e: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;
+    text?: ReactNode;
+    cursorPointer?: boolean;
+    type: "href" | "to" | "span";
+    image?: ReactNode;
+    borderColor?: string;
+    backgroundColor?: string;
+    borderWidth?: string;
+    borderRadius?: string;
+    borderHoverColor?: string;
+    hoverColor?: string;
+    to?: string;
+    href?: string;
+    hasMobileStyle?: boolean;
+    mobileIcon?: ReactNode;
+    mobileIconLabel?: string;
+    icon?: ReactNode;
+    hasLeftIcon?: boolean;
+    hasRightIcon?: boolean;
+    badgeContainerClasses?: string;
+    iconSize?: string;
+    testId?: string;
+}

package/dist/components/Badge/Badge.types.js

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

package/dist/components/Badge/index.js

@@ -0,0 +1,2 @@
+export { default } from "./Badge";
+export * from "./Badge.types";

package/dist/components/Card/Card.d.ts

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

package/dist/components/Card/Card.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const Card = ({ children, containerClasses = "", cardBackgroundColor = "bg-white", cardBorderColor = "border-gray-300", cardBorderRadius = "rounded-lg", cardBoxShadow = true, }) => {
+    const cardStyleClasses = `
+		${cardBackgroundColor}
+		${cardBorderColor !== "none" ? `border ${cardBorderColor}` : ""}
+		${cardBorderRadius}
+		${cardBoxShadow ? true : ""}
+	`;
+    return (_jsx("div", { className: `${containerClasses} ${cardStyleClasses}`, "data-testid": "card-container", children: children }));
+};
+export default Card;

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

@@ -0,0 +1,12 @@
+import { Meta } from "@storybook/react";
+import type { CardTypes } from "./Card.types";
+declare const _default: Meta<CardTypes>;
+export default _default;
+export declare const Default: any;
+export declare const VerticalCard: any;
+export declare const CompassCard: any;
+export declare const CategoryCard: any;
+export declare const ItemCard: any;
+export declare const KitContentCard: any;
+export declare const ShippingAddressCard: any;
+export declare const CounterContentCard: any;

package/dist/components/Card/Card.stories.js

@@ -0,0 +1,173 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Card from "./Card";
+import { DUMMYPRODUCTDATA, DUMMYCOMPASSPRODUCTDATA, DUMMYCATEGORYCARDDATA, } from "./DUMMYPRODUCTDATA.json";
+import HorizontalCardTemplate from "./templates/HorizontalCardTemplate";
+import VerticalCardTemplate from "./templates/VerticalCardTemplate";
+import CompassCardTemplate from "./templates/CompassCardTemplate";
+import CategoryCardTemplate from "./templates/CategoryCardTemplate";
+import ItemCardTemplate from "./templates/ItemCardTemplate";
+import KitContentCardTemplate from "./templates/KitContentCardTemplate";
+import ShippingAddressCardTemplate from "./templates/ShippingAddressCardTemplate";
+import CounterContentCardTemplate from "./templates/CounterContentCardTemplate";
+export default {
+    title: "Components/Card",
+    component: Card,
+    argTypes: {
+        cardBorderRadius: {
+            control: "none",
+            options: ["rounded-none", "rounded-sm", "rounded-md", "rounded-lg", "rounded-full"],
+            description: "The border radius of the card.",
+        },
+        cardBackgroundColor: {
+            control: "none",
+            options: ["bg-blue-100", "bg-teal-100", "bg-slate-50", "bg-white"],
+            description: "The background color of the card.",
+        },
+        cardBorderColor: {
+            control: "none",
+            options: ["border-blue-500", "border-teal-500", "border-slate-50", "border-none"],
+            description: "The color of the card border.",
+        },
+        cardBoxShadow: {
+            control: "none",
+            description: "Whether the card has box shadow or not.",
+        },
+        children: {
+            control: {
+                type: "none",
+            },
+        },
+        containerClasses: {
+            control: {
+                type: "none",
+            },
+        },
+        key: {
+            control: {
+                type: "none",
+            },
+        },
+    },
+    tags: ["autodocs"],
+    parameters: {
+        layout: "centered",
+    },
+};
+const Template = (args) => _jsx(Card, { ...args });
+export const Default = Template.bind({});
+Default.args = {
+    containerClasses: "flex w-full max-sm:w-1/2 max-sm:flex-col",
+    key: DUMMYPRODUCTDATA[0].id,
+    cardBorderRadius: "rounded-md",
+    cardBorderColor: "border-blue-500",
+    cardBackgroundColor: "bg-blue-100",
+    cardBoxShadow: false,
+    children: _jsx(HorizontalCardTemplate, { data: DUMMYPRODUCTDATA[0] }),
+};
+export const VerticalCard = Template.bind({});
+VerticalCard.args = {
+    key: DUMMYPRODUCTDATA[0].id,
+    cardBorderRadius: "rounded-lg",
+    cardBorderColor: "border-none",
+    cardBackgroundColor: "bg-none",
+    cardBoxShadow: false,
+    children: (_jsx(VerticalCardTemplate, { data: {
+            ...DUMMYPRODUCTDATA[4],
+            badgeText: "Kit",
+            description: "2 included items, 2 required add-ons",
+            imageUrl: "../../../assets/card-1.jpg",
+            altText: "Product Image",
+        }, containerClasses: "flex flex-col items-center w-full max-w-[320px] sm:max-w-[408px] h-auto sm:h-[500px] border border-[#DFE4EA] bg-white rounded-lg relative hover:border-1 hover:border-teal-600 hover:shadow-inner", imageContainerClasses: "flex justify-center items-center w-2/3 h-64 sm:h-20 gap-2 flex-1 p-5", titleContainerClasses: "flex flex-col items-start gap-1 m-2 sm:m-5 text-sm sm:text-base", descriptionContainerClasses: "flex items-center mb-2 sm:mb-5 text-xs sm:text-xs", priceContainerClasses: "flex items-end justify-between w-full text-sm sm:text-base", buttonContainerClasses: "w-16 sm:w-24 px-2 sm:px-3 py-1 sm:py-2 text-xs sm:text-sm sm:p-3 hover:bg-teal-800", badgeContainerClasses: "absolute top-2 sm:top-5 left-2 sm:left-5 text-xs sm:text-sm" })),
+};
+export const CompassCard = Template.bind({});
+CompassCard.args = {
+    containerClasses: "w-1/2 max-sm:w-1/2 overflow-hidden rounded-md transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300",
+    key: DUMMYCOMPASSPRODUCTDATA[0].id,
+    cardBorderRadius: "rounded-none",
+    cardBorderColor: "border-teal-500",
+    cardBackgroundColor: "bg-teal-500",
+    cardBoxShadow: true,
+    children: (_jsx(CompassCardTemplate, { data: {
+            title: "Card Title",
+            ...DUMMYCOMPASSPRODUCTDATA[0],
+            imageBackgroundColor: "",
+            textBackgroundColor: "",
+        } })),
+};
+export const CategoryCard = Template.bind({});
+CategoryCard.args = {
+    key: DUMMYCATEGORYCARDDATA[0].id,
+    cardBorderRadius: "rounded-md",
+    cardBorderColor: "border-none",
+    cardBackgroundColor: "bg-white",
+    cardBoxShadow: false,
+    children: (_jsx(CategoryCardTemplate, { data: {
+            ...DUMMYCATEGORYCARDDATA[0],
+            productCount: DUMMYCATEGORYCARDDATA[0].productCount,
+            imageBackgroundColor: "bg-white",
+            textBackgroundColor: "text-black",
+            titleProps: {
+                tag: "h3",
+                size: "text-lg",
+                fontColor: "text-black",
+                fontFamily: "font-sans",
+                additionalClasses: "font-bold",
+            },
+        }, containerClasses: "flex flex-col items-center w-full max-w-[320px] sm:max-w-[408px] h-auto border border-gray-300 bg-white rounded-lg hover:border-teal-600 hover:shadow-inner", imageContainerClasses: "flex items-center justify-center w-full h-full object-contain sm:h-[300px] p-4", titleClasses: "text-center mt-2 sm:mt-4", productCountClasses: "text-gray-500 text-sm mt-2" })),
+};
+export const ItemCard = Template.bind({});
+ItemCard.args = {
+    key: DUMMYPRODUCTDATA[1].id,
+    cardBorderRadius: "rounded-lg",
+    cardBorderColor: "border-none",
+    cardBackgroundColor: "bg-white",
+    cardBoxShadow: false,
+    children: (_jsx(ItemCardTemplate, { data: {
+            ...DUMMYPRODUCTDATA[1],
+            badgeText: "In Stock",
+            description: "USB - Microphone - Battery - Black, Silver",
+        }, containerClasses: "flex flex-col items-center w-full max-w-[408px] sm:max-w-full border border-[#DFE4EA] bg-white rounded-lg relative hover:border-teal-600 hover:shadow-inner", imageContainerClasses: "flex justify-center items-center w-full h-36 sm:h-64 p-2 sm:p-4", titleContainerClasses: "flex flex-col items-start gap-1 px-2 sm:px-5 pb-2 sm:pb-5", descriptionContainerClasses: "flex flex-col", priceContainerClasses: "flex items-center justify-between w-full", buttonContainerClasses: "px-3 py-1 sm:px-5 sm:py-2", badgeContainerClasses: "absolute top-3 left-3 sm:top-5 sm:left-5" })),
+};
+export const KitContentCard = Template.bind({});
+KitContentCard.args = {
+    key: DUMMYPRODUCTDATA[0].id,
+    cardBorderRadius: "rounded-lg",
+    cardBorderColor: "border-none",
+    cardBackgroundColor: "bg-none",
+    cardBoxShadow: false,
+    children: (_jsx(KitContentCardTemplate, { data: {
+            ...DUMMYPRODUCTDATA[2],
+            badgeText: "In Stock",
+            description: "",
+        } })),
+};
+export const ShippingAddressCard = Template.bind({});
+ShippingAddressCard.args = {
+    key: DUMMYPRODUCTDATA[0].id,
+    cardBorderRadius: "rounded-lg",
+    cardBorderColor: "border-none",
+    cardBackgroundColor: "bg-none",
+    cardBoxShadow: false,
+    children: (_jsx(ShippingAddressCardTemplate, { data: {
+            ...DUMMYPRODUCTDATA[2],
+            imageUrl: "../../../assets/map.png",
+            badgeText: "Primary",
+            title: "Tech Solutions Inc.",
+            addressLine1: "789 Oak Avenue",
+            addressLine2: "Suite 300",
+            addressLine3: "Springfield, IL 62701, US",
+        } })),
+};
+export const CounterContentCard = Template.bind({});
+CounterContentCard.args = {
+    key: DUMMYPRODUCTDATA[0].id,
+    cardBorderRadius: "rounded-lg",
+    cardBorderColor: "border-none",
+    cardBackgroundColor: "bg-none",
+    cardBoxShadow: false,
+    children: (_jsx(CounterContentCardTemplate, { data: {
+            ...DUMMYPRODUCTDATA[5],
+            badgeText: "In Stock",
+            description: "3.28 ft USB Data Transfer Cable for iPad Pro, Power Adapter - First End: 1 x USB 3.1 Type C - Male - Second End: 1 x USB 3.1 Type C - Male - 10 Gbit/s - White",
+        } })),
+};

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

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

package/dist/components/Card/Card.test.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, beforeEach, test } from "vitest";
+import Card from "./Card";
+import { DUMMYPRODUCTDATA } from "./DUMMYPRODUCTDATA.json";
+import CompassCardTemplate from "./templates/CompassCardTemplate";
+describe("<Card />", () => {
+    beforeEach(() => {
+        render(_jsx(Card, { cardBorderRadius: "cornered", cardBorderColor: "green", cardBackgroundColor: "none", cardBoxShadow: true, containerClasses: "w-1/2 max-sm:w-1/2", children: _jsx(CompassCardTemplate, { data: { ...DUMMYPRODUCTDATA[0], imageBackgroundColor: "", textBackgroundColor: "" } }) }, DUMMYPRODUCTDATA[0].id));
+    });
+    test("renders card", () => {
+        const card = screen.getByTestId("card-container");
+        expect(card).toBeInTheDocument();
+    });
+    test("renders correct card text", () => {
+        const card = screen.getByTestId("card-container");
+        expect(card).toHaveTextContent("Compass Sales Lenovo TP X13 Yoga G3 Laptop");
+    });
+    test("renders correct card image", () => {
+        const card = screen.getByTestId("image");
+        expect(card).toHaveAttribute("src", "./assets/compass-card-image.png");
+    });
+    test("renders correct card background color for image", () => {
+        const card = screen.getByTestId("card-image-container");
+        expect(card).toHaveClass("bg-teal-500");
+    });
+    test("renders correct card border color", () => {
+        const card = screen.getByTestId("card-container");
+        expect(card).toHaveClass("border-teal-500");
+    });
+    test("renders correct card background color for text", () => {
+        const card = screen.getByTestId("card-text-container");
+        expect(card).toHaveClass("bg-slate-50");
+    });
+});

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

@@ -0,0 +1,10 @@
+import React from "react";
+export interface CardTypes {
+    children?: React.ReactNode;
+    containerClasses?: string;
+    key?: string;
+    cardBackgroundColor?: string;
+    cardBorderColor?: string;
+    cardBorderRadius?: string;
+    cardBoxShadow?: boolean;
+}

package/dist/components/Card/Card.types.js

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