New component: Badge (#48)

* feat: added badge component and tests

styleguide/src/Indicators/Badge/Badge.spec.tsx

@@ -0,0 +1,38 @@
+import * as React from "react"
+import { composeStories } from "@storybook/testing-react"
+import { mount } from "@cypress/react"
+import * as stories from "./Badge.stories"
+
+const { Default, Small } = composeStories(stories)
+const badgeClass = '.badge'
+
+describe('Badge tests', () => {
+
+  it('Default', () => {
+    const text = 'Example text'
+    mount(<Default text={text} />)
+    cy.get(badgeClass).contains(text)
+  })
+
+  it('Small', () => {
+    mount(<Small />)
+    cy.get(badgeClass).should('have.class', 'px-1')
+  })
+
+  it('Variants', () => {
+    mount(<Default type="neutral" />)
+    cy.get(badgeClass).should('have.class', 'bg-inverted-2')
+
+    mount(<Default type="primary" />)
+    cy.get(badgeClass).should('have.class', 'bg-primary-dark')
+
+    mount(<Default type="success" />)
+    cy.get(badgeClass).should('have.class', 'bg-success-dark')
+
+    mount(<Default type="warning" />)
+    cy.get(badgeClass).should('have.class', 'bg-warning-dark')
+
+    mount(<Default type="danger" />)
+    cy.get(badgeClass).should('have.class', 'bg-danger-dark')
+  })
+})

styleguide/src/Indicators/Badge/Badge.stories.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { Story, Meta } from '@storybook/react'
+import { withDesign } from 'storybook-addon-designs'
+
+import { Badge, BadgeProps } from './Badge'
+
+export default {
+  title: 'Indicators/Badge',
+  component: Badge,
+  decorators: [withDesign],
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/Z2WDD4SH8zwaJC2K5wbtMO/Sistema-Integrado?node-id=98%3A7360',
+    },
+  },
+  args: {
+    text: 'Texto',
+    type: 'neutral',
+    size: 'default',
+  },
+} as Meta
+
+const Template: Story<BadgeProps> = args => <Badge {...args} />
+
+export const Default = Template.bind({})
+
+export const Small = Template.bind({})
+Small.args = {
+  size: 'small',
+}

styleguide/src/Indicators/Badge/Badge.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+
+const badgeTypes = {
+  neutral: 'bg-inverted-2',
+  primary: 'bg-primary-dark',
+  danger: 'bg-danger-dark',
+  success: 'bg-success-dark',
+  warning: 'bg-warning-dark',
+}
+
+const badgeSizes = {
+  default: 'px-2 py-0.5',
+  small: 'px-1',
+}
+
+const BadgeComponent = ({
+  type = 'neutral',
+  text,
+  size = 'default',
+}: BadgeProps) => {
+  return (
+    <div
+      className={`badge inline-flex items-center justify-center rounded-full ${badgeTypes[type]} ${badgeSizes[size]}`}
+    >
+      <span className={`text-xs tracking-4 font-semibold text-base-1`}>
+        {text}
+      </span>
+    </div>
+  )
+}
+
+export const Badge = React.memo(BadgeComponent)
+
+export interface BadgeProps {
+  /** Badge color
+   * @default neutral
+   * */
+  type?: keyof typeof badgeTypes
+  /**
+   * Badge text
+   * */
+  text?: string
+  /** Size of the badge
+   * @default default
+   * */
+  size?: keyof typeof badgeSizes
+}

styleguide/src/Indicators/Badge/index.tsx

@@ -0,0 +1 @@
+export * from './Badge'

styleguide/src/Indicators/index.ts

@@ -1,3 +1,4 @@
 export * from './Alert'
 export * from './Status'
 export * from './Toast'
+export * from './Badge'