fix(SW-1877): new responsive breadcrumbs

apps/scandic-web/components/TempDesignSystem/Popover/Arrow/arrow.module.css

@@ -1,22 +1,39 @@
-.arrow {
-  transform-origin: center;
-  transform: translateY(-2px);
+.arrow > svg {
+  display: block;
 }
 
 [data-placement="left"] .arrow,
 [data-placement="left top"] .arrow,
 [data-placement="left bottom"] .arrow {
-  transform: rotate(270deg) translateY(-6px);
+  transform: rotate(270deg);
 }
 
 [data-placement="right"] .arrow,
 [data-placement="right top"] .arrow,
 [data-placement="right bottom"] .arrow {
-  transform: rotate(90deg) translateY(-6px);
+  transform: rotate(90deg);
 }
 
 [data-placement="bottom"] .arrow,
 [data-placement="bottom left"] .arrow,
 [data-placement="bottom right"] .arrow {
-  transform: rotate(180deg) translateY(-2px);
+  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);
 }

apps/scandic-web/components/TempDesignSystem/Popover/Arrow/arrow.ts

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

apps/scandic-web/components/TempDesignSystem/Popover/Arrow/index.tsx

@@ -1,18 +1,14 @@
-import styles from "./arrow.module.css"
+import { arrowVariants } from "./variants"
+
+import type { ArrowProps } from "./arrow"
+
+export function Arrow({ color, size }: ArrowProps) {
+  const className = arrowVariants({ color, size })
 
-export function Arrow() {
   return (
-    <div className={styles.arrow}>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="27"
-        height="13"
-        fill="none"
-      >
-        <path
-          fill="#fff"
-          d="M13.093 12.193.9 0h25.8L14.508 12.193a1 1 0 0 1-1.415 0Z"
-        />
+    <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>
   )

apps/scandic-web/components/TempDesignSystem/Popover/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",
+  },
+})