From 6fa9fd5af7b12a2c526a99d6ecda1da0add7b494 Mon Sep 17 00:00:00 2001
From: "Joel S. Almeida" <82453590+joelsalmeida@users.noreply.github.com>
Date: Mon, 11 Nov 2024 11:05:47 -0300
Subject: [PATCH] TEC-4404: Badge component (#35)

---
 package.json                           |  4 +-
 src/components/Badge/index.stories.tsx | 94 ++++++++++++++++++++++++++
 src/components/Badge/index.tsx         | 22 ++++++
 src/components/Badge/style.tsx         | 22 ++++++
 src/components/Badge/type.ts           |  8 +++
 src/components/index.ts                |  2 +
 src/index.ts                           |  2 +
 7 files changed, 152 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Badge/index.stories.tsx
 create mode 100644 src/components/Badge/index.tsx
 create mode 100644 src/components/Badge/style.tsx
 create mode 100644 src/components/Badge/type.ts

diff --git a/package.json b/package.json
index 2f3599c..616db22 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "chardonnay",
-  "version": "1.0.39",
+  "version": "1.0.40",
   "description": "A mobile first frontend framework made with wine",
   "homepage": "https://vissimo-group.github.io/chardonnay/",
   "main": "./dist/index.js",
@@ -107,4 +107,4 @@
   },
   "readme": "ERROR: No README data found!",
   "_id": "chardonnay@1.0.1"
-}
+}
\ No newline at end of file
diff --git a/src/components/Badge/index.stories.tsx b/src/components/Badge/index.stories.tsx
new file mode 100644
index 0000000..97ef91d
--- /dev/null
+++ b/src/components/Badge/index.stories.tsx
@@ -0,0 +1,94 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Money } from 'semillon'
+import { Badge } from '.'
+
+const meta: Meta<typeof Badge> = {
+  component: Badge,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['small', 'normal'],
+      description: 'The size of the Badge.',
+    },
+    backgroundColor: {
+      control: { type: 'color' },
+      description: 'The background color of the Badge.',
+    },
+    fullWidth: {
+      control: { type: 'boolean' },
+      description:
+        'If true, the Badge will take up the full width of its container.',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ display: 'flex', justifyContent: 'center' }}>
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof Badge>
+
+export const Small: Story = {
+  args: {
+    size: 'small',
+  },
+  render: (args) => <Badge {...args}>A nice label</Badge>,
+}
+
+export const Normal: Story = {
+  args: {
+    size: 'normal',
+  },
+  render: (args) => <Badge {...args}>A nice label</Badge>,
+}
+
+export const WithFullWidth: Story = {
+  args: {
+    size: 'normal',
+    fullWidth: true,
+  },
+  render: (args) => <Badge {...args}>A nice label</Badge>,
+}
+
+export const WithIcon: Story = {
+  args: {
+    size: 'normal',
+  },
+  render: (args) => (
+    <Badge {...args}>
+      <Money color="white" size={16} />A nice label
+    </Badge>
+  ),
+}
+
+export const WithCustomTextColor: Story = {
+  args: {
+    size: 'normal',
+  },
+  render: (args) => (
+    <Badge {...args}>
+      <Money color="#1B6AA3" size={16} />
+
+      <span style={{ color: '#1B6AA3', fontSize: '12px', lineHeight: '1' }}>
+        A nice label
+      </span>
+    </Badge>
+  ),
+}
+
+export const WithCustomBackgroundColor: Story = {
+  args: {
+    backgroundColor: '#CE2A36',
+    size: 'normal',
+  },
+  render: (args) => (
+    <Badge {...args}>
+      <Money size={16} />A nice label
+    </Badge>
+  ),
+}
diff --git a/src/components/Badge/index.tsx b/src/components/Badge/index.tsx
new file mode 100644
index 0000000..8875a79
--- /dev/null
+++ b/src/components/Badge/index.tsx
@@ -0,0 +1,22 @@
+import { BadgeProps } from './type'
+import { BadgeStyled } from './style'
+import { Colors } from '../../tokens'
+
+const Badge = ({
+  size = 'small',
+  backgroundColor = `${Colors.light.feedback.feedbackInfo100}`,
+  children,
+  fullWidth = false,
+}: BadgeProps) => {
+  return (
+    <BadgeStyled
+      $size={size}
+      $backgroundColor={backgroundColor}
+      $fullWidth={fullWidth}
+    >
+      {children}
+    </BadgeStyled>
+  )
+}
+
+export { Badge }
diff --git a/src/components/Badge/style.tsx b/src/components/Badge/style.tsx
new file mode 100644
index 0000000..41503d0
--- /dev/null
+++ b/src/components/Badge/style.tsx
@@ -0,0 +1,22 @@
+import styled from 'styled-components'
+
+const BadgeStyled = styled.div<{
+  $size?: string
+  $backgroundColor?: string
+  $fullWidth?: boolean
+}>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+  width: ${(props) => (props.$fullWidth ? '100%' : 'fit-content')};
+  padding: ${(props) => (props.$size === 'small' ? '4px 6px' : '6px 8px')};
+  border-radius: 4px;
+  background-color: ${(props) =>
+    props.$backgroundColor ? `${props.$backgroundColor}` : '#2391E1'};
+  color: white;
+  font-size: 0.75rem;
+  line-height: 1;
+`
+
+export { BadgeStyled }
diff --git a/src/components/Badge/type.ts b/src/components/Badge/type.ts
new file mode 100644
index 0000000..9c1d4d6
--- /dev/null
+++ b/src/components/Badge/type.ts
@@ -0,0 +1,8 @@
+type BadgeProps = {
+  size?: 'small' | 'normal'
+  backgroundColor?: string
+  children?: React.ReactNode
+  fullWidth?: boolean
+}
+
+export type { BadgeProps }
diff --git a/src/components/index.ts b/src/components/index.ts
index 8be68d2..a13b65a 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -28,6 +28,7 @@ import * as RadioTag from './RadioTag'
 import * as PaymentMethod from './PaymentMethods'
 import * as PurchaseSummary from './PurchaseSummary/PurchaseSummary'
 import { CreditCard } from './CreditCard'
+import { Badge } from './Badge'
 
 export {
   Border,
@@ -60,4 +61,5 @@ export {
   PaymentMethod,
   PurchaseSummary,
   CreditCard,
+  Badge,
 }
diff --git a/src/index.ts b/src/index.ts
index 4698d4e..ee37142 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -32,6 +32,7 @@ import {
   PaymentMethod,
   PurchaseSummary,
   CreditCard,
+  Badge,
 } from './components'
 
 export {
@@ -69,4 +70,5 @@ export {
   PaymentMethod,
   PurchaseSummary,
   CreditCard,
+  Badge,
 }