-
Notifications
You must be signed in to change notification settings - Fork 1.1k
/
toolbar-components.js
47 lines (46 loc) · 1.3 KB
/
toolbar-components.js
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
/** @jsx jsx */
import { jsx } from '@emotion/core';
import { colors, gridSize } from '@arch-ui/theme';
import { lighten, darken } from '@arch-ui/color-utils';
import Tooltip from '@arch-ui/tooltip';
import { A11yText } from '@arch-ui/typography';
export let ToolbarButton = ({
isActive,
label,
icon,
as: Tag = 'button',
tooltipPlacement = 'top',
...props
}) => {
return (
<Tooltip placement={tooltipPlacement} css={{ margin: gridSize * 2 }} content={label}>
{ref => (
<Tag
{...(Tag === 'button' ? { type: 'button' } : null)}
css={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'transparent',
border: 0,
cursor: 'pointer',
color: isActive ? colors.primary : 'white',
':hover,:focus': {
color: isActive ? darken(colors.primary, 10) : lighten(colors.primary, 40),
},
':active': {
color: isActive ? darken(colors.primary, 25) : lighten(colors.primary, 10),
},
fontSize: 16,
outline: 'none',
}}
ref={ref}
{...props}
>
{icon}
<A11yText>{label}</A11yText>
</Tag>
)}
</Tooltip>
);
};