-
Notifications
You must be signed in to change notification settings - Fork 66
/
focusable.js
57 lines (49 loc) · 1.33 KB
/
focusable.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
import * as glamor from 'glamor'
import React from 'react'
import PropTypes from 'prop-types'
import core from '@pluralsight/ps-design-system-core'
import { withTheme } from '@pluralsight/ps-design-system-theme/react'
const css = {
'.focusable': {
background: core.colors.bone,
borderRadius: '2px',
cursor: 'pointer',
fontSize: core.type.fontSizeSmall,
fontWeight: core.type.fontWeightBook,
lineHeight: core.type.lineHeightStandard,
outline: 'none',
padding: `${core.layout.spacingXSmall} ${core.layout.spacingMedium}`,
position: 'relative',
textAlign: 'center',
width: '100%'
},
'.focusable--theme-light': {
background: core.colors.gray02,
borderColor: core.colors.gray02,
color: core.colors.white
},
'.focusable--shape-pill': {
borderRadius: '1000px'
}
}
const styles = {
focusable: props =>
glamor.css(
css['.focusable'],
css[`.focusable--theme-${props.themeName}`],
css[`.focusable--shape-${props.shape}`]
)
}
const Focusable = props => {
const { shape, themeName, ...filteredProps } = props
return <div {...styles.focusable(props)} {...filteredProps} />
}
Focusable.propTypes = {
shape: PropTypes.string,
themeName: PropTypes.string
}
Focusable.defaultProps = {
children: 'focusable',
tabIndex: 0
}
export default withTheme(Focusable)