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

81 lines
1.6 KiB
JavaScript
Raw Normal View History

import React from 'react'
import PropTypes from 'prop-types'
import { CX } from '../constants'
2020-02-19 23:57:07 +00:00
2020-04-23 07:13:29 +01:00
// Define sizes for enumeration for Heading component `size` prop
2020-02-19 23:57:07 +00:00
const SIZES = {
h1: 'h1',
h2: 'h2',
h3: 'h3',
h4: 'h4',
h5: 'h5',
h6: 'h6',
}
const ARIA_LEVELS = {
h1: '1',
h2: '2',
h3: '3',
h4: '4',
h5: '5',
h6: '6',
}
2020-04-23 07:13:29 +01:00
/**
* Renders an H-tag
* @param {bool} [props.isCentered] - if text is centered within the element
* @param {string} [props.size='h1'] - the size of the heading
*/
class Heading extends React.PureComponent {
2020-02-19 23:57:07 +00:00
render() {
2020-05-03 06:22:49 +01:00
const { children, size, isCentered } = this.props
2020-02-19 23:57:07 +00:00
2020-04-23 07:13:29 +01:00
// Each size has it's own custom style
const classes = CX({
d: 1,
2020-02-19 23:57:07 +00:00
text: 1,
2020-05-03 06:22:49 +01:00
textAlignCenter: isCentered,
2020-02-19 23:57:07 +00:00
cPrimary: [SIZES.h1, SIZES.h2].indexOf(size) > -1,
cSecondary: [SIZES.h3, SIZES.h4, SIZES.h5].indexOf(size) > -1,
2020-02-19 23:57:07 +00:00
2020-04-29 23:32:49 +01:00
fs24PX: size === SIZES.h1,
fs19PX: size === SIZES.h2,
fs16PX: size === SIZES.h3,
fs13PX: size === SIZES.h4,
fs12PX: size === SIZES.h5,
2020-02-19 23:57:07 +00:00
2020-04-24 04:17:27 +01:00
mt5: [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
fw500: [SIZES.h1, SIZES.h3, SIZES.h5].indexOf(size) > -1,
fw600: [SIZES.h2, 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',
'aria-level': ARIA_LEVELS[size],
2020-02-19 23:57:07 +00:00
},
children,
)
}
2020-04-23 07:13:29 +01:00
}
Heading.propTypes = {
children: PropTypes.any,
isCentered: PropTypes.bool,
size: PropTypes.oneOf(Object.keys(SIZES)),
}
Heading.defaultProps = {
size: SIZES.h1,
}
export default Heading