Merge branch 'dev' into staging

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

@@ -15,6 +15,7 @@ export type IProps = {
 	disableValidation?: boolean;
 	validationError?: ValidationError;
 	disabled?: boolean;
+	label?: string;
 };
 
 type IState = {
@@ -107,7 +108,7 @@ export default abstract class BaseField<P extends IProps, S extends IState = ISt
 		let errors: JSX.Element[] = [];
 		Object.entries(this.state.validationError.constraints).forEach(([key, value]) => {
 			errors.push(
-				<Typography key={key} typo={ETypo.TEXT_SM_REGULAR} color={ETypoColor.COLOR_ERROR_600}>
+				<Typography key={key} typo={ETypo.TEXT_SM_REGULAR} color={ETypoColor.INPUT_ERROR}>
 					{value}
 				</Typography>,
 			);

src/front/Components/DesignSystem/Form/DateField/classes.module.scss

@@ -13,7 +13,7 @@
 		width: 100%;
 		height: 70px;
 		border: 1px solid var(--color-neutral-200);
-
+		font-family: var(--font-text-family);
 		&:disabled {
 			cursor: not-allowed;
 		}

src/front/Components/DesignSystem/Form/TextField/classes.module.scss

@@ -3,89 +3,103 @@
 .root {
 	position: relative;
 
-	.input {
+	&[data-is-disabled="true"] {
-		z-index: 1;
+		opacity: var(--opacity-disabled, 0.3);
-		display: flex;
+		.input-container {
-		flex-direction: row;
-		align-items: center;
-		padding: 24px;
-		gap: 10px;
-		width: 100%;
-		height: 70px;
-		border: 1px solid var(--color-neutral-200);
-
-		&:disabled {
 			cursor: not-allowed;
-		}
+			border: 1px solid var(--input-main-border-default, #d7dce0);
-
+			&::placeholder {
-		&:focus {
+				background: var(--input-background, #fff);
-			~ .fake-placeholder {
-				transform: translateY(-35px);
-			}
-		}
-
-		&:not([data-value=""]) {
-			~ .fake-placeholder {
-				transform: translateY(-35px);
-			}
-		}
-
-		&[type="number"] {
-			&:focus {
-				~ .fake-placeholder {
-					transform: translateY(-35px);
-				}
 			}
 
-			&:not([data-value=""]) {
+			&:hover {
-				~ .fake-placeholder {
+				border: 1px solid var(--input-main-border-default, #d7dce0);
-					transform: translateY(-35px);
-				}
 			}
 
-			&::-webkit-inner-spin-button,
+			.input {
-			&::-webkit-outer-spin-button {
+				cursor: not-allowed;
-				-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;
-			}
-		}
-
-		&:not([data-value=""]) {
-			~ .fake-placeholder {
-				transform: translateY(-35px);
-			}
-		}
-
-		~ .fake-placeholder {
-			z-index: 2;
-			top: 35%;
-			margin-left: 8px;
-			padding: 0 16px;
-			pointer-events: none;
-			position: absolute;
-			background: var(--color-generic-white);
-			transition: transform 0.3s ease-in-out;
 		}
 	}
 
-	&[data-is-errored="true"] {
+	.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 {
-			border: 1px solid var(--color-error-600);
+			display: flex;
-			~ .fake-placeholder {
+			padding: 0px var(--spacing-2, 16px);
-				color: var(--color-error-600);
+
+			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;
+				}
 			}
 		}
 	}
@@ -94,9 +108,9 @@
 		cursor: pointer;
 		height: 24px;
 		width: 24px;
-		position: absolute;
+	}
-		top: 50%;
+
-		right: 24px;
+	.errors-container {
-		transform: translate(0, -50%);
+		margin-top: 8px;
 	}
 }

src/front/Components/DesignSystem/Form/TextField/index.tsx

@@ -21,31 +21,34 @@ export default class TextField extends BaseField<IProps> {
 	public override render(): ReactNode {
 		const value = this.state.value ?? "";
 		return (
-			<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
+			<div className={classes["root"]} data-is-disabled={this.props.disabled}>
-				<div className={classes["root"]} data-is-errored={this.hasError().toString()}>
+				<label>
-					<input
+					{this.props.label && (
-						onChange={this.onChange}
+						<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.INPUT_LABEL} className={classes["label"]}>
-						data-value={value}
+							{this.props.label}
-						data-has-validation-errors={(this.state.validationError === null).toString()}
+						</Typography>
-						className={classnames(classes["input"], this.props.className)}
-						value={value}
-						onFocus={this.onFocus}
-						onBlur={this.onBlur}
-						name={this.props.name}
-						disabled={this.props.disabled}
-						type={this.props.password ? "password" : "text"}
-					/>
-					<div className={classes["fake-placeholder"]}>
-						{this.props.placeholder} {!this.props.required && " (Facultatif)"}
-					</div>
-					{this.props.canCopy && (
-						<div className={classes["copy-icon"]} onClick={this.onCopyClick}>
-							<Image src={CopyIcon} alt="Copy icon" />
-						</div>
 					)}
-				</div>
+					<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>
 				{this.hasError() && <div className={classes["errors-container"]}>{this.renderErrors()}</div>}
-			</Typography>
+			</div>
 		);
 	}
 

src/front/Components/DesignSystem/Form/TextareaField/classes.module.scss

@@ -3,61 +3,92 @@
 .root {
 	position: relative;
 
-	.textarea {
+	&[data-is-disabled="true"] {
-		resize: none;
+		opacity: var(--opacity-disabled, 0.3);
-		height: auto;
+		.input-container {
-		box-sizing: border-box;
-		font-family: "Inter", sans-serif;
-		font-style: normal;
-		font-weight: 400;
-		font-size: 18px;
-		line-height: 22px;
-
-		&:read-only {
 			cursor: not-allowed;
-		}
+			border: 1px solid var(--input-main-border-default, #d7dce0);
-		z-index: 1;
+			&::placeholder {
-		display: flex;
+				background: var(--input-background, #fff);
-		flex-direction: row;
-		align-items: center;
-		padding: 24px;
-		gap: 10px;
-
-		width: 100%;
-		height: 100px;
-		border: 1px solid var(--color-neutral-200);
-
-		~ .fake-placeholder {
-			z-index: 2;
-			top: -12px;
-			margin-left: 8px;
-			padding: 0 16px;
-			pointer-events: none;
-			position: absolute;
-			background: var(--color-generic-white);
-			transform: translateY(35px);
-			transition: transform 0.3s ease-in-out;
-		}
-
-		&:focus {
-			~ .fake-placeholder {
-				transform: translateY(0px);
 			}
+
+			&: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=""]) {
-			~ .fake-placeholder {
+			border: 1px solid var(--input-main-border-filled, #6d7e8a);
-				transform: translateY(0px);
+			.input {
+				font-weight: var(--font-text-weight-semibold, 600);
 			}
 		}
-	}
 
-	&[data-is-errored="true"] {
+		&[data-is-errored="true"] {
-		.textarea {
+			border: 1px solid var(--input-error, #dc2625);
-			border: 1px solid var(--color-error-600);
+		}
-			~ .fake-placeholder {
+
-				color: var(--color-error-600);
+		&: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;
+		}
 	}
 }

src/front/Components/DesignSystem/Form/TextareaField/index.tsx

@@ -1,8 +1,7 @@
-import BaseField, { IProps as IBaseFieldProps } from "../BaseField";
-import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
 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";
 
@@ -18,30 +17,29 @@ export default class TextAreaField extends BaseField<IProps> {
 		const value = this.state.value ?? "";
 		return (
 			<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
-				<div className={classes["root"]} data-is-errored={this.hasError().toString()}>
+				<div className={classes["root"]} data-is-disabled={this.props.disabled}>
-					<textarea
+					<label>
-						name={this.props.name}
+						{this.props.label && (
-						rows={4}
+							<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.INPUT_LABEL} className={classes["label"]}>
-						data-value={value}
+								{this.props.label}
-						onChange={this.onChange}
+							</Typography>
-						className={classnames(classes["textarea"], this.props.className)}
+						)}
-						value={value}
+						<div className={classes["input-container"]} data-value={value} data-is-errored={this.hasError().toString()}>
-						readOnly={this.props.readonly}
+							<textarea
-						onFocus={this.onFocus}
+								onChange={this.onChange}
-						onBlur={this.onBlur}
+								className={classnames(classes["input"], this.props.className)}
-					/>
+								placeholder={this.props.placeholder}
-					<div className={classes["fake-placeholder"]}>
+								value={value}
-						{this.props.placeholder} {!this.props.required && " (Facultatif)"}
+								onFocus={this.onFocus}
-					</div>
+								onBlur={this.onBlur}
-					{this.hasError() && <div className={classes["errors-container"]}>{this.renderErrors()}</div>}
+								name={this.props.name}
+								disabled={this.props.disabled}
+							/>
+						</div>
+					</label>
 				</div>
+				{this.hasError() && <div className={classes["errors-container"]}>{this.renderErrors()}</div>}
 			</Typography>
 		);
 	}
-
-	public override componentDidMount() {
-		this.setState({
-			value: this.props.defaultValue ?? "",
-		});
-	}
 }

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

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

src/front/Components/Elements/NumberPicker/classes.module.scss

@@ -4,16 +4,20 @@
 	align-items: center;
 	width: fit-content;
 	border: 1px solid #e7e7e7;
-	padding: 24px;
+	padding: var(--spacing-1-5, 12px) var(--spacing-md, 16px);
-
+	gap: var(--spacing-2, 16px);
 	.button {
 		border: none;
 		background: none;
+		padding: 0;
+		height: 24px;
+		width: 24px;
 		cursor: pointer;
 	}
 
 	.input {
-		width: 50px;
+		width: 40px;
+		height: 40px;
 		text-align: center;
 		border: none;
 	}

src/front/Components/Elements/NumberPicker/index.tsx

@@ -35,11 +35,11 @@ export default function NumberPicker(props: IProps) {
 	return (
 		<div className={classes["root"]}>
 			<button onClick={handleMinus} disabled={min && value <= min ? true : false} className={classes["button"]}>
-				<MinusIcon width="20" height="20" />
+				<MinusIcon width="24" height="24" />
 			</button>
 			<input type="number" value={value} onChange={handleChange} disabled={disabled} className={classes["input"]} />
 			<button onClick={handlePlus} disabled={max && value >= max ? true : false} className={classes["button"]}>
-				<PlusIcon width="20" height="20" />
+				<PlusIcon width="24" height="24" />
 			</button>
 		</div>
 	);

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;

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

@@ -13,6 +13,9 @@ 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 Form from "@Front/Components/DesignSystem/Form";
+import TextField from "@Front/Components/DesignSystem/Form/TextField";
+import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
 
 export default function DesignSystem() {
 	const { isOpen, open, close } = useOpenable();
@@ -64,6 +67,15 @@ export default function DesignSystem() {
 			<Newsletter isOpen />
 			<div className={classes["root"]}>
 				<div className={classes["components"]}>
+					<Typography typo={ETypo.TEXT_LG_BOLD}>Inputs</Typography>
+					<Form className={classes["inputs"]}>
+						<TextField label="Label" placeholder="Placeholder" canCopy />
+						<TextField label="Without copy" placeholder="Placeholder" />
+						<TextField label="Disabled" placeholder="Placeholder" disabled canCopy />
+						<TextField label="Disabled without copy" placeholder="Placeholder" disabled />
+						<TextAreaField label="Textarea" placeholder="Placeholder" />
+					</Form>
+
 					<Typography typo={ETypo.TEXT_LG_BOLD}>Modal</Typography>
 					<Button onClick={open}>Open Modal</Button>
 					<Modal

src/front/Components/Layouts/Folder/CreateFolder/index.tsx

@@ -5,8 +5,8 @@ import Users from "@Front/Api/LeCoffreApi/Notary/Users/Users";
 import Button from "@Front/Components/DesignSystem/Button";
 import Form from "@Front/Components/DesignSystem/Form";
 import SelectField, { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
-import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
+import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
 import MultiSelect from "@Front/Components/DesignSystem/MultiSelect";
 import RadioBox from "@Front/Components/DesignSystem/RadioBox";
 import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";

src/front/Components/Layouts/Folder/UpdateFolderMetadata/index.tsx

@@ -87,7 +87,7 @@ export default function UpdateFolderMetadata() {
 	const defaultValue = openingDate.toISOString().split("T")[0];
 
 	return (
-		<DefaultDoubleSidePage title={"Ajouter client(s)"} image={backgroundImage}>
+		<DefaultDoubleSidePage title={"Ajouter client(s)"} image={backgroundImage} showHeader>
 			<div className={classes["root"]}>
 				<div className={classes["back-arrow"]}>
 					<BackArrow url={backwardPath} />