@agilant/toga-blox 1.0.5

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

@@ -0,0 +1,361 @@
+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"
+								tagStyle={false}
+								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}
+									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

@@ -0,0 +1,10 @@
+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/Page/ViewPageTemplate.types.ts

@@ -0,0 +1,6 @@
+import React, { ReactNode } from "react";
+
+export interface ViewPageTemplateTypes {
+	children: ReactNode;
+	bgColor?: string;
+}

package/src/components/Page/index.ts

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

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

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

@@ -0,0 +1,12 @@
+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/PageSection.types.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+
+export interface PageSectionTypes {
+	children: ReactNode;
+	sectionContainerClasses?: string;
+}

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

@@ -0,0 +1,88 @@
+import { describe, it, expect, beforeEach, test } 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}
+								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");
+	});
+});

package/src/components/PageSection/index.ts

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

package/src/components/Text/Text.stories.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+import Text, { TextTypes } from ".";
+
+interface TextStoryProps extends TextTypes {
+	size: "xs" | "sm" | "md" | "lg" | "xl";
+	color: "red" | "blue" | "green" | "primary" | "slate";
+	as: "h1" | "h2" | "h3" | "h4" | "h5" | "p";
+	fontFamily: "sans" | "mono" | "serif";
+	children: React.ReactNode;
+}
+
+export default {
+	title: "Components/Text",
+	component: Text,
+	argTypes: {
+		size: {
+			control: "select",
+			options: ["xs", "sm", "md", "lg", "xl"],
+			description: "The font size for the text.",
+		},
+		color: {
+			control: "select",
+			options: ["red", "blue", "green", "slate"],
+			description: "The color of the text.",
+		},
+		tag: {
+			control: "select",
+			options: ["h1", "h2", "h3", "h4", "h5", "p"],
+			description: "The type of HTML element the text should be.",
+		},
+		fontFamily: {
+			control: "select",
+			options: ["sans", "mono", "serif"],
+			description: "The type of font family.",
+		},
+		text: {
+			control: "text",
+			description: "The main text displayed on the toaster.",
+		},
+	},
+	// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+	tags: ["autodocs"],
+	parameters: {
+		// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+		layout: "centered",
+	},
+} as Meta<TextStoryProps>;
+
+const Template: StoryFn<TextStoryProps> = (args) => <Text {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+	size: "xl",
+	color: "slate",
+	tag: "h2",
+	fontFamily: "sans",
+	text: "Testing",
+	additionalClasses: "p-5",
+};