Implemented row wrap feature

* Improved renderDirection * Implemented row wrap * Improved rendering by removing redundant output * Improved story for row wrap
ChilliCream · Apr 16, 2018 · 170cca2 · 170cca2
1 parent 8bf99a0
commit 170cca2
Show file tree

Hide file tree

Showing 13 changed files with 342 additions and 99 deletions.
diff --git a/src/row/Row.test.tsx b/src/row/Row.test.tsx
@@ -55,14 +55,29 @@ describe("<Row />", () => {
     expect(result).toMatchSnapshot();
   });
 
-  it("should match the snapshot (direction: 'column', noGutter: true)", () => {
-    // arrange
-    const offset = 3;
-    const order = 3;
-    const size = 9;
+  it("should match the snapshot (wrap: 'wrap-reverse') ", () => {
+    // act
+    const result = shallow(<Row wrap={"wrap-reverse"} />);
+
+    // assert
+    expect(result).toMatchSnapshot();
+  });
 
+  it("should match the snapshot (wrap: { xs: 'nowrap', sm: 'wrap-reverse', md: 'wrap' })", () => {
     // act
-    const result = shallow(<Row direction={"column"} noGutter={true} />);
+    const result = shallow(
+      <Row wrap={{ xs: "nowrap", sm: "wrap-reverse", md: "wrap" }} />
+    );
+
+    // assert
+    expect(result).toMatchSnapshot();
+  });
+
+  it("should match the snapshot (direction: 'column', noGutter: true, wrap: 'nowrap')", () => {
+    // act
+    const result = shallow(
+      <Row direction={"column"} noGutter={true} wrap={"nowrap"} />
+    );
 
     // assert
     expect(result).toMatchSnapshot();

diff --git a/src/row/Row.tsx b/src/row/Row.tsx
@@ -5,8 +5,10 @@ import * as _StyledComponents from "styled-components";
 import "../utils/bootstrap";
 import renderDirection from "./renderDirection";
 import renderGutter from "./renderGutter";
+import renderWrap from "./renderWrap";
 import RowDirection from "./RowDirection";
 import RowProperties from "./RowProperties";
+import RowWrap from "./RowWrap";
 import { BreakpointValue, PropertyValue } from "../media";
 import { styled, Theme } from "../theme";
 import { render } from "../utils";
@@ -15,18 +17,18 @@ const Row = styled.div`
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
 
   ${(props: RowProperties) => {
     const renderer = {
       direction: (value?: PropertyValue) =>
         renderDirection(value as RowDirection),
-      gutter: (value?: PropertyValue) => renderGutter(value as boolean)
+      gutter: (value?: PropertyValue) => renderGutter(value as boolean),
+      wrap: (value?: PropertyValue) => renderWrap(value as RowWrap)
     };
     const valueMap = {
       direction: props!.direction as BreakpointValue<RowDirection>,
-      gutter: props!.noGutter as BreakpointValue<boolean>
+      gutter: props!.noGutter as BreakpointValue<boolean>,
+      wrap: props!.wrap as BreakpointValue<RowWrap>
     };
 
     return render(valueMap, renderer, props!.theme);

diff --git a/src/row/RowProperties.ts b/src/row/RowProperties.ts
@@ -1,8 +1,10 @@
 import RowDirection from "./RowDirection";
+import RowWrap from "./RowWrap";
 import { BreakpointValue } from "../media";
 import { ThemeProperties } from "../theme";
 
 export default interface RowProperties extends ThemeProperties {
   direction?: BreakpointValue<RowDirection>;
   noGutter?: BreakpointValue<boolean>;
+  wrap?: BreakpointValue<RowWrap>;
 }
diff --git a/src/row/RowWrap.story.tsx b/src/row/RowWrap.story.tsx
@@ -0,0 +1,43 @@
+import * as React from "react";
+import { storiesOf } from "@storybook/react";
+import { action } from "@storybook/addon-actions";
+
+import { Column, Container, Row } from "..";
+
+storiesOf("RowWrap", module)
+  .add("nowrap", () => (
+    <div>
+      <Container>
+        <Row wrap={"nowrap"}>
+          <Column size={6}>Nowrap 1</Column>
+          <Column size={6}>Nowrap 2</Column>
+          <Column size={6}>Nowrap 3</Column>
+          <Column size={6}>Nowrap 4</Column>
+        </Row>
+      </Container>
+    </div>
+  ))
+  .add("wrap", () => (
+    <div>
+      <Container>
+        <Row wrap={"wrap"}>
+          <Column size={6}>Wrap 1</Column>
+          <Column size={6}>Wrap 2</Column>
+          <Column size={6}>Wrap 3</Column>
+          <Column size={6}>Wrap 4</Column>
+        </Row>
+      </Container>
+    </div>
+  ))
+  .add("wrap-reverse", () => (
+    <div>
+      <Container>
+        <Row wrap={"wrap-reverse"}>
+          <Column size={6}>Wrap Reverse 1</Column>
+          <Column size={6}>Wrap Reverse 2</Column>
+          <Column size={6}>Wrap Reverse 3</Column>
+          <Column size={6}>Wrap Reverse 4</Column>
+        </Row>
+      </Container>
+    </div>
+  ));
diff --git a/src/row/RowWrap.ts b/src/row/RowWrap.ts
@@ -0,0 +1,3 @@
+type RowDirection = "nowrap" | "wrap" | "wrap-reverse";
+
+export default RowDirection;
diff --git a/src/row/__snapshots__/Row.test.tsx.snap b/src/row/__snapshots__/Row.test.tsx.snap
@@ -1,17 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Row /> should match the snapshot (direction: 'column', noGutter: true) 1`] = `
+exports[`<Row /> should match the snapshot (direction: 'column', noGutter: true, wrap: 'nowrap') 1`] = `
 .c0 {
   display: -webkit-box;
   display: -ms-flexbox;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -ms-flex-wrap: wrap;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
   -webkit-box-orient: vertical !important;
   -webkit-box-direction: normal !important;
   -ms-flex-direction: column !important;
@@ -20,6 +16,10 @@ exports[`<Row /> should match the snapshot (direction: 'column', noGutter: true)
   flex-direction: column !important;
   margin-right: 0;
   margin-left: 0;
+  -ms-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
 }
 
 .c0 > .sc-bdVaJa {
@@ -30,6 +30,7 @@ exports[`<Row /> should match the snapshot (direction: 'column', noGutter: true)
 <div
   className="c0"
   direction="column"
+  wrap="nowrap"
 />
 `;
 
@@ -41,10 +42,6 @@ exports[`<Row /> should match the snapshot (direction: 'row')  1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -ms-flex-wrap: wrap;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
   -webkit-box-orient: horizontal !important;
   -webkit-box-direction: normal !important;
   -ms-flex-direction: row !important;
@@ -53,6 +50,10 @@ exports[`<Row /> should match the snapshot (direction: 'row')  1`] = `
   flex-direction: row !important;
   margin-right: -15px;
   margin-left: -15px;
+  -ms-flex-wrap: wrap;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
 }
 
 .c0 > .sc-bdVaJa {
@@ -74,10 +75,6 @@ exports[`<Row /> should match the snapshot (direction: { xs: 'row', sm: 'row-rev
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -ms-flex-wrap: wrap;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
   -webkit-box-orient: horizontal !important;
   -webkit-box-direction: normal !important;
   -ms-flex-direction: row !important;
@@ -86,6 +83,10 @@ exports[`<Row /> should match the snapshot (direction: { xs: 'row', sm: 'row-rev
   flex-direction: row !important;
   margin-right: -15px;
   margin-left: -15px;
+  -ms-flex-wrap: wrap;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
 }
 
 .c0 > .sc-bdVaJa {
@@ -101,13 +102,6 @@ exports[`<Row /> should match the snapshot (direction: { xs: 'row', sm: 'row-rev
     -webkit-flex-direction: row-reverse !important;
     -ms-flex-direction: row-reverse !important;
     flex-direction: row-reverse !important;
-    margin-right: -15px;
-    margin-left: -15px;
-  }
-
-  .c0 > .sc-bdVaJa {
-    padding-right: 15px;
-    padding-left: 15px;
   }
 }
 
@@ -119,13 +113,6 @@ exports[`<Row /> should match the snapshot (direction: { xs: 'row', sm: 'row-rev
     -webkit-flex-direction: column !important;
     -ms-flex-direction: column !important;
     flex-direction: column !important;
-    margin-right: -15px;
-    margin-left: -15px;
-  }
-
-  .c0 > .sc-bdVaJa {
-    padding-right: 15px;
-    padding-left: 15px;
   }
 }
 
@@ -149,12 +136,12 @@ exports[`<Row /> should match the snapshot (no properties set) 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  margin-right: -15px;
+  margin-left: -15px;
   -ms-flex-wrap: wrap;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  margin-right: -15px;
-  margin-left: -15px;
 }
 
 .c0 > .sc-bdVaJa {
@@ -175,12 +162,12 @@ exports[`<Row /> should match the snapshot (noGutter: { xs: true, sm: false, md:
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  margin-right: 0;
+  margin-left: 0;
   -ms-flex-wrap: wrap;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  margin-right: 0;
-  margin-left: 0;
 }
 
 .c0 > .sc-bdVaJa {
@@ -225,12 +212,12 @@ exports[`<Row /> should match the snapshot (noGutter: true)  1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  margin-right: 0;
+  margin-left: 0;
   -ms-flex-wrap: wrap;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  margin-right: 0;
-  margin-left: 0;
 }
 
 .c0 > .sc-bdVaJa {
@@ -242,3 +229,81 @@ exports[`<Row /> should match the snapshot (noGutter: true)  1`] = `
   className="c0"
 />
 `;
+
+exports[`<Row /> should match the snapshot (wrap: 'wrap-reverse')  1`] = `
+.c0 {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  margin-right: -15px;
+  margin-left: -15px;
+  -ms-flex-wrap: wrap-reverse;
+  -webkit-flex-wrap: wrap-reverse;
+  -ms-flex-wrap: wrap-reverse;
+  flex-wrap: wrap-reverse;
+}
+
+.c0 > .sc-bdVaJa {
+  padding-right: 15px;
+  padding-left: 15px;
+}
+
+<div
+  className="c0"
+  wrap="wrap-reverse"
+/>
+`;
+
+exports[`<Row /> should match the snapshot (wrap: { xs: 'nowrap', sm: 'wrap-reverse', md: 'wrap' }) 1`] = `
+.c0 {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  margin-right: -15px;
+  margin-left: -15px;
+  -ms-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.c0 > .sc-bdVaJa {
+  padding-right: 15px;
+  padding-left: 15px;
+}
+
+@media (min-width:576px) {
+  .c0 {
+    -ms-flex-wrap: wrap-reverse;
+    -webkit-flex-wrap: wrap-reverse;
+    -ms-flex-wrap: wrap-reverse;
+    flex-wrap: wrap-reverse;
+  }
+}
+
+@media (min-width:768px) {
+  .c0 {
+    -ms-flex-wrap: wrap;
+    -webkit-flex-wrap: wrap;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+  }
+}
+
+<div
+  className="c0"
+  wrap={
+    Object {
+      "md": "wrap",
+      "sm": "wrap-reverse",
+      "xs": "nowrap",
+    }
+  }
+/>
+`;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		type RowDirection = "nowrap" \| "wrap" \| "wrap-reverse";

		export default RowDirection;