feat(badge): add badge

README.md

@@ -130,7 +130,7 @@ plugins: [windmillPlugin()]
 - [ ] Avatar
 - [x] Transition
 - [x] Backdrop
-- [ ] Badge
+- [x] Badge
 
 Things that are not in the plans for the near future and why:
 

__tests__/Badge.test.js

@@ -0,0 +1,58 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import Badge from '../src/Badge'
+
+describe('Badge', () => {
+  it('should render without crashing', () => {
+    mount(<Badge />)
+  })
+
+  it('should render with base styles', () => {
+    const expected = 'px-2 py-1 text-xs font-medium leading-none rounded-full'
+    const wrapper = mount(<Badge />)
+
+    expect(wrapper.find('span').getDOMNode().getAttribute('class')).toContain(expected)
+  })
+
+  it('should render with success styles', () => {
+    const expected = 'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100'
+    const wrapper = mount(<Badge type="success" />)
+
+    expect(wrapper.find('span').getDOMNode().getAttribute('class')).toContain(expected)
+  })
+
+  it('should render with danger styles', () => {
+    const expected = 'text-red-700 bg-red-100 dark:text-red-100 dark:bg-red-700'
+    const wrapper = mount(<Badge type="danger" />)
+
+    expect(wrapper.find('span').getDOMNode().getAttribute('class')).toContain(expected)
+  })
+
+  it('should render with warning styles', () => {
+    const expected = 'text-orange-700 bg-orange-100 dark:text-white dark:bg-orange-600'
+    const wrapper = mount(<Badge type="warning" />)
+
+    expect(wrapper.find('span').getDOMNode().getAttribute('class')).toContain(expected)
+  })
+
+  it('should render with neutral styles', () => {
+    const expected = 'text-gray-700 bg-gray-100 dark:text-gray-100 dark:bg-gray-700'
+    const wrapper = mount(<Badge type="neutral" />)
+
+    expect(wrapper.find('span').getDOMNode().getAttribute('class')).toContain(expected)
+  })
+
+  it('should render with primary styles', () => {
+    const expected = 'text-purple-700 bg-purple-100 dark:text-white dark:bg-purple-600'
+    const wrapper = mount(<Badge type="primary" />)
+
+    expect(wrapper.find('span').getDOMNode().getAttribute('class')).toContain(expected)
+  })
+
+  it('should render with primary styles when no type is used', () => {
+    const expected = 'text-purple-700 bg-purple-100 dark:text-white dark:bg-purple-600'
+    const wrapper = mount(<Badge />)
+
+    expect(wrapper.find('span').getDOMNode().getAttribute('class')).toContain(expected)
+  })
+})

src/Badge.js

@@ -0,0 +1,40 @@
+import React, { useContext } from 'react'
+import classNames from 'classnames'
+import PropTypes from 'prop-types'
+import { ThemeContext } from './context/ThemeContext'
+import defaultTheme from './themes/default'
+
+function Badge(props) {
+  const { className, children, type, ...other } = props
+
+  const { badge } = useContext(ThemeContext) || defaultTheme
+
+  const baseStyle = badge.base
+  const typeStyle = {
+    success: badge.success,
+    danger: badge.danger,
+    warning: badge.warning,
+    neutral: badge.neutral,
+    primary: badge.primary,
+  }
+
+  const cls = classNames(baseStyle, typeStyle[type], className)
+
+  return (
+    <span className={cls} {...other}>
+      {children}
+    </span>
+  )
+}
+
+Badge.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  type: PropTypes.oneOf(['success', 'danger', 'warning', 'neutral', 'primary']),
+}
+
+Badge.defaultProps = {
+  type: 'primary',
+}
+
+export default Badge

src/index.js

@@ -9,3 +9,4 @@ export { default as Select } from './Select'
 export { default as Textarea } from './Textarea'
 export { default as Transition } from './Transition'
 export { default as Backdrop } from './Backdrop'
+export { default as Badge } from './Badge'

src/themes/default.js

@@ -1,4 +1,13 @@
 export default {
+  // Badge
+  badge: {
+    base: 'px-2 py-1 text-xs font-medium leading-none rounded-full',
+    success: 'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100',
+    danger: 'text-red-700 bg-red-100 dark:text-red-100 dark:bg-red-700',
+    warning: 'text-orange-700 bg-orange-100 dark:text-white dark:bg-orange-600',
+    neutral: 'text-gray-700 bg-gray-100 dark:text-gray-100 dark:bg-gray-700',
+    primary: 'text-purple-700 bg-purple-100 dark:text-white dark:bg-purple-600',
+  },
   // Backdrop
   backdrop: {
     base: