@agilant/toga-blox 1.0.29 → 1.0.30

package/dist/components/ImageContainer/ImageContainer.stories.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ImageContainer from "./ImageContainer";
+export default {
+    title: "Components/ImageContainer",
+    component: ImageContainer,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "centered",
+    },
+    argTypes: {
+        imageUrl: {
+            control: "none",
+            description: "Image url of the image.",
+        },
+        backgroundColor: {
+            control: "none",
+            description: "Background color if the image is not present.",
+        },
+        borderRadius: {
+            control: "none",
+            description: "Styles for the content.",
+        },
+        size: {
+            control: "none",
+            description: "Size of the container.",
+        },
+        profileIcon: {
+            control: "none",
+            description: "Profile icon image.",
+        },
+        alternativeText: {
+            control: "none",
+            description: "Alternative text for the image.",
+        },
+        userInitials: {
+            control: "none",
+            description: "User initials if there is no image.",
+        },
+        additionalClasses: {
+            control: "none",
+            description: "Additional styling classes of the image container.",
+        },
+        tyle: {
+            control: {
+                type: "object", // Text input control
+            },
+            description: "Inline CSS styles to be added.",
+            defaultValue: "",
+        },
+        imageClasses: {
+            control: "none",
+            description: "Additional styling classes of the image.",
+        },
+    },
+};
+const Template = (args) => (_jsx(ImageContainer, { ...args }));
+export const Default = Template.bind({});
+Default.args = {
+    imageUrl: "data:image/jpeg;base64,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",
+    borderRadius: "rounded-md",
+    size: "size-80",
+    alternativeText: "image",
+};
+export const ProfileIcon = Template.bind({});
+ProfileIcon.args = {
+    imageUrl: "https://img.freepik.com/premium-vector/avatar-profile-icon-flat-style-female-user-profile-vector-illustration-isolated-background-women-profile-sign-business-concept_157943-38866.jpg",
+    borderRadius: "rounded-full",
+    size: "h-[75px] w-[75px]",
+    alternativeText: "profile image",
+};
+export const WithoutImage = Template.bind({});
+WithoutImage.args = {
+    imageUrl: "",
+    borderRadius: "rounded-full",
+    size: "h-14 w-14",
+    alternativeText: "",
+    userInitials: "AS",
+    backgroundColor: "bg-gray-500",
+};
+export const WithInlineBackgroundColor = Template.bind({});
+WithInlineBackgroundColor.args = {
+    imageUrl: "",
+    borderRadius: "rounded-full",
+    size: "h-14 w-14",
+    alternativeText: "",
+    userInitials: "AS",
+    style: { backgroundColor: "hsl(354,94%,74%)" },
+};

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

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

package/dist/components/ImageContainer/ImageContainer.test.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect, test } from "vitest";
+import { render, screen } from "@testing-library/react";
+import ImageContainer from "./ImageContainer";
+describe("ImageContainer Component", () => {
+    const testUrl = "https://via.placeholder.com/150";
+    it("renders an image when a valid imageUrl is provided", () => {
+        const { getByAltText } = render(_jsx(ImageContainer, { imageUrl: testUrl, borderRadius: "rounded-md", size: "size-80", alternativeText: "image" }));
+        const image = getByAltText("image");
+        expect(image).toBeInTheDocument();
+        expect(image).toHaveAttribute("src", testUrl);
+    });
+    it("renders fallback text when no imageUrl is provided", () => {
+        const { getByText } = render(_jsx(ImageContainer, { imageUrl: "", userInitials: "AB" }));
+        const userInitials = getByText("AB");
+        expect(userInitials).toBeInTheDocument();
+    });
+    it("applies rounded-full class when borderRadius is rounded-full", () => {
+        const { container, getByAltText } = render(_jsx(ImageContainer, { imageUrl: testUrl, alternativeText: "Profile icon", borderRadius: "rounded-full" }));
+        const imageElement = container.querySelector("div");
+        expect(imageElement).toHaveClass("rounded-full");
+    });
+});
+describe("ImageContainer - inline styles ", () => {
+    test("applies inline style BackgroundColor style when provided", () => {
+        const inlineBackgroundColor = "rgb(255, 0, 0)";
+        render(_jsx(ImageContainer, { imageUrl: "", style: { backgroundColor: inlineBackgroundColor }, borderRadius: "rounded-full", size: "w-10 h-10", userInitials: "AB", additionalClasses: "shadow-md" }));
+        const container = screen.getByText("AB").parentElement;
+        expect(container).toHaveStyle(`background-color: ${inlineBackgroundColor}`);
+    });
+    test("does not apply inline style when inlineBackgroundColor is not provided but applies backgroundColor prop", () => {
+        const backgroundColor = "bg-blue-500";
+        render(_jsx(ImageContainer, { imageUrl: "", backgroundColor: backgroundColor, borderRadius: "rounded-full", size: "w-10 h-10", userInitials: "AB", additionalClasses: "shadow-md" }));
+        const container = screen.getByText("AB").parentElement;
+        expect(container).not.toHaveStyle(`background-color: ${backgroundColor}`);
+    });
+});
+describe("ImageContainer - userInitials", () => {
+    test("renders userInitials when imageUrl is not provided", () => {
+        render(_jsx(ImageContainer, { imageUrl: "", userInitials: "AB", borderRadius: "rounded-full", size: "w-10 h-10", backgroundColor: "bg-blue-500" }));
+        // Assert that user initials are displayed
+        const initials = screen.getByText("AB");
+        expect(initials).toBeInTheDocument();
+        expect(initials).toHaveTextContent("AB");
+    });
+    test("renders default fallback text when userInitials is not provided", () => {
+        render(_jsx(ImageContainer, { imageUrl: "", userInitials: "", borderRadius: "rounded-full", size: "w-10 h-10", backgroundColor: "bg-blue-500" }));
+        // Assert that default fallback text is displayed
+        const fallbackText = screen.getByText("N/A");
+        expect(fallbackText).toBeInTheDocument();
+        expect(fallbackText).toHaveTextContent("N/A");
+    });
+    test("does not render userInitials when imageUrl is provided", () => {
+        render(_jsx(ImageContainer, { imageUrl: "https://via.placeholder.com/150", userInitials: "AB", borderRadius: "rounded-full", size: "w-10 h-10", backgroundColor: "bg-blue-500" }));
+        // Assert that user initials are not displayed
+        const initials = screen.queryByText("AB");
+        expect(initials).not.toBeInTheDocument();
+        // Assert that the image is displayed instead
+        const image = screen.getByRole("img");
+        expect(image).toBeInTheDocument();
+        expect(image).toHaveAttribute("src", "https://via.placeholder.com/150");
+    });
+});

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

@@ -0,0 +1,11 @@
+export interface ImageContainerProps {
+    imageUrl?: string;
+    backgroundColor?: string;
+    borderRadius?: string;
+    size?: string;
+    alternativeText?: string;
+    userInitials?: string;
+    additionalClasses?: string;
+    style?: React.CSSProperties;
+    imageClasses?: string;
+}

package/dist/components/ImageContainer/ImageContainer.types.js

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

package/dist/components/Input/Input.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import FormButton from "../FormButton/FormButton";
+import BaseButton from "../BaseButton/BaseButton";
 import { validateInput } from "../../utils/inputValidation";
 import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
 const Input = ({ 
@@ -17,7 +17,7 @@ hasLeftIcon, hasRightIcon, leftIcon, rightIcon, iconColor = "text-gray-500", ico
 // INPUT STYLES
 inputTextSize = "text-base", inputShape = "rounded-md", borderColor = "border-gray-300", backgroundColor = "bg-white", inputWidth = "w-full", errorBorder = "border-red-500", successBorder = "border-green-500", 
 // BUTTON
-hasButton, button = (_jsx(FormButton, { text: "Submit", as: "button", hoverBackground: "hover:bg-green-500", backgroundColor: "bg-red-500", icon: getFontAwesomeIcon("arrow-right"), borderColor: "border-green-500", hoverFontColor: "hover:text-black", shape: "rounded-none", additionalClasses: "h-full" })), }) => {
+hasButton, button = (_jsx(BaseButton, { text: "Submit", as: "button", hoverBackground: "hover:bg-green-500", backgroundColor: "bg-red-500", icon: getFontAwesomeIcon("arrow-right"), borderColor: "border-green-500", hoverFontColor: "hover:text-black", shape: "rounded-none", additionalClasses: "h-full" })), }) => {
     const [isValid, setIsValid] = useState("");
     const [termInternal, setTermInternal] = useState("");
     const [inputBorderClasses, setInputBorderClasses] = useState(borderColor);

package/dist/components/Input/Input.stories.js

@@ -4,7 +4,7 @@ import Text from "../Text/Text";
 import { minCharactersRegex } from "../../utils/inputValidation";
 import { withMemo } from "../../userHoc";
 import { arePropsEqual } from "./InputMemoTypes";
-import FormButton from "../FormButton/FormButton";
+import BaseButton from "../BaseButton/BaseButton";
 import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
 const MemoizedInput = withMemo(Input, arePropsEqual);
 export default {
@@ -191,7 +191,7 @@ NoIcons.args = {
     leftIcon: getFontAwesomeIcon("search"),
     rightIcon: getFontAwesomeIcon("arrow-right"),
     hasButton: true,
-    button: (_jsx(FormButton, { text: "", as: "button", hoverBackground: "hover:bg-green-500", backgroundColor: "bg-green-500", icon: getFontAwesomeIcon("search"), additionalClasses: "items-center px-2 h-full", borderColor: "border-none", hoverFontColor: "hover:text-black", shape: "rounded", onClick: () => alert("Button clicked!") })),
+    button: (_jsx(BaseButton, { text: "", as: "button", hoverBackground: "hover:bg-green-500", backgroundColor: "bg-green-500", icon: getFontAwesomeIcon("search"), additionalClasses: "items-center px-2 h-full", borderColor: "border-none", hoverFontColor: "hover:text-black", shape: "rounded", onClick: () => alert("Button clicked!") })),
     inputTextSize: "text-md",
     inputWidth: "w-96",
     inputShape: "rounded",
@@ -275,7 +275,7 @@ ButtonWithValidation.args = {
     hasRightIcon: false,
     hasLeftIcon: false,
     hasButton: true,
-    button: (_jsx(FormButton, { text: "", as: "button", hoverBackground: "hover:bg-green-500", backgroundColor: "bg-green-500", icon: getFontAwesomeIcon("search"), additionalClasses: "items-center px-2 h-full", borderColor: "border-none", hoverFontColor: "hover:text-black", shape: "rounded", onClick: () => alert("Button clicked!") })),
+    button: (_jsx(BaseButton, { text: "", as: "button", hoverBackground: "hover:bg-green-500", backgroundColor: "bg-green-500", icon: getFontAwesomeIcon("search"), additionalClasses: "items-center px-2 h-full", borderColor: "border-none", hoverFontColor: "hover:text-black", shape: "rounded", onClick: () => alert("Button clicked!") })),
 };
 export const ButtonWithLeftIcon = Template.bind({});
 ButtonWithLeftIcon.args = {
@@ -294,7 +294,7 @@ ButtonWithLeftIcon.args = {
     leftIcon: getFontAwesomeIcon("search"),
     iconBackgroundColor: "none",
     hasButton: true,
-    button: (_jsx(FormButton, { text: "", as: "button", hoverBackground: "hover:bg-green-500", backgroundColor: "bg-green-500", icon: getFontAwesomeIcon("search"), additionalClasses: "items-center px-2 h-full", borderColor: "border-none", hoverFontColor: "hover:text-black", shape: "rounded", onClick: () => alert("Button clicked!") })),
+    button: (_jsx(BaseButton, { text: "", as: "button", hoverBackground: "hover:bg-green-500", backgroundColor: "bg-green-500", icon: getFontAwesomeIcon("search"), additionalClasses: "items-center px-2 h-full", borderColor: "border-none", hoverFontColor: "hover:text-black", shape: "rounded", onClick: () => alert("Button clicked!") })),
 };
 export const DateInput = Template.bind({});
 DateInput.args = {

package/dist/components/Input/Input.test.js

@@ -4,7 +4,7 @@ import { render, screen } from "@testing-library/react";
 import { describe, test, expect, beforeEach } from "vitest";
 import Input from "./Input";
 import Text from "../Text/Text";
-import FormButton from "../FormButton/FormButton";
+import BaseButton from "../BaseButton/BaseButton";
 import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
 describe("<Input /> with all props", () => {
     beforeEach(() => {
@@ -20,7 +20,7 @@ describe("<Input /> with all props", () => {
             // INPUT STYLES
             inputTextSize: "medium", inputShape: "cornered", borderColor: "green", backgroundColor: "none", inputWidth: "w-96", 
             // BUTTON
-            hasButton: true, button: _jsx(FormButton, { text: "Submit", as: "button", hoverBackground: "green", backgroundColor: "green", icon: getFontAwesomeIcon("arrow-right"), additionalClasses: "items-center px-4", borderColor: "green", hoverFontColor: "black", shape: "cornered" }) }));
+            hasButton: true, button: _jsx(BaseButton, { text: "Submit", as: "button", hoverBackground: "green", backgroundColor: "green", icon: getFontAwesomeIcon("arrow-right"), additionalClasses: "items-center px-4", borderColor: "green", hoverFontColor: "black", shape: "cornered" }) }));
     });
     test("renders Input component", () => {
         expect(screen.getByTestId("input-container")).toBeInTheDocument();

package/dist/components/Page/ViewPageTemplate.stories.js

@@ -8,7 +8,7 @@ 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 BaseButton from "../BaseButton";
 import CompassCardTemplate from "../Card/templates/CompassCardTemplate";
 import ViewTemplatePage from "./ViewPageTemplate";
 import Footer from "../Footer/Footer";
@@ -45,7 +45,7 @@ ViewWithHeroAndCardsWithGlassHeader.args = {
     children: [
         //the div acts as a spacer for the header because the header is fixed
         _jsx("div", { className: "h-16" }, "spacer"),
-        _jsx("div", { className: "fixed top-0 w-full z-[1000]", children: _jsx(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: _jsx(_Fragment, {}), badge: _jsx(Badge, { type: "href", to: "#", hoverColor: "hover:text-blue-500", borderColor: "border-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: "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/Logo.png", alt: "Generic Company Logo.", background: false, additionalClasses: " w-40 p-2" }), nav: _jsx(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: _jsx(Input, { labelVisible: false, label: undefined, inputType: "text", inputName: "search", borderColor: "border-gray-500", hasPlaceholder: true, placeholder: "Search", hasButton: true, backgroundColor: "bg-white", additionalClasses: "bg-blue-500", button: _jsx(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" }) }) }, "header"),
+        _jsx("div", { className: "fixed top-0 w-full z-[1000]", children: _jsx(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: _jsx(_Fragment, {}), badge: _jsx(Badge, { type: "href", to: "#", hoverColor: "hover:text-blue-500", borderColor: "border-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: "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/Logo.png", alt: "Generic Company Logo.", background: false, additionalClasses: " w-40 p-2" }), nav: _jsx(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: _jsx(Input, { labelVisible: false, label: undefined, inputType: "text", inputName: "search", borderColor: "border-gray-500", hasPlaceholder: true, placeholder: "Search", hasButton: true, backgroundColor: "bg-white", additionalClasses: "bg-blue-500", button: _jsx(BaseButton, { 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" }) }) }, "header"),
         _jsx(Hero, { textAlignment: "center", background: "image" }, "hero"),
         _jsx(PageSection, { sectionContainerClasses: "flex flex-col w-full h-full bg-slate-100 p-6\n      justify-center items-center max-sm:p-2 max-w-pageSectionMaxWidth mx-auto", children: _jsx(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) => (_jsx(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, children: _jsx(CompassCardTemplate, { data: { ...item, title: "" } }) }, item.id)) }) }, "pageSectionOne"),
     ],
@@ -68,6 +68,6 @@ ViewWithTableAndTitle.args = {
 export const CompassPageView = Template.bind({});
 CompassPageView.args = {
     children: [
-        _jsxs("div", { children: [_jsx("div", { className: "h-16" }), _jsx("div", { className: "fixed top-0 w-full z-[1000]", children: _jsx(Header, { mobileLeft: true, icons: _jsx(_Fragment, {}), 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: _jsx(Badge, { type: "href", to: "#", hoverColor: "hover:text-green-500", borderColor: "border-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: "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: 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: _jsx(Input, { labelVisible: false, label: undefined, inputType: "text", inputName: "search", borderColor: "border-gray-500", hasPlaceholder: true, placeholder: "Search", hasButton: true, backgroundColor: "bg-white", additionalClasses: "bg-blue-500", button: _jsx(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" }) }) }), _jsx(Hero, { textAlignment: "left", background: "image", src: "../../../assets/compass-tech-hero-bg.png", text: _jsx(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" }) }, "hero"), _jsx(PageSection, { sectionContainerClasses: "w-full bg-slate-100 flex flex-col p-6\n      justify-center items-center h-[100%]", children: _jsx(Text, { size: "text-2xl", color: "text-black", fontFamily: "font-serif", text: "Kits", tag: "h2", additionalClasses: "my-4  max-sm:text-xl" }) }, "pageSection"), _jsx(PageSection, { sectionContainerClasses: "flex flex-col w-full h-full bg-slate-100 p-6\n      justify-center items-center max-sm:p-2 max-w-pageSectionMaxWidth mx-auto", children: _jsx(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) => (_jsx(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, children: _jsx(CompassCardTemplate, { data: { ...item, title: "" } }) }, item.id)) }) }, "pageSectionOne"), _jsxs(PageSection, { sectionContainerClasses: "flex w-full bg-yellow-400 flex p-6 justify-center items-center h-[100%] mt-6 max-sm:flex-col", children: [_jsx(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" }), _jsx(FormButton, { text: _jsx(Text, { size: "", color: "", text: "Take the Survey!", fontFamily: "" }), backgroundColor: "bg-green-500", 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" })] }), _jsx(Footer, { logo: _jsx(Image, { src: "../../../assets/compass-logo.png", alt: "Generic Compass Logo.", background: false, additionalClasses: " w-40 p-2" }), title: _jsx(Text, { size: "text-xl", color: "", text: "Compass Website", fontFamily: "", tag: "h2", additionalClasses: "font-bold uppercase pl-2 mt-2" }), slogan: _jsx(Text, { size: "text-md", color: "", text: "Great slogan goes here.", fontFamily: "", tag: "p", additionalClasses: "pl-2" }), copyRightText: _jsx(Text, { size: "md", color: "text-black", text: "Copyright \u00A9 2024 - All right reserved by Generic Company", fontFamily: "", additionalClasses: "text-center" }), socialTitle: _jsx(Text, { size: "md", color: "text-black", text: "Connect", fontFamily: "", additionalClasses: "font-bold uppercase w-full" }), contactTitle: _jsx(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" })] }, "randomNumberOne"),
+        _jsxs("div", { children: [_jsx("div", { className: "h-16" }), _jsx("div", { className: "fixed top-0 w-full z-[1000]", children: _jsx(Header, { mobileLeft: true, icons: _jsx(_Fragment, {}), 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: _jsx(Badge, { type: "href", to: "#", hoverColor: "hover:text-green-500", borderColor: "border-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: "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: 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: _jsx(Input, { labelVisible: false, label: undefined, inputType: "text", inputName: "search", borderColor: "border-gray-500", hasPlaceholder: true, placeholder: "Search", hasButton: true, backgroundColor: "bg-white", additionalClasses: "bg-blue-500", button: _jsx(BaseButton, { 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" }) }) }), _jsx(Hero, { textAlignment: "left", background: "image", src: "../../../assets/compass-tech-hero-bg.png", text: _jsx(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" }) }, "hero"), _jsx(PageSection, { sectionContainerClasses: "w-full bg-slate-100 flex flex-col p-6\n      justify-center items-center h-[100%]", children: _jsx(Text, { size: "text-2xl", color: "text-black", fontFamily: "font-serif", text: "Kits", tag: "h2", additionalClasses: "my-4  max-sm:text-xl" }) }, "pageSection"), _jsx(PageSection, { sectionContainerClasses: "flex flex-col w-full h-full bg-slate-100 p-6\n      justify-center items-center max-sm:p-2 max-w-pageSectionMaxWidth mx-auto", children: _jsx(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) => (_jsx(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, children: _jsx(CompassCardTemplate, { data: { ...item, title: "" } }) }, item.id)) }) }, "pageSectionOne"), _jsxs(PageSection, { sectionContainerClasses: "flex w-full bg-yellow-400 flex p-6 justify-center items-center h-[100%] mt-6 max-sm:flex-col", children: [_jsx(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" }), _jsx(BaseButton, { text: _jsx(Text, { size: "", color: "", text: "Take the Survey!", fontFamily: "" }), backgroundColor: "bg-green-500", 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" })] }), _jsx(Footer, { logo: _jsx(Image, { src: "../../../assets/compass-logo.png", alt: "Generic Compass Logo.", background: false, additionalClasses: " w-40 p-2" }), title: _jsx(Text, { size: "text-xl", color: "", text: "Compass Website", fontFamily: "", tag: "h2", additionalClasses: "font-bold uppercase pl-2 mt-2" }), slogan: _jsx(Text, { size: "text-md", color: "", text: "Great slogan goes here.", fontFamily: "", tag: "p", additionalClasses: "pl-2" }), copyRightText: _jsx(Text, { size: "md", color: "text-black", text: "Copyright \u00A9 2024 - All right reserved by Generic Company", fontFamily: "", additionalClasses: "text-center" }), socialTitle: _jsx(Text, { size: "md", color: "text-black", text: "Connect", fontFamily: "", additionalClasses: "font-bold uppercase w-full" }), contactTitle: _jsx(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" })] }, "randomNumberOne"),
     ],
 };

package/dist/components/Page/ViewPageTemplate.test.js

@@ -9,7 +9,7 @@ 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 BaseButton from "../BaseButton";
 import CompassCardTemplate from "../Card/templates/CompassCardTemplate";
 import Footer from "../Footer/Footer";
 import { DUMMYICONCOMPASSDATA } from "../Header/DUMMYICONDATA.json";
@@ -38,7 +38,7 @@ describe("<ViewTemplatePage />", () => {
 });
 describe("<ViewTemplatePage />", () => {
     beforeEach(() => {
-        render(_jsxs(ViewTemplatePage, { children: ["children: [ ", _jsx("div", { className: "h-16" }), ",", _jsx("div", { className: "fixed top-0 w-full z-[1000]", children: _jsx(Header, { hasIcons: true, iconsData: DUMMYICONCOMPASSDATA, logoBorderRadius: true, hasSearchBar: true, hasBadge: true, hasNavItems: true, logoHoverColor: "green", backgroundColor: "gray", bottomBorderColor: "green", 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" })] }) }), 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" }) }) }), ",", _jsx(Hero, { textAlignment: "right", background: "image", src: "../../../assets/compass-tech-hero-bg.png", text: _jsx(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" }) }, "hero"), ",", _jsx("div", { "data-testid": "kits-header-section", children: _jsx(PageSection, { sectionContainerClasses: "w-full bg-slate-100 flex flex-col p-6\n\t\t\t\tjustify-center items-center h-[100%]", children: _jsx(Text, { size: "xxxl", color: "black", fontFamily: "serif", text: "Kits", tag: "h2", additionalClasses: "my-8" }) }, "pageSection") }), ",", _jsx("div", { "data-testid": "kits-cards-section", children: _jsx(PageSection, { sectionContainerClasses: "w-full bg-slate-100 flex flex-col p-6\n\t\t\tjustify-center items-center h-[100%]", children: _jsx(_Fragment, { children: _jsx("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", children: _jsx(GenericList, { data: DUMMYCOMPASSPRODUCTDATA, listType: "none", renderItem: (item) => (_jsx(Card, { containerClasses: "w-3/4", cardBackgroundColor: item.cardBackgroundColor, cardBorderRadius: item.cardBorderRadius, cardBorderColor: item.cardBorderColor, cardBoxShadow: item.cardBoxShadow, children: _jsx(CompassCardTemplate, { data: item }) }, item.id)) }) }) }) }, "pageSection") }), ",", _jsx("div", { "data-testid": "survey-section", children: _jsxs(PageSection, { sectionContainerClasses: "w-full bg-yellow-400 flex p-6\n\t\t\t\tjustify-center items-center h-[100%] mt-6", children: [_jsx(Text, { size: "xl", color: "black", fontFamily: "serif", text: "Equip your team with exactly what they need", tag: "h1", additionalClasses: "mr-8" }), _jsx(FormButton, { text: _jsx(Text, { size: "", color: "", text: "Take the Survey!", fontFamily: "" }), shape: "semiRounded", borderColor: "none", hoverBackground: "green", hoverFontColor: "green", hoverBorderColor: "green", hoverUnderline: true, onClick: () => alert("Button clicked!"), as: "a" })] }) }), ",", _jsx(Footer, { logo: _jsx(Image, { src: "../../../assets/compass-logo.png", alt: "Generic Compass Logo.", background: false, additionalClasses: " w-40 p-2" }), title: _jsx(Text, { size: "xl", color: "", text: "Compass Website", fontFamily: "", tag: "h2", additionalClasses: "font-bold uppercase pl-2 mt-2 max-md:text-sm" }), slogan: _jsx(Text, { size: "md", color: "", text: "Great slogan goes here.", fontFamily: "", tag: "p", additionalClasses: "pl-2" }), copyRightText: _jsx(Text, { size: "md", color: "black", text: "Copyright \u00A9 2024 - All right reserved by Generic Company", fontFamily: "", additionalClasses: "text-center" }), socialTitle: _jsx(Text, { size: "md", color: "black", text: "Connect", fontFamily: "", additionalClasses: "font-bold uppercase w-full" }), contactTitle: _jsx(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" }), ", ]"] }));
+        render(_jsxs(ViewTemplatePage, { children: ["children: [ ", _jsx("div", { className: "h-16" }), ",", _jsx("div", { className: "fixed top-0 w-full z-[1000]", children: _jsx(Header, { hasIcons: true, iconsData: DUMMYICONCOMPASSDATA, logoBorderRadius: true, hasSearchBar: true, hasBadge: true, hasNavItems: true, logoHoverColor: "green", backgroundColor: "gray", bottomBorderColor: "green", 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" })] }) }), 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" }) }) }), ",", _jsx(Hero, { textAlignment: "right", background: "image", src: "../../../assets/compass-tech-hero-bg.png", text: _jsx(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" }) }, "hero"), ",", _jsx("div", { "data-testid": "kits-header-section", children: _jsx(PageSection, { sectionContainerClasses: "w-full bg-slate-100 flex flex-col p-6\n\t\t\t\tjustify-center items-center h-[100%]", children: _jsx(Text, { size: "xxxl", color: "black", fontFamily: "serif", text: "Kits", tag: "h2", additionalClasses: "my-8" }) }, "pageSection") }), ",", _jsx("div", { "data-testid": "kits-cards-section", children: _jsx(PageSection, { sectionContainerClasses: "w-full bg-slate-100 flex flex-col p-6\n\t\t\tjustify-center items-center h-[100%]", children: _jsx(_Fragment, { children: _jsx("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", children: _jsx(GenericList, { data: DUMMYCOMPASSPRODUCTDATA, listType: "none", renderItem: (item) => (_jsx(Card, { containerClasses: "w-3/4", cardBackgroundColor: item.cardBackgroundColor, cardBorderRadius: item.cardBorderRadius, cardBorderColor: item.cardBorderColor, cardBoxShadow: item.cardBoxShadow, children: _jsx(CompassCardTemplate, { data: item }) }, item.id)) }) }) }) }, "pageSection") }), ",", _jsx("div", { "data-testid": "survey-section", children: _jsxs(PageSection, { sectionContainerClasses: "w-full bg-yellow-400 flex p-6\n\t\t\t\tjustify-center items-center h-[100%] mt-6", children: [_jsx(Text, { size: "xl", color: "black", fontFamily: "serif", text: "Equip your team with exactly what they need", tag: "h1", additionalClasses: "mr-8" }), _jsx(BaseButton, { text: _jsx(Text, { size: "", color: "", text: "Take the Survey!", fontFamily: "" }), shape: "semiRounded", borderColor: "none", hoverBackground: "green", hoverFontColor: "green", hoverBorderColor: "green", hoverUnderline: true, onClick: () => alert("Button clicked!"), as: "a" })] }) }), ",", _jsx(Footer, { logo: _jsx(Image, { src: "../../../assets/compass-logo.png", alt: "Generic Compass Logo.", background: false, additionalClasses: " w-40 p-2" }), title: _jsx(Text, { size: "xl", color: "", text: "Compass Website", fontFamily: "", tag: "h2", additionalClasses: "font-bold uppercase pl-2 mt-2 max-md:text-sm" }), slogan: _jsx(Text, { size: "md", color: "", text: "Great slogan goes here.", fontFamily: "", tag: "p", additionalClasses: "pl-2" }), copyRightText: _jsx(Text, { size: "md", color: "black", text: "Copyright \u00A9 2024 - All right reserved by Generic Company", fontFamily: "", additionalClasses: "text-center" }), socialTitle: _jsx(Text, { size: "md", color: "black", text: "Connect", fontFamily: "", additionalClasses: "font-bold uppercase w-full" }), contactTitle: _jsx(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" }), ", ]"] }));
     });
     test("renders header on page", () => {
         const header = screen.getByTestId("header");

package/dist/components/PageSection/PageSection.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import { PageSectionTypes } from ".";
+import { PageSectionTypes } from "./PageSection.types";
 declare const Section: React.FC<PageSectionTypes>;
 export default Section;

package/dist/components/PageSection/PageSection.stories.js

@@ -26,16 +26,16 @@ export default {
 const Template = (args) => _jsx(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",
+    sectionContainerClasses: " flex flex-row justify-center items-center flex-wrap lg:gap-10 gap-6  my-20 lg:max-h-view-page  max-h-fit  min-h-fit overflow-scroll px-6",
     children: (_jsxs(_Fragment, { children: [_jsx("div", { className: "bg-red-400 p-4", children: "Content 1" }), _jsx("div", { className: "bg-green-400 p-4", children: "Content 2" }), _jsx("div", { className: "bg-blue-400 p-4", children: "Content 3" })] })),
 };
 export const HorizontalCardsSection = Template.bind({});
 HorizontalCardsSection.args = {
     sectionContainerClasses: "w-full bg-slate-100 flex flex-col p-6 justify-center items-center",
-    children: (_jsxs(_Fragment, { children: [_jsx(Text, { tag: "h1", size: "lg", text: "Example of a section with horizontal cards:", color: "black", fontFamily: "", additionalClasses: "pb-12" }), _jsx(GenericList, { data: DUMMYPRODUCTDATA, listType: "none", renderItem: (item) => (_jsx(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, children: _jsx(HorizontalCardTemplate, { data: item }) }, item.id)) })] })),
+    children: (_jsxs(_Fragment, { children: [_jsx(Text, { tag: "h1", size: "lg", text: "Example of a section with horizontal cards:", color: "black", fontFamily: "", additionalClasses: "pb-12 text-xl font-bold" }), _jsx(GenericList, { data: DUMMYPRODUCTDATA, listType: "none", renderItem: (item) => (_jsx(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, children: _jsx(HorizontalCardTemplate, { data: item }) }, item.id)) })] })),
 };
 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: (_jsxs(_Fragment, { children: [_jsx(Text, { tag: "h1", size: "lg", text: "Example of a section with horizontal cards:", color: "black", fontFamily: "", additionalClasses: "pb-12" }), _jsx(GenericList, { data: DUMMYCOMPASSPRODUCTDATA, listType: "none", 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) => (_jsx(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, children: _jsx(CompassCardTemplate, { data: item }) }, item.id)) })] })),
+    children: (_jsxs(_Fragment, { children: [_jsx(Text, { tag: "h1", size: "lg", text: "Example of a section with compass cards:", color: "black", fontFamily: "", additionalClasses: "pb-12 text-xl font-bold" }), _jsx(GenericList, { data: DUMMYCOMPASSPRODUCTDATA, listType: "none", 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) => (_jsx(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, children: _jsx(CompassCardTemplate, { data: item }) }, item.id)) })] })),
 };

package/dist/components/PageSection/PageSections.test.js

@@ -6,8 +6,9 @@ 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 />", () => {
+import { DUMMYPRODUCTDATA, DUMMYCOMPASSPRODUCTDATA, } from "../../components/Card/DUMMYPRODUCTDATA.json";
+import HorizontalCardTemplate from "../Card/templates/HorizontalCardTemplate";
+describe("Section Component(<Section />)", () => {
     beforeEach(() => {
         render(_jsx(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: _jsxs(_Fragment, { children: [_jsx("div", { className: "bg-red-400 p-4", children: "Content 1" }), _jsx("div", { className: "bg-green-400 p-4", children: "Content 2" }), _jsx("div", { className: "bg-blue-400 p-4", children: "Content 3" })] }) }));
     });
@@ -20,12 +21,21 @@ describe("<Section />", () => {
         expect(section).toHaveClass("flex-row");
     });
 });
+describe("<Section /> with horizontal cards", () => {
+    it("displays correct cards", () => {
+        render(_jsx(Section, { sectionContainerClasses: "w-full bg-slate-100 flex flex-col p-6 justify-center items-center", children: _jsxs(_Fragment, { children: [_jsx(Text, { tag: "h1", size: "lg", text: "Example of a section with horizontal cards:", color: "black", fontFamily: "", additionalClasses: "pb-12 text-xl font-bold" }), _jsx(GenericList, { data: DUMMYPRODUCTDATA, listType: "none", renderItem: (item) => (_jsx(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, children: _jsx(HorizontalCardTemplate, { data: item }) }, item.id)) })] }) }));
+        const cards = screen.queryAllByTestId("card");
+        expect(cards.length).toBe(6);
+        const cardTitles = screen.getAllByText("Crothall iPads - Environmental Services");
+        expect(cardTitles).toHaveLength(2);
+    });
+});
 describe("<Section /> with compass cards", () => {
     it("displays correct cards", () => {
         render(_jsx(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: _jsxs(_Fragment, { children: [_jsx(Text, { tag: "h1", size: "lg", text: "Example of a section with horizontal cards:", color: "black", fontFamily: "", additionalClasses: "pb-12" }), _jsx("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", children: _jsx(GenericList, { data: DUMMYCOMPASSPRODUCTDATA, listType: "none", renderItem: (item) => (_jsx(Card, { containerClasses: "w-3/4", cardBackgroundColor: item.cardBackgroundColor, cardBorderRadius: item.cardBorderRadius, cardBorderColor: item.cardBorderColor, cardBoxShadow: item.cardBoxShadow, children: _jsx(CompassCardTemplate, { data: item }) })) }) })] }) }));
         const cards = screen.queryAllByTestId("card");
         expect(cards.length).toBe(16);
-        expect(cards[0]).toHaveTextContent("Compass Sales Lenovo TP X13 Yoga G3 Laptop");
+        expect(cards[0]).toHaveTextContent("Environmental Services - Lenovo ThinkPad Universal USB-C Dock");
         expect(cards[3]).toHaveTextContent("Exec RoadWarrior");
     });
 });

package/dist/components/SearchInput/SearchInput.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import FormButton from "../FormButton/FormButton";
+import BaseButton from "../BaseButton/BaseButton";
 const SearchInput = ({ label, inputName, inputType, hasPlaceholder, placeholder, inputTextSize, inputShape, backgroundColor, inputWidth, inputBorderClasses, buttonClasses, buttonText, buttonIcon, buttonIconClasses, containerClasses, onButtonClick, role, ariaLabel, }) => {
     const [inputValue, setInputValue] = useState("");
     const handleInputChange = (e) => {
@@ -12,6 +12,6 @@ const SearchInput = ({ label, inputName, inputType, hasPlaceholder, placeholder,
             onButtonClick(inputValue);
         }
     };
-    return (_jsx("div", { className: containerClasses, role: role, "aria-label": ariaLabel, children: _jsxs("form", { className: "w-full", children: [_jsx("label", { htmlFor: inputName, className: `sr-only`, children: label }), _jsx("div", { className: "flex w-full", children: _jsxs("div", { className: "flex w-full", children: [_jsx("input", { type: inputType, placeholder: hasPlaceholder ? placeholder : undefined, name: inputName, id: inputName, value: inputValue, onChange: handleInputChange, className: `flex p-2 ${inputTextSize} ${inputShape} ${backgroundColor} ${inputWidth} ${inputBorderClasses}` }), _jsx("div", { className: `flex items-center justify-center h-full`, children: _jsx(FormButton, { text: buttonText, icon: buttonIcon, iconClasses: buttonIconClasses, as: "button", additionalClasses: buttonClasses, onClick: handleButtonClick }) })] }) })] }) }));
+    return (_jsx("div", { className: containerClasses, role: role, "aria-label": ariaLabel, children: _jsxs("form", { className: "w-full", children: [_jsx("label", { htmlFor: inputName, className: `sr-only`, children: label }), _jsx("div", { className: "flex w-full", children: _jsxs("div", { className: "flex w-full", children: [_jsx("input", { type: inputType, placeholder: hasPlaceholder ? placeholder : undefined, name: inputName, id: inputName, value: inputValue, onChange: handleInputChange, className: `flex p-2 ${inputTextSize} ${inputShape} ${backgroundColor} ${inputWidth} ${inputBorderClasses}` }), _jsx("div", { className: `flex items-center justify-center h-full`, children: _jsx(BaseButton, { text: buttonText, icon: buttonIcon, iconClasses: buttonIconClasses, as: "button", additionalClasses: buttonClasses, onClick: handleButtonClick }) })] }) })] }) }));
 };
 export default SearchInput;

package/dist/components/Text/Text.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-const Text = ({ size = "text-base", color = "text-black", tag = "span", text, fontFamily = "font-sans", additionalClasses = "", ...props }) => {
+const Text = ({ size = "text-base", color = "text-black", tag = "span", text, fontFamily = "font-sans", additionalClasses = "", style = {}, ...props }) => {
     const ElementTag = tag;
     const className = `
 		${size}
@@ -7,6 +7,6 @@ const Text = ({ size = "text-base", color = "text-black", tag = "span", text, fo
 		${fontFamily}
 		${additionalClasses}
 	`;
-    return (_jsx(ElementTag, { "data-testid": "text", className: className, ...props, children: text }));
+    return (_jsx(ElementTag, { "data-testid": "text", className: className, style: style, ...props, children: text }));
 };
 export default Text;

package/dist/components/Text/Text.stories.js

@@ -61,6 +61,13 @@ export default {
             description: "Additional Tailwind CSS classes to be added.",
             defaultValue: "",
         },
+        style: {
+            control: {
+                type: "object", // Text input control
+            },
+            description: "Inline CSS styles to be added.",
+            defaultValue: "",
+        },
     },
     tags: ["autodocs"],
     parameters: {

package/dist/components/Text/Text.test.js

@@ -4,7 +4,7 @@ import { describe, expect, beforeEach, test } from "vitest";
 import Text from "./Text";
 describe("<Text />", () => {
     beforeEach(() => {
-        render(_jsx(Text, { text: "Testing", size: "text-md", color: "text-red-500", tag: "h1", fontFamily: "font-sans" }));
+        render(_jsx(Text, { text: "Testing", size: "text-md", color: "text-red-500", tag: "h1", fontFamily: "font-sans", style: { fontSize: "24px" } }));
     });
     test("renders Text component", () => {
         expect(screen.getByTestId("text")).toBeInTheDocument();
@@ -28,4 +28,10 @@ describe("<Text />", () => {
         const textElement = screen.getByTestId("text");
         expect(textElement.tagName).toBe("H1");
     });
+    test("applies inline styles correctly", () => {
+        const textElement = screen.getByTestId("text");
+        expect(textElement).toHaveStyle({
+            fontSize: "24px",
+        });
+    });
 });

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

@@ -7,4 +7,5 @@ export interface TextTypes {
     text: ReactNode;
     fontFamily?: string;
     additionalClasses?: string;
+    style?: React.CSSProperties;
 }

package/dist/components/Toaster/Toaster.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
-const Toaster = ({ message, additionalClasses, clearMessage, hasClearButton, statusProps = {
+const Toaster = ({ message, additionalClasses, clearMessage, hasClearButton, closeIconColor, iconColor, statusProps = {
     colorClass: "bg-gray-100 border border-gray-500 text-gray-800",
     icon: { icon: "circleCheck", type: "solid" },
 }, }) => {
@@ -12,8 +12,8 @@ const Toaster = ({ message, additionalClasses, clearMessage, hasClearButton, sta
     const { colorClass, icon: maybeIcon } = statusProps;
     const containerClasses = colorClass ?? "";
     const shadowClasses = `shadow-lg shadow-boxShadow rounded-lg`;
-    const closeButtonClasses = `cursor-pointer text-xs`;
-    return (_jsx("div", { "data-testid": "toaster-test-id", role: "alert", "aria-live": "polite", className: `${shadowClasses} ${containerClasses} ${additionalClasses}`, children: message.map((msg, index) => (_jsxs("div", { className: "flex items-center p-2", children: [_jsx("div", { className: "w-6 flex-none mr-2", children: index === 0 && maybeIcon
+    const closeButtonClasses = `cursor-pointer text-xs ${closeIconColor}`;
+    return (_jsx("div", { "data-testid": "toaster-test-id", role: "alert", "aria-live": "polite", className: `${shadowClasses} ${containerClasses} ${additionalClasses}`, children: message.map((msg, index) => (_jsxs("div", { className: "flex items-center p-2", children: [_jsx("div", { className: `w-6 flex-none mr-2 ${iconColor} `, children: index === 0 && maybeIcon
                         ? getFontAwesomeIcon(maybeIcon.icon, maybeIcon.type)
                         : null }), _jsx("div", { className: "flex-grow", children: _jsx("p", { className: index === 0 && "font-semibold", children: msg }) }), _jsx("div", { className: "w-6 flex-none ml-2", children: index === 0 && hasClearButton && (_jsx("div", { "data-testid": "clear-button", className: closeButtonClasses, onClick: handleClearMessage, children: getFontAwesomeIcon("x", "solid") })) })] }, index))) }));
 };

package/dist/components/Toaster/Toaster.stories.js

@@ -23,6 +23,14 @@ export default {
             control: "object",
             description: "Object containing colorClass and optional icon config.",
         },
+        closeIconColor: {
+            control: "string",
+            description: "Color of the close icon.",
+        },
+        iconColor: {
+            control: "string",
+            description: "Color of the icon.",
+        },
     },
     tags: ["autodocs"],
     parameters: {
@@ -107,6 +115,8 @@ hasMultipleMessages.args = {
     clearMessage: () => {
         alert("Message Cleared!");
     },
+    closeIconColor: "text-orange-400",
+    iconColor: "text-orange-400",
     statusProps: {
         // Orange variant
         colorClass: "bg-orange-100 border border-orange-500 text-orange-800",

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

@@ -11,5 +11,7 @@ export interface ToasterTypes {
     clearMessage?: React.Dispatch<React.SetStateAction<boolean>>;
     hasClearButton?: boolean;
     statusProps?: StatusProps;
+    closeIconColor?: string;
+    iconColor?: string;
 }
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@agilant/toga-blox",
 	"private": false,
-	"version": "1.0.29",
+	"version": "1.0.30",
 	"description": "",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",