From a5a2c1ac7768a3b31ad6e4a31fbeb40e00df6810 Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Sun, 31 May 2020 16:24:17 +1000
Subject: [PATCH] Add fill option to divider

---
 src/components/Divider.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/Divider.js b/src/components/Divider.js
index 853aa0c..0d51b0a 100644
--- a/src/components/Divider.js
+++ b/src/components/Divider.js
@@ -1,15 +1,15 @@
 import React from "react";
 import { Divider } from "theme-ui";
 
-function StyledDivider({ vertical, color }) {
+function StyledDivider({ vertical, color, fill }) {
   return (
     <Divider
       my={vertical ? 0 : 2}
       mx={vertical ? 2 : 0}
       bg={color}
       sx={{
-        height: vertical ? "24px" : "2px",
-        width: vertical ? "2px" : "24px",
+        height: vertical ? (fill ? "100%" : "24px") : "2px",
+        width: vertical ? "2px" : fill ? "100%" : "24px",
         borderRadius: "2px",
         opacity: 0.5,
       }}
@@ -20,6 +20,7 @@ function StyledDivider({ vertical, color }) {
 StyledDivider.defaultProps = {
   vertical: false,
   color: "text",
+  fill: false,
 };
 
 export default StyledDivider;