1import {
2    InputFieldStacked,
3    InputFieldStackedGroup,
4    InputFieldTwo,
5    Option,
6    SelectTwo,
7    TextAreaTwo,
8} from '@proton/components';
9
10import { getTitle } from '../../helpers/title';
11import mdx from './InputFieldStacked.mdx';
12
13export default {
14    component: InputFieldTwo,
15    title: getTitle(__filename, false),
16    parameters: {
17        docs: {
18            page: mdx,
19        },
20    },
21};
22
23export const Basic = () => {
24    return (
25        <InputFieldStacked icon="alias" classname="mb-2">
26            <InputFieldTwo
27                type="text"
28                label="Title"
29                className="rounded-none"
30                placeholder="e.g., Amazon, eBay, Etsy"
31                autoFocus
32                unstyled
33            />
34        </InputFieldStacked>
35    );
36};
37
38export const BoldExample = () => {
39    return (
40        <InputFieldStacked isBigger classname="mb-2">
41            <InputFieldTwo
42                type="text"
43                label="Title"
44                className="text-bold rounded-none"
45                placeholder="e.g., Amazon, eBay, Etsy"
46                autoFocus
47                unstyled
48            />
49        </InputFieldStacked>
50    );
51};
52
53export const Group = () => (
54    <InputFieldStackedGroup classname="mb-4">
55        <InputFieldStacked isGroupElement icon="alias">
56            <InputFieldTwo label="Your alias" type="text" unstyled inputClassName="rounded-none" value="Test" />
57        </InputFieldStacked>
58        <InputFieldStacked isGroupElement icon="arrow-up-and-right-big">
59            <InputFieldTwo label="Forwards to" as={SelectTwo} unstyled className="rounded-none" placeholder="one">
60                <Option title="one" value="one" />
61                <Option title="two" value="two" />
62                <Option title="three" value="three" />
63            </InputFieldTwo>
64        </InputFieldStacked>
65        <InputFieldStacked isGroupElement icon="note">
66            <InputFieldTwo
67                label="Note"
68                as={TextAreaTwo}
69                autoGrow
70                unstyled
71                className="rounded-none p-0 resize-none"
72                placeholder="Textarea can autogrow."
73            />
74        </InputFieldStacked>
75    </InputFieldStackedGroup>
76);