📝(react) improve form examples

We decided to improve the examples to fit better the guidelines of the design-system.
2023-09-11 11:37:29 +02:00
parent 8fd34add8a
commit 8086a48672
3 changed files with 110 additions and 57 deletions
--- 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>
  );
 };
--- 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>
--- 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>
  );