Skip to content

Commit 346659c

Browse files
rstaibrstaib
authored
Implemented align self feature (#21)
* Implemented align slef feature * Removed witTheme from custom StyledComponents
1 parent 2c0d789 commit 346659c

10 files changed

+351
-38
lines changed

‎src/column/Column.test.tsx

+20-2
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,24 @@ describe("<Column />", () => {
1313
expect(result).toMatchSnapshot();
1414
});
1515

16+
it("should match the snapshot (alignSelf: 'strech') ", () => {
17+
// act
18+
const result = shallow(<Column alignSelf={"stretch"} />);
19+
20+
// assert
21+
expect(result).toMatchSnapshot();
22+
});
23+
24+
it("should match the snapshot (alignSelf: { xs: 'baseline', sm: 'center', md: 'flex-end' })", () => {
25+
// act
26+
const result = shallow(
27+
<Column alignSelf={{ xs: "baseline", sm: "center", md: "flex-end" }} />
28+
);
29+
30+
// assert
31+
expect(result).toMatchSnapshot();
32+
});
33+
1634
it("should match the snapshot (offset: 3) ", () => {
1735
// arrange
1836
const offset = 3;
@@ -66,15 +84,15 @@ describe("<Column />", () => {
6684
expect(result).toMatchSnapshot();
6785
});
6886

69-
it("should match the snapshot (offset: 3, order: 3, size: 9)", () => {
87+
it("should match the snapshot (alignSelf: 'stretch', offset: 3, order: 3, size: 9)", () => {
7088
// arrange
7189
const offset = 3;
7290
const order = 3;
7391
const size = 9;
7492

7593
// act
7694
const result = shallow(
77-
<Column offset={offset} order={order} size={size} />
95+
<Column alignSelf={"stretch"} offset={offset} order={order} size={size} />
7896
);
7997

8098
// assert

‎src/column/Column.tsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import "../utils/bootstrap";
22
import { ClassAttributes, HTMLAttributes } from "react";
33
import { StyledComponentClass } from "styled-components";
4-
import ColumnProperties from "./ColumnProperties";
4+
import ColumnAlignSelf from "./ColumnAlignSelf";
55
import ColumnOffset from "./ColumnOffset";
66
import ColumnOrder from "./ColumnOrder";
7+
import ColumnProperties from "./ColumnProperties";
78
import ColumnSize from "./ColumnSize";
9+
import renderAlignSelf from "./renderAlignSelf";
810
import renderOffset from "./renderOffset";
911
import renderOrder from "./renderOrder";
1012
import renderSize from "./renderSize";
@@ -19,11 +21,14 @@ const Column = styled.div`
1921
2022
${(props: ColumnProperties) => {
2123
const renderer = {
24+
alignSelf: (value?: PropertyValue) =>
25+
renderAlignSelf(value as ColumnAlignSelf),
2226
offset: (value?: PropertyValue) => renderOffset(value as ColumnOffset),
2327
order: (value?: PropertyValue) => renderOrder(value as ColumnOrder),
2428
size: (value?: PropertyValue) => renderSize(value as ColumnSize)
2529
};
2630
const valueMap = {
31+
alignSelf: props!.alignSelf as BreakpointValue<ColumnAlignSelf>,
2732
offset: props!.offset as BreakpointValue<ColumnOffset>,
2833
order: props!.order as BreakpointValue<ColumnOrder>,
2934
size: props!.size as BreakpointValue<ColumnSize>

‎src/column/ColumnAlignSelf.story.tsx

+115
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
import * as React from "react";
2+
import { storiesOf } from "@storybook/react";
3+
import { action } from "@storybook/addon-actions";
4+
import BlueSquare from "../__storybook__/BlueSquare";
5+
import Story from "../__storybook__/Story";
6+
import Title from "../__storybook__/Title";
7+
8+
import { Column, Container, Row } from "..";
9+
10+
storiesOf("ColumnAlignSelf", module)
11+
.add("baseline", () => (
12+
<Story>
13+
<Title>baseline</Title>
14+
<Container style={{ background: "#ccc", height: 200 }}>
15+
<Row style={{ height: 200 }}>
16+
<Column alignSelf={"stretch"} size={2}>
17+
<BlueSquare>1</BlueSquare>
18+
</Column>
19+
<Column alignSelf={"baseline"} size={2}>
20+
<BlueSquare>2</BlueSquare>
21+
</Column>
22+
<Column alignSelf={"stretch"} size={2}>
23+
<BlueSquare>3</BlueSquare>
24+
</Column>
25+
<Column alignSelf={"stretch"} size={2}>
26+
<BlueSquare>4</BlueSquare>
27+
</Column>
28+
</Row>
29+
</Container>
30+
</Story>
31+
))
32+
.add("center", () => (
33+
<Story>
34+
<Title>center</Title>
35+
<Container style={{ background: "#ccc", height: 200 }}>
36+
<Row style={{ height: 200 }}>
37+
<Column alignSelf={"stretch"} size={2}>
38+
<BlueSquare>1</BlueSquare>
39+
</Column>
40+
<Column alignSelf={"center"} size={2}>
41+
<BlueSquare>2</BlueSquare>
42+
</Column>
43+
<Column alignSelf={"stretch"} size={2}>
44+
<BlueSquare>3</BlueSquare>
45+
</Column>
46+
<Column alignSelf={"stretch"} size={2}>
47+
<BlueSquare>4</BlueSquare>
48+
</Column>
49+
</Row>
50+
</Container>
51+
</Story>
52+
))
53+
.add("flex-end", () => (
54+
<Story>
55+
<Title>flex-end</Title>
56+
<Container style={{ background: "#ccc", height: 200 }}>
57+
<Row style={{ height: 200 }}>
58+
<Column alignSelf={"stretch"} size={2}>
59+
<BlueSquare>1</BlueSquare>
60+
</Column>
61+
<Column alignSelf={"flex-end"} size={2}>
62+
<BlueSquare>2</BlueSquare>
63+
</Column>
64+
<Column alignSelf={"stretch"} size={2}>
65+
<BlueSquare>3</BlueSquare>
66+
</Column>
67+
<Column alignSelf={"stretch"} size={2}>
68+
<BlueSquare>4</BlueSquare>
69+
</Column>
70+
</Row>
71+
</Container>
72+
</Story>
73+
))
74+
.add("flex-start", () => (
75+
<Story>
76+
<Title>flex-start</Title>
77+
<Container style={{ background: "#ccc", height: 200 }}>
78+
<Row style={{ height: 200 }}>
79+
<Column alignSelf={"stretch"} size={2}>
80+
<BlueSquare>1</BlueSquare>
81+
</Column>
82+
<Column alignSelf={"flex-start"} size={2}>
83+
<BlueSquare>2</BlueSquare>
84+
</Column>
85+
<Column alignSelf={"stretch"} size={2}>
86+
<BlueSquare>3</BlueSquare>
87+
</Column>
88+
<Column alignSelf={"stretch"} size={2}>
89+
<BlueSquare>4</BlueSquare>
90+
</Column>
91+
</Row>
92+
</Container>
93+
</Story>
94+
))
95+
.add("stretch", () => (
96+
<Story>
97+
<Title>stretch</Title>
98+
<Container style={{ background: "#ccc", height: 200 }}>
99+
<Row style={{ height: 200 }}>
100+
<Column alignSelf={"stretch"} size={2}>
101+
<BlueSquare>1</BlueSquare>
102+
</Column>
103+
<Column alignSelf={"stretch"} size={2}>
104+
<BlueSquare>2</BlueSquare>
105+
</Column>
106+
<Column alignSelf={"stretch"} size={2}>
107+
<BlueSquare>3</BlueSquare>
108+
</Column>
109+
<Column alignSelf={"stretch"} size={2}>
110+
<BlueSquare>4</BlueSquare>
111+
</Column>
112+
</Row>
113+
</Container>
114+
</Story>
115+
));

‎src/column/ColumnAlignSelf.ts

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
type ColumnAlignSelf =
2+
| "baseline"
3+
| "center"
4+
| "flex-end"
5+
| "flex-start"
6+
| "stretch";
7+
8+
export default ColumnAlignSelf;

‎src/column/ColumnProperties.ts

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

78
export default interface ColumnProperties extends ThemeProperties {
9+
alignSelf?: BreakpointValue<ColumnAlignSelf>;
810
offset?: BreakpointValue<ColumnOffset>;
911
order?: BreakpointValue<ColumnOrder>;
1012
size?: BreakpointValue<ColumnSize>;

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

+75-24
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`<Column /> should match the snapshot (no properties set) 1`] = `
3+
exports[`<Column /> should match the snapshot (alignSelf: 'strech') 1`] = `
44
.c0 {
55
position: relative;
66
width: 100%;
77
min-height: 1px;
8+
-webkit-align-self: stretch !important;
9+
-ms-flex-item-align: stretch !important;
10+
align-self: stretch !important;
811
}
912
1013
<div
@@ -13,75 +16,123 @@ exports[`<Column /> should match the snapshot (no properties set) 1`] = `
1316
`;
1417

1518
exports[
16-
`<Column /> should match the snapshot (offset: { xs: 3, sm: 4, md: 8 }) 1`
19+
`<Column /> should match the snapshot (alignSelf: 'stretch', offset: 3, order: 3, size: 9) 1`
1720
] = `
1821
.c0 {
1922
position: relative;
2023
width: 100%;
2124
min-height: 1px;
25+
-webkit-align-self: stretch !important;
26+
-ms-flex-item-align: stretch !important;
27+
align-self: stretch !important;
2228
margin-left: 25.000000%;
29+
-webkit-order: 2;
30+
-ms-flex-order: 2;
31+
order: 2;
32+
-webkit-flex: 0 0 75.000000%;
33+
-ms-flex: 0 0 75.000000%;
34+
flex: 0 0 75.000000%;
35+
max-width: 75.000000%;
36+
}
37+
38+
<div
39+
className="c0"
40+
offset={3}
41+
order={3}
42+
size={9}
43+
/>
44+
`;
45+
46+
exports[
47+
`<Column /> should match the snapshot (alignSelf: { xs: 'baseline', sm: 'center', md: 'flex-end' }) 1`
48+
] = `
49+
.c0 {
50+
position: relative;
51+
width: 100%;
52+
min-height: 1px;
53+
-webkit-align-self: baseline !important;
54+
-ms-flex-item-align: baseline !important;
55+
align-self: baseline !important;
2356
}
2457
2558
@media (min-width:576px) {
2659
.c0 {
27-
margin-left: 33.333333%;
60+
-webkit-align-self: center !important;
61+
-ms-flex-item-align: center !important;
62+
align-self: center !important;
2863
}
2964
}
3065
3166
@media (min-width:768px) {
3267
.c0 {
33-
margin-left: 66.666667%;
68+
-webkit-align-self: flex-end !important;
69+
-ms-flex-item-align: end !important;
70+
align-self: flex-end !important;
3471
}
3572
}
3673
3774
<div
3875
className="c0"
39-
offset={
40-
Object {
41-
"md": 8,
42-
"sm": 4,
43-
"xs": 3,
44-
}
45-
}
4676
/>
4777
`;
4878

49-
exports[`<Column /> should match the snapshot (offset: 3) 1`] = `
79+
exports[`<Column /> should match the snapshot (no properties set) 1`] = `
5080
.c0 {
5181
position: relative;
5282
width: 100%;
5383
min-height: 1px;
54-
margin-left: 25.000000%;
5584
}
5685
5786
<div
5887
className="c0"
59-
offset={3}
6088
/>
6189
`;
6290

6391
exports[
64-
`<Column /> should match the snapshot (offset: 3, order: 3, size: 9) 1`
92+
`<Column /> should match the snapshot (offset: { xs: 3, sm: 4, md: 8 }) 1`
6593
] = `
6694
.c0 {
6795
position: relative;
6896
width: 100%;
6997
min-height: 1px;
7098
margin-left: 25.000000%;
71-
-webkit-order: 2;
72-
-ms-flex-order: 2;
73-
order: 2;
74-
-webkit-flex: 0 0 75.000000%;
75-
-ms-flex: 0 0 75.000000%;
76-
flex: 0 0 75.000000%;
77-
max-width: 75.000000%;
99+
}
100+
101+
@media (min-width:576px) {
102+
.c0 {
103+
margin-left: 33.333333%;
104+
}
105+
}
106+
107+
@media (min-width:768px) {
108+
.c0 {
109+
margin-left: 66.666667%;
110+
}
111+
}
112+
113+
<div
114+
className="c0"
115+
offset={
116+
Object {
117+
"md": 8,
118+
"sm": 4,
119+
"xs": 3,
120+
}
121+
}
122+
/>
123+
`;
124+
125+
exports[`<Column /> should match the snapshot (offset: 3) 1`] = `
126+
.c0 {
127+
position: relative;
128+
width: 100%;
129+
min-height: 1px;
130+
margin-left: 25.000000%;
78131
}
79132
80133
<div
81134
className="c0"
82135
offset={3}
83-
order={3}
84-
size={9}
85136
/>
86137
`;
87138

0 commit comments

Comments
 (0)