/
Badge.js
80 lines (74 loc) · 1.82 KB
/
Badge.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
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
import React from 'react'
import styled from 'styled-components'
import { themeGet, space } from 'styled-system'
import {
applyVariations,
color,
deprecatedColorValue,
deprecatedPropType
} from './utils'
const type = props => {
const badgeColors = {
blue: {
backgroundColor: props.theme.colors.blue,
color: props.theme.colors.white
},
lightBlue: {
backgroundColor: props.theme.colors.lightBlue,
color: props.theme.colors.darkBlue
},
green: {
backgroundColor: props.theme.colors.green,
color: props.theme.colors.white
},
lightGreen: {
backgroundColor: props.theme.colors.lightGreen,
color: props.theme.colors.darkGreen
},
red: {
backgroundColor: props.theme.colors.red,
color: props.theme.colors.white
},
lightRed: {
backgroundColor: props.theme.colors.lightRed,
color: props.theme.colors.darkRed
},
orange: {
backgroundColor: props.theme.colors.orange,
color: props.theme.colors.text
},
gray: {
backgroundColor: props.theme.colors.gray,
color: props.theme.colors.white
},
lightGray: {
backgroundColor: props.theme.colors.lightGray,
color: props.theme.colors.text
}
}
return (
!(props.bg && props.color) &&
(badgeColors[props.bg] || badgeColors.lightGray)
)
}
const Badge = styled.div`
border-radius: 99999px;
display: inline-block;
font-size: ${props => props.theme.fontSizes[0]}px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: ${themeGet('letterSpacings.caps')};
${space} ${type} ${color};
${applyVariations('Badge')}
`
Badge.displayName = 'Badge'
Badge.propTypes = {
...space.propTypes,
color: deprecatedColorValue(),
bg: deprecatedPropType('color')
}
Badge.defaultProps = {
px: 2,
py: 1
}
export default Badge