Added Badge component

packages/docs/src/App.js

@@ -215,6 +215,7 @@ const ComponentNav = () => {
           { title: 'Avatar', path: 'Avatar' },
           { title: 'Checkbox', path: 'Checkbox' },
           { title: 'Button', path: 'Button' },
+          { title: 'Badge', path: 'Badge' },
           { title: 'Heading', path: 'Heading' },
           { title: 'Image', path: 'Image' },
           { title: 'Input', path: 'Input' },

packages/docs/src/pages/components/badge.js

@@ -0,0 +1,61 @@
+import React from 'react'
+import { Badge } from 'react-ui'
+import {
+  Page,
+  Section,
+  Props,
+  Example,
+} from '../../components'
+
+const Documentation = () => {
+  return (
+    <Page
+      title="Badge"
+      tagline="A badge is way to display numerical counter"
+    >
+      <Example>
+        <Example.Preview align="center">
+          <Badge>99</Badge>
+        </Example.Preview>
+        <Example.Code>
+          {`
+              <Badge>99</Badge>
+            `}
+        </Example.Code>
+      </Example>
+
+      <Section title="Props">
+        <Props
+          props={[
+            {
+              name: 'variant',
+              type: 'enum',
+              description: 'defined in theme',
+              default: 'primary'
+            }
+          ]}
+        />
+      </Section>
+
+      <Section title="Examples">
+        <Example title="Variants">
+
+          <Example.Preview gap={4}>
+            <Badge>12</Badge>
+            <Badge variant="secondary">
+              0
+            </Badge>
+            <Badge variant="destructive">45</Badge>
+          </Example.Preview>
+          <Example.Code>{`
+            <Badge>12</Badge>
+            <Badge variant="secondary">0</Badge>
+            <Badge variant="destructive">45</Badge>
+          `}</Example.Code>
+        </Example>
+      </Section>
+    </Page>
+  )
+}
+
+export default Documentation

packages/docs/src/pages/index.js

@@ -1,6 +1,7 @@
 export { default as Avatar } from './components/avatar'
 export { default as Checkbox } from './components/checkbox'
 export { default as Button } from './components/button'
+export { default as Badge } from './components/badge'
 export { default as Element } from './components/element'
 export { default as Heading } from './components/heading'
 export { default as Image } from './components/image'

packages/react-ui/index.js

@@ -2,6 +2,7 @@ import { version } from './package.json'
 
 export * from './src/components/avatar'
 export * from './src/components/button'
+export * from './src/components/badge'
 export * from './src/components/checkbox'
 export * from './src/components/heading'
 export * from './src/components/image'

packages/react-ui/src/components/badge/badge.styles.js

@@ -0,0 +1,13 @@
+export const styles = {
+    Badge: {
+      boxSizing: 'border-box',
+      display: 'inline-flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      minWidth: 'fit-content',
+      fontWeight: 'semibold',
+      minWidth: 'fit-content',
+      lineHeight: 0
+    }
+  }
+

packages/react-ui/src/components/badge/index.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Element } from '../../primitives'
+import { styles } from './badge.styles'
+import { merge } from '../../utils'
+
+const Badge = React.forwardRef(function Button(
+  { size, css, ...props },
+  ref
+) {
+
+  return (
+    <Element
+      ref={ref}
+      as="div"
+      component="Badge"
+      css={merge(styles.Badge, css)}
+      {...props}
+    />
+  )
+})
+
+Badge.propTypes = {
+  /** Description of an Badge prop */
+  variant: PropTypes.string
+}
+
+Badge.defaultProps = {
+  variant: 'primary'
+}
+
+export { Badge }

packages/react-ui/src/themes/base.js

@@ -143,6 +143,30 @@ const components = {
       }
     }
   },
+  Badge: {
+    fontSize: 2,
+    borderRadius: 3,
+    paddingX: 4,
+    border: '1px solid',
+    sizes: { small: 6, medium: 8, large: 10 },
+    variants: {
+      primary: {
+        // primary is the default variant for badges
+        backgroundColor:'lightgrey',
+        borderColor:'black'
+      },
+      secondary: {
+        backgroundColor: 'black',
+        color: 'white',
+        borderColor:'white'
+      },
+      destructive: {
+        backgroundColor:'red',
+        color:'white',
+        borderColor:'white'
+      }
+    }
+  },
   Checkbox: {
     border: '1px solid'
   },

packages/react-ui/src/themes/dark.js

@@ -283,6 +283,31 @@ const components = {
       }
     }
   },
+  Badge: {
+    fontSize: 2,
+    borderRadius: 3,
+    paddingX: 4,
+    border: '1px solid',
+
+    sizes: { small: 6, medium: 8, large: 10 },
+    variants: {
+      primary: {
+        backgroundColor: 'greens.700',
+        color: 'white',
+        borderColor: 'greens.700'
+      },
+      secondary: {
+        backgroundColor: 'grays.800',
+        color: 'text.body',
+        borderColor: 'grays.800'
+      },
+      destructive: {
+        backgroundColor: 'reds.600',
+        color: 'white',
+        borderColor: 'reds.600'
+      }
+    }
+  },
   Checkbox: {
     border: '1px solid'
   },

packages/react-ui/src/themes/light.js

@@ -275,6 +275,31 @@ const components = {
       }
     }
   },
+  Badge: {
+    fontSize: 2,
+    borderRadius: 3,
+    paddingX: 4,
+    border: '1px solid',
+
+    sizes: { small: 6, medium: 8, large: 10 },
+    variants: {
+      primary: {
+        backgroundColor: 'greens.700',
+        color: 'white',
+        borderColor: 'greens.700'
+      },
+      secondary: {
+        backgroundColor: 'grays.300',
+        color: 'text.body',
+        borderColor: 'grays.300'
+      },
+      destructive: {
+        backgroundColor: 'reds.600',
+        color: 'white',
+        borderColor: 'reds.600'
+      }
+    }
+  },
   Checkbox: {
     border: '1px solid'
   },