@agilant/toga-blox 1.0.8 → 1.0.9

package/src/components/FormButton/FormButton.stories.tsx

@@ -1,9 +1,8 @@
 import { Meta, StoryFn } from "@storybook/react";
 import FormButton from "./FormButton";
-import type { ButtonTypes } from "./FormButton.types";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faBoxes, faClipboardList, faTags, faPlusSquare, faCoffee, faTrash, faArrowRight } from "@fortawesome/free-solid-svg-icons";
+import type { FormButtonProps } from "./FormButton.types";
 import Text from "../Text/Text";
+import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
 
 export default {
 	title: "Components/FormButton",
@@ -13,239 +12,132 @@ export default {
 			table: {
 				disable: true,
 			},
-		},
-		text: {
 			control: "none",
-			description:
-				"The main text displayed on the button. Passed through the Text component. Text component controls styles of text",
 		},
-		textStyle: {
+		text: {
 			control: "none",
-			options: ["font-normal", "font-bold"],
-			table: {
-				disable: true,
-			},
-			description:
-				"The font weight of the button text. *Storybook prop only.",
+			description: "The main text displayed on the button.",
 		},
 		fontFamily: {
 			control: "none",
-			options: ["font-sans", "font-serif", "font-mono"],
-			table: {
-				disable: true,
-			},
-			description:
-				"The font family of the button text. *Storybook prop only.",
+			description: "The font family of the button text.",
 		},
 		backgroundColor: {
 			control: "none",
-			options: [
-				"bg-blue-600",
-				"bg-green-600",
-				"bg-gray-600",
-				"bg-transparent",
-			],
-			description:
-				"The background color of the button. Use Tailwind CSS color classes.",
-		},
-		fontColor: {
-			control: "none",
-			options: ["text-white", "text-black"],
-			table: {
-				disable: true,
-			},
-			description:
-				"The text color of the button. Use Tailwind CSS color classes. *Storybook prop only.",
-		},
-		size: {
-			control: "none",
-			options: ["text-xs", "text-sm", "text-md", "text-lg", "text-xl"],
-			table: {
-				disable: true,
-			},
-			description:
-				"The size of the text on the button. Use Tailwind CSS text size classes. *Storybook prop only.",
+			description: "The background color of the button. Use Tailwind CSS color classes.",
 		},
 		borderColor: {
 			control: "none",
-			options: [
-				"border-blue-600",
-				"border-green-600",
-				"border-gray-600",
-				"border-none",
-			],
-			description:
-				"The color of the border of the button. Use Tailwind CSS border color classes.",
+			description: "The color of the border of the button. Use Tailwind CSS border color classes.",
 		},
 		shape: {
 			control: "none",
-			options: [
-				"rounded-none",
-				"rounded-md",
-				"rounded-full",
-				"border-b-6 border-b-black",
-			],
-			description:
-				"The shape of the button. Use Tailwind CSS border radius classes.",
+			description: "The shape of the button. Use Tailwind CSS border radius classes.",
 		},
 		hoverBackground: {
 			control: "none",
-			options: [
-				"hover:bg-blue-700",
-				"hover:bg-green-700",
-				"hover:bg-gray-700",
-				"hover:bg-transparent",
-			],
-			description:
-				"The background color of the button on hover. Use Tailwind CSS color classes.",
-		},
-		hoverBorderColor: {
-			control: "none",
-			options: [
-				"hover:border-blue-700",
-				"hover:border-green-700",
-				"hover:border-gray-700",
-				"hover:border-transparent",
-			],
-			description:
-				"The border color of the button on hover. Use Tailwind CSS border color classes.",
+			description: "The background color of the button on hover. Use Tailwind CSS color classes.",
 		},
 		hoverFontColor: {
 			control: "none",
-			options: [
-				"hover:text-blue-700",
-				"hover:text-green-700",
-				"hover:text-gray-700",
-				"hover:text-black",
-			],
-			description:
-				"The text color of the button on hover. Use Tailwind CSS color classes.",
+			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.",
 		},
-		hoverBorder: {
+		hoverBorderColor: {
 			control: "none",
-			description: "Whether there is a border on hover.",
+			description: "The border color of the button on hover. Use Tailwind CSS border color classes.",
 		},
-		icon: {
-			table: {
-				disable: true,
-			},
-		},
-		color: {
-			table: {
-				disable: true,
-			},
-		},
-		as: {
-			table: {
-				disable: true,
-			},
-		},
-		buttonWide: {
-			table: {
-				disable: true,
-			},
-		},
-		iconOrder: {
+		isDisabled: {
 			control: "none",
-			options: ["first", "last"],
-			table: {
-				disable: true,
-			},
-			description:
-				"The order of the icon in the button. *Storybook prop only.",
-		},
-		type: {
-			table: {
-				disable: true,
-			},
+			description: "Whether the button is disabled and cannot be clicked.",
 		},
-		to: {
-			table: {
-				disable: true,
-			},
+		hasShadow: {
+			control: "none",
+			description: "Tailwind CSS class to add a shadow to the button.",
 		},
-		href: {
-			table: {
-				disable: true,
-			},
+		customWidth: {
+			control: "none",
+			description: "Custom width for the button. Can be a Tailwind CSS class.",
 		},
-		tooltip: {
-			table: {
-				disable: true,
-			},
+		customHeight: {
+			control: "none",
+			description: "Custom height for the button. Can be a Tailwind CSS class.",
 		},
 		additionalClasses: {
-			table: {
-				disable: true,
-			},
+			control: "none",
+			description: "Additional Tailwind CSS classes to apply to the button.",
 		},
-		isDisabled: {
+		icon: {
 			control: "none",
-			description:
-				"Whether the button is disabled and cannot be clicked.",
+			description: "An optional icon element to display inside the button.",
 		},
-		hasShadow: {
+		iconClasses: {
 			control: "none",
-			description: "Whether the button has a shadow.",
+			description: "Classes for styling the icon inside the button.",
 		},
-		customWidth: {
+		as: {
 			control: "none",
-			description: "The custom width of the button.",
+			description: "Defines the type of element to render, such as a 'button', 'a', or a React Router 'Link'.",
 		},
-		customHeight: {
+		href: {
+			control: "none",
+			description: "If 'as' is 'a', this specifies the 'href' for an anchor element.",
+		},
+		to: {
 			control: "none",
-			description: "The custom height of the button.",
+			description: "If 'as' is 'Link', this specifies the 'to' prop for React Router 'Link'.",
 		},
 	},
-	tags: ["autodocs"],
+	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",
 	},
 } as Meta;
 
-const Template: StoryFn<ButtonTypes> = (args) => <FormButton {...args} />;
+const Template: StoryFn<FormButtonProps> = (args) => <FormButton {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
 	text: "Default Button",
 	backgroundColor: "bg-blue-600",
-	fontColor: "text-white",
+	fontFamily: "font-sans",
 	borderColor: "border-none",
 	shape: "rounded-md",
-	hoverBackground: "bg-blue-700",
-	hoverFontColor: "text-black",
-	hoverBorderColor: "border-blue-700",
-	hoverUnderline: false,
+	hoverBackground: "hover:bg-blue-700",
+	hoverFontColor: "hover:text-black",
 	onClick: () => alert("Button clicked!"),
 	additionalClasses: "p-2",
 };
 
 export const Compass = Template.bind({});
 Compass.args = {
-	text: <Text size={""} color={""} text={"Compass Button"} fontFamily={""} />,
+	text: <Text size="" color="" text="Compass Button" fontFamily="" />,
 	backgroundColor: "bg-green-400",
-	fontColor: "text-black",
+	fontFamily: "font-sans",
 	shape: "rounded-md",
 	borderColor: "border-none",
-	hoverBackground: "bg-green-700",
-	hoverFontColor: "text-white",
-	hoverBorderColor: "border-green-900",
+	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: (
-		<Text size={""} color={""} text={"Disabled Button"} fontFamily={""} />
-	),
+	text: <Text size="" color="" text="Disabled Button" fontFamily="" />,
 	isDisabled: true,
 };
 
@@ -254,74 +146,67 @@ WithIcon.args = {
 	...Default.args,
 	text: (
 		<Text
-			size={""}
-			color={""}
-			text={"Button with icon"}
-			fontFamily={""}
+			size=""
+			color=""
+			text="Button with icon"
+			fontFamily=""
 			additionalClasses="pl-2"
 		/>
 	),
-	icon: <FontAwesomeIcon icon={faCoffee} />,
+	icon: getFontAwesomeIcon("coffee"),
 	shape: "rounded-none",
 	hoverUnderline: false,
 	onClick: () => alert("Button clicked!"),
+	iconClasses: "pl-2",
 };
 
 export const IconOnly = Template.bind({});
 IconOnly.args = {
-	fontColor: "text-red-600",
+	fontFamily: "font-sans",
 	shape: "rounded",
-	hoverBackground: "bg-blue-700",
-	hoverFontColor: "text-white",
-	hoverBorderColor: "border-blue-700",
+	hoverBackground: "hover:bg-gray-100",
 	hoverUnderline: false,
-	icon: <FontAwesomeIcon icon={faTrash} />,
-	additionalClasses: "px-4 py-3 bg-gray-50",
+	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: <Text size={""} color={""} text={"Clear Cart"} fontFamily={""} />,
-	fontColor: "text-red-600",
-	size: "text-md",
+	text: <Text size="" color="" text="Clear Cart" fontFamily="" />,
+	fontFamily: "font-sans",
 	shape: "rounded-md",
-	hoverBackground: "bg-blue-700",
-	hoverFontColor: "text-white",
-	hoverBorderColor: "border-red-700",
+	hoverBackground: "hover:bg-gray-100",
+	hoverFontColor: "hover:text-black",
+	hoverBorderColor: "hover:border-red-700",
 	hoverUnderline: false,
-	icon: <FontAwesomeIcon icon={faTrash} />,
-	iconOrder: "first",
-	additionalClasses:
-		"px-5 py-6 bg-gray-50 border-red-500 gap-2",
+	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: (
-		<Text size={""} color={"text-blue-600"} text={"Next"} fontFamily={""} />
-	),
-	backgroundColor: "bg-gray-700",
+	text: <Text size="" color="text-white" text="Next" fontFamily="" />,
+	backgroundColor: "bg-gray-500",
 	shape: "rounded-md",
-	hoverBackground: "bg-blue-700",
-	hoverFontColor: "text-white",
-	hoverBorderColor: "border-blue-700",
+	hoverBackground: "hover:bg-gray-700",
+	hoverFontColor: "hover:text-white",
+	hoverBorderColor: "hover:border-blue-700",
 	hoverUnderline: false,
-	icon: <FontAwesomeIcon icon={faArrowRight} />,
-	additionalClasses:
-		"px-6 py-3 bg-gray-50 border-red-500 gap-2 flex-row-reverse",
-	onClick: () => alert("Cart Cleared!"),
+	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: (
-		<Text size={""} color={""} text={"CONFIRM REQUEST"} fontFamily={""} />
-	),
+	text: <Text size="" color="" text="CONFIRM REQUEST" fontFamily="" />,
 	backgroundColor: "bg-[#9ca3af]",
-	fontColor: "text-white",
-	size: "text-md",
+	fontFamily: "font-sans",
 	borderColor: "border-none",
 	shape: "rounded-md",
 	hoverUnderline: false,
@@ -337,33 +222,28 @@ FourButtonsRow.decorators = [
 			<FormButton
 				text="All"
 				backgroundColor="bg-teal-600"
-				fontColor="text-white"
-				size="text-md"
+				fontFamily="font-sans"
 				borderColor="border-gray-200"
 				shape="rounded-none"
-				hoverBackground="bg-teal-600"
-				hoverFontColor="text-black"
-				hoverBorderColor="border-none"
 				hoverUnderline={false}
-				additionalClasses="py-2 px-4"
+				additionalClasses="py-2 px-4 text-white"
 				onClick={() => alert("All clicked!")}
 			/>
 
 			<FormButton
 				text={
 					<>
-						<FontAwesomeIcon icon={faBoxes} className="mr-2" />{" "}
+						{getFontAwesomeIcon("boxes", "mr-2")}
 						Bundles
 					</>
 				}
 				backgroundColor="bg-white"
-				fontColor="text-teal-600"
-				size="text-md"
+				fontFamily="font-sans"
 				borderColor="border-gray-200"
 				shape="rounded-none"
-				hoverBackground="bg-teal-600"
-				hoverFontColor="text-black"
-				hoverBorderColor="border-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!")}
@@ -371,21 +251,17 @@ FourButtonsRow.decorators = [
 			<FormButton
 				text={
 					<>
-						<FontAwesomeIcon
-							icon={faClipboardList}
-							className="mr-2"
-						/>{" "}
+						{getFontAwesomeIcon("clipboard", "mr-2")}
 						Categories
 					</>
 				}
 				backgroundColor="bg-white"
-				fontColor="text-teal-600"
-				size="text-md"
+				fontFamily="font-sans"
 				borderColor="border-gray-200"
 				shape="rounded-none"
-				hoverBackground="bg-teal-600"
-				hoverFontColor="text-black"
-				hoverBorderColor="border-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!")}
@@ -393,18 +269,17 @@ FourButtonsRow.decorators = [
 			<FormButton
 				text={
 					<>
-						<FontAwesomeIcon icon={faPlusSquare} className="mr-2" />{" "}
+						{getFontAwesomeIcon("plus", "mr-2")}
 						Custom Categories
 					</>
 				}
 				backgroundColor="bg-white"
-				fontColor="text-teal-600"
-				size="text-md"
+				fontFamily="font-sans"
 				borderColor="border-gray-200"
 				shape="rounded-none"
-				hoverBackground="bg-teal-600"
-				hoverFontColor="text-black"
-				hoverBorderColor="border-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/src/components/FormButton/FormButton.test.tsx

@@ -1,5 +1,5 @@
 import { render, screen, fireEvent } from "@testing-library/react";
-import { describe, expect, beforeEach, test, vi } from "vitest";
+import { describe, expect, test, vi } from "vitest";
 import Button from "./FormButton";
 import { MemoryRouter } from "react-router-dom";
 

package/src/components/FormButton/FormButton.tsx

@@ -1,61 +1,53 @@
-import React, { ElementType } from "react";
-import { Link } from "react-router-dom";
-import type { ButtonTypes } from "./FormButton.types";
+import React from "react";
+import type { FormButtonProps } from "./FormButton.types";
 
-const FormButton: React.FC<ButtonTypes> = ({
+const FormButton: React.FC<FormButtonProps> = ({
 	onClick,
 	text,
-	textStyle = "font-normal",
-	fontFamily = "font-sans",
-	backgroundColor = "bg-blue-600",
-	fontColor = "text-white",
-	size = "text-md",
+	fontFamily,
+	backgroundColor,
 	customWidth,
 	customHeight,
-	shape = "rounded-md",
-	borderColor = "border-transparent",
+	shape,
+	borderColor,
 	icon,
-	iconOrder = "first",
-	additionalClasses = "",
+	additionalClasses,
 	type = "button",
 	to,
 	href,
-	tooltip,
 	isDisabled = false,
 	hasShadow,
 	as: Element = "button",
-	hoverBackground = "",
-	hoverFontColor = "",
+	hoverBackground,
+	hoverFontColor,
 	hoverUnderline = false,
-	hoverBorderColor = "",
+	hoverBorderColor,
+	iconClasses,
 	...props
 }) => {
 	const baseFormButtonClasses = "flex items-center justify-center";
 	const hoverClasses = !isDisabled
-		? `hover:${hoverBackground} hover:${hoverFontColor} ${hoverUnderline ? "hover:underline hover:underline-offset-4" : ""
-		} hover:${hoverBorderColor}`
+		? `${hoverBackground} ${hoverFontColor} ${hoverUnderline ? "underline underline-offset-4" : ""} ${hoverBorderColor}`
 		: "";
-	const buttonColorClasses = `${backgroundColor} ${fontColor} ${borderColor}`;
+	const buttonColorClasses = `${backgroundColor} ${borderColor}`;
 	const cursorClasses = isDisabled
 		? "cursor-not-allowed opacity-50"
 		: "cursor-pointer";
-	const textStyleClasses = `${textStyle} ${fontFamily}`;
+	const textStyleClasses = `${fontFamily}`;
 	const buttonShapeClasses = shape;
-	const iconClasses =
-		iconOrder === "first" ? "order-first" : "order-last pl-2";
 
 	const buttonClasses = `
-		${baseFormButtonClasses}
-		${buttonColorClasses}
-		${buttonShapeClasses}
-		${textStyleClasses}
-		${hoverClasses}
-		${cursorClasses}
-		${hasShadow ? hasShadow : ""}
-		${customWidth}
-		${customHeight}
-		${additionalClasses}
-	`.trim();
+    ${baseFormButtonClasses}
+    ${buttonColorClasses}
+    ${buttonShapeClasses}
+    ${textStyleClasses}
+    ${hoverClasses}
+    ${cursorClasses}
+    ${hasShadow ? "shadow-md" : ""}
+    ${customWidth}
+    ${customHeight}
+    ${additionalClasses}
+  `.trim();
 
 	const handleClick = (
 		e: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>
@@ -70,21 +62,21 @@ const FormButton: React.FC<ButtonTypes> = ({
 	const baseProps = {
 		className: buttonClasses,
 		onClick: handleClick,
-		type: type,
 		"aria-disabled": isDisabled ? "true" : "false",
-		"data-tooltip": tooltip,
 	};
 
-	if (Element === "a") {
-		props = { ...baseProps, href: href };
-	} else if (Element === "link") {
-		props = { ...baseProps, to: to };
+	let ElementProps: React.ComponentProps<any> = { ...baseProps };
+
+	if (Element === "a" && href) {
+		ElementProps = { ...baseProps, href };
 	} else if (Element === "button") {
-		props = { ...baseProps };
+		ElementProps = { ...baseProps, type };
+	} else {
+		ElementProps = { ...baseProps };
 	}
 
 	return (
-		<Element {...props}>
+		<Element {...ElementProps} {...props}>
 			{icon && <span className={iconClasses}>{icon}</span>}
 			{text}
 		</Element>

package/src/components/FormButton/FormButton.types.ts

@@ -1,33 +1,27 @@
 import React, { ElementType } from "react";
 
-export interface ButtonTypes {
+export interface FormButtonProps {
 	onClick?: (
 		e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>
 	) => void;
 	text?: string | JSX.Element;
+	fontFamily?: string;
 	backgroundColor?: string;
 	borderColor?: string;
-	fontFamily?: "sans" | "mono" | "serif" | string;
 	customWidth?: string;
 	customHeight?: string;
-	shape?: "cornered" | "semiRounded" | "rounded" | "underline" | string;
+	shape?: string;
 	icon?: JSX.Element | null;
-	type?: "submit" | "reset" | "button";
+	additionalClasses?: string;
+	type?: "button" | "submit" | "reset";
 	to?: string;
 	href?: string;
-	tooltip?: string;
-	additionalClasses?: string;
 	isDisabled?: boolean;
 	hasShadow?: string;
-	as?: ElementType;
+	as?: ElementType | string;
 	hoverBackground?: string;
 	hoverFontColor?: string;
 	hoverUnderline?: boolean;
 	hoverBorderColor?: string;
-
-	// STORYBOOK PROPS
-	size?: "xs" | "sm" | "md" | "lg" | "xl" | string;
-	textStyle?: "thin" | "light" | "normal" | "semibold" | "bold";
-	iconOrder?: "first" | "last";
-	fontColor?: string;
+	iconClasses?: string;
 }