From 76a38910560c6604d5c778061fd5186324e29c14 Mon Sep 17 00:00:00 2001
From: Haider Alshamma <haidera@nulogy.com>
Date: Tue, 24 Sep 2024 14:49:35 -0400
Subject: [PATCH] fix: do not use an <hr /> as a divider (#1443)

---
 src/Divider/Divider.story.tsx | 29 ++++++++++++++++++++++++++++-
 src/Divider/Divider.tsx       | 20 +++++++++++++++-----
 2 files changed, 43 insertions(+), 6 deletions(-)

diff --git a/src/Divider/Divider.story.tsx b/src/Divider/Divider.story.tsx
index 156fa7563..a5b3af99c 100644
--- a/src/Divider/Divider.story.tsx
+++ b/src/Divider/Divider.story.tsx
@@ -1,9 +1,36 @@
 import React from "react";
 import { Divider } from ".";
+import { Text } from "../Type";
 
 export default {
   title: "Components/Divider",
   component: Divider,
 };
 
-export const _Divider = () => <Divider />;
+export const Default = () => (
+  <div>
+    <Text>Section A</Text>
+    <Divider />
+    <Text>Section B</Text>
+  </div>
+);
+
+export const WithCustomColourAndSpacing = () => (
+  <div>
+    <Text>Section A</Text>
+    <Divider borderColor="darkBlue" my="x1" />
+    <Text>Section B</Text>
+  </div>
+);
+
+export const WithCustomProperties = () => (
+  <div>
+    <Text>Section A</Text>
+    <Divider
+      borderColor="none"
+      height="2px"
+      backgroundImage={`linear-gradient(90deg, hsl(292deg 100% 97%) 0%, hsl(329deg 100% 19%) 17%, hsl(343deg 100% 36%) 33%, hsl(0deg 100% 50%) 50%, hsl(345deg 100% 69%) 67%, hsl(325deg 100% 84%) 83%, hsl(292deg 100% 97%) 100%);`}
+    />
+    <Text>Section B</Text>
+  </div>
+);
diff --git a/src/Divider/Divider.tsx b/src/Divider/Divider.tsx
index 10356df40..15e16fa09 100644
--- a/src/Divider/Divider.tsx
+++ b/src/Divider/Divider.tsx
@@ -1,9 +1,19 @@
-import React from "react";
-import { Box } from "../Box";
-import { BoxProps } from "../Box/Box";
+import styled from "styled-components";
+import { addStyledProps, StyledProps } from "../StyledProps";
 
-const Divider = ({ borderColor = "lightGrey", ...props }: BoxProps) => (
-  <Box as="hr" borderTop="1px solid" borderColor={borderColor} {...props} />
+type Props = StyledProps;
+
+const Divider = styled.div<Props>(
+  ({ theme, color }) => ({
+    display: "flex",
+    marginTop: theme.space.x2,
+    marginBottom: theme.space.x2,
+    marginLeft: "0",
+    marginRight: "0",
+    borderBottom: "1px solid",
+    borderColor: color ? color : theme.colors.lightGrey,
+  }),
+  addStyledProps
 );
 
 export default Divider;