@agilant/toga-blox 1.0.5

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

@@ -0,0 +1,546 @@
+import { Meta, StoryFn } from "@storybook/react";
+import { withStoryBook } from "../../hoc";
+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 Input from "../Input/Input";
+import Nav from "../Nav/Nav";
+import Card from "../Card/Card";
+import FormButton from "../FormButton";
+import CompassCardTemplate from "../Card/templates/CompassCardTemplate";
+import ViewTemplatePage from "./ViewPageTemplate";
+import Footer from "../Footer/Footer";
+import DUMMYICONDATA from "../Header/DUMMYICONDATA.json";
+import DynamicIconList from "../GenericList/templates/DynamicIconList";
+import GenericList from "../GenericList/GenericList";
+import { DUMMYCOMPASSNAVDATA } from "../Nav/DUMMYNAVDATA.json";
+import { DUMMYCOMPASSPRODUCTDATA } from "../Card/DUMMYPRODUCTDATA.json";
+import TableDataDummy from "./TableDataDummy";
+import Header from "../Header/Header";
+import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
+
+// Wrap your component with the HOC
+const StorybookViewTemplatePage = withStoryBook(ViewTemplatePage);
+
+export default {
+	title: "Page/ViewPageTemplate",
+	component: ViewTemplatePage,
+	argTypes: {
+		children: {
+			control: {
+				disable: true,
+			},
+			description: "nodes that can be passed to the component",
+		},
+	},
+
+	// tags: ["autodocs"],
+} as Meta;
+
+const Template: StoryFn<typeof StorybookViewTemplatePage> = (args) => (
+	<StorybookViewTemplatePage
+		{...args}
+		storybookStyle={{
+			backgroundColor: args.bgColor,
+		}}
+	/>
+);
+
+export const DefaultView = Template.bind({});
+DefaultView.args = {
+	children: (
+		<div className="min-h-96 flex items-center justify-center">
+			<PageSection key="pageSectionTwo">{<>Default page</>}</PageSection>
+		</div>
+	),
+};
+
+export const ViewWithHeroAndCardsWithGlassHeader = Template.bind({});
+ViewWithHeroAndCardsWithGlassHeader.args = {
+	children: [
+		//the div acts as a spacer for the header because the header is fixed
+		<div className="h-16" key="spacer"></div>,
+		<div className="fixed top-0 w-full z-[1000]" key="header">
+			<Header
+				mobileLeft={true}
+				hasIcons={true}
+				hasSearchBar={true}
+				hasBadge={true}
+				hasNavItems={true}
+				hasMobileMenu={true}
+				logoBorderRadius={true}
+				logoHoverColor="blue"
+				backgroundColor="gray"
+				bottomBorderColor="black"
+				mobileOpenIcon={getFontAwesomeIcon("hamburger")}
+				mobileCloseIcon={getFontAwesomeIcon("x")}
+				mobileMenuBackground="blue"
+				hasMobileIcons={true}
+				hasMobileNavItems={true}
+				hasMobileBadge={false}
+				hasMobileSearchBar={true}
+				hasAnimatedHamburgerButton={true}
+				icons={
+					<GenericList
+						hasVirtualization={false}
+						listDirection="horizontal"
+						listType="unordered"
+						containerClasses=""
+						data={DUMMYICONDATA.DUMMYICONTOGADATA}
+						renderItem={(item) => <DynamicIconList item={item} />}
+					/>
+				}
+				badge={
+					<Badge
+						type="href"
+						to="#"
+						color="blue"
+						hoverColor="blue"
+						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/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={"blue"}
+						submenuHoverBorderStyle={"top-bottom"}
+						submenuHoverBorderColor={"blue"}
+						includeSubmenuImages={true}
+						mobileBreakpoint={"extraLarge"}
+						accordionParentStyle={
+							"cornered p-2 w-full border-b-2 border-b-blue-700 text-black"
+						}
+						accordionExpandedStyle={"pl-2 py-3"}
+					/>
+				}
+				input={
+					<Input
+						labelVisible={false}
+						label={undefined}
+						inputType={"text"}
+						inputName={"search"}
+						borderColor="gray"
+						hasPlaceholder
+						placeholder={"Search"}
+						hasButton
+						backgroundColor="white"
+						additionalClasses="bg-blue-500"
+						button={
+							<FormButton
+								icon={getFontAwesomeIcon("search")}
+								color="blue"
+								hoverBackground="black"
+								hoverFontColor="white"
+								additionalClasses="h-full w-8 justify-center"
+								shape="none"
+							/>
+						}
+						inputWidth="w-full"
+					/>
+				}
+			/>
+		</div>,
+		<Hero key="hero" textAlignment={"center"} background="image" />,
+		<PageSection
+			key="pageSectionOne"
+			sectionContainerClasses="flex flex-col w-full h-full bg-slate-100 p-6
+			justify-center items-center max-sm:p-2 max-w-pageSectionMaxWidth mx-auto"
+		>
+			<GenericList
+				data={DUMMYCOMPASSPRODUCTDATA}
+				listType="unordered"
+				hasVirtualization={false}
+				containerClasses="w-full h-[100%] grid grid-cols-4 gap-y-12 gap-x-8 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>
+				)}
+			/>
+		</PageSection>,
+	],
+};
+
+export const ViewWithTable = Template.bind({});
+ViewWithTable.args = {
+	children: [
+		<Hero key="hero" textAlignment={"center"} background="gradient" />,
+		<PageSection key="pageSectionFour">
+			<TableDataDummy />
+		</PageSection>,
+	],
+};
+
+export const ViewWithTableAndTitle = Template.bind({});
+ViewWithTableAndTitle.args = {
+	children: [
+		<Hero key="hero" textAlignment={"left"} background="gradient" />,
+		<PageSection key="37">
+			<Text
+				size={"xxxl"}
+				color={"black"}
+				text={"Staff"}
+				fontFamily={""}
+				tag="h1"
+				additionalClasses="font-bold"
+			/>
+		</PageSection>,
+		<PageSection key="pageSectionFive">
+			<TableDataDummy />
+		</PageSection>,
+	],
+};
+
+export const CompassPageView = Template.bind({});
+CompassPageView.args = {
+	children: [
+		<div key="randomNumberOne">
+			<div className="h-16"></div>
+			<div className="fixed top-0 w-full z-[1000]">
+				<Header
+					mobileLeft={true}
+					icons={
+						<GenericList
+							hasVirtualization={false}
+							listDirection="horizontal"
+							containerClasses=""
+							listType="unordered"
+							data={DUMMYICONDATA.DUMMYICONCOMPASSDATA}
+							renderItem={(item) => (
+								<DynamicIconList item={item} />
+							)}
+						/>
+					}
+					hasIcons={true}
+					hasSearchBar={true}
+					hasBadge={true}
+					hasNavItems={true}
+					hasMobileMenu={true}
+					hasAnimatedHamburgerButton={true}
+					logoBorderRadius={true}
+					logoHoverColor="green"
+					backgroundColor="gray"
+					bottomBorderColor="green"
+					mobileOpenIcon={getFontAwesomeIcon("hamburger")}
+					mobileCloseIcon={getFontAwesomeIcon("x")}
+					mobileMenuBackground="green"
+					hasMobileIcons={true}
+					hasMobileNavItems={true}
+					hasMobileBadge={false}
+					hasMobileSearchBar={true}
+					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"}
+						/>
+					}
+					input={
+						<Input
+							labelVisible={false}
+							label={undefined}
+							inputType={"text"}
+							inputName={"search"}
+							borderColor="gray"
+							hasPlaceholder
+							placeholder={"Search"}
+							hasButton
+							backgroundColor="white"
+							additionalClasses="bg-blue-500"
+							button={
+								<FormButton
+									icon={getFontAwesomeIcon("search")}
+									color="green"
+									hoverBackground="black"
+									hoverFontColor="white"
+									additionalClasses="h-full w-8 justify-center"
+									shape="none"
+								/>
+							}
+							inputWidth="w-full"
+						/>
+					}
+				/>
+			</div>
+			<Hero
+				key="hero"
+				textAlignment={"left"}
+				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="w-3/4 max-sm:text-xl max-sm:w-3/4"
+					/>
+				}
+			/>
+			<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-4  max-sm:text-xl"
+				/>
+			</PageSection>
+			<PageSection
+				key="pageSectionOne"
+				sectionContainerClasses="flex flex-col w-full h-full bg-slate-100 p-6
+			justify-center items-center max-sm:p-2 max-w-pageSectionMaxWidth mx-auto"
+			>
+				<GenericList
+					data={DUMMYCOMPASSPRODUCTDATA}
+					hasVirtualization={false}
+					listType="unordered"
+					containerClasses="w-full grid grid-cols-4 gap-y-12 gap-x-8 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>
+					)}
+				/>
+			</PageSection>
+			<PageSection sectionContainerClasses="flex w-full bg-yellow-400 flex p-6 justify-center items-center h-[100%] mt-6 max-sm:flex-col">
+				<Text
+					size="xl"
+					color="black"
+					fontFamily="serif"
+					text="Help us improve your experience:"
+					tag="h2"
+					additionalClasses="p-6 max-sm:p-2 max-sm:text-lg"
+				/>
+				<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>
+			<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"
+					/>
+				}
+				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"
+			/>
+		</div>,
+	],
+};