[docs] Convert App* components to emotion (#27150)

mui · Jul 20, 2021 · 19d81a3 · 19d81a3
1 parent a2867c9
commit 19d81a3
Show file tree

Hide file tree

Showing 10 changed files with 559 additions and 562 deletions.
diff --git a/docs/src/modules/components/AppContainer.js b/docs/src/modules/components/AppContainer.js
@@ -1,11 +1,9 @@
 import * as React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import { makeStyles } from '@material-ui/styles';
+import { styled } from '@material-ui/core/styles';
 import Container from '@material-ui/core/Container';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
+const StyledContainer = styled(Container)(({ theme }) => {
+  return {
     paddingTop: 80 + 16,
     [theme.breakpoints.up('md')]: {
       // We're mostly hosting text content so max-width by px does not make sense considering font-size is system-adjustable.
@@ -17,24 +15,9 @@ const useStyles = makeStyles((theme) => ({
       paddingLeft: theme.spacing(6),
       paddingRight: theme.spacing(6),
     },
-  },
-}));
+  };
+});
 
 export default function AppContainer(props) {
-  const { className, ...other } = props;
-  const classes = useStyles();
-
-  return (
-    <Container
-      id="main-content"
-      maxWidth={false}
-      tabIndex={-1}
-      className={clsx(classes.root, className)}
-      {...other}
-    />
-  );
+  return <StyledContainer id="main-content" maxWidth={false} tabIndex={-1} {...props} />;
 }
-
-AppContainer.propTypes = {
-  className: PropTypes.string,
-};
diff --git a/docs/src/modules/components/AppFooter.js b/docs/src/modules/components/AppFooter.js
@@ -1,27 +1,37 @@
 /* eslint-disable material-ui/no-hardcoded-labels */
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import Interpolate from '@trendmicro/react-interpolate';
-import { styled, createTheme } from '@material-ui/core/styles';
-import { withStyles } from '@material-ui/styles';
+import { styled } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import Grid from '@material-ui/core/Grid';
 import Container from '@material-ui/core/Container';
 import Divider from '@material-ui/core/Divider';
 import Link from 'docs/src/modules/components/Link';
 import { useUserLanguage, useTranslate } from 'docs/src/modules/utils/i18n';
 
-const styles = (theme) => ({
-  root: {
+const Badge = styled('span')(({ theme }) => ({
+  alignSelf: 'center',
+  padding: '1px 3px',
+  backgroundColor: theme.palette.mode === 'light' ? 'rgb(235, 87, 87)' : '#c55e5e',
+  color: '#fff',
+  borderRadius: 3,
+  marginLeft: 6,
+  fontSize: '10px',
+  lineHeight: '1.3',
+  textTransform: 'uppercase',
+  fontWeight: '600',
+  letterSpacing: '0.5px',
+  display: 'inline-block',
+}));
+
+const Root = styled('div')(({ theme }) => {
+  return {
     marginTop: theme.spacing(6),
-  },
-  footer: {
-    padding: theme.spacing(3, 0),
-    [theme.breakpoints.up('sm')]: {
-      padding: theme.spacing(8, 0),
-    },
-  },
-  logo: {
+  };
+});
+
+const Logo = styled('div')(({ theme }) => {
+  return {
     display: 'flex',
     alignItems: 'center',
     marginBottom: theme.spacing(4),
@@ -30,8 +40,11 @@ const styles = (theme) => ({
       height: 22,
       marginRight: theme.spacing(1.5),
     },
-  },
-  list: {
+  };
+});
+
+const ListGrid = styled(Grid)(({ theme }) => {
+  return {
     marginBottom: theme.spacing(4),
     '& h3': {
       fontWeight: theme.typography.fontWeightMedium,
@@ -45,51 +58,48 @@ const styles = (theme) => ({
       padding: '6px 0',
       color: theme.palette.text.secondary,
     },
-  },
-  version: {
+  };
+});
+
+const VersionTypography = styled(Typography)(({ theme }) => {
+  return {
     marginTop: theme.spacing(3),
-  },
-  careers: {
-    display: 'flex',
-  },
+  };
 });
 
-const Badge = styled('span')(({ theme }) => ({
-  alignSelf: 'center',
-  padding: '1px 3px',
-  backgroundColor: theme.palette.mode === 'light' ? 'rgb(235, 87, 87)' : '#c55e5e',
-  color: '#fff',
-  borderRadius: 3,
-  marginLeft: 6,
-  fontSize: '10px',
-  lineHeight: '1.3',
-  textTransform: 'uppercase',
-  fontWeight: '600',
-  letterSpacing: '0.5px',
-  display: 'inline-block',
-}));
+const CareersLi = styled('li')({
+  display: 'flex',
+});
+
+const Footer = styled('footer')(({ theme }) => {
+  return {
+    padding: theme.spacing(3, 0),
+    [theme.breakpoints.up('sm')]: {
+      padding: theme.spacing(8, 0),
+    },
+  };
+});
 
-function AppFooter(props) {
-  const { classes } = props;
+export default function AppFooter() {
   const userLanguage = useUserLanguage();
   const languagePrefix = userLanguage === 'en' ? '' : `/${userLanguage}`;
   const t = useTranslate();
 
   return (
-    <div className={classes.root}>
+    <Root>
       <Divider />
       <Container maxWidth="md">
-        <footer className={classes.footer}>
+        <Footer>
           <Grid container>
             <Grid item xs={12} sm={3}>
-              <div className={classes.logo}>
+              <Logo>
                 <img src="/static/logo_raw.svg" alt="" />
                 <Link underline="hover" variant="body1" color="inherit" href="/">
                   Material-UI
                 </Link>
-              </div>
+              </Logo>
             </Grid>
-            <Grid item xs={6} sm={3} className={classes.list}>
+            <ListGrid item xs={6} sm={3}>
               <Typography component="h2" gutterBottom>
                 {t('footerCommunity')}
               </Typography>
@@ -135,8 +145,8 @@ function AppFooter(props) {
                   </Link>
                 </li>
               </ul>
-            </Grid>
-            <Grid item xs={6} sm={3} className={classes.list}>
+            </ListGrid>
+            <ListGrid item xs={6} sm={3}>
               <Typography component="h2" gutterBottom>
                 {t('footerResources')}
               </Typography>
@@ -172,8 +182,8 @@ function AppFooter(props) {
                   </Link>
                 </li>
               </ul>
-            </Grid>
-            <Grid item xs={6} sm={3} className={classes.list}>
+            </ListGrid>
+            <ListGrid item xs={6} sm={3}>
               <Typography component="h2" gutterBottom>
                 {t('footerCompany')}
               </Typography>
@@ -188,18 +198,18 @@ function AppFooter(props) {
                     Contact Us
                   </Link>
                 </li>
-                <li className={classes.careers}>
+                <CareersLi>
                   <Link underline="hover" color="inherit" variant="body2" href="/company/careers/">
                     Careers
                   </Link>
                   <Link underline="hover" color="inherit" variant="body2" href="/company/careers/">
                     <Badge>hiring</Badge>
                   </Link>
-                </li>
+                </CareersLi>
               </ul>
-            </Grid>
+            </ListGrid>
           </Grid>
-          <Typography className={classes.version} color="text.secondary" variant="body2">
+          <VersionTypography color="text.secondary" variant="body2">
             <Interpolate
               replacement={{
                 versionNumber: (
@@ -226,16 +236,9 @@ function AppFooter(props) {
             {' Copyright © '}
             {new Date().getFullYear()}
             {' Material-UI. '}
-          </Typography>
-        </footer>
+          </VersionTypography>
+        </Footer>
       </Container>
-    </div>
+    </Root>
   );
 }
-
-AppFooter.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-const defaultTheme = createTheme();
-export default withStyles(styles, { defaultTheme })(AppFooter);