4nk/lecoffre-front
4
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Merge branch 'dev' of github.com:smart-chain-fr/leCoffre-front into dev

Browse Source
This commit is contained in:
Max S 2024-07-29 15:10:13 +02:00
commit a33fc570ea
14 changed files with 267 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/front/Assets/Icons/question-mark-circle.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.87891 7.51884C11.0505 6.49372 12.95 6.49372 14.1215 7.51884C15.2931 8.54397 15.2931 10.206 14.1215 11.2312C13.9176 11.4096 13.6917 11.5569 13.4513 11.6733C12.7056 12.0341 12.0002 12.6716 12.0002 13.5V14.25M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12ZM12 17.25H12.0075V17.2575H12V17.25Z" stroke="#24282E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 555 B

92
src/front/Components/DesignSystem/CheckBox/classes.module.scss
View File

@ -3,43 +3,75 @@
.root { .root {
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: flex-start;
&.disabled {
cursor: not-allowed;
}
input[type="checkbox"] { color: var(--text-primary, #24282e);
appearance: none; font-size: 16px;
background-color: transparent; font-style: normal;
width: 16px; font-weight: var(--font-text-weight-regular, 400);
height: 16px; line-height: normal;
border: 1px solid var(--color-secondary-500); letter-spacing: 0.08px;
border-radius: 2px; gap: var(--Radius-lg, 16px);
margin-right: 16px;
display: grid;
place-content: center;
&:disabled { .content {
cursor: not-allowed; cursor: pointer;
display: flex;
flex-direction: column;
.label {
color: var(--text-primary, #24282e);
font-weight: var(--font-text-weight-regular, 400);
}
.description {
color: var(--text-secondary, #47535d);
font-weight: var(--font-text-weight-light, 300);
} }
} }
input[type="checkbox"]::before { &.disabled {
content: url("../../../Assets/Icons/check_white.svg"); opacity: var(--opacity-disabled, 0.3);
place-content: flex-start;
display: grid;
width: 16px;
height: 16px;
background-color: var(--color-secondary-500);
border-radius: 2px;
transform: scale(0);
} }
input[type="checkbox"]:checked::before { input[type="checkbox"] {
transform: scale(1); cursor: pointer;
display: flex;
width: 20px;
height: 20px;
flex-direction: column;
align-items: flex-start;
margin-right: 16px;
gap: 8px;
border-radius: var(--radius-xs, 2px);
border: 2px solid var(--select-option-unselected-default-border, #6d7e8a);
&:hover {
border: 2px solid var(--select-option-unselected-default-border, #6d7e8a);
}
&:active {
border: 2px solid var(--select-option-unselected-pressed-border, #3e474e);
}
&:disabled {
cursor: not-allowed;
border: 2px solid var(--select-option-unselected-default-border, #6d7e8a);
}
} }
.tooltip { // input[type="checkbox"]::before {
margin-left: 16px; // content: url("../../../Assets/Icons/check_white.svg");
} // place-content: flex-start;
// display: grid;
// width: 16px;
// height: 16px;
// background-color: var(--color-secondary-500);
// border-radius: 2px;
// transform: scale(0);
// }
// input[type="checkbox"]:checked::before {
// transform: scale(1);
// }
// .tooltip {
// }
} }

14
src/front/Components/DesignSystem/CheckBox/index.tsx
View File

@ -47,7 +47,19 @@ export default class CheckBox extends React.Component<IProps, IState> {
checked={this.state.checked} checked={this.state.checked}
disabled={this.props.disabled} disabled={this.props.disabled}
/> />
{this.props.option.label} <div className={classes["content"]}>
{this.props.option.label && (
<Typography className={classes["label"]} typo={ETypo.TEXT_SM_SEMIBOLD}>
{this.props.option.label}
</Typography>
)}
{this.props.option.description && (
<Typography className={classes["description"]} typo={ETypo.TEXT_SM_REGULAR}>
{this.props.option.description}
</Typography>
)}
</div>
{this.props.toolTip && <Tooltip className={classes["tooltip"]} text={this.props.toolTip} />} {this.props.toolTip && <Tooltip className={classes["tooltip"]} text={this.props.toolTip} />}
</label> </label>
</Typography> </Typography>

87
src/front/Components/DesignSystem/RadioBox/classes.module.scss
View File

@ -4,37 +4,74 @@
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
display: flex; display: flex;
align-items: center; align-items: flex-start;
color: var(--text-primary, #24282e);
font-size: 16px;
font-style: normal;
font-weight: var(--font-text-weight-regular, 400);
line-height: normal;
letter-spacing: 0.08px;
gap: var(--Radius-lg, 16px);
.content {
cursor: pointer;
display: flex;
flex-direction: column;
.label {
color: var(--text-primary, #24282e);
font-weight: var(--font-text-weight-regular, 400);
}
.description {
color: var(--text-secondary, #47535d);
font-weight: var(--font-text-weight-light, 300);
}
}
&.disabled {
opacity: var(--opacity-disabled, 0.3);
}
input[type="radio"] { input[type="radio"] {
appearance: none; cursor: pointer;
background-color: transparent; width: 20px;
width: 15px; height: 20px;
height: 15px; border-radius: var(--radius-full, 360px);
border: 1px solid var(--color-secondary-500); border: 2px solid var(--select-option-unselected-default-border, #6d7e8a);
border-radius: 100px;
margin-right: 16px; margin-right: 16px;
display: flex; display: flex;
align-items: center; align-items: flex-start;
justify-content: center; flex-direction: column;
margin-top: auto; gap: 8px;
margin-bottom: auto;
&:hover {
border: 2px solid var(--select-option-unselected-default-border, #6d7e8a);
}
&:active {
border: 2px solid var(--select-option-unselected-pressed-border, #3e474e);
}
&:disabled {
cursor: not-allowed;
border: 2px solid var(--select-option-unselected-default-border, #6d7e8a);
}
} }
input[type="radio"]::before { // input[type="radio"]::before {
content: ""; // content: "";
width: 11px; // width: 11px;
height: 11px; // height: 11px;
background-color: var(--color-secondary-500); // background-color: var(--color-secondary-500);
border-radius: 100px; // border-radius: 100px;
transform: scale(0); // transform: scale(0);
} // }
input[type="radio"]:checked::before { // input[type="radio"]:checked::before {
transform: scale(1); // transform: scale(1);
} // }
.tooltip { // .tooltip {
margin-left: 16px; // margin-left: 16px;
} // }
} }

17
src/front/Components/DesignSystem/RadioBox/index.tsx
View File

@ -5,7 +5,6 @@ import Typography, { ETypo, ETypoColor } from "../Typography";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
type IProps = { type IProps = {
children: React.ReactNode;
name: string; name: string;
toolTip?: string; toolTip?: string;
checked?: boolean; checked?: boolean;
@ -13,6 +12,8 @@ type IProps = {
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void; onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
value: string; value: string;
disabled: boolean; disabled: boolean;
description?: string;
label?: string;
}; };
export default class RadioBox extends React.Component<IProps> { export default class RadioBox extends React.Component<IProps> {
@ -32,7 +33,19 @@ export default class RadioBox extends React.Component<IProps> {
value={this.props.value} value={this.props.value}
disabled={this.props.disabled} disabled={this.props.disabled}
/> />
{this.props.children} <div className={classes["content"]}>
{this.props.label && (
<Typography className={classes["label"]} typo={ETypo.TEXT_SM_SEMIBOLD}>
{this.props.label}
</Typography>
)}
{this.props.description && (
<Typography className={classes["description"]} typo={ETypo.TEXT_SM_REGULAR}>
{this.props.description}
</Typography>
)}
</div>
{this.props.toolTip && <Tooltip className={classes["tooltip"]} text={this.props.toolTip} />} {this.props.toolTip && <Tooltip className={classes["tooltip"]} text={this.props.toolTip} />}
</label> </label>
</Typography> </Typography>

5
src/front/Components/DesignSystem/ToolTip/index.tsx
View File

@ -1,4 +1,5 @@
import ToolTipIcon from "@Assets/Icons/tool-tip.svg"; // import ToolTipIcon from "@Assets/Icons/tool-tip.svg";
import QuestionMark from "@Assets/Icons/question-mark-circle.svg";
import styled from "@emotion/styled"; import styled from "@emotion/styled";
import TooltipMUI, { tooltipClasses, TooltipProps } from "@mui/material/Tooltip"; import TooltipMUI, { tooltipClasses, TooltipProps } from "@mui/material/Tooltip";
import Image from "next/image"; import Image from "next/image";
@ -48,7 +49,7 @@ export default class Tooltip extends React.Component<IProps, IState> {
return ( return (
<LightTooltip title={this.props.text} placement="top" arrow> <LightTooltip title={this.props.text} placement="top" arrow>
<span className={this.props.className} style={!this.props.isNotFlex ? { display: "flex" } : {}}> <span className={this.props.className} style={!this.props.isNotFlex ? { display: "flex" } : {}}>
<Image src={ToolTipIcon} alt="toolTip icon" /> <Image src={QuestionMark} alt="toolTip icon" />
</span> </span>
</LightTooltip> </LightTooltip>
); );

61
src/front/Components/Layouts/DesignSystem/index.tsx
View File

@ -21,10 +21,20 @@ import NumberPicker from "@Front/Components/Elements/NumberPicker";
import Tabs from "@Front/Components/Elements/Tabs"; import Tabs from "@Front/Components/Elements/Tabs";
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate"; import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
import useOpenable from "@Front/Hooks/useOpenable"; import useOpenable from "@Front/Hooks/useOpenable";
import { ArchiveBoxIcon, ArrowLongLeftIcon, ArrowLongRightIcon, EllipsisHorizontalIcon, PencilSquareIcon, UsersIcon, XMarkIcon } from "@heroicons/react/24/outline"; import {
ArchiveBoxIcon,
ArrowLongLeftIcon,
ArrowLongRightIcon,
EllipsisHorizontalIcon,
PencilSquareIcon,
UsersIcon,
XMarkIcon,
} from "@heroicons/react/24/outline";
import { useCallback, useMemo, useState } from "react"; import { useCallback, useMemo, useState } from "react";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import CheckboxesInputElement from "@Front/Components/DesignSystem/CheckBox";
import RadioBox from "@Front/Components/DesignSystem/RadioBox";
export default function DesignSystem() { export default function DesignSystem() {
const { isOpen, open, close } = useOpenable(); const { isOpen, open, close } = useOpenable();
@ -936,6 +946,55 @@ export default function DesignSystem() {
variant={EAlertVariant.NEUTRAL} variant={EAlertVariant.NEUTRAL}
/> />
</div> </div>
<div className={classes["rows"]}>
<CheckboxesInputElement
option={{
label: "Default",
value: "all",
description: "Description",
}}
toolTip="test"
/>
<CheckboxesInputElement
option={{
label: "Checked",
value: "all",
description: "Description",
}}
toolTip="test"
checked={true}
/>
<CheckboxesInputElement
option={{
label: "Disabled",
value: "all",
description: "Description",
}}
toolTip="test"
disabled={true}
/>
</div>
<div className={classes["rows"]}>
<RadioBox name="document" value={"new client"} description="Test" label="Créer un document" toolTip="test" />
<RadioBox
name="document"
value={"new client"}
description="Test"
label="Créer un document"
toolTip="test"
defaultChecked={true}
/>
<RadioBox
name="document"
value={"new client"}
description="Test"
label="Créer un document"
toolTip="test"
disabled={true}
/>
</div>
<Footer /> <Footer />
</div> </div>
</DefaultTemplate> </DefaultTemplate>

12
src/front/Components/Layouts/Folder/AddClientToFolder/index.tsx
View File

@ -190,18 +190,18 @@ export default function AddClientToFolder(props: IProps) {
name="client" name="client"
onChange={onExistingClientSelected} onChange={onExistingClientSelected}
checked={selectedOption === "existing_customer"} checked={selectedOption === "existing_customer"}
value={"existing client"}> value={"existing client"}
<Typography typo={ETypo.TEXT_LG_REGULAR}>Client existant</Typography> label="Client existant"
</RadioBox> />
)} )}
<RadioBox <RadioBox
name="client" name="client"
onChange={onNewClientSelected} onChange={onNewClientSelected}
checked={selectedOption === "new_customer"} checked={selectedOption === "new_customer"}
value={"new client"}> value={"new client"}
<Typography typo={ETypo.TEXT_LG_REGULAR}>Nouveau client</Typography> label="Nouveau client"
</RadioBox> />
</div> </div>
<Form className={classes["form"]} onSubmit={onFormSubmit}> <Form className={classes["form"]} onSubmit={onFormSubmit}>

21
src/front/Components/Layouts/Folder/AskDocuments/ParameterDocuments/index.tsx
View File

@ -6,7 +6,6 @@ import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
import TextField from "@Front/Components/DesignSystem/Form/TextField"; import TextField from "@Front/Components/DesignSystem/Form/TextField";
import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm"; import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
import RadioBox from "@Front/Components/DesignSystem/RadioBox"; import RadioBox from "@Front/Components/DesignSystem/RadioBox";
import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
import { DocumentType, OfficeFolder } from "le-coffre-resources/dist/Notary"; import { DocumentType, OfficeFolder } from "le-coffre-resources/dist/Notary";
import { ChangeEvent, useCallback, useEffect, useState } from "react"; import { ChangeEvent, useCallback, useEffect, useState } from "react";
@ -128,13 +127,21 @@ export default function ParameterDocuments(props: IProps) {
confirmText={"Ajouter"}> confirmText={"Ajouter"}>
<div className={classes["add-document-form-container"]}> <div className={classes["add-document-form-container"]}>
<div className={classes["radiobox-container"]}> <div className={classes["radiobox-container"]}>
<RadioBox name="document" onChange={selectEditMode} checked={addOrEditDocument === "edit"} value={"existing client"}> <RadioBox
<Typography typo={ETypo.TEXT_LG_REGULAR}>Document existant</Typography> name="document"
</RadioBox> onChange={selectEditMode}
checked={addOrEditDocument === "edit"}
value={"existing client"}
label="Document existant"
/>
<RadioBox name="document" onChange={selectAddMode} checked={addOrEditDocument === "add"} value={"new client"}> <RadioBox
<Typography typo={ETypo.TEXT_LG_REGULAR}>Créer un document</Typography> name="document"
</RadioBox> onChange={selectAddMode}
checked={addOrEditDocument === "add"}
value={"new client"}
label="Créer un document"
/>
</div> </div>
{addOrEditDocument === "add" && ( {addOrEditDocument === "add" && (
<> <>

19
src/front/Components/Layouts/Folder/CreateFolder/index.tsx
View File

@ -169,12 +169,19 @@ export default function CreateFolder(): JSX.Element {
Donner l'accès au dossier Donner l'accès au dossier
</Typography> </Typography>
<div className={classes["radio-container"]}> <div className={classes["radio-container"]}>
<RadioBox name="file_access" defaultChecked onChange={radioOnChange} value="whole_office"> <RadioBox
Sélectionner tout l'office name="file_access"
</RadioBox> defaultChecked
<RadioBox name="file_access" onChange={radioOnChange} value="select_collaborators"> onChange={radioOnChange}
Sélectionner certains collaborateurs value="whole_office"
</RadioBox> label="Sélectionner tout l'office"
/>
<RadioBox
name="file_access"
onChange={radioOnChange}
value="select_collaborators"
label="Sélectionner certains collaborateurs"
/>
</div> </div>
{folderAccessType === "select_collaborators" && ( {folderAccessType === "select_collaborators" && (
<div className={classes["collaborators-container"]}> <div className={classes["collaborators-container"]}>

10
src/front/Components/Layouts/Folder/UpdateFolderCollaborators/index.tsx
View File

@ -145,16 +145,14 @@ export default function UpdateFolderCollaborators() {
name="office" name="office"
value={ERadioBoxValue.ALL} value={ERadioBoxValue.ALL}
defaultChecked={defaultCheckedAllOffice} defaultChecked={defaultCheckedAllOffice}
onChange={onSelectedOptionAllOffice}> onChange={onSelectedOptionAllOffice}
Tout l'office label="Tout l'office"></RadioBox>
</RadioBox>
<RadioBox <RadioBox
name="office" name="office"
value={ERadioBoxValue.SELECTION} value={ERadioBoxValue.SELECTION}
defaultChecked={!defaultCheckedAllOffice} defaultChecked={!defaultCheckedAllOffice}
onChange={onSelectedOptionSpecific}> onChange={onSelectedOptionSpecific}
Sélectionner des collaborateurs label="Sélectionner des collaborateurs"></RadioBox>
</RadioBox>
</div> </div>
{selectedOption === ERadioBoxValue.SELECTION && ( {selectedOption === ERadioBoxValue.SELECTION && (

10
src/front/Components/Layouts/Subscription/Components/SubscribeCheckoutTicket/index.tsx
View File

@ -83,17 +83,15 @@ export default function SubscribeCheckoutTicket(props: IProps) {
value={EPaymentFrequencyFront.yearly.toString()} value={EPaymentFrequencyFront.yearly.toString()}
onChange={handleFrequencyChange} onChange={handleFrequencyChange}
defaultChecked={paymentFrequency === EPaymentFrequencyFront.yearly} defaultChecked={paymentFrequency === EPaymentFrequencyFront.yearly}
disabled={props.disableInputs}> disabled={props.disableInputs}
<Typography typo={ETypo.TEXT_LG_REGULAR}>Annuel</Typography> label="Annuel"></RadioBox>
</RadioBox>
<RadioBox <RadioBox
name="paymentFrequency" name="paymentFrequency"
value={EPaymentFrequencyFront.monthly.toString()} value={EPaymentFrequencyFront.monthly.toString()}
onChange={handleFrequencyChange} onChange={handleFrequencyChange}
defaultChecked={paymentFrequency === EPaymentFrequencyFront.monthly} defaultChecked={paymentFrequency === EPaymentFrequencyFront.monthly}
disabled={props.disableInputs}> disabled={props.disableInputs}
<Typography typo={ETypo.TEXT_LG_REGULAR}>Mensuel</Typography> label="Mensuel"></RadioBox>
</RadioBox>
</div> </div>
<div className={classes["separator"]} /> <div className={classes["separator"]} />
<div className={classes["container-line"]}> <div className={classes["container-line"]}>

10
src/front/Components/Layouts/Subscription/Components/SubscribeIllimityComponent/index.tsx
View File

@ -113,16 +113,14 @@ export default function SubscribeIllimityComponent({ hasNavTab = true }: IProps)
name="paymentFrequencyInSubscription" name="paymentFrequencyInSubscription"
value={EPaymentFrequency.yearly.toString()} value={EPaymentFrequency.yearly.toString()}
onChange={handleFrequencyChange} onChange={handleFrequencyChange}
defaultChecked={paymentFrequency === EPaymentFrequency.yearly}> defaultChecked={paymentFrequency === EPaymentFrequency.yearly}
<Typography typo={ETypo.TEXT_LG_REGULAR}>Annuel</Typography> label="Annuel"></RadioBox>
</RadioBox>
<RadioBox <RadioBox
name="paymentFrequencyInSubscription" name="paymentFrequencyInSubscription"
value={EPaymentFrequency.monthly.toString()} value={EPaymentFrequency.monthly.toString()}
onChange={handleFrequencyChange} onChange={handleFrequencyChange}
defaultChecked={paymentFrequency === EPaymentFrequency.monthly}> defaultChecked={paymentFrequency === EPaymentFrequency.monthly}
<Typography typo={ETypo.TEXT_LG_REGULAR}>Mensuel</Typography> label="Mensuel"></RadioBox>
</RadioBox>
</div> </div>
<div className={classes["separator"]} /> <div className={classes["separator"]} />
<div className={classes["container-line"]}> <div className={classes["container-line"]}>

10
src/front/Components/Layouts/Subscription/Components/SubscribeStandardComponent/index.tsx
View File

@ -104,16 +104,14 @@ export default function SubscribeStandardComponent({ hasNavTab = true }: IProps)
name="paymentFrequencyInSubscription" name="paymentFrequencyInSubscription"
value={EPaymentFrequency.yearly.toString()} value={EPaymentFrequency.yearly.toString()}
onChange={handleFrequencyChange} onChange={handleFrequencyChange}
defaultChecked={paymentFrequency === EPaymentFrequency.yearly}> defaultChecked={paymentFrequency === EPaymentFrequency.yearly}
<Typography typo={ETypo.TEXT_LG_REGULAR}>Annuel</Typography> label="Annuel"></RadioBox>
</RadioBox>
<RadioBox <RadioBox
name="paymentFrequencyInSubscription" name="paymentFrequencyInSubscription"
value={EPaymentFrequency.monthly.toString()} value={EPaymentFrequency.monthly.toString()}
onChange={handleFrequencyChange} onChange={handleFrequencyChange}
defaultChecked={paymentFrequency === EPaymentFrequency.monthly}> defaultChecked={paymentFrequency === EPaymentFrequency.monthly}
<Typography typo={ETypo.TEXT_LG_REGULAR}>Mensuel</Typography> label="Mensuel"></RadioBox>
</RadioBox>
</div> </div>
<div className={classes["separator"]} /> <div className={classes["separator"]} />
<div className={classes["container-line"]}> <div className={classes["container-line"]}>