✨ New base text field

src/front/Components/DesignSystem/Form/BaseField.tsx

@@ -15,6 +15,7 @@ export type IProps = {
 	disableValidation?: boolean;
 	validationError?: ValidationError;
 	disabled?: boolean;
+	label?: string;
 };
 
 type IState = {

src/front/Components/DesignSystem/Form/NewFields/NewTextField/classes.module.scss

@@ -0,0 +1,112 @@
+@import "@Themes/constants.scss";
+
+.root {
+	position: relative;
+
+	&[data-is-disabled="true"] {
+		opacity: var(--opacity-disabled, 0.3);
+		.input-container {
+			cursor: not-allowed;
+			border: 1px solid var(--input-main-border-default, #d7dce0);
+			&::placeholder {
+				background: var(--input-background, #fff);
+			}
+
+			&:hover {
+				border: 1px solid var(--input-main-border-default, #d7dce0);
+			}
+
+			.input {
+				cursor: not-allowed;
+			}
+		}
+	}
+
+	.label {
+		padding: 0px var(--spacing-2, 16px);
+	}
+
+	.input-container {
+		display: flex;
+		padding: var(--spacing-2, 16px) var(--spacing-sm, 8px);
+		align-items: center;
+		gap: var(--spacing-2, 16px);
+
+		border-radius: var(--input-radius, 0px);
+		border: 1px solid var(--input-main-border-default, #d7dce0);
+		background: var(--input-background, #fff);
+
+		&:hover {
+			border: 1px solid var(--input-main-border-hovered, #b4bec5);
+		}
+
+		&:not([data-value=""]) {
+			border: 1px solid var(--input-main-border-filled, #6d7e8a);
+			.input {
+				font-weight: var(--font-text-weight-semibold, 600);
+			}
+		}
+
+		&[data-is-errored="true"] {
+			border: 1px solid var(--input-error, #dc2625);
+		}
+
+		&:focus,
+		&:focus-within,
+		&:focus-visible {
+			border: 1px solid var(--input-main-border-focused, #005bcb);
+			.input {
+				font-weight: var(--font-text-weight-semibold, 600);
+			}
+		}
+
+		.input {
+			display: flex;
+			padding: 0px var(--spacing-2, 16px);
+
+			align-items: center;
+			gap: 8px;
+
+			flex: 1 0 0;
+			border: none;
+
+			&::placeholder {
+				color: var(--input-placeholder-empty, #6d7e8a);
+				/* text/md/regular */
+				font-family: var(--font-text-family, Poppins);
+				font-size: 16px;
+				font-style: normal;
+				font-weight: var(--font-text-weight-regular, 400);
+				line-height: normal;
+				letter-spacing: 0.08px;
+			}
+
+			&[type="number"] {
+				&::-webkit-inner-spin-button,
+				&::-webkit-outer-spin-button {
+					-webkit-appearance: none;
+					margin: 0;
+				}
+
+				/* For Chrome, Safari, and Opera */
+				&::-webkit-inner-spin-button,
+				&::-webkit-outer-spin-button {
+					-webkit-appearance: none;
+					margin: 0;
+				}
+
+				/* For IE 10+ */
+				&::-ms-inner-spin-button,
+				&::-ms-outer-spin-button {
+					display: none;
+				}
+			}
+		}
+	}
+
+	.copy-icon {
+		cursor: pointer;
+		height: 24px;
+		width: 24px;
+	}
+}

src/front/Components/DesignSystem/Form/NewFields/NewTextField/index.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
+import { ReactNode } from "react";
+import CopyIcon from "@Assets/Icons/copy.svg";
+import BaseField, { IProps as IBaseFieldProps } from "../../BaseField";
+import classes from "./classes.module.scss";
+import classnames from "classnames";
+import Image from "next/image";
+
+export type IProps = IBaseFieldProps & {
+	canCopy?: boolean;
+	password?: boolean;
+};
+
+export default class NewTextField extends BaseField<IProps> {
+	constructor(props: IProps) {
+		super(props);
+		this.state = this.getDefaultState();
+	}
+
+	public override render(): ReactNode {
+		const value = this.state.value ?? "";
+		console.log(this.hasError());
+		return (
+			<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
+				<div className={classes["root"]} data-is-disabled={this.props.disabled}>
+					<label>
+						{this.props.label && (
+							<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.INPUT_LABEL} className={classes["label"]}>
+								{this.props.label}
+							</Typography>
+						)}
+						<div className={classes["input-container"]} data-value={value} data-is-errored={this.hasError().toString()}>
+							<input
+								onChange={this.onChange}
+								className={classnames(classes["input"], this.props.className)}
+								placeholder={this.props.placeholder}
+								value={value}
+								onFocus={this.onFocus}
+								onBlur={this.onBlur}
+								name={this.props.name}
+								disabled={this.props.disabled}
+								type={this.props.password ? "password" : "text"}
+							/>
+							{this.props.canCopy && (
+								<div className={classes["copy-icon"]} onClick={this.onCopyClick}>
+									<Image src={CopyIcon} alt="Copy icon" />
+								</div>
+							)}
+						</div>
+					</label>
+				</div>
+				{this.hasError() && <div className={classes["errors-container"]}>{this.renderErrors()}</div>}
+			</Typography>
+		);
+	}
+
+	private onCopyClick = (): void => {
+		if (this.props.canCopy) {
+			navigator.clipboard.writeText(this.state.value ?? "");
+		}
+	};
+}

src/front/Components/DesignSystem/Typography/index.tsx

@@ -144,6 +144,8 @@ export enum ETypoColor {
 
 	TABS_CONTRAST_DEFAULT = "--tabs-contrast-default",
 	TABS_CONTRAST_ACTIVATED = "--tabs-contrast-actived",
+
+	INPUT_LABEL = "--input-label",
 }
 
 export default function Typography(props: IProps) {

src/front/Components/Layouts/DesignSystem/index.tsx

@@ -13,6 +13,8 @@ import classes from "./classes.module.scss";
 import useOpenable from "@Front/Hooks/useOpenable";
 import Modal from "@Front/Components/DesignSystem/Modal";
 import IconButton, { EIconButtonVariant } from "@Front/Components/DesignSystem/IconButton";
+import NewTextField from "@Front/Components/DesignSystem/Form/NewFields/NewTextField";
+import Form from "@Front/Components/DesignSystem/Form";
 
 export default function DesignSystem() {
 	const { isOpen, open, close } = useOpenable();
@@ -64,6 +66,14 @@ export default function DesignSystem() {
 			<Newsletter isOpen />
 			<div className={classes["root"]}>
 				<div className={classes["components"]}>
+					<Typography typo={ETypo.TEXT_LG_BOLD}>Inputs</Typography>
+					<Form>
+						<NewTextField label="Label" placeholder="Placeholder" canCopy />
+						<NewTextField label="Without copy" placeholder="Placeholder" />
+						<NewTextField label="Disabled" placeholder="Placeholder" disabled canCopy />
+						<NewTextField label="Disabled without copy" placeholder="Placeholder" disabled />
+					</Form>
+
 					<Typography typo={ETypo.TEXT_LG_BOLD}>Modal</Typography>
 					<Button onClick={open}>Open Modal</Button>
 					<Modal