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

class Counter extends PureComponent {
  render() {
    const { children, className, color, count, maxCount, size, ...others } = this.props;

    const classNames = cx(theme['counter'], theme[color], theme[size], className);

    return (
      <Box className={classNames} element="span" {...others} data-teamleader-ui="counter">
        {count > maxCount ? `${maxCount}+` : count} {children}
      </Box>
    );
  }
}

Counter.propTypes = {
  children: PropTypes.any,
  className: PropTypes.string,
  color: PropTypes.oneOf(['neutral', 'mint', 'aqua', 'violet', 'teal', 'gold', 'ruby']),
  count: PropTypes.number.isRequired,
  maxCount: PropTypes.number,
  size: PropTypes.oneOf(['small', 'medium']),
};

Counter.defaultProps = {
  color: 'neutral',
  size: 'medium',
};

export default Counter;

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

class Counter extends PureComponent {
  render() {
    const { children, className, color, count, maxCount, size, borderColor, borderTint, ...others } = this.props;

    const classNames = cx(theme['counter'], theme[color], theme[size], className);

    return (
      <Box className={classNames} element="span" {...others} data-teamleader-ui="counter">
        {count > maxCount ? `${maxCount}+` : count} {children}
      </Box>
    );
  }
}

Counter.propTypes = {
  borderColor: PropTypes.oneOf(['neutral', 'mint', 'aqua', 'violet', 'teal', 'gold', 'ruby']),
  borderTint: PropTypes.oneOf(['darkest', 'dark', 'neutral', 'light', 'lightest']),
  children: PropTypes.any,
  className: PropTypes.string,
  color: PropTypes.oneOf(['neutral', 'mint', 'aqua', 'violet', 'teal', 'gold', 'ruby']),
  count: PropTypes.number.isRequired,
  maxCount: PropTypes.number,
  size: PropTypes.oneOf(['small', 'medium']),
};

Counter.defaultProps = {
  color: 'neutral',
  size: 'medium',
};

export default Counter;

add borderColor and borderTint props to Counter component