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

📝(react) improve form examples

Browse Source 
We decided to improve the examples to fit better the guidelines of the
design-system.
This commit is contained in:
Nathan Vasse
2023-09-11 11:37:29 +02:00
committed by NathanVss
parent 8fd34add8a
commit 8086a48672
3 changed files with 110 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -46,7 +46,7 @@ export const Login = () => {
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
gap: "1rem", gap: "1rem",
width: "400px", width: "300px",
}} }}
onSubmit={handleSubmit(onSubmit)} onSubmit={handleSubmit(onSubmit)}
> >
@@ -54,10 +54,10 @@ export const Login = () => {
className="fs-h3 fw-bold clr-greyscale-900" className="fs-h3 fw-bold clr-greyscale-900"
style={{ textAlign: "center" }} style={{ textAlign: "center" }}
> >
Please log-in! Log in
</h1> </h1>
<Input <Input
label="Email address" label="Email"
fullWidth={true} fullWidth={true}
state={getFieldState("email", formState)} state={getFieldState("email", formState)}
text={getFieldErrorMessage("email", formState)} text={getFieldErrorMessage("email", formState)}
@@ -67,7 +67,9 @@ export const Login = () => {
label="Password" label="Password"
state={getFieldState("password", formState)} state={getFieldState("password", formState)}
type="password" type="password"
text={getFieldErrorMessage("password", formState)} text={
getFieldErrorMessage("password", formState) || "Forgot your password?"
}
fullWidth={true} fullWidth={true}
{...register("password")} {...register("password")}
/> />
@@ -79,7 +81,13 @@ export const Login = () => {
{...register("rememberMe")} {...register("rememberMe")}
/> />
</div> </div>
<Button fullWidth={true}>Log-in</Button> <Button fullWidth={true}>Log in</Button>
<div className="fs-m clr-greyscale-800" style={{ textAlign: "center" }}>
You do not have an account?{" "}
<a href="/#" className="clr-greyscale-800">
Register
</a>
</div>
</form> </form>
); );
}; };

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

@@ -64,6 +64,31 @@ export const Sports = () => {
> >
Register Register
</h1> </h1>
<div>
<div className="fs-l clr-greyscale-800 mb-t">Gender</div>
<RadioGroup
state={getFieldState("gender", methods.formState)}
text={getFieldErrorMessage("gender", methods.formState)}
style={{ display: "flex", flexDirection: "row", gap: "0.5rem" }}
>
<Radio
label="Male"
state={getFieldState("gender", methods.formState)}
{...methods.register("gender")}
/>
<Radio
label="Female"
state={getFieldState("gender", methods.formState)}
{...methods.register("gender")}
/>
<Radio
label="Other"
state={getFieldState("gender", methods.formState)}
{...methods.register("gender")}
/>
</RadioGroup>
</div>
<div style={{ display: "flex", gap: "1rem" }}> <div style={{ display: "flex", gap: "1rem" }}>
<Input <Input
label="First name" label="First name"
@@ -79,27 +104,6 @@ export const Sports = () => {
/> />
</div> </div>
<RadioGroup
state={getFieldState("gender", methods.formState)}
text={getFieldErrorMessage("gender", methods.formState)}
style={{ display: "flex", flexDirection: "row", gap: "0.5rem" }}
>
<Radio
label="Male"
state={getFieldState("gender", methods.formState)}
{...methods.register("gender")}
/>
<Radio
label="Female"
state={getFieldState("gender", methods.formState)}
{...methods.register("gender")}
/>
<Radio
label="Other"
state={getFieldState("gender", methods.formState)}
{...methods.register("gender")}
/>
</RadioGroup>
<RhfSelect <RhfSelect
name="competition" name="competition"
label="Competition" label="Competition"
@@ -143,9 +147,13 @@ export const Sports = () => {
fullWidth={true} fullWidth={true}
/> />
<Button fullWidth={true}>Apply</Button> <Button fullWidth={true}>Apply</Button>
<Button fullWidth={true} color="secondary"> <a
href="/#"
className="clr-greyscale-800 fs-m"
style={{ textAlign: "center" }}
>
Need help ? Need help ?
</Button> </a>
</form> </form>
</FormProvider> </FormProvider>
</CunninghamProvider> </CunninghamProvider>

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

@@ -21,20 +21,20 @@ export const Login = () => {
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
gap: "1rem", gap: "1rem",
width: "400px", width: "300px",
}} }}
> >
<h1 <h1
className="fs-h3 fw-bold clr-greyscale-900" className="fs-h3 fw-bold clr-greyscale-900"
style={{ textAlign: "center" }} style={{ textAlign: "center" }}
> >
Please log-in! Log in
</h1> </h1>
<Input label="Email address" fullWidth={true} /> <Input label="Email" fullWidth={true} />
<Input <Input
label="Password" label="Password"
type="password" type="password"
text="Forgot your password ?" text="Forgot your password?"
fullWidth={true} fullWidth={true}
name="password" name="password"
required={true} required={true}
@@ -42,7 +42,13 @@ export const Login = () => {
<div> <div>
<Checkbox label="Remember me" /> <Checkbox label="Remember me" />
</div> </div>
<Button fullWidth={true}>Log-in</Button> <Button fullWidth={true}>Log in</Button>
<div className="fs-m clr-greyscale-800" style={{ textAlign: "center" }}>
You do not have an account?{" "}
<a href="/#" className="clr-greyscale-800">
Register
</a>
</div>
</form> </form>
); );
}; };
@@ -88,23 +94,35 @@ export const Application = () => {
fullWidth={true} fullWidth={true}
text="Only @acme.com domain is authorized" text="Only @acme.com domain is authorized"
/> />
<Input label="ZIP" fullWidth={true} /> <div style={{ display: "flex", gap: "1rem" }}>
<Input label="City" fullWidth={true} /> <div style={{ width: "25%" }}>
<div className="fs-m fw-medium">Your curriculum vitae</div> <Input label="ZIP" fullWidth={true} />
<FileUploader </div>
fullWidth={true} <Input label="City" fullWidth={true} />
text="pdf only ( 4mb maximum )" </div>
accept="application/pdf" <div>
/> <div className="fs-l clr-greyscale-800 mb-t">
Your curriculum vitae
</div>
<FileUploader
fullWidth={true}
text="pdf only ( 4mb maximum )"
accept="application/pdf"
/>
</div>
<div> <div>
<Switch label="SMS Notification" fullWidth={true} /> <Switch label="SMS Notification" fullWidth={true} />
<Switch label="Subscribe to newsletter" fullWidth={true} /> <Switch label="Subscribe to newsletter" fullWidth={true} />
</div> </div>
<Checkbox label="Agree to the terms and services" fullWidth={true} /> <Checkbox label="Agree to the terms and services" fullWidth={true} />
<Button fullWidth={true}>Apply</Button> <Button fullWidth={true}>Apply</Button>
<Button fullWidth={true} color="secondary"> <a
href="/#"
className="clr-greyscale-800 fs-m"
style={{ textAlign: "center" }}
>
Need help ? Need help ?
</Button> </a>
</form> </form>
</CunninghamProvider> </CunninghamProvider>
); );
@@ -127,16 +145,19 @@ export const Sports = () => {
> >
Register Register
</h1> </h1>
<div>
<div className="fs-l clr-greyscale-800 mb-t">Gender</div>
<div style={{ display: "flex", gap: "0.5rem" }}>
<Radio name="gender" label="Male" fullWidth={true} />
<Radio name="gender" label="Female" />
<Radio name="gender" label="Other" />
</div>
</div>
<div style={{ display: "flex", gap: "1rem" }}> <div style={{ display: "flex", gap: "1rem" }}>
<Input label="First name" /> <Input label="First name" />
<Input label="Last name" /> <Input label="Last name" />
</div> </div>
<div style={{ display: "flex", gap: "0.5rem" }}>
<Radio name="gender" label="Male" fullWidth={true} />
<Radio name="gender" label="Female" />
<Radio name="gender" label="Other" />
</div>
<DatePicker label="Date of birth" fullWidth={true} /> <DatePicker label="Date of birth" fullWidth={true} />
<Select <Select
label="Competition" label="Competition"
@@ -188,9 +209,13 @@ export const Sports = () => {
fullWidth={true} fullWidth={true}
/> />
<Button fullWidth={true}>Apply</Button> <Button fullWidth={true}>Apply</Button>
<Button fullWidth={true} color="secondary"> <a
href="/#"
className="clr-greyscale-800 fs-m"
style={{ textAlign: "center" }}
>
Need help ? Need help ?
</Button> </a>
</form> </form>
</CunninghamProvider> </CunninghamProvider>
); );
@@ -213,6 +238,19 @@ export const SportsDisabled = () => {
> >
Register Register
</h1> </h1>
<div>
<div className="fs-l clr-greyscale-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} />
<Radio name="gender" label="Other" disabled={true} />
</div>
</div>
<div style={{ display: "flex", gap: "1rem" }}> <div style={{ display: "flex", gap: "1rem" }}>
<Input <Input
label="First name" label="First name"
@@ -222,11 +260,6 @@ export const SportsDisabled = () => {
<Input label="Last name" disabled={true} /> <Input label="Last name" disabled={true} />
</div> </div>
<div style={{ display: "flex", gap: "0.5rem" }}>
<Radio name="gender" label="Male" fullWidth={true} disabled={true} />
<Radio name="gender" label="Female" disabled={true} />
<Radio name="gender" label="Other" disabled={true} />
</div>
<DatePicker <DatePicker
label="Date of birth" label="Date of birth"
fullWidth={true} fullWidth={true}
@@ -299,9 +332,13 @@ export const SportsDisabled = () => {
<Button fullWidth={true} disabled={true}> <Button fullWidth={true} disabled={true}>
Apply Apply
</Button> </Button>
<Button fullWidth={true} color="secondary" disabled={true}> <a
href="/#"
className="clr-greyscale-800 fs-m"
style={{ textAlign: "center" }}
>
Need help ? Need help ?
</Button> </a>
</form> </form>
</CunninghamProvider> </CunninghamProvider>
); );