fix: Adjust size of breadcrumb separator and allow natural text wrapp…

…ing (#913)
Amsterdam · Dec 13, 2023 · caba940 · caba940
1 parent 6e6047a
commit caba940
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 27 deletions.
diff --git 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
@@ -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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23000000' fill-rule='evenodd' d='m9.757 32-2.9-2.91L19.937 16 6.857 2.91 9.757 0l16 16z'/></svg>\")"
+        }
       },
       "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
@@ -15,14 +15,12 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const BreadcrumbStory: Story = {
+export const Default: Story = {
   render: () => (
     <Breadcrumb>
-      <Breadcrumb.Item href="#">home</Breadcrumb.Item>
-      <Breadcrumb.Item href="#">path 1</Breadcrumb.Item>
-      <Breadcrumb.Item href="#">path 2</Breadcrumb.Item>
-      <Breadcrumb.Item href="#">path 3</Breadcrumb.Item>
-      <Breadcrumb.Item href="#">path 5</Breadcrumb.Item>
+      <Breadcrumb.Item href="#">Home</Breadcrumb.Item>
+      <Breadcrumb.Item href="#">Nieuws</Breadcrumb.Item>
+      <Breadcrumb.Item href="#">Kennisgevingen en bekendmakingen</Breadcrumb.Item>
     </Breadcrumb>
   ),
   parameters: {
@@ -31,11 +29,9 @@ export const BreadcrumbStory: Story = {
         language: 'jsx',
         code: `
 <Breadcrumb>
-  <Breadcrumb.Item href="#">home</Breadcrumb.Item>
-  <Breadcrumb.Item href="#">path 1</Breadcrumb.Item>
-  <Breadcrumb.Item href="#">path 2</Breadcrumb.Item>
-  <Breadcrumb.Item href="#">path 3</Breadcrumb.Item>
-  <Breadcrumb.Item href="#">path 5</Breadcrumb.Item>
+  <Breadcrumb.Item href="#">Home</Breadcrumb.Item>
+  <Breadcrumb.Item href="#">Nieuws</Breadcrumb.Item>
+  <Breadcrumb.Item href="#">Kennisgevingen en bekendmakingen</Breadcrumb.Item>
 </Breadcrumb>
         `,
       },