From 2724d2737baa7f9dc6e6ed939d814f3ff2b5c0c5 Mon Sep 17 00:00:00 2001
From: Matthieu Vachon <mvachon@samsao.co>
Date: Fri, 22 Jun 2018 13:49:59 -0400
Subject: [PATCH] Added missing grid functions, props & values

---
 types/styled-system/index.d.ts              | 72 +++++++++++++++++++-
 types/styled-system/styled-system-tests.tsx | 74 ++++++++++++++++++++-
 2 files changed, 144 insertions(+), 2 deletions(-)

diff --git a/types/styled-system/index.d.ts b/types/styled-system/index.d.ts
index 5fcc4973b1..d99382e5fd 100644
--- a/types/styled-system/index.d.ts
+++ b/types/styled-system/index.d.ts
@@ -5,6 +5,7 @@
 //                 Justin Bennett <https://github.com/zephraph>
 //                 Christopher Pappas <https://github.com/damassi>
 //                 Eloy Durán <https://github.com/alloy>
+//                 Matthieu Vachon <https://github.com/maoueh>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.6
 
@@ -409,7 +410,76 @@ export function flexBasis(...args: any[]): any;
  * Grid Layout
  */
 
-// TODO: Add grid values
+export type GridGapValue = number | string;
+export type ResponsiveGridGapValue = ResponsiveValue<GridGapValue>;
+
+export interface GridGapProps {
+    gridGap?: ResponsiveGridGapValue;
+}
+
+export function gridGap(...args: any[]): any;
+
+export interface GridRowGapProps {
+    gridRowGap?: ResponsiveGridGapValue;
+}
+
+export function gridRowGap(...args: any[]): any;
+
+export interface GridColumnGapProps {
+    gridColumnGap?: ResponsiveGridGapValue;
+}
+
+export function gridColumnGap(...args: any[]): any;
+
+export type GridCellValue = string;
+export type ResponsiveGridCellValue = ResponsiveValue<GridCellValue>;
+
+export interface GridColumnProps {
+    gridColumn?: ResponsiveGridCellValue;
+}
+
+export function gridColumn(...args: any[]): any;
+
+export interface GridRowProps {
+    gridRow?: ResponsiveGridCellValue;
+}
+
+export function gridRow(...args: any[]): any;
+
+export type GridAutoValue = string;
+
+export interface GridAutoFlowProps {
+    gridAutoFlow?: GridAutoValue;
+}
+
+export function gridAutoFlow(...args: any[]): any;
+
+export interface GridAutoRowsProps {
+    gridAutoRows?: GridAutoValue;
+}
+
+export function gridAutoRows(...args: any[]): any;
+
+export interface GridAutoColumnsProps {
+    gridAutoColumns?: GridAutoValue;
+}
+
+export function gridAutoColumns(...args: any[]): any;
+
+export type GridTemplateValue = string;
+export type ResponsiveGridTemplateValue = ResponsiveValue<GridTemplateValue>;
+
+export interface GridTemplatesRowsProps {
+    gridTemplateRows?: ResponsiveGridTemplateValue;
+}
+
+export function gridTemplateRows(...args: any[]): any;
+
+export interface GridTemplatesColumnsProps {
+    gridTemplateColumns?: ResponsiveGridTemplateValue;
+}
+
+export function gridTemplateColumns(...args: any[]): any;
 
 /**
  * Background
diff --git a/types/styled-system/styled-system-tests.tsx b/types/styled-system/styled-system-tests.tsx
index e58791662e..fa472f892a 100644
--- a/types/styled-system/styled-system-tests.tsx
+++ b/types/styled-system/styled-system-tests.tsx
@@ -92,7 +92,27 @@ import {
     active,
     ActiveProps,
     disabled,
-    DisabledProps
+    DisabledProps,
+    GridGapProps,
+    GridRowGapProps,
+    GridColumnGapProps,
+    GridRowProps,
+    GridColumnProps,
+    gridGap,
+    gridRowGap,
+    gridColumnGap,
+    gridRow,
+    gridColumn,
+    GridAutoFlowProps,
+    GridAutoColumnsProps,
+    GridAutoRowsProps,
+    GridTemplatesRowsProps,
+    GridTemplatesColumnsProps,
+    gridAutoFlow,
+    gridAutoRows,
+    gridAutoColumns,
+    gridTemplateColumns,
+    gridTemplateRows
 } from "styled-system";
 
 interface BoxProps
@@ -201,6 +221,30 @@ const Flex = styled.div.attrs<FlexComponentProps>({})`
     ${flexDirection};
 `;
 
+interface GridComponentProps
+    extends GridGapProps,
+        GridRowGapProps,
+        GridColumnGapProps,
+        GridRowProps,
+        GridColumnProps,
+        GridAutoFlowProps,
+        GridAutoColumnsProps,
+        GridAutoRowsProps,
+        GridTemplatesRowsProps,
+        GridTemplatesColumnsProps {}
+const Grid = styled.div.attrs<GridComponentProps>({})`
+    ${gridGap};
+    ${gridRowGap};
+    ${gridColumnGap};
+    ${gridRow};
+    ${gridColumn};
+    ${gridAutoFlow};
+    ${gridAutoRows};
+    ${gridAutoColumns};
+    ${gridTemplateRows};
+    ${gridTemplateColumns};
+`;
+
 const test = () => (
     <div>
         // width: 50%
@@ -309,6 +353,34 @@ const test = () => (
         <Flex flexBasis="auto" />
         // flexDirection (responsive)
         <Flex flexDirection="column" />
+        // gridGap
+        <Grid gridGap="1px" />
+        <Grid gridGap={["1", "2"]} />
+        // gridRowGap
+        <Grid gridRowGap="1px" />
+        <Grid gridRowGap={["1", "2"]} />
+        // gridColumnGap
+        <Grid gridColumnGap="1px" />
+        <Grid gridColumnGap={["1", "2"]} />
+        // gridRow
+        <Grid gridRow="auto" />
+        // gridColumn
+        <Grid gridColumn="auto" />
+        // gridAutoFlow
+        <Grid gridAutoFlow="auto" />
+        <Grid gridAutoFlow={["auto", "1fr"]} />
+        // gridAutoRows
+        <Grid gridAutoRows="auto" />
+        <Grid gridAutoRows={["auto", "1fr"]} />
+        // gridAutoColumns
+        <Grid gridAutoColumns="auto" />
+        <Grid gridAutoColumns={["auto", "1fr"]} />
+        // gridTemplateRows
+        <Grid gridTemplateRows="auto" />
+        <Grid gridTemplateRows={["auto", "1fr"]} />
+        // gridTemplateColumns
+        <Grid gridTemplateColumns="auto" />
+        <Grid gridTemplateColumns={["auto", "1fr"]} />
         // flex (responsive)
         <Box flex="1 1 auto" />
         // justifySelf (responsive)