chore: Moved Breadcrumbs to design system and added stories

Approved-by: Bianca Widstam

packages/design-system/lib/components/Breadcrumbs/Arrow/arrow.module.css

@@ -0,0 +1,39 @@
+.arrow > svg {
+  display: block;
+}
+
+[data-placement="left"] .arrow,
+[data-placement="left top"] .arrow,
+[data-placement="left bottom"] .arrow {
+  transform: rotate(270deg);
+}
+
+[data-placement="right"] .arrow,
+[data-placement="right top"] .arrow,
+[data-placement="right bottom"] .arrow {
+  transform: rotate(90deg);
+}
+
+[data-placement="bottom"] .arrow,
+[data-placement="bottom left"] .arrow,
+[data-placement="bottom right"] .arrow {
+  transform: rotate(180deg);
+}
+
+.small {
+  width: 14px;
+  height: 8px;
+}
+
+.medium {
+  width: 27px;
+  height: 13px;
+}
+
+.black {
+  fill: var(--Surface-UI-Fill-Intense);
+}
+
+.white {
+  fill: var(--Surface-UI-Fill-Default);
+}

packages/design-system/lib/components/Breadcrumbs/Arrow/arrow.ts

@@ -0,0 +1,8 @@
+import type { VariantProps } from "class-variance-authority"
+
+import type { arrowVariants } from "./variants"
+
+export interface ArrowProps
+  extends
+    Omit<React.HTMLAttributes<HTMLDivElement>, "color">,
+    VariantProps<typeof arrowVariants> {}

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

@@ -0,0 +1,15 @@
+import { arrowVariants } from "./variants"
+
+import type { ArrowProps } from "./arrow"
+
+export function Arrow({ color, size }: ArrowProps) {
+  const className = arrowVariants({ color, size })
+
+  return (
+    <div className={className}>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 13">
+        <path d="M13.093 12.193.9 0h25.8L14.508 12.193a1 1 0 0 1-1.415 0Z" />
+      </svg>
+    </div>
+  )
+}

packages/design-system/lib/components/Breadcrumbs/Arrow/variants.ts

@@ -0,0 +1,20 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./arrow.module.css"
+
+export const arrowVariants = cva(styles.arrow, {
+  variants: {
+    color: {
+      black: styles.black,
+      white: styles.white,
+    },
+    size: {
+      small: styles.small,
+      medium: styles.medium,
+    },
+  },
+  defaultVariants: {
+    color: "white",
+    size: "medium",
+  },
+})