chore: Moved Breadcrumbs to design system and added stories

Approved-by: Bianca Widstam
2026-01-21 07:19:19 +00:00
parent 17c78be916
commit 8a143a2916
35 changed files with 524 additions and 357 deletions
--- a/packages/design-system/lib/components/Breadcrumbs/breadcrumbs.module.css
+++ b/packages/design-system/lib/components/Breadcrumbs/breadcrumbs.module.css
@@ -0,0 +1,127 @@
+.breadcrumbsWrapper {
+  --breadcrumbs-background-color: transparent;
+  --breadcrumbs-text-color: var(--Text-Interactive-Secondary);
+
+  --breadcrumbs-button-color: var(--Text-Interactive-Default);
+  --breadcrumbs-button-hover-color: var(--Text-Interactive-Hover);
+
+  padding: var(--Space-x4) 0 var(--Space-x3);
+  margin: 0 auto;
+  width: 100%;
+  color: var(--breadcrumbs-text-color);
+  background-color: var(--breadcrumbs-background-color);
+
+  &.surfaceSecondaryDefault {
+    --breadcrumbs-background-color: var(--Surface-Secondary-Default);
+  }
+
+  &.backgroundPrimary {
+    --breadcrumbs-background-color: var(--Background-Primary);
+  }
+
+  &.contentWidth .breadcrumbs {
+    max-width: var(--max-width-content);
+  }
+
+  &.headerWidth .breadcrumbs {
+    max-width: min(
+      var(--max-width-page),
+      calc(100% - var(--max-width-spacing))
+    );
+  }
+
+  &.pageWidth .breadcrumbs {
+    max-width: var(--max-width-page);
+  }
+}
+
+.breadcrumbs {
+  display: flex;
+  gap: var(--Space-x025);
+  padding-inline-start: 0;
+  margin: 0 auto;
+}
+
+.showMoreButton {
+  border: none;
+  background-color: transparent;
+  height: 100%;
+  /* this increases the width of the button for tapping */
+  padding: 0 5px;
+  margin: 0 -5px;
+  color: var(--breadcrumbs-button-color);
+
+  &:not(.lastBreadcrumb) {
+    cursor: pointer;
+
+    &:hover {
+      color: var(--breadcrumbs-button-hover-color);
+      text-decoration: underline;
+    }
+  }
+}
+
+.dialog {
+  background-color: var(--Surface-Primary-Default);
+  padding: var(--Space-x1);
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x05);
+  border-radius: var(--Corner-radius-md);
+  min-width: 169px;
+  outline: none;
+  box-shadow: 0 0 4px 2px rgb(0 0 0 / 10%);
+}
+
+.dialogLink {
+  display: block;
+  border-radius: var(--Corner-radius-md);
+  padding: var(--Space-x1);
+  color: var(--Text-Default);
+
+  &:hover,
+  &:focus {
+    background-color: var(--Surface-Primary-Hover);
+  }
+}
+
+.lastBreadcrumb {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
+}
+
+.tooltip {
+  background-color: var(--Surface-UI-Fill-Intense);
+  padding: var(--Space-x05) var(--Space-x1);
+  border-radius: var(--Corner-radius-sm);
+  color: var(--Text-Inverted);
+  outline: none;
+}
+
+@media screen and (max-width: 767px) {
+  .desktop {
+    display: none;
+  }
+
+  .breadcrumbsWrapper.isThemedMobile {
+    --breadcrumbs-background-color: var(--Surface-Brand-Primary-1-Default);
+    --breadcrumbs-text-color: var(--Text-Brand-OnPrimary-1-Default);
+    --breadcrumbs-button-color: var(--Text-Brand-OnPrimary-1-Default);
+    --breadcrumbs-button-hover-color: var(--Text-Brand-OnPrimary-1-Hover);
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .mobile {
+    display: none;
+  }
+
+  .breadcrumbsWrapper.isThemedDesktop {
+    --breadcrumbs-background-color: var(--Surface-Brand-Primary-1-Default);
+    --breadcrumbs-text-color: var(--Text-Brand-OnPrimary-1-Default);
+    --breadcrumbs-button-color: var(--Text-Brand-OnPrimary-1-Default);
+    --breadcrumbs-button-hover-color: var(--Text-Brand-OnPrimary-1-Hover);
+  }
+}