✨ CircleProgress

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

@@ -0,0 +1,24 @@
+@import "@Themes/constants.scss";
+
+.root {
+	display: flex;
+	align-items: center;
+	gap: 24px;
+
+	svg {
+		width: 100%;
+		height: 100%;
+		transform: rotate(-90deg);
+
+		.circleBackground {
+			fill: none;
+			stroke: var(--background-elevation-2);
+		}
+
+		.circleProgress {
+			fill: none;
+			stroke: var(--color-secondary-500);
+			transition: stroke-dashoffset 0.35s;
+		}
+	}
+}

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

@@ -0,0 +1,61 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+
+import Typography, { ETypo, ETypoColor } from "../Typography";
+import classes from "./classes.module.scss";
+
+type IProps = {
+	percentage: number;
+};
+export default function CircleProgress(props: IProps) {
+	const { percentage } = props;
+
+	const [animatedProgress, setAnimatedProgress] = useState(0);
+	const requestRef = useRef<number>();
+
+	const animate = useCallback(() => {
+		setAnimatedProgress((prev) => {
+			if (prev < percentage) {
+				return prev + 1;
+			} else {
+				if (requestRef.current) {
+					cancelAnimationFrame(requestRef.current);
+				}
+				return prev;
+			}
+		});
+		requestRef.current = requestAnimationFrame(animate);
+	}, [percentage]);
+
+	useEffect(() => {
+		requestRef.current = requestAnimationFrame(animate);
+		return () => {
+			if (requestRef.current) {
+				cancelAnimationFrame(requestRef.current);
+			}
+		};
+	}, [animate, percentage]);
+
+	const radius = 11;
+	const circumference = 2 * Math.PI * radius;
+	const offset = circumference - (animatedProgress / 100) * circumference;
+
+	return (
+		<div className={classes["root"]}>
+			<svg xmlns="http://www.w3.org/2000/svg" width="27" height="27" viewBox="0 0 27 27" fill="none">
+				<circle className={classes["circleBackground"]} cx="13.5" cy="13.5" r={radius} strokeWidth="3" />
+				<circle
+					className={classes["circleProgress"]}
+					cx="13.5"
+					cy="13.5"
+					r={radius}
+					strokeWidth="3"
+					strokeDasharray={circumference}
+					strokeDashoffset={offset}
+				/>
+			</svg>
+			<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_NEUTRAL_950}>
+				{percentage}%
+			</Typography>
+		</div>
+	);
+}

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

@@ -72,6 +72,17 @@
 			margin-bottom: 24px;
 		}
 	}
+
+	.components {
+		display: flex;
+		flex-direction: column;
+		gap: 24px;
+
+		.rows {
+			display: flex;
+			gap: 16px;
+		}
+	}
 }
 
 .buttons {

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

@@ -7,6 +7,7 @@ import classes from "./classes.module.scss";
 import Newletter from "@Front/Components/DesignSystem/Newsletter";
 import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Tag, { ETagColor, ETagVariant } from "@Front/Components/DesignSystem/Tag";
+import CircleProgress from "@Front/Components/DesignSystem/CircleProgress";
 
 type IProps = {};
 type IState = {
@@ -28,6 +29,31 @@ export default class Folder extends BasePage<IProps, IState> {
 		return (
 			<DefaultNotaryDashboard title={"Dossier"} onSelectedFolder={this.onSelectedFolder} mobileBackText={"Liste des dossiers"}>
 				<div className={classes["root"]}>
+					<div className={classes["components"]}>
+						<Typography typo={ETypo.TEXT_LG_BOLD}>Circle Progress</Typography>
+						<div className={classes["rows"]}>
+							<CircleProgress percentage={0} />
+							<CircleProgress percentage={30} />
+							<CircleProgress percentage={60} />
+							<CircleProgress percentage={100} />
+						</div>
+						<Typography typo={ETypo.TEXT_LG_BOLD}>Tags</Typography>
+						<div className={classes["rows"]}>
+							<Tag color={ETagColor.INFO} variant={ETagVariant.REGULAR} label="Info" />
+							<Tag color={ETagColor.SUCCESS} variant={ETagVariant.REGULAR} label="Success" />
+							<Tag color={ETagColor.WARNING} variant={ETagVariant.REGULAR} label="Warning" />
+							<Tag color={ETagColor.ERROR} variant={ETagVariant.REGULAR} label="Error" />
+						</div>
+
+						<Typography typo={ETypo.TEXT_LG_BOLD}>Table Tags</Typography>
+						<div className={classes["rows"]}>
+							<Tag color={ETagColor.INFO} variant={ETagVariant.SEMI_BOLD} label="INFO" />
+							<Tag color={ETagColor.SUCCESS} variant={ETagVariant.SEMI_BOLD} label="SUCCESS" />
+							<Tag color={ETagColor.WARNING} variant={ETagVariant.SEMI_BOLD} label="WARNING" />
+							<Tag color={ETagColor.ERROR} variant={ETagVariant.SEMI_BOLD} label="ERROR" />
+						</div>
+					</div>
+
 					<div className={classes["no-folder-selected"]}>
 						<Typography typo={ETypo.TITLE_H1}>Informations du dossier</Typography>
 						<div className={classes["choose-a-folder"]}>
@@ -97,21 +123,8 @@ export default class Folder extends BasePage<IProps, IState> {
 									INFO
 								</Button>
 							</div>
-
-							<div className={classes["buttons"]}>
-								<Tag color={ETagColor.INFO} variant={ETagVariant.REGULAR} label="Info" />
-								<Tag color={ETagColor.SUCCESS} variant={ETagVariant.REGULAR} label="Success" />
-								<Tag color={ETagColor.WARNING} variant={ETagVariant.REGULAR} label="Warning" />
-								<Tag color={ETagColor.ERROR} variant={ETagVariant.REGULAR} label="Error" />
-							</div>
-							<div className={classes["buttons"]}>
-								<Tag color={ETagColor.INFO} variant={ETagVariant.SEMI_BOLD} label="INFO" />
-								<Tag color={ETagColor.SUCCESS} variant={ETagVariant.SEMI_BOLD} label="SUCCESS" />
-								<Tag color={ETagColor.WARNING} variant={ETagVariant.SEMI_BOLD} label="WARNING" />
-								<Tag color={ETagColor.ERROR} variant={ETagVariant.SEMI_BOLD} label="ERROR" />
-							</div>
 						</div>
-						<Newletter isOpen />
+						<Newletter isOpen={false} />
 					</div>
 				</div>
 			</DefaultNotaryDashboard>