@agilant/toga-blox 1.0.8 → 1.0.9

package/src/components/DropDownIconButton/DropDownIconButton.tsx

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

@@ -0,0 +1,21 @@
+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/DropDownIconButton/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./DropDownIconButton";
+export * from "./DropDownIconButton.types";

package/src/components/Footer/ContactInfoItem.tsx

@@ -1,20 +1,18 @@
 import React, { ReactNode } from "react";
-import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 interface ContactInfoItemProps {
-	icon: IconDefinition;
+	icon: JSX.Element | null;
 	children: ReactNode;
 }
 
 export const ContactInfoItem: React.FC<ContactInfoItemProps> = ({
 	icon,
 	children,
-}) => (
-	<div className="flex w-full space-between pb-3">
-		<div className="flex w-[10%] my-1">
-			<FontAwesomeIcon icon={icon} />
+}) => {
+	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>
-		<div className="my-1">{children}</div>
-	</div>
-);
+	);
+};

package/src/components/Footer/Footer.stories.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Meta, StoryFn } from "@storybook/react";
 import Footer from "./Footer";
 import { FooterProps } from "./Footer.types";
@@ -12,8 +11,9 @@ const StoryBookViewFooter = withStoryBook(Footer);
 
 export default {
 	title: "Footers/Footer",
+	component: StoryBookViewFooter,
+
 	argTypes: {
-		// LOGO & BACKGROUND & FOOTER BAR
 		logo: {
 			control: "none",
 			description: "The logo displayed in the footer",
@@ -31,8 +31,6 @@ export default {
 			control: "color",
 			description: "Whether the footer has a background color.",
 		},
-
-		// TITLE AND SLOGAN
 		title: {
 			control: "text",
 			description: "The title displayed in the footer",
@@ -49,8 +47,6 @@ export default {
 			control: "boolean",
 			description: "Whether the footer has a slogan displayed",
 		},
-
-		// NAV
 		hasNavItems: {
 			control: "boolean",
 			description: "Whether the footer has navigation items.",
@@ -70,8 +66,6 @@ export default {
 				disable: true,
 			},
 		},
-
-		// SOCIAL
 		socialTitle: {
 			table: {
 				disable: true,
@@ -86,15 +80,11 @@ export default {
 			control: "boolean",
 			description: "Whether the footer has social icons displayed",
 		},
-
-		// CONTACT
 		contactTitle: {
 			table: {
 				disable: true,
 			},
 		},
-
-		// COPYRIGHT
 		copyRightTextPlacement: {
 			control: "select",
 			options: ["left", "center", "right"],
@@ -108,10 +98,12 @@ export default {
 		},
 		hasCopyRight: {
 			control: "boolean",
-			description:
-				"Whether the footer has a copyright statement displayed",
+			description: "Whether the footer has a copyright statement displayed",
 		},
 	},
+	parameters: {
+		tags: ["autodocs"],
+	},
 } as Meta<FooterProps>;
 
 const Template: StoryFn<typeof StoryBookViewFooter> = (args) => (
@@ -149,7 +141,7 @@ Default.args = {
 		/>
 	),
 	copyRightTextPlacement: "center",
-	socialPlacement: "center",
+	socialPlacement: "flex justify-center mt-4",
 };
 
 export const CompassFooter = Template.bind({});
@@ -159,7 +151,7 @@ CompassFooter.args = {
 			src="../../../assets/compass-logo.png"
 			alt="Generic Compass Logo."
 			background={false}
-			additionalClasses=" w-40 p-2"
+			additionalClasses="w-40 p-2"
 		/>
 	),
 	title: (
@@ -214,9 +206,9 @@ CompassFooter.args = {
 	hasSocial: true,
 	logoHoverColor: "green",
 	backgroundColor: "green",
-	accordionGap: "gap-1",
+	accordionGap: "gap-2",
 	copyRightTextPlacement: "center",
-	socialPlacement: "center",
+	socialPlacement: "flex justify-center mt-4",
 	accordionParentStyle: "border-b border-black p-2 w-full",
 	accordionExpandedStyle: "pl-3 py-3",
 };
@@ -228,7 +220,7 @@ AlternateMobileNavStyle.args = {
 			src="../../../assets/compass-logo.png"
 			alt="Generic Compass Logo."
 			background={false}
-			additionalClasses=" w-40 p-2"
+			additionalClasses="w-40 p-2"
 		/>
 	),
 	title: (
@@ -285,8 +277,7 @@ AlternateMobileNavStyle.args = {
 	logoHoverColor: "green",
 	backgroundColor: "green",
 	copyRightTextPlacement: "center",
-	socialPlacement: "center",
-	accordionParentStyle:
-		"rounded-md border-black p-2 w-full bg-teal-700 text-white",
+	socialPlacement: "flex justify-center mt-4",
+	accordionParentStyle: "rounded-md border-black p-2 w-full bg-teal-700 text-white",
 	accordionExpandedStyle: "pl-2 py-3",
 };

package/src/components/Footer/Footer.tsx

@@ -1,19 +1,6 @@
 import React from "react";
 import Image from "../Image/Image";
-
-import {
-	DUMMYCONTACTDATA,
-	DUMMYNAVDATA,
-	DUMMYSOCIALDATA,
-} from "./DUMMYFOOTERDATA.json";
-
-import {
-	getLogoClasses,
-	getBackgroundColor,
-	getSocialPlacement,
-	getCopyRightPlacement,
-} from "./footerClassNames";
-
+import { DUMMYCONTACTDATA, DUMMYNAVDATA, DUMMYSOCIALDATA } from "./DUMMYFOOTERDATA.json";
 import type { FooterProps } from "./Footer.types";
 import { SocialList } from "../../utils/generateSocialList";
 import { NavList } from "../../utils/generateNavMenu";
@@ -26,16 +13,16 @@ const Footer: React.FC<FooterProps> = ({
 			src="../../../assets/Logo.png"
 			alt="Generic Company Logo."
 			background={false}
-			additionalClasses=" w-40 p-2"
+			additionalClasses="w-40 p-2"
 		/>
 	),
 	hasTitle,
 	hasSlogan,
 	title,
 	slogan,
-	backgroundColor,
-	logoBorderRadius,
-	logoHoverColor,
+	backgroundColor = "bg-gray-800",
+	logoBorderRadius = "rounded-md",
+	logoHoverColor = "hover:bg-gray-700",
 	hasNavItems = true,
 	hasSocial = true,
 	hasContact = true,
@@ -46,26 +33,16 @@ const Footer: React.FC<FooterProps> = ({
 	contactData = DUMMYCONTACTDATA,
 	socialTitle,
 	contactTitle,
-	copyRightTextPlacement,
-	socialPlacement,
+	copyRightTextPlacement = "text-center",
+	socialPlacement = "flex justify-center mt-4",
 	accordionParentStyle = "border-2 rounded-md border-black p-2 w-full",
 	accordionExpandedStyle = "pl-3",
-	accordionGap,
+	accordionGap = "gap-4",
 }) => {
-	let logoClasses = getLogoClasses(logoHoverColor, logoBorderRadius);
-	let backgroundColorClasses = getBackgroundColor(backgroundColor);
-	let socialPlacementClasses = getSocialPlacement(socialPlacement);
-	let copyRightTextPlacementClasses = getCopyRightPlacement(
-		copyRightTextPlacement
-	);
+	const logoClasses = `${logoHoverColor} ${logoBorderRadius}`;
 
 	return (
-		// TODO: screen reader does not read all content of footer.
-		// not sure if this is a storybook issue, or if it is a code issue
-		<footer
-			className={`footer flex flex-col ${backgroundColorClasses} py-6 px-6`}
-			data-testid="footer"
-		>
+		<footer className={`footer flex flex-col ${backgroundColor} py-6 px-6`} data-testid="footer">
 			<div className="flex justify-between w-full max-xl:px-2 max-lg:flex max-lg:flex-col max-xl:gap-10">
 				<div className="max-lg:flex max-lg:justify-between max-lg:w-full">
 					<div className={logoClasses}>
@@ -76,82 +53,42 @@ const Footer: React.FC<FooterProps> = ({
 					<div data-testid="title-slogan">
 						{hasTitle ? (
 							<div data-testid="title">{title}</div>
-						) : (
-							<></>
-						)}
+						) : null}
 						{hasSlogan ? (
 							<div data-testid="slogan">{slogan}</div>
-						) : (
-							<></>
-						)}
+						) : null}
 					</div>
 				</div>
 				{hasNavItems ? (
 					<>
-						<nav
-							className={`flex gap-12 max-sm:hidden`}
-							aria-label="Site navigation."
-							data-testid="footer-site-navigation"
-							tabIndex={0}
-						>
+						<nav className="flex gap-12 max-sm:hidden" aria-label="Site navigation" data-testid="footer-site-navigation" tabIndex={0}>
 							<NavList navDataList={navData} />
 						</nav>
-						<nav
-							className={`hidden flex-col ${accordionGap} col-span-6 w-3/4 max-sm:w-full max-sm:flex`}
-							aria-label="Site navigation."
-							data-testid="footer-mobile-navigation"
-						>
-							<>
-								<Accordion
-									navData={navData}
-									accordionParentStyle={accordionParentStyle}
-									accordionExpandedStyle={
-										accordionExpandedStyle
-									}
-								/>
-							</>
+						<nav className={`hidden flex-col ${accordionGap} col-span-6 w-3/4 max-sm:w-full max-sm:flex`} aria-label="Site navigation" data-testid="footer-mobile-navigation">
+							<Accordion navData={navData} accordionParentStyle={accordionParentStyle} accordionExpandedStyle={accordionExpandedStyle} />
 						</nav>
 					</>
-				) : (
-					<></>
-				)}
+				) : null}
 				{hasContact ? (
-					<div
-						className="flex flex-col space-between"
-						data-testid="footer-contact-info"
-					>
-						{contactTitle ? contactTitle : <></>}
+					<div className="flex flex-col space-between" data-testid="footer-contact-info">
+						{contactTitle ? contactTitle : null}
 						<FooterContacts contactDataList={contactData} />
 					</div>
-				) : (
-					<></>
-				)}
+				) : null}
 			</div>
 			{hasSocial ? (
-				<nav
-					className={`w-full ${socialPlacementClasses}`}
-					aria-hidden="false"
-					aria-label="Social media navigation."
-					data-testid="footer-social-navigation"
-				>
-					{socialTitle ? socialTitle : <></>}
-					<div className="grid grid-flow-col gap-3">
+				<nav className={`w-full ${socialPlacement}`} aria-hidden="false" aria-label="Social media navigation" data-testid="footer-social-navigation">
+					{socialTitle ? socialTitle : null}
+					<div className="flex justify-center gap-4 mt-4">
 						<SocialList socialDataList={socialData} />
 					</div>
 				</nav>
-			) : (
-				<></>
-			)}
+			) : null}
 			{hasCopyRight ? (
-				<div
-					className={`w-full ${copyRightTextPlacementClasses}`}
-					aria-hidden="false"
-				>
+				<div className={`w-full ${copyRightTextPlacement}`} aria-hidden="false">
 					{copyRightText}
 				</div>
-			) : (
-				<></>
-			)}
+			) : null}
 		</footer>
 	);
 };

package/src/components/Footer/Footer.types.tsx

@@ -45,7 +45,7 @@ export interface FooterProps {
 	hasSocial?: boolean;
 	socialData?: typeof DUMMYSOCIALDATA;
 	socialTitle?: React.ReactNode;
-	socialPlacement?: "left" | "center" | "right";
+	socialPlacement?: string;
 
 	// CONTACT
 	contactTitle?: React.ReactNode;
@@ -55,7 +55,7 @@ export interface FooterProps {
 	// COPYRIGHT
 	hasCopyRight?: boolean;
 	copyRightText?: React.ReactNode;
-	copyRightTextPlacement?: "left" | "center" | "right";
+	copyRightTextPlacement?: string;
 
 	children?: React.ReactNode;
 }