Implemented row direction feature

* Added tests for utils\percentage

* Redefined rendering and implemented row direction feature

* Added story for row direction feature

Author: rstaib

src/column/Column.tsx

@@ -11,13 +11,8 @@ import ColumnSize from "./ColumnSize";
 import renderOffset from "./renderOffset";
 import renderOrder from "./renderOrder";
 import renderSize from "./renderSize";
-import {
-  breakpoints,
-  BreakpointValue,
-  BreakpointValues,
-  PropertyValue
-} from "../media";
-import { gutterWidth, styled, Theme } from "../theme";
+import { BreakpointValue, PropertyValue } from "../media";
+import { styled, Theme } from "../theme";
 import { render } from "../utils";
 
 const Column = styled.div`
@@ -26,28 +21,18 @@ const Column = styled.div`
   min-height: 1px;
 
   ${(props: ColumnProperties) => {
-    const breakpointsMap = breakpoints(props!.theme);
     const renderer = {
       offset: (value?: PropertyValue) => renderOffset(value as ColumnOffset),
       order: (value?: PropertyValue) => renderOrder(value as ColumnOrder),
       size: (value?: PropertyValue) => renderSize(value as ColumnSize)
     };
     const valueMap = {
-      offset: props!.offset as BreakpointValues<ColumnOffset>,
-      order: props!.order as BreakpointValues<ColumnOrder>,
-      size: props!.size as BreakpointValues<ColumnSize>
+      offset: props!.offset as BreakpointValue<ColumnOffset>,
+      order: props!.order as BreakpointValue<ColumnOrder>,
+      size: props!.size as BreakpointValue<ColumnSize>
     };
-    const width = gutterWidth(props.theme);
 
-    return `
-        padding-right: ${width}px;
-        padding-left: ${width}px;
-
-        ${render(valueMap, breakpointsMap, renderer)}
-        ${renderOffset(props!.offset as ColumnOffset)}
-        ${renderOrder(props!.order as ColumnOrder)}
-        ${renderSize(props!.size as ColumnSize)}
-      `;
+    return render(valueMap, renderer, props!.theme);
   }};
 `;
 

src/column/ColumnOffset.story.tsx

@@ -3,19 +3,6 @@ import { storiesOf } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
 
 import { Column, Container, Row } from "..";
-import { ThemeProvider } from "../theme/StyledComponents";
-
-const breakpoints = {
-  phone: 0,
-  tablet: 600,
-  desktop: 800
-};
-
-const containerWidth = {
-  // do not specify phone here
-  tablet: 560,
-  desktop: 760
-};
 
 storiesOf("ColumnOffset", module).add("default", () => (
   <div>

src/column/__snapshots__/Column.test.tsx.snap

@@ -5,8 +5,6 @@ exports[`<Column /> should match the snapshot (no properties set) 1`] = `
   position: relative;
   width: 100%;
   min-height: 1px;
-  padding-right: 15px;
-  padding-left: 15px;
 }
 
 <div
@@ -19,8 +17,6 @@ exports[`<Column /> should match the snapshot (offset: { xs: 3, sm: 4, md: 8 })
   position: relative;
   width: 100%;
   min-height: 1px;
-  padding-right: 15px;
-  padding-left: 15px;
   margin-left: 25.000000%;
 }
 
@@ -53,8 +49,6 @@ exports[`<Column /> should match the snapshot (offset: 3)  1`] = `
   position: relative;
   width: 100%;
   min-height: 1px;
-  padding-right: 15px;
-  padding-left: 15px;
   margin-left: 25.000000%;
 }
 
@@ -69,8 +63,6 @@ exports[`<Column /> should match the snapshot (offset: 3, order: 3, size: 9) 1`]
   position: relative;
   width: 100%;
   min-height: 1px;
-  padding-right: 15px;
-  padding-left: 15px;
   margin-left: 25.000000%;
   -webkit-box-ordinal-group: 3;
   -ms-flex-order: 2;
@@ -98,8 +90,6 @@ exports[`<Column /> should match the snapshot (order: { xs: 'first', sm: 3, md:
   position: relative;
   width: 100%;
   min-height: 1px;
-  padding-right: 15px;
-  padding-left: 15px;
   -webkit-box-ordinal-group: 0;
   -ms-flex-order: -1;
   -webkit-order: -1;
@@ -144,8 +134,6 @@ exports[`<Column /> should match the snapshot (order: 5)  1`] = `
   position: relative;
   width: 100%;
   min-height: 1px;
-  padding-right: 15px;
-  padding-left: 15px;
   -webkit-box-ordinal-group: 5;
   -ms-flex-order: 4;
   -webkit-order: 4;
@@ -164,8 +152,6 @@ exports[`<Column /> should match the snapshot (size: 7)  1`] = `
   position: relative;
   width: 100%;
   min-height: 1px;
-  padding-right: 15px;
-  padding-left: 15px;
   -webkit-box-flex: 0;
   -ms-flex: 0 0 58.333333%;
   -webkit-flex: 0 0 58.333333%;
@@ -185,8 +171,6 @@ exports[`<Column /> should match the snapshot (size: { xs: 'auto', sm: 7, md: 'n
   position: relative;
   width: 100%;
   min-height: 1px;
-  padding-right: 15px;
-  padding-left: 15px;
   -ms-flex-preferred-size: 0;
   -webkit-flex-basis: 0;
   -ms-flex-preferred-size: 0;

src/column/renderOffset.ts

@@ -1,7 +1,7 @@
 import ColumnOffset from "./ColumnOffset";
 import { percentage } from "../utils";
 
-export default function renderOrder(offset?: ColumnOffset): string {
+export default (offset?: ColumnOffset): string => {
   if (
     offset != null &&
     typeof offset === "number" &&
@@ -14,4 +14,4 @@ export default function renderOrder(offset?: ColumnOffset): string {
   }
 
   return "";
-}
+};

src/column/renderOrder.ts

@@ -1,6 +1,6 @@
 import ColumnOrder from "./ColumnOrder";
 
-export default function renderOrder(order?: ColumnOrder | 0 | 13): string {
+const renderOrder = (order?: ColumnOrder | 0 | 13): string => {
   if (order != null && typeof order !== "object") {
     if (order === "first") {
       return renderOrder(0);
@@ -20,4 +20,6 @@ export default function renderOrder(order?: ColumnOrder | 0 | 13): string {
   }
 
   return "";
-}
+};
+
+export default renderOrder;

src/container/Container.tsx

@@ -6,7 +6,7 @@ import "../utils/bootstrap";
 import ContainerProperties from "./ContainerProperties";
 import renderWidth from "./renderWidth";
 import getWidth from "./width";
-import { breakpoints, PropertyValue } from "../media";
+import { PropertyValue } from "../media";
 import { gutterWidth, styled, Theme } from "../theme";
 import { render } from "../utils";
 
@@ -19,24 +19,21 @@ const Container = styled.div`
     const width = gutterWidth(props.theme);
 
     return `
-        padding-right: ${width}px;
-        padding-left: ${width}px;
-      `;
+      padding-right: ${width}px;
+      padding-left: ${width}px;
+    `;
   }} ${(props: ContainerProperties) => {
     if (props.fluid) {
       return "";
     } else {
-      const breakpointsMap = breakpoints(props!.theme);
       const renderer = {
         width: (value?: PropertyValue) => renderWidth(value as number)
       };
       const valueMap = {
         width: getWidth(props)
       };
 
-      return `
-        ${render(valueMap, breakpointsMap, renderer)}
-      `;
+      return render(valueMap, renderer, props!.theme);
     }
   }};
 `;

src/container/width.ts

@@ -1,5 +1,5 @@
-import defaultWidth from "./defaultWidth";
 import ContainerProperties from "./ContainerProperties";
+import defaultWidth from "./defaultWidth";
 import { BreakpointValues } from "../media";
 
 export default (props?: ContainerProperties): BreakpointValues<number> => {

src/media/PropertyValue.ts

@@ -1,3 +1,3 @@
-type PropertyValue = boolean | number | string;
+type PropertyValue = boolean | number | string | undefined;
 
 export default PropertyValue;

src/media/PropertyValuesMap.ts

@@ -1,6 +1,6 @@
-import BreakpointValues from "./BreakpointValues";
+import BreakpointValue from "./BreakpointValue";
 import PropertyValue from "./PropertyValue";
 
 export default interface PropertyValuesMap {
-  [key: string]: BreakpointValues<PropertyValue>;
+  [key: string]: BreakpointValue<PropertyValue>;
 }

src/media/defaultBreakpointKey.test.ts

@@ -0,0 +1,46 @@
+import { defaultBreakpointKey } from ".";
+
+describe("defaultBreakpointKey", () => {
+  it("should return 'xs'", () => {
+    // arrange
+    const input = undefined;
+
+    // act
+    const output = defaultBreakpointKey(input);
+
+    // assert
+    expect(output).toBe("xs");
+  });
+
+  it("should return 'small'", () => {
+    // arrange
+    const input = {
+      breakpoints: {
+        small: 0,
+        big: 500
+      }
+    };
+
+    // act
+    const output = defaultBreakpointKey(input);
+
+    // assert
+    expect(output).toBe("small");
+  });
+
+  it("should return null", () => {
+    // arrange
+    const input = {
+      breakpoints: {
+        small: 200,
+        big: 500
+      }
+    };
+
+    // act
+    const output = defaultBreakpointKey(input);
+
+    // assert
+    expect(output).toBeNull();
+  });
+});