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 = (args) => ( - }> - Badge - -) +export const Root: Story = ({ + icon, + ...args +}) => { + const Icon = useStorybookIconComponent(icon) + return ( + }> + 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; }