Breadcrumb design. DDFFORM-608

src/stories/Library/breadcrumb/Breadcrumb.stories.tsx

@@ -8,14 +8,19 @@ const StoryBase: StoryBaseType<BreadcrumbProps> = {
   component: BreadcrumbComp,
   decorators: [withDesign],
   argTypes: {
-    text: {
-      defaultValue: "Nyheder",
+    items: {
+      defaultValue: [
+        { text: "Nyheder" },
+        { text: "Pressemeddelser", link: "/" },
+        { text: "Page" },
+        { text: "Article", link: "/" },
+      ],
     },
   },
   parameters: {
     design: {
       type: "figma",
-      url: "https://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?node-id=437%3A4681",
+      url: "https://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?type=design&node-id=15294-35432&mode=design&t=yVa9YIJSSytj3Ta6-4",
     },
     layout: "centered",
   },

src/stories/Library/breadcrumb/Breadcrumb.tsx

@@ -1,16 +1,18 @@
-import { IconArrow } from "../Arrows/icon-arrow-ui/ArrowUI";
-
 export type BreadcrumbProps = {
-  text: string;
+  items: { link?: string; text: string }[];
 };
-export const Breadcrumb = ({ text }: BreadcrumbProps) => {
+export const Breadcrumb = ({ items }: BreadcrumbProps) => {
   return (
-    <div className="breadcrumb">
-      <IconArrow size="small" direction="left" hover>
-        <a href="/" className="arrow__link" aria-label="Arrow link">
-          <p className="text-links">{text}</p>
-        </a>
-      </IconArrow>
-    </div>
+    <nav className="breadcrumb" role="navigation">
+      {items.map((item) => {
+        return item.link ? (
+          <a href={item.link} className="breadcrumb__item">
+            {item.text}
+          </a>
+        ) : (
+          <span className="breadcrumb__item">{item.text}</span>
+        );
+      })}
+    </nav>
   );
 };

src/stories/Library/breadcrumb/breadcrumb.scss

@@ -1,19 +1,23 @@
 .breadcrumb {
-  .arrow__link {
-    text-decoration: none;
-  }
+  display: flex;
+  padding: $s-sm;
+}
 
-  .text-links {
-    color: $color__text-secondary-gray;
-    margin-bottom: -4px;
-    @include typography($typo__links);
-  }
+.breadcrumb__item {
+  $_arrow-size: 20px;
 
-  .arrow__body {
-    stroke: $color__text-secondary-gray;
-  }
+  @include typography($typo__body-small);
+
+  position: relative;
+  display: inline-block;
+  color: $color__text-secondary-gray;
+  padding-left: $_arrow-size;
 
-  .arrow__head {
-    fill: $color__global-grey;
+  + .breadcrumb__item::before {
+    position: absolute;
+    left: 0;
+    width: $_arrow-size;
+    text-align: center;
+    content: ">";
   }
 }