@agilant/toga-blox 1.0.5

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

@@ -0,0 +1,199 @@
+import { Meta, StoryFn } from "@storybook/react";
+import FormButton from ".";
+import type { ButtonTypes } from "./FormButton.types";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCoffee } from "@fortawesome/free-solid-svg-icons";
+import Text from "../Text/Text";
+
+export default {
+	title: "Components/FormButton",
+	component: FormButton,
+	argTypes: {
+		onClick: {
+			table: {
+				disable: true,
+			},
+		},
+		text: {
+			control: "text",
+			description: "The main text displayed on the component",
+		},
+		textStyle: {
+			control: "select",
+			options: ["normal", "bold"],
+			description: "Whether the button text is bold or normal.",
+		},
+		fontFamily: {
+			control: "select",
+			options: ["sans", "serif", "mono"],
+			description: "The font family of the button text.",
+		},
+		color: {
+			control: "select",
+			options: ["blue", "green", "grey", "clear"],
+			description: "The color for the button background.",
+		},
+		fontColor: {
+			control: "select",
+			options: ["white", "black"],
+			description: "The text color on the button.",
+		},
+		size: {
+			control: "select",
+			options: ["xs", "sm", "md", "lg", "xl"],
+			description: "The size of the text and button.",
+		},
+		borderColor: {
+			control: "select",
+			options: ["blue", "green", "grey", "none"],
+			description: "The color of the border.",
+		},
+		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.",
+		},
+		hoverBackground: {
+			control: "select",
+			options: ["blue", "green", "grey", "none"],
+			description: "The background color on hover.",
+		},
+		hoverBorderColor: {
+			control: "select",
+			options: ["blue", "green", "grey", "black", "none"],
+			description: "The border color on hover.",
+		},
+		hoverFontColor: {
+			control: "select",
+			options: ["blue", "green", "grey", "black"],
+			description: "The font color on hover.",
+		},
+		hoverUnderline: {
+			control: "boolean",
+			description: "Whether the text is underlined on hover.",
+		},
+		hoverBorder: {
+			control: "boolean",
+			description: "If there is a border on hover",
+		},
+		icon: {
+			table: {
+				disable: true,
+			},
+		},
+		as: {
+			table: {
+				disable: true,
+			},
+		},
+		iconOrder: {
+			control: "select",
+			options: ["first", "last"],
+		},
+		type: {
+			table: {
+				disable: true,
+			},
+		},
+		to: {
+			table: {
+				disable: true,
+			},
+		},
+		href: {
+			table: {
+				disable: true,
+			},
+		},
+		tooltip: {
+			table: {
+				disable: true,
+			},
+		},
+		additionalClasses: {
+			table: {
+				disable: true,
+			},
+		},
+		isDisabled: {
+			control: "boolean",
+			description: "Toggle the buttons ability to be clicked.",
+		},
+		hasShadow: {
+			control: "boolean",
+			description: "Toggle the buttons shadow.",
+		},
+	},
+	tags: ["autodocs"],
+	parameters: {
+		layout: "centered",
+	},
+} as Meta;
+
+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",
+	hoverUnderline: false,
+	onClick: () => alert("Button clicked!"),
+	additionalClasses: "p-2",
+};
+
+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",
+	hoverUnderline: false,
+	onClick: () => alert("Button clicked!"),
+	as: "a",
+};
+
+// Story for a Disabled Button
+export const Disabled = Template.bind({});
+Disabled.args = {
+	...Default.args,
+	text: (
+		<Text size={""} color={""} text={"Disabled Button"} fontFamily={""} />
+	),
+	isDisabled: true,
+};
+
+export const WithIcon = Template.bind({});
+WithIcon.args = {
+	...Default.args,
+	text: (
+		<Text
+			size={""}
+			color={""}
+			text={"Button with icon"}
+			fontFamily={""}
+			additionalClasses="pl-2"
+		/>
+	),
+	icon: <FontAwesomeIcon icon={faCoffee} />,
+	shape: "cornered",
+	buttonWide: true,
+	hoverUnderline: false,
+	onClick: () => alert("Button clicked!"),
+	// additionalClasses: "flex items-center justify-between p-2",
+};

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

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

package/src/components/FormButton/FormButton.tsx

@@ -0,0 +1,116 @@
+import React, { ElementType } from "react";
+import { Link } from "react-router-dom";
+import type { ButtonTypes } from ".";
+import {
+	getHoverClassNames,
+	getColorClassNames,
+	getIconClasses,
+	getSizeClasses,
+	getTextClasses,
+	getButtonClasses,
+} from "./formButtonClassNames";
+
+const Button: React.FC<ButtonTypes> = ({
+	onClick,
+	text,
+	textStyle = "regular",
+	fontFamily = "sans",
+	color,
+	fontColor,
+	size = "md",
+	customWidth,
+	customHeight,
+	shape = "cornered",
+	buttonWide = false,
+	borderColor,
+	icon,
+	iconOrder = "first",
+	additionalClasses = "",
+	type = "button",
+	to,
+	href,
+	tooltip,
+	isDisabled = false,
+	hasShadow = false,
+	as: Element = "a",
+	hoverBackground,
+	hoverFontColor,
+	hoverUnderline,
+	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 buttonShapeClasses = shapeClassesMap[shape];
+
+	let buttonClasses = getButtonClasses({
+		buttonColorClasses,
+		buttonSizeClasses,
+		buttonShapeClasses,
+		textStyleClasses,
+		hoverClasses,
+		hasShadow,
+		customWidth,
+		customHeight,
+		additionalClasses,
+	});
+
+	const handleClick = (
+		e: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>
+	) => {
+		if (isDisabled) {
+			e.preventDefault();
+			return;
+		}
+		onClick?.(e);
+	};
+	// Base props common to all elements
+	const baseProps = {
+		className: buttonClasses.trim(),
+		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>
+			)}
+			{text}
+		</Element>
+	);
+};
+
+export default Button;

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

@@ -0,0 +1,32 @@
+import React, { ElementType } from "react";
+
+export interface ButtonTypes {
+	onClick?: (
+		e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>
+	) => void;
+	text?: string | JSX.Element;
+	color?: string;
+	fontColor?: 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;
+	as?: ElementType;
+	hoverBackground?: string;
+	hoverFontColor?: string;
+	hoverUnderline?: boolean;
+	hoverBorderColor?: string;
+	buttonWide?: boolean;
+}

package/src/components/FormButton/formButtonClassNames.tsx

@@ -0,0 +1,153 @@
+import classNames from "classNames";
+
+export const getHoverClassNames = (
+	hoverBackground: string | undefined,
+	hoverFontColor: string | undefined,
+	hoverUnderline: boolean | undefined,
+	hoverBorderColor: string | undefined,
+	isDisabled: boolean | undefined
+) => {
+	return classNames(
+		{
+			"hover:bg-blue-200": hoverBackground === "blue" && !isDisabled,
+			"hover:bg-teal-100": hoverBackground === "green" && !isDisabled,
+			"hover:bg-gray-200": hoverBackground === "grey" && !isDisabled,
+			"hover:bg-slate-950": hoverBackground === "black" && !isDisabled,
+			"hover:bg-transparent text-black": hoverBackground === "none" && !isDisabled,
+		},
+		{
+			"hover:text-blue-800": hoverFontColor === "blue" && !isDisabled,
+			"hover:text-teal-800": hoverFontColor === "green" && !isDisabled,
+			"hover:text-gray-800": hoverFontColor === "grey" && !isDisabled,
+			"hover:text-slate-50": hoverFontColor === "white" && !isDisabled,
+			"hover:text-black": hoverFontColor === "black" && !isDisabled,
+		},
+		{
+			"hover:border-blue-800": hoverBorderColor === "blue" && !isDisabled,
+			"hover:border-teal-800":
+				hoverBorderColor === "green" && !isDisabled,
+			"hover:border-gray-800": hoverBorderColor === "grey" && !isDisabled,
+			"hover:border-black": hoverBorderColor === "black" && !isDisabled,
+			"hover:border-transparent":
+				hoverBackground === "none" && !isDisabled,
+		},
+		{
+			"hover:underline hover:underline-offset-4":
+				hoverUnderline === true && !isDisabled,
+			"": hoverUnderline === false || isDisabled,
+		},
+		{
+			"opacity-50 cursor-not-allowed": isDisabled === true,
+			"cursor-pointer": isDisabled === false,
+		}
+	);
+};
+
+export const getColorClassNames = (
+	color: string | undefined,
+	fontColor: string | undefined,
+	borderColor: string | undefined
+) => {
+	return classNames(
+		{
+			"bg-blue-600": color === "blue",
+			"bg-teal-700": color === "green",
+			"bg-gray-600": color === "grey",
+			"bg-transparent border-black": color === "clear",
+		},
+		{
+			"border-blue-600": borderColor === "blue",
+			"border-teal-700": borderColor === "green",
+			"border-gray-600": borderColor === "grey",
+			"border-transparent": borderColor === "none",
+		},
+		{
+			"text-white": fontColor === "white" && color !== "clear",
+			"text-black": fontColor === "black",
+		},
+		{}
+	);
+};
+
+export const getIconClasses = (iconOrder: string | undefined) => {
+	return classNames({
+		"flex items-center order-first": iconOrder === "first",
+		"flex items-center order-last pl-2": iconOrder === "last",
+	});
+};
+
+export const getSizeClasses = (
+	buttonWide: boolean | undefined,
+	size: string | undefined
+) => {
+	return classNames(
+		{
+			"btn-wide": buttonWide === true,
+			"": buttonWide === false,
+		},
+		{
+			"text-xs": size === "xs",
+			"text-sm": size === "sm",
+			"text-md": size === "md",
+			"text-lg": size === "lg",
+			"text-xl": size === "xl",
+			[`text-${size}`]: size !== undefined,
+		}
+	);
+};
+
+export const getTextClasses = (
+	textStyle: string | undefined,
+	fontFamily: string | undefined
+) => {
+	return classNames(
+		{
+			"font-normal": textStyle === "normal",
+			"font-bold": textStyle === "bold",
+		},
+		{
+			"font-sans": fontFamily === "sans",
+			"font-serif": fontFamily === "serif",
+			"font-mono": fontFamily === "mono",
+		}
+	);
+};
+
+interface ButtonClassProps {
+	buttonColorClasses: string;
+	buttonSizeClasses: string;
+	buttonShapeClasses: string;
+	textStyleClasses: string;
+	hoverClasses: string;
+	hasShadow: boolean;
+	customWidth?: string;
+	customHeight?: string;
+	additionalClasses?: string;
+}
+
+export const getButtonClasses = ({
+	buttonColorClasses,
+	buttonSizeClasses,
+	buttonShapeClasses,
+	textStyleClasses,
+	hoverClasses,
+	hasShadow,
+	customWidth,
+	customHeight,
+	additionalClasses,
+}: ButtonClassProps) => {
+	return classNames(
+		"border-2 p-1 rounded-full flex justify-center max-sm:text-xs",
+		buttonColorClasses,
+		buttonSizeClasses,
+		buttonShapeClasses,
+		textStyleClasses,
+		hoverClasses,
+		{
+			"shadow-md": hasShadow,
+		},
+		customWidth,
+		customHeight,
+		additionalClasses
+	);
+};

package/src/components/FormButton/index.ts

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