1import { Table, TableBody, TableCell, TableHeader, TableRow } from '@proton/components';
2
3import { getTitle } from '../../helpers/title';
4import mdx from './Shadow.mdx';
5
6export default {
7    title: getTitle(__filename, false),
8    parameters: {
9        docs: {
10            page: mdx,
11        },
12    },
13};
14
15export const Shadow = () => {
16    return (
17        <Table className="color-norm">
18            <TableHeader>
19                <TableRow>
20                    <TableCell type="header">Class</TableCell>
21                    <TableCell type="header" className="w-1/2">
22                        Explanation
23                    </TableCell>
24                    <TableCell type="header" className="text-right">
25                        Quick look
26                    </TableCell>
27                </TableRow>
28            </TableHeader>
29            <TableBody>
30                <TableRow>
31                    <TableCell>
32                        <code>shadow-norm</code>
33                    </TableCell>
34                    <TableCell>
35                        Applies a <code>--shadow-norm</code> shadow on an element.
36                    </TableCell>
37                    <TableCell className="text-right">
38                        <span className="inline-block shadow-norm w-custom" style={{ '--w-custom': '3em' }}>
39                            &nbsp;
40                        </span>
41                    </TableCell>
42                </TableRow>
43                <TableRow>
44                    <TableCell>
45                        <code>shadow-raised</code>
46                    </TableCell>
47                    <TableCell>
48                        Applies a <code>--shadow-raised</code> shadow on an element.
49                        <br />
50                        Should only be applied on lifted and out of flow elements, such as modals or tooltips.
51                    </TableCell>
52                    <TableCell className="text-right">
53                        <span className="inline-block shadow-raised w-custom" style={{ '--w-custom': '3em' }}>
54                            &nbsp;
55                        </span>
56                    </TableCell>
57                </TableRow>
58                <TableRow>
59                    <TableCell>
60                        <code>shadow-lifted</code>
61                    </TableCell>
62                    <TableCell>
63                        Applies a <code>--shadow-lifted</code> shadow on an element.
64                        <br />
65                        Should only be applied on lifted and out of flow elements, such as modals or tooltips.
66                    </TableCell>
67                    <TableCell className="text-right">
68                        <span className="inline-block shadow-lifted w-custom" style={{ '--w-custom': '3em' }}>
69                            &nbsp;
70                        </span>
71                    </TableCell>
72                </TableRow>
73                <TableRow>
74                    <TableCell>
75                        <code>shadow-primary</code>
76                    </TableCell>
77                    <TableCell>Applies the primary colored shadow on an element.</TableCell>
78                    <TableCell className="text-right">
79                        <span
80                            className="inline-block shadow-norm shadow-color-primary w-custom mr-2"
81                            style={{ '--w-custom': '3em' }}
82                        >
83                            &nbsp;
84                        </span>
85                        <span
86                            className="inline-block shadow-lifted shadow-color-primary w-custom"
87                            style={{ '--w-custom': '3em' }}
88                        >
89                            &nbsp;
90                        </span>
91                    </TableCell>
92                </TableRow>
93            </TableBody>
94        </Table>
95    );
96};
97
98// ## Example
99
100// Applies the common box shadow on this element.
101
102// <Source
103//     language="html"
104//     format
105//     code={`
106// <div className="shadow-norm">Lorem ipsum dolor sit amet</div>
107// `}
108// />