@agilant/toga-blox 1.0.9 → 1.0.11

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

@@ -1,128 +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;
-};
-
-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

@@ -1,111 +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";
-
-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;

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

@@ -1,169 +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 VerticalCardTemplateProps = {
-	data: DataTypes;
-	containerClasses?: string;
-	imageContainerClasses?: string;
-	titleContainerClasses?: string;
-	descriptionContainerClasses?: string;
-	priceContainerClasses?: string;
-	buttonContainerClasses?: string;
-	badgeContainerClasses?: string;
-};
-
-const VerticalCardTemplate = ({
-	data,
-	containerClasses = "",
-	imageContainerClasses = "",
-	titleContainerClasses = "",
-	descriptionContainerClasses = "",
-	priceContainerClasses = "",
-	buttonContainerClasses = "",
-	badgeContainerClasses = "",
-}: VerticalCardTemplateProps) => {
-	return (
-		<div className={`${containerClasses} p-4`}>
-			<div className={badgeContainerClasses}>
-				<Badge
-					text={
-						<Text
-							color=""
-							fontFamily="font-serif"
-							tag="p"
-							text={data.badgeText}
-							size="text-md"
-						/>
-					}
-					type="span"
-					hoverColor=""
-					additionalClasses="flex items-center justify-center gap-1 px-3 py-2 rounded-md border-none"
-					badgeContainerClasses="text-slate-800"
-					backgroundColor="bg-slate-100"
-				/>
-			</div>
-			<div className={`relative ${imageContainerClasses}`}>
-				<Image
-					background={false}
-					src={data.imageUrl}
-					alt={data.altText}
-					additionalClasses="w-full h-full object-contain"
-				/>
-			</div>
-			<div className={titleContainerClasses}>
-				<div className="flex flex-col">
-					<Text
-						tag={data.titleProps.tag as TagName}
-						size={data.titleProps.size}
-						text={data.title}
-						color={data.titleProps.fontColor}
-						fontFamily={data.titleProps.fontFamily}
-						additionalClasses={data.titleProps.additionalClasses}
-					/>
-				</div>
-				<div className={descriptionContainerClasses}>
-					<div className="relative flex items-center gap-2">
-						<div className="w-[30px] h-[30px] rounded-full border border-gray-300 flex items-center justify-center overflow-hidden z-10">
-							<Image
-								background={false}
-								src="../../../assets/compass-card-image-4.png"
-								alt="Icon 1"
-								additionalClasses="object-cover w-full h-full"
-							/>
-						</div>
-						<div className="w-[30px] h-[30px] rounded-full border border-gray-300 flex items-center justify-center overflow-hidden -ml-[20px]">
-							<Image
-								background={false}
-								src="../../../assets/compass-card-image-2.png"
-								alt="Icon 2"
-								additionalClasses="object-cover w-full h-full"
-							/>
-						</div>
-						<Text
-							tag="span"
-							size="text-sm"
-							text={data.description}
-							color="text-gray-500"
-							fontFamily="font-sans"
-							additionalClasses="ml-4"
-						/>
-					</div>
-				</div>
-				<div className={priceContainerClasses}>
-					<Text
-						tag={data.priceProps.tag as TagName}
-						size={data.priceProps.size}
-						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={data.buttonProps.size}
-						shape={data.buttonProps.shape}
-						borderColor={data.buttonProps.borderColor}
-						additionalClasses={buttonContainerClasses}
-					/>
-				</div>
-			</div>
-		</div>
-	);
-};
-
-export default VerticalCardTemplate;

package/src/components/CounterButton/CounterButton.stories.tsx

@@ -1,91 +0,0 @@
-import { ChangeEvent, useState } from "react";
-import { Meta, StoryFn } from "@storybook/react";
-import CounterButton from "../CounterButton/CounterButton";
-import { CounterButtonTypes } from "../CounterButton/CounterButton.types";
-
-export default {
-	title: "Components/CounterButton",
-	component: CounterButton,
-	argTypes: {
-		count: {
-			control: "none",
-			description:
-				"The initial count value to be displayed in the input field.",
-		},
-		containerClassName: {
-			control: "none",
-			description:
-				"Additional classes for styling the outer container of the counter.",
-		},
-		inputClassName: {
-			control: "none",
-			description: "Additional classes for styling the input field.",
-		},
-		buttonClassName: {
-			control: "none",
-			description:
-				"Additional classes for styling the increment and decrement buttons.",
-		},
-		iconClasses: {
-			control: "none",
-			description: "Additional classes for styling the icons.",
-		},
-		onIncrementClick: {
-			table: { disable: true },
-			control: "none",
-			description: "Function to handle increment button click.",
-		},
-		onDecrementClick: {
-			table: { disable: true },
-			control: "none",
-			description: "Function to handle decrement button click.",
-		},
-	},
-	tags: ["autodocs"],
-	parameters: {
-		layout: "centered",
-	},
-} as Meta;
-
-const Template: StoryFn<CounterButtonTypes> = (args) => {
-	const [count, setCount] = useState(args.count);
-
-	const handleIncrement = () => {
-		setCount((prevCount) => prevCount + 1);
-	};
-
-	const handleDecrement = () => {
-		setCount((prevCount) => prevCount - 1);
-	};
-
-	const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
-		const newCount =
-			e.target.value === "" || e.target.value === null
-				? 0
-				: parseInt(e.target.value, 10);
-		if (!isNaN(newCount) && newCount >= 0) {
-			setCount(newCount);
-		}
-	};
-
-	return (
-		<CounterButton
-			{...args}
-			count={count}
-			onIncrementClick={handleIncrement}
-			onDecrementClick={handleDecrement}
-			onInputChange={handleInputChange}
-		/>
-	);
-};
-
-export const Default = Template.bind({});
-Default.args = {
-	count: 1,
-	containerClassName:
-		"flex items-center border border-gray-300 rounded-lg overflow-hidden ",
-	inputClassName:
-		"w-full h-full text-center text-xl border-none outline-none m-0 p-0 bg-white",
-	buttonClassName: "w-12 h-12 flex items-center justify-center",
-	iconClasses: "fill-current text-blue-600",
-};

package/src/components/CounterButton/CounterButton.tsx

@@ -1,100 +0,0 @@
-import React from "react";
-import FormButton from "../FormButton/FormButton";
-import { CounterButtonTypes } from "./CounterButton.types";
-import Text from "../Text/Text";
-
-const CounterButton: React.FC<CounterButtonTypes> = ({
-	count,
-	containerClassName,
-	inputClassName,
-	buttonClassName,
-	iconClasses,
-	onIncrementClick,
-	onDecrementClick,
-	onInputChange,
-}) => {
-	return (
-		<div className={containerClassName}>
-			<FormButton
-				icon={
-					<svg
-						width={12}
-						height={12}
-						viewBox="0 0 12 12"
-						fill="none"
-						xmlns="http://www.w3.org/2000/svg"
-						className={iconClasses}
-					>
-						<path d="M11.0626 6.43135H0.937598C0.712598 6.43135 0.506348 6.24385 0.506348 6.0001C0.506348 5.7751 0.693848 5.56885 0.937598 5.56885H11.0626C11.2876 5.56885 11.4938 5.75635 11.4938 6.0001C11.4938 6.2251 11.2876 6.43135 11.0626 6.43135Z" />
-					</svg>
-				}
-				text={
-					<Text
-						size={""}
-						color={""}
-						text={"Decrement"}
-						fontFamily={""}
-						additionalClasses="sr-only"
-					/>
-				}
-				backgroundColor="clear"
-				fontColor="black"
-				size="md"
-				borderColor="none"
-				shape="cornered"
-				additionalClasses={buttonClassName}
-				onClick={onDecrementClick}
-			/>
-			<div
-				className={`flex justify-center items-center border-x border-gray-300`}
-			>
-				<input
-					type="text"
-					value={count}
-					className={inputClassName}
-					onChange={onInputChange}
-					onFocus={(e) => e.target.select()}
-				/>
-			</div>
-			<FormButton
-				icon={
-					<svg
-						width={12}
-						height={12}
-						viewBox="0 0 12 12"
-						fill="none"
-						xmlns="http://www.w3.org/2000/svg"
-						className={iconClasses}
-					>
-						<g clipPath="url(#clip0_1032_24236)">
-							<path d="M11.2501 5.5876H6.43135V0.750098C6.43135 0.525098 6.24385 0.318848 6.0001 0.318848C5.7751 0.318848 5.56885 0.506348 5.56885 0.750098V5.5876H0.750098C0.525098 5.5876 0.318848 5.7751 0.318848 6.01885C0.318848 6.24385 0.506348 6.4501 0.750098 6.4501H5.5876V11.2501C5.5876 11.4751 5.7751 11.6813 6.01885 11.6813C6.24385 11.6813 6.4501 11.4938 6.4501 11.2501V6.43135H11.2501C11.4751 6.43135 11.6813 6.24385 11.6813 6.0001C11.6813 5.7751 11.4751 5.5876 11.2501 5.5876Z" />
-						</g>
-						<defs>
-							<clipPath id="clip0_1032_24236">
-								<rect width={12} height={12} fill="white" />
-							</clipPath>
-						</defs>
-					</svg>
-				}
-				text={
-					<Text
-						size={""}
-						color={""}
-						text={"Increment"}
-						fontFamily={""}
-						additionalClasses="sr-only"
-					/>
-				}
-				backgroundColor="clear"
-				fontColor="black"
-				size="md"
-				borderColor="none"
-				shape="cornered"
-				additionalClasses={buttonClassName}
-				onClick={onIncrementClick}
-			/>
-		</div>
-	);
-};
-
-export default CounterButton;

package/src/components/CounterButton/CounterButton.types.ts

@@ -1,12 +0,0 @@
-import { ChangeEvent, MouseEvent } from "react";
-
-export interface CounterButtonTypes {
-	count: number;
-	containerClassName?: string;
-	inputClassName?: string;
-	buttonClassName?: string;
-	iconClasses?: string;
-	onIncrementClick: () => void;
-	onDecrementClick: () => void;
-	onInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-}

package/src/components/Description/Description.stories.tsx

@@ -1,67 +0,0 @@
-import React from 'react';
-import { Meta, StoryFn } from '@storybook/react';
-import Description from './Description';
-import { DescriptionProps } from './Description.types';
-
-export default {
-	title: 'Components/Description',
-	component: Description,
-	tags: ['autodocs'],
-	parameters: {
-		layout: 'centered',
-	},
-	argTypes: {
-		containerClassName: {
-			control: 'none',
-			description: 'Styles for the container.',
-		},
-		titleClassName: {
-			control: 'none',
-			description: 'Styles for the title.',
-		},
-		contentClassName: {
-			control: 'none',
-			description: 'Styles for the content.',
-		},
-		title: {
-			control: 'none',
-			description: 'Title of the description.',
-		},
-		children: {
-			control: 'none',
-			description: 'Content of the description.',
-		},
-		style: {
-			control: 'none',
-			description: 'Styles for the description.',
-			table: { disable: true }
-		}
-	},
-} as Meta;
-
-const Template: StoryFn<DescriptionProps> = (args) => <Description {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-	title: 'Sample Title',
-	children: <span>This is a sample description content.</span>,
-	containerClassName: 'p-4 sm:p-6 md:p-8 lg:p-10',
-	titleClassName: 'text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold mb-4',
-	contentClassName: 'text-base sm:text-lg md:text-xl lg:text-2xl',
-};
-
-export const WithCustomStyles = Template.bind({});
-WithCustomStyles.args = {
-	title: 'Styled Title',
-	children: (
-		<span>
-			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-			Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
-			dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
-			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-		</span>
-	),
-	containerClassName: 'p-4 sm:p-6 md:p-8 lg:p-10 bg-gray-100',
-	titleClassName: 'text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold mb-4 text-blue-500',
-	contentClassName: 'text-base sm:text-lg md:text-xl lg:text-2xl text-blue-500',
-};

package/src/components/Description/Description.tsx

@@ -1,13 +0,0 @@
-import React from 'react';
-import { DescriptionProps } from './Description.types';
-
-const Description: React.FC<DescriptionProps> = ({ title, children, containerClassName, titleClassName, contentClassName }) => {
-	return (
-		<div className={`${containerClassName}`}>
-			<div className={`${titleClassName}`}>{title}</div>
-			<div className={`${contentClassName}`}>{children}</div>
-		</div>
-	);
-};
-
-export default Description;

package/src/components/Description/Description.types.ts

@@ -1,9 +0,0 @@
-import { ReactNode } from "react";
-
-export interface DescriptionProps {
-	title: string;
-	children: ReactNode;
-	containerClassName?: string;
-	titleClassName?: string;
-	contentClassName?: string;
-}