From fd9c4d268d7d19b4ab22ce3795fc9cd6750f72aa Mon Sep 17 00:00:00 2001
From: jinhojang6 <jinho5051@gmail.com>
Date: Wed, 12 Apr 2023 04:02:06 +0900
Subject: [PATCH] refactor: update box sizing and support multiple storybook
 icons for Badge

---
 .../src/components/Badge/Badge.stories.tsx    | 26 ++++++++++++++-----
 .../src/components/Badge/Badge.styles.ts      |  6 ++---
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/packages/lsd-react/src/components/Badge/Badge.stories.tsx b/packages/lsd-react/src/components/Badge/Badge.stories.tsx
index 3218dd0..1513160 100644
--- a/packages/lsd-react/src/components/Badge/Badge.stories.tsx
+++ b/packages/lsd-react/src/components/Badge/Badge.stories.tsx
@@ -1,6 +1,6 @@
 import { Meta, Story } from '@storybook/react'
-import { FolderIcon } from '../Icons'
 import { Badge, BadgeProps } from './Badge'
+import { useStorybookIconComponent } from '../../utils/storybook.utils'
 
 export default {
   title: 'Badge',
@@ -31,18 +31,32 @@ export default {
         value: [true, false],
       },
     },
+    icon: {
+      type: {
+        name: 'enum',
+        value: useStorybookIconComponent.options,
+      },
+      defaultValue: 'FolderIcon',
+    },
   },
 } as Meta
 
-export const Root: Story<BadgeProps> = (args) => (
-  <Badge {...args} icon={<FolderIcon color="primary" />}>
-    Badge
-  </Badge>
-)
+export const Root: Story<BadgeProps & { icon: string }> = ({
+  icon,
+  ...args
+}) => {
+  const Icon = useStorybookIconComponent(icon)
+  return (
+    <Badge {...args} icon={Icon && <Icon color="primary" />}>
+      Badge
+    </Badge>
+  )
+}
 
 Root.args = {
   variant: 'outlined',
   iconDirection: 'left',
   disabled: false,
   size: 'large',
+  icon: 'FolderIcon',
 }
diff --git a/packages/lsd-react/src/components/Badge/Badge.styles.ts b/packages/lsd-react/src/components/Badge/Badge.styles.ts
index 561195c..88ae677 100644
--- a/packages/lsd-react/src/components/Badge/Badge.styles.ts
+++ b/packages/lsd-react/src/components/Badge/Badge.styles.ts
@@ -4,7 +4,7 @@ import { badgeClasses } from './Badge.classes'
 export const BadgeStyles = css`
   .${badgeClasses.root} {
     width: fit-content;
-
+    box-sizing: border-box;
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -21,13 +21,13 @@ export const BadgeStyles = css`
   }
 
   .${badgeClasses.large} {
-    padding: 4px 12px;
+    padding: 3px 11px;
     gap: 12px;
     height: 28px;
   }
 
   .${badgeClasses.small} {
-    padding: 4px 8px;
+    padding: 3px 7px;
     gap: 8px;
     height: 24px;
   }