@agilant/toga-blox 1.0.5 → 1.0.7

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

@@ -1,8 +1,8 @@
 import { Meta, StoryFn } from "@storybook/react";
-import FormButton from ".";
+import FormButton from "./FormButton";
 import type { ButtonTypes } from "./FormButton.types";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faCoffee } from "@fortawesome/free-solid-svg-icons";
+import { faBoxes, faClipboardList, faTags, faPlusSquare, faCoffee, faTrash, faArrowRight } from "@fortawesome/free-solid-svg-icons";
 import Text from "../Text/Text";
 
 export default {
@@ -15,84 +15,148 @@ export default {
 			},
 		},
 		text: {
-			control: "text",
-			description: "The main text displayed on the component",
+			control: "none",
+			description:
+				"The main text displayed on the button. Passed through the Text component. Text component controls styles of text",
 		},
 		textStyle: {
-			control: "select",
-			options: ["normal", "bold"],
-			description: "Whether the button text is bold or normal.",
+			control: "none",
+			options: ["font-normal", "font-bold"],
+			table: {
+				disable: true,
+			},
+			description:
+				"The font weight of the button text. *Storybook prop only.",
 		},
 		fontFamily: {
-			control: "select",
-			options: ["sans", "serif", "mono"],
-			description: "The font family of the button text.",
+			control: "none",
+			options: ["font-sans", "font-serif", "font-mono"],
+			table: {
+				disable: true,
+			},
+			description:
+				"The font family of the button text. *Storybook prop only.",
 		},
-		color: {
-			control: "select",
-			options: ["blue", "green", "grey", "clear"],
-			description: "The color for the button background.",
+		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: "select",
-			options: ["white", "black"],
-			description: "The text color on the button.",
+			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: "select",
-			options: ["xs", "sm", "md", "lg", "xl"],
-			description: "The size of the text and button.",
+			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.",
 		},
 		borderColor: {
-			control: "select",
-			options: ["blue", "green", "grey", "none"],
-			description: "The color of the border.",
+			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.",
 		},
 		shape: {
-			control: "select",
-			options: ["cornered", "semiRounded", "rounded", "underline"],
-			description: "The shape of the button",
-		},
-		buttonWide: {
-			control: "boolean",
-			description: "Whether the button is wide or not.",
+			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.",
 		},
 		hoverBackground: {
-			control: "select",
-			options: ["blue", "green", "grey", "none"],
-			description: "The background color on hover.",
+			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: "select",
-			options: ["blue", "green", "grey", "black", "none"],
-			description: "The border color on hover.",
+			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.",
 		},
 		hoverFontColor: {
-			control: "select",
-			options: ["blue", "green", "grey", "black"],
-			description: "The font color on hover.",
+			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.",
 		},
 		hoverUnderline: {
-			control: "boolean",
+			control: "none",
 			description: "Whether the text is underlined on hover.",
 		},
 		hoverBorder: {
-			control: "boolean",
-			description: "If there is a border on hover",
+			control: "none",
+			description: "Whether there is a border on hover.",
 		},
 		icon: {
 			table: {
 				disable: true,
 			},
 		},
+		color: {
+			table: {
+				disable: true,
+			},
+		},
 		as: {
 			table: {
 				disable: true,
 			},
 		},
+		buttonWide: {
+			table: {
+				disable: true,
+			},
+		},
 		iconOrder: {
-			control: "select",
+			control: "none",
 			options: ["first", "last"],
+			table: {
+				disable: true,
+			},
+			description:
+				"The order of the icon in the button. *Storybook prop only.",
 		},
 		type: {
 			table: {
@@ -120,12 +184,21 @@ export default {
 			},
 		},
 		isDisabled: {
-			control: "boolean",
-			description: "Toggle the buttons ability to be clicked.",
+			control: "none",
+			description:
+				"Whether the button is disabled and cannot be clicked.",
 		},
 		hasShadow: {
-			control: "boolean",
-			description: "Toggle the buttons shadow.",
+			control: "none",
+			description: "Whether the button has a shadow.",
+		},
+		customWidth: {
+			control: "none",
+			description: "The custom width of the button.",
+		},
+		customHeight: {
+			control: "none",
+			description: "The custom height of the button.",
 		},
 	},
 	tags: ["autodocs"],
@@ -139,14 +212,13 @@ const Template: StoryFn<ButtonTypes> = (args) => <FormButton {...args} />;
 export const Default = Template.bind({});
 Default.args = {
 	text: "Default Button",
-	color: "blue",
-	fontColor: "white",
-	size: "md",
-	borderColor: "none",
-	shape: "rounded",
-	hoverBackground: "blue",
-	hoverFontColor: "black",
-	hoverBorderColor: "blue",
+	backgroundColor: "bg-blue-600",
+	fontColor: "text-white",
+	borderColor: "border-none",
+	shape: "rounded-md",
+	hoverBackground: "bg-blue-700",
+	hoverFontColor: "text-black",
+	hoverBorderColor: "border-blue-700",
 	hoverUnderline: false,
 	onClick: () => alert("Button clicked!"),
 	additionalClasses: "p-2",
@@ -155,20 +227,19 @@ Default.args = {
 export const Compass = Template.bind({});
 Compass.args = {
 	text: <Text size={""} color={""} text={"Compass Button"} fontFamily={""} />,
-	color: "green",
-	fontColor: "white",
-	size: "xl",
-	shape: "semiRounded",
-	borderColor: "none",
-	hoverBackground: "green",
-	hoverFontColor: "green",
-	hoverBorderColor: "green",
+	backgroundColor: "bg-green-400",
+	fontColor: "text-black",
+	shape: "rounded-md",
+	borderColor: "border-none",
+	hoverBackground: "bg-green-700",
+	hoverFontColor: "text-white",
+	hoverBorderColor: "border-green-900",
 	hoverUnderline: false,
 	onClick: () => alert("Button clicked!"),
 	as: "a",
+	additionalClasses: "p-2",
 };
 
-// Story for a Disabled Button
 export const Disabled = Template.bind({});
 Disabled.args = {
 	...Default.args,
@@ -191,9 +262,153 @@ WithIcon.args = {
 		/>
 	),
 	icon: <FontAwesomeIcon icon={faCoffee} />,
-	shape: "cornered",
-	buttonWide: true,
+	shape: "rounded-none",
 	hoverUnderline: false,
 	onClick: () => alert("Button clicked!"),
-	// additionalClasses: "flex items-center justify-between p-2",
 };
+
+export const IconOnly = Template.bind({});
+IconOnly.args = {
+	fontColor: "text-red-600",
+	shape: "rounded",
+	hoverBackground: "bg-blue-700",
+	hoverFontColor: "text-white",
+	hoverBorderColor: "border-blue-700",
+	hoverUnderline: false,
+	icon: <FontAwesomeIcon icon={faTrash} />,
+	additionalClasses: "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",
+	shape: "rounded-md",
+	hoverBackground: "bg-blue-700",
+	hoverFontColor: "text-white",
+	hoverBorderColor: "border-red-700",
+	hoverUnderline: false,
+	icon: <FontAwesomeIcon icon={faTrash} />,
+	iconOrder: "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",
+	shape: "rounded-md",
+	hoverBackground: "bg-blue-700",
+	hoverFontColor: "text-white",
+	hoverBorderColor: "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!"),
+};
+
+export const ConfirmRequestButton = Template.bind({});
+ConfirmRequestButton.args = {
+	text: (
+		<Text size={""} color={""} text={"CONFIRM REQUEST"} fontFamily={""} />
+	),
+	backgroundColor: "bg-[#9ca3af]",
+	fontColor: "text-white",
+	size: "text-md",
+	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) => (
+		<div className="flex divide-x divide-gray-200 rounded-md overflow-hidden border border-gray-200">
+			<FormButton
+				text="All"
+				backgroundColor="bg-teal-600"
+				fontColor="text-white"
+				size="text-md"
+				borderColor="border-gray-200"
+				shape="rounded-none"
+				hoverBackground="bg-teal-600"
+				hoverFontColor="text-black"
+				hoverBorderColor="border-none"
+				hoverUnderline={false}
+				additionalClasses="py-2 px-4"
+				onClick={() => alert("All clicked!")}
+			/>
+
+			<FormButton
+				text={
+					<>
+						<FontAwesomeIcon icon={faBoxes} className="mr-2" />{" "}
+						Bundles
+					</>
+				}
+				backgroundColor="bg-white"
+				fontColor="text-teal-600"
+				size="text-md"
+				borderColor="border-gray-200"
+				shape="rounded-none"
+				hoverBackground="bg-teal-600"
+				hoverFontColor="text-black"
+				hoverBorderColor="border-none"
+				hoverUnderline={false}
+				additionalClasses="py-2 px-4"
+				onClick={() => alert("Bundles clicked!")}
+			/>
+			<FormButton
+				text={
+					<>
+						<FontAwesomeIcon
+							icon={faClipboardList}
+							className="mr-2"
+						/>{" "}
+						Categories
+					</>
+				}
+				backgroundColor="bg-white"
+				fontColor="text-teal-600"
+				size="text-md"
+				borderColor="border-gray-200"
+				shape="rounded-none"
+				hoverBackground="bg-teal-600"
+				hoverFontColor="text-black"
+				hoverBorderColor="border-none"
+				hoverUnderline={false}
+				additionalClasses="py-2 px-4"
+				onClick={() => alert("Categories clicked!")}
+			/>
+			<FormButton
+				text={
+					<>
+						<FontAwesomeIcon icon={faPlusSquare} className="mr-2" />{" "}
+						Custom Categories
+					</>
+				}
+				backgroundColor="bg-white"
+				fontColor="text-teal-600"
+				size="text-md"
+				borderColor="border-gray-200"
+				shape="rounded-none"
+				hoverBackground="bg-teal-600"
+				hoverFontColor="text-black"
+				hoverBorderColor="border-none"
+				hoverUnderline={false}
+				additionalClasses="py-2 px-4"
+				onClick={() => alert("Custom Categories clicked!")}
+			/>
+		</div>
+	),
+];

package/src/components/FormButton/FormButton.test.tsx

@@ -9,7 +9,7 @@ describe("Button", () => {
 			<MemoryRouter>
 				<Button
 					text="Default Button"
-					color="green"
+					backgroundColor="green"
 					size="md"
 					shape="outline"
 				/>
@@ -24,7 +24,7 @@ describe("Button", () => {
 			<MemoryRouter>
 				<Button
 					text="Clickable Button"
-					color="green"
+					backgroundColor="green"
 					size="md"
 					shape="outline"
 					onClick={mockOnClick}
@@ -40,7 +40,7 @@ describe("Button", () => {
 			<MemoryRouter>
 				<Button
 					text="Default Button"
-					color="green"
+					backgroundColor="green"
 					size="md"
 					shape="outline"
 				/>
@@ -58,7 +58,7 @@ describe("Disabled Button", () => {
 			<MemoryRouter>
 				<Button
 					text="Disabled Button"
-					color="green"
+					backgroundColor="green"
 					size="md"
 					shape="outline"
 					isDisabled

package/src/components/FormButton/FormButton.tsx

@@ -1,28 +1,19 @@
 import React, { ElementType } from "react";
 import { Link } from "react-router-dom";
-import type { ButtonTypes } from ".";
-import {
-	getHoverClassNames,
-	getColorClassNames,
-	getIconClasses,
-	getSizeClasses,
-	getTextClasses,
-	getButtonClasses,
-} from "./formButtonClassNames";
+import type { ButtonTypes } from "./FormButton.types";
 
-const Button: React.FC<ButtonTypes> = ({
+const FormButton: React.FC<ButtonTypes> = ({
 	onClick,
 	text,
-	textStyle = "regular",
-	fontFamily = "sans",
-	color,
-	fontColor,
-	size = "md",
+	textStyle = "font-normal",
+	fontFamily = "font-sans",
+	backgroundColor = "bg-blue-600",
+	fontColor = "text-white",
+	size = "text-md",
 	customWidth,
 	customHeight,
-	shape = "cornered",
-	buttonWide = false,
-	borderColor,
+	shape = "rounded-md",
+	borderColor = "border-transparent",
 	icon,
 	iconOrder = "first",
 	additionalClasses = "",
@@ -31,48 +22,40 @@ const Button: React.FC<ButtonTypes> = ({
 	href,
 	tooltip,
 	isDisabled = false,
-	hasShadow = false,
-	as: Element = "a",
-	hoverBackground,
-	hoverFontColor,
-	hoverUnderline,
-	hoverBorderColor,
+	hasShadow,
+	as: Element = "button",
+	hoverBackground = "",
+	hoverFontColor = "",
+	hoverUnderline = false,
+	hoverBorderColor = "",
 	...props
 }) => {
-	let hoverClasses = getHoverClassNames(
-		hoverBackground,
-		hoverFontColor,
-		hoverUnderline,
-		hoverBorderColor,
-		isDisabled
-	);
-	let buttonColorClasses = getColorClassNames(color, fontColor, borderColor);
-	let buttonSizeClasses = getSizeClasses(buttonWide, size);
-	let textStyleClasses = getTextClasses(textStyle, fontFamily);
-
-	const shapeClassesMap: { [key: string]: string } = {
-		cornered: "rounded-none",
-		semiRounded: "rounded-md",
-		rounded: "rounded-full",
-		underline: "rounded-none border-b-6 border-b-black",
-		none: "border-none rounded-none",
-	};
-
-	let iconClasses = getIconClasses(iconOrder);
+	const baseFormButtonClasses = "flex items-center justify-center";
+	const hoverClasses = !isDisabled
+		? `hover:${hoverBackground} hover:${hoverFontColor} ${hoverUnderline ? "hover:underline hover:underline-offset-4" : ""
+		} hover:${hoverBorderColor}`
+		: "";
+	const buttonColorClasses = `${backgroundColor} ${fontColor} ${borderColor}`;
+	const cursorClasses = isDisabled
+		? "cursor-not-allowed opacity-50"
+		: "cursor-pointer";
+	const textStyleClasses = `${textStyle} ${fontFamily}`;
+	const buttonShapeClasses = shape;
+	const iconClasses =
+		iconOrder === "first" ? "order-first" : "order-last pl-2";
 
-	const buttonShapeClasses = shapeClassesMap[shape];
-
-	let buttonClasses = getButtonClasses({
-		buttonColorClasses,
-		buttonSizeClasses,
-		buttonShapeClasses,
-		textStyleClasses,
-		hoverClasses,
-		hasShadow,
-		customWidth,
-		customHeight,
-		additionalClasses,
-	});
+	const buttonClasses = `
+		${baseFormButtonClasses}
+		${buttonColorClasses}
+		${buttonShapeClasses}
+		${textStyleClasses}
+		${hoverClasses}
+		${cursorClasses}
+		${hasShadow ? hasShadow : ""}
+		${customWidth}
+		${customHeight}
+		${additionalClasses}
+	`.trim();
 
 	const handleClick = (
 		e: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>
@@ -83,34 +66,29 @@ const Button: React.FC<ButtonTypes> = ({
 		}
 		onClick?.(e);
 	};
-	// Base props common to all elements
+
 	const baseProps = {
-		className: buttonClasses.trim(),
+		className: buttonClasses,
 		onClick: handleClick,
 		type: type,
 		"aria-disabled": isDisabled ? "true" : "false",
 		"data-tooltip": tooltip,
 	};
-	// Extend baseProps based on Element type
+
 	if (Element === "a") {
 		props = { ...baseProps, href: href };
 	} else if (Element === "link") {
 		props = { ...baseProps, to: to };
 	} else if (Element === "button") {
-		// For 'button', the baseProps already contain all necessary properties
 		props = { ...baseProps };
 	}
 
 	return (
 		<Element {...props}>
-			{icon && (
-				<span className={`${iconClasses} ${additionalClasses}`}>
-					{icon}
-				</span>
-			)}
+			{icon && <span className={iconClasses}>{icon}</span>}
 			{text}
 		</Element>
 	);
 };
 
-export default Button;
+export default FormButton;

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

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