feat(component): adds grid mixin

Author: dw2

src/mixins.tsx

@@ -24,3 +24,11 @@ export const flex = (direction: string, align: string, justify: string) => css`
   align-items: ${align};
   justify-content: ${justify};
 `;
+
+export const grid = (cols: number, colGap: number, rowGap?: number) =>
+  css`
+    display: grid;
+    grid-template-columns: repeat(${cols}, 1fr);
+    grid-column-gap: ${rem(colGap)};
+    grid-row-gap: ${rem(typeof rowGap === "number" ? rowGap : colGap)};
+  `;

src/styled-tidy.test.tsx

@@ -21,7 +21,8 @@ import {
   rem,
   opacify,
   transparentize,
-  flex
+  flex,
+  grid
 } from "./styled-tidy";
 
 declare interface TestProps {
@@ -309,4 +310,28 @@ describe("styed-tidy", () => {
       expect(test).toHaveStyleRule("justify-content", "flex-end");
     });
   });
+
+  describe("'grid' mixin", () => {
+    it("sets the given grid CSS attributes", () => {
+      const Test = styled.div<TestProps>`
+        ${grid(4, 16, 24)};
+      `;
+      const { getByText } = setup(<Test>test</Test>);
+      const test = getByText("test");
+
+      expect(test).toHaveStyleRule("display", "grid");
+      expect(test).toHaveStyleRule("grid-template-columns", "repeat(4,1fr)");
+      expect(test).toHaveStyleRule("grid-column-gap", "1rem");
+      expect(test).toHaveStyleRule("grid-row-gap", "1.5rem");
+    });
+
+    it("sets the row gap equal to the column gap when row gap is not given", () => {
+      const Test = styled.div<TestProps>`
+        ${grid(2, 16)};
+      `;
+      const { getByText } = setup(<Test>test</Test>);
+
+      expect(getByText("test")).toHaveStyleRule("grid-row-gap", "1rem");
+    });
+  });
 });

src/styled-tidy.tsx

@@ -10,4 +10,4 @@ export {
   under
 } from "./matchers";
 export { minWidth, maxWidth, minHeight, maxHeight } from "./media";
-export { rem, opacify, transparentize, flex } from "./mixins";
+export { rem, opacify, transparentize, flex, grid } from "./mixins";