@agilant/toga-blox 1.0.5

package/src/components/Header/Header.stories.tsx

@@ -0,0 +1,521 @@
+import { Meta, StoryFn } from "@storybook/react";
+import Header from "./Header";
+import Nav from "../Nav/Nav";
+import Image from "../Image/Image";
+import Badge from "../Badge/Badge";
+import Text from "../Text/Text";
+import Input from "../Input/Input";
+import FormButton from "../FormButton/FormButton";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faSquarePhone } from "@fortawesome/free-solid-svg-icons";
+import DUMMYICONDATA from "./DUMMYICONDATA.json";
+import { DUMMYCOMPASSNAVDATA, DUMMYNAVDATA } from "../Nav/DUMMYNAVDATA.json";
+import { HeaderTypes } from "./Header.types";
+import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
+import DynamicIconList from "../GenericList/templates/DynamicIconList";
+import GenericList from "../GenericList/GenericList";
+
+export default {
+	title: "Headers/Header",
+	argTypes: {
+		iconsData: {
+			table: {
+				disable: true,
+			},
+		},
+		nav: {
+			table: {
+				disable: true,
+			},
+		},
+		input: {
+			table: {
+				disable: true,
+			},
+		},
+		logo: {
+			table: {
+				disable: true,
+			},
+		},
+		badge: {
+			table: {
+				disable: true,
+			},
+		},
+		icons: {
+			table: {
+				disable: true,
+			},
+		},
+		mobileCloseIcon: {
+			table: {
+				disable: true,
+			},
+		},
+		mobileOpenIcon: {
+			table: {
+				disable: true,
+			},
+		},
+		hasAnimatedHamburgerButton: {
+			control: "boolean",
+			description: "Whether the hamburger menu button is animated .",
+		},
+		logoBorderRadius: {
+			control: "boolean",
+			description: "Whether the logo has a border radius.",
+		},
+		logoHoverColor: {
+			control: "select",
+			options: ["red", "green", "blue", "none"],
+			description: "Whether the logo has a background color on hover.",
+		},
+		backgroundColor: {
+			control: "select",
+			options: ["red", "green", "gray", "none"],
+			description: "Whether the header has a background color.",
+		},
+		bottomBorderColor: {
+			control: "select",
+			options: ["green", "blue", "black", "none"],
+			description: "Whether the header has a background color.",
+		},
+		hasNavItems: {
+			control: "boolean",
+			description: "Whether the header has navigation items.",
+		},
+		hasSearchBar: {
+			control: "boolean",
+			description: "Whether the header has a search bar.",
+		},
+		mobileRight: {
+			control: "boolean",
+			description: "Whether the mobile menu is on the right.",
+		},
+		mobileLeft: {
+			control: "boolean",
+			description: "Whether the mobile menu is on the left.",
+		},
+		logoOrder: {
+			control: false,
+			description:
+				"This prop will change the order of the logo section. It is set internally and should not be modified.",
+		},
+		navOrder: {
+			control: false,
+			description:
+				"This prop will change the order of the navigation section. It is set internally and should not be modified.",
+		},
+		inputOrder: {
+			control: false,
+			description:
+				"This prop will change the order of the input section. It is set internally and should not be modified.",
+		},
+		badgeOrder: {
+			control: false,
+			description:
+				"This prop will change the order of the badge section. It is set internally and should not be modified.",
+		},
+		iconsOrder: {
+			control: false,
+			description:
+				"This prop will change the order of the icons section. It is set internally and should not be modified.",
+		},
+	},
+	tags: ["autodocs"],
+} as Meta<HeaderTypes>;
+
+const Template: StoryFn<HeaderTypes> = (args) => <Header {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+	mobileMenuBackground: "gray",
+	hasAnimatedHamburgerButton: true,
+	logo: (
+		<Image
+			src="../../../assets/Logo.png"
+			alt="Generic Company Logo."
+			background={false}
+			additionalClasses=" w-40 p-2"
+		/>
+	),
+	icons: (
+		<GenericList
+			hasVirtualization={false}
+			listDirection="horizontal"
+			containerClasses=""
+			listType="unordered"
+			data={DUMMYICONDATA.DUMMYICONTOGADATA}
+			renderItem={(item) => <DynamicIconList item={item} />}
+		/>
+	),
+	badge: (
+		<Badge
+			type="href"
+			to="#"
+			hoverColor="blue"
+			borderColor="none"
+			tagStyle={false}
+			mobileIcon={<FontAwesomeIcon icon={faSquarePhone} />}
+			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"
+					/>
+				</>
+			}
+		/>
+	),
+	nav: (
+		<Nav
+			navData={DUMMYNAVDATA}
+			navBackgroundColor={"#FFFFF"}
+			parentHoverBackground={"blue"}
+			parentHoverFontColor={"white"}
+			parentHoverUnderline={true}
+			parentHoverBorderColor={"none"}
+			parentShape={"cornered"}
+			parentBackground={"none"}
+			parentBorderColor={"none"}
+			submenuBackgroundColor={"blue"}
+			submenuHoverBackground={"white"}
+			submenuHoverBorderStyle={"bottom"}
+			submenuHoverBorderColor={"black"}
+			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"}
+			hasPlaceholder
+			placeholder={"Search"}
+			borderColor="gray"
+			hasButton
+			backgroundColor="white"
+			additionalClasses="bg-blue-500"
+			button={
+				<FormButton
+					icon={getFontAwesomeIcon("search")}
+					color="blue"
+					fontColor="white"
+					hoverBackground="black"
+					hoverFontColor="white"
+					additionalClasses="h-full w-8 justify-center"
+					shape="none"
+				/>
+			}
+			inputWidth="w-full"
+		/>
+	),
+
+	logoBorderRadius: true,
+	logoHoverColor: "blue",
+	hasIcons: false,
+	hasSearchBar: true,
+	hasBadge: false,
+	hasNavItems: true,
+	hasMobileMenu: true,
+	backgroundColor: "gray",
+	mobileLeft: true,
+	mobileRight: false,
+	bottomBorderColor: "blue",
+	mobileOpenIcon: getFontAwesomeIcon("hamburger"),
+	mobileCloseIcon: getFontAwesomeIcon("x"),
+	hasMobileIcons: false,
+	hasMobileNavItems: true,
+	hasMobileBadge: true,
+	hasMobileSearchBar: true,
+};
+
+export const TogaSupply = Template.bind({});
+TogaSupply.args = {
+	hasIcons: true,
+	logoBorderRadius: true,
+	logoHoverColor: "blue",
+	backgroundColor: "gray",
+	bottomBorderColor: "blue",
+	hasMobileMenu: false,
+	logo: (
+		<Image
+			src="../../../assets/Logo.png"
+			alt="Generic Company Logo."
+			background={false}
+			additionalClasses=" w-40 p-2"
+		/>
+	),
+	hasMobileIcons: false,
+	hasMobileNavItems: false,
+	hasMobileBadge: false,
+	hasMobileSearchBar: false,
+	hasAnimatedHamburgerButton: true,
+};
+
+export const Compass = Template.bind({});
+Compass.args = {
+	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={<FontAwesomeIcon icon={faSquarePhone} />}
+			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"
+		/>
+	),
+};
+
+export const NoSearchOrBadge = Template.bind({});
+NoSearchOrBadge.args = {
+	icons: (
+		<GenericList
+			hasVirtualization={false}
+			listDirection="horizontal"
+			containerClasses=""
+			listType="unordered"
+			data={DUMMYICONDATA.DUMMYICONCOMPASSDATA}
+			renderItem={(item) => <DynamicIconList item={item} />}
+		/>
+	),
+	hasIcons: true,
+	hasSearchBar: false,
+	hasBadge: false,
+	hasNavItems: true,
+	hasMobileMenu: true,
+	mobileRight: true,
+	mobileLeft: false,
+
+	logoBorderRadius: true,
+	logoHoverColor: "green",
+	backgroundColor: "gray",
+	bottomBorderColor: "green",
+
+	mobileMenuBackground: "green",
+	hasAnimatedHamburgerButton: true,
+
+	hasMobileIcons: true,
+	hasMobileNavItems: true,
+	hasMobileBadge: false,
+	hasMobileSearchBar: true,
+
+	badge: (
+		<Badge
+			type="href"
+			to="#"
+			color="green"
+			hoverColor="green"
+			borderColor="none"
+			tagStyle={false}
+			mobileIcon={<FontAwesomeIcon icon={faSquarePhone} />}
+			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={DUMMYNAVDATA}
+			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"}
+		/>
+	),
+};