feat(store-ui): Create Badge component

packages/store-ui/src/atoms/Badge/Badge.test.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+
+import Badge from './Badge'
+
+describe('Badge', () => {
+  it('should have `data-store-badge` attribute', () => {
+    const { getByText } = render(<Badge>-25%</Badge>)
+
+    const renderedBadge = getByText('-25%')
+
+    expect(renderedBadge).toHaveAttribute('data-store-badge')
+  })
+})

packages/store-ui/src/atoms/Badge/Badge.tsx

@@ -0,0 +1,23 @@
+import type { ReactNode, ForwardedRef } from 'react'
+import React, { forwardRef } from 'react'
+
+export interface BadgeProps {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+  children?: ReactNode
+}
+
+const Badge = forwardRef<HTMLDivElement, BadgeProps>(function Badge(
+  { testId = 'store-badge', children }: BadgeProps,
+  ref: ForwardedRef<HTMLDivElement>
+) {
+  return (
+    <div ref={ref} data-testid={testId} data-store-badge>
+      {children}
+    </div>
+  )
+})
+
+export default Badge

packages/store-ui/src/atoms/Badge/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Badge'
+export type { BadgeProps } from './Badge'

packages/store-ui/src/atoms/Badge/stories/Badge.mdx

@@ -0,0 +1,12 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'
+import Badge from '../Badge'
+
+# Preview
+
+<Canvas>
+  <Story id="atoms-badge--badge" />
+</Canvas>
+
+# Props
+
+<ArgsTable of={Badge} />

packages/store-ui/src/atoms/Badge/stories/Badge.stories.tsx

@@ -0,0 +1,37 @@
+import type { Story } from '@storybook/react'
+import React from 'react'
+
+import type { ComponentArgTypes } from '../../../typings/utils'
+import Component from '../Badge'
+import mdx from './Badge.mdx'
+
+interface StoryControls {
+  badgeText: string
+}
+
+const BadgeTemplate: Story<StoryControls> = ({ badgeText }) => (
+  <Component>{badgeText}</Component>
+)
+
+export const Badge = BadgeTemplate.bind({})
+
+const argTypes: ComponentArgTypes<StoryControls> = {
+  badgeText: {
+    name: 'Badge text',
+    control: {
+      type: 'text',
+    },
+    defaultValue: '-25%',
+  },
+}
+
+export default {
+  title: 'Atoms/Badge',
+  component: Badge,
+  argTypes,
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+}

packages/store-ui/src/deprecated/index.ts

@@ -25,7 +25,7 @@ export {
   Progress,
   Donut,
   Avatar,
-  Badge,
+  Badge as UIBadge,
   Close,
   Alert,
   Divider,
@@ -61,7 +61,7 @@ export type {
   ProgressProps,
   DonutProps,
   AvatarProps,
-  BadgeProps,
+  BadgeProps as UIBadgeProps,
   AlertProps,
   DividerProps,
   EmbedProps,

packages/store-ui/src/index.ts

@@ -29,6 +29,9 @@ export type { SelectProps } from './atoms/Select'
 export { default as Radio } from './atoms/Radio'
 export type { RadioProps } from './atoms/Radio'
 
+export { default as Badge } from './atoms/Badge'
+export type { BadgeProps } from './atoms/Badge'
+
 // Molecules
 export { default as Bullets } from './molecules/Bullets'
 export type { BulletsProps } from './molecules/Bullets'

themes/theme-b2c-tailwind/src/atoms/badge.css

@@ -0,0 +1,8 @@
+[data-store-badge] {
+  display: inline-block;
+  color: #ffffff;
+  background-color: #f71963;
+  padding: 0.4rem;
+  border-radius: 0.2rem;
+  font-size: 0.9rem;
+}

themes/theme-b2c-tailwind/src/atoms/index.css

@@ -5,3 +5,4 @@
 @import "./price.css";
 @import "./textarea.css";
 @import "./overlay.css";
+@import "./badge.css";