@agilant/toga-blox 1.0.9 → 1.0.11

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

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

@@ -1,90 +0,0 @@
-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();
-	});
-});

package/src/components/DropDownIconButton/DropDownIconButton.tsx

@@ -1,87 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-import { DropDownIconButtonProps } from "./DropDownIconButton.types";
-import IconButton from "../IconButton/IconButton";
-
-const DropDownIconButton: React.FC<DropDownIconButtonProps> = ({
-	icon,
-	iconSize,
-	iconColor,
-	hasNotification,
-	notificationTextColor,
-	notificationBgColor,
-	notificationCount,
-	text,
-	textContainerClasses,
-	hoverBorderColor,
-	hoverBackgroundColor,
-	backgroundColor,
-	borderColor,
-	textClasses,
-	submenu,
-	menuPlacementClasses,
-	onClick,
-}) => {
-	const [open, setOpen] = useState(false);
-
-	const menuTrigger = useRef<HTMLDivElement>(null);
-	const menuRef = useRef<HTMLDivElement>(null);
-
-	const useClickOutside = (
-		refs: React.RefObject<HTMLElement>[],
-		isOpen: boolean,
-		setIsOpen: React.Dispatch<React.SetStateAction<boolean>>
-	) => {
-		useEffect(() => {
-			const clickHandler = ({ target }: MouseEvent) => {
-				if (
-					!refs.some((ref) => ref.current) ||
-					!isOpen ||
-					refs.some((ref) => ref.current?.contains(target as Node))
-				)
-					return;
-				setIsOpen(false);
-			};
-
-			document.addEventListener("click", clickHandler);
-			return () => document.removeEventListener("click", clickHandler);
-		}, [refs, isOpen, setIsOpen]);
-	};
-
-	useClickOutside([menuRef, menuTrigger], open, setOpen);
-
-	return (
-		<div className="relative z-20">
-			<div
-				ref={menuTrigger}
-				onClick={() => setOpen(!open)}
-				className="flex flex-col items-center justify-center group"
-			>
-				<IconButton
-					icon={icon}
-					iconSize={iconSize}
-					iconColor={iconColor}
-					hasNotification={hasNotification}
-					notificationTextClasses={notificationTextColor}
-					notificationBgColor={notificationBgColor}
-					notificationCount={notificationCount}
-					text={text}
-					textClasses={textClasses}
-					hoverBorderColor={hoverBorderColor}
-					hoverBackgroundColor={hoverBackgroundColor}
-					backgroundColor={backgroundColor}
-					borderColor={borderColor}
-					additionalContainerClasses={textContainerClasses}
-					onClick={onClick}
-				/>
-			</div>
-			<div
-				ref={menuRef}
-				className={`absolute ${menuPlacementClasses} ${!open ? "hidden" : ""}`}
-			>
-				{submenu}
-			</div>
-		</div>
-	);
-};
-
-export default DropDownIconButton;

package/src/components/DropDownIconButton/DropDownIconButton.types.ts

@@ -1,21 +0,0 @@
-import React from "react";
-
-export interface DropDownIconButtonProps {
-	icon: React.ReactNode;
-	iconSize: string;
-	iconColor: string;
-	hasNotification: boolean;
-	notificationTextColor: string;
-	notificationBgColor: string;
-	notificationCount: number;
-	text: string;
-	textContainerClasses?: string;
-	hoverBorderColor?: string;
-	hoverBackgroundColor?: string;
-	backgroundColor: string;
-	borderColor?: string;
-	textClasses?: string;
-	submenu: React.ReactNode;
-	menuPlacementClasses: string;
-	onClick?: () => void;
-}

package/src/components/Footer/ContactInfoItem.tsx

@@ -1,18 +0,0 @@
-import React, { ReactNode } from "react";
-
-interface ContactInfoItemProps {
-	icon: JSX.Element | null;
-	children: ReactNode;
-}
-
-export const ContactInfoItem: React.FC<ContactInfoItemProps> = ({
-	icon,
-	children,
-}) => {
-	return (
-		<div className="flex w-full space-between pb-3">
-			<div className="flex w-[10%] my-1">{icon}</div>
-			<div className="my-1">{children}</div>
-		</div>
-	);
-};

package/src/components/Footer/DUMMYFOOTERDATA.json

@@ -1,132 +0,0 @@
-{
-	"DUMMYCONTACTDATA": [
-		{
-			"id": "1",
-			"address": "3 Seaview Boulevard",
-			"city": "Port Washington",
-			"state": "NY 11050",
-			"googleLink": "https://maps.app.goo.gl/kyLZNYZHfyKxSnSH8",
-			"phone": "217.472.0953",
-			"email": "generic-company@email.com"
-		}
-	],
-	"DUMMYNAVDATA": [
-		{
-			"id": "1",
-			"title": "About",
-			"link": "#",
-			"links": [
-				{
-					"menuItem": "Features",
-					"link": "#"
-				},
-				{
-					"menuItem": "Pricing",
-					"link": "#"
-				},
-				{
-					"menuItem": "Support",
-					"link": "#"
-				},
-				{
-					"menuItem": "Forums",
-					"link": "#"
-				}
-			]
-		},
-		{
-			"id": 2,
-			"title": "Projects",
-			"links": [
-				{
-					"menuItem": "Contribute",
-					"link": "#"
-				},
-				{
-					"menuItem": "Media assets",
-					"link": "#"
-				},
-				{
-					"menuItem": "Changelog",
-					"link": "#"
-				},
-				{
-					"menuItem": "Releases",
-					"link": "#"
-				}
-			]
-		},
-		{
-			"id": 3,
-			"title": "Community",
-			"links": [
-				{
-					"menuItem": "Join Discord",
-					"link": "#"
-				},
-				{
-					"menuItem": "Follow on Twitter",
-					"link": "#"
-				},
-				{
-					"menuItem": "Email newsletter",
-					"link": "#"
-				},
-				{
-					"menuItem": "GitHub discussions",
-					"link": "#"
-				}
-			]
-		},
-		{
-			"id": 4,
-			"title": "Store",
-			"links": [
-				{
-					"menuItem": "Computers",
-					"link": "#"
-				},
-				{
-					"menuItem": "IpadsIpads",
-					"link": "#"
-				},
-				{
-					"menuItem": "Accessories",
-					"link": "#"
-				}
-			]
-		},
-		{
-			"title": "Extra Row",
-			"links": [
-				{
-					"menuItem": "One submenu",
-					"link": "#"
-				}
-			]
-		}
-	],
-	"DUMMYSOCIALDATA": [
-		{
-			"type": "Twitter",
-			"xmlns": "http://www.w3.org/2000/svg",
-			"path": "M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z",
-			"ariaLabel": "Twitter",
-			"href": "https://twitter.com/"
-		},
-		{
-			"type": "YouTube",
-			"xmlns": "http://www.w3.org/2000/svg",
-			"path": "M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z",
-			"ariaLabel": "YouTube",
-			"href": "https://youtube.com/"
-		},
-		{
-			"type": "Facebook",
-			"xmlns": "http://www.w3.org/2000/svg",
-			"path": "M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z",
-			"ariaLabel": "Facebook",
-			"href": "https://facebook.com/"
-		}
-	]
-}