gab-social/app/javascript/gabsocial/components/heading.js

61 lines
1.3 KiB
JavaScript
Raw Normal View History

2020-02-19 23:57:07 +00:00
import classNames from 'classnames/bind'
const cx = classNames.bind(_s)
const SIZES = {
h1: 'h1',
h2: 'h2',
h3: 'h3',
h4: 'h4',
h5: 'h5',
h6: 'h6',
}
export default class Heading extends PureComponent {
static propTypes = {
children: PropTypes.any,
size: PropTypes.oneOf(Object.keys(SIZES)),
2020-03-11 23:56:18 +00:00
center: PropTypes.bool,
2020-02-19 23:57:07 +00:00
}
static defaultProps = {
size: SIZES.h1,
}
render() {
2020-03-11 23:56:18 +00:00
const { children, size, center } = this.props
2020-02-19 23:57:07 +00:00
const classes = cx({
default: 1,
text: 1,
2020-03-11 23:56:18 +00:00
textAlignCenter: center,
2020-02-19 23:57:07 +00:00
colorPrimary: [SIZES.h1, SIZES.h3].indexOf(size) > -1,
2020-02-21 00:57:29 +00:00
colorSecondary: [SIZES.h2, SIZES.h4, SIZES.h5].indexOf(size) > -1,
2020-02-19 23:57:07 +00:00
fontSize24PX: size === SIZES.h1,
fontSize19PX: size === SIZES.h2,
fontSize16PX: size === SIZES.h3,
fontSize13PX: size === SIZES.h4,
2020-02-21 00:57:29 +00:00
fontSize12PX: size === SIZES.h5,
2020-02-19 23:57:07 +00:00
2020-03-11 23:56:18 +00:00
mt5: [SIZES.h2, SIZES.h4].indexOf(size) > -1,
2020-02-19 23:57:07 +00:00
2020-02-21 00:57:29 +00:00
lineHeight2: size === SIZES.h5,
2020-03-11 23:56:18 +00:00
py2: size === SIZES.h5,
2020-02-21 00:57:29 +00:00
2020-02-19 23:57:07 +00:00
// fontWeightNormal: weight === WEIGHTS.normal,
2020-02-21 00:57:29 +00:00
fontWeightMedium: [SIZES.h1, SIZES.h5].indexOf(size) > -1,
fontWeightBold: [SIZES.h3, SIZES.h4].indexOf(size) > -1,
2020-02-19 23:57:07 +00:00
})
return React.createElement(
size,
{
className: classes,
2020-02-21 00:57:29 +00:00
role: 'heading',
2020-02-19 23:57:07 +00:00
},
children,
)
}
}