feat: badge asChild

components/Badge/Badge.stories.tsx

@@ -4,6 +4,7 @@ import { VariantProps } from '../../stitches.config';
 import { Badge, COLORS } from './Badge';
 import { Flex } from '../Flex';
 import { modifyVariantsForStory } from '../../utils/modifyVariantsForStory';
+import { UnstyledLink } from '../Link';
 
 type BadgeVariants = VariantProps<typeof Badge>;
 type BadgeProps = BadgeVariants & {};
@@ -85,3 +86,9 @@ const Customize: ComponentStory<typeof BadgeForStory> = (args) => (
     Customize
   </Badge>
 );
+
+export const BadgeLink: ComponentStory<typeof BadgeForStory> = (args) => (
+  <Badge asChild interactive {...args}>
+    <UnstyledLink href="https://traefik.io">Link</UnstyledLink>
+  </Badge>
+);

components/Badge/Badge.test.tsx

@@ -0,0 +1,15 @@
+import { Badge } from './Badge';
+import { UnstyledLink } from '../Link';
+import { render } from '@testing-library/react';
+
+describe('Badge', () => {
+  it('should render Badge as link', () => {
+    const { getByRole } = render(
+      <Badge asChild interactive>
+        <UnstyledLink href="https://traefik.io">Link</UnstyledLink>
+      </Badge>
+    );
+
+    expect(getByRole('link')).toBeInTheDocument();
+  });
+});

components/Badge/Badge.tsx

@@ -1,5 +1,6 @@
-import React, { ComponentProps, createContext } from 'react';
-import { styled, VariantProps, CSS } from '../../stitches.config';
+import React, { ComponentProps, useMemo } from 'react';
+import { styled, VariantProps } from '../../stitches.config';
+import { Slot } from '@radix-ui/react-slot';
 
 export const COLORS = ['gray', 'red', 'blue', 'green', 'neon', 'orange', 'purple'] as const;
 type COLOR_VALUES = typeof COLORS[number];
@@ -85,7 +86,8 @@ const BADGE_BASE_STYLES = {
   },
 };
 
-export const StyledSpanBadge = styled('span', BADGE_BASE_STYLES);
+const StyledSpanBadge = styled('span', BADGE_BASE_STYLES);
+const StyledSpanBadgeSlot = styled(Slot, StyledSpanBadge);
 
 const StyledButtonBadge = styled('button', BADGE_BASE_STYLES, {
   '&:focus-visible': {
@@ -106,17 +108,23 @@ const StyledButtonBadge = styled('button', BADGE_BASE_STYLES, {
     },
   },
 });
+const StyledButtonBadgeSlot = styled(Slot, StyledButtonBadge);
 
 interface BadgeProps
   extends ComponentProps<typeof StyledButtonBadge>,
-    VariantProps<typeof StyledButtonBadge> {}
+    VariantProps<typeof StyledButtonBadge> {
+  asChild?: boolean;
+}
 
 export const Badge = React.forwardRef<React.ElementRef<typeof StyledButtonBadge>, BadgeProps>(
-  ({ interactive, ...props }, forwardedRef) => {
-    return interactive ? (
-      <StyledButtonBadge {...props} ref={forwardedRef} />
-    ) : (
-      <StyledSpanBadge {...props} ref={forwardedRef} />
-    );
+  ({ interactive, asChild, ...props }, forwardedRef) => {
+    const Component = useMemo(() => {
+      if (interactive) {
+        return asChild ? StyledButtonBadgeSlot : StyledButtonBadge;
+      }
+      return asChild ? StyledSpanBadgeSlot : StyledSpanBadge;
+    }, [asChild]);
+
+    return <Component {...props} ref={forwardedRef} />;
   }
 );