/
ToggleBadge.js
53 lines (48 loc) · 1.19 KB
/
ToggleBadge.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
48
49
50
51
52
53
import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import { space, fontSize } from 'styled-system'
import {
applyVariations,
getPaletteColor,
deprecatedColorValue,
deprecatedPropType
} from './utils'
const ToggleBadge = styled.button`
border-radius: ${props => props.theme.radius};
border: 0;
display: inline-block;
font-weight: ${props => props.theme.bold};
font-family: inherit;
cursor: pointer;
background-color: ${props =>
props.selected
? getPaletteColor(props.bg || props.color, 'light')(props)
: props.unSelectedBg};
color: ${getPaletteColor('base')};
${space} ${fontSize};
&:hover {
background-color: ${props =>
getPaletteColor(props.bg || props.color, 'light')(props)};
}
${applyVariations('ToggleBadge')}
`
ToggleBadge.displayName = 'ToggleBadge'
ToggleBadge.propTypes = {
selected: PropTypes.bool,
...space.propTypes,
...fontSize.propTypes,
color: deprecatedColorValue(),
bg: deprecatedPropType('color')
}
ToggleBadge.defaultProps = {
selected: false,
px: 2,
py: 1,
mx: 1,
my: 1,
fontSize: 0,
color: 'primary',
unSelectedBg: 'transparent'
}
export default ToggleBadge