Merge branch 'dev' of github.com:smart-chain-fr/leCoffre-front into dev
This commit is contained in:
Max S
commit
a33fc570ea
3
src/front/Assets/Icons/question-mark-circle.svg
Normal file
3
src/front/Assets/Icons/question-mark-circle.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 555 B |
@ -3,43 +3,75 @@
|
||||
.root {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&.disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
align-items: flex-start;
|
||||
|
||||
input[type="checkbox"] {
|
||||
appearance: none;
|
||||
background-color: transparent;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1px solid var(--color-secondary-500);
|
||||
border-radius: 2px;
|
||||
margin-right: 16px;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
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);
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
.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);
|
||||
}
|
||||
}
|
||||
|
||||
input[type="checkbox"]::before {
|
||||
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);
|
||||
&.disabled {
|
||||
opacity: var(--opacity-disabled, 0.3);
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked::before {
|
||||
transform: scale(1);
|
||||
input[type="checkbox"] {
|
||||
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 {
|
||||
margin-left: 16px;
|
||||
}
|
||||
// input[type="checkbox"]::before {
|
||||
// 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 {
|
||||
// }
|
||||
}
|
||||
|
||||
@ -47,7 +47,19 @@ export default class CheckBox extends React.Component<IProps, IState> {
|
||||
checked={this.state.checked}
|
||||
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} />}
|
||||
</label>
|
||||
</Typography>
|
||||
|
||||
@ -4,37 +4,74 @@
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
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"] {
|
||||
appearance: none;
|
||||
background-color: transparent;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border: 1px solid var(--color-secondary-500);
|
||||
border-radius: 100px;
|
||||
cursor: pointer;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: var(--radius-full, 360px);
|
||||
border: 2px solid var(--select-option-unselected-default-border, #6d7e8a);
|
||||
margin-right: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
|
||||
&: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 {
|
||||
content: "";
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
background-color: var(--color-secondary-500);
|
||||
border-radius: 100px;
|
||||
transform: scale(0);
|
||||
}
|
||||
// input[type="radio"]::before {
|
||||
// content: "";
|
||||
// width: 11px;
|
||||
// height: 11px;
|
||||
// background-color: var(--color-secondary-500);
|
||||
// border-radius: 100px;
|
||||
// transform: scale(0);
|
||||
// }
|
||||
|
||||
input[type="radio"]:checked::before {
|
||||
transform: scale(1);
|
||||
}
|
||||
// input[type="radio"]:checked::before {
|
||||
// transform: scale(1);
|
||||
// }
|
||||
|
||||
.tooltip {
|
||||
margin-left: 16px;
|
||||
}
|
||||
// .tooltip {
|
||||
// margin-left: 16px;
|
||||
// }
|
||||
}
|
||||
|
||||
@ -5,7 +5,6 @@ import Typography, { ETypo, ETypoColor } from "../Typography";
|
||||
import classes from "./classes.module.scss";
|
||||
|
||||
type IProps = {
|
||||
children: React.ReactNode;
|
||||
name: string;
|
||||
toolTip?: string;
|
||||
checked?: boolean;
|
||||
@ -13,6 +12,8 @@ type IProps = {
|
||||
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
||||
value: string;
|
||||
disabled: boolean;
|
||||
description?: string;
|
||||
label?: string;
|
||||
};
|
||||
|
||||
export default class RadioBox extends React.Component<IProps> {
|
||||
@ -32,7 +33,19 @@ export default class RadioBox extends React.Component<IProps> {
|
||||
value={this.props.value}
|
||||
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} />}
|
||||
</label>
|
||||
</Typography>
|
||||
|
||||
@ -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 TooltipMUI, { tooltipClasses, TooltipProps } from "@mui/material/Tooltip";
|
||||
import Image from "next/image";
|
||||
@ -48,7 +49,7 @@ export default class Tooltip extends React.Component<IProps, IState> {
|
||||
return (
|
||||
<LightTooltip title={this.props.text} placement="top" arrow>
|
||||
<span className={this.props.className} style={!this.props.isNotFlex ? { display: "flex" } : {}}>
|
||||
<Image src={ToolTipIcon} alt="toolTip icon" />
|
||||
<Image src={QuestionMark} alt="toolTip icon" />
|
||||
</span>
|
||||
</LightTooltip>
|
||||
);
|
||||
|
||||
@ -21,10 +21,20 @@ import NumberPicker from "@Front/Components/Elements/NumberPicker";
|
||||
import Tabs from "@Front/Components/Elements/Tabs";
|
||||
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
|
||||
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 classes from "./classes.module.scss";
|
||||
import CheckboxesInputElement from "@Front/Components/DesignSystem/CheckBox";
|
||||
import RadioBox from "@Front/Components/DesignSystem/RadioBox";
|
||||
|
||||
export default function DesignSystem() {
|
||||
const { isOpen, open, close } = useOpenable();
|
||||
@ -936,6 +946,55 @@ export default function DesignSystem() {
|
||||
variant={EAlertVariant.NEUTRAL}
|
||||
/>
|
||||
</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 />
|
||||
</div>
|
||||
</DefaultTemplate>
|
||||
|
||||
@ -190,18 +190,18 @@ export default function AddClientToFolder(props: IProps) {
|
||||
name="client"
|
||||
onChange={onExistingClientSelected}
|
||||
checked={selectedOption === "existing_customer"}
|
||||
value={"existing client"}>
|
||||
<Typography typo={ETypo.TEXT_LG_REGULAR}>Client existant</Typography>
|
||||
</RadioBox>
|
||||
value={"existing client"}
|
||||
label="Client existant"
|
||||
/>
|
||||
)}
|
||||
|
||||
<RadioBox
|
||||
name="client"
|
||||
onChange={onNewClientSelected}
|
||||
checked={selectedOption === "new_customer"}
|
||||
value={"new client"}>
|
||||
<Typography typo={ETypo.TEXT_LG_REGULAR}>Nouveau client</Typography>
|
||||
</RadioBox>
|
||||
value={"new client"}
|
||||
label="Nouveau client"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Form className={classes["form"]} onSubmit={onFormSubmit}>
|
||||
|
||||
@ -6,7 +6,6 @@ import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
|
||||
import TextField from "@Front/Components/DesignSystem/Form/TextField";
|
||||
import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
|
||||
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 { ChangeEvent, useCallback, useEffect, useState } from "react";
|
||||
|
||||
@ -128,13 +127,21 @@ export default function ParameterDocuments(props: IProps) {
|
||||
confirmText={"Ajouter"}>
|
||||
<div className={classes["add-document-form-container"]}>
|
||||
<div className={classes["radiobox-container"]}>
|
||||
<RadioBox name="document" onChange={selectEditMode} checked={addOrEditDocument === "edit"} value={"existing client"}>
|
||||
<Typography typo={ETypo.TEXT_LG_REGULAR}>Document existant</Typography>
|
||||
</RadioBox>
|
||||
<RadioBox
|
||||
name="document"
|
||||
onChange={selectEditMode}
|
||||
checked={addOrEditDocument === "edit"}
|
||||
value={"existing client"}
|
||||
label="Document existant"
|
||||
/>
|
||||
|
||||
<RadioBox name="document" onChange={selectAddMode} checked={addOrEditDocument === "add"} value={"new client"}>
|
||||
<Typography typo={ETypo.TEXT_LG_REGULAR}>Créer un document</Typography>
|
||||
</RadioBox>
|
||||
<RadioBox
|
||||
name="document"
|
||||
onChange={selectAddMode}
|
||||
checked={addOrEditDocument === "add"}
|
||||
value={"new client"}
|
||||
label="Créer un document"
|
||||
/>
|
||||
</div>
|
||||
{addOrEditDocument === "add" && (
|
||||
<>
|
||||
|
||||
@ -169,12 +169,19 @@ export default function CreateFolder(): JSX.Element {
|
||||
Donner l'accès au dossier
|
||||
</Typography>
|
||||
<div className={classes["radio-container"]}>
|
||||
<RadioBox name="file_access" defaultChecked onChange={radioOnChange} value="whole_office">
|
||||
Sélectionner tout l'office
|
||||
</RadioBox>
|
||||
<RadioBox name="file_access" onChange={radioOnChange} value="select_collaborators">
|
||||
Sélectionner certains collaborateurs
|
||||
</RadioBox>
|
||||
<RadioBox
|
||||
name="file_access"
|
||||
defaultChecked
|
||||
onChange={radioOnChange}
|
||||
value="whole_office"
|
||||
label="Sélectionner tout l'office"
|
||||
/>
|
||||
<RadioBox
|
||||
name="file_access"
|
||||
onChange={radioOnChange}
|
||||
value="select_collaborators"
|
||||
label="Sélectionner certains collaborateurs"
|
||||
/>
|
||||
</div>
|
||||
{folderAccessType === "select_collaborators" && (
|
||||
<div className={classes["collaborators-container"]}>
|
||||
|
||||
@ -145,16 +145,14 @@ export default function UpdateFolderCollaborators() {
|
||||
name="office"
|
||||
value={ERadioBoxValue.ALL}
|
||||
defaultChecked={defaultCheckedAllOffice}
|
||||
onChange={onSelectedOptionAllOffice}>
|
||||
Tout l'office
|
||||
</RadioBox>
|
||||
onChange={onSelectedOptionAllOffice}
|
||||
label="Tout l'office"></RadioBox>
|
||||
<RadioBox
|
||||
name="office"
|
||||
value={ERadioBoxValue.SELECTION}
|
||||
defaultChecked={!defaultCheckedAllOffice}
|
||||
onChange={onSelectedOptionSpecific}>
|
||||
Sélectionner des collaborateurs
|
||||
</RadioBox>
|
||||
onChange={onSelectedOptionSpecific}
|
||||
label="Sélectionner des collaborateurs"></RadioBox>
|
||||
</div>
|
||||
|
||||
{selectedOption === ERadioBoxValue.SELECTION && (
|
||||
|
||||
@ -83,17 +83,15 @@ export default function SubscribeCheckoutTicket(props: IProps) {
|
||||
value={EPaymentFrequencyFront.yearly.toString()}
|
||||
onChange={handleFrequencyChange}
|
||||
defaultChecked={paymentFrequency === EPaymentFrequencyFront.yearly}
|
||||
disabled={props.disableInputs}>
|
||||
<Typography typo={ETypo.TEXT_LG_REGULAR}>Annuel</Typography>
|
||||
</RadioBox>
|
||||
disabled={props.disableInputs}
|
||||
label="Annuel"></RadioBox>
|
||||
<RadioBox
|
||||
name="paymentFrequency"
|
||||
value={EPaymentFrequencyFront.monthly.toString()}
|
||||
onChange={handleFrequencyChange}
|
||||
defaultChecked={paymentFrequency === EPaymentFrequencyFront.monthly}
|
||||
disabled={props.disableInputs}>
|
||||
<Typography typo={ETypo.TEXT_LG_REGULAR}>Mensuel</Typography>
|
||||
</RadioBox>
|
||||
disabled={props.disableInputs}
|
||||
label="Mensuel"></RadioBox>
|
||||
</div>
|
||||
<div className={classes["separator"]} />
|
||||
<div className={classes["container-line"]}>
|
||||
|
||||
@ -113,16 +113,14 @@ export default function SubscribeIllimityComponent({ hasNavTab = true }: IProps)
|
||||
name="paymentFrequencyInSubscription"
|
||||
value={EPaymentFrequency.yearly.toString()}
|
||||
onChange={handleFrequencyChange}
|
||||
defaultChecked={paymentFrequency === EPaymentFrequency.yearly}>
|
||||
<Typography typo={ETypo.TEXT_LG_REGULAR}>Annuel</Typography>
|
||||
</RadioBox>
|
||||
defaultChecked={paymentFrequency === EPaymentFrequency.yearly}
|
||||
label="Annuel"></RadioBox>
|
||||
<RadioBox
|
||||
name="paymentFrequencyInSubscription"
|
||||
value={EPaymentFrequency.monthly.toString()}
|
||||
onChange={handleFrequencyChange}
|
||||
defaultChecked={paymentFrequency === EPaymentFrequency.monthly}>
|
||||
<Typography typo={ETypo.TEXT_LG_REGULAR}>Mensuel</Typography>
|
||||
</RadioBox>
|
||||
defaultChecked={paymentFrequency === EPaymentFrequency.monthly}
|
||||
label="Mensuel"></RadioBox>
|
||||
</div>
|
||||
<div className={classes["separator"]} />
|
||||
<div className={classes["container-line"]}>
|
||||
|
||||
@ -104,16 +104,14 @@ export default function SubscribeStandardComponent({ hasNavTab = true }: IProps)
|
||||
name="paymentFrequencyInSubscription"
|
||||
value={EPaymentFrequency.yearly.toString()}
|
||||
onChange={handleFrequencyChange}
|
||||
defaultChecked={paymentFrequency === EPaymentFrequency.yearly}>
|
||||
<Typography typo={ETypo.TEXT_LG_REGULAR}>Annuel</Typography>
|
||||
</RadioBox>
|
||||
defaultChecked={paymentFrequency === EPaymentFrequency.yearly}
|
||||
label="Annuel"></RadioBox>
|
||||
<RadioBox
|
||||
name="paymentFrequencyInSubscription"
|
||||
value={EPaymentFrequency.monthly.toString()}
|
||||
onChange={handleFrequencyChange}
|
||||
defaultChecked={paymentFrequency === EPaymentFrequency.monthly}>
|
||||
<Typography typo={ETypo.TEXT_LG_REGULAR}>Mensuel</Typography>
|
||||
</RadioBox>
|
||||
defaultChecked={paymentFrequency === EPaymentFrequency.monthly}
|
||||
label="Mensuel"></RadioBox>
|
||||
</div>
|
||||
<div className={classes["separator"]} />
|
||||
<div className={classes["container-line"]}>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user