1import { Table, TableBody, TableCell, TableHeader, TableRow, Tooltip } from '@proton/components';
2
3import { getTitle } from '../../helpers/title';
4import mdx from './Sizing.mdx';
5
6export default {
7    title: getTitle(__filename, false),
8    parameters: {
9        docs: {
10            page: mdx,
11        },
12    },
13};
14
15const demoItemClasses =
16    'user-select flex items-center py-2 justify-center bg-strong rounded-sm text-center text-nowrap';
17const demoContainerClasses = 'border p-4 my-4 rounded w-full relative flex flex-column gap-2 overflow-auto text-sm';
18
19export const Fractions = () => {
20    const sizes = [
21        '1/2',
22        '1/2',
23        '1/3',
24        '2/3',
25        '1/4',
26        '3/4',
27        '2/4',
28        '2/4',
29        '1/5',
30        '4/5',
31        '2/5',
32        '3/5',
33        '1/6',
34        '5/6',
35        '2/6',
36        '4/6',
37        '3/6',
38        '3/6',
39        '1/10',
40        '9/10',
41        '2/10',
42        '8/10',
43        '3/10',
44        '7/10',
45        '4/10',
46        '6/10',
47        '5/10',
48        '5/10',
49        'full',
50    ];
51
52    return (
53        <div className="border py-4 my-4 px-2 rounded w-full relative gap-y-4 flex overflow-auto">
54            {sizes.map((size) => (
55                <Tooltip
56                    title={size === 'full' ? '100%' : `Equivalent to ${Math.round(eval(size) * 10000) / 100}%`}
57                    openDelay={0}
58                >
59                    <div className={`w-${size} px-2`}>
60                        <div className={demoItemClasses}>w-{size}</div>
61                    </div>
62                </Tooltip>
63            ))}
64        </div>
65    );
66};
67
68export const FractionsTable = () => {
69    return (
70        <Table className="color-norm">
71            <TableHeader>
72                <TableRow>
73                    <TableCell type="header" className="w-1/3">
74                        Class
75                    </TableCell>
76                    <TableCell type="header">Property</TableCell>
77                </TableRow>
78            </TableHeader>
79            <TableBody>
80                {[2, 3, 4, 5, 6, 10].map((i) =>
81                    [...Array(i - 1)].map((_, j) => (
82                        <TableRow key={j}>
83                            <TableCell>{`w-${j + 1}/${i}`}</TableCell>
84                            <TableCell>
85                                <code>inline-size: {Math.round(((j + 1) / i) * 10000) / 100}%;</code>
86                            </TableCell>
87                        </TableRow>
88                    ))
89                )}
90                <TableRow>
91                    <TableCell>w-full</TableCell>
92                    <TableCell>
93                        <code>inline-size: 100%;</code>
94                    </TableCell>
95                </TableRow>
96            </TableBody>
97        </Table>
98    );
99};
100
101export const Responsive = () => {
102    return (
103        <div className="border py-4 px-2 rounded w-full relative gap-y-4 flex overflow-auto">
104            <div className="w-full sm:w-1/2 md:w-2/3 lg:w-1/4 px-2">
105                <div className={demoItemClasses}>item</div>
106            </div>
107            <div className="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 px-2">
108                <div className={demoItemClasses}>item</div>
109            </div>
110            <div className="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 px-2">
111                <div className={demoItemClasses}>item</div>
112            </div>
113            <div className="w-full sm:w-1/2 md:w-2/3 lg:w-1/4 px-2">
114                <div className={demoItemClasses}>item</div>
115            </div>
116        </div>
117    );
118};
119
120Responsive.parameters = {
121    docs: {
122        iframeHeight: '250px',
123        inlineStories: false,
124    },
125    layout: 'fullscreen',
126};
127
128export const Framework = () => {
129    const sizes = [0, 'px', 2, 4, 'full', 'auto'];
130
131    return (
132        <div className={demoContainerClasses}>
133            {sizes.map((size) => (
134                <div className={`${demoItemClasses} w-${size}`}>
135                    <span className={`${size === 'full' || size === 'auto' ? '' : 'color-norm relative ml-8'}`}>
136                        w-{size}
137                    </span>
138                </div>
139            ))}
140        </div>
141    );
142};