@agilant/toga-blox 1.0.8 → 1.0.9

package/src/components/GenericList/GenericList.stories.tsx

@@ -1,6 +1,5 @@
-import { Meta } from "@storybook/react";
-import GenericList from "./GenericList";
-import GenericListTypes from "./GenericList";
+import { Meta, StoryFn } from "@storybook/react";
+import GenericList, { GenericListTypes } from "./GenericList";
 import DynamicIconList from "./templates/DynamicIconList";
 import DUMMYICONDATA from "../Header/DUMMYICONDATA.json";
 import DUMMYLISTDATA from "./DUMMYLISTDATA.json";
@@ -59,9 +58,7 @@ export default {
 	},
 } as Meta;
 
-const Template: typeof GenericListTypes & { args?: any } = (args) => (
-	<GenericList {...args} />
-);
+const Template: StoryFn<GenericListTypes<any>> = (args) => <GenericList {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
@@ -70,9 +67,7 @@ Default.args = {
 	itemHeight: 20,
 	containerHeight: 72,
 	hasVirtualization: true,
-	renderItem: (item: IconsListProps["item"]) => (
-		<DynamicIconList item={item} />
-	),
+	renderItem: (item: IconsListProps["item"]) => <DynamicIconList item={item} />,
 	listDirection: "horizontal",
 	listType: "none",
 };
@@ -84,9 +79,7 @@ VerticalList.args = {
 	itemHeight: 150,
 	containerHeight: 300,
 	hasVirtualization: true,
-	renderItem: (item: IconsListProps["item"]) => (
-		<DynamicIconList item={item} />
-	),
+	renderItem: (item: IconsListProps["item"]) => <DynamicIconList item={item} />,
 	listDirection: "vertical",
 	listType: "none",
 };

package/src/components/GenericList/GenericList.tsx

@@ -1,7 +1,6 @@
-import React, { useRef, useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { VirtualItem, useVirtualizer } from "@tanstack/react-virtual";
 import { useCallback } from "react";
-import { getListDirectionClasses } from "./genericListClassNames";
 
 type GenericData = {
 	id: string;
@@ -24,15 +23,15 @@ const GenericList = <T extends GenericData>({
 	renderItem,
 	itemHeight,
 	containerHeight,
-	containerClasses,
-	listDirection,
+	containerClasses = "",
+	listDirection = "vertical",
 	hasVirtualization = false,
-	listType,
+	listType = "none",
 }: GenericListTypes<T>) => {
-	let listClasses = getListDirectionClasses(listDirection);
-	let parentRef = React.createRef<HTMLElement>();
+	const listClasses = listDirection === "horizontal" ? "flex flex-row" : "flex flex-col";
+	const parentRef = React.createRef<HTMLElement>();
 
-	const [virtualItems, setVirtualItems] = useState<VirtualItem[]>([]);
+	const [virtualItems, setVirtualItems] = useState<VirtualItem<Element>[]>([]);
 	const [nonVirtualItems, setNonVirtualItems] = useState<T[]>([]);
 
 	const estimateSize = useCallback(
@@ -58,89 +57,89 @@ const GenericList = <T extends GenericData>({
 	}, [hasVirtualization, virtualizer, data]);
 
 	return (
-  <>
-    {(() => {
-      switch (listType) {
-        case "ordered":
-          return (
-				<ol
-					ref={parentRef as React.RefObject<HTMLOListElement>}
-					style={
-						hasVirtualization
-							? { height: containerHeight, overflow: "scroll" }
-							: {}
-					}
-					className={`${listClasses} ${containerClasses}`}
-				>
-					{hasVirtualization
-						? virtualItems.map((virtualItem) => (
-								<li
-									key={virtualItem.index}
-									style={{ height: itemHeight }}
-								>
-									{renderItem(data[virtualItem.index])}
-								</li>
-						  ))
-						: nonVirtualItems.map((item) => (
-								<li key={item.id}>{renderItem(item)}</li>
-						  ))}
-				</ol>
-			);
-        case "unordered":
-          return (
-				<ul
-					ref={parentRef as React.RefObject<HTMLUListElement>}
-					style={
-						hasVirtualization
-							? { height: containerHeight, overflow: "scroll" }
-							: {}
-					}
-					className={`${listClasses} ${containerClasses}`}
-				>
-					{hasVirtualization
-						? virtualItems.map((virtualItem) => (
-								<li
-									key={virtualItem.index}
-									style={{ height: itemHeight }}
-								>
-									{renderItem(data[virtualItem.index])}
-								</li>
-						  ))
-						: nonVirtualItems.map((item) => (
-								<li key={item.id}>{renderItem(item)}</li>
-						  ))}
-				</ul>
-			);
-        case "none":
-        default:
-          return (
-				<div
-					ref={parentRef as React.RefObject<HTMLDivElement>}
-					style={
-						hasVirtualization
-							? { height: containerHeight, overflow: "scroll" }
-							: {}
-					}
-					className={`${listClasses} ${containerClasses}`}
-				>
-					{hasVirtualization
-						? virtualItems.map((virtualItem) => (
-								<div
-									key={virtualItem.index}
-									style={{ height: itemHeight }}
-								>
-									{renderItem(data[virtualItem.index])}
-								</div>
-						  ))
-						: nonVirtualItems.map((item) => (
-								<div key={item.id}>{renderItem(item)}</div>
-						  ))}
-				</div>
-			);
-      }
-    })()}
-  </>
-)
-}
+		<>
+			{(() => {
+				switch (listType) {
+					case "ordered":
+						return (
+							<ol
+								ref={parentRef as React.RefObject<HTMLOListElement>}
+								style={
+									hasVirtualization
+										? { height: containerHeight, overflow: "scroll" }
+										: {}
+								}
+								className={`${listClasses} ${containerClasses}`}
+							>
+								{hasVirtualization
+									? virtualItems.map((virtualItem) => (
+										<li
+											key={virtualItem.index}
+											style={{ height: itemHeight }}
+										>
+											{renderItem(data[virtualItem.index])}
+										</li>
+									))
+									: nonVirtualItems.map((item) => (
+										<li key={item.id}>{renderItem(item)}</li>
+									))}
+							</ol>
+						);
+					case "unordered":
+						return (
+							<ul
+								ref={parentRef as React.RefObject<HTMLUListElement>}
+								style={
+									hasVirtualization
+										? { height: containerHeight, overflow: "scroll" }
+										: {}
+								}
+								className={`${listClasses} ${containerClasses}`}
+							>
+								{hasVirtualization
+									? virtualItems.map((virtualItem) => (
+										<li
+											key={virtualItem.index}
+											style={{ height: itemHeight }}
+										>
+											{renderItem(data[virtualItem.index])}
+										</li>
+									))
+									: nonVirtualItems.map((item) => (
+										<li key={item.id}>{renderItem(item)}</li>
+									))}
+							</ul>
+						);
+					case "none":
+					default:
+						return (
+							<div
+								ref={parentRef as React.RefObject<HTMLDivElement>}
+								style={
+									hasVirtualization
+										? { height: containerHeight, overflow: "scroll" }
+										: {}
+								}
+								className={`${listClasses} ${containerClasses}`}
+							>
+								{hasVirtualization
+									? virtualItems.map((virtualItem) => (
+										<div
+											key={virtualItem.index}
+											style={{ height: itemHeight }}
+										>
+											{renderItem(data[virtualItem.index])}
+										</div>
+									))
+									: nonVirtualItems.map((item) => (
+										<div key={item.id}>{renderItem(item)}</div>
+									))}
+							</div>
+						);
+				}
+			})()}
+		</>
+	);
+};
 
 export default GenericList;

package/src/components/GenericList/templates/DynamicIconList.tsx

@@ -1,74 +1,55 @@
 import React from "react";
-import Icon from "../../Icon/index";
+import IconButton from "../../IconButton/index";
 import { getFontAwesomeIcon } from "../../../utils/getFontAwesomeIcon";
-import Text from "../../Text/index";
 import { TagName } from "../../Text/index";
 
-export type IconsListProps = {
-	item: {
-		iconColor?: string;
-		iconLabel: string;
-		backgroundColor?: string;
-		size?: "xs" | "sm" | "md" | "lg" | string;
-		icon: string;
-		hoverBorder?: "border" | "none" | string;
-		limitCharacters?: (text: string) => string;
-		indicatorSize?: "sm" | "md" | "lg" | string;
-		iconBorder?: "border" | "none" | string;
-		id: string;
-		hoverBackground: string;
-		hoverColor: string;
-		limitIndicator: boolean;
-		indicatorNumber: string;
-		additionalContainerClasses: string;
-		to?: string;
-		href?: string;
-		text: {
-			size: string;
-			color: string;
-			text: string;
-			fontFamily: string;
-			tag: TagName;
-			additionalClasses: string;
-		};
+export type IconButtonsListProps = {
+	id: string;
+	iconColor?: string;
+	iconLabel?: string; // Ensure this matches IconButtonTypes if necessary
+	backgroundColor?: string;
+	size?: "xs" | "sm" | "md" | "lg" | string;
+	icon: string;
+	hoverBorder?: "border" | "none" | string;
+	limitCharacters?: (text: string) => string;
+	indicatorSize?: "sm" | "md" | "lg" | string;
+	iconBorder?: "border" | "none" | string;
+	hoverBackground: string;
+	hoverColor: string;
+	limitIndicator: boolean;
+	indicatorNumber: string;
+	additionalContainerClasses: string;
+	onClick?: () => void;
+	text: {
+		size: string;
+		color: string;
+		text: string;
+		fontFamily: string;
+		tag: TagName;
+		additionalClasses: string;
 	};
+	to?: string;
+	href?: string;
 };
-// TODO: create a genetic list comp with TanStack Virtual and move this into the template dir in the Generic list dir
-// https://tanstack.com/virtual/latest/docs/introduction
-const DynamicIconList: React.FC<IconsListProps> = ({ item }) => {
+
+const DynamicIconButtonList: React.FC<IconButtonsListProps> = (props) => {
 	return (
-		<>
-			<Icon
-				key={item.id}
-				to={item.to}
-				href={item.href}
-				limitCharacters={item.limitCharacters}
-				backgroundColor={item.backgroundColor}
-				iconColor={item.iconColor}
-				iconLabel={item.iconLabel}
-				iconBorder={item.iconBorder}
-				size={item.size}
-				icon={getFontAwesomeIcon(item.icon)}
-				hoverBackground={item.hoverBackground}
-				hoverBorder={item.hoverBorder}
-				limitIndicator={item.limitIndicator}
-				indicatorNumber={item.indicatorNumber}
-				indicatorSize={item.indicatorSize}
-				hoverColor={item.hoverColor}
-				additionalContainerClasses={item.additionalContainerClasses}
-				text={
-					<Text
-						size={item.text.size}
-						color={item.text.color}
-						text={item.text.text}
-						fontFamily={item.text.fontFamily}
-						tag={item.text.tag}
-						additionalClasses={item.text.additionalClasses}
-					/>
-				}
-			/>
-		</>
+		<IconButton
+			key={props.id}
+			onClick={props.onClick}
+			backgroundColor={props.backgroundColor}
+			iconColor={props.iconColor}
+			iconLabel={props.iconLabel}
+			iconBorder={props.iconBorder}
+			icon={getFontAwesomeIcon(props.icon)}
+			hoverBackgroundColor={props.hoverBackground}
+			hoverBorderColor={props.hoverBorder}
+			indicatorNumber={props.indicatorNumber}
+			indicatorSize={props.indicatorSize}
+			additionalContainerClasses={props.additionalContainerClasses}
+			text={props.text.text}
+		/>
 	);
 };
 
-export default DynamicIconList;
+export default DynamicIconButtonList;

package/src/components/GetSupport/GetSupport.stories.tsx

@@ -0,0 +1,80 @@
+import { Meta, StoryFn } from "@storybook/react";
+import GetSupport from "./GetSupport";
+import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
+
+export default {
+	title: "Components/GetSupport",
+	component: GetSupport,
+	argTypes: {
+		to: {
+			control: "none",
+			description: "URL to navigate to when the button is clicked.",
+		},
+		icon: {
+			control: "none",
+			description: "FontAwesome icon to be displayed.",
+		},
+		iconClasses: {
+			control: "none",
+			description: "Tailwind CSS classes for icon styling.",
+		},
+		title: {
+			control: "none",
+			description: "The main title text.",
+		},
+		titleClasses: {
+			control: "none",
+			description: "Tailwind CSS classes for title styling.",
+		},
+		subTitle: {
+			control: "none",
+			description: "Optional subtitle text.",
+		},
+		subTitleClasses: {
+			control: "none",
+			description: "Tailwind CSS classes for subtitle styling.",
+		},
+		containerClasses: {
+			control: "none",
+			description: "Tailwind CSS classes for container styling.",
+		},
+		as: {
+			control: "none",
+			description: "The element type to use for the button.",
+		},
+	},
+	tags: ["autodocs"],
+} as Meta;
+
+const Template: StoryFn = (args) => (
+	<GetSupport to={""} icon={null} title={""} {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+	icon: getFontAwesomeIcon("phone"),
+	as: "a",
+	to: "/support",
+	title: "Get Support",
+	iconClasses:
+		"p-4 bg-slate-600 text-white group-hover:text-slate-600 rounded-full group-hover:bg-slate-200",
+	titleClasses: "text-xl font-bold",
+	subTitle: "1-800-123-4567",
+	subTitleClasses: "text-md text-gray-500",
+	containerClasses:
+		"flex items-center gap-4 p-2 bg-white rounded-lg hover:cursor-pointer group",
+};
+
+export const WithoutPhoneNumber = Template.bind({});
+WithoutPhoneNumber.args = {
+	icon: getFontAwesomeIcon("phone"),
+	as: "a",
+	to: "/support",
+	title: "Get Support",
+	iconClasses:
+		"p-4 bg-slate-600 text-white group-hover:text-slate-600 rounded-full group-hover:bg-slate-200",
+	titleClasses: "text-xl font-bold",
+	subTitleClasses: "text-md text-gray-500",
+	containerClasses:
+		"flex items-center gap-4 p-2 bg-white rounded-lg hover:cursor-pointer group",
+};

package/src/components/GetSupport/GetSupport.test.tsx

@@ -0,0 +1,62 @@
+import { render, screen } from '@testing-library/react';
+import GetSupport from './GetSupport';
+import { MemoryRouter } from 'react-router-dom';
+import { describe, expect, it } from 'vitest';
+
+describe('GetSupport Component', () => {
+	const defaultProps = {
+		as: 'link',
+		to: '/support',
+		icon: <div>Icon</div>,
+		iconClasses: 'p-2 w-12 h-12 bg-gray-200 rounded-full',
+		title: 'Get Support',
+		titleClasses: 'text-xl font-bold',
+		subTitle: '1-800-123-4567',
+		subTitleClasses: 'text-md text-gray-500',
+		containerClasses: 'flex items-center gap-4 p-2 bg-white rounded-lg',
+	};
+
+	it('renders without crashing', () => {
+		render(<GetSupport {...defaultProps} />, { wrapper: MemoryRouter });
+		expect(screen.getByText('Get Support')).toBeInTheDocument();
+	});
+
+	it('renders the title', () => {
+		render(<GetSupport {...defaultProps} />, { wrapper: MemoryRouter });
+		expect(screen.getByText('Get Support')).toBeInTheDocument();
+	});
+
+	it('renders the subtitle', () => {
+		render(<GetSupport {...defaultProps} />, { wrapper: MemoryRouter });
+		expect(screen.getByText('1-800-123-4567')).toBeInTheDocument();
+	});
+
+	it('applies container classes', () => {
+		render(<GetSupport {...defaultProps} />, { wrapper: MemoryRouter });
+		const container = screen.getByRole('link').firstChild;
+		expect(container).toHaveClass('flex items-center gap-4 p-2 bg-white rounded-lg');
+	});
+
+	it('applies title classes', () => {
+		render(<GetSupport {...defaultProps} />, { wrapper: MemoryRouter });
+		const title = screen.getByText('Get Support');
+		expect(title).toHaveClass('text-xl font-bold');
+	});
+
+	it('applies subtitle classes', () => {
+		render(<GetSupport {...defaultProps} />, { wrapper: MemoryRouter });
+		const subTitle = screen.getByText('1-800-123-4567');
+		expect(subTitle).toHaveClass('text-md text-gray-500');
+	});
+
+	it('renders without subtitle', () => {
+		const { container } = render(
+			<GetSupport
+				{...defaultProps}
+				subTitle={undefined}
+			/>,
+			{ wrapper: MemoryRouter }
+		);
+		expect(container.querySelector('.text-md.text-gray-500')).toBeNull();
+	});
+});

package/src/components/GetSupport/GetSupport.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import FormButton from "../FormButton/FormButton";
+import Text from "../Text/Text";
+import { GetSupportTypes } from "./GetSupport.types";
+
+const GetSupport: React.FC<GetSupportTypes> = ({
+	as,
+	to,
+	icon,
+	iconClasses,
+	title,
+	titleClasses,
+	subTitle,
+	subTitleClasses,
+	containerClasses,
+}) => {
+	return (
+		<FormButton
+			as={as}
+			to={to}
+			text={
+				<div className={`flex  items-center gap-4 ${containerClasses}`}>
+					<div
+						className={`flex items-center justify-center ${iconClasses}`}
+					>
+						{icon}
+					</div>
+					<div className="flex flex-col">
+						<Text
+							size="text-md"
+							color="text-black"
+							text={title}
+							fontFamily="font-serif"
+							tag="p"
+							additionalClasses={titleClasses}
+						/>
+						{subTitle && (
+							<Text
+								size="text-md"
+								color="text-black"
+								text={subTitle}
+								fontFamily="font-serif"
+								tag="p"
+								additionalClasses={subTitleClasses}
+							/>
+						)}
+					</div>
+				</div>
+			}
+			backgroundColor="bg-transparent"
+			fontColor="text-black"
+			borderColor="border-none"
+			shape="rounded-md"
+			additionalClasses={containerClasses}
+		/>
+	);
+};
+
+export default GetSupport;

package/src/components/GetSupport/GetSupport.types.ts

@@ -0,0 +1,11 @@
+export type GetSupportTypes = {
+	as?: string;
+	to: string;
+	icon: JSX.Element | null;
+	iconClasses?: string;
+	title: string;
+	titleClasses?: string;
+	subTitle?: string;
+	subTitleClasses?: string;
+	containerClasses?: string;
+};