@agilant/toga-blox 1.0.9 → 1.0.11

package/dist/components/Header/Header.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { motion, AnimatePresence, MotionConfig } from "framer-motion";
+import MobileMenu from "../MobileMenu/MobileMenu";
+import { HeaderProvider } from "./headerContext";
+import HamburgerButton from "../HamburgerButton/HamburgerButton";
+import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
+const justifyMap = {
+    start: "justify-start",
+    center: "justify-center",
+    end: "justify-end",
+    between: "justify-between",
+    around: "justify-around",
+};
+const Header = ({ logo, badge, nav, input, icons, backgroundColor = "bg-white", bottomBorderColor = "border-b-2", hasGlass = false, logoBorderRadius = "rounded-md", logoHoverColor = "hover:bg-gray-200", hasAnimatedHamburgerButton = false, hasMobileMenu, mobileLeft = true, mobileRight = false, mobileMenuBackground = "bg-white", iconsData, hasIcons = false, hasNavItems = false, hasBadge = false, hasSearchBar = false, hasMobileIcons = true, hasMobileNavItems = true, hasMobileBadge = true, hasMobileSearchBar = true, justifyNav = "center", justifyInput = "center", justifyBadge = "center", justifyIcons = "center", logoOrder = 1, navOrder = 2, inputOrder = 3, badgeOrder = 4, iconsOrder = 5, }) => {
+    const [navSideMenuVisibility, setNavSideMenuVisibility] = useState(false);
+    const handleNav = () => {
+        setNavSideMenuVisibility(!navSideMenuVisibility);
+    };
+    const burgerAriaLabel = navSideMenuVisibility
+        ? "Select to close menu"
+        : "Select to open menu";
+    const burgerExpandedAlert = navSideMenuVisibility ? "True" : "False";
+    const logoClasses = `${logoBorderRadius} ${logoHoverColor}`;
+    const headerClasses = `${backgroundColor} ${bottomBorderColor}`;
+    const mobileMenuClasses = mobileMenuBackground;
+    const justifyNavClass = justifyMap[justifyNav];
+    const justifyInputClass = justifyMap[justifyInput];
+    const justifyBadgeClass = justifyMap[justifyBadge];
+    const justifyIconsClass = justifyMap[justifyIcons];
+    return (_jsx(HeaderProvider, { hasMobileIcons: hasMobileIcons, hasMobileNavItems: hasMobileNavItems, hasMobileBadge: hasMobileBadge, hasMobileSearchBar: hasMobileSearchBar, iconsData: iconsData, hasIcons: hasIcons, hasNavItems: hasNavItems, hasBadge: hasBadge, hasSearchBar: hasSearchBar, mobileCloseIcon: getFontAwesomeIcon("X"), children: _jsx("header", { "data-testid": "header", className: `border-b-2 h-20 z-[1000] top-0 w-full px-2 ${headerClasses} ${hasGlass ? "glass" : ""}`, children: _jsxs("div", { className: "flex min-h-20", children: [hasMobileMenu && mobileLeft && (_jsx("div", { className: "pl-2 mx-auto my-auto hidden max-xl:flex", "data-testid": "header-left-mobile-open-icon", children: hasAnimatedHamburgerButton ? (_jsx(HamburgerButton, { burgerAriaLabel: burgerAriaLabel, burgerExpandedAlert: burgerExpandedAlert, animateBoolean: navSideMenuVisibility, handleNav: handleNav, containerClasses: "" })) : (_jsx("button", { "aria-label": burgerAriaLabel, "aria-expanded": burgerExpandedAlert === "True"
+                                ? true
+                                : false, "data-testid": "hamburger-button", onClick: handleNav, className: "flex flex-col space-y-1 relative z-10 p-2", children: burgerExpandedAlert === "True"
+                                ? getFontAwesomeIcon("X")
+                                : getFontAwesomeIcon("hamburger") })) })), _jsx("div", { className: `flex flex-auto items-center pl-1 order-${logoOrder}`, children: _jsx("a", { className: logoClasses, href: "", "data-testid": "header-logo", children: logo }) }), _jsx("div", { className: `flex flex-auto ${justifyNavClass} max-xl:hidden order-${navOrder}`, children: hasNavItems && nav }), hasSearchBar && (_jsx("div", { className: `flex flex-auto items-center ${justifyInputClass} max-xl:hidden order-${inputOrder}`, "data-testid": "header-placeholder-input", children: _jsx("div", { className: "2xl:flex w-full [&:has(:focus-visible)]:ring-2", children: input }) })), hasBadge && (_jsx("div", { className: `flex flex-auto items-center ${justifyBadgeClass} max-xl:justify-end order-${badgeOrder}`, "data-testid": "header-badge", children: _jsx("div", { className: "w-fit", children: badge }) })), hasIcons && (_jsx("div", { className: `flex flex-auto items-center ${justifyIconsClass} max-xl:hidden order-${iconsOrder}`, "data-testid": "header-icons", children: icons })), hasMobileMenu && mobileRight && (_jsx("div", { className: "pr-2 mx-auto my-auto hidden max-xl:flex", "data-testid": "header-right-mobile-open-icon", children: hasAnimatedHamburgerButton ? (_jsx(HamburgerButton, { burgerAriaLabel: burgerAriaLabel, burgerExpandedAlert: burgerExpandedAlert, animateBoolean: navSideMenuVisibility, handleNav: handleNav, containerClasses: "" })) : (_jsx("button", { "aria-label": burgerAriaLabel, "aria-expanded": burgerExpandedAlert === "True"
+                                ? true
+                                : false, "data-testid": "hamburger-button", onClick: handleNav, className: "flex flex-col space-y-1 relative z-10 p-2", children: burgerExpandedAlert === "True"
+                                ? getFontAwesomeIcon("X")
+                                : getFontAwesomeIcon("hamburger") })) })), _jsx(AnimatePresence, { children: hasMobileMenu && navSideMenuVisibility && (_jsx("div", { children: _jsx(MotionConfig, { transition: { type: "spring", bounce: 0.1 }, children: _jsx(motion.div, { variants: {
+                                        hide: {
+                                            x: mobileRight
+                                                ? "100%"
+                                                : "-100%",
+                                            transition: {
+                                                type: "spring",
+                                                bounce: 0.1,
+                                                when: "afterChildren",
+                                                staggerChildren: 0.25,
+                                            },
+                                        },
+                                        show: {
+                                            x: "0%",
+                                            transition: {
+                                                type: "spring",
+                                                bounce: 0.1,
+                                                when: "beforeChildren",
+                                                staggerChildren: 0.25,
+                                            },
+                                        },
+                                    }, initial: "hide", animate: "show", exit: "hide", className: "fixed inset-0 flex flex-col justify-center space-y-10", children: _jsx(MobileMenu, { handleNav: handleNav, badge: badge, nav: nav, input: input, icons: icons, mobileMenuClasses: mobileMenuClasses }) }, "mobile-nav") }) })) })] }) }) }));
+};
+export default Header;

package/dist/components/Header/Header.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta } from "@storybook/react";
+import { HeaderTypes } from "./Header.types";
+declare const _default: Meta<HeaderTypes>;
+export default _default;
+export declare const Default: any;
+export declare const TogaSupply: any;
+export declare const Compass: any;
+export declare const NoSearchOrBadge: any;

package/dist/components/Header/Header.stories.js

@@ -0,0 +1,225 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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 { DUMMYCOMPASSNAVDATA, DUMMYNAVDATA } from "../Nav/DUMMYNAVDATA.json";
+import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
+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"],
+};
+const Template = (args) => _jsx(Header, { ...args });
+export const Default = Template.bind({});
+Default.args = {
+    mobileMenuBackground: "gray",
+    hasAnimatedHamburgerButton: true,
+    logo: (_jsx(Image, { src: "../../../assets/Logo.png", alt: "Generic Company Logo.", background: false, additionalClasses: " w-40 p-2" })),
+    icons: (_jsx(_Fragment, {})
+    // <GenericList
+    // 	hasVirtualization={false}
+    // 	listDirection="horizontal"
+    // 	containerClasses=""
+    // 	listType="unordered"
+    // 	data={DUMMYICONDATA.DUMMYICONTOGADATA}
+    // 	renderItem={(item) => <DynamicIconList item={item} />}
+    // />
+    ),
+    badge: (_jsx(Badge, { type: "href", to: "#", hoverColor: "blue", borderColor: "none", mobileIcon: getFontAwesomeIcon("square-phone"), mobileIconLabel: "Contact Us", onClick: () => alert("Redirect to Contact Us page"), image: _jsx(Image, { src: "../../../assets/contact-image.png", alt: "", background: false, additionalClasses: "flex justify-center w-8 h-8 max-md:hidden" }), text: _jsxs(_Fragment, { children: [_jsx(Text, { size: "text-sm", color: "text-black", fontFamily: "font-serif", text: "Contact Us", tag: "h2", additionalClasses: "pl-2 pb-0 font-bold" }), _jsx(Text, { size: "text-xs", color: "text-black", fontFamily: "font-serif", text: "1-800-800-8000", tag: "p", additionalClasses: "pl-2 pt-0" })] }) })),
+    nav: (_jsx(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: (_jsx(Input, { labelVisible: false, label: undefined, inputType: "text", inputName: "search", hasPlaceholder: true, placeholder: "Search", borderColor: "gray", hasButton: true, backgroundColor: "white", additionalClasses: "bg-blue-500", button: _jsx(FormButton, { icon: getFontAwesomeIcon("search"), backgroundColor: "blue", 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: (_jsx(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: _jsx(_Fragment, {}),
+    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: (_jsx(Badge, { type: "href", to: "#", hoverColor: "green", borderColor: "none", mobileIcon: getFontAwesomeIcon("square-phone"), mobileIconLabel: "Contact Us", onClick: () => alert("Redirect to Contact Us page"), image: _jsx(Image, { src: "../../../assets/contact-image.png", alt: "", background: false, additionalClasses: "flex justify-center w-8 h-8 max-md:hidden" }), text: _jsxs(_Fragment, { children: [_jsx(Text, { size: "text-sm", color: "text-teal-700", fontFamily: "font-serif", text: "Contact Us", tag: "h2", additionalClasses: "pl-2 pb-0 font-bold" }), _jsx(Text, { size: "text-xs", color: "text-teal-700", fontFamily: "font-serif", text: "1-800-800-8000", tag: "p", additionalClasses: "pl-2 pt-0" })] }) })),
+    logo: (_jsx(Image, { src: "../../../assets/compass-logo.png", alt: "Generic Company Logo.", background: false, additionalClasses: " w-40 p-2" })),
+    nav: (_jsx(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: (_jsx(Input, { labelVisible: false, label: undefined, inputType: "text", inputName: "search", borderColor: "gray", hasPlaceholder: true, placeholder: "Search", hasButton: true, backgroundColor: "white", additionalClasses: "bg-blue-500", button: _jsx(FormButton, { icon: getFontAwesomeIcon("search"), backgroundColor: "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: (_jsx(_Fragment, {})
+    // <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: (_jsx(Badge, { type: "href", to: "#", hoverColor: "green", borderColor: "none", mobileIcon: getFontAwesomeIcon("square-phone"), mobileIconLabel: "Contact Us", onClick: () => alert("Redirect to Contact Us page"), image: _jsx(Image, { src: "../../../assets/contact-image.png", alt: "", background: false, additionalClasses: "flex justify-center w-8 h-8 max-md:hidden" }), text: _jsxs(_Fragment, { children: [_jsx(Text, { size: "text-sm", color: "text-black", fontFamily: "font-serif", text: "Contact Us", tag: "h2", additionalClasses: "pl-2 pb-0 font-bold" }), _jsx(Text, { size: "text-xs", color: "text-black", fontFamily: "font-serif", text: "1-800-800-8000", tag: "p", additionalClasses: "pl-2 pt-0" })] }) })),
+    logo: (_jsx(Image, { src: "../../../assets/compass-logo.png", alt: "Generic Company Logo.", background: false, additionalClasses: " w-40 p-2" })),
+    nav: (_jsx(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" })),
+};

package/dist/components/Header/Header.test.d.ts

@@ -0,0 +1 @@
+import "../../../dist/main.css";

package/dist/components/Header/Header.test.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import "../../../dist/main.css";
+import { render, screen } from "@testing-library/react";
+import { describe, test, expect, beforeEach } from "vitest";
+import Header from "./Header";
+import Image from "../Image/Image";
+import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
+import { DUMMYNAVDATA } from "../Nav/DUMMYNAVDATA.json";
+import Badge from "../Badge";
+import Text from "../Text/Text";
+import Nav from "../Nav";
+describe("<Header /> with all props (badge, icons, input, logo)", () => {
+    beforeEach(() => {
+        render(_jsx(Header, { nav: _jsx(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" }), logo: _jsx(Image, { src: "../../../assets/Logo.png", alt: "Generic Company Logo.", background: false, additionalClasses: " w-40 " }), badge: _jsx(Badge, { type: "href", to: "#", hoverColor: "green", borderColor: "none", mobileIcon: getFontAwesomeIcon("phone"), mobileIconLabel: "Contact Us", onClick: () => alert("Redirect to Contact Us page"), image: _jsx(Image, { src: "../../../assets/contact-image.png", alt: "", background: false, additionalClasses: "flex justify-center w-8 h-8 max-md:hidden" }), text: _jsxs(_Fragment, { children: [_jsx(Text, { size: "sm", color: "primary", fontFamily: "serif", text: "Contact Us", tag: "h2", additionalClasses: "pl-2 pb-0 font-bold" }), _jsx(Text, { size: "xs", color: "primary", fontFamily: "serif", text: "1-800-800-8000", tag: "p", additionalClasses: "pl-2 pt-0" })] }) }), backgroundColor: "gray", mobileOpenIcon: getFontAwesomeIcon("hamburger"), mobileCloseIcon: getFontAwesomeIcon("X"), mobileLeft: true, mobileRight: false, logoHoverColor: "blue", logoBorderRadius: true, hasIcons: true, icons: _jsx(_Fragment, {}), hasSearchBar: true, hasNavItems: true, hasBadge: true }));
+    });
+    test("renders Header component", () => {
+        expect(screen.getByTestId("header")).toBeInTheDocument();
+    });
+    test("renders correct background color class", () => {
+        const header = screen.getByTestId("header");
+        expect(header).toHaveClass("bg-slate-200");
+    });
+    test("contains correct logo from Image component", () => {
+        const headerLogo = screen.getByTestId("header-logo");
+        const logoImage = headerLogo.querySelector("img");
+        expect(logoImage).toHaveAttribute("src", "../../../assets/Logo.png");
+    });
+    test("contains correct alt text from Image component", () => {
+        const headerLogo = screen.getByTestId("header-logo");
+        const logoImage = headerLogo.querySelector("img");
+        expect(logoImage).toHaveAttribute("alt", "Generic Company Logo.");
+    });
+    // TODO: refactor/expand test when nav is created
+    test("contains correct placeholder nav menus", () => {
+        expect(screen.getByTestId("nav")).toBeInTheDocument();
+    });
+    // TODO: refactor/expand test when input is added
+    test("contains correct placeholder input", () => {
+        expect(screen.getByTestId("header-placeholder-input")).toBeInTheDocument();
+    });
+    test("contains correct badge", () => {
+        expect(screen.getByTestId("header-badge")).toBeInTheDocument();
+        const badge = screen.getByTestId("header-badge");
+        expect(badge).toHaveTextContent("Contact Us");
+        expect(badge).toHaveTextContent("1-800-800-8000");
+    });
+    test("contains correct icon images", () => {
+        expect(screen.getByTestId("user")).toBeInTheDocument();
+        expect(screen.getByTestId("circle-info")).toBeInTheDocument();
+        expect(screen.getByTestId("bell")).toBeInTheDocument();
+        expect(screen.getByTestId("cart-shopping")).toBeInTheDocument();
+    });
+});
+describe("<Header /> with logo and one icon", () => {
+    beforeEach(() => {
+        render(_jsx(Header, { logo: _jsx(Image, { src: "../../../assets/Logo.png", alt: "Another Generic Company Logo.", background: false, additionalClasses: " w-40 " }), hasMobileMenu: true, backgroundColor: "gray", mobileOpenIcon: getFontAwesomeIcon("hamburger"), mobileCloseIcon: getFontAwesomeIcon("X"), mobileLeft: false, mobileRight: true, logoHoverColor: "blue", logoBorderRadius: true, hasIcons: true, icons: _jsx(_Fragment, {}), hasSearchBar: false, hasNavItems: false, hasBadge: false }));
+    });
+    test("renders Header component", () => {
+        expect(screen.getByTestId("header")).toBeInTheDocument();
+    });
+    test("renders correct background color class", () => {
+        const header = screen.getByTestId("header");
+        expect(header).toHaveClass("bg-slate-200");
+    });
+    test("contains correct logo from Image component", () => {
+        const headerLogo = screen.getByTestId("header-logo");
+        const logoImage = headerLogo.querySelector("img");
+        expect(logoImage).toHaveAttribute("src", "../../../assets/Logo.png");
+    });
+    test("contains correct alt text from Image component", () => {
+        const headerLogo = screen.getByTestId("header-logo");
+        const logoImage = headerLogo.querySelector("img");
+        expect(logoImage).toHaveAttribute("alt", "Another Generic Company Logo.");
+    });
+    test("does not contain badge", () => {
+        expect(document.querySelector('[data-testid="header-badge"]')).toBeNull();
+    });
+    test("contains correct icon images", () => {
+        const info = document.querySelector('[data-testid="circle-info"]');
+        expect(info).toBeInTheDocument();
+        const notifications = document.querySelector('[data-testid="bell"]');
+        expect(notifications).toBeInTheDocument();
+        const cart = document.querySelector('[data-testid="cart-shopping"]');
+        expect(cart).toBeInTheDocument();
+    });
+    test("does not contain placeholder input", () => {
+        expect(document.querySelector('[data-testid="header-placeholder-input"]')).toBeNull();
+    });
+    test("does not contain nav items", () => {
+        expect(document.querySelector('[data-testid="nav"]')).toBeNull();
+    });
+    test("contains mobile open icon on right, not present on left", () => {
+        const rightMobileOpenIcon = document.querySelector('[data-testid="header-right-mobile-open-icon"]');
+        expect(rightMobileOpenIcon).not.toBeNull();
+        const leftMobileOpenIcon = document.querySelector('[data-testid="header-left-mobile-open-icon"]');
+        expect(leftMobileOpenIcon).toBeNull();
+    });
+});
+describe("<Header /> with both mobileLeft and mobileRight set to true, mobileRight is default", () => {
+    beforeEach(() => {
+        render(_jsx(Header, { logo: _jsx(Image, { src: "../../../assets/Logo.png", alt: "Another Generic Company Logo.", background: false, additionalClasses: " w-40 " }), hasMobileMenu: true, backgroundColor: "red", mobileOpenIcon: getFontAwesomeIcon("hamburger"), mobileCloseIcon: getFontAwesomeIcon("X"), mobileLeft: true, mobileRight: true, logoHoverColor: "blue", logoBorderRadius: true, hasIcons: true, icons: _jsx(_Fragment, {}), hasSearchBar: false, hasNavItems: false, hasBadge: false }));
+    });
+    test("defaults to mobile open icon on right, not present on left", () => {
+        expect(document.querySelector('[data-testid="header-right-mobile-open-icon"]')).not.toBeNull();
+        expect(document.querySelector('[data-testid="header-left-mobile-open-icon"]')).toBeNull();
+    });
+});

package/dist/components/Header/Header.types.d.ts

@@ -0,0 +1,40 @@
+import { DUMMYICONCOMPASSDATA, DUMMYICONTOGADATA } from "./DUMMYICONDATA.json";
+export interface HeaderTypes {
+    onClick?: (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+    nav?: React.ReactNode;
+    logo?: React.ReactNode;
+    badge?: React.ReactNode;
+    icons?: React.ReactNode;
+    input?: React.ReactNode;
+    children?: React.ReactNode;
+    logoHoverColor?: string;
+    logoBorderRadius?: boolean;
+    backgroundColor?: string;
+    bottomBorderColor?: string;
+    hasGlass?: boolean;
+    hasAnimatedHamburgerButton?: boolean;
+    mobileOpenIcon?: JSX.Element | undefined | null;
+    mobileCloseIcon?: JSX.Element | null;
+    mobileLeft?: boolean;
+    mobileRight?: boolean;
+    mobileMenuBackground?: string;
+    iconsData?: typeof DUMMYICONCOMPASSDATA | typeof DUMMYICONTOGADATA;
+    hasIcons?: boolean;
+    hasSearchBar?: boolean;
+    hasNavItems?: boolean;
+    hasBadge?: boolean;
+    hasMobileMenu?: boolean;
+    hasMobileIcons?: boolean;
+    hasMobileNavItems?: boolean;
+    hasMobileBadge?: boolean;
+    hasMobileSearchBar?: boolean;
+    justifyNav?: string;
+    justifyInput?: string;
+    justifyBadge?: string;
+    justifyIcons?: string;
+    logoOrder?: number;
+    navOrder?: number;
+    inputOrder?: number;
+    badgeOrder?: number;
+    iconsOrder?: number;
+}

package/dist/components/Header/Header.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Header/headerContext.d.ts

@@ -0,0 +1,39 @@
+import { HeaderTypes } from "./Header.types";
+type ContextValue = {
+    iconsData: HeaderTypes["iconsData"];
+    setIconsData: (iconsData: HeaderTypes["iconsData"]) => void;
+    mobileCloseIcon: JSX.Element | null;
+    setMobileCloseIcon: (mobileCloseIcon: JSX.Element) => void;
+    hasIcons: boolean;
+    setHasIcons: (hasNavItems: boolean) => void;
+    hasNavItems: boolean;
+    setHasNavItems: (hasNavItems: boolean) => void;
+    hasBadge: boolean;
+    setHasBadge: (hasBadge: boolean) => void;
+    hasSearchBar: boolean;
+    setHasSearchBar: (hasSearchBar: boolean) => void;
+    hasMobileIcons: boolean;
+    setHasMobileIcons: (hasMobileIcons: boolean) => void;
+    hasMobileNavItems: boolean;
+    setHasMobileNavItems: (hasMobileNavItems: boolean) => void;
+    hasMobileBadge: boolean;
+    setHasMobileBadge: (hasMobileBadge: boolean) => void;
+    hasMobileSearchBar: boolean;
+    setHasMobileSearchBar: (hasMobileSearchBar: boolean) => void;
+};
+type HeaderProviderProps = {
+    children: React.ReactNode;
+    hasIcons: boolean;
+    hasNavItems: boolean;
+    hasBadge: boolean;
+    hasSearchBar: boolean;
+    hasMobileIcons: boolean;
+    hasMobileNavItems: boolean;
+    hasMobileBadge: boolean;
+    hasMobileSearchBar: boolean;
+    iconsData: HeaderTypes["iconsData"];
+    mobileCloseIcon: JSX.Element | null;
+};
+export declare const HeaderProvider: ({ children, hasIcons, hasNavItems, hasBadge, hasSearchBar, hasMobileIcons, hasMobileNavItems, hasMobileBadge, hasMobileSearchBar, iconsData, mobileCloseIcon, }: HeaderProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare function useHeaderContext(): ContextValue;
+export {};

package/dist/components/Header/headerContext.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState } from "react";
+const HeaderContext = createContext(undefined);
+export const HeaderProvider = ({ children, hasIcons, hasNavItems, hasBadge, hasSearchBar, hasMobileIcons, hasMobileNavItems, hasMobileBadge, hasMobileSearchBar, iconsData, mobileCloseIcon, }) => {
+    const [hasIconsState, setHasIcons] = useState(hasIcons);
+    const [hasNavItemsState, setHasNavItems] = useState(hasNavItems);
+    const [hasBadgeState, setHasBadge] = useState(hasBadge);
+    const [hasSearchBarState, setHasSearchBar] = useState(hasSearchBar);
+    const [hasMobileIconsState, setHasMobileIcons] = useState(hasMobileIcons);
+    const [hasMobileNavItemsState, setHasMobileNavItems] = useState(hasMobileNavItems);
+    const [hasMobileBadgeState, setHasMobileBadge] = useState(hasMobileBadge);
+    const [hasMobileSearchBarState, setHasMobileSearchBar] = useState(hasMobileSearchBar);
+    const [iconsDataState, setIconsData] = useState(iconsData);
+    const [mobileCloseIconState, setMobileCloseIcon] = useState(mobileCloseIcon);
+    return (_jsx(HeaderContext.Provider, { value: {
+            hasIcons: hasIconsState,
+            setHasIcons,
+            hasNavItems: hasNavItemsState,
+            setHasNavItems,
+            hasBadge: hasBadgeState,
+            setHasBadge,
+            hasSearchBar: hasSearchBarState,
+            setHasSearchBar,
+            hasMobileIcons: hasMobileIconsState,
+            setHasMobileIcons,
+            hasMobileNavItems: hasMobileNavItemsState,
+            setHasMobileNavItems,
+            hasMobileBadge: hasMobileBadgeState,
+            setHasMobileBadge,
+            hasMobileSearchBar: hasMobileSearchBarState,
+            setHasMobileSearchBar,
+            iconsData: iconsDataState,
+            setIconsData,
+            mobileCloseIcon: mobileCloseIconState,
+            setMobileCloseIcon,
+        }, children: children }));
+};
+export function useHeaderContext() {
+    const context = useContext(HeaderContext);
+    if (!context) {
+        throw new Error("useHeaderContext must be used within a HeaderProvider");
+    }
+    return context;
+}

package/dist/components/Header/index.js

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

package/dist/components/Hero/Hero.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { HeroTypes } from ".";
+declare const Hero: React.FC<HeroTypes>;
+export default Hero;

package/dist/components/Hero/Hero.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Text from "../Text/Text";
+import Image from "../Image/Image";
+const alignmentClassesMap = {
+    left: "justify-start text-left",
+    right: "justify-end text-right",
+    center: "justify-center text-center",
+};
+const backgroundClassesMap = {
+    color: "bg-blue-800",
+    gradient: "bg-gradient-to-r from-cyan-700 to-blue-900",
+};
+const Hero = ({ src = "../../../assets/heroImage.png", text = (_jsx(Text, { size: "text-xl", color: "text-white", fontFamily: "font-serif", text: "This is a test heading!", tag: "h1" })), textAlignment, background = "color", textVerticalAxis = "items-center", }) => {
+    let heroAlignment = alignmentClassesMap[textAlignment];
+    const heroBackground = backgroundClassesMap[background] || "";
+    if (background === "image") {
+        heroAlignment = `flex ${alignmentClassesMap[textAlignment]} ${textVerticalAxis}`;
+    }
+    return background === "image" ? (_jsx(Image, { src: src, alt: "", background: true, additionalClasses: heroAlignment, children: _jsx("span", { className: "text-white", children: text }) })) : (_jsx("div", { "data-testid": "hero", className: `w-full min-h-72 p-4 flex ${heroAlignment} ${heroBackground} ${textVerticalAxis} text-white `, children: text }));
+};
+export default Hero;

package/dist/components/Hero/Hero.stories.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { Meta } from "@storybook/react";
+import { HeroTypes } from ".";
+interface HeroStoryTypes extends HeroTypes {
+    position: "left" | "right" | "center";
+    background: string;
+    text: React.ReactNode;
+}
+declare const _default: Meta<HeroStoryTypes>;
+export default _default;
+export declare const HeroColor: any;
+export declare const HeroGradient: any;
+export declare const HeroDecorativeImage: any;

package/dist/components/Hero/Hero.stories.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Hero from ".";
+import { withStoryBook } from "../../hoc";
+const StorybookHero = withStoryBook(Hero);
+export default {
+    title: "Components/Hero",
+    argTypes: {
+        textAlignment: {
+            control: "select",
+            options: ["left", "right", "center"],
+            description: "The position of the text in relation to the background horizontally.",
+        },
+        textVerticalAxis: {
+            control: "select",
+            options: ["items-start", "items-end", "items-center"],
+            description: "The position of the text in relation to the background vertically.",
+        },
+        background: {
+            control: "color",
+            description: "The background color.  Set by Tailwind CSS in Applications",
+        },
+        text: {
+            control: "text",
+            description: "The text displayed.",
+        },
+    },
+    tags: ["autodocs"],
+};
+const Template = (args) => (_jsx(StorybookHero, { ...args, storybookStyle: {
+        backgroundColor: args.background,
+    } }));
+export const HeroColor = Template.bind({});
+HeroColor.args = {
+    textAlignment: "right",
+    background: "color",
+};
+export const HeroGradient = Template.bind({});
+HeroGradient.args = {
+    textAlignment: "right",
+    background: "gradient",
+};
+export const HeroDecorativeImage = Template.bind({});
+HeroDecorativeImage.args = {
+    textAlignment: "right",
+    background: "image",
+};

package/dist/components/Hero/Hero.test.d.ts

@@ -0,0 +1 @@
+import "../../../dist/main.css";