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

React components that implement Google's Material Design.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = exports.styles = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _clsx = _interopRequireDefault(require("clsx"));

var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));

var _withStyles = _interopRequireDefault(require("../styles/withStyles"));

var _capitalize = _interopRequireDefault(require("../utils/capitalize"));

var _excluded = ["variant", "color", "classes", "className"];

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'
    }
  };
};

exports.styles = styles;

var Typography = _react["default"].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 = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
  var isKrowdyVariant = variant === 'display1' || variant === 'display2' || variant === 'body3' || variant === 'info1' || variant === 'info2';
  var isKrowdyColor = color === 'body' || color === 'info';
  var className = (0, _clsx["default"])(classNameProps, isKrowdyVariant && classes[variant], isKrowdyColor && classes["color".concat((0, _capitalize["default"])(color))]);
  if (isKrowdyVariant) variant = 'body1';
  if (isKrowdyColor) color = 'initial';
  return /*#__PURE__*/_react["default"].createElement(_Typography["default"], (0, _extends2["default"])({
    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["default"].string,

  /**
   * @ignore
   */
  classes: _propTypes["default"].object.isRequired,

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

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

var _default = (0, _withStyles["default"])(styles, {
  name: 'KrowdyTypography'
})(Typography);

exports["default"] = _default;