Merge pull request #618 from danskernesdigitalebibliotek/breadcrumb-d…

…esign

Breadcrumb design. DDFFORM-608

src/stories/Library/article-header/article-header.scss

@@ -1,9 +1,9 @@
 .article-header {
   @include layout-container;
-  @include block-spacing();
   display: grid;
   gap: $s-xl;
   position: relative;
+  margin-top: $s-lg;
 
   @include media-query__small {
     margin-bottom: $s-4xl;

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

@@ -8,16 +8,20 @@ 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,16 @@
-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}>{item.text}</a>
+        ) : (
+          <span>{item.text}</span>
+        );
+      })}
+    </nav>
   );
 };

src/stories/Library/breadcrumb/breadcrumb.scss

@@ -1,19 +1,38 @@
 .breadcrumb {
-  .arrow__link {
-    text-decoration: none;
-  }
+  @include layout-container($layout__max-width--large);
 
-  .text-links {
-    color: $color__text-secondary-gray;
-    margin-bottom: -4px;
-    @include typography($typo__links);
-  }
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: $s-lg;
+  margin-bottom: $s-lg;
+  row-gap: $s-sm;
 
-  .arrow__body {
-    stroke: $color__text-secondary-gray;
+  > a {
+    @extend %text-inline-link;
   }
+}
+
+// We cannot be sure to be able to put classes directly on the children,
+// as they might be atom links.
+.breadcrumb > * {
+  @include typography($typo__body-small);
+
+  position: relative;
+  display: inline-block;
+  color: $color__text-secondary-gray;
+}
+
+// Targeting all the items that should have a > prefix.
+.breadcrumb > * + * {
+  $_arrow-size: 20px;
+
+  padding-left: $_arrow-size;
 
-  .arrow__head {
-    fill: $color__global-grey;
+  &::before {
+    position: absolute;
+    content: ">";
+    left: 0;
+    width: $_arrow-size;
+    text-align: center;
   }
 }