Skip to content

Commit 04d349c

Browse files
oliviertassinarioliviertassinari
committed
update docs
1 parent 46641e6 commit 04d349c

File tree

14 files changed

+233
-64
lines changed

14 files changed

+233
-64
lines changed

‎docs/src/pages/components/cards/OutlinedCard.js‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import React from 'react';
2+
import { makeStyles } from '@material-ui/core/styles';
3+
import Card from '@material-ui/core/Card';
4+
import CardActions from '@material-ui/core/CardActions';
5+
import CardContent from '@material-ui/core/CardContent';
6+
import Button from '@material-ui/core/Button';
7+
import Typography from '@material-ui/core/Typography';
8+
9+
const useStyles = makeStyles({
10+
card: {
11+
minWidth: 275,
12+
},
13+
bullet: {
14+
display: 'inline-block',
15+
margin: '0 2px',
16+
transform: 'scale(0.8)',
17+
},
18+
title: {
19+
fontSize: 14,
20+
},
21+
pos: {
22+
marginBottom: 12,
23+
},
24+
});
25+
26+
export default function SimpleCard() {
27+
const classes = useStyles();
28+
const bull = <span className={classes.bullet}>•</span>;
29+
30+
return (
31+
<Card className={classes.card} variant="outlined">
32+
<CardContent>
33+
<Typography className={classes.title} color="textSecondary" gutterBottom>
34+
Word of the Day
35+
</Typography>
36+
<Typography variant="h5" component="h2">
37+
be{bull}nev{bull}o{bull}lent
38+
</Typography>
39+
<Typography className={classes.pos} color="textSecondary">
40+
adjective
41+
</Typography>
42+
<Typography variant="body2" component="p">
43+
well meaning and kindly.
44+
<br />
45+
{'"a benevolent smile"'}
46+
</Typography>
47+
</CardContent>
48+
<CardActions>
49+
<Button size="small">Learn More</Button>
50+
</CardActions>
51+
</Card>
52+
);
53+
}

‎docs/src/pages/components/cards/OutlinedCard.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import React from 'react';
2+
import { makeStyles } from '@material-ui/core/styles';
3+
import Card from '@material-ui/core/Card';
4+
import CardActions from '@material-ui/core/CardActions';
5+
import CardContent from '@material-ui/core/CardContent';
6+
import Button from '@material-ui/core/Button';
7+
import Typography from '@material-ui/core/Typography';
8+
9+
const useStyles = makeStyles({
10+
card: {
11+
minWidth: 275,
12+
},
13+
bullet: {
14+
display: 'inline-block',
15+
margin: '0 2px',
16+
transform: 'scale(0.8)',
17+
},
18+
title: {
19+
fontSize: 14,
20+
},
21+
pos: {
22+
marginBottom: 12,
23+
},
24+
});
25+
26+
export default function SimpleCard() {
27+
const classes = useStyles();
28+
const bull = <span className={classes.bullet}>•</span>;
29+
30+
return (
31+
<Card className={classes.card} variant="outlined">
32+
<CardContent>
33+
<Typography className={classes.title} color="textSecondary" gutterBottom>
34+
Word of the Day
35+
</Typography>
36+
<Typography variant="h5" component="h2">
37+
be{bull}nev{bull}o{bull}lent
38+
</Typography>
39+
<Typography className={classes.pos} color="textSecondary">
40+
adjective
41+
</Typography>
42+
<Typography variant="body2" component="p">
43+
well meaning and kindly.
44+
<br />
45+
{'"a benevolent smile"'}
46+
</Typography>
47+
</CardContent>
48+
<CardActions>
49+
<Button size="small">Learn More</Button>
50+
</CardActions>
51+
</Card>
52+
);
53+
}

‎docs/src/pages/components/cards/SimpleCard.js‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,11 +34,7 @@ export default function SimpleCard() {
3434
Word of the Day
3535
</Typography>
3636
<Typography variant="h5" component="h2">
37-
be
38-
{bull}
39-
nev
40-
{bull}o{bull}
41-
lent
37+
be{bull}nev{bull}o{bull}lent
4238
</Typography>
4339
<Typography className={classes.pos} color="textSecondary">
4440
adjective

‎docs/src/pages/components/cards/SimpleCard.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,11 +34,7 @@ export default function SimpleCard() {
3434
Word of the Day
3535
</Typography>
3636
<Typography variant="h5" component="h2">
37-
be
38-
{bull}
39-
nev
40-
{bull}o{bull}
41-
lent
37+
be{bull}nev{bull}o{bull}lent
4238
</Typography>
4339
<Typography className={classes.pos} color="textSecondary">
4440
adjective

‎docs/src/pages/components/cards/cards.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,12 @@ Although cards can support multiple actions, UI controls, and an overflow menu,
1717

1818
{{"demo": "pages/components/cards/SimpleCard.js", "bg": true}}
1919

20+
### Outlined Card
21+
22+
Set `variant="outlined` to render an outlined card.
23+
24+
{{"demo": "pages/components/cards/OutlinedCard.js", "bg": true}}
25+
2026
## Complex Interaction
2127

2228
On desktop, card content can expand.

‎docs/src/pages/components/paper/PaperSheet.js‎

Lines changed: 0 additions & 25 deletions
This file was deleted.

‎docs/src/pages/components/paper/PaperSheet.tsx‎

Lines changed: 0 additions & 27 deletions
This file was deleted.

‎docs/src/pages/components/paper/SimplePaper.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from 'react';
2+
import { makeStyles } from '@material-ui/core/styles';
3+
import Paper from '@material-ui/core/Paper';
4+
5+
const useStyles = makeStyles(theme => ({
6+
root: {
7+
display: 'flex',
8+
'& > *': {
9+
margin: theme.spacing(1),
10+
width: theme.spacing(16),
11+
height: theme.spacing(16),
12+
},
13+
},
14+
}));
15+
16+
export default function SimplePaper() {
17+
const classes = useStyles();
18+
19+
return (
20+
<div className={classes.root}>
21+
<Paper elevation={0} />
22+
<Paper />
23+
<Paper elevation={3} />
24+
</div>
25+
);
26+
}

‎docs/src/pages/components/paper/SimplePaper.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React from 'react';
2+
import { Theme, createStyles, makeStyles } from '@material-ui/core/styles';
3+
import Paper from '@material-ui/core/Paper';
4+
import Typography from '@material-ui/core/Typography';
5+
6+
const useStyles = makeStyles((theme: Theme) =>
7+
createStyles({
8+
root: {
9+
display: 'flex',
10+
'& > *': {
11+
margin: theme.spacing(1),
12+
width: theme.spacing(16),
13+
height: theme.spacing(16),
14+
},
15+
},
16+
}),
17+
);
18+
19+
export default function SimplePaper() {
20+
const classes = useStyles();
21+
22+
return (
23+
<div className={classes.root}>
24+
<Paper elevation={0} />
25+
<Paper />
26+
<Paper elevation={3} />
27+
</div>
28+
);
29+
}

‎docs/src/pages/components/paper/Variants.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from 'react';
2+
import { makeStyles } from '@material-ui/core/styles';
3+
import Paper from '@material-ui/core/Paper';
4+
5+
const useStyles = makeStyles(theme => ({
6+
root: {
7+
display: 'flex',
8+
'& > *': {
9+
margin: theme.spacing(1),
10+
width: theme.spacing(16),
11+
height: theme.spacing(16),
12+
},
13+
},
14+
}));
15+
16+
export default function Variants() {
17+
const classes = useStyles();
18+
19+
return (
20+
<div className={classes.root}>
21+
<Paper variant="outlined" />
22+
<Paper variant="outlined" square />
23+
</div>
24+
);
25+
}

0 commit comments

Comments
 (0)