refactor: refactor breadcrumbItem to implement custom link

packages/lsd-react/src/components/Breadcrumb/Breadcrumb.styles.ts

@@ -34,11 +34,11 @@ export const BreadcrumbStyles = css`
     width: auto !important;
   }
 
-  .${breadcrumbClasses.listBox} > a {
+  .${breadcrumbClasses.listBox} > li {
     &:not(:last-child) {
       border-bottom: 1px solid rgb(var(--lsd-border-primary));
     }
-    padding: 8px 12px;
+    padding: 6px 10px 6px 12px;
     cursor: pointer;
     &:hover,
     &:focus {

packages/lsd-react/src/components/Breadcrumb/Breadcrumb.tsx

@@ -4,13 +4,15 @@ import { BreadcrumbItem } from '../BreadcrumbItem'
 import { breadcrumbItemClasses } from '../BreadcrumbItem/BreadcrumbItem.classes'
 import { ListBox } from '../ListBox'
 import { Portal } from '../PortalProvider/Portal'
-import { Typography } from '../Typography'
 import { breadcrumbClasses } from './Breadcrumb.classes'
 
 export type BreadcrumbOption = {
   name: string
   value: string
   link: string
+  linkComponent?: React.ComponentType<
+    React.AnchorHTMLAttributes<HTMLAnchorElement>
+  >
 }
 
 export type BreadcrumbProps = Omit<
@@ -60,6 +62,7 @@ export const Breadcrumb: React.FC<BreadcrumbProps> & {
         label={item.value}
         size={size}
         link={item.link}
+        linkComponent={item?.linkComponent}
       />
     ))
 
@@ -102,16 +105,16 @@ export const Breadcrumb: React.FC<BreadcrumbProps> & {
             onClose={() => setOpen(false)}
             className={clsx(breadcrumbClasses.listBox)}
           >
-            {collapsed.map((opt) => (
-              <Typography
-                color="primary"
-                component="a"
-                href={opt.link}
-                variant={size === 'large' ? 'label1' : 'label2'}
-                className={breadcrumbItemClasses.elementLink}
-              >
-                {opt.value}
-              </Typography>
+            {collapsed.map((opt, idx) => (
+              <BreadcrumbItem
+                key={idx}
+                current={idx === visible.length - 1}
+                label={opt.value}
+                size={size}
+                link={opt.link}
+                className={breadcrumbItemClasses.itemLink}
+                linkComponent={opt?.linkComponent}
+              />
             ))}
           </ListBox>
         </Portal>

packages/lsd-react/src/components/BreadcrumbItem/BreadcrumbItem.classes.ts

@@ -1,9 +1,8 @@
 export const breadcrumbItemClasses = {
   root: `lsd-breadcrumb-item`,
 
-  element: `lsd-breadcrumb-item-element`,
-  elementCurrentPage: `lsd-breadcrumb-item-element--current-page`,
-  elementLink: `lsd-breadcrumb-item-element-link`,
+  itemCurrentPage: `lsd-breadcrumb-item--current-page`,
+  itemLink: `lsd-breadcrumb-item-link`,
 
   small: `lsd-breadcrumb-item--small`,
   medium: `lsd-breadcrumb-item--medium`,

packages/lsd-react/src/components/BreadcrumbItem/BreadcrumbItem.styles.ts

@@ -4,6 +4,7 @@ import { breadcrumbItemClasses } from './BreadcrumbItem.classes'
 
 export const BreadcrumbItemStyles = css`
   .${breadcrumbItemClasses.root} {
+    list-style-type: none;
   }
 
   .${breadcrumbClasses.list} li + li::before {
@@ -12,25 +13,22 @@ export const BreadcrumbItemStyles = css`
     content: '/';
   }
 
-  .${breadcrumbItemClasses.element} {
-    list-style-type: none;
-  }
-
-  .${breadcrumbItemClasses.elementLink} {
+  .${breadcrumbItemClasses.itemLink} {
     text-decoration: none;
     cursor: pointer;
   }
 
-  .${breadcrumbItemClasses.elementCurrentPage} {
+  .${breadcrumbItemClasses.itemCurrentPage} {
     border: 1px solid rgb(var(--lsd-border-primary));
     padding: 4px 12px;
   }
 
   .${breadcrumbClasses.root}:not(.${breadcrumbClasses.disabled}) {
-    .${breadcrumbItemClasses.elementLink} {
+    .${breadcrumbItemClasses.itemLink} {
       &:hover,
       &:focus {
         text-decoration: underline;
+        text-decoration-color: rgb(var(--lsd-border-primary));
       }
     }
   }

packages/lsd-react/src/components/BreadcrumbItem/BreadcrumbItem.tsx

@@ -2,11 +2,13 @@ import clsx from 'clsx'
 import React from 'react'
 import { Typography } from '../Typography'
 import { breadcrumbItemClasses } from './BreadcrumbItem.classes'
-
 export type BreadcrumbItemProps = React.HTMLAttributes<HTMLDivElement> & {
   size: 'small' | 'medium' | 'large'
   label: string
   link?: string
+  linkComponent?: React.ComponentType<
+    React.AnchorHTMLAttributes<HTMLAnchorElement>
+  >
   current?: boolean
   disabled?: boolean
   selected?: boolean
@@ -19,6 +21,7 @@ export const BreadcrumbItem: React.FC<BreadcrumbItemProps> & {
 } = ({
   label,
   link,
+  linkComponent: LinkComponent = (props) => <a {...props}>{props.children}</a>,
   size = 'large',
   current,
   selected,
@@ -27,23 +30,26 @@ export const BreadcrumbItem: React.FC<BreadcrumbItemProps> & {
 }) => {
   return (
     <li
-      className={clsx(breadcrumbItemClasses.element)}
+      className={clsx(breadcrumbItemClasses.root)}
       aria-selected={selected ? 'true' : 'false'}
       onClick={onClick}
       ref={ellipsisRef}
     >
-      <Typography
-        color="primary"
-        component="a"
+      <LinkComponent
         href={link}
-        variant={size === 'large' ? 'label1' : 'label2'}
         className={clsx(
-          breadcrumbItemClasses.elementLink,
-          current && breadcrumbItemClasses.elementCurrentPage,
+          breadcrumbItemClasses.itemLink,
+          current && breadcrumbItemClasses.itemCurrentPage,
         )}
       >
-        {label}
-      </Typography>
+        <Typography
+          color="primary"
+          component="span"
+          variant={size === 'large' ? 'label1' : 'label2'}
+        >
+          {label}
+        </Typography>
+      </LinkComponent>
     </li>
   )
 }