Skip to content

Commit 8f92f72

Browse files
exahexah
committed
✨ Add Grid component
1 parent 0099140 commit 8f92f72

File tree

8 files changed

+402
-12
lines changed

8 files changed

+402
-12
lines changed

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@
124124
"@emotion/styled": "^10.0.7",
125125
"@exah/utils": "^2.0.0",
126126
"emotion-theming": "^10.0.7",
127-
"pss": "^4.3.0-0",
127+
"pss": "^4.3.0",
128128
"react-styled-base": "^2.0.1"
129129
}
130130
}

‎src/flex-grid/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import styled from '@emotion/styled'
33
import { BorderBox } from '../box'
44
import { gridItem, gridRow } from './styles'
55

6-
const FlexGridContent = styled(BorderBox)(
6+
const FlexGridContent = styled(BorderBox)( // COMPAT
77
system
88
)
99

‎src/grid/about.mdx

+161
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
---
2+
name: Grid
3+
route: /grid
4+
order: -5
5+
---
6+
7+
import { Playground } from 'docz'
8+
import { ThemeProvider } from 'emotion-theming'
9+
import { PropsTable } from '../props-table'
10+
import { Box } from '../box'
11+
import { Grid } from './index'
12+
13+
14+
# Grid
15+
16+
## Description
17+
18+
[Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout)
19+
20+
- Item conrolled with `col`, `row` prop in `Grid.Item` component
21+
- [Space](https://github.com/exah/pss/blob/master/docs/api.md#space) between items conrolled with `gap`, `gapx` and `gapy` props
22+
- [Box alignment](https://rachelandrew.co.uk/css/cheatsheets/box-alignment) styles
23+
24+
25+
### Components:
26+
27+
#### `Grid` — Grid layout container
28+
29+
- `gap` — `grid-gap`
30+
- `gapx` — `grid-column-gap`
31+
- `gapy` — `grid-row-gap`
32+
- `autoFlow` — `grid-auto-flow`
33+
- `autoCols` — `grid-auto-columns`
34+
- `autoRows` — `grid-auto-rows`
35+
- `templateCols` — `grid-template-columns`
36+
- `templateRows` — `grid-template-rows`
37+
- `templateAreas` — `grid-template-areas`
38+
- `alignItems` — `align-items`
39+
- `justifyItems` — `justify-items`
40+
- `alignContent` — `align-content`
41+
- `justifyContent` — `justify-content`
42+
43+
44+
#### `Grid.Item`
45+
46+
- `col` — `grid-column`
47+
- `row` — `grid-row`
48+
- `area` — `grod-area`
49+
- `justifySelf` — `justify-self`
50+
- `alignSelf` — `align-self`
51+
- `order` — `order`
52+
53+
54+
## Usage
55+
56+
```js
57+
import { Grid } from 'pss-components'
58+
```
59+
60+
```js
61+
<Grid gap={2}>
62+
<Grid.Item col='span 6'>
63+
Content
64+
</Grid.Item>
65+
<Grid.Item col='span 4'>
66+
Content
67+
</Grid.Item>
68+
<Grid.Item col='span 2'>
69+
Content
70+
</Grid.Item>
71+
</Grid>
72+
```
73+
74+
75+
## Examples
76+
77+
### Basic
78+
79+
<Playground>
80+
<Grid templateCols='repeat(12, 1fr)' gapx={1}>
81+
<Grid.Item col='span 2' outline='1px solid' pd={1}>
82+
2
83+
</Grid.Item>
84+
<Grid.Item col='span 2' outline='1px solid' pd={1}>
85+
2
86+
</Grid.Item>
87+
<Grid.Item col='span 2' outline='1px solid' pd={1}>
88+
2
89+
</Grid.Item>
90+
<Grid.Item col='span 2' outline='1px solid' pd={1}>
91+
2
92+
</Grid.Item>
93+
<Grid.Item col='span 2' outline='1px solid' pd={1}>
94+
2
95+
</Grid.Item>
96+
<Grid.Item col='span 2' outline='1px solid' pd={1}>
97+
2
98+
</Grid.Item>
99+
</Grid>
100+
</Playground>
101+
102+
### Vertical and horizontal space between items
103+
104+
<Playground>
105+
<Grid templateCols='repeat(12, 1fr)' gap={1}>
106+
<Grid.Item col='span 1' outline='1px solid' pd={1}>
107+
1
108+
</Grid.Item>
109+
<Grid.Item col='span 2' outline='1px solid' pd={1}>
110+
2
111+
</Grid.Item>
112+
<Grid.Item col='span 3' outline='1px solid' pd={1}>
113+
3
114+
</Grid.Item>
115+
<Grid.Item col='span 6' outline='1px solid' pd={1}>
116+
6
117+
</Grid.Item>
118+
<Grid.Item col='span 12' outline='1px solid' pd={1}>
119+
12
120+
</Grid.Item>
121+
<Grid.Item col='span 4' outline='1px solid' pd={1}>
122+
4
123+
</Grid.Item>
124+
<Grid.Item col='span 4' outline='1px solid' pd={1}>
125+
4
126+
</Grid.Item>
127+
<Grid.Item col='span 4' outline='1px solid' pd={1}>
128+
4
129+
</Grid.Item>
130+
</Grid>
131+
</Playground>
132+
133+
### Control each item `col` and `row` props
134+
135+
<Playground>
136+
<Grid templateCols='repeat(12, 1fr)' gap={1}>
137+
<Grid.Item row='1' col='1 / span 3' outline='1px solid' pd={1}>
138+
1
139+
</Grid.Item>
140+
<Grid.Item row='2' col='4 / span 3' outline='1px solid' pd={1}>
141+
2
142+
</Grid.Item>
143+
<Grid.Item row='3' col='7 / span 3' outline='1px solid' pd={1}>
144+
3
145+
</Grid.Item>
146+
<Grid.Item row='4' col='10 / span 3' outline='1px solid' pd={1}>
147+
4
148+
</Grid.Item>
149+
</Grid>
150+
</Playground>
151+
152+
153+
## Props
154+
155+
### Grid
156+
157+
<PropsTable of={Grid} />
158+
159+
### Grid.Item
160+
161+
<PropsTable of={Grid.Item} />

‎src/grid/index.js

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import styled from '@emotion/styled'
2+
3+
import {
4+
system,
5+
createStyles,
6+
spaceRule,
7+
createGridStyle,
8+
createGridItemStyle,
9+
boxContentAlignment,
10+
boxItemsAlignment,
11+
boxSelfAlignment,
12+
order
13+
} from 'pss'
14+
15+
import { BorderBox } from '../box'
16+
17+
const gridGap = createStyles({
18+
gap: [ spaceRule('gridGap'), spaceRule('gap') ],
19+
gapx: [ spaceRule('gridColumnGap'), spaceRule('columnGap') ],
20+
gapy: [ spaceRule('gridRowGap'), spaceRule('rowGap') ]
21+
})
22+
23+
const gridStyle = createGridStyle({ isShortPropNames: true })
24+
const gridItemStyle = createGridItemStyle({ isShortPropNames: true })
25+
26+
const Grid = styled(BorderBox)(
27+
{ display: 'grid' },
28+
system,
29+
gridGap,
30+
gridStyle,
31+
boxContentAlignment,
32+
boxItemsAlignment
33+
)
34+
35+
const GridItem = styled(BorderBox)(
36+
system,
37+
gridItemStyle,
38+
boxSelfAlignment,
39+
order
40+
)
41+
42+
Grid.displayName = 'Grid'
43+
44+
Grid.propTypes = {
45+
...BorderBox.propTypes,
46+
...gridStyle.propTypes,
47+
...boxContentAlignment.propTypes,
48+
...boxItemsAlignment.propTypes,
49+
...system.propTypes
50+
}
51+
52+
Grid.Item = GridItem
53+
Grid.Item.displayName = 'Grid.Item'
54+
55+
Grid.Item.propTypes = {
56+
...BorderBox.propTypes,
57+
...gridItemStyle.propTypes,
58+
...boxSelfAlignment.propTypes,
59+
...system.propTypes
60+
}
61+
62+
export {
63+
Grid,
64+
GridItem
65+
}

‎src/index.js

+6-1
Original file line numberDiff line numberDiff line change
@@ -27,14 +27,19 @@ export {
2727
export {
2828
FlexGrid,
2929
FlexGridItem,
30-
FlexGridContent
30+
FlexGridContent // COMPAT
3131
} from './flex-grid'
3232

3333
export {
3434
Feed,
3535
FeedItem
3636
} from './feed'
3737

38+
export {
39+
Grid,
40+
GridItem
41+
} from './grid/'
42+
3843
export {
3944
Text
4045
} from './text'

0 commit comments

Comments
 (0)