From dc277c503ee892c8558288cb62a389a96f02eaee Mon Sep 17 00:00:00 2001
From: jinhojang6 <jinho5051@gmail.com>
Date: Wed, 5 Apr 2023 02:07:05 +0900
Subject: [PATCH] style: implement tag size property

---
 .../lsd-react/src/components/Tag/Tag.classes.ts   |  3 +++
 .../lsd-react/src/components/Tag/Tag.stories.tsx  |  8 ++++++++
 .../lsd-react/src/components/Tag/Tag.styles.ts    | 15 ++++++++++++---
 packages/lsd-react/src/components/Tag/Tag.tsx     | 10 +++++++++-
 4 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/packages/lsd-react/src/components/Tag/Tag.classes.ts b/packages/lsd-react/src/components/Tag/Tag.classes.ts
index 584debb..1b8e0f8 100644
--- a/packages/lsd-react/src/components/Tag/Tag.classes.ts
+++ b/packages/lsd-react/src/components/Tag/Tag.classes.ts
@@ -4,4 +4,7 @@ export const tagClasses = {
   outlined: `lsd-tag--outlined`,
   filled: `lsd-tag--filled`,
   disabled: 'lsd-tag--disabled',
+
+  small: 'lsd-badge--small',
+  large: 'lsd-badge--large',
 }
diff --git a/packages/lsd-react/src/components/Tag/Tag.stories.tsx b/packages/lsd-react/src/components/Tag/Tag.stories.tsx
index 1ea41b0..95a47ba 100644
--- a/packages/lsd-react/src/components/Tag/Tag.stories.tsx
+++ b/packages/lsd-react/src/components/Tag/Tag.stories.tsx
@@ -18,6 +18,13 @@ export default {
         value: ['left', 'right', 'none'],
       },
     },
+    size: {
+      type: {
+        name: 'enum',
+        value: ['large', 'small'],
+      },
+      defaultValue: 'large',
+    },
     disabled: {
       type: {
         name: 'boolean',
@@ -36,4 +43,5 @@ Root.args = {
   label: 'Tag',
   iconDirection: 'left',
   disabled: false,
+  size: 'large',
 }
diff --git a/packages/lsd-react/src/components/Tag/Tag.styles.ts b/packages/lsd-react/src/components/Tag/Tag.styles.ts
index 9683b60..429b6c7 100644
--- a/packages/lsd-react/src/components/Tag/Tag.styles.ts
+++ b/packages/lsd-react/src/components/Tag/Tag.styles.ts
@@ -4,14 +4,11 @@ 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));
 
@@ -22,6 +19,18 @@ export const TagStyles = css`
     }
   }
 
+  .${tagClasses.large} {
+    padding: 4px 12px;
+    gap: 12px;
+    height: 28px;
+  }
+
+  .${tagClasses.small} {
+    padding: 4px 8px;
+    gap: 8px;
+    height: 24px;
+  }
+
   .${tagClasses.filled} {
     background-color: rgb(var(--lsd-icon-primary));
     color: rgb(var(--lsd-text-secondary));
diff --git a/packages/lsd-react/src/components/Tag/Tag.tsx b/packages/lsd-react/src/components/Tag/Tag.tsx
index cb38e43..ab4d7f1 100644
--- a/packages/lsd-react/src/components/Tag/Tag.tsx
+++ b/packages/lsd-react/src/components/Tag/Tag.tsx
@@ -9,6 +9,7 @@ export type TagProps = React.HTMLAttributes<HTMLDivElement> & {
   icon?: React.ReactNode
   iconDirection?: 'left' | 'right'
   disabled?: boolean
+  size?: 'large' | 'small'
 }
 
 export const Tag: React.FC<TagProps> & {
@@ -20,12 +21,18 @@ export const Tag: React.FC<TagProps> & {
   icon,
   iconDirection = 'left',
   children,
+  size = 'large',
   ...props
 }) => {
   const renderItems = () => (
     <>
       {iconDirection === 'left' && icon}
-      <Typography className={tagClasses[variant]}>{label}</Typography>
+      <Typography
+        variant={size === 'small' ? 'label2' : 'label1'}
+        className={tagClasses[variant]}
+      >
+        {label}
+      </Typography>
       {iconDirection === 'right' && icon}
     </>
   )
@@ -39,6 +46,7 @@ export const Tag: React.FC<TagProps> & {
         tagClasses.root,
         tagClasses[variant],
         disabled && tagClasses.disabled,
+        tagClasses[size],
       )}
     >
       {renderItems()}