saagie-ui/src/react/core/atoms/text/Text.js

Saagie UI from Saagie Design System

import React, { forwardRef } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { modifierCSS } from '../../../helpers';

const propTypes = {
  /**
   * The component children
   */
  children: PropTypes.node.isRequired,
  /**
   * A className passed to the component
   */
  className: PropTypes.string,
  /**
   * The color of the text
   */
  color: PropTypes.oneOf(['', 'primary', 'warning', 'danger', 'success', 'white', 'light', 'brand-primary']),
  /**
   * Transform the text
   */
  textTransform: PropTypes.oneOf(['', 'uppercase', 'lowercase', 'capitalized']),
  /**
   * Control the alignment of the text
   */
  textAlign: PropTypes.oneOf(['left', 'right', 'center']),
  /**
   * Should cut the text with ellipsis
   */
  isEllipsed: PropTypes.bool,
  /**
   * ClassName applied by default
   */
  defaultClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
  /**
   * The component used for the root node.
   * Either a string to use a DOM element or a component.
   */
  tag: PropTypes.elementType,
  /**
   * The font-size of the text displayed
   */
  fontSize: PropTypes.oneOf(['xxs', 'xs', 'sm', 'ms', '', 'ml', 'lg', 'xl', 'xxl']),
  /**
   * The font-weight of the text displayed
   */
  fontWeight: PropTypes.oneOf(['thin', 'extralight', 'light', 'normal', 'medium', 'semibold', 'bold', 'extrabold', 'black']),
};

const defaultProps = {
  className: '',
  color: '',
  textTransform: '',
  textAlign: 'left',
  isEllipsed: false,
  defaultClassName: 'sui-a-text',
  tag: 'div',
  fontSize: '',
  fontWeight: 'normal',
};

export const Text = forwardRef(({
  children,
  className,
  color,
  defaultClassName,
  textTransform,
  textAlign,
  isEllipsed,
  tag: Tag,
  fontSize,
  fontWeight,
  ...attributes
}, ref) => {
  const classes = classnames(
    className,
    defaultClassName,
    modifierCSS(color),
    modifierCSS(textTransform),
    modifierCSS(textAlign),
    isEllipsed ? 'as--ellipsed' : '',
    modifierCSS(fontSize),
    modifierCSS(fontWeight),
  );

  return (
    <Tag ref={ref} {...attributes} className={classes}>
      {children}
    </Tag>
  );
});

Text.propTypes = propTypes;
Text.defaultProps = defaultProps;