From 4c64cb39937cfd590673d519c699191fb3cc3f59 Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Wed, 6 Sep 2023 16:18:04 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D(react)=20add=20disabled=20form=20e?=
 =?UTF-8?q?xample?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Before it wasn't really handy to see form inputs next to each other
in order to make sure that their style is homogeneous when being
disabled.
---
 .../Forms/Examples/index.stories.tsx          | 124 +++++++++++++++++-
 .../components/Forms/LabelledBox/tokens.ts    |   0
 2 files changed, 123 insertions(+), 1 deletion(-)
 create mode 100644 packages/react/src/components/Forms/LabelledBox/tokens.ts

diff --git a/packages/react/src/components/Forms/Examples/index.stories.tsx b/packages/react/src/components/Forms/Examples/index.stories.tsx
index d715a60..d554789 100644
--- a/packages/react/src/components/Forms/Examples/index.stories.tsx
+++ b/packages/react/src/components/Forms/Examples/index.stories.tsx
@@ -1,5 +1,6 @@
 import { Meta } from "@storybook/react";
-import React from "react";
+import React, { useState } from "react";
+import { DatePicker, DateRangePicker } from ":/components/Forms/DatePicker";
 import { Input } from ":/components/Forms/Input";
 import { Checkbox } from ":/components/Forms/Checkbox";
 import { Button } from ":/components/Button";
@@ -136,6 +137,7 @@ export const Sports = () => {
           <Radio name="gender" label="Female" />
           <Radio name="gender" label="Other" />
         </div>
+        <DatePicker label="Date of birth" fullWidth={true} />
         <Select
           label="Competition"
           options={[
@@ -176,6 +178,15 @@ export const Sports = () => {
           ]}
           fullWidth={true}
         />
+        <DateRangePicker
+          startLabel="Start date"
+          endLabel="End date"
+          defaultValue={[
+            "2023-05-23T00:00:00.000+00:00",
+            "2023-06-23T00:00:00.000+00:00",
+          ]}
+          fullWidth={true}
+        />
         <Button fullWidth={true}>Apply</Button>
         <Button fullWidth={true} color="secondary">
           Need help ?
@@ -184,3 +195,114 @@ export const Sports = () => {
     </CunninghamProvider>
   );
 };
+export const SportsDisabled = () => {
+  const [withValues, setWithValues] = useState(false);
+  return (
+    <CunninghamProvider>
+      <form
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: "1rem",
+          width: "400px",
+        }}
+      >
+        <h1
+          className="fs-h3 fw-bold clr-greyscale-900"
+          style={{ textAlign: "center" }}
+        >
+          Register
+        </h1>
+        <div style={{ display: "flex", gap: "1rem" }}>
+          <Input
+            label="First name"
+            disabled={true}
+            value={withValues ? "John" : undefined}
+          />
+          <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}
+          disabled={true}
+          value={withValues ? "2023-05-23T00:00:00.000+00:00" : undefined}
+        />
+        <Select
+          disabled={true}
+          label="Competition"
+          options={[
+            {
+              label: "Athletics",
+            },
+            {
+              label: "Swimming",
+            },
+            {
+              label: "Marathon",
+            },
+          ]}
+          fullWidth={true}
+          value={withValues ? "Swimming" : undefined}
+        />
+        <Select
+          disabled={true}
+          label="Previous rewards"
+          multi={true}
+          options={[
+            {
+              label: "Bronze",
+            },
+            {
+              label: "Silver",
+            },
+            {
+              label: "Gold",
+            },
+            {
+              label: "Flocon",
+            },
+            {
+              label: "Ourson",
+            },
+            {
+              label: "Chamois",
+            },
+          ]}
+          fullWidth={true}
+          value={withValues ? ["Silver"] : undefined}
+        />
+        <DateRangePicker
+          startLabel="Start date"
+          endLabel="End date"
+          value={
+            withValues
+              ? [
+                  "2023-05-23T00:00:00.000+00:00",
+                  "2023-06-23T00:00:00.000+00:00",
+                ]
+              : undefined
+          }
+          fullWidth={true}
+          disabled={true}
+        />
+        <Switch
+          label="Enable values"
+          checked={withValues}
+          onChange={(e) => setWithValues(e.target.checked)}
+        />
+        <Button fullWidth={true} disabled={true}>
+          Apply
+        </Button>
+        <Button fullWidth={true} color="secondary" disabled={true}>
+          Need help ?
+        </Button>
+      </form>
+    </CunninghamProvider>
+  );
+};
diff --git a/packages/react/src/components/Forms/LabelledBox/tokens.ts b/packages/react/src/components/Forms/LabelledBox/tokens.ts
new file mode 100644
index 0000000..e69de29