@agilant/toga-blox 1.0.9 → 1.0.11

package/src/components/Badge/Badge.test.tsx

@@ -1,175 +0,0 @@
-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(
-			<Badge
-				type="span"
-				borderColor="border-red-500"
-				hoverColor="hover:bg-none"
-				testId="priority-badge"
-				mobileIcon={getFontAwesomeIcon("exclamationCircle")}
-				mobileIconLabel="Priority"
-				text={
-					<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(
-			<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={
-					<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(
-			<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={
-					<>
-						<Text
-							size="text-md"
-							color="text-black"
-							fontFamily="font-serif"
-							text="Contact Us"
-							tag="h2"
-							additionalClasses="pl-2 pb-0 font-bold"
-						/>
-						<Text
-							size="text-md"
-							color="text-black"
-							fontFamily="font-serif"
-							text="1-800-800-8000"
-							tag="p"
-							additionalClasses="pl-2 pt-0"
-						/>
-					</>
-				}
-				image={
-					<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/src/components/Badge/Badge.tsx

@@ -1,54 +0,0 @@
-import React from "react";
-import { BadgeTypes } from "./Badge.types";
-
-const Badge: React.FC<BadgeTypes> = ({
-	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 (
-		<span className={badgeClasses}>
-			{image && <span className="mr-2">{image}</span>}
-			{icon && hasLeftIcon && (
-				<span className={`${iconClasses} max-md:hidden mr-2`}>
-					{icon}
-				</span>
-			)}
-			{mobileIcon && hasMobileStyle && (
-				<span
-					className={`${iconClasses} hidden max-md:flex max-md:p-0 mr-2`}
-					aria-hidden="false"
-					aria-label={mobileIconLabel}
-				>
-					{mobileIcon}
-				</span>
-			)}
-			<div className={`${hasMobileStyle ? "max-md:hidden" : ""}`}>
-				{text}
-			</div>
-			{icon && hasRightIcon && (
-				<span className={`${iconClasses} max-md:hidden ml-2`}>
-					{icon}
-				</span>
-			)}
-		</span>
-	);
-};
-
-export default Badge;

package/src/components/Badge/Badge.types.tsx

@@ -1,26 +0,0 @@
-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/src/components/Card/Card.stories.tsx

@@ -1,235 +0,0 @@
-import { Meta, StoryFn } from "@storybook/react";
-import Card from "./Card";
-import type { CardTypes } from "./Card.types";
-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",
-	},
-} as Meta<CardTypes>;
-
-const Template: StoryFn<CardTypes> = (args) => <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: <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: (
-		<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: (
-		<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: (
-		<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: (
-		<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: (
-		<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: (
-		<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: (
-		<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/src/components/Card/Card.test.tsx

@@ -1,53 +0,0 @@
-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(
-			<Card
-				key={DUMMYPRODUCTDATA[0].id}
-				cardBorderRadius="cornered"
-				cardBorderColor="green"
-				cardBackgroundColor="none"
-				cardBoxShadow={true}
-				containerClasses="w-1/2 max-sm:w-1/2"
-				children={<CompassCardTemplate data={{ ...DUMMYPRODUCTDATA[0], imageBackgroundColor: "", textBackgroundColor: "" }} />}
-			/>
-		);
-	});
-
-	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/src/components/Card/Card.tsx

@@ -1,26 +0,0 @@
-import React from "react";
-import type { CardTypes } from "./Card.types";
-
-const Card: React.FC<CardTypes> = ({
-	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 (
-		<div className={`${containerClasses} ${cardStyleClasses}`} data-testid="card-container">
-			{children}
-		</div>
-	);
-};
-
-export default Card;

package/src/components/Card/Card.types.ts

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