From 8086a486720d8bd6fcaf99d8ff9e51a51f2f5723 Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Mon, 11 Sep 2023 11:37:29 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D(react)=20improve=20form=20examples?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We decided to improve the examples to fit better the guidelines of the
design-system.
---
 .../Examples/ReactHookForm/Login.stories.tsx  | 18 +++-
 .../Examples/ReactHookForm/Sports.stories.tsx | 54 ++++++-----
 .../Forms/Examples/index.stories.tsx          | 95 +++++++++++++------
 3 files changed, 110 insertions(+), 57 deletions(-)

diff --git a/packages/react/src/components/Forms/Examples/ReactHookForm/Login.stories.tsx b/packages/react/src/components/Forms/Examples/ReactHookForm/Login.stories.tsx
index 7d40f60..3371587 100644
--- a/packages/react/src/components/Forms/Examples/ReactHookForm/Login.stories.tsx
+++ b/packages/react/src/components/Forms/Examples/ReactHookForm/Login.stories.tsx
@@ -46,7 +46,7 @@ export const Login = () => {
         display: "flex",
         flexDirection: "column",
         gap: "1rem",
-        width: "400px",
+        width: "300px",
       }}
       onSubmit={handleSubmit(onSubmit)}
     >
@@ -54,10 +54,10 @@ export const Login = () => {
         className="fs-h3 fw-bold clr-greyscale-900"
         style={{ textAlign: "center" }}
       >
-        Please log-in!
+        Log in
       </h1>
       <Input
-        label="Email address"
+        label="Email"
         fullWidth={true}
         state={getFieldState("email", formState)}
         text={getFieldErrorMessage("email", formState)}
@@ -67,7 +67,9 @@ export const Login = () => {
         label="Password"
         state={getFieldState("password", formState)}
         type="password"
-        text={getFieldErrorMessage("password", formState)}
+        text={
+          getFieldErrorMessage("password", formState) || "Forgot your password?"
+        }
         fullWidth={true}
         {...register("password")}
       />
@@ -79,7 +81,13 @@ export const Login = () => {
           {...register("rememberMe")}
         />
       </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>
   );
 };
diff --git a/packages/react/src/components/Forms/Examples/ReactHookForm/Sports.stories.tsx b/packages/react/src/components/Forms/Examples/ReactHookForm/Sports.stories.tsx
index f978833..4c8c3fe 100644
--- a/packages/react/src/components/Forms/Examples/ReactHookForm/Sports.stories.tsx
+++ b/packages/react/src/components/Forms/Examples/ReactHookForm/Sports.stories.tsx
@@ -64,6 +64,31 @@ export const Sports = () => {
           >
             Register
           </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" }}>
             <Input
               label="First name"
@@ -79,27 +104,6 @@ export const Sports = () => {
             />
           </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
             name="competition"
             label="Competition"
@@ -143,9 +147,13 @@ export const Sports = () => {
             fullWidth={true}
           />
           <Button fullWidth={true}>Apply</Button>
-          <Button fullWidth={true} color="secondary">
+          <a
+            href="/#"
+            className="clr-greyscale-800 fs-m"
+            style={{ textAlign: "center" }}
+          >
             Need help ?
-          </Button>
+          </a>
         </form>
       </FormProvider>
     </CunninghamProvider>
diff --git a/packages/react/src/components/Forms/Examples/index.stories.tsx b/packages/react/src/components/Forms/Examples/index.stories.tsx
index d554789..3d85297 100644
--- a/packages/react/src/components/Forms/Examples/index.stories.tsx
+++ b/packages/react/src/components/Forms/Examples/index.stories.tsx
@@ -21,20 +21,20 @@ export const Login = () => {
         display: "flex",
         flexDirection: "column",
         gap: "1rem",
-        width: "400px",
+        width: "300px",
       }}
     >
       <h1
         className="fs-h3 fw-bold clr-greyscale-900"
         style={{ textAlign: "center" }}
       >
-        Please log-in!
+        Log in
       </h1>
-      <Input label="Email address" fullWidth={true} />
+      <Input label="Email" fullWidth={true} />
       <Input
         label="Password"
         type="password"
-        text="Forgot your password ?"
+        text="Forgot your password?"
         fullWidth={true}
         name="password"
         required={true}
@@ -42,7 +42,13 @@ export const Login = () => {
       <div>
         <Checkbox label="Remember me" />
       </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>
   );
 };
@@ -88,23 +94,35 @@ export const Application = () => {
           fullWidth={true}
           text="Only @acme.com domain is authorized"
         />
-        <Input label="ZIP" fullWidth={true} />
-        <Input label="City" fullWidth={true} />
-        <div className="fs-m fw-medium">Your curriculum vitae</div>
-        <FileUploader
-          fullWidth={true}
-          text="pdf only ( 4mb maximum )"
-          accept="application/pdf"
-        />
+        <div style={{ display: "flex", gap: "1rem" }}>
+          <div style={{ width: "25%" }}>
+            <Input label="ZIP" fullWidth={true} />
+          </div>
+          <Input label="City" fullWidth={true} />
+        </div>
+        <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>
           <Switch label="SMS Notification" fullWidth={true} />
           <Switch label="Subscribe to newsletter" fullWidth={true} />
         </div>
         <Checkbox label="Agree to the terms and services" fullWidth={true} />
         <Button fullWidth={true}>Apply</Button>
-        <Button fullWidth={true} color="secondary">
+        <a
+          href="/#"
+          className="clr-greyscale-800 fs-m"
+          style={{ textAlign: "center" }}
+        >
           Need help ?
-        </Button>
+        </a>
       </form>
     </CunninghamProvider>
   );
@@ -127,16 +145,19 @@ export const Sports = () => {
         >
           Register
         </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" }}>
           <Input label="First name" />
           <Input label="Last name" />
         </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} />
         <Select
           label="Competition"
@@ -188,9 +209,13 @@ export const Sports = () => {
           fullWidth={true}
         />
         <Button fullWidth={true}>Apply</Button>
-        <Button fullWidth={true} color="secondary">
+        <a
+          href="/#"
+          className="clr-greyscale-800 fs-m"
+          style={{ textAlign: "center" }}
+        >
           Need help ?
-        </Button>
+        </a>
       </form>
     </CunninghamProvider>
   );
@@ -213,6 +238,19 @@ export const SportsDisabled = () => {
         >
           Register
         </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" }}>
           <Input
             label="First name"
@@ -222,11 +260,6 @@ export const SportsDisabled = () => {
           <Input label="Last name" disabled={true} />
         </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
           label="Date of birth"
           fullWidth={true}
@@ -299,9 +332,13 @@ export const SportsDisabled = () => {
         <Button fullWidth={true} disabled={true}>
           Apply
         </Button>
-        <Button fullWidth={true} color="secondary" disabled={true}>
+        <a
+          href="/#"
+          className="clr-greyscale-800 fs-m"
+          style={{ textAlign: "center" }}
+        >
           Need help ?
-        </Button>
+        </a>
       </form>
     </CunninghamProvider>
   );