@agilant/toga-blox 1.0.8 → 1.0.9

package/src/components/Badge/Badge.tsx

@@ -1,17 +1,8 @@
 import React from "react";
-import { Link } from "react-router-dom";
 import { BadgeTypes } from "./Badge.types";
 
 const Badge: React.FC<BadgeTypes> = ({
-	onClick,
-	cursorPointer = true,
-	type = "span",
-	to,
-	href,
-	testId,
-	hoverColor,
 	borderColor,
-	borderHoverColor,
 	borderWidth,
 	borderRadius,
 	backgroundColor,
@@ -26,99 +17,38 @@ const Badge: React.FC<BadgeTypes> = ({
 	text,
 	badgeContainerClasses,
 }) => {
-	const baseBadgeContainerClasses = "flex items-center justify-center px-[10px] py-[3px] rounded gap-[4px]";
 	const iconClasses = `${iconSize}`;
-	const badgeBackgroundClasses = `${backgroundColor} hover:${hoverColor}`;
-	const badgeBorderClasses = `${borderWidth} ${borderColor} ${borderRadius} hover:${borderHoverColor}`;
-	const cursorClasses = cursorPointer ? "cursor-pointer" : "";
-	const badgeClasses = `${cursorClasses} ${baseBadgeContainerClasses} ${badgeBorderClasses} ${badgeContainerClasses} ${badgeBackgroundClasses}`;
+	const badgeBackgroundClasses = `${backgroundColor}`;
+	const badgeBorderClasses = `${borderWidth} ${borderColor} ${borderRadius}`;
+	const badgeClasses = `inline-flex items-center ${badgeBorderClasses} ${badgeBackgroundClasses} ${badgeContainerClasses}`;
 
-	const handleClick = (
-		e: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>
-	) => {
-		e.preventDefault();
-		onClick?.(e);
-	};
-
-	const baseProps = {
-		onClick: handleClick,
-		type: type,
-		"data-testid": testId,
-	};
-
-	switch (type) {
-		case "href":
-			return (
-				<>
-					<a {...baseProps} href={href} className={badgeClasses}>
-						{renderContent()}
-					</a>
-				</>
-			);
-		case "to":
-			if (to) {
-				return (
-					<>
-						<Link
-							{...baseProps}
-							to={to}
-							className={badgeClasses}
-						>
-							{renderContent()}
-						</Link>
-					</>
-				);
-			}
-			break;
-		case "span":
-			return (
-				<>
-					<span className={badgeClasses}>{renderContent()}</span>
-				</>
-			);
-		default:
-			return null;
-	}
-
-	function renderContent() {
-		return (
-			<>
-				{image && <span>{image}</span>}
-				{icon && hasLeftIcon && (
-					<span
-						className={`${iconClasses} max-md:hidden`}
-						data-testid="badge-icon"
-					>
-						<>{icon}</>
-					</span>
-				)}
-				{mobileIcon && hasMobileStyle && (
-					<span
-						className={`${iconClasses} hidden max-md:flex max-md:p-0`}
-						data-testid="mobile-badge-icon"
-						aria-hidden="false"
-						aria-label={mobileIconLabel}
-					>
-						<>{mobileIcon}</>
-					</span>
-				)}
-				<div
-					className={` ${hasMobileStyle ? "max-md:hidden" : ""} `}
-					data-testid="badge-text"
+	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}
 				>
-					{text}
-				</div>
-				{icon && hasRightIcon && (
-					<span
-						className={`${iconClasses} max-md:hidden`}
-						data-testid="badge-icon"
-					>
-						<>{icon}</>
-					</span>
-				)}
-			</>
-		);
-	}
+					{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,37 +1,26 @@
-import React, { CSSProperties } from "react";
+import React, { ReactNode } from "react";
 
 export interface BadgeTypes {
-	onClick?: (
-		e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>
-	) => void;
-	text?: React.ReactNode;
+	onClick?: (e: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;
+	text?: ReactNode;
 	cursorPointer?: boolean;
 	type: "href" | "to" | "span";
-	image?: React.ReactNode;
-	borderColor?: string | undefined;
-	backgroundColor?: string | undefined;
-	borderWidth?: string | undefined;
-	borderRadius?: string | undefined;
-	borderHoverColor?: string | undefined;
+	image?: ReactNode;
+	borderColor?: string;
+	backgroundColor?: string;
+	borderWidth?: string;
+	borderRadius?: string;
+	borderHoverColor?: string;
 	hoverColor?: string;
 	to?: string;
 	href?: string;
 	hasMobileStyle?: boolean;
-	mobileIcon?: JSX.Element | Element | null;
+	mobileIcon?: ReactNode;
 	mobileIconLabel?: string;
-	icon?: JSX.Element | Element | null;
+	icon?: ReactNode;
 	hasLeftIcon?: boolean;
 	hasRightIcon?: boolean;
 	badgeContainerClasses?: string;
-	iconSize?: string | undefined;
-
-	// STORYBOOK PROP TYPES
-	color?: string | undefined;
-	badgeSize?: string | undefined;
-	iconOrder?: "first" | "last";
-	children?: React.ReactNode;
+	iconSize?: string;
 	testId?: string;
-	textSize?: string;
-	fontColor?: string | undefined;
-	additionalClasses?: string;
 }

package/src/components/Card/Card.stories.tsx

@@ -1,35 +1,41 @@
 import { Meta, StoryFn } from "@storybook/react";
 import Card from "./Card";
-import type { CardTypes } from ".";
+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: "select",
-			options: ["cornered", "semiRounded", "rounded"],
+			control: "none",
+			options: ["rounded-none", "rounded-sm", "rounded-md", "rounded-lg", "rounded-full"],
 			description: "The border radius of the card.",
 		},
 		cardBackgroundColor: {
-			control: "select",
-			options: ["light blue", "light green", "gray", "white"],
+			control: "none",
+			options: ["bg-blue-100", "bg-teal-100", "bg-slate-50", "bg-white"],
 			description: "The background color of the card.",
 		},
 		cardBorderColor: {
-			control: "select",
-			options: ["blue", "green", "black", "none"],
+			control: "none",
+			options: ["border-blue-500", "border-teal-500", "border-slate-50", "border-none"],
 			description: "The color of the card border.",
 		},
 		cardBoxShadow: {
-			control: "boolean",
+			control: "none",
 			description: "Whether the card has box shadow or not.",
 		},
 		children: {
@@ -52,7 +58,7 @@ export default {
 	parameters: {
 		layout: "centered",
 	},
-} as Meta;
+} as Meta<CardTypes>;
 
 const Template: StoryFn<CardTypes> = (args) => <Card {...args} />;
 
@@ -60,22 +66,38 @@ 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: "semiRounded",
-	cardBorderColor: "blue",
-	cardBackgroundColor: "light blue",
+	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 = {
-	containerClasses: "w-1/2 max-sm:w-1/2overflow-hidden rounded-md",
 	key: DUMMYPRODUCTDATA[0].id,
-	cardBorderRadius: "semiRounded",
-	cardBorderColor: "green",
-	cardBackgroundColor: "light green",
-	cardBoxShadow: true,
-	children: <VerticalCardTemplate data={DUMMYPRODUCTDATA[1]} />,
+	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({});
@@ -83,9 +105,131 @@ 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: "cornered",
-	cardBorderColor: "green",
-	cardBackgroundColor: "green",
+	cardBorderRadius: "rounded-none",
+	cardBorderColor: "border-teal-500",
+	cardBackgroundColor: "bg-teal-500",
 	cardBoxShadow: true,
-	children: <CompassCardTemplate data={DUMMYCOMPASSPRODUCTDATA[0]} />,
+	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,20 +1,20 @@
 import { render, screen } from "@testing-library/react";
 import { describe, expect, beforeEach, test } from "vitest";
 import Card from "./Card";
-import { DUMMYCARDTESTDATA } from "./DUMMYPRODUCTDATA.json";
+import { DUMMYPRODUCTDATA } from "./DUMMYPRODUCTDATA.json";
 import CompassCardTemplate from "./templates/CompassCardTemplate";
 
 describe("<Card />", () => {
 	beforeEach(() => {
 		render(
 			<Card
-				key={DUMMYCARDTESTDATA[0].id}
+				key={DUMMYPRODUCTDATA[0].id}
 				cardBorderRadius="cornered"
 				cardBorderColor="green"
 				cardBackgroundColor="none"
 				cardBoxShadow={true}
 				containerClasses="w-1/2 max-sm:w-1/2"
-				children={<CompassCardTemplate data={DUMMYCARDTESTDATA[0]} />}
+				children={<CompassCardTemplate data={{ ...DUMMYPRODUCTDATA[0], imageBackgroundColor: "", textBackgroundColor: "" }} />}
 			/>
 		);
 	});

package/src/components/Card/Card.tsx

@@ -1,27 +1,23 @@
 import React from "react";
 import type { CardTypes } from "./Card.types";
-import { getCardStyleClasses } from "./cardClassNames";
 
 const Card: React.FC<CardTypes> = ({
 	children,
-	containerClasses,
-	cardBackgroundColor,
-	cardBorderColor,
-	cardBorderRadius,
-	cardBoxShadow,
+	containerClasses = "",
+	cardBackgroundColor = "bg-white",
+	cardBorderColor = "border-gray-300",
+	cardBorderRadius = "rounded-lg",
+	cardBoxShadow = true,
 }) => {
-	let cardStyleClasses = getCardStyleClasses(
-		cardBorderRadius,
-		cardBorderColor,
-		cardBackgroundColor,
-		cardBoxShadow
-	);
+	const cardStyleClasses = `
+		${cardBackgroundColor}
+		${cardBorderColor !== "none" ? `border ${cardBorderColor}` : ""}
+		${cardBorderRadius}
+		${cardBoxShadow ? true : ""}
+	`;
 
 	return (
-		<div
-			className={`${containerClasses} ${cardStyleClasses}`}
-			data-testid="card-container"
-		>
+		<div className={`${containerClasses} ${cardStyleClasses}`} data-testid="card-container">
 			{children}
 		</div>
 	);