Skip to content

Commit c435683

Browse files
jonotrujillodiv-LeoLeonardo Di Vittorio
authored
feat: add grid system components (#198)
* test: add test that reproduces the bug * fix: add default theme declaration * fix: avoid collision of `color` prop * chore: remove StyledComponentBase typing * fix: update prop compatibility * feat: add grid system components * refactor: use flexbox approach * refactor: rework flex approach * docs: add stacking card example * fix: remove unnused import * test: add snapshot tests * feat: avoid setting marging left when 0 * feat: only use 4 decimals * test: remove old snapshot * Feat/add missing icons (#200) * feat: update assets icons to match design icons * feat: generate icons with new asset icons * fix: redirect import deprecated icons to icon/index * fix: import icons from icons/index file * docs: add new icons & divide in sections * test: update snapshots style-components classes names Co-authored-by: Leonardo Di Vittorio <[email protected]> * 1.17.2-canary.0 * chore: expose grid components Co-authored-by: Leonardo <[email protected]> Co-authored-by: Leonardo Di Vittorio <[email protected]>
1 parent f585dfb commit c435683

File tree

9 files changed

+491
-3
lines changed

9 files changed

+491
-3
lines changed

‎package-lock.json

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@freenow/wave",
3-
"version": "1.17.1",
3+
"version": "1.17.2-canary.0",
44
"description": "React components of the Wave design system for your Front-End project",
55
"main": "lib/cjs/index.js",
66
"typings": "lib/types/index.d.ts",

‎src/components/Box/Box.spec.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { render } from '@testing-library/react';
22
import * as React from 'react';
33
import { Colors } from '../../essentials';
4-
import { Box, BoxProps } from './Box';
4+
import { Box } from './Box';
55

66
describe('Box', () => {
77
it('renders without any props', () => {

‎src/components/Grid/Grid.spec.tsx

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { render } from '@testing-library/react';
2+
import * as React from 'react';
3+
import { Row, Column } from './Grid';
4+
5+
describe('Grid', () => {
6+
it('renders without props', () => {
7+
expect(
8+
render(
9+
<Row>
10+
<Column>Column 1</Column>
11+
<Column>Column 2</Column>
12+
<Column>Column 3</Column>
13+
</Row>
14+
).container.firstChild
15+
).toMatchSnapshot();
16+
});
17+
18+
it('renders columns with span', () => {
19+
expect(
20+
render(
21+
<Row>
22+
<Column span={4}>Column 1</Column>
23+
<Column span={8}>Column 2</Column>
24+
</Row>
25+
).container.firstChild
26+
).toMatchSnapshot();
27+
});
28+
29+
it('renders columns with offset', () => {
30+
expect(
31+
render(
32+
<Row>
33+
<Column>Column 1</Column>
34+
<Column offset={10}>Column 2</Column>
35+
</Row>
36+
).container.firstChild
37+
).toMatchSnapshot();
38+
});
39+
});

‎src/components/Grid/Grid.tsx

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React, { FC } from 'react';
2+
import styled from 'styled-components';
3+
import { Spaces } from '../../essentials/Spaces/Spaces';
4+
import { Box, BoxProps } from '../Box/Box';
5+
6+
const AMOUNT_OF_DECIMALS = 4;
7+
const COLUMN_WIDTH = 100 / 12;
8+
const GAP = Spaces[3];
9+
10+
type ColumnOffset = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11;
11+
type ColumnSpan = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
12+
13+
const BorderBoxWrapper = styled(Box)`
14+
box-sizing: border-box;
15+
`;
16+
17+
type RowProps = BoxProps;
18+
19+
const Row: FC<RowProps> = (props: RowProps) => (
20+
<Box display="flex" flexWrap="wrap" marginRight={`-${GAP}`} {...props} />
21+
);
22+
23+
interface ColumnProps extends BoxProps {
24+
span?: ColumnSpan;
25+
offset?: ColumnOffset;
26+
}
27+
28+
const Column: FC<ColumnProps> = ({ span = 1, offset = 0, ...restProps }: ColumnProps) => {
29+
const marginLeft = offset * COLUMN_WIDTH;
30+
const width = span * COLUMN_WIDTH;
31+
32+
return (
33+
<BorderBoxWrapper
34+
flex={`0 0 ${width.toFixed(AMOUNT_OF_DECIMALS)}%`}
35+
marginLeft={marginLeft ? `${marginLeft.toFixed(AMOUNT_OF_DECIMALS)}%` : undefined}
36+
paddingRight={GAP}
37+
{...restProps}
38+
/>
39+
);
40+
};
41+
42+
export { Row, RowProps, Column, ColumnProps };

‎src/components/Grid/__snapshots__/Grid.spec.tsx.snap

+134
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Grid renders columns with offset 1`] = `
4+
.c0 {
5+
display: -webkit-box;
6+
display: -webkit-flex;
7+
display: -ms-flexbox;
8+
display: flex;
9+
-webkit-flex-wrap: wrap;
10+
-ms-flex-wrap: wrap;
11+
flex-wrap: wrap;
12+
margin-right: -1.5rem;
13+
}
14+
15+
.c1 {
16+
-webkit-flex: 0 0 8.3333%;
17+
-ms-flex: 0 0 8.3333%;
18+
flex: 0 0 8.3333%;
19+
padding-right: 1.5rem;
20+
box-sizing: border-box;
21+
}
22+
23+
.c2 {
24+
-webkit-flex: 0 0 8.3333%;
25+
-ms-flex: 0 0 8.3333%;
26+
flex: 0 0 8.3333%;
27+
margin-left: 83.3333%;
28+
padding-right: 1.5rem;
29+
box-sizing: border-box;
30+
}
31+
32+
<div
33+
class="c0"
34+
display="flex"
35+
>
36+
<div
37+
class="c1"
38+
>
39+
Column 1
40+
</div>
41+
<div
42+
class="c2"
43+
>
44+
Column 2
45+
</div>
46+
</div>
47+
`;
48+
49+
exports[`Grid renders columns with span 1`] = `
50+
.c0 {
51+
display: -webkit-box;
52+
display: -webkit-flex;
53+
display: -ms-flexbox;
54+
display: flex;
55+
-webkit-flex-wrap: wrap;
56+
-ms-flex-wrap: wrap;
57+
flex-wrap: wrap;
58+
margin-right: -1.5rem;
59+
}
60+
61+
.c1 {
62+
-webkit-flex: 0 0 33.3333%;
63+
-ms-flex: 0 0 33.3333%;
64+
flex: 0 0 33.3333%;
65+
padding-right: 1.5rem;
66+
box-sizing: border-box;
67+
}
68+
69+
.c2 {
70+
-webkit-flex: 0 0 66.6667%;
71+
-ms-flex: 0 0 66.6667%;
72+
flex: 0 0 66.6667%;
73+
padding-right: 1.5rem;
74+
box-sizing: border-box;
75+
}
76+
77+
<div
78+
class="c0"
79+
display="flex"
80+
>
81+
<div
82+
class="c1"
83+
>
84+
Column 1
85+
</div>
86+
<div
87+
class="c2"
88+
>
89+
Column 2
90+
</div>
91+
</div>
92+
`;
93+
94+
exports[`Grid renders without props 1`] = `
95+
.c0 {
96+
display: -webkit-box;
97+
display: -webkit-flex;
98+
display: -ms-flexbox;
99+
display: flex;
100+
-webkit-flex-wrap: wrap;
101+
-ms-flex-wrap: wrap;
102+
flex-wrap: wrap;
103+
margin-right: -1.5rem;
104+
}
105+
106+
.c1 {
107+
-webkit-flex: 0 0 8.3333%;
108+
-ms-flex: 0 0 8.3333%;
109+
flex: 0 0 8.3333%;
110+
padding-right: 1.5rem;
111+
box-sizing: border-box;
112+
}
113+
114+
<div
115+
class="c0"
116+
display="flex"
117+
>
118+
<div
119+
class="c1"
120+
>
121+
Column 1
122+
</div>
123+
<div
124+
class="c1"
125+
>
126+
Column 2
127+
</div>
128+
<div
129+
class="c1"
130+
>
131+
Column 3
132+
</div>
133+
</div>
134+
`;

0 commit comments

Comments
 (0)