@agilant/toga-blox 1.0.9 → 1.0.11

package/dist/components/Footer/Footer.stories.js

@@ -0,0 +1,155 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Footer from "./Footer";
+import Image from "../Image/Image";
+import Text from "../Text/Text";
+import { withStoryBook } from "../../hoc";
+// Wrap your component with the HOC
+const StoryBookViewFooter = withStoryBook(Footer);
+export default {
+    title: "Footers/Footer",
+    component: StoryBookViewFooter,
+    argTypes: {
+        logo: {
+            control: "none",
+            description: "The logo displayed in the footer",
+        },
+        logoBorderRadius: {
+            control: "boolean",
+            description: "Whether the logo has a border radius.",
+        },
+        logoHoverColor: {
+            control: "select",
+            options: ["green", "blue", "none"],
+            description: "Whether the logo has a background color on hover.",
+        },
+        backgroundColor: {
+            control: "color",
+            description: "Whether the footer has a background color.",
+        },
+        title: {
+            control: "text",
+            description: "The title displayed in the footer",
+        },
+        slogan: {
+            control: "text",
+            description: "The slogan displayed in the footer",
+        },
+        hasTitle: {
+            control: "boolean",
+            description: "Whether the footer has a title displayed",
+        },
+        hasSlogan: {
+            control: "boolean",
+            description: "Whether the footer has a slogan displayed",
+        },
+        hasNavItems: {
+            control: "boolean",
+            description: "Whether the footer has navigation items.",
+        },
+        accordionGap: {
+            table: {
+                disable: true,
+            },
+        },
+        accordionParentStyle: {
+            table: {
+                disable: true,
+            },
+        },
+        accordionExpandedStyle: {
+            table: {
+                disable: true,
+            },
+        },
+        socialTitle: {
+            table: {
+                disable: true,
+            },
+        },
+        socialPlacement: {
+            control: "select",
+            options: ["left", "center", "right"],
+            description: "Where the social icons are placed.",
+        },
+        hasSocial: {
+            control: "boolean",
+            description: "Whether the footer has social icons displayed",
+        },
+        contactTitle: {
+            table: {
+                disable: true,
+            },
+        },
+        copyRightTextPlacement: {
+            control: "select",
+            options: ["left", "center", "right"],
+            description: "Where the copyright statement is placed.",
+        },
+        copyRightText: {
+            table: {
+                disable: true,
+            },
+            description: "Whether the footer displays a copyright statement.",
+        },
+        hasCopyRight: {
+            control: "boolean",
+            description: "Whether the footer has a copyright statement displayed",
+        },
+    },
+    parameters: {
+        tags: ["autodocs"],
+    },
+};
+const Template = (args) => (_jsx(StoryBookViewFooter, { ...args, storybookStyle: {
+        backgroundColor: args.backgroundColor,
+    } }));
+export const Default = Template.bind({});
+Default.args = {
+    logoBorderRadius: true,
+    hasNavItems: false,
+    hasSocial: true,
+    logoHoverColor: "blue",
+    backgroundColor: "gray",
+    contactTitle: (_jsx(Text, { size: "md", color: "black", text: "Contact Us:", fontFamily: "", additionalClasses: "font-bold uppercase" })),
+    copyRightText: (_jsx(Text, { size: "md", color: "black", text: "Copyright \u00A9 2024 - All right reserved by Generic Company", fontFamily: "", additionalClasses: "text-center" })),
+    copyRightTextPlacement: "center",
+    socialPlacement: "flex justify-center mt-4",
+};
+export const CompassFooter = Template.bind({});
+CompassFooter.args = {
+    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-2",
+    copyRightTextPlacement: "center",
+    socialPlacement: "flex justify-center mt-4",
+    accordionParentStyle: "border-b border-black p-2 w-full",
+    accordionExpandedStyle: "pl-3 py-3",
+};
+export const AlternateMobileNavStyle = Template.bind({});
+AlternateMobileNavStyle.args = {
+    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,
+    accordionGap: "gap-2",
+    logoHoverColor: "green",
+    backgroundColor: "green",
+    copyRightTextPlacement: "center",
+    socialPlacement: "flex justify-center mt-4",
+    accordionParentStyle: "rounded-md border-black p-2 w-full bg-teal-700 text-white",
+    accordionExpandedStyle: "pl-2 py-3",
+};

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

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

package/dist/components/Footer/Footer.test.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "../../../dist/main.css";
+import { render, screen, within } from "@testing-library/react";
+import { describe, test, expect, beforeEach } from "vitest";
+import Footer from "./Footer";
+import Image from "../Image/Image";
+import { DUMMYCONTACTDATA, DUMMYNAVDATA, DUMMYSOCIALDATA, } from "./DUMMYFOOTERDATA.json";
+describe("<Footer /> with all props (pill, icons, input, logo)", () => {
+    beforeEach(() => {
+        render(_jsx(Footer, { logo: _jsx(Image, { src: "../../../assets/Logo.png", alt: "Generic Company Logo.", background: false, additionalClasses: " w-40 " }), hasSlogan: true, hasTitle: false, slogan: "Great slogan goes here.", backgroundColor: "gray", logoBorderRadius: true, logoHoverColor: "blue", hasNavItems: true, hasSocial: true, hasContact: true, socialData: DUMMYSOCIALDATA, navData: DUMMYNAVDATA, contactData: DUMMYCONTACTDATA }));
+    });
+    test("renders Footer component", () => {
+        expect(screen.getByTestId("footer")).toBeInTheDocument();
+    });
+    test("renders correct background color class", () => {
+        const footer = screen.getByTestId("footer");
+        expect(footer).toHaveClass("bg-slate-200");
+    });
+    test("contains correct logo from Image component", () => {
+        const footerLogo = screen.getByTestId("footer-logo");
+        const logoImage = footerLogo.querySelector("img");
+        expect(logoImage).toHaveAttribute("src", "../../../assets/Logo.png");
+    });
+    test("contains correct alt text from Image component", () => {
+        const footerLogo = screen.getByTestId("footer-logo");
+        const logoImage = footerLogo.querySelector("img");
+        expect(logoImage).toHaveAttribute("alt", "Generic Company Logo.");
+    });
+    test("contains correct slogan", () => {
+        const titleSloganElement = screen.getByTestId("title-slogan");
+        const sloganElement = within(titleSloganElement).getByTestId("slogan");
+        expect(sloganElement).toBeInTheDocument();
+        expect(sloganElement).toHaveTextContent("Great slogan goes here.");
+    });
+    test("contains correct site navigation ", () => {
+        expect(screen.getByTestId("footer-site-navigation")).toBeInTheDocument();
+        expect(screen.getByTestId("About")).toBeInTheDocument();
+        expect(screen.getByTestId("Projects")).toBeInTheDocument();
+        expect(screen.getByTestId("Community")).toBeInTheDocument();
+        expect(screen.getByTestId("Store")).toBeInTheDocument();
+    });
+    test("contains correct social navigation ", () => {
+        expect(screen.getByTestId("footer-social-navigation")).toBeInTheDocument();
+        expect(screen.getByTestId("Twitter")).toBeInTheDocument();
+        expect(screen.getByTestId("YouTube")).toBeInTheDocument();
+        expect(screen.getByTestId("Facebook")).toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,42 @@
+import { DUMMYCONTACTDATA, DUMMYNAVDATA, DUMMYSOCIALDATA } from "./DUMMYFOOTERDATA.json";
+export interface NavItem {
+    title: string;
+    links: Array<{
+        link: string;
+        menuItem: string;
+    }>;
+}
+export interface SocialItem {
+    href: string;
+    xmlns: string;
+    ariaLabel: string;
+    path: string;
+}
+export interface FooterProps {
+    onClick?: (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+    hasLogo?: boolean;
+    logo?: React.ReactNode;
+    backgroundColor?: string;
+    logoHoverColor?: string;
+    logoBorderRadius?: boolean;
+    hasTitle?: boolean;
+    hasSlogan?: boolean;
+    title?: React.ReactNode;
+    slogan?: React.ReactNode;
+    hasNavItems?: boolean;
+    navData?: typeof DUMMYNAVDATA;
+    accordionParentStyle?: string;
+    accordionExpandedStyle?: string;
+    accordionGap?: string;
+    hasSocial?: boolean;
+    socialData?: typeof DUMMYSOCIALDATA;
+    socialTitle?: React.ReactNode;
+    socialPlacement?: string;
+    contactTitle?: React.ReactNode;
+    hasContact?: boolean;
+    contactData?: typeof DUMMYCONTACTDATA;
+    hasCopyRight?: boolean;
+    copyRightText?: React.ReactNode;
+    copyRightTextPlacement?: string;
+    children?: React.ReactNode;
+}

package/dist/components/Footer/Footer.types.js

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

package/dist/components/FormButton/FormButton.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { FormButtonProps } from "./FormButton.types";
+declare const FormButton: React.FC<FormButtonProps>;
+export default FormButton;

package/dist/components/FormButton/FormButton.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const FormButton = ({ onClick, text, fontFamily, backgroundColor, customWidth, customHeight, shape, borderColor, icon, additionalClasses, type = "button", to, href, isDisabled = false, hasShadow, as: Element = "button", hoverBackground, hoverFontColor, hoverUnderline = false, hoverBorderColor, iconClasses, ...props }) => {
+    const baseFormButtonClasses = "flex items-center justify-center";
+    const hoverClasses = !isDisabled
+        ? `${hoverBackground} ${hoverFontColor} ${hoverUnderline ? "underline underline-offset-4" : ""} ${hoverBorderColor}`
+        : "";
+    const buttonColorClasses = `${backgroundColor} ${borderColor}`;
+    const cursorClasses = isDisabled
+        ? "cursor-not-allowed opacity-50"
+        : "cursor-pointer";
+    const textStyleClasses = `${fontFamily}`;
+    const buttonShapeClasses = shape;
+    const buttonClasses = `
+    ${baseFormButtonClasses}
+    ${buttonColorClasses}
+    ${buttonShapeClasses}
+    ${textStyleClasses}
+    ${hoverClasses}
+    ${cursorClasses}
+    ${hasShadow ? "shadow-md" : ""}
+    ${customWidth}
+    ${customHeight}
+    ${additionalClasses}
+  `.trim();
+    const handleClick = (e) => {
+        if (isDisabled) {
+            e.preventDefault();
+            return;
+        }
+        onClick?.(e);
+    };
+    const baseProps = {
+        className: buttonClasses,
+        onClick: handleClick,
+        "aria-disabled": isDisabled ? "true" : "false",
+    };
+    let ElementProps = { ...baseProps };
+    if (Element === "a" && href) {
+        ElementProps = { ...baseProps, href };
+    }
+    else if (Element === "button") {
+        ElementProps = { ...baseProps, type };
+    }
+    else {
+        ElementProps = { ...baseProps };
+    }
+    return (_jsxs(Element, { ...ElementProps, ...props, children: [icon && _jsx("span", { className: iconClasses, children: icon }), text] }));
+};
+export default FormButton;

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

@@ -0,0 +1,12 @@
+import { Meta } from "@storybook/react";
+declare const _default: Meta;
+export default _default;
+export declare const Default: any;
+export declare const Compass: any;
+export declare const Disabled: any;
+export declare const WithIcon: any;
+export declare const IconOnly: any;
+export declare const ClearCartButton: any;
+export declare const RightIconButton: any;
+export declare const ConfirmRequestButton: any;
+export declare const FourButtonsRow: any;

package/dist/components/FormButton/FormButton.stories.js

@@ -0,0 +1,200 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import FormButton from "./FormButton";
+import Text from "../Text/Text";
+import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
+export default {
+    title: "Components/FormButton",
+    component: FormButton,
+    argTypes: {
+        onClick: {
+            table: {
+                disable: true,
+            },
+            control: "none",
+        },
+        text: {
+            control: "none",
+            description: "The main text displayed on the button.",
+        },
+        fontFamily: {
+            control: "none",
+            description: "The font family of the button text.",
+        },
+        backgroundColor: {
+            control: "none",
+            description: "The background color of the button. Use Tailwind CSS color classes.",
+        },
+        borderColor: {
+            control: "none",
+            description: "The color of the border of the button. Use Tailwind CSS border color classes.",
+        },
+        shape: {
+            control: "none",
+            description: "The shape of the button. Use Tailwind CSS border radius classes.",
+        },
+        hoverBackground: {
+            control: "none",
+            description: "The background color of the button on hover. Use Tailwind CSS color classes.",
+        },
+        hoverFontColor: {
+            control: "none",
+            description: "The text color of the button on hover. Use Tailwind CSS color classes.",
+        },
+        hoverUnderline: {
+            control: "none",
+            description: "Whether the text is underlined on hover.",
+        },
+        hoverBorderColor: {
+            control: "none",
+            description: "The border color of the button on hover. Use Tailwind CSS border color classes.",
+        },
+        isDisabled: {
+            control: "none",
+            description: "Whether the button is disabled and cannot be clicked.",
+        },
+        hasShadow: {
+            control: "none",
+            description: "Tailwind CSS class to add a shadow to the button.",
+        },
+        customWidth: {
+            control: "none",
+            description: "Custom width for the button. Can be a Tailwind CSS class.",
+        },
+        customHeight: {
+            control: "none",
+            description: "Custom height for the button. Can be a Tailwind CSS class.",
+        },
+        additionalClasses: {
+            control: "none",
+            description: "Additional Tailwind CSS classes to apply to the button.",
+        },
+        icon: {
+            control: "none",
+            description: "An optional icon element to display inside the button.",
+        },
+        iconClasses: {
+            control: "none",
+            description: "Classes for styling the icon inside the button.",
+        },
+        as: {
+            control: "none",
+            description: "Defines the type of element to render, such as a 'button', 'a', or a React Router 'Link'.",
+        },
+        href: {
+            control: "none",
+            description: "If 'as' is 'a', this specifies the 'href' for an anchor element.",
+        },
+        to: {
+            control: "none",
+            description: "If 'as' is 'Link', this specifies the 'to' prop for React Router 'Link'.",
+        },
+    },
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: "The `FormButton` component is a versatile button component that supports different types of elements like `button`, `a`, and `Link` from React Router. It's highly customizable with Tailwind CSS classes."
+            },
+        },
+        layout: "centered",
+    },
+};
+const Template = (args) => _jsx(FormButton, { ...args });
+export const Default = Template.bind({});
+Default.args = {
+    text: "Default Button",
+    backgroundColor: "bg-blue-600",
+    fontFamily: "font-sans",
+    borderColor: "border-none",
+    shape: "rounded-md",
+    hoverBackground: "hover:bg-blue-700",
+    hoverFontColor: "hover:text-black",
+    onClick: () => alert("Button clicked!"),
+    additionalClasses: "p-2",
+};
+export const Compass = Template.bind({});
+Compass.args = {
+    text: _jsx(Text, { size: "", color: "", text: "Compass Button", fontFamily: "" }),
+    backgroundColor: "bg-green-400",
+    fontFamily: "font-sans",
+    shape: "rounded-md",
+    borderColor: "border-none",
+    hoverBackground: "hover:bg-green-700",
+    hoverFontColor: "hover:text-white",
+    hoverBorderColor: "hover:border-green-900",
+    hoverUnderline: false,
+    onClick: () => alert("Button clicked!"),
+    as: "a",
+    href: "#",
+    additionalClasses: "p-2",
+};
+export const Disabled = Template.bind({});
+Disabled.args = {
+    ...Default.args,
+    text: _jsx(Text, { size: "", color: "", text: "Disabled Button", fontFamily: "" }),
+    isDisabled: true,
+};
+export const WithIcon = Template.bind({});
+WithIcon.args = {
+    ...Default.args,
+    text: (_jsx(Text, { size: "", color: "", text: "Button with icon", fontFamily: "", additionalClasses: "pl-2" })),
+    icon: getFontAwesomeIcon("coffee"),
+    shape: "rounded-none",
+    hoverUnderline: false,
+    onClick: () => alert("Button clicked!"),
+    iconClasses: "pl-2",
+};
+export const IconOnly = Template.bind({});
+IconOnly.args = {
+    fontFamily: "font-sans",
+    shape: "rounded",
+    hoverBackground: "hover:bg-gray-100",
+    hoverUnderline: false,
+    icon: getFontAwesomeIcon("trash"),
+    additionalClasses: "flex justify-center items-center px-4 py-3 bg-gray-50",
+    onClick: () => alert("Icon button clicked!"),
+};
+export const ClearCartButton = Template.bind({});
+ClearCartButton.args = {
+    text: _jsx(Text, { size: "", color: "", text: "Clear Cart", fontFamily: "" }),
+    fontFamily: "font-sans",
+    shape: "rounded-md",
+    hoverBackground: "hover:bg-gray-100",
+    hoverFontColor: "hover:text-black",
+    hoverBorderColor: "hover:border-red-700",
+    hoverUnderline: false,
+    icon: getFontAwesomeIcon("trash"),
+    iconClasses: "order-first",
+    additionalClasses: "px-5 py-6 bg-gray-50 border-red-500 gap-2",
+    onClick: () => alert("Cart Cleared!"),
+};
+export const RightIconButton = Template.bind({});
+RightIconButton.args = {
+    text: _jsx(Text, { size: "", color: "text-white", text: "Next", fontFamily: "" }),
+    backgroundColor: "bg-gray-500",
+    shape: "rounded-md",
+    hoverBackground: "hover:bg-gray-700",
+    hoverFontColor: "hover:text-white",
+    hoverBorderColor: "hover:border-blue-700",
+    hoverUnderline: false,
+    icon: getFontAwesomeIcon("arrow-right"),
+    additionalClasses: "px-6 py-3 flex-row-reverse",
+    iconClasses: "ml-2",
+    onClick: () => alert("Next clicked!"),
+};
+export const ConfirmRequestButton = Template.bind({});
+ConfirmRequestButton.args = {
+    text: _jsx(Text, { size: "", color: "", text: "CONFIRM REQUEST", fontFamily: "" }),
+    backgroundColor: "bg-[#9ca3af]",
+    fontFamily: "font-sans",
+    borderColor: "border-none",
+    shape: "rounded-md",
+    hoverUnderline: false,
+    isDisabled: true,
+    additionalClasses: "py-3 px-6",
+};
+export const FourButtonsRow = Template.bind({});
+FourButtonsRow.args = {};
+FourButtonsRow.decorators = [
+    (Story) => (_jsxs("div", { className: "flex divide-x divide-gray-200 rounded-md overflow-hidden border border-gray-200", children: [_jsx(FormButton, { text: "All", backgroundColor: "bg-teal-600", fontFamily: "font-sans", borderColor: "border-gray-200", shape: "rounded-none", hoverUnderline: false, additionalClasses: "py-2 px-4 text-white", onClick: () => alert("All clicked!") }), _jsx(FormButton, { text: _jsxs(_Fragment, { children: [getFontAwesomeIcon("boxes", "mr-2"), "Bundles"] }), backgroundColor: "bg-white", fontFamily: "font-sans", borderColor: "border-gray-200", shape: "rounded-none", hoverBackground: "hover:bg-teal-600", hoverFontColor: "hover:text-white", hoverBorderColor: "hover:border-none", hoverUnderline: false, additionalClasses: "py-2 px-4", onClick: () => alert("Bundles clicked!") }), _jsx(FormButton, { text: _jsxs(_Fragment, { children: [getFontAwesomeIcon("clipboard", "mr-2"), "Categories"] }), backgroundColor: "bg-white", fontFamily: "font-sans", borderColor: "border-gray-200", shape: "rounded-none", hoverBackground: "hover:bg-teal-600", hoverFontColor: "hover:text-white", hoverBorderColor: "hover:border-none", hoverUnderline: false, additionalClasses: "py-2 px-4", onClick: () => alert("Categories clicked!") }), _jsx(FormButton, { text: _jsxs(_Fragment, { children: [getFontAwesomeIcon("plus", "mr-2"), "Custom Categories"] }), backgroundColor: "bg-white", fontFamily: "font-sans", borderColor: "border-gray-200", shape: "rounded-none", hoverBackground: "hover:bg-teal-600", hoverFontColor: "hover:text-white", hoverBorderColor: "hover:border-none", hoverUnderline: false, additionalClasses: "py-2 px-4", onClick: () => alert("Custom Categories clicked!") })] })),
+];

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

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

package/dist/components/FormButton/FormButton.test.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, expect, test, vi } from "vitest";
+import Button from "./FormButton";
+import { MemoryRouter } from "react-router-dom";
+describe("Button", () => {
+    test("renders correctly", () => {
+        render(_jsx(MemoryRouter, { children: _jsx(Button, { text: "Default Button", backgroundColor: "green", shape: "outline" }) }));
+        expect(screen.getByText("Default Button")).toBeInTheDocument();
+    });
+    test("is clickable", () => {
+        const mockOnClick = vi.fn();
+        render(_jsx(MemoryRouter, { children: _jsx(Button, { text: "Clickable Button", backgroundColor: "green", shape: "outline", onClick: mockOnClick }) }));
+        fireEvent.click(screen.getByText("Clickable Button"));
+        expect(mockOnClick).toHaveBeenCalled();
+    });
+    test("has correct text", () => {
+        render(_jsx(MemoryRouter, { children: _jsx(Button, { text: "Default Button", backgroundColor: "green", shape: "outline" }) }));
+        expect(screen.getByText("Default Button")).toHaveTextContent("Default Button");
+    });
+});
+describe("Disabled Button", () => {
+    test("is disabled", () => {
+        render(_jsx(MemoryRouter, { children: _jsx(Button, { text: "Disabled Button", backgroundColor: "green", shape: "outline", isDisabled: true }) }));
+        expect(screen.getByText("Disabled Button")).toHaveAttribute("aria-disabled", "true");
+    });
+});

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

@@ -0,0 +1,24 @@
+import React, { ElementType } from "react";
+export interface FormButtonProps {
+    onClick?: (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+    text?: string | JSX.Element;
+    fontFamily?: string;
+    backgroundColor?: string;
+    borderColor?: string;
+    customWidth?: string;
+    customHeight?: string;
+    shape?: string;
+    icon?: JSX.Element | null;
+    additionalClasses?: string;
+    type?: "button" | "submit" | "reset";
+    to?: string;
+    href?: string;
+    isDisabled?: boolean;
+    hasShadow?: string;
+    as?: ElementType | string;
+    hoverBackground?: string;
+    hoverFontColor?: string;
+    hoverUnderline?: boolean;
+    hoverBorderColor?: string;
+    iconClasses?: string;
+}

package/dist/components/FormButton/FormButton.types.js

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

package/dist/components/FormButton/index.js

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