feat(Divider): Added variant prop with horizontal/vertical STC-545 (#156

)

src/components/Divider/Divider.md

@@ -0,0 +1,27 @@
+The Divider component is used as a separator horizontally or vertically.
+
+### Example
+```jsx
+;(
+  <div>
+    Item 1
+    <Divider />
+    Item 2
+  </div>
+)
+```
+
+### Vertical
+```jsx
+;(
+  <div style={{ display: "flex", gap: 8 }}>
+    Item 1
+    <Divider variant="vertical" />
+    Item 2
+    <Divider variant="vertical" />
+    Item 3
+    <Divider variant="vertical" />
+    Item 4
+  </div>
+)
+```

src/components/Divider/Divider.stories.tsx

@@ -14,6 +14,21 @@ const Template: Story = (props) => (
   </div>
 )
 
+const TemplateVertical: Story = (props) => (
+  <div style={{ display: "flex", gap: 8 }}>
+    Item 1
+    <Divider {...props} variant="vertical" />
+    Item 2
+    <Divider {...props} variant="vertical" />
+    Item 3
+    <Divider {...props} variant="vertical" />
+    Item 4
+  </div>
+)
+
 // Each story then reuses that template
 export const Default = Template.bind({})
 Default.args = {}
+
+export const Vertical = TemplateVertical.bind({})
+Vertical.args = {}

src/components/Divider/Divider.tsx

@@ -4,21 +4,41 @@ import { HTMLAttributes } from "react"
 
 export interface DividerProps {
   className?: HTMLAttributes<HTMLHRElement>["className"]
+  variant?: "horizontal" | "vertical"
 }
 
-const Divider = ({ className }: DividerProps) => {
-  return (
-    <hr
-      className={className}
-      sx={{
-        border: "none",
-        height: "1px",
-        margin: 0,
-        flexShrink: 0,
-        backgroundColor: "text.90",
-      }}
-    />
-  )
+const Divider = ({ className, variant = "horizontal" }: DividerProps) => {
+  switch (variant) {
+    case "vertical":
+      return (
+        <hr
+          className={className}
+          sx={{
+            border: "none",
+            minWidth: "1px",
+            maxWidth: "1px",
+            height: "auto",
+            minHeight: "100%",
+            margin: 0,
+            flexShrink: 0,
+            backgroundColor: "text.90",
+          }}
+        />
+      )
+    default:
+      return (
+        <hr
+          className={className}
+          sx={{
+            border: "none",
+            height: "1px",
+            margin: 0,
+            flexShrink: 0,
+            backgroundColor: "text.90",
+          }}
+        />
+      )
+  }
 }
 
 export default Divider