import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Box from '../box';
import Icon from '../icon';
import cx from 'classnames';
import buttonTheme from '../button/theme.css';
import theme from './theme.css';

class IconButton extends Component {
  handleMouseUp = (event) => {
    this.blur();
    if (this.props.onMouseUp) {
      this.props.onMouseUp(event);
    }
  };

  handleMouseLeave = (event) => {
    this.blur();
    if (this.props.onMouseLeave) {
      this.props.onMouseLeave(event);
    }
  };

  blur() {
    if (this.buttonNode.blur) {
      this.buttonNode.blur();
    }
  }

  render() {
    const { children, className, disabled, element, icon, size, color, selected, type, ...others } = this.props;

    const classNames = cx(
      buttonTheme['button-base'],
      theme['icon-button'],
      theme[`is-${size}`],
      {
        [theme['is-disabled']]: disabled,
        [theme['is-selected']]: selected,
      },
      className,
    );

    const props = {
      ...others,
      ref: (node) => {
        this.buttonNode = node;
      },
      className: classNames,
      disabled: element === 'button' ? disabled : null,
      element: element,
      onMouseUp: this.handleMouseUp,
      onMouseLeave: this.handleMouseLeave,
      type: element === 'button' ? type : null,
      'data-teamleader-ui': 'icon-button',
    };

    return (
      <Box {...props}>
        <Icon color={color === 'white' ? 'neutral' : color} tint={color === 'white' ? 'lightest' : 'darkest'}>
          {icon}
        </Icon>
        {children}
      </Box>
    );
  }
}

IconButton.propTypes = {
  children: PropTypes.node,
  className: PropTypes.string,
  disabled: PropTypes.bool,
  /** A custom element to be rendered */
  element: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
  icon: PropTypes.element,
  onMouseLeave: PropTypes.func,
  onMouseUp: PropTypes.func,
  /** If true, component will be shown in a selected state */
  selected: PropTypes.bool,
  size: PropTypes.oneOf(['small', 'medium', 'large']),
  color: PropTypes.oneOf(['neutral', 'white', 'mint', 'violet', 'ruby', 'gold', 'aqua']),
  type: PropTypes.string,
};

IconButton.defaultProps = {
  className: '',
  element: 'button',
  size: 'medium',
  color: 'neutral',
  type: 'button',
};

export default IconButton;

@@ -1634,263 +1634,617 @@
 %7B%0A  
-children: PropTypes.node,%0A  className: PropTypes.string,%0A  disabled: PropTypes.bool,%0A  /** A custom element to be rendered */%0A  element: PropTypes.oneOfType(%5BPropTypes.element, PropTypes.string%5D),%0A  icon: PropTypes.element,%0A  onMouseLeave: PropTypes.func,
+/** The content to display inside the button. */%0A  children: PropTypes.node,%0A  /** A class name for the button to give custom styles. */%0A  className: PropTypes.string,%0A  /** If true, component will be disabled. */%0A  disabled: PropTypes.bool,%0A  /** A custom element to be rendered */%0A  element: PropTypes.oneOfType(%5BPropTypes.element, PropTypes.string%5D),%0A  /** The icon displayed inside the button. */%0A  icon: PropTypes.element,%0A  /** Callback function that is fired when mouse leaves the component. */%0A  onMouseLeave: PropTypes.func,%0A  /** Callback function that is fired when the mouse button is released. */
 %0A  o
@@ -2359,16 +2359,45 @@
 s.bool,%0A
+  /** Size of the button. */%0A
   size: 
@@ -2443,16 +2443,62 @@
 rge'%5D),%0A
+  /** The color which the icon should have */%0A
   color:
@@ -2579,16 +2579,53 @@
 qua'%5D),%0A
+  /** Type of the button element. */%0A
   type: 

Update prop type descriptions