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 = () => ( ); +export const Secondary = () => ( +
+ Section A + + Section B +
+); + export const WithCustomColourAndSpacing = () => (
Section A @@ -29,7 +37,7 @@ export const WithCustomProperties = () => ( Section B
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 { + secondary?: boolean; +} -const Divider = styled.div( - ({ theme, color }) => ({ - display: "flex", +const Divider = styled.hr( + ({ 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 );