Skip to content

Commit baca6bf

Browse files
tassoevantassoevan
authored
feat: Grid (#100)
* Add useStylingProvider hook * Add Grid prototype * Fix wrong modifier class * Fix gutters * Delete old grid code
1 parent 38ad447 commit baca6bf

22 files changed

+263
-351
lines changed

‎packages/fuselage/.loki/reference/chrome_iphone7_Containers_Grid_Default_Story.png

2.22 KB
Loading

‎packages/fuselage/.loki/reference/chrome_iphone7_Containers_Grid_Lg_Breakpoint.png

62 KB
Loading

‎packages/fuselage/.loki/reference/chrome_iphone7_Containers_Grid_Md_Breakpoint.png

41.2 KB
Loading

‎packages/fuselage/.loki/reference/chrome_iphone7_Containers_Grid_Sm_Breakpoint.png

42.6 KB
Loading

‎packages/fuselage/.loki/reference/chrome_iphone7_Containers_Grid_Xl_Breakpoint.png

58.7 KB
Loading

‎packages/fuselage/.loki/reference/chrome_iphone7_Containers_Grid_Xs_Breakpoint.png

22.8 KB
Loading

‎packages/fuselage/.loki/reference/chrome_laptop_Containers_Grid_Default_Story.png

1.41 KB
Loading

‎packages/fuselage/.loki/reference/chrome_laptop_Containers_Grid_Lg_Breakpoint.png

35.9 KB
Loading

‎packages/fuselage/.loki/reference/chrome_laptop_Containers_Grid_Md_Breakpoint.png

24 KB
Loading

‎packages/fuselage/.loki/reference/chrome_laptop_Containers_Grid_Sm_Breakpoint.png

24.5 KB
Loading

‎packages/fuselage/.loki/reference/chrome_laptop_Containers_Grid_Xl_Breakpoint.png

33.5 KB
Loading

‎packages/fuselage/.loki/reference/chrome_laptop_Containers_Grid_Xs_Breakpoint.png

11.4 KB
Loading

‎packages/fuselage/src/components/Grid/index.js

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import PropTypes from 'prop-types';
2+
import React from 'react';
3+
4+
import { createStyledComponent } from '../../styles';
5+
6+
const StyledGrid = createStyledComponent('rcx-grid', 'div');
7+
const StyledGridItem = createStyledComponent('rcx-grid__item', 'div');
8+
9+
export const Grid = React.forwardRef(function Grid({ xs, sm, md, lg, xl, ...props }, ref) {
10+
return <StyledGrid
11+
mod-xs={xs}
12+
mod-sm={sm}
13+
mod-md={md}
14+
mod-lg={lg}
15+
mod-xl={xl}
16+
ref={ref}
17+
{...props}
18+
/>;
19+
});
20+
21+
Grid.displayName = 'Grid.Row';
22+
23+
Grid.propTypes = {
24+
xs: PropTypes.bool,
25+
sm: PropTypes.bool,
26+
md: PropTypes.bool,
27+
lg: PropTypes.bool,
28+
xl: PropTypes.bool,
29+
};
30+
31+
export const GridItem = React.forwardRef(function GridItem({ xs, sm, md, lg, xl, ...props }, ref) {
32+
return <StyledGridItem
33+
mod-xs={xs}
34+
mod-sm={sm}
35+
mod-md={md}
36+
mod-lg={lg}
37+
mod-xl={xl}
38+
ref={ref}
39+
{...props}
40+
/>;
41+
});
42+
43+
GridItem.displayName = 'Grid.Item';
44+
45+
GridItem.propTypes = {
46+
xs: PropTypes.oneOf([1, 2, 3, 4]),
47+
sm: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8]),
48+
md: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8]),
49+
lg: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
50+
xl: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
51+
};
52+
53+
Grid.Item = GridItem;

‎packages/fuselage/src/components/Grid/spec.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
4+
import { Grid } from '../..';
5+
6+
it('renders without crashing', () => {
7+
const div = document.createElement('div');
8+
ReactDOM.render(<Grid />, div);
9+
ReactDOM.unmountComponentAtNode(div);
10+
});
11+
12+
describe('Grid.Item', () => {
13+
it('renders without crashing', () => {
14+
const div = document.createElement('div');
15+
ReactDOM.render(<Grid.Item />, div);
16+
ReactDOM.unmountComponentAtNode(div);
17+
});
18+
});

‎packages/fuselage/src/components/Grid/stories.mdx

+147
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
import { Meta, Preview, Props, Story } from '@storybook/addon-docs/blocks';
2+
3+
import breakpoints from '../../styles/variables/breakpoints';
4+
import { Grid, Tile } from '../..';
5+
6+
<Meta title='Containers|Grid' parameters={{ jest: ['Grid/spec'] }} />
7+
8+
# Grid
9+
10+
<Preview>
11+
<Story name='Default'>
12+
<Grid>
13+
<Grid.Item>
14+
<Tile elevation={1} />
15+
</Grid.Item>
16+
<Grid.Item>
17+
<Tile elevation={1} />
18+
</Grid.Item>
19+
<Grid.Item>
20+
<Tile elevation={1} />
21+
</Grid.Item>
22+
</Grid>
23+
</Story>
24+
</Preview>
25+
26+
### Grid
27+
28+
<Props of={Grid} />
29+
30+
### Grid.Item
31+
32+
<Props of={Grid.Item} />
33+
34+
## Breakpoints
35+
36+
| | xsmall | small | medium | large | xlarge |
37+
|-------------------|--------|-------|--------|--------|--------|
38+
| Alias | xs | sm | md | lg | xl |
39+
| Minimum width | 320px | 600px | 768px | 1024px | 1440px |
40+
| Columns | 4 | 8 | 8 | 12 | 12 |
41+
| Margins / Gutters | 16px | 16px | 24px | 24px | 24px |
42+
43+
### Extra Small (xs)
44+
45+
<Story name='xs breakpoint'>
46+
<>
47+
{Array.from({ length: breakpoints.xs.columns }).map((_, i) => i + 1).map((columns) =>
48+
<React.Fragment key={columns}>
49+
<Grid>
50+
<Grid.Item xs={columns}>
51+
<Tile elevation={1} style={{ padding: 16 }}>xs={columns}</Tile>
52+
</Grid.Item>
53+
{(breakpoints.xs.columns - columns > 0) &&
54+
<Grid.Item xs={breakpoints.xs.columns - columns}>
55+
<Tile elevation={1} style={{ padding: 16 }}>xs={breakpoints.xs.columns - columns}</Tile>
56+
</Grid.Item>}
57+
</Grid>
58+
<br />
59+
</React.Fragment>
60+
)}
61+
</>
62+
</Story>
63+
64+
### Small (sm)
65+
66+
<Story name='sm breakpoint'>
67+
<>
68+
{Array.from({ length: breakpoints.sm.columns }).map((_, i) => i + 1).map((columns) =>
69+
<React.Fragment key={columns}>
70+
<Grid>
71+
<Grid.Item sm={columns}>
72+
<Tile elevation={1} style={{ padding: 16 }}>sm={columns}</Tile>
73+
</Grid.Item>
74+
{(breakpoints.sm.columns - columns > 0) &&
75+
<Grid.Item sm={breakpoints.sm.columns - columns}>
76+
<Tile elevation={1} style={{ padding: 16 }}>sm={breakpoints.sm.columns - columns}</Tile>
77+
</Grid.Item>}
78+
</Grid>
79+
<br />
80+
</React.Fragment>
81+
)}
82+
</>
83+
</Story>
84+
85+
### Medium (md)
86+
87+
<Story name='md breakpoint'>
88+
<>
89+
{Array.from({ length: breakpoints.md.columns }).map((_, i) => i + 1).map((columns) =>
90+
<React.Fragment key={columns}>
91+
<Grid>
92+
<Grid.Item md={columns}>
93+
<Tile elevation={1} style={{ padding: 16 }}>md={columns}</Tile>
94+
</Grid.Item>
95+
{(breakpoints.md.columns - columns > 0) &&
96+
<Grid.Item md={breakpoints.md.columns - columns}>
97+
<Tile elevation={1} style={{ padding: 16 }}>md={breakpoints.md.columns - columns}</Tile>
98+
</Grid.Item>}
99+
</Grid>
100+
<br />
101+
</React.Fragment>
102+
)}
103+
</>
104+
</Story>
105+
106+
### Large (lg)
107+
108+
<Story name='lg breakpoint'>
109+
<>
110+
{Array.from({ length: breakpoints.lg.columns }).map((_, i) => i + 1).map((columns) =>
111+
<React.Fragment key={columns}>
112+
<Grid>
113+
<Grid.Item lg={columns}>
114+
<Tile elevation={1} style={{ padding: 16 }}>lg={columns}</Tile>
115+
</Grid.Item>
116+
{(breakpoints.lg.columns - columns > 0) &&
117+
<Grid.Item lg={breakpoints.lg.columns - columns}>
118+
<Tile elevation={1} style={{ padding: 16 }}>lg={breakpoints.lg.columns - columns}</Tile>
119+
</Grid.Item>}
120+
</Grid>
121+
<br />
122+
</React.Fragment>
123+
)}
124+
</>
125+
</Story>
126+
127+
### Extra Large (xl)
128+
129+
<Story name='xl breakpoint'>
130+
<>
131+
{Array.from({ length: breakpoints.xl.columns }).map((_, i) => i + 1).map((columns) =>
132+
<React.Fragment key={columns}>
133+
<Grid>
134+
<Grid.Item xl={columns}>
135+
<Tile elevation={1} style={{ padding: 16 }}>xl={columns}</Tile>
136+
</Grid.Item>
137+
{(breakpoints.xl.columns - columns > 0) &&
138+
<Grid.Item xl={breakpoints.xl.columns - columns}>
139+
<Tile elevation={1} style={{ padding: 16 }}>xl={breakpoints.xl.columns - columns}</Tile>
140+
</Grid.Item>}
141+
</Grid>
142+
<br />
143+
</React.Fragment>
144+
)}
145+
</>
146+
</Story>
147+

‎packages/fuselage/src/components/Grid/styles.scss

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
$breakpoint-names: map-keys($breakpoints);
2+
3+
@mixin when-item-is-on-breakpoint($breakpoint-name) {
4+
@include when-breakpoint($breakpoint-name) {
5+
@content;
6+
}
7+
8+
.rcx-grid--#{$breakpoint-name} > & {
9+
@content;
10+
}
11+
}
12+
13+
.rcx-grid {
14+
@include box;
15+
display: flex;
16+
flex-flow: row wrap;
17+
18+
@each $breakpoint-name in $breakpoint-names {
19+
@include when-item-is-on-breakpoint($breakpoint-name) {
20+
margin-inline: calc(-1 * #{ to-rem(map-get(map-get($breakpoints, $breakpoint-name), gutter-width)) });
21+
}
22+
}
23+
}
24+
25+
.rcx-grid__item {
26+
@include box;
27+
flex: 1 1 0;
28+
29+
@each $breakpoint-name in $breakpoint-names {
30+
@include when-item-is-on-breakpoint($breakpoint-name) {
31+
padding-inline: to-rem(map-get(map-get($breakpoints, $breakpoint-name), gutter-width));
32+
33+
$total-columns: map-get(map-get($breakpoints, $breakpoint-name), columns);
34+
@for $columns from 1 through $total-columns {
35+
&--#{$breakpoint-name}-#{$columns} {
36+
max-width: ($columns / $total-columns * 100%);
37+
flex-basis: ($columns / $total-columns * 100%);
38+
flex-grow: 0;
39+
}
40+
}
41+
}
42+
}
43+
}

‎packages/fuselage/src/components/_Grid/index.js.disabled

-65
This file was deleted.

‎packages/fuselage/src/components/_Grid/spec.js.disabled

-11
This file was deleted.

0 commit comments

Comments
 (0)