@agilant/toga-blox 1.0.7 → 1.0.9

package/src/components/IconButton/IconButton.stories.tsx

@@ -0,0 +1,196 @@
+import { Meta, StoryFn } from "@storybook/react";
+import IconButton from "./IconButton";
+import { IconButtonTypes } from "./IconButton.types";
+import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
+import { JSX } from "react/jsx-runtime";
+
+export default {
+	title: "Components/IconButton",
+	component: IconButton,
+	argTypes: {
+		iconSize: {
+			control: "none",
+			description: "Tailwind classes for the icon size. Example: `h-6 w-6`",
+		},
+		iconColor: {
+			control: "none",
+			description: "Tailwind classes for the icon color. Example: `text-blue-500`",
+		},
+		backgroundColor: {
+			control: "none",
+			description: "Tailwind classes for the background color. Example: `bg-gray-200`",
+		},
+		borderColor: {
+			control: "none",
+			description: "Tailwind classes for the border color. Example: `border-gray-300`",
+		},
+		iconLabel: {
+			control: "none",
+			description: "The label for the icon. Example: `Profile`",
+		},
+		icon: {
+			control: "none",
+			description: "The icon to be displayed. Example: `user-cog`",
+		},
+		size: {
+			control: "none",
+			description: "The size of the icon. Example: `xl`",
+		},
+		iconBorder: {
+			control: "none",
+			description: "Tailwind classes for the icon border. Example: `border-2`",
+		},
+		to: {
+			control: "none",
+			description: "The URL to redirect to when the icon is clicked. Example: `/admin`",
+		},
+		href: {
+			control: "none",
+			description: "The URL to redirect to when the icon is clicked. Example: `/admin`",
+		},
+		hoverBorderColor: {
+			control: "none",
+			description: "Tailwind classes for the border color on hover. Example: `hover:border-blue-500`",
+		},
+		hoverColor: {
+			control: "none",
+			description: "Tailwind classes for the color on hover. Example: `hover:text-blue-500`",
+		},
+		indicatorSize: {
+			control: "none",
+			description: "Tailwind classes for the indicator size. Example: `h-4 w-4`",
+		},
+		indicatorNumber: {
+			control: "none",
+			description: "The number to be displayed inside the indicator. Example: `12`",
+		},
+		hoverBorder: {
+			control: "none",
+			description: "Tailwind classes for the border on hover. Example: `hover:border-2`",
+		},
+		limitCharacters: {
+			control: "none",
+			description: "Flag to indicate if the text should be limited to 2 characters. If set to true and the text is greater than 99, the text will display '99+'.",
+		},
+		hoverBackgroundColor: {
+			control: "none",
+			description: "Tailwind classes for the background on hover. Example: `hover:bg-gray-300`",
+		},
+		hoverBackground: {
+			control: "none",
+			description: "Tailwind classes for the background color on hover. Example: `hover:bg-gray-300`",
+		},
+		hasNotification: {
+			control: "none",
+			description: "Flag to indicate if the button has a notification badge.",
+		},
+		notificationTextColor: {
+			control: "none",
+			description: "Tailwind classes for the notification text color. Example: `text-white`",
+		},
+		notificationBgColor: {
+			control: "none",
+			description: "Tailwind classes for the notification background color. Example: `bg-red-500`",
+		},
+		notificationCount: {
+			control: "none",
+			description: "The number to be displayed inside the notification badge. Example: `12`",
+		},
+		text: {
+			control: "none",
+			description: "The text to be displayed below the button. Example: `Profile`",
+		},
+		textClasses: {
+			control: "none",
+			description: "Tailwind classes to style the text. Example: `text-sm text-black`",
+		},
+		onClick: {
+			table: {
+				disable: true,
+			},
+			control: "none",
+			description: "Callback function to handle click events. Example: `() => alert('Clicked!')`",
+		},
+		role: {
+			control: "none",
+			description: "ARIA role for accessibility. Example: `button`",
+		},
+		additionalContainerClasses: {
+			control: "none",
+			description: "Additional Tailwind classes for the container. Example: `p-4`",
+		},
+		limitIndicator: {
+			control: "none",
+			description:
+				"Whether the indicator number should be limited to 2 characters. If set to true and the number is greater than 99, the indicator will display '99+'.",
+		},
+	},
+	tags: ["autodocs"],
+	parameters: {
+		layout: "centered",
+	},
+} as Meta;
+
+const Template: StoryFn<IconButtonTypes> = (args) => <IconButton {...args} />;
+
+export const AdminButton = Template.bind({});
+AdminButton.args = {
+	iconColor: "text-black",
+	text: "Admin",
+	backgroundColor: "bg-gray-200",
+	iconSize: "h-8 w-8",
+	icon: getFontAwesomeIcon("cog"),
+	hoverBackgroundColor: "hover:bg-gray-300",
+	hoverBorderColor: "hover:border-black",
+	notificationCount: 0,
+	textClasses: "text-black font-serif text-md",
+	onClick: () => alert("Redirect to admin"),
+};
+
+export const AccountButton = Template.bind({});
+AccountButton.args = {
+	iconColor: "text-black",
+	text: "Account",
+	backgroundColor: "bg-gray-200",
+	iconSize: "h-8 w-8",
+	icon: getFontAwesomeIcon("user"),
+	hoverBackgroundColor: "hover:bg-gray-300",
+	hoverBorderColor: "hover:border-black",
+	notificationCount: 0,
+	textClasses: "text-black font-serif text-md",
+	onClick: () => alert("Redirect to account"),
+};
+
+export const AlertsButton = Template.bind({});
+AlertsButton.args = {
+	iconColor: "text-black",
+	text: "Alerts",
+	backgroundColor: "bg-gray-200",
+	iconSize: "h-8 w-8",
+	icon: getFontAwesomeIcon("bell"),
+	hoverBackgroundColor: "hover:bg-gray-300",
+	hoverBorderColor: "hover:border-black",
+	hasNotification: true,
+	notificationTextClasses: "text-white",
+	notificationBgColor: "bg-green-600",
+	notificationCount: 123,
+	textClasses: "text-black font-serif text-md",
+	onClick: () => alert("Redirect to alerts"),
+};
+
+export const CartButton = Template.bind({});
+CartButton.args = {
+	iconColor: "text-black",
+	text: "Cart",
+	backgroundColor: "bg-gray-200",
+	iconSize: "h-8 w-8",
+	icon: getFontAwesomeIcon("shop"),
+	hoverBackgroundColor: "hover:bg-gray-300",
+	hoverBorderColor: "hover:border-black",
+	hasNotification: true,
+	notificationTextClasses: "text-white",
+	notificationBgColor: "bg-green-600",
+	notificationCount: 3,
+	textClasses: "text-black font-serif text-md",
+	onClick: () => alert("Redirect to cart"),
+};

package/src/components/{Icon/Icon.test.tsx → IconButton/IconButton.test.tsx}

@@ -1,9 +1,8 @@
 import { render, screen } from "@testing-library/react";
 import { describe, expect, beforeEach, test } from "vitest";
-import Icon from "./Icon";
+import Icon from "./IconButton";
 import Text from "../Text/Text";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faUser } from "@fortawesome/free-solid-svg-icons";
+import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
 
 describe("<Icon /> Profile", () => {
 	beforeEach(() => {
@@ -12,7 +11,7 @@ describe("<Icon /> Profile", () => {
 				iconLabel="Profile"
 				iconColor="green"
 				size="sm"
-				icon={<FontAwesomeIcon icon={faUser} />}
+				icon={getFontAwesomeIcon("user")}
 				hoverBackground="none"
 				hoverColor="green"
 				text={

package/src/components/IconButton/IconButton.tsx

@@ -0,0 +1,76 @@
+import React from "react";
+import { IconButtonTypes } from "./IconButton.types";
+import Text from "../Text/Text";
+
+const Icon: React.FC<IconButtonTypes> = ({
+	onClick = () => { },
+	role,
+	icon,
+	iconSize,
+	iconColor,
+	hasNotification,
+	notificationTextClasses,
+	notificationBgColor,
+	notificationCount,
+	text,
+	textSize,
+	textColor,
+	textFontFamily,
+	textClasses,
+	textContainerClasses,
+	hoverBorderColor,
+	hoverBackgroundColor,
+	backgroundColor,
+	borderColor,
+	additionalContainerClasses,
+}) => {
+	const displayNotificationCount = notificationCount && notificationCount > 99 ? "99+" : notificationCount;
+
+	const notificationClasses = `absolute -top-1 h-18px rounded-full text-11px font-semibold leading-[18px] flex items-center justify-center ${notificationTextClasses} ${notificationBgColor} ${notificationCount && notificationCount > 99
+		? "w-26px -right-4 "
+		: "w-18px -right-2 "
+		}`;
+
+	const iconClasses = `flex items-center justify-center ${iconSize} ${iconColor}`;
+	const iconContainerClasses = `relative flex items-center justify-center h-42px w-42px rounded-full border-1 ${borderColor} ${backgroundColor} group-hover:${hoverBorderColor} group-hover:${hoverBackgroundColor}`;
+
+	const ariaLabel = `${text} ${hasNotification ? `with ${notificationCount} notifications` : ""}`;
+
+	const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+		if (e.key === "Enter" || e.key === " ") {
+			onClick(e as unknown as React.MouseEvent<HTMLDivElement>);
+		}
+	};
+
+	return (
+		<div
+			className={`flex flex-col items-center justify-center group ${additionalContainerClasses}`}
+			onClick={(e) => onClick(e as React.MouseEvent<HTMLDivElement>)}
+			role={role}
+			tabIndex={0}
+			onKeyDown={(e) => handleKeyDown(e)}
+			aria-label={ariaLabel}
+		>
+			<div className={iconContainerClasses}>
+				<div className={iconClasses}>{icon}</div>
+				{hasNotification && notificationCount && (
+					<span className={notificationClasses}>
+						{displayNotificationCount}
+					</span>
+				)}
+			</div>
+			<div aria-hidden={true} className={textContainerClasses}>
+				<Text
+					size={textSize}
+					color={textColor}
+					fontFamily={textFontFamily}
+					text={text}
+					tag="p"
+					additionalClasses={textClasses}
+				/>
+			</div>
+		</div>
+	);
+};
+
+export default Icon;

package/src/components/IconButton/IconButton.types.ts

@@ -0,0 +1,28 @@
+import React, { ReactNode } from "react";
+
+export interface IconButtonTypes {
+	onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+	role?: string;
+	icon: ReactNode;
+	iconSize?: string;
+	iconColor?: string;
+	hasNotification?: boolean;
+	notificationTextClasses?: string;
+	notificationBgColor?: string;
+	notificationCount?: number;
+	text?: string;
+	textSize?: string;
+	textColor?: string;
+	textFontFamily?: string;
+	textClasses?: string;
+	hoverBorderColor?: string;
+	hoverBackgroundColor?: string;
+	backgroundColor?: string;
+	borderColor?: string;
+	additionalContainerClasses?: string;
+	textContainerClasses?: string;
+	iconLabel?: string;
+	iconBorder?: string;
+	indicatorNumber?: string;
+	indicatorSize?: string;
+}

package/src/components/IconButton/index.ts

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

package/src/components/Image/Image.tsx

@@ -1,4 +1,4 @@
-import React, { Children, ReactNode, CSSProperties } from "react";
+import React, { Children, CSSProperties } from "react";
 import heroImage from "../../../assets/heroImage.png";
 import imageNotFound from "../../../assets/placeholder-no-image-available.png";
 import { ImageTypes } from "./Image.types";

package/src/components/Input/Input.stories.tsx

@@ -1,8 +1,6 @@
 import { Meta, StoryFn } from "@storybook/react";
 import { Input, InputTypes } from ".";
 import Text from "../Text/Text";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faMagnifyingGlass, faCircleArrowRight, faEnvelope } from "@fortawesome/free-solid-svg-icons";
 import { minCharactersRegex } from "../../utils/inputValidation";
 import { withMemo } from "../../userHoc";
 import { arePropsEqual } from "./InputMemoTypes";
@@ -203,8 +201,8 @@ NoIcons.args = {
 	),
 	hasLeftIcon: false,
 	hasRightIcon: false,
-	leftIcon: <FontAwesomeIcon icon={faMagnifyingGlass} />,
-	rightIcon: <FontAwesomeIcon icon={faCircleArrowRight} />,
+	leftIcon: getFontAwesomeIcon("search"),
+	rightIcon: getFontAwesomeIcon("arrow-right"),
 	hasButton: true,
 	button: (
 		<FormButton
@@ -252,7 +250,7 @@ LeftIcon.args = {
 		/>
 	),
 	hasLeftIcon: true,
-	leftIcon: <FontAwesomeIcon icon={faMagnifyingGlass} />,
+	leftIcon: getFontAwesomeIcon("search"),
 	iconBackgroundColor: "none",
 	hasRightIcon: false,
 	iconColor: "text-green-500",
@@ -283,7 +281,7 @@ RightIcon.args = {
 	),
 	hasLeftIcon: false,
 	hasRightIcon: true,
-	rightIcon: <FontAwesomeIcon icon={faCircleArrowRight} />,
+	rightIcon: getFontAwesomeIcon("arrow-right"),
 	iconBackgroundColor: "none",
 	hasButton: false,
 };
@@ -312,8 +310,8 @@ DualIcons.args = {
 	),
 	hasRightIcon: true,
 	hasLeftIcon: true,
-	rightIcon: <FontAwesomeIcon icon={faCircleArrowRight} />,
-	leftIcon: <FontAwesomeIcon icon={faMagnifyingGlass} />,
+	rightIcon: getFontAwesomeIcon("arrow-right"),
+	leftIcon: getFontAwesomeIcon("search"),
 	iconBackgroundColor: "none",
 };
 
@@ -352,7 +350,7 @@ ButtonWithValidation.args = {
 			as="button"
 			hoverBackground="hover:bg-green-500"
 			backgroundColor="bg-green-500"
-			icon={<FontAwesomeIcon icon={faCircleArrowRight} />}
+			icon={getFontAwesomeIcon("search")}
 			fontColor="text-white"
 			additionalClasses="items-center px-2 h-full"
 			borderColor="border-none"
@@ -386,7 +384,7 @@ ButtonWithLeftIcon.args = {
 	),
 	hasRightIcon: false,
 	hasLeftIcon: true,
-	leftIcon: <FontAwesomeIcon icon={faMagnifyingGlass} />,
+	leftIcon: getFontAwesomeIcon("search"),
 	iconBackgroundColor: "none",
 	hasButton: true,
 	button: (
@@ -396,7 +394,7 @@ ButtonWithLeftIcon.args = {
 			as="button"
 			hoverBackground="hover:bg-green-500"
 			backgroundColor="bg-green-500"
-			icon={<FontAwesomeIcon icon={faCircleArrowRight} />}
+			icon={getFontAwesomeIcon("search")}
 			fontColor="text-white"
 			additionalClasses="items-center px-2 h-full"
 			borderColor="border-none"
@@ -456,7 +454,7 @@ EmailInput.args = {
 	),
 	hasRightIcon: false,
 	hasLeftIcon: true,
-	leftIcon: <FontAwesomeIcon icon={faEnvelope} />,
+	leftIcon: getFontAwesomeIcon("envelope"),
 	hasButton: false,
 };
 

package/src/components/Input/Input.test.tsx

@@ -1,11 +1,10 @@
 import "../../../dist/main.css";
 import { render, screen } from "@testing-library/react";
 import { describe, test, expect, beforeEach } from "vitest";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faCircleArrowRight } from "@fortawesome/free-solid-svg-icons";
 import Input from "./Input";
 import Text from "../Text/Text";
 import FormButton from "../FormButton/FormButton";
+import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
 
 describe("<Input /> with all props", () => {
 	beforeEach(() => {
@@ -49,7 +48,7 @@ describe("<Input /> with all props", () => {
 						as="button"
 						hoverBackground="green"
 						backgroundColor="green"
-						icon={<FontAwesomeIcon icon={faCircleArrowRight} />}
+						icon={getFontAwesomeIcon("arrow-right")}
 						fontColor="white"
 						additionalClasses="items-center px-4"
 						borderColor="green"

package/src/components/Input/Input.tsx

@@ -1,23 +1,8 @@
 import React, { useState } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faCircleArrowRight } from "@fortawesome/free-solid-svg-icons";
 import FormButton from "../FormButton/FormButton";
 import { InputTypes } from ".";
 import { validateInput } from "../../utils/inputValidation";
-
-import {
-	getInputBorderClassNames,
-	getInputPaddingClassNames,
-	getInputBackgroundClassNames,
-	getInputTextClasses,
-	getInputShape,
-	getLabelPlacement,
-	getLabelVisibility,
-	getSuccessColorClasses,
-	getErrorColorClasses,
-	getIconClasses,
-	inputButtonWithClasses,
-} from "./inputClassNames";
+import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
 
 const Input: React.FC<InputTypes> = ({
 	// FUNCTIONALITY
@@ -29,46 +14,41 @@ const Input: React.FC<InputTypes> = ({
 	// LABEL
 	label,
 	labelVisible = true,
-	labelPlacement,
-
+	labelPlacement = "block",
 	// INPUT DETAILS
 	inputName,
 	inputType,
-
 	// PLACEHOLDER
 	hasPlaceholder = true,
 	placeholder,
-
 	// ICONS
 	hasLeftIcon,
 	hasRightIcon,
 	leftIcon,
 	rightIcon,
-	iconColor,
-	iconBackgroundColor,
-
+	iconColor = "text-gray-500",
+	iconBackgroundColor = "bg-transparent",
 	// INPUT STYLES
-	inputTextSize,
-	inputShape,
-	borderColor = "primary",
-	backgroundColor,
-	inputWidth,
-	errorBorder,
-	successBorder,
-
+	inputTextSize = "text-base",
+	inputShape = "rounded-md",
+	borderColor = "border-gray-300",
+	backgroundColor = "bg-white",
+	inputWidth = "w-full",
+	errorBorder = "border-red-500",
+	successBorder = "border-green-500",
 	// BUTTON
 	hasButton,
 	button = (
 		<FormButton
 			text="Submit"
 			as="button"
-			hoverBackground="green"
-			backgroundColor="red"
-			icon={<FontAwesomeIcon icon={faCircleArrowRight} />}
-			fontColor="white"
-			borderColor="green"
-			hoverFontColor="black"
-			shape="cornered"
+			hoverBackground="hover:bg-green-500"
+			backgroundColor="bg-red-500"
+			icon={getFontAwesomeIcon("arrow-right")}
+			fontColor="text-white"
+			borderColor="border-green-500"
+			hoverFontColor="hover:text-black"
+			shape="rounded-none"
 			additionalClasses="h-full"
 		/>
 	),
@@ -76,39 +56,19 @@ const Input: React.FC<InputTypes> = ({
 	const [isValid, setIsValid] = useState<string>("");
 	const [termInternal, setTermInternal] = useState<string>("");
 	const [inputBorderClasses, setInputBorderClasses] = useState<string>(
-		getInputBorderClassNames(borderColor)
-	);
-
-	let iconClasses = getIconClasses(
-		iconColor,
-		iconBackgroundColor,
-		inputShape
+		borderColor
 	);
 
-	let errorColor = getErrorColorClasses(errorBorder);
-	let successColor = getSuccessColorClasses(successBorder);
-	let inputPaddingClasses = getInputPaddingClassNames(
-		hasButton,
-		hasLeftIcon,
-		hasRightIcon
-	);
-	let inputBackgroundClasses = getInputBackgroundClassNames(backgroundColor);
-	let inputShapeClasses = getInputShape(inputShape);
-	let inputWithButtonClasses = inputButtonWithClasses(inputShape);
-	let labelVisibility = getLabelVisibility(labelVisible);
-	let labelPlacementClasses = getLabelPlacement(labelPlacement);
-	let inputTextClasses = getInputTextClasses(inputTextSize);
-	let inputBorderColor = getInputBorderClassNames(borderColor);
 	const inputValue = termInternal || controlledState || "";
 	const setTerm = setControlledState || setTermInternal;
 
 	const handleBorderStyles = () => {
 		if (isValid !== "Success" && isValid !== "") {
-			setInputBorderClasses(errorColor);
+			setInputBorderClasses(errorBorder);
 		} else if (isValid === "Success") {
-			setInputBorderClasses(successColor);
+			setInputBorderClasses(successBorder);
 		} else if (isValid === "") {
-			setInputBorderClasses(getInputBorderClassNames(borderColor));
+			setInputBorderClasses(borderColor);
 		}
 	};
 
@@ -127,62 +87,49 @@ const Input: React.FC<InputTypes> = ({
 	};
 
 	return (
-		<div
-			className={`${labelPlacementClasses} w-full`}
-			data-testid="input-container"
-		>
+		<div className={`${labelPlacement} w-full`} data-testid="input-container">
 			<label
-				htmlFor={`pb-1 pl-1 ${inputName}`}
-				className={`${labelVisibility}`}
+				htmlFor={inputName}
+				className={`${labelVisible ? "block" : "hidden"} pb-1 pl-1`}
 				data-testid="input-label"
 			>
 				{label}
 			</label>
 			{hasButton ? (
 				<div className={`relative ${inputWidth} flex`}>
-					<div className="flex-1">
+					<div className="flex-1 relative">
 						{hasLeftIcon && (
 							<div
-								className={`absolute bottom-1  flex items-center justify-center size-10 pointer-events-none ${iconClasses} `}
+								className={`absolute bottom-1 left-1 flex items-center justify-center ${iconColor} ${iconBackgroundColor} h-8 w-8`}
 							>
 								{leftIcon}
 							</div>
 						)}
 						<input
 							type={inputType}
-							placeholder={
-								hasPlaceholder ? placeholder : undefined
-							}
+							placeholder={hasPlaceholder ? placeholder : undefined}
 							name={inputName}
 							id={inputName}
 							onChange={handleChange}
 							value={inputValue}
 							data-testid="input-element"
-							className={`block w-full border-2 p-2 ${inputTextClasses} ${inputWithButtonClasses} ${inputBackgroundClasses} ${inputPaddingClasses}  ${!hasValidation
-									? inputBorderColor
-									: inputBorderClasses
-								}`}
+							className={`block w-full border-2 p-2 ${inputTextSize} ${inputShape} ${backgroundColor} ${inputBorderClasses} ${hasLeftIcon ? "pl-10" : ""} ${hasRightIcon ? "pr-10" : ""}`}
 						/>
 					</div>
-
-					<div>
-						{hasButton && (
-							<div
-								className={`${inputShape} flex items-center justify-center h-full`}
-								data-testid="submit-button"
-							>
-								<div className="h-full bg-red-500">
-									{button}
-								</div>
-							</div>
-						)}
-					</div>
+					{hasButton && (
+						<div
+							className={`flex items-center justify-center ${inputShape} h-full`}
+							data-testid="submit-button"
+						>
+							{button}
+						</div>
+					)}
 				</div>
 			) : (
 				<div className={`relative ${inputWidth} flex`}>
 					{hasLeftIcon && (
 						<div
-							className={`absolute top-[1px] flex items-center justify-center size-10 pointer-events-none ${iconClasses} `}
+							className={`absolute top-1 left-1 flex items-center justify-center ${iconColor} ${iconBackgroundColor} h-8 w-8`}
 						>
 							{leftIcon}
 						</div>
@@ -195,30 +142,20 @@ const Input: React.FC<InputTypes> = ({
 						onChange={handleChange}
 						value={inputValue}
 						data-testid="input-element"
-						className={`block w-full border-2 ${inputTextClasses} ${inputShapeClasses} ${inputBackgroundClasses} ${inputPaddingClasses} ${!hasValidation
-								? inputBorderColor
-								: inputBorderClasses
-							}`}
+						className={`block w-full border-2 ${inputTextSize} ${inputShape} ${backgroundColor} ${inputBorderClasses} ${hasLeftIcon ? "pl-10" : ""} ${hasRightIcon ? "pr-10" : ""}`}
 					/>
 					{hasRightIcon && (
 						<div
-							className={`absolute  end-1 flex items-center justify-center size-10 pointer-events-none ${iconClasses}`}
+							className={`absolute top-1 right-1 flex items-center justify-center ${iconColor} ${iconBackgroundColor} h-8 w-8`}
 						>
 							{rightIcon}
 						</div>
 					)}
-					{hasButton && (
-						<div
-							className={`${inputShape} flex items-center inset-y-0 end-1.5`}
-							data-testid="submit-button"
-						>
-							{button}
-						</div>
-					)}
 				</div>
 			)}
 		</div>
 	);
 };
+
 Input.displayName = "Memo(Input)";
 export default Input;