Skip to content

Commit f69ed10

Browse files
rstaibrstaib
authored
Implemented column offset
1 parent b98f9e2 commit f69ed10

12 files changed

+259
-34
lines changed

‎src/column/Column.test.tsx

+32-6
Original file line numberDiff line numberDiff line change
@@ -19,15 +19,34 @@ describe("<Column />", () => {
1919
expect(result).toMatchSnapshot();
2020
});
2121

22-
it("should match the snapshot (order property set to 5) ", () => {
22+
it("should match the snapshot (offset: 3) ", () => {
23+
// arrange
24+
const offset = 3;
25+
26+
// act
27+
const result = shallow(<Column offset={offset} />);
28+
29+
// assert
30+
expect(result).toMatchSnapshot();
31+
});
32+
33+
it("should match the snapshot (offset: { xs: 3, sm: 4, md: 8 }) ", () => {
34+
// act
35+
const result = shallow(<Column offset={{ xs: 3, sm: 4, md: 8 }} />);
36+
37+
// assert
38+
expect(result).toMatchSnapshot();
39+
});
40+
41+
it("should match the snapshot (order: 5) ", () => {
2342
// act
2443
const result = shallow(<Column order={5} />);
2544

2645
// assert
2746
expect(result).toMatchSnapshot();
2847
});
2948

30-
it("should match the snapshot (order property set to { xs: 'first', sm: 3, md: 'last' }) ", () => {
49+
it("should match the snapshot (order: { xs: 'first', sm: 3, md: 'last' }) ", () => {
3150
// act
3251
const result = shallow(
3352
<Column order={{ xs: "first", sm: 3, md: "last" }} />
@@ -37,25 +56,32 @@ describe("<Column />", () => {
3756
expect(result).toMatchSnapshot();
3857
});
3958

40-
it("should match the snapshot (order property set to 5) ", () => {
59+
it("should match the snapshot (size: 7) ", () => {
4160
// act
4261
const result = shallow(<Column size={7} />);
4362

4463
// assert
4564
expect(result).toMatchSnapshot();
4665
});
4766

48-
it("should match the snapshot (size property set to { xs: 'auto', sm: 7, md: 'none' }) ", () => {
67+
it("should match the snapshot (size: { xs: 'auto', sm: 7, md: 'none' }) ", () => {
4968
// act
5069
const result = shallow(<Column size={{ xs: "auto", sm: 7, md: "none" }} />);
5170

5271
// assert
5372
expect(result).toMatchSnapshot();
5473
});
5574

56-
it("should match the snapshot (order property set to 3 size property is set 9)", () => {
75+
it("should match the snapshot (offset: 3, order: 3, size: 9)", () => {
76+
// arrange
77+
const offset = 3;
78+
const order = 3;
79+
const size = 9;
80+
5781
// act
58-
const result = shallow(<Column order={3} size={9} />);
82+
const result = shallow(
83+
<Column offset={offset} order={order} size={size} />
84+
);
5985

6086
// assert
6187
expect(result).toMatchSnapshot();

‎src/column/Column.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,10 @@ import * as _StyledComponents from "styled-components";
55
import "../utils/bootstrap";
66
import { InterpolationValue } from "styled-components";
77
import ColumnProperties from "./ColumnProperties";
8+
import ColumnOffset from "./ColumnOffset";
89
import ColumnOrder from "./ColumnOrder";
910
import ColumnSize from "./ColumnSize";
11+
import renderOffset from "./renderOffset";
1012
import renderOrder from "./renderOrder";
1113
import renderSize from "./renderSize";
1214
import {
@@ -26,10 +28,12 @@ const Column = styled.div`
2628
${(props: ColumnProperties) => {
2729
const breakpointsMap = breakpoints(props!.theme);
2830
const renderer = {
31+
offset: (value?: PropertyValue) => renderOffset(value as ColumnOffset),
2932
order: (value?: PropertyValue) => renderOrder(value as ColumnOrder),
3033
size: (value?: PropertyValue) => renderSize(value as ColumnSize)
3134
};
3235
const valueMap = {
36+
offset: props!.offset as BreakpointValues<ColumnOffset>,
3337
order: props!.order as BreakpointValues<ColumnOrder>,
3438
size: props!.size as BreakpointValues<ColumnSize>
3539
};
@@ -40,6 +44,7 @@ const Column = styled.div`
4044
padding-left: ${width}px;
4145
4246
${render(valueMap, breakpointsMap, renderer)}
47+
${renderOffset(props!.offset as ColumnOffset)}
4348
${renderOrder(props!.order as ColumnOrder)}
4449
${renderSize(props!.size as ColumnSize)}
4550
`;

‎src/column/ColumnOffset.story.tsx

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
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+
import { ThemeProvider } from "../theme/StyledComponents";
7+
8+
const breakpoints = {
9+
phone: 0,
10+
tablet: 600,
11+
desktop: 800
12+
};
13+
14+
const containerWidth = {
15+
// do not specify phone here
16+
tablet: 560,
17+
desktop: 760
18+
};
19+
20+
storiesOf("ColumnOffset", module).add("default", () => (
21+
<div>
22+
<Container>
23+
<Row>
24+
<Column offset={{ sm: 3, md: 6 }} size={3}>
25+
Offset 3 & 6
26+
</Column>
27+
<Column offset={{ sm: 3, md: 6 }} size={3}>
28+
Offset 3 & 6
29+
</Column>
30+
<Column offset={{ sm: 3, md: 6 }} size={3}>
31+
Offset 3 & 6
32+
</Column>
33+
<Column offset={{ sm: 3, md: 6 }} size={3}>
34+
Offset 3 & 6
35+
</Column>
36+
</Row>
37+
</Container>
38+
</div>
39+
));

‎src/column/ColumnOffset.ts

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
type ColumnOffset =
2+
| 1
3+
| 2
4+
| 3
5+
| 4
6+
| 5
7+
| 6
8+
| 7
9+
| 8
10+
| 9
11+
| 10
12+
| 11;
13+
14+
export default ColumnOffset;

‎src/column/ColumnProperties.ts

+2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1+
import ColumnOffset from "./ColumnOffset";
12
import ColumnOrder from "./ColumnOrder";
23
import ColumnSize from "./ColumnSize";
34
import { BreakpointValue } from "../media";
45
import { ThemeProperties } from "../theme";
56

67
export default interface ColumnProperties extends ThemeProperties {
8+
offset?: BreakpointValue<ColumnOffset>;
79
order?: BreakpointValue<ColumnOrder>;
810
size?: BreakpointValue<ColumnSize>;
911
}

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

+76-24
Original file line numberDiff line numberDiff line change
@@ -14,59 +14,64 @@ exports[`<Column /> should match the snapshot (no properties set) 1`] = `
1414
/>
1515
`;
1616

17-
exports[`<Column /> should match the snapshot (order property set to { xs: 'first', sm: 3, md: 'last' }) 1`] = `
17+
exports[`<Column /> should match the snapshot (offset: { xs: 3, sm: 4, md: 8 }) 1`] = `
1818
.c0 {
1919
position: relative;
2020
width: 100%;
2121
min-height: 1px;
2222
padding-right: 15px;
2323
padding-left: 15px;
24-
-webkit-box-ordinal-group: 0;
25-
-ms-flex-order: -1;
26-
-webkit-order: -1;
27-
-ms-flex-order: -1;
28-
order: -1;
24+
margin-left: 25.000000%;
2925
}
3026
3127
@media (min-width:576px) {
3228
.c0 {
33-
-webkit-box-ordinal-group: 3;
34-
-ms-flex-order: 2;
35-
-webkit-order: 2;
36-
-ms-flex-order: 2;
37-
order: 2;
29+
margin-left: 33.333333%;
3830
}
3931
}
4032
4133
@media (min-width:768px) {
4234
.c0 {
43-
-webkit-box-ordinal-group: 13;
44-
-ms-flex-order: 12;
45-
-webkit-order: 12;
46-
-ms-flex-order: 12;
47-
order: 12;
35+
margin-left: 66.666667%;
4836
}
4937
}
5038
5139
<div
5240
className="c0"
53-
order={
41+
offset={
5442
Object {
55-
"md": "last",
56-
"sm": 3,
57-
"xs": "first",
43+
"md": 8,
44+
"sm": 4,
45+
"xs": 3,
5846
}
5947
}
6048
/>
6149
`;
6250

63-
exports[`<Column /> should match the snapshot (order property set to 3 size property is set 9) 1`] = `
51+
exports[`<Column /> should match the snapshot (offset: 3) 1`] = `
6452
.c0 {
6553
position: relative;
6654
width: 100%;
6755
min-height: 1px;
6856
padding-right: 15px;
6957
padding-left: 15px;
58+
margin-left: 25.000000%;
59+
}
60+
61+
<div
62+
className="c0"
63+
offset={3}
64+
/>
65+
`;
66+
67+
exports[`<Column /> should match the snapshot (offset: 3, order: 3, size: 9) 1`] = `
68+
.c0 {
69+
position: relative;
70+
width: 100%;
71+
min-height: 1px;
72+
padding-right: 15px;
73+
padding-left: 15px;
74+
margin-left: 25.000000%;
7075
-webkit-box-ordinal-group: 3;
7176
-ms-flex-order: 2;
7277
-webkit-order: 2;
@@ -82,12 +87,59 @@ exports[`<Column /> should match the snapshot (order property set to 3 size prop
8287
8388
<div
8489
className="c0"
90+
offset={3}
8591
order={3}
8692
size={9}
8793
/>
8894
`;
8995

90-
exports[`<Column /> should match the snapshot (order property set to 5) 1`] = `
96+
exports[`<Column /> should match the snapshot (order: { xs: 'first', sm: 3, md: 'last' }) 1`] = `
97+
.c0 {
98+
position: relative;
99+
width: 100%;
100+
min-height: 1px;
101+
padding-right: 15px;
102+
padding-left: 15px;
103+
-webkit-box-ordinal-group: 0;
104+
-ms-flex-order: -1;
105+
-webkit-order: -1;
106+
-ms-flex-order: -1;
107+
order: -1;
108+
}
109+
110+
@media (min-width:576px) {
111+
.c0 {
112+
-webkit-box-ordinal-group: 3;
113+
-ms-flex-order: 2;
114+
-webkit-order: 2;
115+
-ms-flex-order: 2;
116+
order: 2;
117+
}
118+
}
119+
120+
@media (min-width:768px) {
121+
.c0 {
122+
-webkit-box-ordinal-group: 13;
123+
-ms-flex-order: 12;
124+
-webkit-order: 12;
125+
-ms-flex-order: 12;
126+
order: 12;
127+
}
128+
}
129+
130+
<div
131+
className="c0"
132+
order={
133+
Object {
134+
"md": "last",
135+
"sm": 3,
136+
"xs": "first",
137+
}
138+
}
139+
/>
140+
`;
141+
142+
exports[`<Column /> should match the snapshot (order: 5) 1`] = `
91143
.c0 {
92144
position: relative;
93145
width: 100%;
@@ -107,7 +159,7 @@ exports[`<Column /> should match the snapshot (order property set to 5) 1`] = `
107159
/>
108160
`;
109161

110-
exports[`<Column /> should match the snapshot (order property set to 5) 2`] = `
162+
exports[`<Column /> should match the snapshot (size: 7) 1`] = `
111163
.c0 {
112164
position: relative;
113165
width: 100%;
@@ -128,7 +180,7 @@ exports[`<Column /> should match the snapshot (order property set to 5) 2`] = `
128180
/>
129181
`;
130182

131-
exports[`<Column /> should match the snapshot (size property set to { xs: 'auto', sm: 7, md: 'none' }) 1`] = `
183+
exports[`<Column /> should match the snapshot (size: { xs: 'auto', sm: 7, md: 'none' }) 1`] = `
132184
.c0 {
133185
position: relative;
134186
width: 100%;

‎src/column/renderOffset.test.ts

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import renderOffset from "./renderOffset";
2+
3+
describe("renderOffset", () => {
4+
it("should return css for offset (input: 1)", () => {
5+
// arrange
6+
const input = 1;
7+
8+
// act
9+
const output = renderOffset(input);
10+
11+
// assert
12+
expect(output.replace(/\n|\r|\s|\t/gi, "")).toBe("margin-left:8.333333%;");
13+
});
14+
15+
it("should return empty string (input: undefined)", () => {
16+
// arrange
17+
const input = undefined;
18+
19+
// act
20+
const output = renderOffset(input);
21+
22+
// assert
23+
expect(output.replace(/\n|\r|\s|\t/gi, "")).toBe("");
24+
});
25+
});

‎src/column/renderOffset.ts

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import ColumnOffset from "./ColumnOffset";
2+
import { percentage } from "../utils";
3+
4+
export default function renderOrder(offset?: ColumnOffset): string {
5+
if (
6+
offset != null &&
7+
typeof offset === "number" &&
8+
offset > 0 &&
9+
offset < 12
10+
) {
11+
return `
12+
margin-left: ${percentage(offset)}%;
13+
`;
14+
}
15+
16+
return "";
17+
}

0 commit comments

Comments
 (0)