feat(badge): add lead & trail icon support

atelier-saulx · Jul 22, 2024 · a3c8d3b · a3c8d3b
1 parent c8653c3
commit a3c8d3b
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 2 deletions.
diff --git a/src/components/Badge/Badge.stories.tsx b/src/components/Badge/Badge.stories.tsx
@@ -5,6 +5,25 @@ export default {
   component: Badge,
 }
 
+export const Default = {
+  args: {
+    children: 'Going up +20%',
+    color: 'green',
+    type: 'filled',
+    leadIcon: 'arrow-up',
+    trailIcon: 'arrow-up',
+  },
+}
+
+export const SingleIcon = {
+  args: {
+    children: 'Going up +20%',
+    color: 'green',
+    type: 'filled',
+    leadIcon: 'arrow-up',
+  },
+}
+
 export const NeutralFilled = {
   args: {
     children: 'Published',

diff --git a/src/components/Badge/index.tsx b/src/components/Badge/index.tsx
@@ -1,19 +1,30 @@
 import { colors } from '../../utils/colors.js'
 import { radius } from '../../utils/radius.js'
+import { Icon, IconProps } from '../Icon/index.js'
 import { Text } from '../Text/index.js'
 
 type BadgeProps = {
   children: string
   color?: 'neutral' | 'red' | 'green' | 'indigo' | 'amber'
   type?: 'filled' | 'subtle'
+  leadIcon?: IconProps['variant']
+  trailIcon?: IconProps['variant']
 }
 
-function Badge({ children, color = 'neutral', type = 'filled' }: BadgeProps) {
+function Badge({
+  children,
+  color = 'neutral',
+  type = 'filled',
+  leadIcon,
+  trailIcon,
+}: BadgeProps) {
   return (
     <div
       style={{
         display: 'inline-flex',
         padding: '4px 6px',
+        alignItems: 'center',
+        justifyContent: 'center',
         borderRadius: radius[4],
         ...(type === 'filled' && {
           ...(color === 'neutral' && {
@@ -61,9 +72,11 @@ function Badge({ children, color = 'neutral', type = 'filled' }: BadgeProps) {
         }),
       }}
     >
+      {leadIcon && <Icon size="small" variant={leadIcon} />}
       <Text color="inherit" variant="subtext-medium">
         {children}
       </Text>
+      {trailIcon && <Icon size="small" variant={trailIcon} />}
     </div>
   )
 }

diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx
@@ -69,7 +69,7 @@ const ICONS = [
 
 type IconProps = {
   variant: (typeof ICONS)[number]
-  size?: 'regular'
+  size?: 'regular' | 'small'
 }
 
 function Icon({ variant, size = 'regular' }: IconProps) {
@@ -78,7 +78,9 @@ function Icon({ variant, size = 'regular' }: IconProps) {
       fill="currentColor"
       viewBox="0 0 24 24"
       style={{
+        flexShrink: 0,
         ...(size === 'regular' && { height: 24, width: 24 }),
+        ...(size === 'small' && { height: 16, width: 16 }),
         ...(variant === 'loader' && {
           animation: 'spin 1s linear infinite',
         }),