@agilant/toga-blox 1.0.9 → 1.0.11

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

@@ -1,86 +0,0 @@
-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

@@ -1,58 +0,0 @@
-import Text from "../../Text/Text";
-import Image from "../../Image/Image";
-import { TagName } from "../../Text/Text.types";
-
-type DataTypes = {
-	id: string;
-	title?: string;
-	rating: number;
-	link: string;
-	linkTitle: boolean;
-	imageBackgroundColor: string;
-	textBackgroundColor: string;
-	titleProps: {
-		tag: TagName;
-		size: string;
-		fontColor: string;
-		fontFamily: string;
-		additionalClasses: string;
-	};
-	imageUrl: string | null;
-	altText: string;
-};
-
-const CompassCardTemplate = ({ data }: { data: DataTypes }) => {
-	return (
-		<a
-			href="#"
-			className={`flex flex-col justify-center w-full max-sm:w-full h-full`}
-			data-testid="card"
-		>
-			<div
-				className={data.imageBackgroundColor}
-				data-testid="card-image-container"
-			>
-				<Image
-					background={false}
-					src={data.imageUrl}
-					alt={data.altText}
-				/>
-			</div>
-			<div
-				data-testid="card-text-container"
-				className={`flex flex-col w-full p-2 h-full items-center justify-center max-sm:text-xs ${data.textBackgroundColor}`}
-			>
-				<Text
-					tag={data.titleProps.tag as TagName}
-					size={data.titleProps.size}
-					text={data.title}
-					color={"black"}
-					fontFamily={""}
-					additionalClasses={data.titleProps.additionalClasses}
-				/>
-			</div>
-		</a>
-	);
-};
-
-export default CompassCardTemplate;

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

@@ -1,200 +0,0 @@
-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/HorizontalCardTemplate.tsx

@@ -1,184 +0,0 @@
-import FormButton from "../../FormButton/FormButton";
-import Text from "../../Text/Text";
-import Image from "../../Image/Image";
-import { TagName } from "../../Text/Text.types";
-import { getFontAwesomeIcon } from "../../../utils/getFontAwesomeIcon";
-
-type DataTypes = {
-	id: string;
-	title: string;
-	rating: number;
-	ratingProps: {
-		tag: TagName;
-		size: string;
-		fontColor: string;
-		fontFamily: string;
-		additionalClasses: string;
-	};
-	link: string;
-	inStock: boolean;
-	inStockProps: {
-		tag: TagName;
-		size: string;
-		fontColor: string;
-		fontFamily: string;
-		inStockIcon: string;
-		outOfStockIcon: string;
-		additionalClasses: string;
-	};
-	linkTitle: boolean;
-	identifier: string;
-	identifierProps: {
-		tag: TagName;
-		size: string;
-		fontColor: string;
-		fontFamily: string;
-		additionalClasses: 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;
-	};
-};
-
-const HorizontalCardTemplate = ({ data }: { data: DataTypes }) => {
-	return (
-		<>
-			<a href="#" className={`flex justify-center w-72  max-sm:w-full`}>
-				<Image
-					background={false}
-					src={data.imageUrl}
-					alt={data.altText}
-				/>
-			</a>
-			<div className="flex flex-col justify-between w-3/4 h-full p-3 max-sm:w-full">
-				<div className="flex h-full mb-12 max-sm:mb-2">
-					<a href={data.link}>
-						<Text
-							tag={data.titleProps.tag as TagName}
-							size={data.titleProps.size}
-							text={data.title}
-							color={"black"}
-							fontFamily={""}
-							additionalClasses={
-								data.titleProps.additionalClasses
-							}
-						/>
-					</a>
-				</div>
-				<div
-					className={`flex justify-between mb-12  max-sm:flex-col max-sm:items-end max-sm:mb-2`}
-				>
-					<div className="flex items-center space-x-1 rtl:space-x-reverse max-sm:mb-1">
-						<Text
-							tag={data.identifierProps.tag as TagName}
-							size={data.identifierProps.size}
-							text={data.identifier}
-							color={""}
-							fontFamily={""}
-							additionalClasses={
-								data.identifierProps.additionalClasses
-							}
-						/>
-					</div>
-					<div className="flex items-center justify-center px-2 max-sm:mb-1">
-						<div className="pr-2 text-xs">
-							{data.inStock === true
-								? getFontAwesomeIcon(
-									data.inStockProps.inStockIcon
-								)
-								: getFontAwesomeIcon(
-									data.inStockProps.outOfStockIcon
-								)}
-						</div>
-						<Text
-							tag={data.inStockProps.tag as TagName}
-							size={data.inStockProps.size}
-							text={
-								data.inStock === true
-									? "In Stock"
-									: "Out of Stock"
-							}
-							color={"black"}
-							fontFamily={""}
-							additionalClasses={
-								data.inStockProps.additionalClasses
-							}
-						/>
-					</div>
-					<div className="flex px-2 items-center space-x-1 rtl:space-x-reverse max-sm:mb-1">
-						<svg
-							className="w-4 h-4 text-yellow-300"
-							aria-hidden="true"
-							xmlns="http://www.w3.org/2000/svg"
-							fill="currentColor"
-							viewBox="0 0 22 20"
-						>
-							<path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z" />
-						</svg>
-						<Text
-							tag={data.ratingProps.tag as TagName}
-							size={data.ratingProps.size}
-							text={data.rating}
-							color={""}
-							fontFamily={""}
-							additionalClasses={
-								data.ratingProps.additionalClasses
-							}
-						/>
-					</div>
-				</div>
-				<div className="flex items-end flex-col w-full max-sm:flex-row max-sm:justify-between">
-					<div className="px-2">
-						<Text
-							tag={data.priceProps.tag as TagName}
-							size={data.priceProps.size}
-							text={data.price}
-							color={"black"}
-							fontFamily={""}
-							additionalClasses={
-								data.priceProps.additionalClasses
-							}
-						/>
-					</div>
-					<FormButton
-						text={data.buttonProps.text}
-						backgroundColor={data.buttonProps.color}
-						fontColor={data.buttonProps.fontColor}
-						size={data.buttonProps.size}
-						shape={data.buttonProps.shape}
-						borderColor={data.buttonProps.borderColor}
-						hoverBackground={data.buttonProps.hoverBackground}
-						additionalClasses="w-24"
-					/>
-				</div>
-			</div>
-		</>
-	);
-};
-
-export default HorizontalCardTemplate;

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

@@ -1,155 +0,0 @@
-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;