@agilant/toga-blox 1.0.9 → 1.0.11

package/src/components/Page/ViewPageTemplate.test.tsx

@@ -1,361 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import { describe, expect, beforeEach, test, it } from "vitest";
-import ViewTemplatePage from "./ViewPageTemplate";
-import Hero from "../Hero/Hero";
-import PageSection from "../PageSection/PageSection";
-import Badge from "../Badge/Badge";
-import Text from "../Text/Text";
-import Image from "../Image/Image";
-import Nav from "../Nav/Nav";
-import Card from "../Card/Card";
-import FormButton from "../FormButton";
-import CompassCardTemplate from "../Card/templates/CompassCardTemplate";
-import Footer from "../Footer/Footer";
-import { DUMMYICONCOMPASSDATA } from "../Header/DUMMYICONDATA.json";
-import { DUMMYCOMPASSNAVDATA } from "../Nav/DUMMYNAVDATA.json";
-import { DUMMYCOMPASSPRODUCTDATA } from "../Card/DUMMYPRODUCTDATA.json";
-import Header from "../Header/Header";
-import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
-import GenericList from "../GenericList/GenericList";
-
-describe("<ViewTemplatePage />", () => {
-	it("renders with default background color", () => {
-		const { container } = render(
-			<ViewTemplatePage>
-				<p>Content goes here</p>
-			</ViewTemplatePage>
-		);
-
-		// Check if the default background color is applied
-		expect(container.firstChild).toHaveClass("bg-gray-100");
-	});
-
-	it("renders with custom background color", () => {
-		const customBgColor = "bg-red-500";
-		const { container } = render(
-			<ViewTemplatePage bgColor={customBgColor}>
-				<p>Content goes here</p>
-			</ViewTemplatePage>
-		);
-
-		// Check if the custom background color is applied
-		expect(container.firstChild).toHaveClass(customBgColor);
-	});
-
-	it("renders children correctly", () => {
-		const { getByText } = render(
-			<ViewTemplatePage>
-				<p>Test child content</p>
-			</ViewTemplatePage>
-		);
-
-		// Check if the child content is rendered
-		expect(getByText("Test child content")).toBeInTheDocument();
-	});
-});
-
-describe("<ViewTemplatePage />", () => {
-	beforeEach(() => {
-		render(
-			<ViewTemplatePage>
-				children: [ <div className="h-16"></div>,
-				<div className="fixed top-0 w-full z-[1000]">
-					<Header
-						hasIcons={true}
-						iconsData={DUMMYICONCOMPASSDATA}
-						logoBorderRadius={true}
-						hasSearchBar={true}
-						hasBadge={true}
-						hasNavItems={true}
-						logoHoverColor="green"
-						backgroundColor="gray"
-						bottomBorderColor="green"
-						badge={
-							<Badge
-								type="href"
-								to="#"
-								color="green"
-								hoverColor="green"
-								borderColor="none"
-								mobileIcon={getFontAwesomeIcon("phone")}
-								mobileIconLabel="Contact Us"
-								onClick={() =>
-									alert("Redirect to Contact Us page")
-								}
-								image={
-									<Image
-										src="../../../assets/contact-image.png"
-										alt=""
-										background={false}
-										additionalClasses="flex justify-center w-8 h-8 max-md:hidden"
-									/>
-								}
-								text={
-									<>
-										<Text
-											size="sm"
-											color="primary"
-											fontFamily="serif"
-											text="Contact Us"
-											tag="h2"
-											additionalClasses="pl-2 pb-0 font-bold"
-										/>
-										<Text
-											size="xs"
-											color="primary"
-											fontFamily="serif"
-											text="1-800-800-8000"
-											tag="p"
-											additionalClasses="pl-2 pt-0"
-										/>
-									</>
-								}
-							/>
-						}
-						logo={
-							<Image
-								src="../../../assets/compass-logo.png"
-								alt="Generic Company Logo."
-								background={false}
-								additionalClasses=" w-40 p-2"
-							/>
-						}
-						nav={
-							<Nav
-								navData={DUMMYCOMPASSNAVDATA}
-								navBackgroundColor={"#FFFFF"}
-								parentHoverBackground={"none"}
-								parentHoverFontColor={"black"}
-								parentHoverUnderline={true}
-								parentHoverBorderColor={"none"}
-								parentShape={"cornered"}
-								parentBackground={"none"}
-								parentBorderColor={"none"}
-								submenuBackgroundColor={"white"}
-								submenuHoverBackground={"green"}
-								submenuHoverBorderStyle={"top-bottom"}
-								submenuHoverBorderColor={"green"}
-								includeSubmenuImages={true}
-								mobileBreakpoint={"extraLarge"}
-								accordionParentStyle={
-									"cornered p-2 w-full border-b-2 border-b-teal-700 text-black"
-								}
-								accordionExpandedStyle={"pl-2 py-3"}
-							/>
-						}
-					/>
-				</div>
-				,
-				<Hero
-					key="hero"
-					textAlignment={"right"}
-					background="image"
-					src="../../../assets/compass-tech-hero-bg.png"
-					text={
-						<Text
-							size="xxxl"
-							color="white"
-							fontFamily="serif"
-							text="Equip your team with exactly what they need"
-							tag="h1"
-							additionalClasses="text-left w-3/4 max-xl:text-xl max-lg:text-xl max-md:hidden"
-						/>
-					}
-				/>
-				,
-				<div data-testid="kits-header-section">
-					<PageSection
-						key="pageSection"
-						sectionContainerClasses="w-full bg-slate-100 flex flex-col p-6
-				justify-center items-center h-[100%]"
-					>
-						<Text
-							size="xxxl"
-							color="black"
-							fontFamily="serif"
-							text="Kits"
-							tag="h2"
-							additionalClasses="my-8"
-						/>
-					</PageSection>
-				</div>
-				,
-				<div data-testid="kits-cards-section">
-					<PageSection
-						key="pageSection"
-						sectionContainerClasses="w-full bg-slate-100 flex flex-col p-6
-			justify-center items-center h-[100%]"
-					>
-						<>
-							<div className="w-3/4 grid grid-cols-4 gap-8 h-[100%] max-xl:gap-1 max-lg:grid-cols-2 max-lg:gap-y-24 max-lg:justify-items-center">
-								<GenericList
-									data={DUMMYCOMPASSPRODUCTDATA}
-									listType="none"
-									renderItem={(item) => (
-										<Card
-											containerClasses={"w-3/4"}
-											cardBackgroundColor={
-												item.cardBackgroundColor
-											}
-											cardBorderRadius={
-												item.cardBorderRadius
-											}
-											cardBorderColor={
-												item.cardBorderColor
-											}
-											cardBoxShadow={item.cardBoxShadow}
-											key={item.id}
-										>
-											<CompassCardTemplate data={item} />
-										</Card>
-									)}
-								/>
-							</div>
-						</>
-					</PageSection>
-				</div>
-				,
-				<div data-testid="survey-section">
-					<PageSection
-						sectionContainerClasses="w-full bg-yellow-400 flex p-6
-				justify-center items-center h-[100%] mt-6"
-					>
-						<Text
-							size="xl"
-							color="black"
-							fontFamily="serif"
-							text="Equip your team with exactly what they need"
-							tag="h1"
-							additionalClasses="mr-8"
-						/>
-						<FormButton
-							text={
-								<Text
-									size={""}
-									color={""}
-									text={"Take the Survey!"}
-									fontFamily={""}
-								/>
-							}
-							color="green"
-							fontColor="white"
-							size="md"
-							shape="semiRounded"
-							borderColor="none"
-							hoverBackground="green"
-							hoverFontColor="green"
-							hoverBorderColor="green"
-							hoverUnderline={true}
-							onClick={() => alert("Button clicked!")}
-							as="a"
-						/>
-					</PageSection>
-				</div>
-				,
-				<Footer
-					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"
-				/>
-				, ]
-			</ViewTemplatePage>
-		);
-	});
-
-	test("renders header on page", () => {
-		const header = screen.getByTestId("header");
-		expect(header).toBeInTheDocument();
-	});
-
-	test("renders hero on page", () => {
-		const hero = screen.getByTestId("image-background-hero");
-		expect(hero).toBeInTheDocument();
-	});
-
-	test("renders hero on page", () => {
-		const hero = screen.getByTestId("image-background-hero");
-		expect(hero).toBeInTheDocument();
-	});
-
-	test("renders kits header on page", () => {
-		const kitsHeading = screen.getByTestId("kits-header-section");
-		expect(kitsHeading).toBeInTheDocument();
-	});
-
-	test("renders cards section on page", () => {
-		const kitsCards = screen.getByTestId("kits-cards-section");
-		expect(kitsCards).toBeInTheDocument();
-	});
-
-	test("renders survey section on page", () => {
-		const surveySection = screen.getByTestId("survey-section");
-		expect(surveySection).toBeInTheDocument();
-	});
-
-	test("renders footer on page", () => {
-		const footer = screen.getByTestId("footer");
-		expect(footer).toBeInTheDocument();
-	});
-});

package/src/components/Page/ViewPageTemplate.tsx

@@ -1,10 +0,0 @@
-import { ViewPageTemplateTypes } from ".";
-
-const ViewTemplatePage: React.FC<ViewPageTemplateTypes> = ({
-	children,
-	bgColor = "bg-gray-100",
-}) => {
-	return <div className={`${bgColor}`}>{children}</div>;
-};
-
-export default ViewTemplatePage;

package/src/components/PageSection/PageSection.stories.tsx

@@ -1,116 +0,0 @@
-import { Meta, StoryFn } from "@storybook/react";
-import Section, { PageSectionTypes } from ".";
-import Card from "../Card/Card";
-import Text from "../Text/Text";
-import GenericList from "../GenericList/GenericList";
-import {
-	DUMMYPRODUCTDATA,
-	DUMMYCOMPASSPRODUCTDATA,
-} from "../../components/Card/DUMMYPRODUCTDATA.json";
-import HorizontalCardTemplate from "../Card/templates/HorizontalCardTemplate";
-import CompassCardTemplate from "../Card/templates/CompassCardTemplate";
-
-export default {
-	title: "Components/Section",
-	component: Section,
-	argTypes: {
-		children: {
-			control: {
-				type: "none",
-			},
-		},
-		sectionContainerClasses: {
-			control: {
-				type: "none",
-			},
-		},
-	},
-} as Meta;
-
-const Template: StoryFn<PageSectionTypes> = (args) => <Section {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-	sectionContainerClasses:
-		" flex flex-row justify-center items-center flex-wrap lg:gap-10 gap-4  my-20 lg:max-h-view-page  max-h-fit  min-h-fit overflow-scroll px-4",
-	children: (
-		<>
-			<div className="bg-red-400 p-4">Content 1</div>
-			<div className="bg-green-400 p-4">Content 2</div>
-			<div className="bg-blue-400 p-4">Content 3</div>
-		</>
-	),
-};
-
-export const HorizontalCardsSection = Template.bind({});
-HorizontalCardsSection.args = {
-	sectionContainerClasses:
-		"w-full bg-slate-100 flex flex-col p-6 justify-center items-center",
-	children: (
-		<>
-			<Text
-				tag={"h1"}
-				size={"lg"}
-				text={"Example of a section with horizontal cards:"}
-				color={"black"}
-				fontFamily={""}
-				additionalClasses={"pb-12"}
-			/>
-			<GenericList
-				data={DUMMYPRODUCTDATA}
-				listType="none"
-				renderItem={(item) => (
-					<Card
-						containerClasses={
-							"flex mb-6 max-sm:w-1/2 max-sm:flex-col overflow-hidden"
-						}
-						cardBackgroundColor={item.cardBackgroundColor}
-						cardBorderRadius={item.cardBorderRadius}
-						cardBorderColor={item.cardBorderColor}
-						cardBoxShadow={item.cardBoxShadow}
-						key={item.id}
-					>
-						<HorizontalCardTemplate data={item} />
-					</Card>
-				)}
-			/>
-		</>
-	),
-};
-
-export const CompassCardsSection = Template.bind({});
-CompassCardsSection.args = {
-	sectionContainerClasses:
-		"w-full bg-slate-100 flex flex-col p-6 justify-center items-center h-[100%]",
-	children: (
-		<>
-			<Text
-				tag={"h1"}
-				size={"lg"}
-				text={"Example of a section with horizontal cards:"}
-				color={"black"}
-				fontFamily={""}
-				additionalClasses={"pb-12"}
-			/>
-			<GenericList
-				data={DUMMYCOMPASSPRODUCTDATA}
-				listType="none"
-				containerClasses="w-full grid grid-cols-4 gap-y-12 gap-x-8 h-full max-lg:grid-cols-2 max-lg:gap-y-12 max-lg:gap-x-2 max-md:gap-12 max-sm:w-[90%] max-sm:gap-8 justify-items-center"
-				renderItem={(item) => (
-					<Card
-						containerClasses={ 
-							"w-full h-full shadow-md overflow-hidden rounded-md transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300 max-lg:transition-none max-lg:hover:transform-none max-w-72"
-						}
-						cardBackgroundColor={item.cardBackgroundColor}
-						cardBorderRadius={item.cardBorderRadius}
-						cardBorderColor={item.cardBorderColor}
-						cardBoxShadow={item.cardBoxShadow}
-						key={item.id}
-					>
-						<CompassCardTemplate data={item} />
-					</Card>
-				)}
-			/>
-		</>
-	),
-};

package/src/components/PageSection/PageSection.tsx

@@ -1,12 +0,0 @@
-import React from "react";
-import { PageSectionTypes } from ".";
-
-const Section: React.FC<PageSectionTypes> = ({ children, sectionContainerClasses,  }) => {
-	return (
-		<section className={`${sectionContainerClasses}`} data-testid="section">
-			{children}
-		</section>
-	);
-};
-
-export default Section;

package/src/components/PageSection/PageSections.test.tsx

@@ -1,89 +0,0 @@
-import { describe, it, expect, beforeEach } from "vitest";
-import { render, screen } from "@testing-library/react";
-import Section from "./PageSection";
-import Text from "../Text/Text";
-import Card from "../Card/Card";
-import GenericList from "../GenericList/GenericList";
-import CompassCardTemplate from "../Card/templates/CompassCardTemplate";
-import { DUMMYCOMPASSPRODUCTDATA } from "../../components/Card/DUMMYPRODUCTDATA.json";
-
-describe("<Section />", () => {
-	beforeEach(() => {
-		render(
-			<Section
-				sectionContainerClasses="flex flex-row justify-center items-center flex-wrap lg:gap-10 gap-4  my-20 lg:max-h-view-page  max-h-fit  min-h-fit overflow-scroll px-4"
-				children={
-					<>
-						<div className="bg-red-400 p-4">Content 1</div>
-						<div className="bg-green-400 p-4">Content 2</div>
-						<div className="bg-blue-400 p-4">Content 3</div>
-					</>
-				}
-			/>
-		);
-	});
-
-	it("renders children content", () => {
-		const { getByText } = render(
-			<Section>
-				<div>Test Child</div>
-			</Section>
-		);
-		expect(getByText("Test Child")).toBeInTheDocument();
-	});
-
-	it("displays children in a horizontal row", () => {
-		const section = screen.getByTestId("section");
-		expect(section).toHaveClass("flex-row");
-	});
-});
-
-describe("<Section /> with compass cards", () => {
-	it("displays correct cards", () => {
-		render(
-			<Section
-				sectionContainerClasses="flex flex-row justify-center items-center flex-wrap lg:gap-10 gap-4  my-20 lg:max-h-view-page max-h-fit  min-h-fit overflow-scroll px-4"
-				children={
-					<>
-						<Text
-							tag={"h1"}
-							size={"lg"}
-							text={"Example of a section with horizontal cards:"}
-							color={"black"}
-							fontFamily={""}
-							additionalClasses={"pb-12"}
-						/>
-						<div className="grid grid-cols-4 gap-8 h-[100%] max-xl:gap-1 max-lg:grid-cols-2 max-lg:gap-y-24 max-lg:justify-items-center">
-							<GenericList
-								data={DUMMYCOMPASSPRODUCTDATA}
-								listType="none"
-								renderItem={(item) => (
-									<Card
-										containerClasses={"w-3/4"}
-										cardBackgroundColor={
-											item.cardBackgroundColor
-										}
-										cardBorderRadius={item.cardBorderRadius}
-										cardBorderColor={item.cardBorderColor}
-										cardBoxShadow={item.cardBoxShadow}
-									>
-										<CompassCardTemplate data={item} />
-									</Card>
-								)}
-							/>
-						</div>
-					</>
-				}
-			/>
-		);
-
-		const cards = screen.queryAllByTestId("card");
-		expect(cards.length).toBe(16);
-
-		expect(cards[0]).toHaveTextContent(
-			"Compass Sales Lenovo TP X13 Yoga G3 Laptop"
-		);
-
-		expect(cards[3]).toHaveTextContent("Exec RoadWarrior");
-	});
-});