react-conventions/lib/components/Badge/Badge.js

An open source set of React components that implement Ambassador's Design and UX patterns.

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _style = require('./style.scss');

var _style2 = _interopRequireDefault(_style);

var _bind = require('classnames/bind');

var _bind2 = _interopRequireDefault(_bind);

var _Icon = require('../Icon');

var _Icon2 = _interopRequireDefault(_Icon);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var Badge = function Badge(props) {
  var cx = _bind2.default.bind(_style2.default);
  var iconPlusText = props.icon && props.text ? 'padded' : null;
  var iconSize = props.size === 'heavy' ? '30' : '16';
  var badgeClasses = cx(_style2.default.badge, props.theme, props.size, props.optClass, iconPlusText);

  return _react2.default.createElement(
    'div',
    { className: badgeClasses },
    props.icon ? _react2.default.createElement(_Icon2.default, { name: props.icon, height: iconSize, width: iconSize }) : null,
    props.text ? _react2.default.createElement(
      'span',
      null,
      props.text
    ) : null
  );
};

Badge.propTypes = {
  /**
   * Background color of the badge.
   */
  theme: _react2.default.PropTypes.string,
  /**
   * Icon value to display in the badge.
   */
  icon: _react2.default.PropTypes.string,
  /**
   * Text value to display in the badge (number or string).
   */
  text: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.number, _react2.default.PropTypes.string]),
  /**
   * The size of the badge.
   */
  size: _react2.default.PropTypes.string,
  /**
   * Optional CSS class to pass to the badge.
   */
  optClass: _react2.default.PropTypes.string
};

exports.default = Badge;