Add breadcrumbs (#829)

* Make the studio not break for some edge cases

* Implement breadcrumbs

* Add changeset

.changeset/flat-avocados-notice.md

@@ -0,0 +1,5 @@
+---
+"@vygruppen/spor-react": minor
+---
+
+New components: Breadcrumb, BreadcrumbItem and BreadcrumbLink

apps/studio/sanity.config.ts

@@ -18,26 +18,30 @@ export default defineConfig({
   },
   document: {
     productionUrl: async (prev, { document, getClient }) => {
-      const configuredClient = getClient({ apiVersion: "2022-10-06" });
-      const host = window.location.href.includes("localhost")
-        ? "http://localhost:3000"
-        : "https://spor.vy.no";
+      try {
+        const configuredClient = getClient({ apiVersion: "2022-10-06" });
+        const host = window.location.href.includes("localhost")
+          ? "http://localhost:3000"
+          : "https://spor.vy.no";
 
-      if (document._type === "article") {
-        if (!document.category) {
-          return host;
-        }
-        const category = await configuredClient.fetch(
-          `*[_id == $id] { "slug": slug.current }[0]`,
-          { id: (document.category as any)?._ref }
-        );
+        if (document._type === "article") {
+          if (!document.category) {
+            return host;
+          }
+          const category = await configuredClient.fetch(
+            `*[_id == $id] { "slug": slug.current }[0]`,
+            { id: (document.category as any)?._ref }
+          );
 
-        const params = new URLSearchParams();
-        params.set("preview", import.meta.env.SANITY_STUDIO_PREVIEW_SECRET);
+          const params = new URLSearchParams();
+          params.set("preview", import.meta.env.SANITY_STUDIO_PREVIEW_SECRET);
 
-        return `${host}/${category.slug}/${
-          (document?.slug as any)?.current
-        }?${params}`;
+          return `${host}/${category.slug}/${
+            (document?.slug as any)?.current
+          }?${params}`;
+        }
+      } catch (e) {
+        console.error(e);
       }
       return prev;
     },

packages/spor-react/src/breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,37 @@
+import {
+  Breadcrumb as ChakraBreadcrumb,
+  BreadcrumbItem as ChakraBreadcrumbItem,
+  BreadcrumbLink as ChakraBreadcrumbLink,
+  BreadcrumbProps as ChakraBreadcrumbProps,
+} from "@chakra-ui/react";
+import { DropdownRightFill18Icon } from "@vygruppen/spor-icon-react";
+import React from "react";
+
+type BreadcrumbProps = ChakraBreadcrumbProps;
+/**
+ * A breadcrumb component.
+ *
+ * Used to create customizable breadcrumbs.
+ *
+ * ```tsx
+ * <Breadcrumb>
+ *   <BreadcrumbItem>
+ *     <BreadcrumbLink href="/">Home</BreadcrumbLink>
+ *   </BreadcrumbItem>
+ *   <BreadcrumbItem isCurrentPage={true}>
+ *    <BreadcrumbLink href="/about">About</BreadcrumbLink>
+ *  </BreadcrumbItem>
+ * </Breadcrumb>
+ * ```
+ */
+export const Breadcrumb = (props: BreadcrumbProps) => {
+  return (
+    <ChakraBreadcrumb
+      separator={<DropdownRightFill18Icon color="blackAlpha.400" />}
+      {...props}
+    />
+  );
+};
+
+export const BreadcrumbItem = ChakraBreadcrumbItem;
+export const BreadcrumbLink = ChakraBreadcrumbLink;

packages/spor-react/src/breadcrumb/index.tsx

@@ -0,0 +1 @@
+export * from "./Breadcrumb";

packages/spor-react/src/index.tsx

@@ -2,6 +2,7 @@ export { extendTheme } from "@chakra-ui/react";
 export * as tokens from "@vygruppen/spor-design-tokens";
 export * from "./accordion";
 export * from "./alert";
+export * from "./breadcrumb";
 export * from "./button";
 export * from "./card";
 export * from "./datepicker";

packages/spor-react/src/theme/components/breadcrumb.ts

@@ -0,0 +1,47 @@
+import { breadcrumbAnatomy as parts } from "@chakra-ui/anatomy";
+import {
+  createMultiStyleConfigHelpers,
+  defineStyle,
+} from "@chakra-ui/styled-system";
+import { getBoxShadowString } from "../utils/box-shadow-utils";
+
+const { defineMultiStyleConfig, definePartsStyle } =
+  createMultiStyleConfigHelpers(parts.keys);
+
+const baseStyleLink = defineStyle({
+  transitionProperty: "common",
+  transitionDuration: "fast",
+  transitionTimingFunction: "ease-out",
+  outline: "none",
+  color: "inherit",
+  textDecoration: "none",
+  "&:not([aria-current=page])": {
+    cursor: "pointer",
+    paddingX: 0.5,
+    borderRadius: "xs",
+    _hover: {
+      backgroundColor: "coralGreen",
+    },
+    _focusVisible: {
+      boxShadow: getBoxShadowString({
+        borderColor: "greenHaze",
+        borderWidth: 2,
+      }),
+    },
+    _active: {
+      backgroundColor: "mint",
+    },
+  },
+});
+
+const baseStyle = definePartsStyle({
+  link: baseStyleLink,
+  list: {
+    flexWrap: "wrap",
+    alignItems: "flex-start",
+  },
+});
+
+export default defineMultiStyleConfig({
+  baseStyle,
+});

packages/spor-react/src/theme/components/index.ts

@@ -1,6 +1,7 @@
 export { default as Accordion } from "./accordion";
 export { default as Alert } from "./alert";
 export { default as Badge } from "./badge";
+export { default as Breadcrumb } from "./breadcrumb";
 export { default as Button } from "./button";
 export { default as Card } from "./card";
 export { default as CardSelect } from "./card-select";