Add divider (#838)

* Implement the divider the correct way

* Add changeset

.changeset/hip-flies-change.md

@@ -0,0 +1,5 @@
+---
+"@vygruppen/spor-react": minor
+---
+
+Divider: Implement size and variant props

packages/spor-react/src/layout/Divider.tsx

@@ -1,26 +1,27 @@
-import { As, Box, BoxProps, forwardRef } from "@chakra-ui/react";
+import {
+  As,
+  BoxProps,
+  Divider as ChakraDivider,
+  DividerProps as ChakraDividerProps,
+  forwardRef,
+} from "@chakra-ui/react";
 import React from "react";
 
-export type DividerProps = BoxProps;
+export type DividerProps = ChakraDividerProps & {
+  size?: "sm" | "md" | "lg";
+  variant?: "solid" | "dashed";
+};
 /** A dividing line, used to divide content.
  *
  * You can specify margins if you need to give the content some space, or use a `Stack` component to do it for you
  *
  * ```tsx
  * <Divider marginTop={4} marginBottom={6} />
  * ```
+ *
+ * There are three different sizes available: `sm`, `md` and `lg`. The default is `md`.
+ * There are two different variants available: `solid` and `dashed`. The default is `solid`.
  */
 export const Divider = forwardRef<BoxProps, As>((props, ref) => {
-  return (
-    <Box
-      as="hr"
-      height="2px"
-      border="0"
-      borderRadius="1px"
-      backgroundColor="blackAlpha.200"
-      width="100%"
-      {...props}
-      ref={ref}
-    />
-  );
+  return <ChakraDivider {...props} ref={ref} />;
 });

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

@@ -0,0 +1,44 @@
+import { defineStyle, defineStyleConfig } from "@chakra-ui/styled-system"
+import { mode } from "@chakra-ui/theme-tools"
+
+const baseStyle = defineStyle(props => ({
+  borderColor: mode("blackAlpha.300", "whiteAlpha.300")(props)
+}))
+
+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',
+  },
+  lg: {
+    borderWidth: '3px',
+    borderRadius: '1.5px',
+  },
+}
+
+export default defineStyleConfig({
+  baseStyle,
+  variants,
+  sizes,
+  defaultProps: {
+    variant: "solid",
+    size: 'md',
+  },
+})

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

@@ -10,6 +10,7 @@ export { default as ChoiceChip } from "./choice-chip";
 export { default as CloseButton } from "./close-button";
 export { default as Code } from "./code";
 export { default as Datepicker } from "./datepicker";
+export { default as Divider } from "./divider";
 export { default as Drawer } from "./drawer";
 export { default as FloatingActionButton } from "./fab";
 export { default as Form } from "./form";
@@ -33,3 +34,4 @@ export { default as Tabs } from "./tabs";
 export { default as Textarea } from "./textarea";
 export { default as Toast } from "./toast";
 export { default as TravelTag } from "./travel-tag";
+