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

✨ Textarea working

Browse Source
This commit is contained in:
Maxime Lalo 2024-07-19 16:24:58 +02:00
parent 38a8931993
commit 3129e1cbeb
4 changed files with 148 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
src/front/Components/DesignSystem/Form/NewFields/NewTextAreaField/classes.module.scss Normal file
View File

@ -0,0 +1,94 @@
@import "@Themes/constants.scss";
.root {
position: relative;
&[data-is-disabled="true"] {
opacity: var(--opacity-disabled, 0.3);
.input-container {
cursor: not-allowed;
border: 1px solid var(--input-main-border-default, #d7dce0);
&::placeholder {
background: var(--input-background, #fff);
}
&:hover {
border: 1px solid var(--input-main-border-default, #d7dce0);
}
.input {
cursor: not-allowed;
}
}
}
.label {
padding: 0px var(--spacing-2, 16px);
}
.input-container {
display: flex;
padding: var(--spacing-2, 16px) var(--spacing-sm, 8px);
align-items: center;
gap: var(--spacing-2, 16px);
border-radius: var(--input-radius, 0px);
border: 1px solid var(--input-main-border-default, #d7dce0);
background: var(--input-background, #fff);
&:hover {
border: 1px solid var(--input-main-border-hovered, #b4bec5);
}
&:not([data-value=""]) {
border: 1px solid var(--input-main-border-filled, #6d7e8a);
.input {
font-weight: var(--font-text-weight-semibold, 600);
}
}
&[data-is-errored="true"] {
border: 1px solid var(--input-error, #dc2625);
}
&:focus,
&:focus-within,
&:focus-visible {
border: 1px solid var(--input-main-border-focused, #005bcb);
.input {
font-weight: var(--font-text-weight-semibold, 600);
}
}
.input {
display: flex;
padding: 0px var(--spacing-2, 16px);
align-items: center;
gap: 8px;
flex: 1 0 0;
border: none;
height: 94px;
&::placeholder {
color: var(--input-placeholder-empty, #6d7e8a);
/* text/md/regular */
font-family: var(--font-text-family, Poppins);
font-size: 16px;
font-style: normal;
font-weight: var(--font-text-weight-regular, 400);
line-height: normal;
letter-spacing: 0.08px;
}
color: var(--input-placeholder-filled, #24282e);
/* text/md/semibold */
font-family: var(--font-text-family, Poppins);
font-size: 16px;
font-style: normal;
font-weight: var(--font-text-weight-semibold, 600);
line-height: normal;
letter-spacing: 0.08px;
}
}
}

46
src/front/Components/DesignSystem/Form/NewFields/NewTextAreaField/index.tsx Normal file
View File

@ -0,0 +1,46 @@
import React from "react";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import { ReactNode } from "react";
import BaseField, { IProps as IBaseFieldProps } from "../../BaseField";
import classes from "./classes.module.scss";
import classnames from "classnames";
export type IProps = IBaseFieldProps & {};
export default class NewTextAreaField extends BaseField<IProps> {
constructor(props: IProps) {
super(props);
this.state = this.getDefaultState();
}
public override render(): ReactNode {
const value = this.state.value ?? "";
console.log(this.hasError());
return (
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
<div className={classes["root"]} data-is-disabled={this.props.disabled}>
<label>
{this.props.label && (
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.INPUT_LABEL} className={classes["label"]}>
{this.props.label}
</Typography>
)}
<div className={classes["input-container"]} data-value={value} data-is-errored={this.hasError().toString()}>
<textarea
onChange={this.onChange}
className={classnames(classes["input"], this.props.className)}
placeholder={this.props.placeholder}
value={value}
onFocus={this.onFocus}
onBlur={this.onBlur}
name={this.props.name}
disabled={this.props.disabled}
/>
</div>
</label>
</div>
{this.hasError() && <div className={classes["errors-container"]}>{this.renderErrors()}</div>}
</Typography>
);
}
}

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

@ -3,6 +3,11 @@
flex-direction: column;
gap: 32px;
.components {
.inputs {
display: flex;
flex-direction: column;
gap: 24px;
}
display: flex;
flex-direction: column;
gap: 24px;

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

@ -15,6 +15,7 @@ import Modal from "@Front/Components/DesignSystem/Modal";
import IconButton, { EIconButtonVariant } from "@Front/Components/DesignSystem/IconButton";
import NewTextField from "@Front/Components/DesignSystem/Form/NewFields/NewTextField";
import Form from "@Front/Components/DesignSystem/Form";
import NewTextAreaField from "@Front/Components/DesignSystem/Form/NewFields/NewTextAreaField";
export default function DesignSystem() {
const { isOpen, open, close } = useOpenable();
@ -67,11 +68,12 @@ export default function DesignSystem() {
<div className={classes["root"]}>
<div className={classes["components"]}>
<Typography typo={ETypo.TEXT_LG_BOLD}>Inputs</Typography>
<Form>
<Form className={classes["inputs"]}>
<NewTextField label="Label" placeholder="Placeholder" canCopy />
<NewTextField label="Without copy" placeholder="Placeholder" />
<NewTextField label="Disabled" placeholder="Placeholder" disabled canCopy />
<NewTextField label="Disabled without copy" placeholder="Placeholder" disabled />
<NewTextAreaField label="Textarea" placeholder="Placeholder" />
</Form>
<Typography typo={ETypo.TEXT_LG_BOLD}>Modal</Typography>