@agilant/toga-blox 1.0.5

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

@@ -0,0 +1,292 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+import Footer from "./Footer";
+import { FooterProps } from "./Footer.types";
+import Image from "../Image/Image";
+import Text from "../Text/Text";
+
+import { withStoryBook } from "../../hoc";
+
+// Wrap your component with the HOC
+const StoryBookViewFooter = withStoryBook(Footer);
+
+export default {
+	title: "Footers/Footer",
+	argTypes: {
+		// LOGO & BACKGROUND & FOOTER BAR
+		logo: {
+			control: "none",
+			description: "The logo displayed in the footer",
+		},
+		logoBorderRadius: {
+			control: "boolean",
+			description: "Whether the logo has a border radius.",
+		},
+		logoHoverColor: {
+			control: "select",
+			options: ["green", "blue", "none"],
+			description: "Whether the logo has a background color on hover.",
+		},
+		backgroundColor: {
+			control: "color",
+			description: "Whether the footer has a background color.",
+		},
+
+		// TITLE AND SLOGAN
+		title: {
+			control: "text",
+			description: "The title displayed in the footer",
+		},
+		slogan: {
+			control: "text",
+			description: "The slogan displayed in the footer",
+		},
+		hasTitle: {
+			control: "boolean",
+			description: "Whether the footer has a title displayed",
+		},
+		hasSlogan: {
+			control: "boolean",
+			description: "Whether the footer has a slogan displayed",
+		},
+
+		// NAV
+		hasNavItems: {
+			control: "boolean",
+			description: "Whether the footer has navigation items.",
+		},
+		accordionGap: {
+			table: {
+				disable: true,
+			},
+		},
+		accordionParentStyle: {
+			table: {
+				disable: true,
+			},
+		},
+		accordionExpandedStyle: {
+			table: {
+				disable: true,
+			},
+		},
+
+		// SOCIAL
+		socialTitle: {
+			table: {
+				disable: true,
+			},
+		},
+		socialPlacement: {
+			control: "select",
+			options: ["left", "center", "right"],
+			description: "Where the social icons are placed.",
+		},
+		hasSocial: {
+			control: "boolean",
+			description: "Whether the footer has social icons displayed",
+		},
+
+		// CONTACT
+		contactTitle: {
+			table: {
+				disable: true,
+			},
+		},
+
+		// COPYRIGHT
+		copyRightTextPlacement: {
+			control: "select",
+			options: ["left", "center", "right"],
+			description: "Where the copyright statement is placed.",
+		},
+		copyRightText: {
+			table: {
+				disable: true,
+			},
+			description: "Whether the footer displays a copyright statement.",
+		},
+		hasCopyRight: {
+			control: "boolean",
+			description:
+				"Whether the footer has a copyright statement displayed",
+		},
+	},
+} as Meta<FooterProps>;
+
+const Template: StoryFn<typeof StoryBookViewFooter> = (args) => (
+	<StoryBookViewFooter
+		{...args}
+		storybookStyle={{
+			backgroundColor: args.backgroundColor,
+		}}
+	/>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+	logoBorderRadius: true,
+	hasNavItems: false,
+	hasSocial: true,
+	logoHoverColor: "blue",
+	backgroundColor: "gray",
+	contactTitle: (
+		<Text
+			size={"md"}
+			color={"black"}
+			text="Contact Us:"
+			fontFamily={""}
+			additionalClasses="font-bold uppercase"
+		/>
+	),
+	copyRightText: (
+		<Text
+			size={"md"}
+			color={"black"}
+			text="Copyright © 2024 - All right reserved by Generic Company"
+			fontFamily={""}
+			additionalClasses="text-center"
+		/>
+	),
+	copyRightTextPlacement: "center",
+	socialPlacement: "center",
+};
+
+export const CompassFooter = Template.bind({});
+CompassFooter.args = {
+	logo: (
+		<Image
+			src="../../../assets/compass-logo.png"
+			alt="Generic Compass Logo."
+			background={false}
+			additionalClasses=" w-40 p-2"
+		/>
+	),
+	title: (
+		<Text
+			size={"xl"}
+			color={""}
+			text={"Compass Website"}
+			fontFamily={""}
+			tag={"h2"}
+			additionalClasses="font-bold uppercase pl-2 mt-2 max-md:text-sm"
+		/>
+	),
+	slogan: (
+		<Text
+			size={"md"}
+			color={""}
+			text={"Great slogan goes here."}
+			fontFamily={""}
+			tag={"p"}
+			additionalClasses="pl-2"
+		/>
+	),
+	copyRightText: (
+		<Text
+			size={"md"}
+			color={"black"}
+			text="Copyright © 2024 - All right reserved by Generic Company"
+			fontFamily={""}
+			additionalClasses="text-center"
+		/>
+	),
+	socialTitle: (
+		<Text
+			size={"md"}
+			color={"black"}
+			text="Connect"
+			fontFamily={""}
+			additionalClasses="font-bold uppercase w-full"
+		/>
+	),
+	contactTitle: (
+		<Text
+			size={"md"}
+			color={"black"}
+			text="Contact Us:"
+			fontFamily={""}
+			additionalClasses="font-bold uppercase"
+		/>
+	),
+	logoBorderRadius: true,
+	hasNavItems: true,
+	hasSocial: true,
+	logoHoverColor: "green",
+	backgroundColor: "green",
+	accordionGap: "gap-1",
+	copyRightTextPlacement: "center",
+	socialPlacement: "center",
+	accordionParentStyle: "border-b border-black p-2 w-full",
+	accordionExpandedStyle: "pl-3 py-3",
+};
+
+export const AlternateMobileNavStyle = Template.bind({});
+AlternateMobileNavStyle.args = {
+	logo: (
+		<Image
+			src="../../../assets/compass-logo.png"
+			alt="Generic Compass Logo."
+			background={false}
+			additionalClasses=" w-40 p-2"
+		/>
+	),
+	title: (
+		<Text
+			size={"xl"}
+			color={""}
+			text={"Compass Website"}
+			fontFamily={""}
+			tag={"h2"}
+			additionalClasses="font-bold uppercase pl-2 mt-2 max-md:text-sm"
+		/>
+	),
+	slogan: (
+		<Text
+			size={"md"}
+			color={""}
+			text={"Great slogan goes here."}
+			fontFamily={""}
+			tag={"p"}
+			additionalClasses="pl-2"
+		/>
+	),
+	copyRightText: (
+		<Text
+			size={"md"}
+			color={"black"}
+			text="Copyright © 2024 - All right reserved by Generic Company"
+			fontFamily={""}
+			additionalClasses="text-center"
+		/>
+	),
+	socialTitle: (
+		<Text
+			size={"md"}
+			color={"black"}
+			text="Connect"
+			fontFamily={""}
+			additionalClasses="font-bold uppercase w-full"
+		/>
+	),
+	contactTitle: (
+		<Text
+			size={"md"}
+			color={"black"}
+			text="Contact Us:"
+			fontFamily={""}
+			additionalClasses="font-bold uppercase"
+		/>
+	),
+	logoBorderRadius: true,
+	hasNavItems: true,
+	hasSocial: true,
+	accordionGap: "gap-2",
+	logoHoverColor: "green",
+	backgroundColor: "green",
+	copyRightTextPlacement: "center",
+	socialPlacement: "center",
+	accordionParentStyle:
+		"rounded-md border-black p-2 w-full bg-teal-700 text-white",
+	accordionExpandedStyle: "pl-2 py-3",
+};

package/src/components/Footer/Footer.test.tsx

@@ -0,0 +1,90 @@
+import "../../../dist/main.css";
+import { render, screen, within } from "@testing-library/react";
+import { describe, test, expect, beforeEach } from "vitest";
+
+import Footer from "./Footer";
+import Image from "../Image/Image";
+import {
+	DUMMYCONTACTDATA,
+	DUMMYNAVDATA,
+	DUMMYSOCIALDATA,
+} from "./DUMMYFOOTERDATA.json";
+
+describe("<Footer /> with all props (pill, icons, input, logo)", () => {
+	beforeEach(() => {
+		render(
+			<Footer
+				logo={
+					<Image
+						src="../../../assets/Logo.png"
+						alt="Generic Company Logo."
+						background={false}
+						additionalClasses=" w-40 "
+					/>
+				}
+				hasSlogan={true}
+				hasTitle={false}
+				slogan="Great slogan goes here."
+				backgroundColor={"gray"}
+				logoBorderRadius
+				logoHoverColor={"blue"}
+				hasNavItems={true}
+				hasSocial={true}
+				hasContact={true}
+				socialData={DUMMYSOCIALDATA}
+				navData={DUMMYNAVDATA}
+				contactData={DUMMYCONTACTDATA}
+			/>
+		);
+	});
+
+	test("renders Footer component", () => {
+		expect(screen.getByTestId("footer")).toBeInTheDocument();
+	});
+
+	test("renders correct background color class", () => {
+		const footer = screen.getByTestId("footer");
+		expect(footer).toHaveClass("bg-slate-200");
+	});
+
+	test("contains correct logo from Image component", () => {
+		const footerLogo = screen.getByTestId("footer-logo");
+		const logoImage = footerLogo.querySelector("img");
+		expect(logoImage).toHaveAttribute("src", "../../../assets/Logo.png");
+	});
+
+	test("contains correct alt text from Image component", () => {
+		const footerLogo = screen.getByTestId("footer-logo");
+		const logoImage = footerLogo.querySelector("img");
+		expect(logoImage).toHaveAttribute("alt", "Generic Company Logo.");
+	});
+
+	test("contains correct slogan", () => {
+		const titleSloganElement = screen.getByTestId("title-slogan");
+
+		const sloganElement = within(titleSloganElement).getByTestId("slogan");
+		expect(sloganElement).toBeInTheDocument();
+		expect(sloganElement).toHaveTextContent("Great slogan goes here.");
+	});
+
+	test("contains correct site navigation ", () => {
+		expect(
+			screen.getByTestId("footer-site-navigation")
+		).toBeInTheDocument();
+
+		expect(screen.getByTestId("About")).toBeInTheDocument();
+		expect(screen.getByTestId("Projects")).toBeInTheDocument();
+		expect(screen.getByTestId("Community")).toBeInTheDocument();
+		expect(screen.getByTestId("Store")).toBeInTheDocument();
+	});
+
+	test("contains correct social navigation ", () => {
+		expect(
+			screen.getByTestId("footer-social-navigation")
+		).toBeInTheDocument();
+
+		expect(screen.getByTestId("Twitter")).toBeInTheDocument();
+		expect(screen.getByTestId("YouTube")).toBeInTheDocument();
+		expect(screen.getByTestId("Facebook")).toBeInTheDocument();
+	});
+});

package/src/components/Footer/Footer.tsx

@@ -0,0 +1,159 @@
+import React from "react";
+import Image from "../Image/Image";
+
+import {
+	DUMMYCONTACTDATA,
+	DUMMYNAVDATA,
+	DUMMYSOCIALDATA,
+} from "./DUMMYFOOTERDATA.json";
+
+import {
+	getLogoClasses,
+	getBackgroundColor,
+	getSocialPlacement,
+	getCopyRightPlacement,
+} from "./footerClassNames";
+
+import type { FooterProps } from "./Footer.types";
+import { SocialList } from "../../utils/generateSocialList";
+import { NavList } from "../../utils/generateNavMenu";
+import { Accordion } from "../../utils/generateAccordionItem";
+import { FooterContacts } from "../../utils/generateFooterContacts";
+
+const Footer: React.FC<FooterProps> = ({
+	logo = (
+		<Image
+			src="../../../assets/Logo.png"
+			alt="Generic Company Logo."
+			background={false}
+			additionalClasses=" w-40 p-2"
+		/>
+	),
+	hasTitle,
+	hasSlogan,
+	title,
+	slogan,
+	backgroundColor,
+	logoBorderRadius,
+	logoHoverColor,
+	hasNavItems = true,
+	hasSocial = true,
+	hasContact = true,
+	hasCopyRight = true,
+	copyRightText,
+	socialData = DUMMYSOCIALDATA,
+	navData = DUMMYNAVDATA,
+	contactData = DUMMYCONTACTDATA,
+	socialTitle,
+	contactTitle,
+	copyRightTextPlacement,
+	socialPlacement,
+	accordionParentStyle = "border-2 rounded-md border-black p-2 w-full",
+	accordionExpandedStyle = "pl-3",
+	accordionGap,
+}) => {
+	let logoClasses = getLogoClasses(logoHoverColor, logoBorderRadius);
+	let backgroundColorClasses = getBackgroundColor(backgroundColor);
+	let socialPlacementClasses = getSocialPlacement(socialPlacement);
+	let copyRightTextPlacementClasses = getCopyRightPlacement(
+		copyRightTextPlacement
+	);
+
+	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"
+		>
+			<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}>
+						<a tabIndex={0} href="" data-testid="footer-logo">
+							{logo}
+						</a>
+					</div>
+					<div data-testid="title-slogan">
+						{hasTitle ? (
+							<div data-testid="title">{title}</div>
+						) : (
+							<></>
+						)}
+						{hasSlogan ? (
+							<div data-testid="slogan">{slogan}</div>
+						) : (
+							<></>
+						)}
+					</div>
+				</div>
+				{hasNavItems ? (
+					<>
+						<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>
+					</>
+				) : (
+					<></>
+				)}
+				{hasContact ? (
+					<div
+						className="flex flex-col space-between"
+						data-testid="footer-contact-info"
+					>
+						{contactTitle ? contactTitle : <></>}
+						<FooterContacts contactDataList={contactData} />
+					</div>
+				) : (
+					<></>
+				)}
+			</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">
+						<SocialList socialDataList={socialData} />
+					</div>
+				</nav>
+			) : (
+				<></>
+			)}
+			{hasCopyRight ? (
+				<div
+					className={`w-full ${copyRightTextPlacementClasses}`}
+					aria-hidden="false"
+				>
+					{copyRightText}
+				</div>
+			) : (
+				<></>
+			)}
+		</footer>
+	);
+};
+
+export default Footer;

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

@@ -0,0 +1,61 @@
+import {
+	DUMMYCONTACTDATA,
+	DUMMYNAVDATA,
+	DUMMYSOCIALDATA,
+} from "./DUMMYFOOTERDATA.json";
+
+export interface NavItem {
+	title: string;
+	links: Array<{ link: string; menuItem: string }>;
+}
+
+export interface SocialItem {
+	href: string;
+	xmlns: string;
+	ariaLabel: string;
+	path: string;
+}
+
+
+export interface FooterProps {
+	onClick?: (
+		e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>
+	) => void;
+	// LOGO
+	hasLogo?: boolean;
+	logo?: React.ReactNode;
+	backgroundColor?: string;
+	logoHoverColor?: string;
+	logoBorderRadius?: boolean;
+
+	// TITLE AND SLOGAN
+	hasTitle?: boolean;
+	hasSlogan?: boolean;
+	title?: React.ReactNode;
+	slogan?: React.ReactNode;
+
+	// NAV
+	hasNavItems?: boolean;
+	navData?: typeof DUMMYNAVDATA;
+	accordionParentStyle?: string;
+	accordionExpandedStyle?: string;
+	accordionGap?: string;
+
+	// SOCIAL
+	hasSocial?: boolean;
+	socialData?: typeof DUMMYSOCIALDATA;
+	socialTitle?: React.ReactNode;
+	socialPlacement?: "left" | "center" | "right";
+
+	// CONTACT
+	contactTitle?: React.ReactNode;
+	hasContact?: boolean;
+	contactData?: typeof DUMMYCONTACTDATA;
+
+	// COPYRIGHT
+	hasCopyRight?: boolean;
+	copyRightText?: React.ReactNode;
+	copyRightTextPlacement?: "left" | "center" | "right";
+
+	children?: React.ReactNode;
+}

package/src/components/Footer/footerClassNames.tsx

@@ -0,0 +1,57 @@
+import classNames from "classNames";
+
+export const getLogoClasses = (
+	logoHoverColor: string | undefined,
+	logoBorderRadius: boolean | undefined
+) => {
+	return classNames(
+		"flex",
+		"justify-center",
+		{
+			"rounded-full": logoBorderRadius === true,
+			"rounded-none": logoBorderRadius === false,
+		},
+		{
+			"hover:bg-blue-300": logoHoverColor === "blue",
+			"hover:bg-teal-300": logoHoverColor === "green",
+		}
+	);
+};
+
+
+export const getBackgroundColor = (
+	backgroundColor: string | undefined,
+) => {
+	return classNames(
+		{
+			"bg-teal-50": backgroundColor === "green",
+			"bg-slate-200": backgroundColor === "gray",
+			"bg-transparent": backgroundColor === "none",
+		},
+	);
+};
+
+export const getSocialPlacement = (
+	socialPlacement: string | undefined,
+) => {
+	return classNames(
+		{
+			"justify-start pl-4": socialPlacement === "left",
+			"justify-center text-center": socialPlacement === "center",
+			"justify-end": socialPlacement === "right",
+		}
+	);
+};
+
+export const getCopyRightPlacement = (
+	copyRightTextPlacement: string | undefined,
+) => {
+	return classNames(
+		{
+			"justify-start pl-4": copyRightTextPlacement === "left",
+			"justify-center": copyRightTextPlacement === "center",
+			"justify-end": copyRightTextPlacement === "right",
+		}
+	);
+};
+