feat: prop for secondary dividers

nulogy · Nov 26, 2024 · 1fbd983 · 1fbd983
1 parent e5aedad
commit 1fbd983
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 10 deletions.
diff --git 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
@@ -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
 );