@agilant/toga-blox 1.0.9 → 1.0.11

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

@@ -1,283 +0,0 @@
-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",
-	component: StoryBookViewFooter,
-
-	argTypes: {
-		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: {
-			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",
-		},
-		hasNavItems: {
-			control: "boolean",
-			description: "Whether the footer has navigation items.",
-		},
-		accordionGap: {
-			table: {
-				disable: true,
-			},
-		},
-		accordionParentStyle: {
-			table: {
-				disable: true,
-			},
-		},
-		accordionExpandedStyle: {
-			table: {
-				disable: true,
-			},
-		},
-		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",
-		},
-		contactTitle: {
-			table: {
-				disable: true,
-			},
-		},
-		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",
-		},
-	},
-	parameters: {
-		tags: ["autodocs"],
-	},
-} 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: "flex justify-center mt-4",
-};
-
-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-2",
-	copyRightTextPlacement: "center",
-	socialPlacement: "flex justify-center mt-4",
-	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: "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.test.tsx

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

@@ -1,96 +0,0 @@
-import React from "react";
-import Image from "../Image/Image";
-import { DUMMYCONTACTDATA, DUMMYNAVDATA, DUMMYSOCIALDATA } from "./DUMMYFOOTERDATA.json";
-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 = "bg-gray-800",
-	logoBorderRadius = "rounded-md",
-	logoHoverColor = "hover:bg-gray-700",
-	hasNavItems = true,
-	hasSocial = true,
-	hasContact = true,
-	hasCopyRight = true,
-	copyRightText,
-	socialData = DUMMYSOCIALDATA,
-	navData = DUMMYNAVDATA,
-	contactData = DUMMYCONTACTDATA,
-	socialTitle,
-	contactTitle,
-	copyRightTextPlacement = "text-center",
-	socialPlacement = "flex justify-center mt-4",
-	accordionParentStyle = "border-2 rounded-md border-black p-2 w-full",
-	accordionExpandedStyle = "pl-3",
-	accordionGap = "gap-4",
-}) => {
-	const logoClasses = `${logoHoverColor} ${logoBorderRadius}`;
-
-	return (
-		<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}>
-						<a tabIndex={0} href="" data-testid="footer-logo">
-							{logo}
-						</a>
-					</div>
-					<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}>
-							<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>
-					</>
-				) : null}
-				{hasContact ? (
-					<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 ${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 ${copyRightTextPlacement}`} aria-hidden="false">
-					{copyRightText}
-				</div>
-			) : null}
-		</footer>
-	);
-};
-
-export default Footer;

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

@@ -1,61 +0,0 @@
-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?: string;
-
-	// CONTACT
-	contactTitle?: React.ReactNode;
-	hasContact?: boolean;
-	contactData?: typeof DUMMYCONTACTDATA;
-
-	// COPYRIGHT
-	hasCopyRight?: boolean;
-	copyRightText?: React.ReactNode;
-	copyRightTextPlacement?: string;
-
-	children?: React.ReactNode;
-}