From ac4c8ffb2002194c10d92e782a5429f758fea46a Mon Sep 17 00:00:00 2001
From: Dan Head <me@danielhead.com>
Date: Wed, 3 Feb 2021 20:35:19 +0000
Subject: [PATCH] feat(grid): optional vertical separator

---
 src/components/grid.js | 31 +++++++++++++++++++++++++++----
 1 file changed, 27 insertions(+), 4 deletions(-)

diff --git a/src/components/grid.js b/src/components/grid.js
index 8b92f6e..4c9465b 100644
--- a/src/components/grid.js
+++ b/src/components/grid.js
@@ -4,7 +4,7 @@ import { css } from "@emotion/react";
 
 const Container = styled.div`
   display: grid;
-  gap: var(--spacing-y-sm) var(--spacing-x-md);
+  gap: var(--spacing-y-lg) var(--spacing-x-md);
   ${props =>
     props.columns &&
     props.columns.map((column, i) =>
@@ -18,16 +18,39 @@ const Container = styled.div`
     ${
       i === 1 &&
       css`
-        gap: var(--spacing-y-md) var(--spacing-x-lg);
+        gap: var(--spacing-y-lg) var(--spacing-x-lg);
       `
     }
 `
     )}
+
+  ${props =>
+    props.verticalSeparator &&
+    css`
+      @media (max-width: ${props.verticalSeparator}) {
+        > * {
+          padding-bottom: var(--spacing-y-lg);
+        }
+
+        > :not(:last-of-type) {
+          border-bottom: 1px solid var(--color-mid-grey);
+        }
+      }
+    `}
 `;
 
-export default function Grid({ columns, breakpoints = ["30em"], children }) {
+export default function Grid({
+  columns,
+  breakpoints = ["30em"],
+  verticalSeparator,
+  children
+}) {
   return (
-    <Container columns={columns} breakpoints={breakpoints}>
+    <Container
+      columns={columns}
+      breakpoints={breakpoints}
+      verticalSeparator={verticalSeparator}
+    >
       {children}
     </Container>
   );