studio/cunningham
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨(react) enhance FormExemples stories

Browse Source 
update FormExemples stories with new css variables introduce
with the new tokens architectures
This commit is contained in:
Nathan Panchout
2025-08-22 10:15:29 +02:00
committed by NathanVss
parent c9f6d2d41c
commit 43337d4f7f
4 changed files with 21 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/react/src/components/Forms/Examples/EdgeCases/index.stories.tsx
View File

@@ -24,7 +24,7 @@ export const OverflowLabels = () => {
}}
>
<h1
className="fs-h3 fw-bold clr-greyscale-900"
className="fs-h3 fw-bold clr-gray-900"
style={{ textAlign: "center" }}
>
Application
@@ -64,9 +64,7 @@ export const OverflowLabels = () => {
<Input label={"City" + overflow} fullWidth={true} />
</div>
<div>
<div className="fs-l clr-greyscale-800 mb-t">
Your curriculum vitae
</div>
<div className="fs-l clr-gray-800 mb-t">Your curriculum vitae</div>
<FileUploader
fullWidth={true}
text="pdf only ( 4mb maximum )"
@@ -81,7 +79,7 @@ export const OverflowLabels = () => {
<Button fullWidth={true}>Apply</Button>
<a
href="/#"
className="clr-greyscale-800 fs-m"
className="clr-gray-800 fs-m"
style={{ textAlign: "center" }}
>
Need help ?

6
packages/react/src/components/Forms/Examples/ReactHookForm/Login.stories.tsx
View File

@@ -52,7 +52,7 @@ export const Login = () => {
onSubmit={methods.handleSubmit(onSubmit)}
>
<h1
className="fs-h3 fw-bold clr-greyscale-900"
className="fs-h3 fw-bold clr-gray-900"
style={{ textAlign: "center" }}
>
Log in
@@ -84,9 +84,9 @@ export const Login = () => {
/>
</div>
<Button fullWidth={true}>Log in</Button>
<div className="fs-m clr-greyscale-800" style={{ textAlign: "center" }}>
<div className="fs-m clr-gray-800" style={{ textAlign: "center" }}>
You do not have an account?{" "}
<a href="/#" className="clr-greyscale-800">
<a href="/#" className="clr-gray-800">
Register
</a>
</div>

6
packages/react/src/components/Forms/Examples/ReactHookForm/Sports.stories.tsx
View File

@@ -65,14 +65,14 @@ const SportsBase = ({ values }: SportProps) => {
onSubmit={methods.handleSubmit(onSubmit)}
>
<h1
className="fs-h3 fw-bold clr-greyscale-900"
className="fs-h3 fw-bold clr-gray-900"
style={{ textAlign: "center" }}
>
Register
</h1>
<div>
<div className="fs-l clr-greyscale-800 mb-t">Gender</div>
<div className="fs-l clr-gray-800 mb-t">Gender</div>
<RadioGroup
state={getFieldState("gender", methods.formState)}
text={getFieldErrorMessage("gender", methods.formState)}
@@ -158,7 +158,7 @@ const SportsBase = ({ values }: SportProps) => {
<Button fullWidth={true}>Apply</Button>
<a
href="/#"
className="clr-greyscale-800 fs-m"
className="clr-gray-800 fs-m"
style={{ textAlign: "center" }}
>
Need help ?

24
packages/react/src/components/Forms/Examples/index.stories.tsx
View File

@@ -25,7 +25,7 @@ export const Login = () => {
}}
>
<h1
className="fs-h3 fw-bold clr-greyscale-900"
className="fs-h3 fw-bold clr-gray-900"
style={{ textAlign: "center" }}
>
Log in
@@ -43,9 +43,9 @@ export const Login = () => {
<Checkbox label="Remember me" />
</div>
<Button fullWidth={true}>Log in</Button>
<div className="fs-m clr-greyscale-800" style={{ textAlign: "center" }}>
<div className="fs-m clr-gray-800" style={{ textAlign: "center" }}>
You do not have an account?{" "}
<a href="/#" className="clr-greyscale-800">
<a href="/#" className="clr-gray-800">
Register
</a>
</div>
@@ -65,7 +65,7 @@ export const Application = () => {
method="get"
>
<h1
className="fs-h3 fw-bold clr-greyscale-900"
className="fs-h3 fw-bold clr-gray-900"
style={{ textAlign: "center" }}
>
Application
@@ -102,7 +102,7 @@ export const Application = () => {
<Input label="City" fullWidth={true} />
</div>
<div>
<div className="fs-l clr-greyscale-800 mb-t">Your curriculum vitae</div>
<div className="fs-l clr-gray-800 mb-t">Your curriculum vitae</div>
<FileUploader
fullWidth={true}
text="pdf only ( 4mb maximum )"
@@ -142,7 +142,7 @@ export const Application = () => {
<Button fullWidth={true}>Apply</Button>
<a
href="/#"
className="clr-greyscale-800 fs-m"
className="clr-gray-800 fs-m"
style={{ textAlign: "center" }}
>
Need help ?
@@ -163,13 +163,13 @@ export const Sports = () => {
onSubmit={(e) => e.preventDefault()}
>
<h1
className="fs-h3 fw-bold clr-greyscale-900"
className="fs-h3 fw-bold clr-gray-900"
style={{ textAlign: "center" }}
>
Register
</h1>
<div>
<div className="fs-l clr-greyscale-800 mb-t">Gender</div>
<div className="fs-l clr-gray-800 mb-t">Gender</div>
<div style={{ display: "flex", gap: "0.5rem" }}>
<Radio name="gender" label="Male" fullWidth={true} />
<Radio name="gender" label="Female" />
@@ -234,7 +234,7 @@ export const Sports = () => {
<Button fullWidth={true}>Apply</Button>
<a
href="/#"
className="clr-greyscale-800 fs-m"
className="clr-gray-800 fs-m"
style={{ textAlign: "center" }}
>
Need help ?
@@ -254,13 +254,13 @@ export const SportsDisabled = () => {
}}
>
<h1
className="fs-h3 fw-bold clr-greyscale-900"
className="fs-h3 fw-bold clr-gray-900"
style={{ textAlign: "center" }}
>
Register
</h1>
<div>
<div className="fs-l clr-greyscale-800 mb-t">Gender</div>
<div className="fs-l clr-gray-800 mb-t">Gender</div>
<div style={{ display: "flex", gap: "0.5rem" }}>
<Radio name="gender" label="Male" fullWidth={true} disabled={true} />
<Radio name="gender" label="Female" disabled={true} />
@@ -347,7 +347,7 @@ export const SportsDisabled = () => {
</Button>
<a
href="/#"
className="clr-greyscale-800 fs-m"
className="clr-gray-800 fs-m"
style={{ textAlign: "center" }}
>
Need help ?