[Tag] Novo componente de Tag (#71)

* feat(tag): add main tag structure

* fix(tag): fix tag color

src/components/Tag/Tag.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import styled from 'styled-components'
+import PropTypes from 'prop-types'
+import { color, layout, space, border } from 'styled-system'
+import { Typography } from '../'
+
+const Tag = ({ children, variant, fontWeight, color, ...props }) => {
+  return (
+    <Base display='inline-block' p={2} m={2} borderRadius={2} {...props}>
+      <Typography fontSize={`tag.${variant}`} fontWeight={fontWeight} color={color}>
+        {children}
+      </Typography>
+    </Base>
+  )
+}
+
+const Base = styled.div`
+  ${color}
+  ${layout}
+  ${space}
+  ${border}
+  cursor: pointer;
+`
+
+Tag.defaultProps = {
+  variant: 'md',
+  fontWeight: 'tag',
+  backgroundColor: 'blue.main',
+  color: 'white'
+}
+
+Tag.propTypes = {
+  variant: PropTypes.oneOf(['sm', 'md'])
+}
+
+export default Tag

src/components/Tag/index.js

@@ -0,0 +1,5 @@
+import Tag from './Tag'
+
+export { Tag }
+
+export default Tag

src/components/index.js

@@ -1,3 +1,4 @@
 export * from './Typography'
 export * from './Input'
 export * from './Grid'
+export * from './Tag'

src/stories/Tag.stories.mdx

@@ -0,0 +1,25 @@
+import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks'
+
+import { Tag } from '../components'
+import { ThemeProvider } from '../theme'
+
+<Meta title="Tag" component={Tag} />
+
+# Tag
+
+Componente base de Tag
+
+<Preview>
+  <Story name="Base" parameters={{
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/O3bKxIcsj2rc1FNIRclJyT/Design-System?node-id=260%3A593'
+    }
+  }}>
+    <ThemeProvider>
+      <Tag>Selected</Tag>
+    </ThemeProvider>
+  </Story>
+</Preview>
+
+<Props of={Tag} />