import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import Box from '../box';
import cx from 'classnames';
import theme from './theme.css';

class LoadingSpinner extends PureComponent {
  static propTypes = {
    className: PropTypes.string,
    color: PropTypes.oneOf(['white', 'teal']),
    size: PropTypes.oneOf(['small', 'medium']),
  };

  static defaultProps = {
    color: 'teal',
    size: 'medium',
  };

  render() {
    const { className, color, size, ...others } = this.props;
    const classNames = cx(theme['loading-spinner'], theme[`is-${color}`], theme[`is-${size}`], className);

    return <Box data-teamleader-ui="loading-spinner" className={classNames} {...others} />;
  }
}

export default LoadingSpinner;

@@ -213,236 +213,8 @@
 t %7B%0A
-  static propTypes = %7B%0A    className: PropTypes.string,%0A    color: PropTypes.oneOf(%5B'white', 'teal'%5D),%0A    size: PropTypes.oneOf(%5B'small', 'medium'%5D),%0A  %7D;%0A%0A  static defaultProps = %7B%0A    color: 'teal',%0A    size: 'medium',%0A  %7D;%0A%0A
   re
@@ -491,16 +491,242 @@
 %0A  %7D%0A%7D%0A%0A
+LoadingSpinner.propTypes = %7B%0A  className: PropTypes.string,%0A  color: PropTypes.oneOf(%5B'white', 'teal'%5D),%0A  size: PropTypes.oneOf(%5B'small', 'medium'%5D),%0A%7D;%0A%0ALoadingSpinner.defaultProps = %7B%0A  color: 'teal',%0A  size: 'medium',%0A%7D;%0A%0A
 export d

move static propTypes & defaultProps outside of the component class