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

✨ seprator and wip drag and drop

Browse Source
This commit is contained in:
Max S 2024-08-08 13:37:24 +02:00
parent 719832d41e
commit a813a4e57e
7 changed files with 213 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/front/Components/DesignSystem/DragAndDrop/classes.module.scss Normal file
View File

@ -0,0 +1,27 @@
@import "@Themes/constants.scss";
.root {
display: inline-flex;
padding: var(--spacing-2, 16px) var(--Radius-2xl, 32px) var(--spacing-2, 16px) var(--spacing-xl, 32px);
align-items: center;
gap: var(--spacing-4, 32px);
.content {
display: flex;
flex-direction: column;
gap: var(--spacing-sm, 8px);
.deposit-document {
display: flex;
gap: var(--spacing-sm, 8px);
}
}
svg{
min-width: var(--spacing-3, 24px);
min-height: var(--spacing-3, 24px);
width: var(--spacing-3, 24px);
height: var(--spacing-3, 24px);
stroke: var(--color-primary-500);
}
}

35
src/front/Components/DesignSystem/DragAndDrop/index.tsx Normal file
View File

@ -0,0 +1,35 @@
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import React from "react";
import { DocumentPlusIcon } from "@heroicons/react/24/outline";
import classes from "./classes.module.scss";
import classNames from "classnames";
import Separator, { ESeperatorColor, ESeperatorDirection } from "../Separator";
import Button, { EButtonSize, EButtonstyletype, EButtonVariant } from "../Button";
type IProps = {};
export default function DragAndDrop(props: IProps) {
const {} = props;
return (
<div className={classNames(classes["root"])}>
<DocumentPlusIcon />
<Separator direction={ESeperatorDirection.VERTICAL} color={ESeperatorColor.STRONG} size={64} />
<div className={classes["content"]}>
<div className={classes["deposit-document"]}>
<Typography typo={ETypo.TEXT_LG_SEMIBOLD} color={ETypoColor.TEXT_PRIMARY}>
Drag and Drop ou
</Typography>
<Button variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.TEXT} size={EButtonSize.SM}>
parcourir
</Button>
</div>
<Typography typo={ETypo.TEXT_MD_LIGHT} color={ETypoColor.TEXT_SECONDARY}>
Description
</Typography>
</div>
</div>
);
}

24
src/front/Components/DesignSystem/Separator/classes.module.scss Normal file
View File

@ -0,0 +1,24 @@
@import "@Themes/constants.scss";
.root {
height: 2px;
width: 100%;
background-color: var(--separator-stroke-default);
&.vertical {
width: 2px;
height: 100%;
}
&.light {
background-color: var(--separator-stroke-light);
}
&.strong {
background-color: var(--separator-stroke-strong);
}
&.contrast {
background-color: var(--separator-stroke-contrast);
}
}

33
src/front/Components/DesignSystem/Separator/index.tsx Normal file
View File

@ -0,0 +1,33 @@
import React from "react";
import classes from "./classes.module.scss";
import classNames from "classnames";
export enum ESeperatorColor {
LIGHT = "light",
DEFAULT = "default",
STRONG = "strong",
CONTRAST = "contrast",
}
export enum ESeperatorDirection {
HORIZONTAL = "horizontal",
VERTICAL = "vertical",
}
type IProps = {
color?: ESeperatorColor;
direction?: ESeperatorDirection;
size?: number;
};
export default function Separator(props: IProps) {
const { color = ESeperatorColor.DEFAULT, direction = ESeperatorDirection.HORIZONTAL, size } = props;
return (
<div
className={classNames(classes["root"], classes[color], classes[direction])}
style={direction === ESeperatorDirection.HORIZONTAL ? { width: size } : { height: size }}
/>
);
}

2
src/front/Components/DesignSystem/Typography/index.tsx
View File

@ -149,6 +149,8 @@ export enum ETypoColor {
INPUT_ERROR = "--input-error",
TEXT_ACCENT = "--text-accent",
TEXT_PRIMARY = "--text-primary",
TEXT_SECONDARY = "--text-secondary",
CONTRAST_DEFAULT = "--contrast-default",
CONTRAST_HOVERED = "--contrast-hovered",

7
src/front/Components/Layouts/DesignSystem/classes.module.scss
View File

@ -3,15 +3,16 @@
flex-direction: column;
gap: 32px;
.components {
display: flex;
flex-direction: column;
gap: 32px;
max-width: 600px;
.inputs {
display: flex;
flex-direction: column;
gap: 24px;
}
display: flex;
flex-direction: column;
gap: 24px;
.rows {
display: flex;

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

@ -36,6 +36,8 @@ import classes from "./classes.module.scss";
import CheckboxesInputElement from "@Front/Components/DesignSystem/CheckBox";
import RadioBox from "@Front/Components/DesignSystem/RadioBox";
import Toggle, { EToggleSize } from "@Front/Components/DesignSystem/Toggle";
import Separator, { ESeperatorColor, ESeperatorDirection } from "@Front/Components/DesignSystem/Separator";
import DragAndDrop from "@Front/Components/DesignSystem/DragAndDrop";
export default function DesignSystem() {
const { isOpen, open, close } = useOpenable();
@ -83,78 +85,95 @@ export default function DesignSystem() {
return (
<DefaultTemplate title={"DesignSystem"}>
<Typography typo={ETypo.DISPLAY_LARGE}>DesignSystem</Typography>
<Newsletter isOpen={false} />
<div className={classes["root"]}>
<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}
/>
<CheckboxesInputElement
option={{
label: "Checked & Disabled",
value: "all",
description: "Description",
}}
toolTip="test"
checked={true}
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}
/>
<RadioBox
name="document"
value={"new client"}
description="Test"
label="Créer un document"
toolTip="test"
checked={true}
disabled={true}
/>
</div>
<Typography typo={ETypo.DISPLAY_LARGE}>DesignSystem</Typography>
<div className={classes["components"]}>
<Typography typo={ETypo.TEXT_LG_BOLD}>Drag and Drop</Typography>
<DragAndDrop />
<Typography typo={ETypo.TEXT_LG_BOLD}>Separators</Typography>
<div className={classes["rows"]}>
<Separator color={ESeperatorColor.DEFAULT} direction={ESeperatorDirection.HORIZONTAL} />
<Separator color={ESeperatorColor.LIGHT} direction={ESeperatorDirection.HORIZONTAL} />
<Separator color={ESeperatorColor.STRONG} direction={ESeperatorDirection.HORIZONTAL} />
<Separator color={ESeperatorColor.CONTRAST} direction={ESeperatorDirection.HORIZONTAL} />
</div>
<div className={classes["rows"]} style={{ height: 70, justifyContent: "space-around" }}>
<Separator color={ESeperatorColor.DEFAULT} direction={ESeperatorDirection.VERTICAL} />
<Separator color={ESeperatorColor.LIGHT} direction={ESeperatorDirection.VERTICAL} />
<Separator color={ESeperatorColor.STRONG} direction={ESeperatorDirection.VERTICAL} />
<Separator color={ESeperatorColor.CONTRAST} direction={ESeperatorDirection.VERTICAL} />
</div>
<Typography typo={ETypo.TEXT_LG_BOLD}>Checkboxes</Typography>
<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}
/>
<CheckboxesInputElement
option={{
label: "Checked & Disabled",
value: "all",
description: "Description",
}}
toolTip="test"
checked={true}
disabled={true}
/>
</div>
<Typography typo={ETypo.TEXT_LG_BOLD}>Radio boxes</Typography>
<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}
/>
<RadioBox
name="document"
value={"new client"}
description="Test"
label="Créer un document"
toolTip="test"
checked={true}
disabled={true}
/>
</div>
<Typography typo={ETypo.TEXT_LG_BOLD}>Toggle</Typography>
<div className={classes["rows"]}>
<Toggle size={EToggleSize.MD} />