Atlas48/grungnet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add fill option to divider

Browse Source
This commit is contained in:
Mitchell McCaffrey 2020-05-31 16:24:17 +10:00
parent 98543f60eb
commit a5a2c1ac77
1 changed files with 4 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/Divider.js
View File

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