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

133 lines
3.4 KiB
JavaScript
Raw Normal View History

2020-02-19 23:57:07 +00:00
import classNames from 'classnames/bind'
2020-04-23 07:13:29 +01:00
// Bind CSS Modules global variable `_s` to classNames module
2020-02-19 23:57:07 +00:00
const cx = classNames.bind(_s)
2020-04-23 07:13:29 +01:00
// Define colors for enumeration for Text component `color` prop
2020-02-19 23:57:07 +00:00
const COLORS = {
primary: 'primary',
secondary: 'secondary',
2020-04-17 06:35:46 +01:00
tertiary: 'tertiary',
2020-02-19 23:57:07 +00:00
brand: 'brand',
error: 'error',
white: 'white',
2020-02-21 00:57:29 +00:00
inherit: 'inherit',
2020-02-19 23:57:07 +00:00
}
2020-04-23 07:13:29 +01:00
// Define sizes for enumeration for Text component `size` prop
2020-02-19 23:57:07 +00:00
const SIZES = {
extraSmall: 'extraSmall',
small: 'small',
normal: 'normal',
medium: 'medium',
large: 'large',
extraLarge: 'extraLarge',
}
2020-04-23 07:13:29 +01:00
// Define weights for enumeration for Text component `weight` prop
2020-02-19 23:57:07 +00:00
const WEIGHTS = {
normal: 'normal',
medium: 'medium',
bold: 'bold',
extraBold: 'extraBold',
}
2020-04-23 07:13:29 +01:00
// Define alignments for enumeration for Text component `align` prop
2020-02-21 00:57:29 +00:00
const ALIGNMENTS = {
center: 'center',
left: 'left',
}
2020-04-23 07:13:29 +01:00
/**
* Renders a text component
* @param {string} [props.align='left] - the alignment of the text
* @param {bool} [props.isBadge] - to style the text as a badge
* @param {string} [props.className] - add custom className
* @param {string} [props.color='primary'] color of the text
* @param {bool} [props.hasUnderline] - if the text is underlined
* @param {string} [props.htmlFor] - define the `for` attribute on the tag
* @param {string} [props.size='normal'] size of the text
* @param {string} [props.tagName='span'] tagName of the text element
* @param {string} [props.weight='normal'] weight of the text
*/
2020-02-19 23:57:07 +00:00
export default class Text extends PureComponent {
2020-04-23 07:13:29 +01:00
2020-02-19 23:57:07 +00:00
static propTypes = {
2020-04-23 07:13:29 +01:00
align: PropTypes.oneOf(Object.keys(ALIGNMENTS)),
isBadge: PropTypes.bool,
2020-02-19 23:57:07 +00:00
children: PropTypes.any,
2020-04-23 07:13:29 +01:00
className: PropTypes.string,
2020-02-19 23:57:07 +00:00
color: PropTypes.oneOf(Object.keys(COLORS)),
2020-04-23 07:13:29 +01:00
hasUnderline: PropTypes.bool,
htmlFor: PropTypes.string,
2020-02-19 23:57:07 +00:00
size: PropTypes.oneOf(Object.keys(SIZES)),
2020-04-23 07:13:29 +01:00
tagName: PropTypes.string,
2020-02-19 23:57:07 +00:00
weight: PropTypes.oneOf(Object.keys(WEIGHTS)),
}
static defaultProps = {
tagName: 'span',
2020-04-23 07:13:29 +01:00
align: ALIGNMENTS.left,
2020-02-19 23:57:07 +00:00
color: COLORS.primary,
size: SIZES.normal,
weight: WEIGHTS.normal,
}
render() {
2020-02-21 00:57:29 +00:00
const {
tagName,
className,
children,
color,
size,
weight,
2020-03-26 03:11:32 +00:00
align,
2020-04-02 04:17:21 +01:00
htmlFor,
2020-04-23 07:13:29 +01:00
isBadge,
hasUnderline,
2020-02-21 00:57:29 +00:00
} = this.props
2020-02-19 23:57:07 +00:00
2020-04-23 07:13:29 +01:00
// Style the component according to props
2020-02-19 23:57:07 +00:00
const classes = cx(className, {
default: 1,
text: 1,
2020-04-23 07:13:29 +01:00
radiusSmall: isBadge,
lineHeight15: isBadge,
px5: isBadge,
2020-04-02 04:17:21 +01:00
2020-02-19 23:57:07 +00:00
colorPrimary: color === COLORS.primary,
colorSecondary: color === COLORS.secondary,
2020-04-17 06:35:46 +01:00
colorTertiary: color === COLORS.tertiary,
2020-02-19 23:57:07 +00:00
colorBrand: color === COLORS.brand,
colorWhite: color === COLORS.white,
2020-02-21 00:57:29 +00:00
inherit: color === COLORS.inherit,
2020-02-19 23:57:07 +00:00
2020-04-29 23:32:49 +01:00
fs19PX: size === SIZES.large,
fs15PX: size === SIZES.medium,
fs14PX: size === SIZES.normal,
fs13PX: size === SIZES.small,
fs12PX: size === SIZES.extraSmall,
2020-02-19 23:57:07 +00:00
fontWeightNormal: weight === WEIGHTS.normal,
fontWeightMedium: weight === WEIGHTS.medium,
fontWeightBold: weight === WEIGHTS.bold,
2020-02-21 00:57:29 +00:00
fontWeightExtraBold: weight === WEIGHTS.extraBold,
textAlignLeft: align === ALIGNMENTS.left,
textAlignCenter: align === ALIGNMENTS.center,
2020-02-19 23:57:07 +00:00
2020-04-23 07:13:29 +01:00
underline: hasUnderline,
2020-02-19 23:57:07 +00:00
})
return React.createElement(
tagName,
{
2020-03-26 03:11:32 +00:00
htmlFor,
2020-02-19 23:57:07 +00:00
className: classes,
},
children,
)
}
2020-04-23 07:13:29 +01:00
2020-02-19 23:57:07 +00:00
}