[docs] Extract landing-only modules (#20187)

mui · Mar 20, 2020 · 8d12012 · 8d12012
1 parent 994dd2a
commit 8d12012
Show file tree

Hide file tree

Showing 19 changed files with 342 additions and 357 deletions.
diff --git a/docs/pages/index.js b/docs/pages/index.js
@@ -4,13 +4,13 @@ import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
 import Container from '@material-ui/core/Container';
-import HomeSteps from 'docs/src/modules/components/HomeSteps';
-import HomeThemes from 'docs/src/modules/components/HomeThemes';
-import HomeQuickWord from 'docs/src/modules/components/HomeQuickWord';
-import HomeSponsors from 'docs/src/modules/components/HomeSponsors';
-import HomeUsers from 'docs/src/modules/components/HomeUsers';
-import HomeQuotes from 'docs/src/modules/components/HomeQuotes';
-import HomePro from 'docs/src/modules/components/HomePro';
+import Steps from 'docs/src/pages/landing/Steps';
+import Themes from 'docs/src/pages/landing/Themes';
+import QuickWord from 'docs/src/pages/landing/QuickWord';
+import Sponsors from 'docs/src/pages/landing/Sponsors';
+import Users from 'docs/src/pages/landing/Users';
+import Quotes from 'docs/src/pages/landing/Quotes';
+import Pro from 'docs/src/pages/landing/Pro';
 import AppFooter from 'docs/src/modules/components/AppFooter';
 import AppFrame from 'docs/src/modules/components/AppFrame';
 import Link from 'docs/src/modules/components/Link';
@@ -30,75 +30,78 @@ function loadDependencies() {
   loadScript('https://platform.twitter.com/widgets.js', document.querySelector('head'));
 }
 
-const useStyles = makeStyles(theme => ({
-  root: {
-    flex: '1 0 100%',
-  },
-  hero: {
-    paddingTop: theme.spacing(8),
-    color: theme.palette.primary.main,
-  },
-  content: {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    textAlign: 'center',
-    paddingTop: theme.spacing(4),
-    paddingBottom: theme.spacing(8),
-    [theme.breakpoints.up('md')]: {
-      paddingTop: theme.spacing(16),
-      paddingBottom: theme.spacing(16),
-      flexDirection: 'row',
-      alignItems: 'flex-start',
-      textAlign: 'left',
+const useStyles = makeStyles(
+  theme => ({
+    root: {
+      flex: '1 0 100%',
     },
-  },
-  title: {
-    marginLeft: -12,
-    whiteSpace: 'nowrap',
-    letterSpacing: '.7rem',
-    textIndent: '.7rem',
-    fontWeight: theme.typography.fontWeightLight,
-    [theme.breakpoints.only('xs')]: {
-      fontSize: 28,
+    hero: {
+      paddingTop: theme.spacing(8),
+      color: theme.palette.primary.main,
     },
-  },
-  logo: {
-    flexShrink: 0,
-    width: 120,
-    height: 120,
-    marginBottom: theme.spacing(2),
-    [theme.breakpoints.up('md')]: {
-      marginRight: theme.spacing(8),
-      width: 195,
-      height: 175,
-    },
-  },
-  button: {
-    marginTop: theme.spacing(4),
-  },
-  social: {
-    padding: theme.spacing(2, 0),
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    minHeight: 21,
-    boxSizing: 'content-box',
-    '& span': {
+    content: {
       display: 'flex',
-      marginRight: theme.spacing(1),
+      flexDirection: 'column',
+      alignItems: 'center',
+      textAlign: 'center',
+      paddingTop: theme.spacing(4),
+      paddingBottom: theme.spacing(8),
+      [theme.breakpoints.up('md')]: {
+        paddingTop: theme.spacing(16),
+        paddingBottom: theme.spacing(16),
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        textAlign: 'left',
+      },
+    },
+    title: {
+      marginLeft: -12,
+      whiteSpace: 'nowrap',
+      letterSpacing: '.7rem',
+      textIndent: '.7rem',
+      fontWeight: theme.typography.fontWeightLight,
+      [theme.breakpoints.only('xs')]: {
+        fontSize: 28,
+      },
+    },
+    logo: {
+      flexShrink: 0,
+      width: 120,
+      height: 120,
+      marginBottom: theme.spacing(2),
+      [theme.breakpoints.up('md')]: {
+        marginRight: theme.spacing(8),
+        width: 195,
+        height: 175,
+      },
     },
-    '& a': {
-      color: theme.palette.background.paper,
+    button: {
+      marginTop: theme.spacing(4),
+    },
+    social: {
+      padding: theme.spacing(2, 0),
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      minHeight: 21,
+      boxSizing: 'content-box',
+      '& span': {
+        display: 'flex',
+        marginRight: theme.spacing(1),
+      },
+      '& a': {
+        color: theme.palette.background.paper,
+      },
     },
-  },
-}));
+  }),
+  { name: 'LandingPage' },
+);
 
 const GettingStartedLink = React.forwardRef((props, ref) => {
   return <Link href="/getting-started/installation" naked ref={ref} {...props} />;
 });
 
-export default function HomePage() {
+export default function LandingPage() {
   React.useEffect(() => {
     if (window.location.hash !== '' && window.location.hash !== '#main=content') {
       window.location.replace(`https://v0.material-ui.com/${window.location.hash}`);
@@ -158,13 +161,13 @@ export default function HomePage() {
               Follow
             </a>
           </div>
-          <HomePro />
-          <HomeQuickWord />
-          <HomeSteps />
-          <HomeThemes />
-          <HomeSponsors />
-          <HomeQuotes />
-          <HomeUsers />
+          <Pro />
+          <QuickWord />
+          <Steps />
+          <Themes />
+          <Sponsors />
+          <Quotes />
+          <Users />
         </main>
         <AppFooter />
       </div>

diff --git a/docs/src/modules/components/HomePro.js b/docs/src/modules/components/HomePro.js
diff --git a/docs/src/pages/landing/Pro.js b/docs/src/pages/landing/Pro.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import classNames from 'classnames';
+import { makeStyles } from '@material-ui/core/styles';
+import Link from 'docs/src/modules/components/Link';
+import { useSelector } from 'react-redux';
+
+const useStyles = makeStyles(
+  theme => ({
+    root: {
+      padding: theme.spacing(1, 2, 1, 2),
+      right: 0,
+      left: 0,
+      color: theme.palette.common.white,
+      backgroundColor: '#626980',
+      position: 'relative',
+      display: 'none',
+      [theme.breakpoints.up('sm')]: {
+        display: 'flex',
+        top: 100,
+        left: 'auto',
+        position: 'absolute',
+        borderBottomLeftRadius: 36 / 2,
+        borderTopLeftRadius: 36 / 2,
+      },
+    },
+  }),
+  { name: 'Pro' },
+);
+
+export default function Pro() {
+  const classes = useStyles();
+  const t = useSelector(state => state.options.t);
+
+  return (
+    <Link
+      variant="body2"
+      className={classNames(classes.root, 'mui-fixed')}
+      href="/getting-started/support/#professional-support-premium"
+    >
+      {t('getProfessionalSupport')}
+    </Link>
+  );
+}
diff --git a/docs/src/modules/components/HomeQuickWord.js → docs/src/pages/landing/QuickWord.js b/docs/src/modules/components/HomeQuickWord.js → docs/src/pages/landing/QuickWord.js
@@ -1,7 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import NoSsr from '@material-ui/core/NoSsr';
 import Link from 'docs/src/modules/components/Link';
@@ -25,16 +24,19 @@ const backers = [
   },
 ];
 
-const styles = theme => ({
-  root: {
-    textAlign: 'center',
-    minHeight: 60,
-    paddingBottom: theme.spacing(2),
-  },
-});
+const useStyles = makeStyles(
+  theme => ({
+    root: {
+      textAlign: 'center',
+      minHeight: 60,
+      paddingBottom: theme.spacing(2),
+    },
+  }),
+  { name: 'QuickWord' },
+);
 
-function HomeQuickWord(props) {
-  const { classes } = props;
+export default function QuickWord() {
+  const classes = useStyles();
   const t = useSelector(state => state.options.t);
   const backer = backers[Math.floor(backers.length * Math.random())];
 
@@ -58,9 +60,3 @@ function HomeQuickWord(props) {
     </div>
   );
 }
-
-HomeQuickWord.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(HomeQuickWord);