From 4cf53a8cae71f02d830fb61968885fc9334b4f5a Mon Sep 17 00:00:00 2001
From: jinhojang6 <jinho5051@gmail.com>
Date: Thu, 16 Feb 2023 10:43:31 +0900
Subject: [PATCH 1/2] feat: implement tag component

---
 .../components/CSSBaseline/CSSBaseline.tsx    |  2 +
 .../src/components/Tag/Tag.classes.ts         |  7 +++
 .../src/components/Tag/Tag.stories.tsx        | 39 ++++++++++++
 .../src/components/Tag/Tag.styles.ts          | 42 +++++++++++++
 packages/lsd-react/src/components/Tag/Tag.tsx | 61 +++++++++++++++++++
 .../lsd-react/src/components/Tag/index.ts     |  1 +
 packages/lsd-react/src/index.ts               |  1 +
 7 files changed, 153 insertions(+)
 create mode 100644 packages/lsd-react/src/components/Tag/Tag.classes.ts
 create mode 100644 packages/lsd-react/src/components/Tag/Tag.stories.tsx
 create mode 100644 packages/lsd-react/src/components/Tag/Tag.styles.ts
 create mode 100644 packages/lsd-react/src/components/Tag/Tag.tsx
 create mode 100644 packages/lsd-react/src/components/Tag/index.ts

diff --git a/packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx b/packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx
index bdc53fa..9e86214 100644
--- a/packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx
+++ b/packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx
@@ -12,6 +12,7 @@ import { BreadcrumbStyles } from '../Breadcrumb/Breadcrumb.styles'
 import { BreadcrumbItemStyles } from '../BreadcrumbItem/BreadcrumbItem.styles'
 import { defaultThemes, Theme, withTheme } from '../Theme'
 import { TypographyStyles } from '../Typography/Typography.styles'
+import { TagStyles } from '../Tag/Tag.styles'
 
 const componentStyles: Array<ReturnType<typeof withTheme> | SerializedStyles> =
   [
@@ -26,6 +27,7 @@ const componentStyles: Array<ReturnType<typeof withTheme> | SerializedStyles> =
     IconTagStyles,
     BreadcrumbStyles,
     BreadcrumbItemStyles,
+    TagStyles,
   ]
 
 export const CSSBaseline: React.FC<{ theme?: Theme }> = ({
diff --git a/packages/lsd-react/src/components/Tag/Tag.classes.ts b/packages/lsd-react/src/components/Tag/Tag.classes.ts
new file mode 100644
index 0000000..355d60f
--- /dev/null
+++ b/packages/lsd-react/src/components/Tag/Tag.classes.ts
@@ -0,0 +1,7 @@
+export const tagClasses = {
+  root: `lsd-tag`,
+
+  outlined: `lsd-tag--outlined`,
+  filled: `lsd-tag--filled`,
+  disabled: 'lsd-breadcrumb--disabled',
+}
diff --git a/packages/lsd-react/src/components/Tag/Tag.stories.tsx b/packages/lsd-react/src/components/Tag/Tag.stories.tsx
new file mode 100644
index 0000000..1ea41b0
--- /dev/null
+++ b/packages/lsd-react/src/components/Tag/Tag.stories.tsx
@@ -0,0 +1,39 @@
+import { Meta, Story } from '@storybook/react'
+import { FolderIcon } from '../Icons'
+import { Tag, TagProps } from './Tag'
+
+export default {
+  title: 'Tag',
+  component: Tag,
+  argTypes: {
+    variant: {
+      type: {
+        name: 'enum',
+        value: ['outlined', 'filled'],
+      },
+    },
+    iconDirection: {
+      type: {
+        name: 'enum',
+        value: ['left', 'right', 'none'],
+      },
+    },
+    disabled: {
+      type: {
+        name: 'boolean',
+        value: [true, false],
+      },
+    },
+  },
+} as Meta
+
+export const Root: Story<TagProps> = (args) => (
+  <Tag {...args} icon={<FolderIcon color="primary" />} />
+)
+
+Root.args = {
+  variant: 'outlined',
+  label: 'Tag',
+  iconDirection: 'left',
+  disabled: false,
+}
diff --git a/packages/lsd-react/src/components/Tag/Tag.styles.ts b/packages/lsd-react/src/components/Tag/Tag.styles.ts
new file mode 100644
index 0000000..9683b60
--- /dev/null
+++ b/packages/lsd-react/src/components/Tag/Tag.styles.ts
@@ -0,0 +1,42 @@
+import { css } from '@emotion/react'
+import { tagClasses } from './Tag.classes'
+
+export const TagStyles = css`
+  .${tagClasses.root} {
+    width: fit-content;
+    height: 28px;
+    padding: 4px 12px;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+
+    border: 1px solid rgb(var(--lsd-icon-primary));
+
+    &:hover,
+    &:focus {
+      text-decoration: underline;
+      cursor: pointer;
+    }
+  }
+
+  .${tagClasses.filled} {
+    background-color: rgb(var(--lsd-icon-primary));
+    color: rgb(var(--lsd-text-secondary));
+    svg {
+      --lsd-icon-primary: var(--lsd-icon-secondary);
+    }
+  }
+
+  .${tagClasses.outlined} {
+    color: rgb(var(--lsd-text-primary));
+  }
+
+  .${tagClasses.disabled} {
+    opacity: 0.3;
+    cursor: initial;
+    pointer-events: none;
+  }
+`
diff --git a/packages/lsd-react/src/components/Tag/Tag.tsx b/packages/lsd-react/src/components/Tag/Tag.tsx
new file mode 100644
index 0000000..547c287
--- /dev/null
+++ b/packages/lsd-react/src/components/Tag/Tag.tsx
@@ -0,0 +1,61 @@
+import clsx from 'clsx'
+import React from 'react'
+import { tagClasses } from './Tag.classes'
+
+export type TagProps = React.HTMLAttributes<HTMLDivElement> & {
+  variant?: 'outlined' | 'filled'
+  label: string
+  icon?: React.ReactNode
+  iconDirection?: 'left' | 'right' | 'none'
+  disabled?: boolean
+}
+
+export const Tag: React.FC<TagProps> & {
+  classes: typeof tagClasses
+} = ({
+  label,
+  variant = 'outlined',
+  disabled = 'false',
+  icon,
+  iconDirection,
+  children,
+  ...props
+}) => {
+  const renderItems = () => {
+    switch (iconDirection) {
+      case 'left':
+        return (
+          <>
+            {icon}
+            {label}
+          </>
+        )
+      case 'right':
+        return (
+          <>
+            {label}
+            {icon}
+          </>
+        )
+      default:
+        return <>{label}</>
+    }
+  }
+
+  return (
+    <div
+      {...props}
+      aria-label={label}
+      className={clsx(
+        props.className,
+        tagClasses.root,
+        tagClasses[variant],
+        disabled && tagClasses.disabled,
+      )}
+    >
+      {renderItems()}
+    </div>
+  )
+}
+
+Tag.classes = tagClasses
diff --git a/packages/lsd-react/src/components/Tag/index.ts b/packages/lsd-react/src/components/Tag/index.ts
new file mode 100644
index 0000000..fd1a1e7
--- /dev/null
+++ b/packages/lsd-react/src/components/Tag/index.ts
@@ -0,0 +1 @@
+export * from './Tag'
diff --git a/packages/lsd-react/src/index.ts b/packages/lsd-react/src/index.ts
index 9891a23..938d9c5 100644
--- a/packages/lsd-react/src/index.ts
+++ b/packages/lsd-react/src/index.ts
@@ -9,3 +9,4 @@ export * from './components/Tabs'
 export * from './components/Theme'
 export * from './components/Breadcrumb'
 export * from './components/BreadcrumbItem'
+export * from './components/Tag'

From 0df15ca89d421c8d4e1e7082baa56f9d770beac2 Mon Sep 17 00:00:00 2001
From: jinhojang6 <jinho5051@gmail.com>
Date: Thu, 16 Feb 2023 20:08:24 +0900
Subject: [PATCH 2/2] refactor: refactor tag component

---
 .../src/components/Tag/Tag.classes.ts         |  2 +-
 packages/lsd-react/src/components/Tag/Tag.tsx | 34 ++++++-------------
 2 files changed, 12 insertions(+), 24 deletions(-)

diff --git a/packages/lsd-react/src/components/Tag/Tag.classes.ts b/packages/lsd-react/src/components/Tag/Tag.classes.ts
index 355d60f..584debb 100644
--- a/packages/lsd-react/src/components/Tag/Tag.classes.ts
+++ b/packages/lsd-react/src/components/Tag/Tag.classes.ts
@@ -3,5 +3,5 @@ export const tagClasses = {
 
   outlined: `lsd-tag--outlined`,
   filled: `lsd-tag--filled`,
-  disabled: 'lsd-breadcrumb--disabled',
+  disabled: 'lsd-tag--disabled',
 }
diff --git a/packages/lsd-react/src/components/Tag/Tag.tsx b/packages/lsd-react/src/components/Tag/Tag.tsx
index 547c287..cb38e43 100644
--- a/packages/lsd-react/src/components/Tag/Tag.tsx
+++ b/packages/lsd-react/src/components/Tag/Tag.tsx
@@ -1,12 +1,13 @@
 import clsx from 'clsx'
 import React from 'react'
+import { Typography } from '../Typography'
 import { tagClasses } from './Tag.classes'
 
 export type TagProps = React.HTMLAttributes<HTMLDivElement> & {
   variant?: 'outlined' | 'filled'
   label: string
   icon?: React.ReactNode
-  iconDirection?: 'left' | 'right' | 'none'
+  iconDirection?: 'left' | 'right'
   disabled?: boolean
 }
 
@@ -17,35 +18,22 @@ export const Tag: React.FC<TagProps> & {
   variant = 'outlined',
   disabled = 'false',
   icon,
-  iconDirection,
+  iconDirection = 'left',
   children,
   ...props
 }) => {
-  const renderItems = () => {
-    switch (iconDirection) {
-      case 'left':
-        return (
-          <>
-            {icon}
-            {label}
-          </>
-        )
-      case 'right':
-        return (
-          <>
-            {label}
-            {icon}
-          </>
-        )
-      default:
-        return <>{label}</>
-    }
-  }
+  const renderItems = () => (
+    <>
+      {iconDirection === 'left' && icon}
+      <Typography className={tagClasses[variant]}>{label}</Typography>
+      {iconDirection === 'right' && icon}
+    </>
+  )
 
   return (
     <div
-      {...props}
       aria-label={label}
+      {...props}
       className={clsx(
         props.className,
         tagClasses.root,