✨ seprator and wip drag and drop
This commit is contained in:
parent
719832d41e
commit
a813a4e57e
@ -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
35
src/front/Components/DesignSystem/DragAndDrop/index.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
@ -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
33
src/front/Components/DesignSystem/Separator/index.tsx
Normal 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 }}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
@ -149,6 +149,8 @@ export enum ETypoColor {
|
|||||||
INPUT_ERROR = "--input-error",
|
INPUT_ERROR = "--input-error",
|
||||||
|
|
||||||
TEXT_ACCENT = "--text-accent",
|
TEXT_ACCENT = "--text-accent",
|
||||||
|
TEXT_PRIMARY = "--text-primary",
|
||||||
|
TEXT_SECONDARY = "--text-secondary",
|
||||||
|
|
||||||
CONTRAST_DEFAULT = "--contrast-default",
|
CONTRAST_DEFAULT = "--contrast-default",
|
||||||
CONTRAST_HOVERED = "--contrast-hovered",
|
CONTRAST_HOVERED = "--contrast-hovered",
|
||||||
|
@ -3,15 +3,16 @@
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 32px;
|
gap: 32px;
|
||||||
.components {
|
.components {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 32px;
|
||||||
max-width: 600px;
|
max-width: 600px;
|
||||||
|
|
||||||
.inputs {
|
.inputs {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 24px;
|
gap: 24px;
|
||||||
}
|
}
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 24px;
|
|
||||||
|
|
||||||
.rows {
|
.rows {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -36,6 +36,8 @@ import classes from "./classes.module.scss";
|
|||||||
import CheckboxesInputElement from "@Front/Components/DesignSystem/CheckBox";
|
import CheckboxesInputElement from "@Front/Components/DesignSystem/CheckBox";
|
||||||
import RadioBox from "@Front/Components/DesignSystem/RadioBox";
|
import RadioBox from "@Front/Components/DesignSystem/RadioBox";
|
||||||
import Toggle, { EToggleSize } from "@Front/Components/DesignSystem/Toggle";
|
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() {
|
export default function DesignSystem() {
|
||||||
const { isOpen, open, close } = useOpenable();
|
const { isOpen, open, close } = useOpenable();
|
||||||
@ -83,10 +85,27 @@ export default function DesignSystem() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<DefaultTemplate title={"DesignSystem"}>
|
<DefaultTemplate title={"DesignSystem"}>
|
||||||
<Typography typo={ETypo.DISPLAY_LARGE}>DesignSystem</Typography>
|
|
||||||
<Newsletter isOpen={false} />
|
<Newsletter isOpen={false} />
|
||||||
<div className={classes["root"]}>
|
<div className={classes["root"]}>
|
||||||
<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"]}>
|
<div className={classes["rows"]}>
|
||||||
<CheckboxesInputElement
|
<CheckboxesInputElement
|
||||||
option={{
|
option={{
|
||||||
@ -125,7 +144,7 @@ export default function DesignSystem() {
|
|||||||
disabled={true}
|
disabled={true}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
<Typography typo={ETypo.TEXT_LG_BOLD}>Radio boxes</Typography>
|
||||||
<div className={classes["rows"]}>
|
<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" />
|
||||||
<RadioBox
|
<RadioBox
|
||||||
@ -154,7 +173,7 @@ export default function DesignSystem() {
|
|||||||
disabled={true}
|
disabled={true}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className={classes["components"]}>
|
|
||||||
<Typography typo={ETypo.TEXT_LG_BOLD}>Toggle</Typography>
|
<Typography typo={ETypo.TEXT_LG_BOLD}>Toggle</Typography>
|
||||||
<div className={classes["rows"]}>
|
<div className={classes["rows"]}>
|
||||||
<Toggle size={EToggleSize.MD} />
|
<Toggle size={EToggleSize.MD} />
|
||||||
|
Loading…
x
Reference in New Issue
Block a user