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

import React from 'react'
import PropTypes from 'prop-types'
import { CX } from '../constants'

// Define colors for enumeration for Text component `color` prop
const COLORS = {
  primary: 'primary',
  secondary: 'secondary',
  tertiary: 'tertiary',
  brand: 'brand',
  error: 'error',
  white: 'white',
  inherit: 'inherit',
}

// Define sizes for enumeration for Text component `size` prop
const SIZES = {
  extraSmall: 'extraSmall',
  small: 'small',
  normal: 'normal',
  medium: 'medium',
  large: 'large',
  extraLarge: 'extraLarge',
  extraExtraLarge: 'extraExtraLarge',
}

// Define weights for enumeration for Text component `weight` prop
const WEIGHTS = {
  normal: 'normal',
  medium: 'medium',
  bold: 'bold',
  extraBold: 'extraBold',
}

// Define alignments for enumeration for Text component `align` prop
const ALIGNMENTS = {
  center: 'center',
  left: 'left',
}

/**
 * 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
 */
class Text extends React.PureComponent {

  render() {
    const {
      tagName,
      className,
      children,
      color,
      size,
      weight,
      align,
      htmlFor,
      isBadge,
      hasUnderline,
    } = this.props

    // Style the component according to props
    const classes = CX(className, {
      d: 1,
      text: 1,

      radiusSmall: isBadge,
      lineHeight15: isBadge,
      px5: isBadge,

      cPrimary: color === COLORS.primary,
      cSecondary: color === COLORS.secondary,
      cTertiary: color === COLORS.tertiary,
      cBrand: color === COLORS.brand,
      cWhite: color === COLORS.white,
      cError: color === COLORS.error,
      inherit: color === COLORS.inherit,
      
      fs24PX: size === SIZES.extraExtraLarge,
      fs19PX: size === SIZES.extraLarge,
      fs16PX: size === SIZES.large,
      fs15PX: size === SIZES.medium,
      fs14PX: size === SIZES.normal,
      fs13PX: size === SIZES.small,
      fs12PX: size === SIZES.extraSmall,

      fw400: weight === WEIGHTS.normal,
      fw500: weight === WEIGHTS.medium,
      fw600: weight === WEIGHTS.bold,
      fw800: weight === WEIGHTS.extraBold,

      textAlignLeft: align === ALIGNMENTS.left,
      textAlignCenter: align === ALIGNMENTS.center,

      underline: hasUnderline,
    })

    return React.createElement(
      tagName,
      {
        htmlFor,
        className: classes,
      },
      children,
    )
  }

}

Text.propTypes = {
  align: PropTypes.oneOf(Object.keys(ALIGNMENTS)),
  isBadge: PropTypes.bool,
  children: PropTypes.any,
  className: PropTypes.string,
  color: PropTypes.oneOf(Object.keys(COLORS)),
  hasUnderline: PropTypes.bool,
  htmlFor: PropTypes.string,
  size: PropTypes.oneOf(Object.keys(SIZES)),
  tagName: PropTypes.string,
  weight: PropTypes.oneOf(Object.keys(WEIGHTS)),
}

Text.defaultProps = {
  tagName: 'span',
  align: ALIGNMENTS.left,
  color: COLORS.primary,
  size: SIZES.normal,
  weight: WEIGHTS.normal,
}

export default Text