chore: Moved Breadcrumbs to design system and added stories

Approved-by: Bianca Widstam

packages/design-system/lib/components/Breadcrumbs/Breadcrumb/BreadcrumbSkeleton.tsx

@@ -0,0 +1,27 @@
+import styles from "./breadcrumb.module.css"
+
+import { MaterialIcon } from "../../Icons/MaterialIcon"
+import { Typography } from "../../Typography"
+
+export function BreadcrumbSkeleton({
+  children,
+  isLastBreadcrumb,
+}: React.PropsWithChildren<{ isLastBreadcrumb?: boolean }>) {
+  return (
+    <li className={styles.breadcrumb}>
+      <Typography variant="Label/xsRegular">
+        <span className={styles.link}>{children}</span>
+      </Typography>
+
+      {!isLastBreadcrumb ? (
+        <MaterialIcon
+          icon="chevron_right"
+          size={20}
+          aria-hidden="true"
+          color="CurrentColor"
+          className={styles.icon}
+        />
+      ) : null}
+    </li>
+  )
+}

packages/design-system/lib/components/Breadcrumbs/Breadcrumb/breadcrumb.module.css

@@ -0,0 +1,27 @@
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: var(--Space-x025);
+  flex-shrink: 0;
+  flex-grow: 0;
+
+  &:last-of-type {
+    flex: 1;
+    max-width: 100%;
+    min-width: 0;
+  }
+}
+
+.link {
+  display: flex;
+  color: var(--breadcrumbs-text-color);
+
+  &:hover {
+    color: var(--breadcrumbs-text-hover-color);
+    text-decoration: underline;
+  }
+}
+
+.icon {
+  flex-shrink: 0;
+}

packages/design-system/lib/components/Breadcrumbs/Breadcrumb/index.tsx

@@ -0,0 +1,47 @@
+import { cx } from "class-variance-authority"
+import NextLink from "next/link"
+import {
+  Breadcrumb as BreadcrumbRAC,
+  type BreadcrumbProps as BreadcrumbRACProps,
+} from "react-aria-components"
+
+import styles from "./breadcrumb.module.css"
+
+import { PropsWithChildren } from "react"
+import { MaterialIcon } from "../../Icons/MaterialIcon"
+import { Typography } from "../../Typography"
+
+interface BreadcrumbProps extends PropsWithChildren<BreadcrumbRACProps> {
+  className?: string
+  href?: string
+}
+
+export function Breadcrumb({
+  className = "",
+  href,
+  children,
+  ...props
+}: BreadcrumbProps) {
+  return (
+    <BreadcrumbRAC className={cx(styles.breadcrumb, className)} {...props}>
+      {href ? (
+        <>
+          <Typography variant="Label/xsRegular">
+            <NextLink className={styles.link} href={href}>
+              {children}
+            </NextLink>
+          </Typography>
+          <MaterialIcon
+            icon="chevron_right"
+            size={20}
+            aria-hidden="true"
+            color="CurrentColor"
+            className={styles.icon}
+          />
+        </>
+      ) : (
+        children
+      )}
+    </BreadcrumbRAC>
+  )
+}