@krowdy-ui/core/esm/Typography/Typography.js

React components that implement Google's Material Design.

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["variant", "color", "classes", "className"];
import React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import MuiTypography from '@material-ui/core/Typography';
import withStyles from '../styles/withStyles';
import capitalize from '../utils/capitalize';
export var styles = function styles(theme) {
  return {
    body3: {
      fontSize: '1rem'
    },
    colorBody: {
      color: theme.palette.grey[700]
    },
    colorInfo: {
      color: theme.palette.grey[600]
    },
    display1: {
      fontSize: '3.3125rem',
      fontWeight: 900
    },
    display2: {
      fontSize: '3.3125rem',
      fontWeight: 300
    },
    info1: {
      fontSize: '0.75rem'
    },
    info2: {
      fontSize: '0.875rem'
    }
  };
};
var Typography = React.forwardRef(function Typography(_ref, ref) {
  var _ref$variant = _ref.variant,
      variant = _ref$variant === void 0 ? 'body1' : _ref$variant,
      _ref$color = _ref.color,
      color = _ref$color === void 0 ? 'initial' : _ref$color,
      classes = _ref.classes,
      classNameProps = _ref.className,
      props = _objectWithoutProperties(_ref, _excluded);

  var isKrowdyVariant = variant === 'display1' || variant === 'display2' || variant === 'body3' || variant === 'info1' || variant === 'info2';
  var isKrowdyColor = color === 'body' || color === 'info';
  var className = clsx(classNameProps, isKrowdyVariant && classes[variant], isKrowdyColor && classes["color".concat(capitalize(color))]);
  if (isKrowdyVariant) variant = 'body1';
  if (isKrowdyColor) color = 'initial';
  return /*#__PURE__*/React.createElement(MuiTypography, _extends({
    className: className,
    color: color,
    ref: ref,
    variant: variant
  }, props));
});
process.env.NODE_ENV !== "production" ? Typography.propTypes = {
  /**
   * Override or extend the styles applied to the component.
   * See [CSS API](#css) below for more details.
   */
  className: PropTypes.string,

  /**
   * @ignore
   */
  classes: PropTypes.object.isRequired,

  /**
   * The color of the component. It supports those theme colors that make sense for this component.
   */
  color: PropTypes.oneOf(['initial', 'inherit', 'primary', 'secondary', 'textPrimary', 'textSecondary', 'error', 'body', 'info']),

  /**
   * Applies the theme typography styles.
   */
  variant: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'body3', 'caption', 'button', 'overline', 'srOnly', 'inherit', 'display1', 'display2', 'info1', 'info2'])
} : void 0;
export default withStyles(styles, {
  name: 'KrowdyTypography'
})(Typography);