/
PatternFlyColor.tsx
115 lines (110 loc) · 3.09 KB
/
PatternFlyColor.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
/** @jsx jsx */
import { FC } from 'react';
import { jsx, Theme } from 'theme-ui';
import { CopyContainer, Popover } from '@component-controls/components';
import { colorToStr } from '../utils';
import { ColorBlockProps, ColorValue } from '../../types';
import { FlexContainerProps, FlexContainer } from '../../components';
/**
* Color item displaying the color as a row with a color circle with CSS var name and on click popup.
* Design inspired by [PatternFly](https://www.patternfly.org/v4/guidelines/colors/).
*/
export const PatternFlyColor: FC<ColorBlockProps> = ({ name, color }) => {
const colorObj: ColorValue =
typeof color === 'string' ? { value: color } : color;
const { value: colorValue, css, description, name: colorName } = colorObj;
const { hex } = colorToStr(colorValue);
const cssNode = (
<div
sx={{
bg: 'gray',
px: 1,
fontSize: 0,
border: `1px solid grey`,
}}
>
{css}
</div>
);
return (
<div sx={{ display: 'flex', flex: '1' }}>
<div
sx={{
width: '100%',
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
fontSize: 0,
p: 2,
}}
>
<Popover
sx={{
cursor: 'pointer',
}}
trigger="click"
placement="right-end"
tooltip={() => (
<div
sx={{
p: 2,
fontSize: 1,
display: 'flex',
flexDirection: 'column',
}}
>
<div sx={{ fontWeight: 'bold', mt: 3 }}>Global CSS variable</div>
{cssNode}
<div sx={{ fontWeight: 'bold', mt: 3 }}>Hex value</div>
<CopyContainer value={hex} name={name}>
{hex}
</CopyContainer>
<div sx={{ fontWeight: 'bold', mt: 3 }}>Usage</div>
<p sx={{ maxWidth: 300, my: 1, fontSize: 0 }}>{description}</p>
</div>
)}
>
<div
sx={{
width: 45,
height: 45,
borderRadius: '50%',
bg: colorValue,
mr: 3,
':hover': {
boxShadow: (t: Theme) => `4px 4px ${t.colors?.shadow}`,
},
}}
/>
</Popover>
<div
sx={{
justifyContent: 'space-between',
display: 'flex',
flexDirection: 'column',
}}
>
<div sx={{ fontWeight: 'bold' }}>{`${hex || colorName}${
colorName && hex ? ` (${colorName})` : ''
}`}</div>
{cssNode}
</div>
</div>
</div>
);
};
/**
*
* palette displayed with PatternFlyColor items
* using a css flex display direction column
*/
export const PatternFlyColorPalette: FC<Omit<
FlexContainerProps,
'children' | 'direction'
>> = props => (
<FlexContainer direction="column" {...props}>
{({ name, value }) => (
<PatternFlyColor key={`color_item_${name}}`} name={name} color={value} />
)}
</FlexContainer>
);