Skip to content

Commit

Permalink
chore: the breadcrumb separator moved outside link
Browse files Browse the repository at this point in the history
  • Loading branch information
scar055 committed Jun 5, 2024
1 parent ae88059 commit 6bc5449
Show file tree
Hide file tree
Showing 2 changed files with 14 additions and 10 deletions.
4 changes: 4 additions & 0 deletions packages/ui/src/components/Breadcrumb/index.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,10 @@
margin-inline-end: 8px;
}

.utrecht-breadcrumb-nav__separator {
margin-inline-end: var(--utrecht-space-inline-xs);
}

.utrecht-breadcrumb-nav__link {
--utrecht-link-focus-color: var(--utrecht-color-black);

Expand Down
20 changes: 10 additions & 10 deletions packages/ui/src/components/Breadcrumb/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,11 @@ export const Breadcrumbs = ({
.filter(({ label }) => label)
.map(({ href, label, current }: any, index: number) => (
<Fragment key={`${href}-${index}`}>
{links.length === 1 && label?.toLowerCase() !== 'home' && (
<BreadcrumbNavSeparator>
<UtrechtIconChevronLeft />
</BreadcrumbNavSeparator>
)}
<BreadcrumbNavLink
className={css('utrecht-link', 'utrecht-link--html-a', 'utrecht-breadcrumb-nav__link-custom')}
href={href}
Expand All @@ -80,18 +85,13 @@ export const Breadcrumbs = ({
current={current}
Link={UtrechtLink}
>
{links.length === 1 && label?.toLowerCase() !== 'home' && (
<BreadcrumbNavSeparator>
<UtrechtIconChevronLeft />
</BreadcrumbNavSeparator>
)}
{label}
{index !== links.length - 1 && (
<BreadcrumbNavSeparator>
<UtrechtIconChevronRight />
</BreadcrumbNavSeparator>
)}
</BreadcrumbNavLink>
{index !== links.length - 1 && (
<BreadcrumbNavSeparator>
<UtrechtIconChevronRight />
</BreadcrumbNavSeparator>
)}
</Fragment>
))}
</BreadcrumbNav>
Expand Down

0 comments on commit 6bc5449

Please sign in to comment.