367 lines
8.8 KiB
TypeScript
367 lines
8.8 KiB
TypeScript
import { Meta } from "@storybook/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";
|
|
import { Select } from ":/components/Forms/Select";
|
|
import { FileUploader } from ":/components/Forms/FileUploader";
|
|
import { Switch } from ":/components/Forms/Switch";
|
|
import { Radio } from ":/components/Forms/Radio";
|
|
import { TextArea } from ":/components/Forms/TextArea";
|
|
|
|
export default {
|
|
title: "Components/Forms/Examples",
|
|
} as Meta;
|
|
|
|
export const Login = () => {
|
|
return (
|
|
<form
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
gap: "1rem",
|
|
width: "300px",
|
|
}}
|
|
>
|
|
<h1
|
|
className="fs-h3 fw-bold clr-content-semantic-neutral-primary"
|
|
style={{ textAlign: "center" }}
|
|
>
|
|
Log in
|
|
</h1>
|
|
<Input label="Email" fullWidth={true} />
|
|
<Input
|
|
label="Password"
|
|
type="password"
|
|
text="Forgot your password?"
|
|
fullWidth={true}
|
|
name="password"
|
|
required={true}
|
|
/>
|
|
<div>
|
|
<Checkbox label="Remember me" />
|
|
</div>
|
|
<Button fullWidth={true}>Log in</Button>
|
|
<div
|
|
className="fs-m clr-content-semantic-neutral-primary"
|
|
style={{ textAlign: "center" }}
|
|
>
|
|
You do not have an account?{" "}
|
|
<a href="/#" className="clr-content-semantic-neutral-primary">
|
|
Register
|
|
</a>
|
|
</div>
|
|
</form>
|
|
);
|
|
};
|
|
|
|
export const Application = () => {
|
|
return (
|
|
<form
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
gap: "1rem",
|
|
width: "400px",
|
|
}}
|
|
method="get"
|
|
>
|
|
<h1
|
|
className="fs-h3 fw-bold clr-content-semantic-neutral-primary"
|
|
style={{ textAlign: "center" }}
|
|
>
|
|
Application
|
|
</h1>
|
|
<Select
|
|
label="Context"
|
|
options={[
|
|
{
|
|
label: "Ask a document",
|
|
},
|
|
{
|
|
label: "Download files",
|
|
},
|
|
{
|
|
label: "Ask for help",
|
|
},
|
|
]}
|
|
fullWidth={true}
|
|
clearable={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-content-semantic-neutral-primary mb-t">
|
|
Your curriculum vitae
|
|
</div>
|
|
<FileUploader
|
|
fullWidth={true}
|
|
text="pdf only ( 4mb maximum )"
|
|
accept="application/pdf"
|
|
/>
|
|
</div>
|
|
<Select
|
|
label="Skills"
|
|
options={[
|
|
{
|
|
label: "Communication",
|
|
},
|
|
{
|
|
label: "Teamwork",
|
|
},
|
|
{
|
|
label: "Problem solving",
|
|
},
|
|
{
|
|
label: "Leadership",
|
|
},
|
|
{
|
|
label: "Work ethic",
|
|
},
|
|
]}
|
|
multi={true}
|
|
fullWidth={true}
|
|
/>
|
|
<div>
|
|
<TextArea label="Cover letter" fullWidth={true} rows={5} />
|
|
</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-content-semantic-neutral-primary fs-m"
|
|
style={{ textAlign: "center" }}
|
|
>
|
|
Need help ?
|
|
</a>
|
|
</form>
|
|
);
|
|
};
|
|
|
|
export const Sports = () => {
|
|
return (
|
|
<form
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
gap: "1rem",
|
|
width: "400px",
|
|
}}
|
|
onSubmit={(e) => e.preventDefault()}
|
|
>
|
|
<h1
|
|
className="fs-h3 fw-bold clr-content-semantic-neutral-primary"
|
|
style={{ textAlign: "center" }}
|
|
>
|
|
Register
|
|
</h1>
|
|
<div>
|
|
<div className="fs-l clr-content-semantic-neutral-primary 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-content-semantic-neutral-primary fs-m"
|
|
style={{ textAlign: "center" }}
|
|
>
|
|
Need help ?
|
|
</a>
|
|
</form>
|
|
);
|
|
};
|
|
export const SportsDisabled = () => {
|
|
const [withValues, setWithValues] = useState(false);
|
|
return (
|
|
<form
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
gap: "1rem",
|
|
width: "400px",
|
|
}}
|
|
>
|
|
<h1
|
|
className="fs-h3 fw-bold clr-content-semantic-neutral-primary"
|
|
style={{ textAlign: "center" }}
|
|
>
|
|
Register
|
|
</h1>
|
|
<div>
|
|
<div className="fs-l clr-content-semantic-neutral-primary 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-content-semantic-neutral-primary fs-m"
|
|
style={{ textAlign: "center" }}
|
|
>
|
|
Need help ?
|
|
</a>
|
|
</form>
|
|
);
|
|
};
|