From 4603ee16b7efbbfe03280cb41ad5a3effe1cae6a Mon Sep 17 00:00:00 2001
From: Alice Clausen <42611957+alicemacl@users.noreply.github.com>
Date: Wed, 25 Sep 2024 15:51:02 +0200
Subject: [PATCH] Divider: Update styling for dashed variant (#1272)

* Update styling for divider

* Add changeset

* Update with prettier code
---
 .changeset/tough-feet-give.md                 |  5 ++
 .../src/theme/components/divider.ts           | 71 ++++++++++---------
 2 files changed, 41 insertions(+), 35 deletions(-)
 create mode 100644 .changeset/tough-feet-give.md

diff --git a/.changeset/tough-feet-give.md b/.changeset/tough-feet-give.md
new file mode 100644
index 000000000..895362eca
--- /dev/null
+++ b/.changeset/tough-feet-give.md
@@ -0,0 +1,5 @@
+---
+"@vygruppen/spor-react": patch
+---
+
+Divider: Update styling for dashed variant
diff --git a/packages/spor-react/src/theme/components/divider.ts b/packages/spor-react/src/theme/components/divider.ts
index 8c14d5123..44324346f 100644
--- a/packages/spor-react/src/theme/components/divider.ts
+++ b/packages/spor-react/src/theme/components/divider.ts
@@ -1,42 +1,43 @@
-import { defineStyle, defineStyleConfig } from "@chakra-ui/styled-system";
-import { mode } from "@chakra-ui/theme-tools";
+import { defineStyleConfig } from "@chakra-ui/styled-system";
+import { mode, StyleFunctionProps } from "@chakra-ui/theme-tools";
 
-const baseStyle = defineStyle((props) => ({
-  borderColor: mode("blackAlpha.300", "whiteAlpha.300")(props),
-}));
+const isSolid = (props: StyleFunctionProps) => props.variant === "solid";
+const isDashed = (props: StyleFunctionProps) => props.variant === "dashed";
 
-const variantSolid = defineStyle({
-  borderStyle: "solid",
-});
-
-const variantDashed = defineStyle({
-  borderStyle: "dashed",
-});
-
-const variants = {
-  solid: variantSolid,
-  dashed: variantDashed,
-};
-
-const sizes = {
-  sm: {
-    borderWidth: "1px",
-    borderRadius: "0.5px",
-  },
-  md: {
-    borderWidth: "2px",
-    borderRadius: "1px",
+export default defineStyleConfig({
+  baseStyle: (props) => ({
+    borderColor: mode("blackAlpha.300", "whiteAlpha.300")(props),
+  }),
+  variants: {
+    solid: {
+      borderStyle: "solid",
+    },
+    dashed: (props) => ({
+      backgroundImage: `repeating-linear-gradient(90deg, ${mode("blackAlpha.300", "whiteAlpha.300")(props)}, ${mode("blackAlpha.300", "whiteAlpha.300")(props)} 4px, transparent 4px, transparent 10px)`,
+      backgroundPosition: "left bottom",
+      backgroundRepeat: "repeat-x",
+      backgroundSize: "100% 3px",
+      borderRadius:
+        props.size === "sm" ? "0.5px" : props.size === "md" ? "1px" : "1.5px",
+    }),
   },
-  lg: {
-    borderWidth: "3px",
-    borderRadius: "1.5px",
+  sizes: {
+    sm: (props) => ({
+      borderWidth: isSolid(props) ? "1px" : undefined,
+      borderRadius: isSolid(props) ? "0.5px" : undefined,
+      height: isDashed(props) ? "1px" : undefined,
+    }),
+    md: (props) => ({
+      borderWidth: isSolid(props) ? "2px" : undefined,
+      borderRadius: isSolid(props) ? "1px" : "10px",
+      height: isDashed(props) ? "2px" : undefined,
+    }),
+    lg: (props) => ({
+      borderWidth: isSolid(props) ? "3px" : undefined,
+      borderRadius: isSolid(props) ? "1.5px" : undefined,
+      height: isDashed(props) ? "3px" : undefined,
+    }),
   },
-};
-
-export default defineStyleConfig({
-  baseStyle,
-  variants,
-  sizes,
   defaultProps: {
     variant: "solid",
     size: "md",