import React from 'react';
import PropTypes from 'prop-types';
import { Tooltip } from 'react-components';

const CLASSNAMES = {
    success: 'mr1 badgeLabel-success',
    default: 'mr1 badgeLabel',
    origin: 'mr1 badgeLabel-grey',
    warning: 'mr1 badgeLabel-warning',
    error: 'mr1 badgeLabel-error'
};

const wrapTooltip = (children, title) => <Tooltip title={title}>{children}</Tooltip>;

const Badge = ({ children, type = 'default', tooltip }) => {
    let badge = <strong className={CLASSNAMES[type]}>{children}</strong>;

    if (tooltip) {
        badge = wrapTooltip(badge, tooltip);
    }

    return badge;
};

Badge.propTypes = {
    children: PropTypes.node.isRequired,
    type: PropTypes.string,
    tooltip: PropTypes.string
};

export default Badge;

@@ -299,16 +299,55 @@
 l-error'
+,%0A    primary: 'mr1 badgeLabel-primary'
 %0A%7D;%0A%0Acon
@@ -509,21 +509,19 @@
 dge = %3Cs
-trong
+pan
  classNa
@@ -559,13 +559,11 @@
 %7D%3C/s
-trong
+pan
 %3E;%0A%0A

Add primary-colored badges (#256)