@agilant/toga-blox 1.0.9 → 1.0.11

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

@@ -1,543 +0,0 @@
-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="hover:bg-blue-500"
-				backgroundColor="bg-gray-500"
-				bottomBorderColor="border-black"
-				mobileOpenIcon={getFontAwesomeIcon("hamburger")}
-				mobileCloseIcon={getFontAwesomeIcon("x")}
-				mobileMenuBackground="bg-blue-500"
-				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="text-blue-500"
-						hoverColor="hover:text-blue-500"
-						borderColor="border-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="text-sm"
-									color="text-black"
-									fontFamily="font-serif"
-									text="Contact Us"
-									tag="h2"
-									additionalClasses="pl-2 pb-0 font-bold"
-								/>
-								<Text
-									size="text-xs"
-									color="text-black"
-									fontFamily="font-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={"text-black"}
-						parentHoverUnderline={true}
-						parentHoverBorderColor={"none"}
-						parentShape={"rounded"}
-						parentBackground={"none"}
-						parentBorderColor={"none"}
-						submenuBackgroundColor={"bg-white"}
-						submenuHoverBackground={"hover:bg-blue-500"}
-						submenuHoverBorderStyle={"top-bottom"}
-						submenuHoverBorderColor={"border-blue-500"}
-						includeSubmenuImages={true}
-						mobileBreakpoint={"extraLarge"}
-						accordionParentStyle={
-							"rounded 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="border-gray-500"
-						hasPlaceholder
-						placeholder={"Search"}
-						hasButton
-						backgroundColor="bg-white"
-						additionalClasses="bg-blue-500"
-						button={
-							<FormButton
-								icon={getFontAwesomeIcon("search")}
-								backgroundColor="bg-blue-500"
-								hoverBackground="hover:bg-black"
-								hoverFontColor="hover:text-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, title: "" }} />
-					</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={"text-2xl"}
-				color={"text-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="hover:bg-green-500"
-					backgroundColor="bg-gray-500"
-					bottomBorderColor="border-green-500"
-					mobileOpenIcon={getFontAwesomeIcon("hamburger")}
-					mobileCloseIcon={getFontAwesomeIcon("x")}
-					mobileMenuBackground="bg-green-500"
-					hasMobileIcons={true}
-					hasMobileNavItems={true}
-					hasMobileBadge={false}
-					hasMobileSearchBar={true}
-					badge={
-						<Badge
-							type="href"
-							to="#"
-							color="text-green-500"
-							hoverColor="hover:text-green-500"
-							borderColor="border-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="text-sm"
-										color="text-black"
-										fontFamily="font-serif"
-										text="Contact Us"
-										tag="h2"
-										additionalClasses="pl-2 pb-0 font-bold"
-									/>
-									<Text
-										size="text-xs"
-										color="text-black"
-										fontFamily="font-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={"text-black"}
-							parentHoverUnderline={true}
-							parentHoverBorderColor={"none"}
-							parentShape={"rounded"}
-							parentBackground={"none"}
-							parentBorderColor={"none"}
-							submenuBackgroundColor={"bg-white"}
-							submenuHoverBackground={"hover:bg-green-500"}
-							submenuHoverBorderStyle={"top-bottom"}
-							submenuHoverBorderColor={"border-green-500"}
-							includeSubmenuImages={true}
-							mobileBreakpoint={"extraLarge"}
-							accordionParentStyle={
-								"rounded 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="border-gray-500"
-							hasPlaceholder
-							placeholder={"Search"}
-							hasButton
-							backgroundColor="bg-white"
-							additionalClasses="bg-blue-500"
-							button={
-								<FormButton
-									icon={getFontAwesomeIcon("search")}
-									backgroundColor="bg-green-500"
-									hoverBackground="hover:bg-black"
-									hoverFontColor="hover:text-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="text-2xl"
-						color="text-white"
-						fontFamily="font-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="text-2xl"
-					color="text-black"
-					fontFamily="font-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, title: "" }} />
-						</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="text-xl"
-					color="text-black"
-					fontFamily="font-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={""}
-						/>
-					}
-					backgroundColor="bg-green-500"
-					fontColor="text-white"
-					size="md"
-					shape="rounded"
-					borderColor="border-none"
-					hoverBackground="hover:bg-green-500"
-					hoverFontColor="hover:text-green-500"
-					hoverBorderColor="hover:border-green-500"
-					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={"text-xl"}
-						color={""}
-						text={"Compass Website"}
-						fontFamily={""}
-						tag={"h2"}
-						additionalClasses="font-bold uppercase pl-2 mt-2"
-					/>
-				}
-				slogan={
-					<Text
-						size={"text-md"}
-						color={""}
-						text={"Great slogan goes here."}
-						fontFamily={""}
-						tag={"p"}
-						additionalClasses="pl-2"
-					/>
-				}
-				copyRightText={
-					<Text
-						size={"md"}
-						color={"text-black"}
-						text="Copyright © 2024 - All right reserved by Generic Company"
-						fontFamily={""}
-						additionalClasses="text-center"
-					/>
-				}
-				socialTitle={
-					<Text
-						size={"md"}
-						color={"text-black"}
-						text="Connect"
-						fontFamily={""}
-						additionalClasses="font-bold uppercase w-full"
-					/>
-				}
-				contactTitle={
-					<Text
-						size={"md"}
-						color={"text-black"}
-						text="Contact Us:"
-						fontFamily={""}
-						additionalClasses="font-bold uppercase"
-					/>
-				}
-				logoBorderRadius={true}
-				hasNavItems={true}
-				hasSocial={true}
-				logoHoverColor="hover:bg-green-500"
-				backgroundColor="bg-green-500"
-				accordionGap="gap-1"
-				copyRightTextPlacement="center"
-				socialPlacement="center"
-				accordionParentStyle="border-b border-black p-2 w-full"
-				accordionExpandedStyle="pl-3 py-3"
-			/>
-		</div>,
-	],
-};