From 3129e1cbeb0dadd868d6c021dce85588a3cf0cf1 Mon Sep 17 00:00:00 2001
From: Maxime Lalo <maxime.lalo.pro@gmail.com>
Date: Fri, 19 Jul 2024 16:24:58 +0200
Subject: [PATCH] :sparkles: Textarea working

---
 .../NewTextAreaField/classes.module.scss      | 94 +++++++++++++++++++
 .../Form/NewFields/NewTextAreaField/index.tsx | 46 +++++++++
 .../Layouts/DesignSystem/classes.module.scss  |  5 +
 .../Components/Layouts/DesignSystem/index.tsx |  4 +-
 4 files changed, 148 insertions(+), 1 deletion(-)
 create mode 100644 src/front/Components/DesignSystem/Form/NewFields/NewTextAreaField/classes.module.scss
 create mode 100644 src/front/Components/DesignSystem/Form/NewFields/NewTextAreaField/index.tsx

diff --git a/src/front/Components/DesignSystem/Form/NewFields/NewTextAreaField/classes.module.scss b/src/front/Components/DesignSystem/Form/NewFields/NewTextAreaField/classes.module.scss
new file mode 100644
index 00000000..0a699277
--- /dev/null
+++ b/src/front/Components/DesignSystem/Form/NewFields/NewTextAreaField/classes.module.scss
@@ -0,0 +1,94 @@
+@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;
+			height: 94px;
+			&::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;
+			}
+
+			color: var(--input-placeholder-filled, #24282e);
+			/* text/md/semibold */
+			font-family: var(--font-text-family, Poppins);
+			font-size: 16px;
+			font-style: normal;
+			font-weight: var(--font-text-weight-semibold, 600);
+			line-height: normal;
+			letter-spacing: 0.08px;
+		}
+	}
+}
diff --git a/src/front/Components/DesignSystem/Form/NewFields/NewTextAreaField/index.tsx b/src/front/Components/DesignSystem/Form/NewFields/NewTextAreaField/index.tsx
new file mode 100644
index 00000000..0c030865
--- /dev/null
+++ b/src/front/Components/DesignSystem/Form/NewFields/NewTextAreaField/index.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
+import { ReactNode } from "react";
+import BaseField, { IProps as IBaseFieldProps } from "../../BaseField";
+import classes from "./classes.module.scss";
+import classnames from "classnames";
+
+export type IProps = IBaseFieldProps & {};
+
+export default class NewTextAreaField 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()}>
+							<textarea
+								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}
+							/>
+						</div>
+					</label>
+				</div>
+				{this.hasError() && <div className={classes["errors-container"]}>{this.renderErrors()}</div>}
+			</Typography>
+		);
+	}
+}
diff --git a/src/front/Components/Layouts/DesignSystem/classes.module.scss b/src/front/Components/Layouts/DesignSystem/classes.module.scss
index 2228c147..57f1d643 100644
--- a/src/front/Components/Layouts/DesignSystem/classes.module.scss
+++ b/src/front/Components/Layouts/DesignSystem/classes.module.scss
@@ -3,6 +3,11 @@
 	flex-direction: column;
 	gap: 32px;
 	.components {
+		.inputs {
+			display: flex;
+			flex-direction: column;
+			gap: 24px;
+		}
 		display: flex;
 		flex-direction: column;
 		gap: 24px;
diff --git a/src/front/Components/Layouts/DesignSystem/index.tsx b/src/front/Components/Layouts/DesignSystem/index.tsx
index a9d86a3a..825e60d2 100644
--- a/src/front/Components/Layouts/DesignSystem/index.tsx
+++ b/src/front/Components/Layouts/DesignSystem/index.tsx
@@ -15,6 +15,7 @@ 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";
+import NewTextAreaField from "@Front/Components/DesignSystem/Form/NewFields/NewTextAreaField";
 
 export default function DesignSystem() {
 	const { isOpen, open, close } = useOpenable();
@@ -67,11 +68,12 @@ export default function DesignSystem() {
 			<div className={classes["root"]}>
 				<div className={classes["components"]}>
 					<Typography typo={ETypo.TEXT_LG_BOLD}>Inputs</Typography>
-					<Form>
+					<Form className={classes["inputs"]}>
 						<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 />
+						<NewTextAreaField label="Textarea" placeholder="Placeholder" />
 					</Form>
 
 					<Typography typo={ETypo.TEXT_LG_BOLD}>Modal</Typography>