diff --git a/packages/css/src/components/breadcrumb/breadcrumb.scss b/packages/css/src/components/breadcrumb/breadcrumb.scss index 5264180fe3..ca63dfa8bb 100644 --- a/packages/css/src/components/breadcrumb/breadcrumb.scss +++ b/packages/css/src/components/breadcrumb/breadcrumb.scss @@ -25,27 +25,22 @@ .amsterdam-breadcrumb__list { break-after: avoid; break-inside: avoid; - display: flex; - flex-wrap: wrap; - gap: 0.5rem; - list-style: none; @include reset; } .amsterdam-breadcrumb__item { - align-items: center; - display: flex; + display: inline; } .amsterdam-breadcrumb__item:not(:last-child)::after { - background-color: var(--amsterdam-breadcrumb-separator-background-color); - clip-path: path("M 4.725,16 3.275,14.545 9.815,8 3.275,1.455 4.725,0 l 8,8 z"); + background-image: var(--amsterdam-breadcrumb-separator-background-image); + background-repeat: no-repeat; content: ""; display: inline-block; - height: 1rem; - margin-inline-start: 1rem; - width: 1rem; + height: 1ex; + margin-inline: 0.5rem; + width: 1ex; } .amsterdam-breadcrumb__link { @@ -55,10 +50,6 @@ text-decoration-thickness: var(--amsterdam-breadcrumb-item-link-text-decoration-thickness); text-underline-offset: var(--amsterdam-breadcrumb-item-link-text-underline-offset); - &::first-letter { - text-transform: capitalize; - } - &:hover { color: var(--amsterdam-breadcrumb-item-link-hover-color); text-decoration-line: var(--amsterdam-breadcrumb-item-link-hover-text-decoration-line); diff --git a/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json b/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json index e36911e812..d006844a5c 100644 --- a/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json @@ -4,7 +4,9 @@ "font-family": { "value": "{amsterdam.typography.font-family}" }, "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" }, "separator": { - "background-color": { "value": "{amsterdam.color.primary-blue}" } + "background-image": { + "value": "url(\"data:image/svg+xml;utf8,\")" + } }, "item-link": { "color": { "value": "{amsterdam.link-appearance.color}" }, diff --git a/storybook/storybook-react/src/Breadcrumb/Breadcrumb.stories.tsx b/storybook/storybook-react/src/Breadcrumb/Breadcrumb.stories.tsx index 4e26cbe324..def3a61140 100644 --- a/storybook/storybook-react/src/Breadcrumb/Breadcrumb.stories.tsx +++ b/storybook/storybook-react/src/Breadcrumb/Breadcrumb.stories.tsx @@ -15,14 +15,12 @@ export default meta type Story = StoryObj -export const BreadcrumbStory: Story = { +export const Default: Story = { render: () => ( - home - path 1 - path 2 - path 3 - path 5 + Home + Nieuws + Kennisgevingen en bekendmakingen ), parameters: { @@ -31,11 +29,9 @@ export const BreadcrumbStory: Story = { language: 'jsx', code: ` - home - path 1 - path 2 - path 3 - path 5 + Home + Nieuws + Kennisgevingen en bekendmakingen `, },