From 0d24948066e3ee55c6078786233f853b57489d00 Mon Sep 17 00:00:00 2001
From: Gabriel Azevedo <gabrielx86@live.com>
Date: Wed, 8 Sep 2021 16:40:03 -0300
Subject: [PATCH] New component: Badge (#48)

* feat: added badge component and tests
---
 .../src/Indicators/Badge/Badge.spec.tsx       | 38 +++++++++++++++
 .../src/Indicators/Badge/Badge.stories.tsx    | 31 ++++++++++++
 styleguide/src/Indicators/Badge/Badge.tsx     | 47 +++++++++++++++++++
 styleguide/src/Indicators/Badge/index.tsx     |  1 +
 styleguide/src/Indicators/index.ts            |  1 +
 5 files changed, 118 insertions(+)
 create mode 100644 styleguide/src/Indicators/Badge/Badge.spec.tsx
 create mode 100644 styleguide/src/Indicators/Badge/Badge.stories.tsx
 create mode 100644 styleguide/src/Indicators/Badge/Badge.tsx
 create mode 100644 styleguide/src/Indicators/Badge/index.tsx

diff --git a/styleguide/src/Indicators/Badge/Badge.spec.tsx b/styleguide/src/Indicators/Badge/Badge.spec.tsx
new file mode 100644
index 00000000..b78f1122
--- /dev/null
+++ b/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')
+  })
+})
diff --git a/styleguide/src/Indicators/Badge/Badge.stories.tsx b/styleguide/src/Indicators/Badge/Badge.stories.tsx
new file mode 100644
index 00000000..4a7e183b
--- /dev/null
+++ b/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',
+}
\ No newline at end of file
diff --git a/styleguide/src/Indicators/Badge/Badge.tsx b/styleguide/src/Indicators/Badge/Badge.tsx
new file mode 100644
index 00000000..f808f1da
--- /dev/null
+++ b/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
+}
diff --git a/styleguide/src/Indicators/Badge/index.tsx b/styleguide/src/Indicators/Badge/index.tsx
new file mode 100644
index 00000000..b9eff9e1
--- /dev/null
+++ b/styleguide/src/Indicators/Badge/index.tsx
@@ -0,0 +1 @@
+export * from './Badge'
diff --git a/styleguide/src/Indicators/index.ts b/styleguide/src/Indicators/index.ts
index 9050f815..9a86961d 100644
--- a/styleguide/src/Indicators/index.ts
+++ b/styleguide/src/Indicators/index.ts
@@ -1,3 +1,4 @@
 export * from './Alert'
 export * from './Status'
 export * from './Toast'
+export * from './Badge'