import React from 'react';
import PropTypes from 'prop-types';
import { primaryFontStyle, secondaryFontStyle } from 'styles/font';

/**
 * Text component with automatic typeface formatting.
 */
const Text = (props) => {
  const { secondary, size, color, bold, inline, uppercase, style: overrides, children } = props;

  const styleFactory = secondary ? secondaryFontStyle : primaryFontStyle;
  const style = {
    ...styleFactory(size, color, bold),
    textTransform: uppercase ? 'uppercase' : 'none',
    ...overrides,
  };

  if (inline) {
    return (
      <span style={style}>
        {children}
      </span>
    );
  }

  return (
    <p style={style}>
      {children}
    </p>
  );
};

Text.propTypes = {
  secondary: PropTypes.bool,
  size: PropTypes.string,
  color: PropTypes.string,
  bold: PropTypes.bool,
  inline: PropTypes.bool,
  uppercase: PropTypes.bool,
  style: PropTypes.object,
  children: PropTypes.any,
};

Text.defaultProps = {
  secondary: false,
  size: 'iota',
  color: 'gray80',
  bold: false,
  inline: false,
  uppercase: false,
  style: {},
  children: null,
};

export default Text;

@@ -222,16 +222,20 @@
  const %7B
+%0A   
  seconda
@@ -241,35 +241,51 @@
 ary,
+%0A   
  size,
+%0A   
  color,
+%0A   
  bold,
+%0A   
  inline,
  upp
@@ -280,16 +280,20 @@
  inline,
+%0A   
  upperca
@@ -295,16 +295,20 @@
 percase,
+%0A   
  style: 
@@ -317,16 +317,20 @@
 errides,
+%0A   
  childre
@@ -330,16 +330,37 @@
 children
+,%0A    ...proxyProps%0A 
  %7D = pro
@@ -619,32 +619,48 @@
 an style=%7Bstyle%7D
+ %7B...proxyProps%7D
 %3E%0A        %7Bchild
@@ -721,16 +721,32 @@
 =%7Bstyle%7D
+ %7B...proxyProps%7D
 %3E%0A      

Allow props proxy on Text