✨ Page almost done

src/front/Components/DesignSystem/Form/Elements/InputField/classes.module.scss

@@ -26,31 +26,27 @@
 		border: 1px solid $grey-medium;
 
 		&:focus {
-			~.fake-placeholder {
+			~ .fake-placeholder {
 				transform: translateY(-35px);
-				transition: transform 0.3s ease-in-out;
 			}
 		}
 
-		&:not([value=""]) {
-			~.fake-placeholder {
+		&:not([data-value=""]) {
+			~ .fake-placeholder {
 				transform: translateY(-35px);
-				transition: transform;
 			}
 		}
 
 		&[type="number"] {
 			&:focus {
-				~.fake-placeholder {
+				~ .fake-placeholder {
 					transform: translateY(-35px);
-					transition: transform 0.3s ease-in-out;
 				}
 			}
 
-			&:not([value=""]) {
-				~.fake-placeholder {
+			&:not([data-value=""]) {
+				~ .fake-placeholder {
 					transform: translateY(-35px);
-					transition: transform;
 				}
 			}
 
@@ -75,14 +71,13 @@
 			}
 		}
 
-		&:not([value=""]) {
-			~.fake-placeholder {
+		&:not([data-value=""]) {
+			~ .fake-placeholder {
 				transform: translateY(-35px);
-				transition: transform 0.3s ease-in-out;
 			}
 		}
 
-		~.fake-placeholder {
+		~ .fake-placeholder {
 			z-index: 2;
 			top: 35%;
 			margin-left: 8px;
@@ -90,6 +85,7 @@
 			pointer-events: none;
 			position: absolute;
 			background: $white;
+			transition: transform 0.3s ease-in-out;
 		}
 	}
 }
@@ -106,7 +102,7 @@
 	height: 70px;
 	border: 1px solid $grey-medium;
 
-	~.fake-placeholder {
+	~ .fake-placeholder {
 		z-index: 2;
 		top: -12px;
 		margin-left: 8px;
@@ -114,6 +110,19 @@
 		pointer-events: none;
 		position: absolute;
 		background: $white;
-		// transform: translateY(-35px);
+		transform: translateY(35px);
+		transition: transform 0.3s ease-in-out;
+	}
+
+	&:focus {
+		~ .fake-placeholder {
+			transform: translateY(0px);
+		}
+	}
+
+	&:not([data-value=""]) {
+		~ .fake-placeholder {
+			transform: translateY(0px);
+		}
 	}
 }

src/front/Components/DesignSystem/Form/Elements/InputField/index.tsx

@@ -40,7 +40,7 @@ export default class InputField extends BaseField<IProps> {
 							required={this.props.required}
 							ref={this.props.fieldRef}
 							rows={4}
-							value={value}
+							data-value={value}
 							onChange={this.onChange}
 							data-has-validation-errors={this.state.errors.length > 0}
 							className={
@@ -61,7 +61,7 @@ export default class InputField extends BaseField<IProps> {
 							pattern={pattern}
 							onChange={this.onChange}
 							onBlur={this.onBlur}
-							value={value}
+							data-value={value}
 							data-has-validation-errors={this.state.errors.length > 0}
 							className={
 								this.props.className ? [classes["input"], classes[this.props.className]].join(" ") : classes["input"]

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

@@ -14,7 +14,7 @@ type IProps = {
 export default class RadioBox extends React.Component<IProps> {
 	public override render(): JSX.Element {
 		return (
-			<Typography typo={ITypo.P_ERR_16} color={ITypoColor.BLACK}>
+			<Typography typo={ITypo.P_ERR_18} color={ITypoColor.BLACK}>
 				<label className={classes["root"]}>
 					<input type="radio" name={this.props.name} defaultChecked={this.props.defaultChecked} onChange={this.props.onChange} />
 					{this.props.children}

src/front/Components/DesignSystem/Typography/classes.module.scss

@@ -125,4 +125,8 @@
 	&.black {
 		color: $black;
 	}
+
+	&.purple-flash {
+		color: var(--purple-flash);
+	}
 }

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

@@ -6,6 +6,7 @@ type IProps = {
 	typo: ITypo;
 	children: React.ReactNode;
 	color?: ITypoColor;
+	className?: string;
 };
 type IState = {};
 
@@ -33,12 +34,19 @@ export enum ITypoColor {
 	RE_HOVER = "re-hover",
 	GREY = "grey",
 	BLACK = "black",
+	PURPLE_FLASH = "purple-flash",
 }
 
 export default class Typography extends React.Component<IProps, IState> {
 	public override render(): JSX.Element {
 		return (
-			<div className={classNames(classes["root"], classes[this.props.typo], classes[this.props.color ?? ""])}>
+			<div
+				className={classNames(
+					classes["root"],
+					classes[this.props.typo],
+					classes[this.props.color ?? ""],
+					this.props.className ?? "",
+				)}>
 				{this.props.children}
 			</div>
 		);

src/front/Components/LayoutTemplates/DefaultDoubleSidePage/classes.module.scss

@@ -9,6 +9,10 @@
 		display: flex;
 		height: calc(100vh - 83px);
 
+		.side-left {
+			max-height: 100vh;
+			overflow: auto;
+		}
 		.sides {
 			width: 50%;
 

src/front/Components/LayoutTemplates/DefaultDoubleSidePage/index.tsx

@@ -29,7 +29,7 @@ export default class DefaultDoubleSidePage extends React.Component<IProps, IStat
 			<div className={classes["root"]}>
 				<Header isUserConnected={false} />
 				<div className={classes["content"]}>
-					<div className={classes["sides"]}>{this.props.children}</div>
+					<div className={classNames(classes["sides"], classes["side-left"])}>{this.props.children}</div>
 					{this.props.type === "image" && (
 						<div className={classNames(classes["sides"], classes["image-container"])}>
 							<Image alt={"right side image"} src={this.props.image} className={classes["image"]} />

src/front/Components/Layouts/Folder/CreateFolder/classes.module.scss

@@ -1,3 +1,29 @@
 .root {
 	margin: 64px 0 0 64px;
+	width: 530px;
+	.title {
+		margin-top: 24px;
+	}
+
+	.subtitle {
+		margin-top: 32px;
+	}
+
+	.form-container {
+		margin-top: 16px;
+		display: flex;
+		flex-direction: column;
+		gap: 24px;
+	}
+
+	.access-container {
+		margin-top: 16px;
+
+		.radio-container {
+			margin-top: 16px;
+			display: flex;
+			flex-direction: column;
+			gap: 16px;
+		}
+	}
 }

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

@@ -4,6 +4,10 @@ import classes from "./classes.module.scss";
 import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
 import RightImage from "@Front/Assets/images/create-folder/right-image.png";
 import BackArrow from "@Front/Components/Elements/BackArrow";
+import Form from "@Front/Components/DesignSystem/Form";
+import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField";
+import Select from "@Front/Components/DesignSystem/Select";
+import RadioBox from "@Front/Components/DesignSystem/RadioBox";
 
 type IProps = {};
 type IState = {};
@@ -18,6 +22,39 @@ export default class CreateFolder extends BasePage<IProps, IState> {
 			<DefaultDoubleSidePage title={"Dossier"} image={RightImage} type="image">
 				<div className={classes["root"]}>
 					<BackArrow url="/" />
+					<Typography typo={ITypo.H1} color={ITypoColor.BLACK} className={classes["title"]}>
+						Créer un dossier
+					</Typography>
+					<Typography typo={ITypo.H3} color={ITypoColor.PURPLE_FLASH} className={classes["subtitle"]}>
+						Informations dossier
+					</Typography>
+					<Form>
+						<div className={classes["form-container"]}>
+							<InputField name="folder_number" fakeplaceholder="Numéro de dossier" type="number" />
+							<InputField name="entitled" fakeplaceholder="Intitulé" />
+							<Select
+								options={[
+									{ label: "Divorce", value: "divorce" },
+									{ label: "Succession", value: "succession" },
+									{ label: "Vente immobilière", value: "vente_immobiliere" },
+								]}
+								onChange={() => {}}
+								placeholder={"Type d’acte"}
+							/>
+							<InputField name="personal_note" fakeplaceholder="Note personnelle" textarea />
+						</div>
+						<div className={classes["access-container"]}>
+							<Typography typo={ITypo.H3} color={ITypoColor.PURPLE_FLASH}>
+								Accès au dossier
+							</Typography>
+							<div className={classes["radio-container"]}>
+								<RadioBox name="file_access" defaultChecked>
+									Sélectionner tout l'office
+								</RadioBox>
+								<RadioBox name="file_access">Sélectionner certains collaborateurs</RadioBox>
+							</div>
+						</div>
+					</Form>
 				</div>
 			</DefaultDoubleSidePage>
 		);