1import { useEffect, useState } from 'react';
2
3import tinycolor from 'tinycolor2';
4
5import { Checkbox } from '@proton/components';
6
7import Pill from './Pill';
8import mdx from './Pill.mdx';
9
10export default {
11    component: Pill,
12    title: 'components/Pill',
13    parameters: { docs: { page: mdx } },
14};
15
16export const Basic = () => <Pill>Text</Pill>;
17
18export const OnlyColor = () => <Pill color="#aa0867">Text</Pill>;
19
20export const OnlyBackground = () => <Pill backgroundColor="#d2ffcc">Text</Pill>;
21
22export const Both = () => (
23    <Pill color="#b90404" backgroundColor="#fff2b3">
24        Text
25    </Pill>
26);
27
28export const Sandbox = () => {
29    const [tmpColor, setTempColor] = useState('#9b2cba');
30    const [tmpBackground, setTempBackground] = useState('#d2ffcc');
31    const [hasColor, setHasColor] = useState(true);
32    const [hasBackground, setHasBackground] = useState(false);
33
34    const [isReadable, setIsReadable] = useState(true);
35
36    useEffect(() => {
37        const storyElement = document.querySelector('#pill-color-contrast-checker');
38
39        if (!storyElement) {
40            return;
41        }
42
43        const computedStyles = window.getComputedStyle(storyElement);
44
45        setIsReadable(tinycolor.isReadable(tinycolor(computedStyles.color), tinycolor(computedStyles.backgroundColor)));
46    }, [tmpColor, tmpBackground, hasColor, hasBackground]);
47
48    return (
49        <div className="border rounded p-6">
50            <Pill
51                id="pill-color-contrast-checker"
52                color={hasColor ? tmpColor : undefined}
53                backgroundColor={hasBackground ? tmpBackground : undefined}
54            >
55                Text
56            </Pill>
57
58            {isReadable ? (
59                <p className="text-sm color-weak">Text contrast good</p>
60            ) : (
61                <p className="text-sm color-danger">Caution, text contrast not optimal</p>
62            )}
63
64            <div className="flex gap-4 items-center mt-4">
65                <b>Color</b>
66                <Checkbox onChange={(e) => setHasColor(e.target.checked)} checked={hasColor} />
67                <input
68                    type="color"
69                    onChange={(e) => setTempColor(e.target.value)}
70                    style={{ height: '30px' }}
71                    value={tmpColor}
72                />
73                <input
74                    type="text"
75                    onChange={(e) => setTempColor(e.target.value)}
76                    style={{ height: '30px' }}
77                    value={tmpColor}
78                />
79            </div>
80            <div className="flex gap-4 items-center mt-4">
81                <b>Background Color</b>
82                <Checkbox onChange={(e) => setHasBackground(e.target.checked)} checked={hasBackground} />
83                <input
84                    type="color"
85                    onChange={(e) => setTempBackground(e.target.value)}
86                    style={{ height: '30px' }}
87                    value={tmpBackground}
88                />
89                <input
90                    type="text"
91                    onChange={(e) => setTempBackground(e.target.value)}
92                    style={{ height: '30px' }}
93                    value={tmpBackground}
94                />
95            </div>
96        </div>
97    );
98};