From 56d96b2086761eb92fa3fa151f64364dc8727a2d Mon Sep 17 00:00:00 2001
From: Orlando Valverde <4467518+septum@users.noreply.github.com>
Date: Fri, 18 Oct 2024 12:12:40 -0600
Subject: [PATCH] frontend: Add breadcrumbs component (#3145)

---
 .../core/src/Breadcrumbs/breadcrumb.tsx       | 25 +++++++++++++++
 .../packages/core/src/Breadcrumbs/index.tsx   | 31 +++++++++++++++++++
 .../packages/core/src/Breadcrumbs/types.tsx   |  4 +++
 frontend/packages/core/src/index.tsx          |  2 ++
 4 files changed, 62 insertions(+)
 create mode 100644 frontend/packages/core/src/Breadcrumbs/breadcrumb.tsx
 create mode 100644 frontend/packages/core/src/Breadcrumbs/index.tsx
 create mode 100644 frontend/packages/core/src/Breadcrumbs/types.tsx

diff --git a/frontend/packages/core/src/Breadcrumbs/breadcrumb.tsx b/frontend/packages/core/src/Breadcrumbs/breadcrumb.tsx
new file mode 100644
index 0000000000..1415ed46de
--- /dev/null
+++ b/frontend/packages/core/src/Breadcrumbs/breadcrumb.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+
+import { Link } from "../link";
+import styled from "../styled";
+import { Typography } from "../typography";
+
+import type { BreadcrumbEntry } from "./types";
+
+const StyledTypography = styled(Typography)({
+  fontWeight: 500,
+});
+
+const Breadcrumb = ({ label, url }: BreadcrumbEntry) => {
+  return url ? (
+    <Link href={url} target="_self" whiteSpace="nowrap">
+      <StyledTypography variant="caption2" color="inherit">
+        {label}
+      </StyledTypography>
+    </Link>
+  ) : (
+    <StyledTypography variant="caption2">{label}</StyledTypography>
+  );
+};
+
+export default Breadcrumb;
diff --git a/frontend/packages/core/src/Breadcrumbs/index.tsx b/frontend/packages/core/src/Breadcrumbs/index.tsx
new file mode 100644
index 0000000000..c04b486691
--- /dev/null
+++ b/frontend/packages/core/src/Breadcrumbs/index.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+import { Breadcrumbs as MuiBreadcrumbs, Theme } from "@mui/material";
+import { alpha } from "@mui/system";
+
+import styled from "../styled";
+
+import Breadcrumb from "./breadcrumb";
+import type { BreadcrumbEntry } from "./types";
+
+interface BreadcrumbsProps {
+  entries: BreadcrumbEntry[];
+}
+
+const StyledBreadcrumbs = styled(MuiBreadcrumbs)(({ theme }: { theme: Theme }) => ({
+  margin: theme.spacing(theme.clutch.spacing.sm, theme.clutch.spacing.none),
+  "& .MuiBreadcrumbs-separator": {
+    color: alpha(theme.colors.neutral[900], 0.6),
+  },
+}));
+
+const Breadcrumbs = ({ entries }: BreadcrumbsProps) => (
+  <StyledBreadcrumbs>
+    {entries.map((entry: BreadcrumbEntry) => (
+      <Breadcrumb key={entry.label} {...entry} />
+    ))}
+  </StyledBreadcrumbs>
+);
+
+export * from "./types";
+
+export default Breadcrumbs;
diff --git a/frontend/packages/core/src/Breadcrumbs/types.tsx b/frontend/packages/core/src/Breadcrumbs/types.tsx
new file mode 100644
index 0000000000..a7547ffea1
--- /dev/null
+++ b/frontend/packages/core/src/Breadcrumbs/types.tsx
@@ -0,0 +1,4 @@
+export interface BreadcrumbEntry {
+  label: string;
+  url?: string;
+}
diff --git a/frontend/packages/core/src/index.tsx b/frontend/packages/core/src/index.tsx
index 8ce41f75b8..11d509aa50 100644
--- a/frontend/packages/core/src/index.tsx
+++ b/frontend/packages/core/src/index.tsx
@@ -63,6 +63,7 @@ export { useTheme } from "./AppProvider/themes";
 export { ThemeProvider } from "./Theme";
 export { getDisplayName } from "./utils";
 export { default as WorkflowLayout } from "./WorkflowLayout";
+export { default as Breadcrumbs } from "./Breadcrumbs";
 
 export { css as EMOTION_CSS, keyframes as EMOTION_KEYFRAMES } from "@emotion/react";
 
@@ -84,3 +85,4 @@ export type {
 export type { ClutchError } from "./Network/errors";
 export type { TypographyProps } from "./typography";
 export type { StyledComponent } from "@emotion/styled";
+export type { BreadcrumbEntry } from "./Breadcrumbs";