From 1fbd98307177dfc3faaab84390599c14f642d636 Mon Sep 17 00:00:00 2001
From: Haider Alshamma <haidera@nulogy.com>
Date: Tue, 26 Nov 2024 14:05:01 -0500
Subject: [PATCH] feat: prop for secondary dividers

---
 src/Divider/Divider.story.tsx | 12 ++++++++++--
 src/Divider/Divider.tsx       | 18 ++++++++++--------
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/Divider/Divider.story.tsx b/src/Divider/Divider.story.tsx
index a5b3af99c..04b897eea 100644
--- a/src/Divider/Divider.story.tsx
+++ b/src/Divider/Divider.story.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import { Divider } from ".";
 import { Text } from "../Type";
+import { Divider } from ".";
 
 export default {
   title: "Components/Divider",
@@ -15,6 +15,14 @@ export const Default = () => (
   </div>
 );
 
+export const Secondary = () => (
+  <div>
+    <Text>Section A</Text>
+    <Divider secondary />
+    <Text>Section B</Text>
+  </div>
+);
+
 export const WithCustomColourAndSpacing = () => (
   <div>
     <Text>Section A</Text>
@@ -29,7 +37,7 @@ export const WithCustomProperties = () => (
     <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%);`}
+      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 15e16fa09..22ce0163f 100644
--- a/src/Divider/Divider.tsx
+++ b/src/Divider/Divider.tsx
@@ -1,17 +1,19 @@
 import styled from "styled-components";
 import { addStyledProps, StyledProps } from "../StyledProps";
 
-type Props = StyledProps;
+export interface DividerProps extends StyledProps, React.HTMLAttributes<HTMLHRElement> {
+  secondary?: boolean;
+}
 
-const Divider = styled.div<Props>(
-  ({ theme, color }) => ({
-    display: "flex",
+const Divider = styled.hr<DividerProps>(
+  ({ theme, color, secondary }) => ({
+    border: "none",
+    borderTopWidth: "1px",
+    borderTopStyle: "solid",
+    width: "100%",
     marginTop: theme.space.x2,
     marginBottom: theme.space.x2,
-    marginLeft: "0",
-    marginRight: "0",
-    borderBottom: "1px solid",
-    borderColor: color ? color : theme.colors.lightGrey,
+    borderColor: color || (secondary ? theme.colors.whiteGrey : theme.colors.lightGrey),
   }),
   addStyledProps
 );