@agilant/toga-blox 1.0.8 → 1.0.9

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

@@ -1,8 +1,9 @@
+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";
-import { getFontAwesomeIcon } from "../../../utils/getFontAwesomeIcon";
 
 type DataTypes = {
 	id: string;
@@ -46,108 +47,122 @@ type DataTypes = {
 		borderColor: string;
 		shape: string;
 		color: string;
-		hoverBackground: string;
+		hoverBackground?: string;
 		additionalClasses: string;
 	};
+	badgeText: string;
+	description: string;
 };
 
-const VerticalCardTemplate = ({ data }: { data: DataTypes }) => {
+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 (
-		<>
-			<a href="#" className={`flex justify-center w-full max-sm:w-full`}>
+		<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"
 				/>
-			</a>
-			<div className="flex flex-col w-full p-2 justify-between">
-				<div className="flex h-full mb-8 max-sm:mb-4">
-					<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={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={`flex w-full items-center justify-between mb-2 max-sm:items-end max-sm:mb-4`}
-				>
-
-					<div className="flex items-center justify-center px-2">
-						<div className="pr-2 text-xs">
-							{data.inStock === true
-								? getFontAwesomeIcon(
-									data.inStockProps.inStockIcon
-								)
-								: getFontAwesomeIcon(
-									data.inStockProps.outOfStockIcon
-								)}
+				<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>
-						<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 ">
-						<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>
-						<span className="bg-white text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800 ms-3">
-							{data.rating}
-						</span>
-					</div>
-				</div>
-				<div className={`flex w-full`}>
-					<div className="flex items-end flex-col w-full">
-						<div className="px-2 mb-2">
-							<Text
-								tag={data.priceProps.tag as TagName}
-								size={data.priceProps.size}
-								text={data.price}
-								color={"black"}
-								fontFamily={""}
-								additionalClasses={
-									data.priceProps.additionalClasses
-								}
+						<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>
-						<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"
+						<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>
 	);
 };
 

package/src/components/CounterButton/CounterButton.tsx

@@ -46,7 +46,7 @@ const CounterButton: React.FC<CounterButtonTypes> = ({
 				onClick={onDecrementClick}
 			/>
 			<div
-				className={`w-16 h-12 flex justify-center items-center border-x border-gray-300`}
+				className={`flex justify-center items-center border-x border-gray-300`}
 			>
 				<input
 					type="text"

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

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

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

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

package/src/components/DropDownIconButton/DropDownIconButton.stories.tsx

@@ -0,0 +1,197 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+import DropDownIconButton from "./DropDownIconButton";
+import { DropDownIconButtonProps } from "./DropDownIconButton.types";
+import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
+import AlertSubmenu from "../Submenus/AlertSubmenu";
+import AdminSubmenu from "../Submenus/AdminSubmenu";
+
+export default {
+	title: "Components/DropDownIconButton",
+	component: DropDownIconButton,
+	tags: ['autodocs'],
+	argTypes: {
+		iconSize: {
+			control: 'none',
+			description: "Tailwind classes for the icon size. Example: `h-6 w-6`",
+		},
+		iconColor: {
+			control: 'none',
+			description: "Tailwind classes for the icon color. Example: `text-blue-500`",
+		},
+		backgroundColor: {
+			control: 'none',
+			description: "Tailwind classes for the background color. Example: `bg-gray-200`",
+		},
+		borderColor: {
+			control: 'none',
+			description: "Tailwind classes for the border color. Example: `border-gray-300`",
+		},
+		hoverBorderColor: {
+			control: 'none',
+			description: "Tailwind classes for the border color on hover. Example: `hover:border-blue-500`",
+		},
+		hoverBackgroundColor: {
+			control: 'none',
+			description: "Tailwind classes for the background on hover. Example: `hover:bg-gray-300`",
+		},
+		hasNotification: {
+			control: 'none',
+			description: "Flag to indicate if the button has a notification badge.",
+		},
+		notificationTextColor: {
+			control: 'none',
+			description: "Tailwind classes for the notification text color. Example: `text-white`",
+		},
+		notificationBgColor: {
+			control: 'none',
+			description: "Tailwind classes for the notification background color. Example: `bg-red-500`",
+		},
+		notificationCount: {
+			control: 'none',
+			description: "The number to be displayed inside the notification badge. Example: `12`",
+		},
+		text: {
+			control: 'none',
+			description: "The text to be displayed below the button. Example: `Profile`",
+		},
+		textClasses: {
+			control: 'none',
+			description: "Tailwind classes to style the text. Example: `text-sm text-black`",
+		},
+		menuPlacementClasses: {
+			control: 'none',
+			description: "Tailwind classes to position the dropdown menu. Example: `right-0 top-full mt-5 w-[200px]`",
+		},
+		submenu: {
+			control: 'none',
+			description: "React node representing the submenu to be displayed in the dropdown.",
+		},
+		onClick: {
+			table: {
+				disable: true,
+			},
+			control: 'none',
+			description: "Callback function to handle click events.",
+		},
+		icon: {
+			control: 'none',
+			description: "React node representing the icon to be displayed in the button.",
+		},
+		textContainerClasses: {
+			control: 'none',
+			description: "Tailwind classes to style the container of the text. Example: `text-center`",
+		},
+	},
+	parameters: {
+		layout: "centered",
+	},
+} as Meta;
+
+const Template: StoryFn<DropDownIconButtonProps> = (args) => <DropDownIconButton {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+	icon: getFontAwesomeIcon("cog"),
+	iconSize: "h-8 w-8",
+	iconColor: "text-black",
+	hasNotification: true,
+	notificationTextColor: "text-white",
+	notificationBgColor: "bg-green-600",
+	notificationCount: 5,
+	text: "Settings",
+	textClasses: "text-black font-serif text-md",
+	hoverBackgroundColor: "hover:bg-gray-300",
+	backgroundColor: "bg-gray-200",
+	borderColor: "border-gray-300",
+	hoverBorderColor: "hover:border-black",
+	menuPlacementClasses: "right-0 top-full mt-2 w-[200px]",
+	submenu: (
+		<AdminSubmenu
+			menuClasses="p-4 bg-white rounded-lg shadow-lg"
+			callToActionChildren={
+				<div className="text-gray-800 font-medium">Manage Settings</div>
+			}
+			secondCallToActionChildren={
+				<div className="text-gray-600">More settings options...</div>
+			}
+		/>
+	),
+};
+
+export const Alerts = Template.bind({});
+Alerts.args = {
+	icon: getFontAwesomeIcon("bell"),
+	iconSize: "h-8 w-8",
+	iconColor: "text-black",
+	hasNotification: true,
+	notificationTextColor: "text-white",
+	notificationBgColor: "bg-red-600",
+	notificationCount: 3,
+	text: "Alerts",
+	textClasses: "text-black font-serif text-md",
+	hoverBackgroundColor: "hover:bg-gray-300",
+	backgroundColor: "bg-gray-200",
+	borderColor: "border-gray-300",
+	hoverBorderColor: "hover:border-black",
+	menuPlacementClasses: "right-0 top-full mt-2 w-[344px]",
+	submenu: (
+		<AlertSubmenu
+			data={[
+				{ title: "Order SA100000 status updated to Fulfilled", subtitle: "14h ago", link: "#" },
+				{ title: "You have a new request from Gina Prince", subtitle: "Open TOGa Supply", link: "#" },
+				{ title: "Order SA100002 status updated to Fulfilled", subtitle: "2d ago", link: "#" },
+			]}
+			newAlertCount={4}
+			newAlertColor="bg-light-green-800"
+			clearAlertsText="Mark all as Read"
+			clearAlertsTextClasses="text-gray-3 hover:text-dark-green-800"
+			newAlertCountClasses="text-gray-900 font-semibold"
+			menuContainerClasses="overflow-hidden rounded-lg border-1 border-stroke bg-white shadow-lg"
+			menuHeaderContainerClasses="flex justify-between items-center p-4 border-b border-gray-200"
+			alertListContainerClasses="overflow-y-auto max-h-[300px] divide-y divide-gray-200"
+		/>
+	),
+};
+
+export const Admin = Template.bind({});
+Admin.args = {
+	icon: getFontAwesomeIcon("user"),
+	iconSize: "h-8 w-8",
+	iconColor: "text-black",
+	hasNotification: false,
+	notificationTextColor: "text-white",
+	notificationBgColor: "bg-blue-600",
+	notificationCount: 0,
+	text: "Admin",
+	textClasses: "text-black font-serif text-md",
+	hoverBackgroundColor: "hover:bg-gray-300",
+	backgroundColor: "bg-gray-200",
+	borderColor: "border-gray-300",
+	hoverBorderColor: "hover:border-black",
+	menuPlacementClasses: "right-0 top-full mt-2 w-[344px]",
+	submenu: (
+		<AdminSubmenu
+			menuClasses="overflow-hidden rounded-lg border-1 border-stroke bg-white shadow-lg p-6"
+			callToActionChildren={
+				<div className="flex items-center text-gray-700">
+					<a href="#" className="hover:text-dark-green-800">
+						<span className="pr-2">{getFontAwesomeIcon("inbox", "regular")}</span>
+						Manage Requests
+					</a>
+				</div>
+			}
+			secondCallToActionChildren={
+				<div className="flex flex-col text-gray-700">
+					<p className="pb-3">
+						<span className="pr-2">{getFontAwesomeIcon("glasses", "regular")}</span>
+						View As
+					</p>
+					<div className="border rounded-md border-stroke p-4">
+						Placeholder Input - Behavior TBD
+					</div>
+				</div>
+			}
+		/>
+	),
+};

package/src/components/DropDownIconButton/DropDownIconButton.test.tsx

@@ -0,0 +1,90 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import DropDownIconButton from "./DropDownIconButton";
+import { AlertSubmenuProps } from "./types";
+
+const alertData = [
+	{
+		link: "#",
+		title: "New Comment",
+		subtitle: "You have a new comment on your post.",
+		status: true,
+		externalLink: "View Comment",
+	},
+	{
+		link: "#",
+		title: "New Like",
+		subtitle: "Someone liked your post.",
+		status: true,
+		externalLink: "View Post",
+	},
+];
+
+const AlertSubmenu = ({ data }: AlertSubmenuProps) => (
+	<div data-testid="alert-submenu">
+		{data.map((alert, index) => (
+			<div key={index}>
+				<h6>{alert.title}</h6>
+				<p>{alert.subtitle}</p>
+			</div>
+		))}
+	</div>
+);
+
+describe("DropDownIconButton", () => {
+	test("renders correctly with AlertSubmenu", () => {
+		render(
+			<DropDownIconButton
+				icon={<img src="/path/to/icon.png" alt="icon" />}
+				iconSize="text-sm"
+				iconColor="text-black"
+				hasNotification={true}
+				notificationTextColor="text-white"
+				notificationBgColor="bg-dark-green-800"
+				notificationCount={4}
+				text="Notifications"
+				textClasses="text-sm pt-1 font-medium text-black"
+				hoverBackgroundColor="group-hover:bg-dark-green-200"
+				backgroundColor="bg-gray-2"
+				menuPlacementClasses="right-0 top-full mt-5 w-[344px]"
+				submenu={<AlertSubmenu data={alertData} />}
+			/>
+		);
+
+		const button = screen.getByLabelText(/Notifications/);
+		fireEvent.click(button);
+
+		expect(screen.getByTestId("alert-submenu")).toBeInTheDocument();
+		expect(screen.getByText(/New Comment/)).toBeInTheDocument();
+		expect(screen.getByText(/New Like/)).toBeInTheDocument();
+	});
+
+	test("toggles menu visibility on button click", () => {
+		render(
+			<DropDownIconButton
+				icon={<img src="/path/to/icon.png" alt="icon" />}
+				iconSize="text-sm"
+				iconColor="text-black"
+				hasNotification={true}
+				notificationTextColor="text-white"
+				notificationBgColor="bg-dark-green-800"
+				notificationCount={4}
+				text="Notifications"
+				textClasses="text-sm pt-1 font-medium text-black"
+				hoverBackgroundColor="group-hover:bg-dark-green-200"
+				backgroundColor="bg-gray-2"
+				menuPlacementClasses="right-0 top-full mt-5 w-[344px]"
+				submenu={<AlertSubmenu data={alertData} />}
+			/>
+		);
+
+		const button = screen.getByLabelText(/Notifications/);
+		fireEvent.click(button);
+
+		const submenu = screen.getByTestId("alert-submenu");
+		expect(submenu).toBeVisible();
+
+		fireEvent.click(button);
+		expect(submenu).not.toBeVisible();
+	});
+});