Skip to content

Commit 170cca2

Browse files
rstaibrstaib
authored
Implemented row wrap feature
* Improved renderDirection * Implemented row wrap * Improved rendering by removing redundant output * Improved story for row wrap
1 parent 8bf99a0 commit 170cca2

13 files changed

+342
-99
lines changed

‎src/row/Row.test.tsx

+21-6
Original file line numberDiff line numberDiff line change
@@ -55,14 +55,29 @@ describe("<Row />", () => {
5555
expect(result).toMatchSnapshot();
5656
});
5757

58-
it("should match the snapshot (direction: 'column', noGutter: true)", () => {
59-
// arrange
60-
const offset = 3;
61-
const order = 3;
62-
const size = 9;
58+
it("should match the snapshot (wrap: 'wrap-reverse') ", () => {
59+
// act
60+
const result = shallow(<Row wrap={"wrap-reverse"} />);
61+
62+
// assert
63+
expect(result).toMatchSnapshot();
64+
});
6365

66+
it("should match the snapshot (wrap: { xs: 'nowrap', sm: 'wrap-reverse', md: 'wrap' })", () => {
6467
// act
65-
const result = shallow(<Row direction={"column"} noGutter={true} />);
68+
const result = shallow(
69+
<Row wrap={{ xs: "nowrap", sm: "wrap-reverse", md: "wrap" }} />
70+
);
71+
72+
// assert
73+
expect(result).toMatchSnapshot();
74+
});
75+
76+
it("should match the snapshot (direction: 'column', noGutter: true, wrap: 'nowrap')", () => {
77+
// act
78+
const result = shallow(
79+
<Row direction={"column"} noGutter={true} wrap={"nowrap"} />
80+
);
6681

6782
// assert
6883
expect(result).toMatchSnapshot();

‎src/row/Row.tsx

+6-4
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,10 @@ import * as _StyledComponents from "styled-components";
55
import "../utils/bootstrap";
66
import renderDirection from "./renderDirection";
77
import renderGutter from "./renderGutter";
8+
import renderWrap from "./renderWrap";
89
import RowDirection from "./RowDirection";
910
import RowProperties from "./RowProperties";
11+
import RowWrap from "./RowWrap";
1012
import { BreakpointValue, PropertyValue } from "../media";
1113
import { styled, Theme } from "../theme";
1214
import { render } from "../utils";
@@ -15,18 +17,18 @@ const Row = styled.div`
1517
display: -webkit-box;
1618
display: -ms-flexbox;
1719
display: flex;
18-
-ms-flex-wrap: wrap;
19-
flex-wrap: wrap;
2020
2121
${(props: RowProperties) => {
2222
const renderer = {
2323
direction: (value?: PropertyValue) =>
2424
renderDirection(value as RowDirection),
25-
gutter: (value?: PropertyValue) => renderGutter(value as boolean)
25+
gutter: (value?: PropertyValue) => renderGutter(value as boolean),
26+
wrap: (value?: PropertyValue) => renderWrap(value as RowWrap)
2627
};
2728
const valueMap = {
2829
direction: props!.direction as BreakpointValue<RowDirection>,
29-
gutter: props!.noGutter as BreakpointValue<boolean>
30+
gutter: props!.noGutter as BreakpointValue<boolean>,
31+
wrap: props!.wrap as BreakpointValue<RowWrap>
3032
};
3133
3234
return render(valueMap, renderer, props!.theme);

‎src/row/RowProperties.ts

+2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import RowDirection from "./RowDirection";
2+
import RowWrap from "./RowWrap";
23
import { BreakpointValue } from "../media";
34
import { ThemeProperties } from "../theme";
45

56
export default interface RowProperties extends ThemeProperties {
67
direction?: BreakpointValue<RowDirection>;
78
noGutter?: BreakpointValue<boolean>;
9+
wrap?: BreakpointValue<RowWrap>;
810
}

‎src/row/RowWrap.story.tsx

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import * as React from "react";
2+
import { storiesOf } from "@storybook/react";
3+
import { action } from "@storybook/addon-actions";
4+
5+
import { Column, Container, Row } from "..";
6+
7+
storiesOf("RowWrap", module)
8+
.add("nowrap", () => (
9+
<div>
10+
<Container>
11+
<Row wrap={"nowrap"}>
12+
<Column size={6}>Nowrap 1</Column>
13+
<Column size={6}>Nowrap 2</Column>
14+
<Column size={6}>Nowrap 3</Column>
15+
<Column size={6}>Nowrap 4</Column>
16+
</Row>
17+
</Container>
18+
</div>
19+
))
20+
.add("wrap", () => (
21+
<div>
22+
<Container>
23+
<Row wrap={"wrap"}>
24+
<Column size={6}>Wrap 1</Column>
25+
<Column size={6}>Wrap 2</Column>
26+
<Column size={6}>Wrap 3</Column>
27+
<Column size={6}>Wrap 4</Column>
28+
</Row>
29+
</Container>
30+
</div>
31+
))
32+
.add("wrap-reverse", () => (
33+
<div>
34+
<Container>
35+
<Row wrap={"wrap-reverse"}>
36+
<Column size={6}>Wrap Reverse 1</Column>
37+
<Column size={6}>Wrap Reverse 2</Column>
38+
<Column size={6}>Wrap Reverse 3</Column>
39+
<Column size={6}>Wrap Reverse 4</Column>
40+
</Row>
41+
</Container>
42+
</div>
43+
));

‎src/row/RowWrap.ts

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
type RowDirection = "nowrap" | "wrap" | "wrap-reverse";
2+
3+
export default RowDirection;

‎src/row/__snapshots__/Row.test.tsx.snap

+98-33
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,13 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`<Row /> should match the snapshot (direction: 'column', noGutter: true) 1`] = `
3+
exports[`<Row /> should match the snapshot (direction: 'column', noGutter: true, wrap: 'nowrap') 1`] = `
44
.c0 {
55
display: -webkit-box;
66
display: -ms-flexbox;
77
display: -webkit-box;
88
display: -webkit-flex;
99
display: -ms-flexbox;
1010
display: flex;
11-
-ms-flex-wrap: wrap;
12-
-webkit-flex-wrap: wrap;
13-
-ms-flex-wrap: wrap;
14-
flex-wrap: wrap;
1511
-webkit-box-orient: vertical !important;
1612
-webkit-box-direction: normal !important;
1713
-ms-flex-direction: column !important;
@@ -20,6 +16,10 @@ exports[`<Row /> should match the snapshot (direction: 'column', noGutter: true)
2016
flex-direction: column !important;
2117
margin-right: 0;
2218
margin-left: 0;
19+
-ms-flex-wrap: nowrap;
20+
-webkit-flex-wrap: nowrap;
21+
-ms-flex-wrap: nowrap;
22+
flex-wrap: nowrap;
2323
}
2424
2525
.c0 > .sc-bdVaJa {
@@ -30,6 +30,7 @@ exports[`<Row /> should match the snapshot (direction: 'column', noGutter: true)
3030
<div
3131
className="c0"
3232
direction="column"
33+
wrap="nowrap"
3334
/>
3435
`;
3536

@@ -41,10 +42,6 @@ exports[`<Row /> should match the snapshot (direction: 'row') 1`] = `
4142
display: -webkit-flex;
4243
display: -ms-flexbox;
4344
display: flex;
44-
-ms-flex-wrap: wrap;
45-
-webkit-flex-wrap: wrap;
46-
-ms-flex-wrap: wrap;
47-
flex-wrap: wrap;
4845
-webkit-box-orient: horizontal !important;
4946
-webkit-box-direction: normal !important;
5047
-ms-flex-direction: row !important;
@@ -53,6 +50,10 @@ exports[`<Row /> should match the snapshot (direction: 'row') 1`] = `
5350
flex-direction: row !important;
5451
margin-right: -15px;
5552
margin-left: -15px;
53+
-ms-flex-wrap: wrap;
54+
-webkit-flex-wrap: wrap;
55+
-ms-flex-wrap: wrap;
56+
flex-wrap: wrap;
5657
}
5758
5859
.c0 > .sc-bdVaJa {
@@ -74,10 +75,6 @@ exports[`<Row /> should match the snapshot (direction: { xs: 'row', sm: 'row-rev
7475
display: -webkit-flex;
7576
display: -ms-flexbox;
7677
display: flex;
77-
-ms-flex-wrap: wrap;
78-
-webkit-flex-wrap: wrap;
79-
-ms-flex-wrap: wrap;
80-
flex-wrap: wrap;
8178
-webkit-box-orient: horizontal !important;
8279
-webkit-box-direction: normal !important;
8380
-ms-flex-direction: row !important;
@@ -86,6 +83,10 @@ exports[`<Row /> should match the snapshot (direction: { xs: 'row', sm: 'row-rev
8683
flex-direction: row !important;
8784
margin-right: -15px;
8885
margin-left: -15px;
86+
-ms-flex-wrap: wrap;
87+
-webkit-flex-wrap: wrap;
88+
-ms-flex-wrap: wrap;
89+
flex-wrap: wrap;
8990
}
9091
9192
.c0 > .sc-bdVaJa {
@@ -101,13 +102,6 @@ exports[`<Row /> should match the snapshot (direction: { xs: 'row', sm: 'row-rev
101102
-webkit-flex-direction: row-reverse !important;
102103
-ms-flex-direction: row-reverse !important;
103104
flex-direction: row-reverse !important;
104-
margin-right: -15px;
105-
margin-left: -15px;
106-
}
107-
108-
.c0 > .sc-bdVaJa {
109-
padding-right: 15px;
110-
padding-left: 15px;
111105
}
112106
}
113107
@@ -119,13 +113,6 @@ exports[`<Row /> should match the snapshot (direction: { xs: 'row', sm: 'row-rev
119113
-webkit-flex-direction: column !important;
120114
-ms-flex-direction: column !important;
121115
flex-direction: column !important;
122-
margin-right: -15px;
123-
margin-left: -15px;
124-
}
125-
126-
.c0 > .sc-bdVaJa {
127-
padding-right: 15px;
128-
padding-left: 15px;
129116
}
130117
}
131118
@@ -149,12 +136,12 @@ exports[`<Row /> should match the snapshot (no properties set) 1`] = `
149136
display: -webkit-flex;
150137
display: -ms-flexbox;
151138
display: flex;
139+
margin-right: -15px;
140+
margin-left: -15px;
152141
-ms-flex-wrap: wrap;
153142
-webkit-flex-wrap: wrap;
154143
-ms-flex-wrap: wrap;
155144
flex-wrap: wrap;
156-
margin-right: -15px;
157-
margin-left: -15px;
158145
}
159146
160147
.c0 > .sc-bdVaJa {
@@ -175,12 +162,12 @@ exports[`<Row /> should match the snapshot (noGutter: { xs: true, sm: false, md:
175162
display: -webkit-flex;
176163
display: -ms-flexbox;
177164
display: flex;
165+
margin-right: 0;
166+
margin-left: 0;
178167
-ms-flex-wrap: wrap;
179168
-webkit-flex-wrap: wrap;
180169
-ms-flex-wrap: wrap;
181170
flex-wrap: wrap;
182-
margin-right: 0;
183-
margin-left: 0;
184171
}
185172
186173
.c0 > .sc-bdVaJa {
@@ -225,12 +212,12 @@ exports[`<Row /> should match the snapshot (noGutter: true) 1`] = `
225212
display: -webkit-flex;
226213
display: -ms-flexbox;
227214
display: flex;
215+
margin-right: 0;
216+
margin-left: 0;
228217
-ms-flex-wrap: wrap;
229218
-webkit-flex-wrap: wrap;
230219
-ms-flex-wrap: wrap;
231220
flex-wrap: wrap;
232-
margin-right: 0;
233-
margin-left: 0;
234221
}
235222
236223
.c0 > .sc-bdVaJa {
@@ -242,3 +229,81 @@ exports[`<Row /> should match the snapshot (noGutter: true) 1`] = `
242229
className="c0"
243230
/>
244231
`;
232+
233+
exports[`<Row /> should match the snapshot (wrap: 'wrap-reverse') 1`] = `
234+
.c0 {
235+
display: -webkit-box;
236+
display: -ms-flexbox;
237+
display: -webkit-box;
238+
display: -webkit-flex;
239+
display: -ms-flexbox;
240+
display: flex;
241+
margin-right: -15px;
242+
margin-left: -15px;
243+
-ms-flex-wrap: wrap-reverse;
244+
-webkit-flex-wrap: wrap-reverse;
245+
-ms-flex-wrap: wrap-reverse;
246+
flex-wrap: wrap-reverse;
247+
}
248+
249+
.c0 > .sc-bdVaJa {
250+
padding-right: 15px;
251+
padding-left: 15px;
252+
}
253+
254+
<div
255+
className="c0"
256+
wrap="wrap-reverse"
257+
/>
258+
`;
259+
260+
exports[`<Row /> should match the snapshot (wrap: { xs: 'nowrap', sm: 'wrap-reverse', md: 'wrap' }) 1`] = `
261+
.c0 {
262+
display: -webkit-box;
263+
display: -ms-flexbox;
264+
display: -webkit-box;
265+
display: -webkit-flex;
266+
display: -ms-flexbox;
267+
display: flex;
268+
margin-right: -15px;
269+
margin-left: -15px;
270+
-ms-flex-wrap: nowrap;
271+
-webkit-flex-wrap: nowrap;
272+
-ms-flex-wrap: nowrap;
273+
flex-wrap: nowrap;
274+
}
275+
276+
.c0 > .sc-bdVaJa {
277+
padding-right: 15px;
278+
padding-left: 15px;
279+
}
280+
281+
@media (min-width:576px) {
282+
.c0 {
283+
-ms-flex-wrap: wrap-reverse;
284+
-webkit-flex-wrap: wrap-reverse;
285+
-ms-flex-wrap: wrap-reverse;
286+
flex-wrap: wrap-reverse;
287+
}
288+
}
289+
290+
@media (min-width:768px) {
291+
.c0 {
292+
-ms-flex-wrap: wrap;
293+
-webkit-flex-wrap: wrap;
294+
-ms-flex-wrap: wrap;
295+
flex-wrap: wrap;
296+
}
297+
}
298+
299+
<div
300+
className="c0"
301+
wrap={
302+
Object {
303+
"md": "wrap",
304+
"sm": "wrap-reverse",
305+
"xs": "nowrap",
306+
}
307+
}
308+
/>
309+
`;

0 commit comments

Comments
 (0)