Skip to content

Commit

Permalink
[docs] Migrate templates to emotion (#26604)
Browse files Browse the repository at this point in the history
  • Loading branch information
@vicasas
vicasas authored Jun 7, 2021
1 parent 943af1e commit c5037ae
Show file tree
Hide file tree
Showing 8 changed files with 235 additions and 450 deletions.
63 changes: 13 additions & 50 deletions docs/src/pages/getting-started/templates/checkout/Checkout.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import * as React from 'react';
import { makeStyles } from '@material-ui/styles';
import { ThemeProvider, createTheme } from '@material-ui/core/styles';
import CssBaseline from '@material-ui/core/CssBaseline';
import AppBar from '@material-ui/core/AppBar';
import Box from '@material-ui/core/Box';
import Container from '@material-ui/core/Container';
import Toolbar from '@material-ui/core/Toolbar';
import Paper from '@material-ui/core/Paper';
Expand All @@ -29,37 +28,6 @@ function Copyright() {
);
}

const useStyles = makeStyles((theme) => ({
appBar: {
position: 'relative',
borderBottom: `1px solid ${theme.palette.divider}`,
},
main: {
marginBottom: theme.spacing(4),
},
paper: {
marginTop: theme.spacing(3),
marginBottom: theme.spacing(3),
padding: theme.spacing(2),
[theme.breakpoints.up('md')]: {
marginTop: theme.spacing(6),
marginBottom: theme.spacing(6),
padding: theme.spacing(3),
},
},
stepper: {
padding: theme.spacing(3, 0, 5),
},
buttons: {
display: 'flex',
justifyContent: 'flex-end',
},
button: {
marginTop: theme.spacing(3),
marginLeft: theme.spacing(1),
},
}));

const steps = ['Shipping address', 'Payment details', 'Review your order'];

function getStepContent(step) {
Expand All @@ -75,10 +43,7 @@ function getStepContent(step) {
}
}

const defaultTheme = createTheme();

function CheckoutContent() {
const classes = useStyles();
const [activeStep, setActiveStep] = React.useState(0);

const handleNext = () => {
Expand All @@ -96,20 +61,23 @@ function CheckoutContent() {
position="absolute"
color="default"
elevation={0}
className={classes.appBar}
sx={{
position: 'relative',
borderBottom: (theme) => `1px solid ${theme.palette.divider}`,
}}
>
<Toolbar>
<Typography variant="h6" color="inherit" noWrap>
Company name
</Typography>
</Toolbar>
</AppBar>
<Container component="main" className={classes.main} maxWidth="sm">
<Paper className={classes.paper} variant="outlined">
<Container component="main" maxWidth="sm" sx={{ mb: 4 }}>
<Paper variant="outlined" sx={{ my: { xs: 3, md: 6 }, p: { xs: 2, md: 3 } }}>
<Typography component="h1" variant="h4" align="center">
Checkout
</Typography>
<Stepper activeStep={activeStep} className={classes.stepper}>
<Stepper activeStep={activeStep} sx={{ pt: 3, pb: 5 }}>
{steps.map((label) => (
<Step key={label}>
<StepLabel>{label}</StepLabel>
Expand All @@ -131,21 +99,21 @@ function CheckoutContent() {
) : (
<React.Fragment>
{getStepContent(activeStep)}
<div className={classes.buttons}>
<Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
{activeStep !== 0 && (
<Button onClick={handleBack} className={classes.button}>
<Button onClick={handleBack} sx={{ mt: 3, ml: 1 }}>
Back
</Button>
)}

<Button
variant="contained"
onClick={handleNext}
className={classes.button}
sx={{ mt: 3, ml: 1 }}
>
{activeStep === steps.length - 1 ? 'Place order' : 'Next'}
</Button>
</div>
</Box>
</React.Fragment>
)}
</React.Fragment>
Expand All @@ -157,10 +125,5 @@ function CheckoutContent() {
}

export default function Checkout() {
return (
// TODO: Remove ThemeProvider once makeStyles is removed
<ThemeProvider theme={defaultTheme}>
<CheckoutContent />
</ThemeProvider>
);
return <CheckoutContent />;
}
63 changes: 13 additions & 50 deletions docs/src/pages/getting-started/templates/checkout/Checkout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import * as React from 'react';
import { makeStyles } from '@material-ui/styles';
import { ThemeProvider, Theme, createTheme } from '@material-ui/core/styles';
import CssBaseline from '@material-ui/core/CssBaseline';
import AppBar from '@material-ui/core/AppBar';
import Box from '@material-ui/core/Box';
import Container from '@material-ui/core/Container';
import Toolbar from '@material-ui/core/Toolbar';
import Paper from '@material-ui/core/Paper';
Expand All @@ -29,37 +28,6 @@ function Copyright() {
);
}

const useStyles = makeStyles<Theme>((theme) => ({
appBar: {
position: 'relative',
borderBottom: `1px solid ${theme.palette.divider}`,
},
main: {
marginBottom: theme.spacing(4),
},
paper: {
marginTop: theme.spacing(3),
marginBottom: theme.spacing(3),
padding: theme.spacing(2),
[theme.breakpoints.up('md')]: {
marginTop: theme.spacing(6),
marginBottom: theme.spacing(6),
padding: theme.spacing(3),
},
},
stepper: {
padding: theme.spacing(3, 0, 5),
},
buttons: {
display: 'flex',
justifyContent: 'flex-end',
},
button: {
marginTop: theme.spacing(3),
marginLeft: theme.spacing(1),
},
}));

const steps = ['Shipping address', 'Payment details', 'Review your order'];

function getStepContent(step: number) {
Expand All @@ -75,10 +43,7 @@ function getStepContent(step: number) {
}
}

const defaultTheme = createTheme();

function CheckoutContent() {
const classes = useStyles();
const [activeStep, setActiveStep] = React.useState(0);

const handleNext = () => {
Expand All @@ -96,20 +61,23 @@ function CheckoutContent() {
position="absolute"
color="default"
elevation={0}
className={classes.appBar}
sx={{
position: 'relative',
borderBottom: (theme) => `1px solid ${theme.palette.divider}`,
}}
>
<Toolbar>
<Typography variant="h6" color="inherit" noWrap>
Company name
</Typography>
</Toolbar>
</AppBar>
<Container component="main" className={classes.main} maxWidth="sm">
<Paper className={classes.paper} variant="outlined">
<Container component="main" maxWidth="sm" sx={{ mb: 4 }}>
<Paper variant="outlined" sx={{ my: { xs: 3, md: 6 }, p: { xs: 2, md: 3 } }}>
<Typography component="h1" variant="h4" align="center">
Checkout
</Typography>
<Stepper activeStep={activeStep} className={classes.stepper}>
<Stepper activeStep={activeStep} sx={{ pt: 3, pb: 5 }}>
{steps.map((label) => (
<Step key={label}>
<StepLabel>{label}</StepLabel>
Expand All @@ -131,20 +99,20 @@ function CheckoutContent() {
) : (
<React.Fragment>
{getStepContent(activeStep)}
<div className={classes.buttons}>
<Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
{activeStep !== 0 && (
<Button onClick={handleBack} className={classes.button}>
<Button onClick={handleBack} sx={{ mt: 3, ml: 1 }}>
Back
</Button>
)}
<Button
variant="contained"
onClick={handleNext}
className={classes.button}
sx={{ mt: 3, ml: 1 }}
>
{activeStep === steps.length - 1 ? 'Place order' : 'Next'}
</Button>
</div>
</Box>
</React.Fragment>
)}
</React.Fragment>
Expand All @@ -156,10 +124,5 @@ function CheckoutContent() {
}

export default function Checkout() {
return (
// TODO: Remove ThemeProvider once makeStyles is removed
<ThemeProvider theme={defaultTheme}>
<CheckoutContent />
</ThemeProvider>
);
return <CheckoutContent />;
}
25 changes: 5 additions & 20 deletions docs/src/pages/getting-started/templates/checkout/Review.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import * as React from 'react';
import { makeStyles } from '@material-ui/styles';
import Typography from '@material-ui/core/Typography';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
Expand Down Expand Up @@ -38,51 +37,37 @@ const payments = [
{ name: 'Expiry date', detail: '04/2024' },
];

const useStyles = makeStyles((theme) => ({
listItem: {
padding: theme.spacing(1, 0),
},
total: {
fontWeight: 700,
},
title: {
marginTop: theme.spacing(2),
},
}));

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

return (
<React.Fragment>
<Typography variant="h6" gutterBottom>
Order summary
</Typography>
<List disablePadding>
{products.map((product) => (
<ListItem className={classes.listItem} key={product.name}>
<ListItem key={product.name} sx={{ py: 1, px: 0 }}>
<ListItemText primary={product.name} secondary={product.desc} />
<Typography variant="body2">{product.price}</Typography>
</ListItem>
))}

<ListItem className={classes.listItem}>
<ListItem sx={{ py: 1, px: 0 }}>
<ListItemText primary="Total" />
<Typography variant="subtitle1" className={classes.total}>
<Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
$34.06
</Typography>
</ListItem>
</List>
<Grid container spacing={2}>
<Grid item xs={12} sm={6}>
<Typography variant="h6" gutterBottom className={classes.title}>
<Typography variant="h6" gutterBottom sx={{ mt: 2 }}>
Shipping
</Typography>
<Typography gutterBottom>John Smith</Typography>
<Typography gutterBottom>{addresses.join(', ')}</Typography>
</Grid>
<Grid item container direction="column" xs={12} sm={6}>
<Typography variant="h6" gutterBottom className={classes.title}>
<Typography variant="h6" gutterBottom sx={{ mt: 2 }}>
Payment details
</Typography>
<Grid container>
Expand Down
26 changes: 5 additions & 21 deletions docs/src/pages/getting-started/templates/checkout/Review.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
import * as React from 'react';
import { makeStyles } from '@material-ui/styles';
import Typography from '@material-ui/core/Typography';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import Grid from '@material-ui/core/Grid';
import { Theme } from '@material-ui/core/styles';

const products = [
{
Expand Down Expand Up @@ -38,50 +36,36 @@ const payments = [
{ name: 'Expiry date', detail: '04/2024' },
];

const useStyles = makeStyles<Theme>((theme) => ({
listItem: {
padding: theme.spacing(1, 0),
},
total: {
fontWeight: 700,
},
title: {
marginTop: theme.spacing(2),
},
}));

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

return (
<React.Fragment>
<Typography variant="h6" gutterBottom>
Order summary
</Typography>
<List disablePadding>
{products.map((product) => (
<ListItem className={classes.listItem} key={product.name}>
<ListItem key={product.name} sx={{ py: 1, px: 0 }}>
<ListItemText primary={product.name} secondary={product.desc} />
<Typography variant="body2">{product.price}</Typography>
</ListItem>
))}
<ListItem className={classes.listItem}>
<ListItem sx={{ py: 1, px: 0 }}>
<ListItemText primary="Total" />
<Typography variant="subtitle1" className={classes.total}>
<Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
$34.06
</Typography>
</ListItem>
</List>
<Grid container spacing={2}>
<Grid item xs={12} sm={6}>
<Typography variant="h6" gutterBottom className={classes.title}>
<Typography variant="h6" gutterBottom sx={{ mt: 2 }}>
Shipping
</Typography>
<Typography gutterBottom>John Smith</Typography>
<Typography gutterBottom>{addresses.join(', ')}</Typography>
</Grid>
<Grid item container direction="column" xs={12} sm={6}>
<Typography variant="h6" gutterBottom className={classes.title}>
<Typography variant="h6" gutterBottom sx={{ mt: 2 }}>
Payment details
</Typography>
<Grid container>
Expand Down
Loading

0 comments on commit c5037ae

Please sign in to comment.