♻️(react) update stories for themes
The stories do not need CunninghamProvider anymore since it is handled by the configuration for the themes support. Some stories were also using wrong colors that didn't handle multiple themes.
This commit is contained in:
Nathan Vasse
@@ -5,7 +5,6 @@ import { useForm, FormProvider } from "react-hook-form";
|
||||
import * as Yup from "yup";
|
||||
import { RhfInput } from ":/components/Forms/Input/stories-utils";
|
||||
import { Button } from ":/components/Button";
|
||||
import { CunninghamProvider } from ":/components/Provider";
|
||||
import { Radio, RadioGroup } from ":/components/Forms/Radio";
|
||||
import { RhfSelect } from ":/components/Forms/Select/stories-utils";
|
||||
import {
|
||||
@@ -55,119 +54,117 @@ const SportsBase = ({ values }: SportProps) => {
|
||||
}, [values]);
|
||||
|
||||
return (
|
||||
<CunninghamProvider>
|
||||
<FormProvider {...methods}>
|
||||
<form
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "1rem",
|
||||
width: "400px",
|
||||
}}
|
||||
onSubmit={methods.handleSubmit(onSubmit)}
|
||||
<FormProvider {...methods}>
|
||||
<form
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "1rem",
|
||||
width: "400px",
|
||||
}}
|
||||
onSubmit={methods.handleSubmit(onSubmit)}
|
||||
>
|
||||
<h1
|
||||
className="fs-h3 fw-bold clr-greyscale-900"
|
||||
style={{ textAlign: "center" }}
|
||||
>
|
||||
<h1
|
||||
className="fs-h3 fw-bold clr-greyscale-900"
|
||||
style={{ textAlign: "center" }}
|
||||
>
|
||||
Register
|
||||
</h1>
|
||||
Register
|
||||
</h1>
|
||||
|
||||
<div>
|
||||
<div className="fs-l clr-greyscale-800 mb-t">Gender</div>
|
||||
<RadioGroup
|
||||
<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)}
|
||||
text={getFieldErrorMessage("gender", methods.formState)}
|
||||
style={{ display: "flex", flexDirection: "row", gap: "0.5rem" }}
|
||||
>
|
||||
<Radio
|
||||
label="Male"
|
||||
state={getFieldState("gender", methods.formState)}
|
||||
value="male"
|
||||
{...methods.register("gender")}
|
||||
/>
|
||||
<Radio
|
||||
label="Female"
|
||||
value="female"
|
||||
state={getFieldState("gender", methods.formState)}
|
||||
{...methods.register("gender")}
|
||||
/>
|
||||
<Radio
|
||||
label="Other"
|
||||
value="other"
|
||||
state={getFieldState("gender", methods.formState)}
|
||||
{...methods.register("gender")}
|
||||
/>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
<div style={{ display: "flex", gap: "1rem" }}>
|
||||
<RhfInput
|
||||
label="First name"
|
||||
state={getFieldState("firstName", methods.formState)}
|
||||
text={getFieldErrorMessage("firstName", methods.formState)}
|
||||
{...methods.register("firstName")}
|
||||
value="male"
|
||||
{...methods.register("gender")}
|
||||
/>
|
||||
<RhfInput
|
||||
label="Last name"
|
||||
state={getFieldState("lastName", methods.formState)}
|
||||
text={getFieldErrorMessage("lastName", methods.formState)}
|
||||
{...methods.register("lastName")}
|
||||
<Radio
|
||||
label="Female"
|
||||
value="female"
|
||||
state={getFieldState("gender", methods.formState)}
|
||||
{...methods.register("gender")}
|
||||
/>
|
||||
</div>
|
||||
<Radio
|
||||
label="Other"
|
||||
value="other"
|
||||
state={getFieldState("gender", methods.formState)}
|
||||
{...methods.register("gender")}
|
||||
/>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
<div style={{ display: "flex", gap: "1rem" }}>
|
||||
<RhfInput
|
||||
label="First name"
|
||||
state={getFieldState("firstName", methods.formState)}
|
||||
text={getFieldErrorMessage("firstName", methods.formState)}
|
||||
{...methods.register("firstName")}
|
||||
/>
|
||||
<RhfInput
|
||||
label="Last name"
|
||||
state={getFieldState("lastName", methods.formState)}
|
||||
text={getFieldErrorMessage("lastName", methods.formState)}
|
||||
{...methods.register("lastName")}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<RhfSelect
|
||||
name="competition"
|
||||
label="Competition"
|
||||
options={[
|
||||
{
|
||||
label: "Athletics",
|
||||
},
|
||||
{
|
||||
label: "Swimming",
|
||||
},
|
||||
{
|
||||
label: "Marathon",
|
||||
},
|
||||
]}
|
||||
fullWidth={true}
|
||||
/>
|
||||
<RhfSelect
|
||||
name="rewards"
|
||||
label="Previous rewards"
|
||||
multi={true}
|
||||
options={[
|
||||
{
|
||||
label: "Bronze",
|
||||
},
|
||||
{
|
||||
label: "Silver",
|
||||
},
|
||||
{
|
||||
label: "Gold",
|
||||
},
|
||||
{
|
||||
label: "Flocon",
|
||||
},
|
||||
{
|
||||
label: "Ourson",
|
||||
},
|
||||
{
|
||||
label: "Chamois",
|
||||
},
|
||||
]}
|
||||
fullWidth={true}
|
||||
/>
|
||||
<Button fullWidth={true}>Apply</Button>
|
||||
<a
|
||||
href="/#"
|
||||
className="clr-greyscale-800 fs-m"
|
||||
style={{ textAlign: "center" }}
|
||||
>
|
||||
Need help ?
|
||||
</a>
|
||||
</form>
|
||||
</FormProvider>
|
||||
</CunninghamProvider>
|
||||
<RhfSelect
|
||||
name="competition"
|
||||
label="Competition"
|
||||
options={[
|
||||
{
|
||||
label: "Athletics",
|
||||
},
|
||||
{
|
||||
label: "Swimming",
|
||||
},
|
||||
{
|
||||
label: "Marathon",
|
||||
},
|
||||
]}
|
||||
fullWidth={true}
|
||||
/>
|
||||
<RhfSelect
|
||||
name="rewards"
|
||||
label="Previous rewards"
|
||||
multi={true}
|
||||
options={[
|
||||
{
|
||||
label: "Bronze",
|
||||
},
|
||||
{
|
||||
label: "Silver",
|
||||
},
|
||||
{
|
||||
label: "Gold",
|
||||
},
|
||||
{
|
||||
label: "Flocon",
|
||||
},
|
||||
{
|
||||
label: "Ourson",
|
||||
},
|
||||
{
|
||||
label: "Chamois",
|
||||
},
|
||||
]}
|
||||
fullWidth={true}
|
||||
/>
|
||||
<Button fullWidth={true}>Apply</Button>
|
||||
<a
|
||||
href="/#"
|
||||
className="clr-greyscale-800 fs-m"
|
||||
style={{ textAlign: "center" }}
|
||||
>
|
||||
Need help ?
|
||||
</a>
|
||||
</form>
|
||||
</FormProvider>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -5,7 +5,6 @@ import { Input } from ":/components/Forms/Input";
|
||||
import { Checkbox } from ":/components/Forms/Checkbox";
|
||||
import { Button } from ":/components/Button";
|
||||
import { Select } from ":/components/Forms/Select";
|
||||
import { CunninghamProvider } from ":/components/Provider";
|
||||
import { FileUploader } from ":/components/Forms/FileUploader";
|
||||
import { Switch } from ":/components/Forms/Switch";
|
||||
import { Radio } from ":/components/Forms/Radio";
|
||||
@@ -55,291 +54,276 @@ export const Login = () => {
|
||||
|
||||
export const Application = () => {
|
||||
return (
|
||||
<CunninghamProvider>
|
||||
<form
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "1rem",
|
||||
width: "400px",
|
||||
}}
|
||||
<form
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "1rem",
|
||||
width: "400px",
|
||||
}}
|
||||
>
|
||||
<h1
|
||||
className="fs-h3 fw-bold clr-greyscale-900"
|
||||
style={{ textAlign: "center" }}
|
||||
>
|
||||
<h1
|
||||
className="fs-h3 fw-bold clr-greyscale-900"
|
||||
style={{ textAlign: "center" }}
|
||||
>
|
||||
Application
|
||||
</h1>
|
||||
<Select
|
||||
label="Context"
|
||||
options={[
|
||||
{
|
||||
label: "Ask a document",
|
||||
},
|
||||
{
|
||||
label: "Download files",
|
||||
},
|
||||
{
|
||||
label: "Ask for help",
|
||||
},
|
||||
]}
|
||||
Application
|
||||
</h1>
|
||||
<Select
|
||||
label="Context"
|
||||
options={[
|
||||
{
|
||||
label: "Ask a document",
|
||||
},
|
||||
{
|
||||
label: "Download files",
|
||||
},
|
||||
{
|
||||
label: "Ask for help",
|
||||
},
|
||||
]}
|
||||
fullWidth={true}
|
||||
/>
|
||||
<div style={{ display: "flex", gap: "1rem" }}>
|
||||
<Input label="First name" />
|
||||
<Input label="Last name" />
|
||||
</div>
|
||||
<Input
|
||||
label="Email address"
|
||||
fullWidth={true}
|
||||
text="Only @acme.com domain is authorized"
|
||||
/>
|
||||
<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 style={{ display: "flex", gap: "1rem" }}>
|
||||
<Input label="First name" />
|
||||
<Input label="Last name" />
|
||||
</div>
|
||||
<Input
|
||||
label="Email address"
|
||||
fullWidth={true}
|
||||
text="Only @acme.com domain is authorized"
|
||||
/>
|
||||
<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>
|
||||
<a
|
||||
href="/#"
|
||||
className="clr-greyscale-800 fs-m"
|
||||
style={{ textAlign: "center" }}
|
||||
>
|
||||
Need help ?
|
||||
</a>
|
||||
</form>
|
||||
</CunninghamProvider>
|
||||
</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>
|
||||
<a
|
||||
href="/#"
|
||||
className="clr-greyscale-800 fs-m"
|
||||
style={{ textAlign: "center" }}
|
||||
>
|
||||
Need help ?
|
||||
</a>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export const Sports = () => {
|
||||
return (
|
||||
<CunninghamProvider>
|
||||
<form
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "1rem",
|
||||
width: "400px",
|
||||
}}
|
||||
<form
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "1rem",
|
||||
width: "400px",
|
||||
}}
|
||||
onSubmit={(e) => e.preventDefault()}
|
||||
>
|
||||
<h1
|
||||
className="fs-h3 fw-bold clr-greyscale-900"
|
||||
style={{ textAlign: "center" }}
|
||||
>
|
||||
<h1
|
||||
className="fs-h3 fw-bold clr-greyscale-900"
|
||||
style={{ textAlign: "center" }}
|
||||
>
|
||||
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" />
|
||||
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>
|
||||
|
||||
<DatePicker label="Date of birth" fullWidth={true} />
|
||||
<Select
|
||||
label="Competition"
|
||||
options={[
|
||||
{
|
||||
label: "Athletics",
|
||||
},
|
||||
{
|
||||
label: "Swimming",
|
||||
},
|
||||
{
|
||||
label: "Marathon",
|
||||
},
|
||||
]}
|
||||
fullWidth={true}
|
||||
/>
|
||||
<Select
|
||||
label="Previous rewards"
|
||||
multi={true}
|
||||
options={[
|
||||
{
|
||||
label: "Bronze",
|
||||
},
|
||||
{
|
||||
label: "Silver",
|
||||
},
|
||||
{
|
||||
label: "Gold",
|
||||
},
|
||||
{
|
||||
label: "Flocon",
|
||||
},
|
||||
{
|
||||
label: "Ourson",
|
||||
},
|
||||
{
|
||||
label: "Chamois",
|
||||
},
|
||||
]}
|
||||
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>
|
||||
<a
|
||||
href="/#"
|
||||
className="clr-greyscale-800 fs-m"
|
||||
style={{ textAlign: "center" }}
|
||||
>
|
||||
Need help ?
|
||||
</a>
|
||||
</form>
|
||||
</CunninghamProvider>
|
||||
<DatePicker label="Date of birth" fullWidth={true} />
|
||||
<Select
|
||||
label="Competition"
|
||||
options={[
|
||||
{
|
||||
label: "Athletics",
|
||||
},
|
||||
{
|
||||
label: "Swimming",
|
||||
},
|
||||
{
|
||||
label: "Marathon",
|
||||
},
|
||||
]}
|
||||
fullWidth={true}
|
||||
/>
|
||||
<Select
|
||||
label="Previous rewards"
|
||||
multi={true}
|
||||
options={[
|
||||
{
|
||||
label: "Bronze",
|
||||
},
|
||||
{
|
||||
label: "Silver",
|
||||
},
|
||||
{
|
||||
label: "Gold",
|
||||
},
|
||||
{
|
||||
label: "Flocon",
|
||||
},
|
||||
{
|
||||
label: "Ourson",
|
||||
},
|
||||
{
|
||||
label: "Chamois",
|
||||
},
|
||||
]}
|
||||
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>
|
||||
<a
|
||||
href="/#"
|
||||
className="clr-greyscale-800 fs-m"
|
||||
style={{ textAlign: "center" }}
|
||||
>
|
||||
Need help ?
|
||||
</a>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
export const SportsDisabled = () => {
|
||||
const [withValues, setWithValues] = useState(false);
|
||||
return (
|
||||
<CunninghamProvider>
|
||||
<form
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "1rem",
|
||||
width: "400px",
|
||||
}}
|
||||
<form
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "1rem",
|
||||
width: "400px",
|
||||
}}
|
||||
>
|
||||
<h1
|
||||
className="fs-h3 fw-bold clr-greyscale-900"
|
||||
style={{ textAlign: "center" }}
|
||||
>
|
||||
<h1
|
||||
className="fs-h3 fw-bold clr-greyscale-900"
|
||||
style={{ textAlign: "center" }}
|
||||
>
|
||||
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"
|
||||
disabled={true}
|
||||
value={withValues ? "John" : undefined}
|
||||
/>
|
||||
<Input label="Last name" disabled={true} />
|
||||
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"
|
||||
disabled={true}
|
||||
value={withValues ? "John" : undefined}
|
||||
/>
|
||||
<Input label="Last name" 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>
|
||||
<a
|
||||
href="/#"
|
||||
className="clr-greyscale-800 fs-m"
|
||||
style={{ textAlign: "center" }}
|
||||
>
|
||||
Need help ?
|
||||
</a>
|
||||
</form>
|
||||
</CunninghamProvider>
|
||||
<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>
|
||||
<a
|
||||
href="/#"
|
||||
className="clr-greyscale-800 fs-m"
|
||||
style={{ textAlign: "center" }}
|
||||
>
|
||||
Need help ?
|
||||
</a>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user