1import type { IconProps } from '@proton/components';
2import { Icon } from '@proton/components';
3
4import { getTitle } from '../../helpers/title';
5import mdx from './Icon.mdx';
6
7export default {
8    component: Icon,
9    title: getTitle(__filename, false),
10    parameters: {
11        docs: {
12            page: mdx,
13        },
14    },
15};
16
17export const Basic = ({ ...args }: IconProps) => <Icon {...args} />;
18
19Basic.args = {
20    name: 'brand-proton-mail',
21};
22
23export const Color = () => {
24    const colors = ['primary', 'danger', 'success', 'warning', 'info'];
25
26    const sizes = [3, 4, 6, 10, 12] as const;
27
28    return (
29        <div>
30            <div className="flex items-end justify-center">
31                {sizes.map((size) => (
32                    <Icon name="brand-proton-mail" size={size} className="mr-4" />
33                ))}
34            </div>
35            {colors.map((color) => (
36                <div className="flex items-end justify-center">
37                    {sizes.map((size) => (
38                        <Icon name="brand-proton-mail" size={size} className={`color-${color} mr-4`} />
39                    ))}
40                </div>
41            ))}
42        </div>
43    );
44};