refactor: update box sizing and support multiple storybook icons for Badge

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',
 }

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;
   }