TEC-4404: Badge component (#35)

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": "[email protected]"
-}
+}

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>
+  ),
+}

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 }

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 }

src/components/Badge/type.ts

@@ -0,0 +1,8 @@
+type BadgeProps = {
+  size?: 'small' | 'normal'
+  backgroundColor?: string
+  children?: React.ReactNode
+  fullWidth?: boolean
+}
+
+export type { BadgeProps }

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,
 }

src/index.ts

@@ -32,6 +32,7 @@ import {
   PaymentMethod,
   PurchaseSummary,
   CreditCard,
+  Badge,
 } from './components'
 
 export {
@@ -69,4 +70,5 @@ export {
   PaymentMethod,
   PurchaseSummary,
   CreditCard,
+  Badge,
 }