Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs] Migrate Card demos to emotion #25557

Merged
merged 16 commits into from
Mar 31, 2021
Merged

[docs] Migrate Card demos to emotion #25557

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
ed7c334
docs: Migrate RecipeReviewCard demo to emotion
vicasas Mar 29, 2021
3e54817
docs: Migrate SimpleCard demo to emotion
vicasas Mar 29, 2021
52f42db
docs: Migrate OutlinedCard demo to emotion
vicasas Mar 29, 2021
6353b30
docs: Migrate MultiActionAreaCard demo to emotion
vicasas Mar 29, 2021
4f8fdc1
docs: Migrate MediaControlCard demo to emotion
vicasas Mar 29, 2021
3eefef1
docs: Migrate MediaCard demo to emotion
vicasas Mar 29, 2021
a399618
docs: Migrate ImgMediaCard demo to emotion
vicasas Mar 29, 2021
ade929a
docs: Migrate ActionAreaCard demo to emotion
vicasas Mar 29, 2021
45e0b20
fix: arrow
vicasas Mar 29, 2021
82764af
basic over simple
oliviertassinari Mar 30, 2021
2cafc29
match sx prop
oliviertassinari Mar 30, 2021
42b5e3c
isolate card content
oliviertassinari Mar 30, 2021
f88e906
p is already the default component
oliviertassinari Mar 30, 2021
f3223a0
oops
oliviertassinari Mar 30, 2021
0d3e5d1
fix: destructuring in styled api
vicasas Mar 30, 2021
f6475bf
naming convention other > rest
oliviertassinari Mar 31, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 3 additions & 15 deletions docs/src/pages/components/cards/ActionAreaCard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,36 +1,24 @@
import * as React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Typography from '@material-ui/core/Typography';
import { CardActionArea } from '@material-ui/core';

const useStyles = makeStyles({
root: {
maxWidth: 345,
},
media: {
height: 140,
},
});

export default function ActionAreaCard() {
const classes = useStyles();

return (
<Card className={classes.root}>
<Card sx={{ maxWidth: 345 }}>
<CardActionArea>
<CardMedia
className={classes.media}
sx={{ height: 140 }}
image="/static/images/cards/contemplative-reptile.jpg"
title="Contemplative Reptile"
/>
<CardContent>
<Typography gutterBottom variant="h5" component="div">
Lizard
</Typography>
<Typography variant="body2" color="textSecondary" component="p">
<Typography variant="body2" color="text.secondary">
Lizards are a widespread group of squamate reptiles, with over 6,000
species, ranging across all continents except Antarctica
</Typography>
Expand Down
18 changes: 3 additions & 15 deletions docs/src/pages/components/cards/ActionAreaCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,36 +1,24 @@
import * as React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Typography from '@material-ui/core/Typography';
import { CardActionArea } from '@material-ui/core';

const useStyles = makeStyles({
root: {
maxWidth: 345,
},
media: {
height: 140,
},
});

export default function ActionAreaCard() {
const classes = useStyles();

return (
<Card className={classes.root}>
<Card sx={{ maxWidth: 345 }}>
<CardActionArea>
<CardMedia
className={classes.media}
sx={{ height: 140 }}
image="/static/images/cards/contemplative-reptile.jpg"
title="Contemplative Reptile"
/>
<CardContent>
<Typography gutterBottom variant="h5" component="div">
Lizard
</Typography>
<Typography variant="body2" color="textSecondary" component="p">
<Typography variant="body2" color="text.secondary">
Lizards are a widespread group of squamate reptiles, with over 6,000
species, ranging across all continents except Antarctica
</Typography>
Expand Down
39 changes: 14 additions & 25 deletions .../src/pages/components/cards/SimpleCard.js → docs/src/pages/components/cards/BasicCard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,45 +1,34 @@
import * as React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Box from '@material-ui/core/Box';
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';

const useStyles = makeStyles({
root: {
minWidth: 275,
},
bullet: {
display: 'inline-block',
margin: '0 2px',
transform: 'scale(0.8)',
},
title: {
fontSize: 14,
},
pos: {
marginBottom: 12,
},
});

export default function SimpleCard() {
const classes = useStyles();
const bull = <span className={classes.bullet}>•</span>;
const bull = (
<Box
component="span"
sx={{ display: 'inline-block', mx: '2px', transform: 'scale(0.8)' }}
>
•
</Box>
);

export default function BasicCard() {
return (
<Card className={classes.root}>
<Card sx={{ minWidth: 275 }}>
<CardContent>
<Typography className={classes.title} color="textSecondary" gutterBottom>
<Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
Word of the Day
</Typography>
<Typography variant="h5" component="div">
be{bull}nev{bull}o{bull}lent
</Typography>
<Typography className={classes.pos} color="textSecondary">
<Typography sx={{ mb: 1.5 }} color="text.secondary">
adjective
</Typography>
<Typography variant="body2" component="p">
<Typography variant="body2">
well meaning and kindly.
<br />
{'"a benevolent smile"'}
Expand Down
39 changes: 14 additions & 25 deletions ...src/pages/components/cards/SimpleCard.tsx → .../src/pages/components/cards/BasicCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,45 +1,34 @@
import * as React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Box from '@material-ui/core/Box';
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';

const useStyles = makeStyles({
root: {
minWidth: 275,
},
bullet: {
display: 'inline-block',
margin: '0 2px',
transform: 'scale(0.8)',
},
title: {
fontSize: 14,
},
pos: {
marginBottom: 12,
},
});

export default function SimpleCard() {
const classes = useStyles();
const bull = <span className={classes.bullet}>•</span>;
const bull = (
<Box
component="span"
sx={{ display: 'inline-block', mx: '2px', transform: 'scale(0.8)' }}
>
•
</Box>
);

export default function BasicCard() {
return (
<Card className={classes.root}>
<Card sx={{ minWidth: 275 }}>
<CardContent>
<Typography className={classes.title} color="textSecondary" gutterBottom>
<Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
Word of the Day
</Typography>
<Typography variant="h5" component="div">
be{bull}nev{bull}o{bull}lent
</Typography>
<Typography className={classes.pos} color="textSecondary">
<Typography sx={{ mb: 1.5 }} color="text.secondary">
adjective
</Typography>
<Typography variant="body2" component="p">
<Typography variant="body2">
well meaning and kindly.
<br />
{'"a benevolent smile"'}
Expand Down
13 changes: 2 additions & 11 deletions docs/src/pages/components/cards/ImgMediaCard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,14 @@
import * as React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';

const useStyles = makeStyles({
root: {
maxWidth: 345,
},
});

export default function ImgMediaCard() {
const classes = useStyles();

return (
<Card className={classes.root}>
<Card sx={{ maxWidth: 345 }}>
<CardMedia
component="img"
alt="Contemplative Reptile"
Expand All @@ -29,7 +20,7 @@ export default function ImgMediaCard() {
<Typography gutterBottom variant="h5" component="div">
Lizard
</Typography>
<Typography variant="body2" color="textSecondary" component="p">
<Typography variant="body2" color="text.secondary">
Lizards are a widespread group of squamate reptiles, with over 6,000
species, ranging across all continents except Antarctica
</Typography>
Expand Down
13 changes: 2 additions & 11 deletions docs/src/pages/components/cards/ImgMediaCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,14 @@
import * as React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';

const useStyles = makeStyles({
root: {
maxWidth: 345,
},
});

export default function ImgMediaCard() {
const classes = useStyles();

return (
<Card className={classes.root}>
<Card sx={{ maxWidth: 345 }}>
<CardMedia
component="img"
alt="Contemplative Reptile"
Expand All @@ -29,7 +20,7 @@ export default function ImgMediaCard() {
<Typography gutterBottom variant="h5" component="div">
Lizard
</Typography>
<Typography variant="body2" color="textSecondary" component="p">
<Typography variant="body2" color="text.secondary">
Lizards are a widespread group of squamate reptiles, with over 6,000
species, ranging across all continents except Antarctica
</Typography>
Expand Down
18 changes: 3 additions & 15 deletions docs/src/pages/components/cards/MediaCard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,36 +1,24 @@
import * as React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';

const useStyles = makeStyles({
root: {
maxWidth: 345,
},
media: {
height: 140,
},
});

export default function MediaCard() {
const classes = useStyles();

return (
<Card className={classes.root}>
<Card sx={{ maxWidth: 345 }}>
<CardMedia
className={classes.media}
sx={{ height: 140 }}
image="/static/images/cards/contemplative-reptile.jpg"
title="Contemplative Reptile"
/>
<CardContent>
<Typography gutterBottom variant="h5" component="div">
Lizard
</Typography>
<Typography variant="body2" color="textSecondary" component="p">
<Typography variant="body2" color="text.secondary">
Lizards are a widespread group of squamate reptiles, with over 6,000
species, ranging across all continents except Antarctica
</Typography>
Expand Down
18 changes: 3 additions & 15 deletions docs/src/pages/components/cards/MediaCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,36 +1,24 @@
import * as React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';

const useStyles = makeStyles({
root: {
maxWidth: 345,
},
media: {
height: 140,
},
});

export default function MediaCard() {
const classes = useStyles();

return (
<Card className={classes.root}>
<Card sx={{ maxWidth: 345 }}>
<CardMedia
className={classes.media}
sx={{ height: 140 }}
image="/static/images/cards/contemplative-reptile.jpg"
title="Contemplative Reptile"
/>
<CardContent>
<Typography gutterBottom variant="h5" component="div">
Lizard
</Typography>
<Typography variant="body2" color="textSecondary" component="p">
<Typography variant="body2" color="text.secondary">
Lizards are a widespread group of squamate reptiles, with over 6,000
species, ranging across all continents except Antarctica
</Typography>
Expand Down
Loading