feat(breadcrumb): using TextLink as breadcrumb items

adevinta · Aug 20, 2024 · f590e53 · f590e53
1 parent 0a6cec2
commit f590e53
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 6 deletions.
diff --git a/packages/components/breadcrumb/src/Breadcrumb.stories.tsx b/packages/components/breadcrumb/src/Breadcrumb.stories.tsx
@@ -20,7 +20,9 @@ export const Default: StoryFn = _args => (
     <Breadcrumb.Separator />
 
     <Breadcrumb.Item>
-      <Breadcrumb.Link href="/docs/components">Components</Breadcrumb.Link>
+      <Breadcrumb.Link href="/?path=/docs/experimental-breadcrumb--docs">
+        Components
+      </Breadcrumb.Link>
     </Breadcrumb.Item>
 
     <Breadcrumb.Separator />
@@ -44,7 +46,9 @@ export const CustomSeparator: StoryFn = _args => (
     </Breadcrumb.Separator>
 
     <Breadcrumb.Item>
-      <Breadcrumb.Link href="/docs/components">Components</Breadcrumb.Link>
+      <Breadcrumb.Link href="/?path=/docs/experimental-breadcrumb--docs">
+        Components
+      </Breadcrumb.Link>
     </Breadcrumb.Item>
 
     <Breadcrumb.Separator>

diff --git a/packages/components/breadcrumb/src/Breadcrumb.tsx b/packages/components/breadcrumb/src/Breadcrumb.tsx
@@ -13,7 +13,7 @@ export const Breadcrumb = forwardRef<HTMLOListElement, BreadcrumbProps>(
         data-spark-component="breadcrumb"
         ref={ref}
         aria-label={ariaLabel}
-        className={cx('text-caption', className)}
+        className={cx('text-caption text-neutral', className)}
       >
         <ol className={cx('flex flex-wrap items-center gap-sm break-words')} {...rest} />
       </nav>

diff --git a/packages/components/breadcrumb/src/BreadcrumbLink.tsx b/packages/components/breadcrumb/src/BreadcrumbLink.tsx
@@ -1,22 +1,37 @@
 import { Slot } from '@spark-ui/slot'
+import { TextLink } from '@spark-ui/text-link'
 import { ComponentPropsWithoutRef, forwardRef } from 'react'
 
-export interface LinkProps extends ComponentPropsWithoutRef<'a'> {
+export interface LinkProps extends ComponentPropsWithoutRef<typeof TextLink> {
   asChild?: boolean
   className?: string
   href?: string
 }
 
 export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
-  ({ asChild = false, className, href, ...rest }, ref) => {
-    const Component = asChild ? Slot : 'a'
+  (
+    {
+      asChild = false,
+      className,
+      bold = true,
+      intent = 'current',
+      underline = true,
+      href,
+      ...rest
+    },
+    ref
+  ) => {
+    const Component = asChild ? Slot : TextLink
 
     return (
       <Component
         data-spark-component="breadcrumb-link"
         href={href}
         ref={ref}
         className={className}
+        bold={bold}
+        intent={intent}
+        underline={underline}
         {...rest}
       />
     )