From c51ebb8482a382868f652af4b7b5a8853f904b68 Mon Sep 17 00:00:00 2001
From: jinhojang6 <jinho5051@gmail.com>
Date: Wed, 5 Apr 2023 00:58:00 +0900
Subject: [PATCH 1/2] feat: implement badge component

---
 .../src/components/Badge/Badge.classes.ts     | 10 ++++
 .../src/components/Badge/Badge.stories.tsx    | 47 +++++++++++++++
 .../src/components/Badge/Badge.styles.ts      | 52 +++++++++++++++++
 .../lsd-react/src/components/Badge/Badge.tsx  | 57 +++++++++++++++++++
 .../lsd-react/src/components/Badge/index.ts   |  1 +
 .../components/CSSBaseline/CSSBaseline.tsx    |  2 +
 packages/lsd-react/src/index.ts               |  1 +
 7 files changed, 170 insertions(+)
 create mode 100644 packages/lsd-react/src/components/Badge/Badge.classes.ts
 create mode 100644 packages/lsd-react/src/components/Badge/Badge.stories.tsx
 create mode 100644 packages/lsd-react/src/components/Badge/Badge.styles.ts
 create mode 100644 packages/lsd-react/src/components/Badge/Badge.tsx
 create mode 100644 packages/lsd-react/src/components/Badge/index.ts

diff --git a/packages/lsd-react/src/components/Badge/Badge.classes.ts b/packages/lsd-react/src/components/Badge/Badge.classes.ts
new file mode 100644
index 0000000..84fc2ff
--- /dev/null
+++ b/packages/lsd-react/src/components/Badge/Badge.classes.ts
@@ -0,0 +1,10 @@
+export const badgeClasses = {
+  root: `lsd-badge`,
+
+  outlined: `lsd-badge--outlined`,
+  filled: `lsd-badge--filled`,
+  disabled: 'lsd-badge--disabled',
+
+  small: 'lsd-badge--small',
+  large: 'lsd-badge--large',
+}
diff --git a/packages/lsd-react/src/components/Badge/Badge.stories.tsx b/packages/lsd-react/src/components/Badge/Badge.stories.tsx
new file mode 100644
index 0000000..f8fdd92
--- /dev/null
+++ b/packages/lsd-react/src/components/Badge/Badge.stories.tsx
@@ -0,0 +1,47 @@
+import { Meta, Story } from '@storybook/react'
+import { FolderIcon } from '../Icons'
+import { Badge, BadgeProps } from './Badge'
+
+export default {
+  title: 'Badge',
+  component: Badge,
+  argTypes: {
+    variant: {
+      type: {
+        name: 'enum',
+        value: ['outlined', 'filled'],
+      },
+    },
+    size: {
+      type: {
+        name: 'enum',
+        value: ['large', 'small'],
+      },
+      defaultValue: 'large',
+    },
+    iconDirection: {
+      type: {
+        name: 'enum',
+        value: ['left', 'right', 'none'],
+      },
+    },
+    disabled: {
+      type: {
+        name: 'boolean',
+        value: [true, false],
+      },
+    },
+  },
+} as Meta
+
+export const Root: Story<BadgeProps> = (args) => (
+  <Badge {...args} icon={<FolderIcon color="primary" />} />
+)
+
+Root.args = {
+  variant: 'outlined',
+  label: 'Badge',
+  iconDirection: 'left',
+  disabled: false,
+  size: 'large',
+}
diff --git a/packages/lsd-react/src/components/Badge/Badge.styles.ts b/packages/lsd-react/src/components/Badge/Badge.styles.ts
new file mode 100644
index 0000000..a6b389b
--- /dev/null
+++ b/packages/lsd-react/src/components/Badge/Badge.styles.ts
@@ -0,0 +1,52 @@
+import { css } from '@emotion/react'
+import { badgeClasses } from './Badge.classes'
+
+export const BadgeStyles = css`
+  .${badgeClasses.root} {
+    width: fit-content;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+
+    border: 1px solid rgb(var(--lsd-icon-primary));
+    border-radius: 20px;
+
+    &:hover,
+    &:focus {
+      text-decoration: underline;
+      cursor: pointer;
+    }
+  }
+
+  .${badgeClasses.large} {
+    padding: 4px 12px;
+    gap: 12px;
+    height: 28px;
+  }
+
+  .${badgeClasses.small} {
+    padding: 4px 8px;
+    gap: 8px;
+    height: 24px;
+  }
+
+  .${badgeClasses.filled} {
+    background-color: rgb(var(--lsd-icon-primary));
+    color: rgb(var(--lsd-text-secondary));
+    svg {
+      --lsd-icon-primary: var(--lsd-icon-secondary);
+    }
+  }
+
+  .${badgeClasses.outlined} {
+    color: rgb(var(--lsd-text-primary));
+  }
+
+  .${badgeClasses.disabled} {
+    opacity: 0.3;
+    cursor: initial;
+    pointer-events: none;
+  }
+`
diff --git a/packages/lsd-react/src/components/Badge/Badge.tsx b/packages/lsd-react/src/components/Badge/Badge.tsx
new file mode 100644
index 0000000..4000178
--- /dev/null
+++ b/packages/lsd-react/src/components/Badge/Badge.tsx
@@ -0,0 +1,57 @@
+import clsx from 'clsx'
+import React from 'react'
+import { Typography } from '../Typography'
+import { badgeClasses } from './Badge.classes'
+
+export type BadgeProps = React.HTMLAttributes<HTMLDivElement> & {
+  variant?: 'outlined' | 'filled'
+  label: string
+  icon?: React.ReactNode
+  iconDirection?: 'left' | 'right'
+  size?: 'large' | 'small'
+  disabled?: boolean
+}
+
+export const Badge: React.FC<BadgeProps> & {
+  classes: typeof badgeClasses
+} = ({
+  label,
+  variant = 'outlined',
+  disabled = 'false',
+  size = 'large',
+  icon,
+  iconDirection = 'left',
+  children,
+  ...props
+}) => {
+  const renderItems = () => (
+    <>
+      {iconDirection === 'left' && icon}
+      <Typography
+        variant={size === 'small' ? 'label2' : 'label1'}
+        className={badgeClasses[variant]}
+      >
+        {label}
+      </Typography>
+      {iconDirection === 'right' && icon}
+    </>
+  )
+
+  return (
+    <div
+      aria-label={label}
+      {...props}
+      className={clsx(
+        props.className,
+        badgeClasses.root,
+        badgeClasses[variant],
+        disabled && badgeClasses.disabled,
+        badgeClasses[size],
+      )}
+    >
+      {renderItems()}
+    </div>
+  )
+}
+
+Badge.classes = badgeClasses
diff --git a/packages/lsd-react/src/components/Badge/index.ts b/packages/lsd-react/src/components/Badge/index.ts
new file mode 100644
index 0000000..b9eff9e
--- /dev/null
+++ b/packages/lsd-react/src/components/Badge/index.ts
@@ -0,0 +1 @@
+export * from './Badge'
diff --git a/packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx b/packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx
index 25e3b10..7fbc483 100644
--- a/packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx
+++ b/packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx
@@ -1,6 +1,7 @@
 import { Global, SerializedStyles } from '@emotion/react'
 import React, { useMemo } from 'react'
 import { AutocompleteStyles } from '../Autocomplete/Autocomplete.styles'
+import { BadgeStyles } from '../Badge/Badge.styles'
 import { BreadcrumbStyles } from '../Breadcrumb/Breadcrumb.styles'
 import { BreadcrumbItemStyles } from '../BreadcrumbItem/BreadcrumbItem.styles'
 import { ButtonStyles } from '../Button/Button.styles'
@@ -48,6 +49,7 @@ const componentStyles: Array<ReturnType<typeof withTheme> | SerializedStyles> =
     CollapseStyles,
     CollapseHeaderStyles,
     CheckboxGroupStyles,
+    BadgeStyles,
   ]
 
 export const CSSBaseline: React.FC<{ theme?: Theme }> = ({
diff --git a/packages/lsd-react/src/index.ts b/packages/lsd-react/src/index.ts
index cc15bfb..a7dda93 100644
--- a/packages/lsd-react/src/index.ts
+++ b/packages/lsd-react/src/index.ts
@@ -20,3 +20,4 @@ export * from './components/Tag'
 export * from './components/Theme'
 export * from './components/Checkbox'
 export * from './components/CheckboxGroup'
+export * from './components/Badge'

From f0423704a50260d4094ed2a1b47d10e3992ddfe4 Mon Sep 17 00:00:00 2001
From: jinhojang6 <jinho5051@gmail.com>
Date: Wed, 5 Apr 2023 20:40:39 +0900
Subject: [PATCH 2/2] refactor: refactor badge component

---
 .../src/components/Badge/Badge.classes.ts     |  2 ++
 .../src/components/Badge/Badge.stories.tsx    |  5 ++--
 .../src/components/Badge/Badge.styles.ts      |  5 +++-
 .../lsd-react/src/components/Badge/Badge.tsx  | 27 +++++++------------
 4 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/packages/lsd-react/src/components/Badge/Badge.classes.ts b/packages/lsd-react/src/components/Badge/Badge.classes.ts
index 84fc2ff..2e37bd5 100644
--- a/packages/lsd-react/src/components/Badge/Badge.classes.ts
+++ b/packages/lsd-react/src/components/Badge/Badge.classes.ts
@@ -1,6 +1,8 @@
 export const badgeClasses = {
   root: `lsd-badge`,
 
+  label: `lsd-badge__label`,
+
   outlined: `lsd-badge--outlined`,
   filled: `lsd-badge--filled`,
   disabled: 'lsd-badge--disabled',
diff --git a/packages/lsd-react/src/components/Badge/Badge.stories.tsx b/packages/lsd-react/src/components/Badge/Badge.stories.tsx
index f8fdd92..3218dd0 100644
--- a/packages/lsd-react/src/components/Badge/Badge.stories.tsx
+++ b/packages/lsd-react/src/components/Badge/Badge.stories.tsx
@@ -35,12 +35,13 @@ export default {
 } as Meta
 
 export const Root: Story<BadgeProps> = (args) => (
-  <Badge {...args} icon={<FolderIcon color="primary" />} />
+  <Badge {...args} icon={<FolderIcon color="primary" />}>
+    Badge
+  </Badge>
 )
 
 Root.args = {
   variant: 'outlined',
-  label: 'Badge',
   iconDirection: 'left',
   disabled: false,
   size: 'large',
diff --git a/packages/lsd-react/src/components/Badge/Badge.styles.ts b/packages/lsd-react/src/components/Badge/Badge.styles.ts
index a6b389b..561195c 100644
--- a/packages/lsd-react/src/components/Badge/Badge.styles.ts
+++ b/packages/lsd-react/src/components/Badge/Badge.styles.ts
@@ -34,7 +34,10 @@ export const BadgeStyles = css`
 
   .${badgeClasses.filled} {
     background-color: rgb(var(--lsd-icon-primary));
-    color: rgb(var(--lsd-text-secondary));
+    .${badgeClasses.label} {
+      color: rgb(var(--lsd-text-secondary));
+    }
+
     svg {
       --lsd-icon-primary: var(--lsd-icon-secondary);
     }
diff --git a/packages/lsd-react/src/components/Badge/Badge.tsx b/packages/lsd-react/src/components/Badge/Badge.tsx
index 4000178..d6008ad 100644
--- a/packages/lsd-react/src/components/Badge/Badge.tsx
+++ b/packages/lsd-react/src/components/Badge/Badge.tsx
@@ -5,7 +5,6 @@ import { badgeClasses } from './Badge.classes'
 
 export type BadgeProps = React.HTMLAttributes<HTMLDivElement> & {
   variant?: 'outlined' | 'filled'
-  label: string
   icon?: React.ReactNode
   iconDirection?: 'left' | 'right'
   size?: 'large' | 'small'
@@ -15,7 +14,6 @@ export type BadgeProps = React.HTMLAttributes<HTMLDivElement> & {
 export const Badge: React.FC<BadgeProps> & {
   classes: typeof badgeClasses
 } = ({
-  label,
   variant = 'outlined',
   disabled = 'false',
   size = 'large',
@@ -24,22 +22,9 @@ export const Badge: React.FC<BadgeProps> & {
   children,
   ...props
 }) => {
-  const renderItems = () => (
-    <>
-      {iconDirection === 'left' && icon}
-      <Typography
-        variant={size === 'small' ? 'label2' : 'label1'}
-        className={badgeClasses[variant]}
-      >
-        {label}
-      </Typography>
-      {iconDirection === 'right' && icon}
-    </>
-  )
-
   return (
     <div
-      aria-label={label}
+      aria-label={children as string}
       {...props}
       className={clsx(
         props.className,
@@ -49,7 +34,15 @@ export const Badge: React.FC<BadgeProps> & {
         badgeClasses[size],
       )}
     >
-      {renderItems()}
+      {iconDirection === 'left' && icon}
+      <Typography
+        component="span"
+        variant={size === 'small' ? 'label2' : 'label1'}
+        className={badgeClasses.label}
+      >
+        {children}
+      </Typography>
+      {iconDirection === 'right' && icon}
     </div>
   )
 }