feat(component): adds position mixin

dw2 · Oct 2, 2019 · 36c9b2b · 36c9b2b
1 parent 5d71b81
commit 36c9b2b
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 2 deletions.
diff --git a/src/mixins.tsx b/src/mixins.tsx
@@ -32,3 +32,17 @@ export const grid = (cols: number, colGap: number, rowGap?: number) =>
     grid-column-gap: ${rem(colGap)};
     grid-row-gap: ${rem(typeof rowGap === "number" ? rowGap : colGap)};
   `;
+
+export const position = (
+  value: string,
+  top: string,
+  right?: string,
+  bottom?: string,
+  left?: string
+) => css`
+  position: ${value};
+  top: ${top};
+  right: ${right || top};
+  bottom: ${bottom || top};
+  left: ${left || right || top};
+`;
diff --git a/src/styled-tidy.test.tsx b/src/styled-tidy.test.tsx
@@ -22,7 +22,8 @@ import {
   opacify,
   transparentize,
   flex,
-  grid
+  grid,
+  position
 } from "./styled-tidy";
 
 declare interface TestProps {
@@ -334,4 +335,62 @@ describe("styed-tidy", () => {
       expect(getByText("test")).toHaveStyleRule("grid-row-gap", "1rem");
     });
   });
+
+  describe("'position' mixin", () => {
+    it("sets the given position CSS attributes", () => {
+      const Test = styled.div<TestProps>`
+        ${position("fixed", "1rem", "2rem", "3rem", "4rem")};
+      `;
+      const { getByText } = setup(<Test>test</Test>);
+      const test = getByText("test");
+
+      expect(test).toHaveStyleRule("position", "fixed");
+      expect(test).toHaveStyleRule("top", "1rem");
+      expect(test).toHaveStyleRule("right", "2rem");
+      expect(test).toHaveStyleRule("bottom", "3rem");
+      expect(test).toHaveStyleRule("left", "4rem");
+    });
+
+    it("sets the given position CSS attributes with single param shorthand", () => {
+      const Test = styled.div<TestProps>`
+        ${position("absolute", "1rem")};
+      `;
+      const { getByText } = setup(<Test>test</Test>);
+      const test = getByText("test");
+
+      expect(test).toHaveStyleRule("position", "absolute");
+      expect(test).toHaveStyleRule("top", "1rem");
+      expect(test).toHaveStyleRule("right", "1rem");
+      expect(test).toHaveStyleRule("bottom", "1rem");
+      expect(test).toHaveStyleRule("left", "1rem");
+    });
+
+    it("sets the given position CSS attributes with double param shorthand", () => {
+      const Test = styled.div<TestProps>`
+        ${position("absolute", "1rem", "2rem")};
+      `;
+      const { getByText } = setup(<Test>test</Test>);
+      const test = getByText("test");
+
+      expect(test).toHaveStyleRule("position", "absolute");
+      expect(test).toHaveStyleRule("top", "1rem");
+      expect(test).toHaveStyleRule("right", "2rem");
+      expect(test).toHaveStyleRule("bottom", "1rem");
+      expect(test).toHaveStyleRule("left", "2rem");
+    });
+
+    it("sets the given position CSS attributes with triple param shorthand", () => {
+      const Test = styled.div<TestProps>`
+        ${position("absolute", "1rem", "2rem", "3rem")};
+      `;
+      const { getByText } = setup(<Test>test</Test>);
+      const test = getByText("test");
+
+      expect(test).toHaveStyleRule("position", "absolute");
+      expect(test).toHaveStyleRule("top", "1rem");
+      expect(test).toHaveStyleRule("right", "2rem");
+      expect(test).toHaveStyleRule("bottom", "3rem");
+      expect(test).toHaveStyleRule("left", "2rem");
+    });
+  });
 });
diff --git a/src/styled-tidy.tsx b/src/styled-tidy.tsx
@@ -10,4 +10,4 @@ export {
   under
 } from "./matchers";
 export { minWidth, maxWidth, minHeight, maxHeight } from "./media";
-export { rem, opacify, transparentize, flex, grid } from "./mixins";
+export { rem, opacify, transparentize, flex, grid, position } from "./mixins";