Skip to content

Commit 1b80bee

Browse files
DiegoAndaiDiegoAndai
committed
Actually add the tests
1 parent 203dc59 commit 1b80bee

File tree

2 files changed

+373
-0
lines changed

2 files changed

+373
-0
lines changed

‎apps/pigment-css-vite-app/src/pages/fixtures/PigmentCssGrid.tsx

Lines changed: 297 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,297 @@
1+
import * as React from 'react';
2+
import Box from '@mui/material-pigment-css/Box';
3+
import Grid from '@mui/material-pigment-css/Grid';
4+
import { styled } from '@mui/material-pigment-css';
5+
6+
const Item = styled.div`
7+
background-color: #fff;
8+
border: 1px solid #ced7e0;
9+
padding: 8px;
10+
border-radius: 4px;
11+
text-align: center;
12+
`;
13+
14+
function GridDemo1() {
15+
return (
16+
<Grid container spacing={2} sx={{ color: '#070707' }}>
17+
<Grid size={8}>
18+
<Item>size=8</Item>
19+
</Grid>
20+
<Grid size={4}>
21+
<Item>size=4</Item>
22+
</Grid>
23+
<Grid size={4}>
24+
<Item>size=4</Item>
25+
</Grid>
26+
<Grid size={8}>
27+
<Item>size=8</Item>
28+
</Grid>
29+
</Grid>
30+
);
31+
}
32+
33+
function GridDemo2() {
34+
return (
35+
<Grid container spacing={2}>
36+
<Grid size={{ xs: 6, md: 8 }}>
37+
<Item>xs=6 md=8</Item>
38+
</Grid>
39+
<Grid size={{ xs: 6, md: 4 }}>
40+
<Item>xs=6 md=4</Item>
41+
</Grid>
42+
<Grid size={{ xs: 6, md: 4 }}>
43+
<Item>xs=6 md=4</Item>
44+
</Grid>
45+
<Grid size={{ xs: 6, md: 8 }}>
46+
<Item>xs=6 md=8</Item>
47+
</Grid>
48+
</Grid>
49+
);
50+
}
51+
52+
function GridDemo3() {
53+
const [spacing, setSpacing] = React.useState(2);
54+
return (
55+
<div sx={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
56+
<Grid container spacing={spacing} sx={{ justifyContent: 'center' }}>
57+
{[0, 1, 2].map((value) => (
58+
<Grid key={value}>
59+
<Item
60+
sx={{
61+
height: 140,
62+
width: 100,
63+
}}
64+
/>
65+
</Grid>
66+
))}
67+
</Grid>
68+
<Grid container spacing={1} sx={{ justifyContent: 'center' }}>
69+
<Grid size={'auto'}>Spacing:</Grid>
70+
{[0, 0.5, 1, 2, 3, 4, 8, 12].map((value) => (
71+
<Grid key={value} size={'auto'}>
72+
<label>
73+
<input
74+
type="radio"
75+
name="radio"
76+
value={value}
77+
checked={value === spacing}
78+
onChange={(event) => setSpacing(parseFloat(event.target.value))}
79+
/>
80+
{value}
81+
</label>
82+
</Grid>
83+
))}
84+
</Grid>
85+
</div>
86+
);
87+
}
88+
89+
function GridDemo4() {
90+
return (
91+
<Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
92+
<Grid size={6}>
93+
<Item>1</Item>
94+
</Grid>
95+
<Grid size={6}>
96+
<Item>2</Item>
97+
</Grid>
98+
<Grid size={6}>
99+
<Item>3</Item>
100+
</Grid>
101+
<Grid size={6}>
102+
<Item>4</Item>
103+
</Grid>
104+
</Grid>
105+
);
106+
}
107+
108+
function GridDemo5() {
109+
return (
110+
<Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}>
111+
{Array.from(Array(6)).map((_, index) => (
112+
<Grid size={{ xs: 2, sm: 4 }} key={index}>
113+
<Item>{index + 1}</Item>
114+
</Grid>
115+
))}
116+
</Grid>
117+
);
118+
}
119+
120+
function GridDemo6() {
121+
return (
122+
<Grid container spacing={3}>
123+
<Grid size="grow">
124+
<Item>grow</Item>
125+
</Grid>
126+
<Grid size={6}>
127+
<Item>size=6</Item>
128+
</Grid>
129+
<Grid size="grow">
130+
<Item>grow</Item>
131+
</Grid>
132+
</Grid>
133+
);
134+
}
135+
136+
function GridDemo7() {
137+
return (
138+
<Grid container spacing={3}>
139+
<Grid size="auto">
140+
<Item>Variable width item</Item>
141+
</Grid>
142+
<Grid size={6}>
143+
<Item>size=6</Item>
144+
</Grid>
145+
<Grid size="grow">
146+
<Item>grow</Item>
147+
</Grid>
148+
</Grid>
149+
);
150+
}
151+
152+
function GridDemo8() {
153+
return (
154+
<Box sx={{ flexGrow: 1 }}>
155+
<Grid container spacing={2}>
156+
<Grid size={{ xs: 12, md: 5, lg: 4 }}>
157+
<Item>Email subscribe section</Item>
158+
</Grid>
159+
<Grid container size={{ xs: 12, md: 7, lg: 8 }} spacing={4}>
160+
<Grid size={{ xs: 6, lg: 3 }}>
161+
<Item>
162+
<Box id="category-a" sx={{ fontSize: '12px', textTransform: 'uppercase' }}>
163+
Category A
164+
</Box>
165+
<Box component="ul" aria-labelledby="category-a" sx={{ paddingLeft: 2 }}>
166+
<li>Link 1.1</li>
167+
<li>Link 1.2</li>
168+
<li>Link 1.3</li>
169+
</Box>
170+
</Item>
171+
</Grid>
172+
<Grid size={{ xs: 6, lg: 3 }}>
173+
<Item>
174+
<Box id="category-b" sx={{ fontSize: '12px', textTransform: 'uppercase' }}>
175+
Category B
176+
</Box>
177+
<Box component="ul" aria-labelledby="category-b" sx={{ paddingLeft: 2 }}>
178+
<li>Link 2.1</li>
179+
<li>Link 2.2</li>
180+
<li>Link 2.3</li>
181+
</Box>
182+
</Item>
183+
</Grid>
184+
<Grid size={{ xs: 6, lg: 3 }}>
185+
<Item>
186+
<Box id="category-c" sx={{ fontSize: '12px', textTransform: 'uppercase' }}>
187+
Category C
188+
</Box>
189+
<Box component="ul" aria-labelledby="category-c" sx={{ paddingLeft: 2 }}>
190+
<li>Link 3.1</li>
191+
<li>Link 3.2</li>
192+
<li>Link 3.3</li>
193+
</Box>
194+
</Item>
195+
</Grid>
196+
<Grid size={{ xs: 6, lg: 3 }}>
197+
<Item>
198+
<Box id="category-d" sx={{ fontSize: '12px', textTransform: 'uppercase' }}>
199+
Category D
200+
</Box>
201+
<Box component="ul" aria-labelledby="category-d" sx={{ paddingLeft: 2 }}>
202+
<li>Link 4.1</li>
203+
<li>Link 4.2</li>
204+
<li>Link 4.3</li>
205+
</Box>
206+
</Item>
207+
</Grid>
208+
</Grid>
209+
<Grid
210+
size={12}
211+
container
212+
direction={{ xs: 'column', sm: 'row' }}
213+
sx={{ fontSize: '12px', justifyContent: 'space-between', alignItems: 'center' }}
214+
>
215+
<Grid>
216+
<Item>© Copyright</Item>
217+
</Grid>
218+
<Grid container columnSpacing={1}>
219+
<Grid>
220+
<Item>Link A</Item>
221+
</Grid>
222+
<Grid>
223+
<Item>Link B</Item>
224+
</Grid>
225+
<Grid>
226+
<Item>Link C</Item>
227+
</Grid>
228+
</Grid>
229+
</Grid>
230+
</Grid>
231+
</Box>
232+
);
233+
}
234+
235+
function GridDemo9() {
236+
return (
237+
<Grid container spacing={2} columns={16}>
238+
<Grid size={{ xs: 8 }}>
239+
<Item>size=8</Item>
240+
</Grid>
241+
<Grid size={{ xs: 8 }}>
242+
<Item>size=8</Item>
243+
</Grid>
244+
</Grid>
245+
);
246+
}
247+
248+
function GridDemo10() {
249+
return (
250+
<Grid container spacing={3} sx={{ flexGrow: 1 }}>
251+
<Grid size={{ xs: 6, md: 2 }} offset={{ xs: 3, md: 0 }}>
252+
<Item>1</Item>
253+
</Grid>
254+
<Grid size={{ xs: 4, md: 2 }} offset={{ md: 'auto' }}>
255+
<Item>2</Item>
256+
</Grid>
257+
<Grid size={{ xs: 4, md: 2 }} offset={{ xs: 4, md: 0 }}>
258+
<Item>3</Item>
259+
</Grid>
260+
<Grid size={{ xs: 'grow', md: 6 }} offset={{ md: 2 }}>
261+
<Item>4</Item>
262+
</Grid>
263+
</Grid>
264+
);
265+
}
266+
267+
const demos = [
268+
{ id: '1', component: GridDemo1 },
269+
{ id: '2', component: GridDemo2 },
270+
{ id: '3', component: GridDemo3 },
271+
{ id: '4', component: GridDemo4 },
272+
{ id: '5', component: GridDemo5 },
273+
{ id: '6', component: GridDemo6 },
274+
{ id: '7', component: GridDemo7 },
275+
{ id: '8', component: GridDemo8 },
276+
{ id: '9', component: GridDemo9 },
277+
{ id: '10', component: GridDemo10 },
278+
];
279+
280+
export default function InteractiveGrid() {
281+
return (
282+
<div sx={{ padding: 2, marginBottom: 16, display: 'flex', flexDirection: 'column', gap: 2 }}>
283+
{demos.map((demo) => {
284+
const Demo = demo.component;
285+
return (
286+
<div
287+
key={demo.id}
288+
sx={{ flex: '1 1 0', paddingBottom: 4, borderBottom: '1px solid gray' }}
289+
>
290+
<h3>Grid Demo {demo.id}</h3>
291+
<Demo />
292+
</div>
293+
);
294+
})}
295+
</div>
296+
);
297+
}

‎apps/pigment-css-vite-app/src/pages/fixtures/PigmentCssStack.tsx

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import Stack from '@mui/material-pigment-css/Stack';
2+
import { styled } from '@mui/material-pigment-css';
3+
4+
const Item = styled.div`
5+
background-color: #fff;
6+
border: 1px solid #ced7e0;
7+
padding: 8px;
8+
border-radius: 4px;
9+
text-align: center;
10+
`;
11+
12+
function StackDemo1() {
13+
return (
14+
<Stack spacing={2}>
15+
<Item>Item 1</Item>
16+
<Item>Item 2</Item>
17+
<Item>Item 3</Item>
18+
</Stack>
19+
);
20+
}
21+
22+
function StackDemo2() {
23+
return (
24+
<Stack direction="row" spacing={2}>
25+
<Item>Item 1</Item>
26+
<Item>Item 2</Item>
27+
<Item>Item 3</Item>
28+
</Stack>
29+
);
30+
}
31+
32+
function StackDemo3() {
33+
return (
34+
<Stack direction="row-reverse" spacing={2}>
35+
<Item>Item 1</Item>
36+
<Item>Item 2</Item>
37+
<Item>Item 3</Item>
38+
</Stack>
39+
);
40+
}
41+
42+
function StackDemo4() {
43+
return (
44+
<Stack spacing={8}>
45+
<Item>Item 1</Item>
46+
<Item>Item 2</Item>
47+
<Item>Item 3</Item>
48+
</Stack>
49+
);
50+
}
51+
52+
const demos = [
53+
{ id: '1', component: StackDemo1 },
54+
{ id: '2', component: StackDemo2 },
55+
{ id: '3', component: StackDemo3 },
56+
{ id: '4', component: StackDemo4 },
57+
];
58+
59+
export default function InteractiveStack() {
60+
return (
61+
<div sx={{ padding: 2, marginBottom: 16, display: 'flex', flexDirection: 'column', gap: 2 }}>
62+
{demos.map((demo) => {
63+
const Demo = demo.component;
64+
return (
65+
<div
66+
key={demo.id}
67+
sx={{ flex: '1 1 0', paddingBottom: 4, borderBottom: '1px solid gray' }}
68+
>
69+
<h3>Stack Demo {demo.id}</h3>
70+
<Demo />
71+
</div>
72+
);
73+
})}
74+
</div>
75+
);
76+
}

0 commit comments

Comments
 (0)