1import { Collapsible, CollapsibleContent, CollapsibleHeader, CollapsibleHeaderButton, CollapsibleHeaderIconButton, Icon } from '@proton/components';
2
3
4
5import mdx from './Collapsible.mdx';
6
7
8export default {
9    component: Collapsible,
10    subcomponents: { CollapsibleHeader, CollapsibleContent, CollapsibleHeaderButton, CollapsibleHeaderIconButton },
11    title: 'components/Collapsible',
12    parameters: { docs: { page: mdx } },
13};
14
15export const Basic = () => (
16    <Collapsible>
17        <CollapsibleHeader
18            suffix={
19                <CollapsibleHeaderIconButton>
20                    <Icon name="chevron-down" />
21                </CollapsibleHeaderIconButton>
22            }
23        >
24            Collapsible header
25        </CollapsibleHeader>
26        <CollapsibleContent>
27            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
28            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
29            ea commodo consequat.
30        </CollapsibleContent>
31    </Collapsible>
32);
33
34export const ExpandedByDefault = () => (
35    <Collapsible expandByDefault>
36        <CollapsibleHeader
37            suffix={
38                <CollapsibleHeaderIconButton>
39                    <Icon name="chevron-down" />
40                </CollapsibleHeaderIconButton>
41            }
42        >
43            Collapsible header
44        </CollapsibleHeader>
45        <CollapsibleContent>
46            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
47            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
48            ea commodo consequat.
49        </CollapsibleContent>
50    </Collapsible>
51);
52
53export const ExpandButton = () => (
54    <>
55        <Collapsible className="mb-4">
56            <CollapsibleHeader
57                suffix={
58                    <CollapsibleHeaderIconButton>
59                        <Icon name="chevron-down" />
60                    </CollapsibleHeaderIconButton>
61                }
62            >
63                Chevron icon
64            </CollapsibleHeader>
65            <CollapsibleContent>
66                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
67                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
68                ex ea commodo consequat.
69            </CollapsibleContent>
70        </Collapsible>
71        <Collapsible className="mb-4">
72            <CollapsibleHeader
73                suffix={
74                    <CollapsibleHeaderIconButton>
75                        <Icon name="brand-proton" />
76                    </CollapsibleHeaderIconButton>
77                }
78            >
79                Proton icon
80            </CollapsibleHeader>
81            <CollapsibleContent>
82                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
83                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
84                ex ea commodo consequat.
85            </CollapsibleContent>
86        </Collapsible>
87        <Collapsible>
88            <CollapsibleHeader>Omitted icon</CollapsibleHeader>
89            <CollapsibleContent>
90                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
91                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
92                ex ea commodo consequat.
93            </CollapsibleContent>
94        </Collapsible>
95
96        <Collapsible>
97            <CollapsibleHeader suffix={<CollapsibleHeaderButton>Toggle</CollapsibleHeaderButton>}>
98                Button
99            </CollapsibleHeader>
100            <CollapsibleContent>
101                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
102                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
103                ex ea commodo consequat.
104            </CollapsibleContent>
105        </Collapsible>
106    </>
107);
108
109export const TooltipText = () => (
110    <Collapsible>
111        <CollapsibleHeader
112            suffix={
113                <CollapsibleHeaderIconButton expandText="I can be opened" collapseText="I can be collapsed">
114                    <Icon name="chevron-down" />
115                </CollapsibleHeaderIconButton>
116            }
117        >
118            Collapsible header
119        </CollapsibleHeader>
120        <CollapsibleContent>
121            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
122            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
123            ea commodo consequat.
124        </CollapsibleContent>
125    </Collapsible>
126);
127
128export const FullWidth = () => (
129    <Collapsible>
130        <CollapsibleHeader
131            suffix={
132                <CollapsibleHeaderIconButton>
133                    <Icon name="chevron-down" />
134                </CollapsibleHeaderIconButton>
135            }
136            disableFullWidth
137        >
138            Collapsible header not full width
139        </CollapsibleHeader>
140        <CollapsibleContent>
141            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
142            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
143            ea commodo consequat.
144        </CollapsibleContent>
145    </Collapsible>
146);
147
148export const TogglableContainer = () => (
149    <Collapsible>
150        <CollapsibleHeader
151            suffix={
152                <CollapsibleHeaderIconButton>
153                    <Icon name="chevron-down" />
154                </CollapsibleHeaderIconButton>
155            }
156            disableContainerToggle
157        >
158            Collapsible header not clickable
159        </CollapsibleHeader>
160        <CollapsibleContent>
161            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
162            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
163            ea commodo consequat.
164        </CollapsibleContent>
165    </Collapsible>
166);