@agilant/toga-blox 1.0.9 → 1.0.11

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

@@ -1,289 +0,0 @@
-import { Meta, StoryFn } from "@storybook/react";
-import FormButton from "./FormButton";
-import type { FormButtonProps } from "./FormButton.types";
-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",
-	},
-} as Meta;
-
-const Template: StoryFn<FormButtonProps> = (args) => <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: <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: <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: 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: <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: <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: <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) => (
-		<div className="flex divide-x divide-gray-200 rounded-md overflow-hidden border border-gray-200">
-			<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!")}
-			/>
-
-			<FormButton
-				text={
-					<>
-						{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!")}
-			/>
-			<FormButton
-				text={
-					<>
-						{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!")}
-			/>
-			<FormButton
-				text={
-					<>
-						{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!")}
-			/>
-		</div>
-	),
-];

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

@@ -1,73 +0,0 @@
-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(
-			<MemoryRouter>
-				<Button
-					text="Default Button"
-					backgroundColor="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"
-					backgroundColor="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"
-					backgroundColor="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"
-					backgroundColor="green"
-					size="md"
-					shape="outline"
-					isDisabled
-				/>
-			</MemoryRouter>
-		);
-		expect(screen.getByText("Disabled Button")).toHaveAttribute(
-			"aria-disabled",
-			"true"
-		);
-	});
-});

package/src/components/FormButton/FormButton.tsx

@@ -1,86 +0,0 @@
-import React from "react";
-import type { FormButtonProps } from "./FormButton.types";
-
-const FormButton: React.FC<FormButtonProps> = ({
-	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: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>
-	) => {
-		if (isDisabled) {
-			e.preventDefault();
-			return;
-		}
-		onClick?.(e);
-	};
-
-	const baseProps = {
-		className: buttonClasses,
-		onClick: handleClick,
-		"aria-disabled": isDisabled ? "true" : "false",
-	};
-
-	let ElementProps: React.ComponentProps<any> = { ...baseProps };
-
-	if (Element === "a" && href) {
-		ElementProps = { ...baseProps, href };
-	} else if (Element === "button") {
-		ElementProps = { ...baseProps, type };
-	} else {
-		ElementProps = { ...baseProps };
-	}
-
-	return (
-		<Element {...ElementProps} {...props}>
-			{icon && <span className={iconClasses}>{icon}</span>}
-			{text}
-		</Element>
-	);
-};
-
-export default FormButton;

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

@@ -1,27 +0,0 @@
-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;
-}