@agilant/toga-blox 1.0.8 → 1.0.9

package/src/components/Card/templates/CategoryCardTemplate.tsx

@@ -0,0 +1,86 @@
+import React from "react";
+import Text from "../../Text/Text";
+import Image from "../../Image/Image";
+import { TagName } from "../../Text/Text.types";
+
+type DataTypes = {
+	id: string;
+	title: string;
+	link: string;
+	productCount: number;
+	imageBackgroundColor: string;
+	textBackgroundColor: string;
+	titleProps: {
+		tag: TagName;
+		size: string;
+		fontColor: string;
+		fontFamily: string;
+		additionalClasses: string;
+	};
+	imageUrl: string | null;
+	altText: string;
+};
+
+type CategoryCardTemplateProps = {
+	data: DataTypes;
+	containerClasses?: string;
+	imageContainerClasses?: string;
+	titleClasses?: string;
+	productCountClasses?: string;
+};
+
+const CategoryCardTemplate = ({
+	data,
+	containerClasses = "",
+	imageContainerClasses = "",
+	titleClasses = "",
+	productCountClasses = "",
+}: CategoryCardTemplateProps) => {
+	return (
+		<div className={`${containerClasses} p-4`}>
+			<a
+				href={data.link}
+				className={`${imageContainerClasses}`}
+			>
+				{data.imageUrl ? (
+					<Image
+						background={false}
+						src={data.imageUrl}
+						alt={data.altText}
+						additionalClasses="w-full h-full object-contain"
+					/>
+				) : (
+					<div className={`${data.imageBackgroundColor} flex items-center justify-center w-full h-full`}>
+						<Text
+							tag="p"
+							size="text-4xl"
+							text="🚧"
+							color="text-gray-300"
+							fontFamily=""
+						/>
+					</div>
+				)}
+			</a>
+			<div className={titleClasses}>
+				<Text
+					tag={data.titleProps.tag}
+					size={data.titleProps.size}
+					text={data.title}
+					color={data.titleProps.fontColor}
+					fontFamily={data.titleProps.fontFamily}
+					additionalClasses={`${data.titleProps.additionalClasses} font-bold`}
+				/>
+				<Text
+					tag="p"
+					size="text-sm"
+					text={`${data.productCount} products`}
+					color="text-gray-500"
+					fontFamily="font-sans"
+					additionalClasses={productCountClasses}
+				/>
+			</div>
+		</div>
+	);
+};
+
+export default CategoryCardTemplate;

package/src/components/Card/templates/CompassCardTemplate.tsx

@@ -4,7 +4,7 @@ import { TagName } from "../../Text/Text.types";
 
 type DataTypes = {
 	id: string;
-	title: string;
+	title?: string;
 	rating: number;
 	link: string;
 	linkTitle: boolean;

package/src/components/Card/templates/CounterContentCardTemplate.tsx

@@ -0,0 +1,200 @@
+import React, { useState } from "react";
+import Text from "../../Text/Text";
+import Image from "../../Image/Image";
+import Badge from "../../Badge/Badge";
+import { TagName } from "../../Text/Text.types";
+import CounterButton from "../../CounterButton/CounterButton";
+import { getFontAwesomeIcon } from "../../../utils/getFontAwesomeIcon";
+import FormButton from "../../FormButton";
+
+type DataTypes = {
+	id: string;
+	title: string;
+	rating: number;
+	link: string;
+	inStock: boolean;
+	inStockProps: {
+		tag: TagName;
+		size: string;
+		fontColor: string;
+		fontFamily: string;
+		inStockIcon: string;
+		outOfStockIcon: string;
+		additionalClasses: string;
+	};
+	linkTitle: boolean;
+	identifier: string;
+	titleProps: {
+		tag: TagName;
+		size: string;
+		fontColor: string;
+		fontFamily: string;
+		additionalClasses: string;
+	};
+	price: string;
+	priceProps: {
+		tag: TagName;
+		size: string;
+		fontColor: string;
+		fontFamily: string;
+		additionalClasses: string;
+	};
+	imageUrl: string | null;
+	altText: string;
+	buttonProps: {
+		text: string;
+		as: string;
+		size: string;
+		fontColor: string;
+		borderColor: string;
+		shape: string;
+		color: string;
+		hoverBackground?: string;
+		additionalClasses: string;
+	};
+	badgeText: string;
+	description: string;
+};
+
+const truncateDescription = (description: string, maxLength: number) => {
+	if (description.length > maxLength) {
+		return description.slice(0, maxLength) + "...";
+	}
+	return description;
+};
+
+const CounterContentCardTemplate = ({ data }: { data: DataTypes }) => {
+	const [count, setCount] = useState(0);
+	const [inCart, setInCart] = useState(false);
+
+	const handleIncrementClick = () => {
+		setCount((prevCount) => prevCount + 1);
+	};
+
+	const handleDecrementClick = () => {
+		if (count === 1) {
+			setInCart(false);
+			setCount(0);
+		} else {
+			setCount((prevCount) => Math.max(1, prevCount - 1)); // Prevent going below 1
+		}
+	};
+
+	const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		const value = parseInt(e.target.value, 10);
+		if (!isNaN(value) && value > 0) {
+			setCount(value);
+		}
+	};
+
+	const handleAddToCartClick = () => {
+		setInCart(true);
+		setCount(1);
+	};
+
+	const handleDeleteClick = () => {
+		setInCart(false);
+		setCount(0);
+	};
+
+	return (
+		<div className="flex flex-col items-start w-full sm:w-[300px] h-auto sm:h-[350px] border border-[#DFE4EA] bg-white rounded-lg relative p-4 sm:p-4 hover:border-teal-600 hover:shadow-inner">
+			<div className="absolute top-3 left-3">
+				<Badge
+					text={
+						<Text
+							color=""
+							fontFamily="font-serif"
+							tag="p"
+							text={data.badgeText}
+							size="text-xs sm:text-sm"
+						/>
+					}
+					type="span"
+					hoverColor=""
+					backgroundColor="bg-green-100"
+					additionalClasses="flex items-center justify-center gap-1 px-2 py-1 rounded-md border-none"
+					badgeContainerClasses="text-green-800"
+				/>
+			</div>
+			<div className="flex justify-center items-center mt-4 w-full">
+				<Image
+					background={false}
+					src={data.imageUrl}
+					alt={data.altText}
+					additionalClasses="w-[100px] sm:w-[120px] h-[100px] sm:h-[120px] object-contain"
+				/>
+			</div>
+			<div className="flex flex-col items-start w-full mt-4">
+				<Text
+					tag={data.titleProps.tag as TagName}
+					size="text-md"
+					text={truncateDescription(data.title, 52)}
+					color={data.titleProps.fontColor}
+					fontFamily={data.titleProps.fontFamily}
+					additionalClasses={`${data.titleProps.additionalClasses} text-left font-bold`}
+				/>
+				<Text
+					tag="span"
+					size="text-xs sm:text-sm"
+					text={data.identifier}
+					color="text-gray-500"
+					fontFamily="font-sans"
+					additionalClasses="text-left mt-1"
+				/>
+				<Text
+					tag="p"
+					size="text-xs sm:text-sm"
+					text={truncateDescription(data.description, 52)}
+					color="text-gray-700"
+					fontFamily="font-sans"
+					additionalClasses="text-left mt-2"
+				/>
+			</div>
+			<div className="flex justify-between items-center w-full mt-4 sm:mt-auto">
+				<Text
+					tag={data.priceProps.tag as TagName}
+					size="text-sm sm:text-md"
+					text={data.price}
+					color={data.priceProps.fontColor}
+					fontFamily={data.priceProps.fontFamily}
+					additionalClasses={data.priceProps.additionalClasses}
+				/>
+				<div className="flex items-center gap-2 min-w-[120px] sm:min-w-[150px] justify-end">
+					{inCart ? (
+						<>
+							<FormButton
+								additionalClasses="w-6 sm:w-8 h-6 sm:h-8 flex items-center justify-center text-red-600"
+								icon={getFontAwesomeIcon("trash")}
+								onClick={handleDeleteClick}
+							/>
+							<CounterButton
+								count={count}
+								onIncrementClick={handleIncrementClick}
+								onDecrementClick={handleDecrementClick}
+								onInputChange={handleInputChange}
+								containerClassName="flex items-center border border-gray-300 rounded-md overflow-hidden"
+								inputClassName="w-8 h-8 text-center text-xs sm:text-sm border-none outline-none bg-white"
+								buttonClassName="w-8 h-8 flex items-center justify-center text-gray-600"
+								iconClasses="fill-current text-gray-600"
+							/>
+						</>
+					) : (
+						<FormButton
+							text="Add to Cart"
+							backgroundColor="bg-teal-600"
+							fontColor="text-white"
+							size="text-xs sm:text-sm"
+							shape="rounded-md"
+							borderColor="border-none"
+							additionalClasses="w-[100px] sm:w-[120px] h-[32px] sm:h-[40px] hover:bg-teal-800"
+							onClick={handleAddToCartClick}
+						/>
+					)}
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default CounterContentCardTemplate;

package/src/components/Card/templates/ItemCardTemplate.tsx

@@ -0,0 +1,155 @@
+import React from "react";
+import FormButton from "../../FormButton/FormButton";
+import Text from "../../Text/Text";
+import Image from "../../Image/Image";
+import Badge from "../../Badge/Badge";
+import { TagName } from "../../Text/Text.types";
+
+type DataTypes = {
+	id: string;
+	title: string;
+	rating: number;
+	link: string;
+	inStock: boolean;
+	inStockProps: {
+		tag: TagName;
+		size: string;
+		fontColor: string;
+		fontFamily: string;
+		inStockIcon: string;
+		outOfStockIcon: string;
+		additionalClasses: string;
+	};
+	linkTitle: boolean;
+	identifier: string;
+	titleProps: {
+		tag: TagName;
+		size: string;
+		fontColor: string;
+		fontFamily: string;
+		additionalClasses: string;
+	};
+	price: string;
+	priceProps: {
+		tag: TagName;
+		size: string;
+		fontColor: string;
+		fontFamily: string;
+		additionalClasses: string;
+	};
+	imageUrl: string | null;
+	altText: string;
+	buttonProps: {
+		text: string;
+		as: string;
+		size: string;
+		fontColor: string;
+		borderColor: string;
+		shape: string;
+		color: string;
+		hoverBackground?: string;
+		additionalClasses: string;
+	};
+	badgeText: string;
+	description: string;
+};
+
+type ItemCardTemplateProps = {
+	data: DataTypes;
+	containerClasses?: string;
+	imageContainerClasses?: string;
+	titleContainerClasses?: string;
+	descriptionContainerClasses?: string;
+	priceContainerClasses?: string;
+	buttonContainerClasses?: string;
+	badgeContainerClasses?: string;
+};
+
+const ItemCardTemplate = ({
+	data,
+	containerClasses = "",
+	imageContainerClasses = "",
+	titleContainerClasses = "",
+	descriptionContainerClasses = "",
+	priceContainerClasses = "",
+	buttonContainerClasses = "",
+	badgeContainerClasses = "",
+}: ItemCardTemplateProps) => {
+	return (
+		<div className={`${containerClasses}`}>
+			<div className={badgeContainerClasses}>
+				<Badge
+					text={
+						<Text
+							color=""
+							fontFamily="font-serif"
+							tag="p"
+							text={data.badgeText}
+							size="text-xs sm:text-sm"
+						/>
+					}
+					type="span"
+					hoverColor=""
+					additionalClasses="flex items-center justify-center gap-[4px] px-[8px] py-[4px] sm:px-[14px] sm:py-[8px] rounded-md border-none"
+					backgroundColor="bg-green-100"
+					badgeContainerClasses="text-green-800"
+				/>
+			</div>
+			<div className={`flex justify-center items-center ${imageContainerClasses}`}>
+				<Image
+					background={false}
+					src={data.imageUrl}
+					alt={data.altText}
+					additionalClasses="object-contain max-h-full"
+				/>
+			</div>
+			<div className={`${titleContainerClasses}`}>
+				<Text
+					tag={data.titleProps.tag as TagName}
+					size="text-sm sm:text-md"
+					text={data.title}
+					color={data.titleProps.fontColor}
+					fontFamily={data.titleProps.fontFamily}
+					additionalClasses={data.titleProps.additionalClasses}
+				/>
+				<Text
+					tag="span"
+					size="text-xs sm:text-sm"
+					text={data.identifier}
+					color="text-gray-500"
+					fontFamily="font-sans"
+					additionalClasses="mb-1 sm:mb-2"
+				/>
+				<Text
+					tag="span"
+					size="text-xs sm:text-sm"
+					text={data.description}
+					color="text-gray-500"
+					fontFamily="font-sans"
+					additionalClasses="mb-2 sm:mb-4"
+				/>
+				<div className={`${priceContainerClasses}`}>
+					<Text
+						tag={data.priceProps.tag as TagName}
+						size="text-sm sm:text-md"
+						text={data.price}
+						color={data.priceProps.fontColor}
+						fontFamily={data.priceProps.fontFamily}
+						additionalClasses={data.priceProps.additionalClasses}
+					/>
+					<FormButton
+						text={data.buttonProps.text}
+						backgroundColor={data.buttonProps.color}
+						fontColor={data.buttonProps.fontColor}
+						size="text-xs sm:text-md"
+						shape={data.buttonProps.shape}
+						borderColor={data.buttonProps.borderColor}
+						additionalClasses={`${buttonContainerClasses} hover:bg-teal-800`}
+					/>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default ItemCardTemplate;

package/src/components/Card/templates/KitContentCardTemplate.tsx

@@ -0,0 +1,128 @@
+import React from "react";
+import FormButton from "../../FormButton/FormButton";
+import Text from "../../Text/Text";
+import Image from "../../Image/Image";
+import Badge from "../../Badge/Badge";
+import { TagName } from "../../Text/Text.types";
+
+type DataTypes = {
+	id: string;
+	title: string;
+	rating: number;
+	link: string;
+	inStock: boolean;
+	inStockProps: {
+		tag: TagName;
+		size: string;
+		fontColor: string;
+		fontFamily: string;
+		inStockIcon: string;
+		outOfStockIcon: string;
+		additionalClasses: string;
+	};
+	linkTitle: boolean;
+	identifier: string;
+	titleProps: {
+		tag: TagName;
+		size: string;
+		fontColor: string;
+		fontFamily: string;
+		additionalClasses: string;
+	};
+	price: string;
+	priceProps: {
+		tag: TagName;
+		size: string;
+		fontColor: string;
+		fontFamily: string;
+		additionalClasses: string;
+	};
+	imageUrl: string | null;
+	altText: string;
+	buttonProps: {
+		text: string;
+		as: string;
+		size: string;
+		fontColor: string;
+		borderColor: string;
+		shape: string;
+		color: string;
+		hoverBackground?: string;
+		additionalClasses: string;
+	};
+	badgeText: string;
+	description: string;
+};
+
+const KitContentCardTemplate = ({ data }: { data: DataTypes }) => {
+	return (
+		<div className="flex flex-col items-start w-full sm:w-[244px] h-auto sm:h-[255px] border border-[#DFE4EA] bg-white rounded-lg relative p-3 hover:border-1 hover:border-teal-600 hover:shadow-inner">
+			<div className="absolute top-2 left-2">
+				<Badge
+					text={
+						<Text
+							color=""
+							fontFamily="font-serif"
+							tag="p"
+							text={data.badgeText}
+							size="text-xs"
+						/>
+					}
+					type="span"
+					hoverColor=""
+					backgroundColor="bg-green-100"
+					additionalClasses="flex items-center justify-center gap-1 px-2 py-1 rounded-md border-none"
+					badgeContainerClasses="text-yellow-800"
+				/>
+			</div>
+			<div className="flex flex-col items-center gap-2 mt-6 w-full">
+				<Image
+					background={false}
+					src={data.imageUrl}
+					alt={data.altText}
+					additionalClasses="w-[80px] h-[80px] sm:w-[100px] sm:h-[100px] object-contain"
+				/>
+			</div>
+			<div className="flex flex-col items-start w-full mt-2">
+				<Text
+					tag={data.titleProps.tag as TagName}
+					size="text-xs sm:text-sm"
+					text={data.title}
+					color={data.titleProps.fontColor}
+					fontFamily={data.titleProps.fontFamily}
+					additionalClasses={`${data.titleProps.additionalClasses} text-left`}
+				/>
+				<Text
+					tag="span"
+					size="text-xs"
+					text={data.identifier}
+					color="text-slate-400"
+					fontFamily="font-sans"
+					additionalClasses="text-left"
+				/>
+			</div>
+			<div className="flex items-end justify-between w-full mt-auto">
+				<Text
+					tag={data.priceProps.tag as TagName}
+					size="text-xs sm:text-sm"
+					text={data.price}
+					color={data.priceProps.fontColor}
+					fontFamily={data.priceProps.fontFamily}
+					additionalClasses={data.priceProps.additionalClasses}
+				/>
+				<FormButton
+					text={data.buttonProps.text}
+					fontColor={data.buttonProps.fontColor}
+					backgroundColor="bg-slate-200"
+					size="text-xs"
+					shape={data.buttonProps.shape}
+					borderColor={data.buttonProps.borderColor}
+					additionalClasses="px-2 py-1 cursor-not-allowed"
+					isDisabled={true}
+				/>
+			</div>
+		</div>
+	);
+};
+
+export default KitContentCardTemplate;

package/src/components/Card/templates/ShippingAddressCardTemplate.tsx

@@ -0,0 +1,111 @@
+import React from "react";
+import FormButton from "../../FormButton/FormButton";
+import Text from "../../Text/Text";
+import Image from "../../Image/Image";
+import Badge from "../../Badge/Badge";
+
+type DataTypes = {
+	id: string;
+	title: string;
+	addressLine1: string;
+	addressLine2: string;
+	addressLine3: string;
+	imageUrl: string | null;
+	altText: string;
+	badgeText: string;
+};
+
+type ShippingAddressCardTemplateProps = {
+	data: DataTypes;
+};
+
+const ShippingAddressCardTemplate = ({ data }: ShippingAddressCardTemplateProps) => {
+	return (
+		<div className="flex flex-col sm:flex-row p-4 sm:p-6 m-4 sm:m-20 border border-[#00B9A8] bg-white rounded-lg w-full relative hover:border-teal-500 hover:shadow-inner">
+			<div className="flex-shrink-0 w-full sm:w-auto mb-4 sm:mb-0">
+				<Image
+					background={false}
+					src={data.imageUrl}
+					alt={data.altText}
+					additionalClasses="w-full h-auto sm:h-auto object-contain"
+				/>
+			</div>
+			<div className="flex flex-col w-full h-full sm:ml-5">
+				<Badge
+					text={
+						<Text
+							color="text-green-800"
+							fontFamily="font-serif"
+							tag="span"
+							text={data.badgeText}
+							size="text-xs"
+						/>
+					}
+					type="span"
+					hoverColor=""
+					backgroundColor="bg-green-100"
+					badgeContainerClasses="w-[fit-content] h-[fit-content]"
+					additionalClasses="flex items-center px-2 py-1 rounded-md border-none absolute top-2 left-2 sm:static"
+				/>
+				<div className="mt-2 sm:mt-0">
+					<Text
+						tag="h2"
+						size="text-lg"
+						text={data.title}
+						color="text-black"
+						fontFamily="font-serif"
+						additionalClasses="font-bold"
+					/>
+					<div className="mt-1">
+						<Text
+							tag="span"
+							size="text-sm"
+							text={data.addressLine1}
+							color="text-slate-400"
+							fontFamily="font-sans"
+							additionalClasses="block"
+						/>
+						<Text
+							tag="span"
+							size="text-sm"
+							text={data.addressLine2}
+							color="text-slate-400"
+							fontFamily="font-sans"
+							additionalClasses="block"
+						/>
+						<Text
+							tag="span"
+							size="text-sm"
+							text={data.addressLine3}
+							color="text-slate-400"
+							fontFamily="font-sans"
+							additionalClasses="block"
+						/>
+					</div>
+				</div>
+				<div className="flex flex-row sm:flex-row gap-2 mt-4 sm:mt-20 w-full sm:w-auto">
+					<FormButton
+						text="Edit"
+						backgroundColor="bg-teal-600"
+						fontColor="text-white"
+						size="text-xs sm:text-sm"
+						shape="rounded-md"
+						borderColor="border-none"
+						additionalClasses="px-2 py-1 sm:px-4 sm:py-2 hover:bg-teal-800"
+					/>
+					<FormButton
+						text="Delete"
+						backgroundColor="bg-transparent"
+						fontColor="text-red-600"
+						size="text-xs sm:text-sm"
+						shape="rounded-md"
+						borderColor="border border-red-600"
+						additionalClasses="px-2 py-1 sm:px-4 sm:py-2 hover:bg-[#FFEBEE]"
+					/>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default ShippingAddressCardTemplate;