diff --git a/docs/pages/index.js b/docs/pages/index.js
index fc97aead4d9689..46f4e3d356b845 100644
--- 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 ;
});
-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
-
-
-
-
-
-
-
+
+
+
+
+
+
+
diff --git a/docs/src/modules/components/HomePro.js b/docs/src/modules/components/HomePro.js
deleted file mode 100644
index a6cd80e29cc2d5..00000000000000
--- a/docs/src/modules/components/HomePro.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { withStyles } from '@material-ui/core/styles';
-import Link from 'docs/src/modules/components/Link';
-import { useSelector } from 'react-redux';
-
-const styles = 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,
- },
- },
-});
-
-function HomePro(props) {
- const { classes } = props;
- const t = useSelector(state => state.options.t);
-
- return (
-
- {t('getProfessionalSupport')}
-
- );
-}
-
-HomePro.propTypes = {
- classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(HomePro);
diff --git a/docs/src/pages/landing/Pro.js b/docs/src/pages/landing/Pro.js
new file mode 100644
index 00000000000000..709c37f94b40f0
--- /dev/null
+++ 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 (
+
+ {t('getProfessionalSupport')}
+
+ );
+}
diff --git a/docs/src/modules/components/HomeQuickWord.js b/docs/src/pages/landing/QuickWord.js
similarity index 77%
rename from docs/src/modules/components/HomeQuickWord.js
rename to docs/src/pages/landing/QuickWord.js
index a48512b901d300..ed50fbd335ee21 100644
--- a/docs/src/modules/components/HomeQuickWord.js
+++ b/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) {
);
}
-
-HomeQuickWord.propTypes = {
- classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(HomeQuickWord);
diff --git a/docs/src/modules/components/HomeQuotes.js b/docs/src/pages/landing/Quotes.js
similarity index 83%
rename from docs/src/modules/components/HomeQuotes.js
rename to docs/src/pages/landing/Quotes.js
index eac3a24d63b9e2..3d36e45fe110d7 100644
--- a/docs/src/modules/components/HomeQuotes.js
+++ b/docs/src/pages/landing/Quotes.js
@@ -65,57 +65,63 @@ const quotes = [
},
];
-const useStyles = makeStyles(theme => ({
- root: {
- minHeight: 160,
- paddingTop: theme.spacing(5),
- margin: theme.spacing(0, 2),
- },
- container: {
- marginBottom: theme.spacing(4),
- },
- users: {
- padding: theme.spacing(10, 0, 0),
- },
- grid: {
- marginTop: theme.spacing(5),
- marginBottom: theme.spacing(5),
- },
- img: {
- margin: theme.spacing(1.5, 3),
- },
- button: {
- margin: theme.spacing(2, 0, 0),
- },
-}));
+const useStyles = makeStyles(
+ theme => ({
+ root: {
+ minHeight: 160,
+ paddingTop: theme.spacing(5),
+ margin: theme.spacing(0, 2),
+ },
+ container: {
+ marginBottom: theme.spacing(4),
+ },
+ users: {
+ padding: theme.spacing(10, 0, 0),
+ },
+ grid: {
+ marginTop: theme.spacing(5),
+ marginBottom: theme.spacing(5),
+ },
+ img: {
+ margin: theme.spacing(1.5, 3),
+ },
+ button: {
+ margin: theme.spacing(2, 0, 0),
+ },
+ }),
+ { name: 'Quotes' },
+);
-const useQuoteStyles = makeStyles(theme => ({
- card: {
- display: 'flex',
- flexDirection: 'column',
- height: '100%',
- },
- cardAction: {
- height: '100%',
- },
- avatar: {
- width: 48,
- height: 48,
- },
- twitter: {
- marginLeft: 'auto',
- color: theme.palette.primary.light,
- },
- name: {
- fontSize: 16,
- },
- quote: {
- paddingBottom: '16px !important',
- paddingTop: 0,
- },
-}));
+const useQuoteStyles = makeStyles(
+ theme => ({
+ card: {
+ display: 'flex',
+ flexDirection: 'column',
+ height: '100%',
+ },
+ cardAction: {
+ height: '100%',
+ },
+ avatar: {
+ width: 48,
+ height: 48,
+ },
+ twitter: {
+ marginLeft: 'auto',
+ color: theme.palette.primary.light,
+ },
+ name: {
+ fontSize: 16,
+ },
+ quote: {
+ paddingBottom: '16px !important',
+ paddingTop: 0,
+ },
+ }),
+ { name: 'HomeQuote' },
+);
-const HomeQuoteLink = React.forwardRef((props, ref) => {
+const QuoteLink = React.forwardRef((props, ref) => {
return (
{
);
});
-function HomeQuote(props) {
+function Quote(props) {
const { avatar, href, name, quote, userName } = props;
const classes = useQuoteStyles();
return (
-
+
@@ -165,7 +171,7 @@ function HomeQuote(props) {
);
}
-HomeQuote.propTypes = {
+Quote.propTypes = {
avatar: PropTypes.string,
href: PropTypes.string,
name: PropTypes.string,
@@ -179,7 +185,7 @@ for (let i = 0; i < 3; i += 1) {
selectedQuotes.push(quotes[(startIndex + i) % quotes.length]);
}
-function HomeQuotes() {
+export default function Quotes() {
const classes = useStyles();
const t = useSelector(state => state.options.t);
@@ -198,7 +204,7 @@ function HomeQuotes() {
{selectedQuotes.map(quote => (
-
);
}
-
-export default HomeQuotes;
diff --git a/docs/src/modules/components/HomeSponsors.js b/docs/src/pages/landing/Sponsors.js
similarity index 55%
rename from docs/src/modules/components/HomeSponsors.js
rename to docs/src/pages/landing/Sponsors.js
index 2089adc972ab33..8646e066b11f12 100644
--- a/docs/src/modules/components/HomeSponsors.js
+++ b/docs/src/pages/landing/Sponsors.js
@@ -1,35 +1,37 @@
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 NoSsr from '@material-ui/core/NoSsr';
import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
import Container from '@material-ui/core/Container';
import Divider from '@material-ui/core/Divider';
import mapTranslations from 'docs/src/modules/utils/mapTranslations';
-const req = require.context('docs/src/modules/components', false, /\.md$/);
+const req = require.context('./', false, /\.md$/);
const backers = mapTranslations(req, 'md');
-const styles = theme => ({
- '@global': {
- '.anchor-link-style': {
- position: 'absolute',
- top: -9999,
- left: -9999,
+const useStyles = makeStyles(
+ theme => ({
+ '@global': {
+ '.anchor-link-style': {
+ position: 'absolute',
+ top: -9999,
+ left: -9999,
+ },
},
- },
- root: {
- minHeight: 600,
- textAlign: 'center',
- },
- markdownElement: {
- padding: theme.spacing(4, 0),
- },
-});
+ root: {
+ minHeight: 600,
+ textAlign: 'center',
+ },
+ markdownElement: {
+ padding: theme.spacing(4, 0),
+ },
+ }),
+ { name: 'Sponsors' },
+);
-function HomeSponsors(props) {
- const { classes } = props;
+export default function Sponsors() {
+ const classes = useStyles();
const userLanguage = useSelector(state => state.options.userLanguage);
return (
@@ -43,9 +45,3 @@ function HomeSponsors(props) {
);
}
-
-HomeSponsors.propTypes = {
- classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(HomeSponsors);
diff --git a/docs/src/modules/components/HomeSteps.js b/docs/src/pages/landing/Steps.js
similarity index 70%
rename from docs/src/modules/components/HomeSteps.js
rename to docs/src/pages/landing/Steps.js
index 84d7a5cc72a7d2..e7ad87d851e7a4 100644
--- a/docs/src/modules/components/HomeSteps.js
+++ b/docs/src/pages/landing/Steps.js
@@ -1,8 +1,7 @@
import React from 'react';
-import PropTypes from 'prop-types';
import clsx from 'clsx';
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 Container from '@material-ui/core/Container';
import Grid from '@material-ui/core/Grid';
@@ -21,67 +20,70 @@ const UsageLink = React.forwardRef((buttonProps, ref) => (
));
-const styles = theme => ({
- root: {
- marginTop: theme.spacing(5),
- '& pre': {
- margin: theme.spacing(1, 0),
+const useStyles = makeStyles(
+ theme => ({
+ root: {
+ marginTop: theme.spacing(5),
+ '& pre': {
+ margin: theme.spacing(1, 0),
+ },
},
- },
- step: {
- border: `12px solid ${theme.palette.background.level1}`,
- borderRightWidth: 0,
- borderLeftWidth: 0,
- padding: theme.spacing(2),
- backgroundColor: theme.palette.background.level2,
- [theme.breakpoints.up('md')]: {
- padding: theme.spacing(3),
+ step: {
+ border: `12px solid ${theme.palette.background.level1}`,
+ borderRightWidth: 0,
+ borderLeftWidth: 0,
+ padding: theme.spacing(2),
+ backgroundColor: theme.palette.background.level2,
+ [theme.breakpoints.up('md')]: {
+ padding: theme.spacing(3),
+ },
},
- },
- leftStep: {
- [theme.breakpoints.up('md')]: {
- borderLeftWidth: 12,
- borderRightWidth: 6,
+ leftStep: {
+ [theme.breakpoints.up('md')]: {
+ borderLeftWidth: 12,
+ borderRightWidth: 6,
+ borderBottomWidth: 0,
+ },
+ },
+ rightStep: {
borderBottomWidth: 0,
+ [theme.breakpoints.up('md')]: {
+ borderLeftWidth: 6,
+ borderRightWidth: 12,
+ },
+ },
+ stepTitle: {
+ display: 'flex',
+ marginBottom: theme.spacing(3),
+ alignItems: 'center',
+ },
+ stepIcon: {
+ color: theme.palette.primary.main,
+ marginRight: theme.spacing(2),
+ fontSize: 30,
+ },
+ stepBody: {
+ minHeight: 270,
},
- },
- rightStep: {
- borderBottomWidth: 0,
- [theme.breakpoints.up('md')]: {
- borderLeftWidth: 6,
- borderRightWidth: 12,
+ divider: {
+ marginTop: theme.spacing(4),
+ marginBottom: theme.spacing(2),
},
- },
- stepTitle: {
- display: 'flex',
- marginBottom: theme.spacing(3),
- alignItems: 'center',
- },
- stepIcon: {
- color: theme.palette.primary.main,
- marginRight: theme.spacing(2),
- fontSize: 30,
- },
- stepBody: {
- minHeight: 270,
- },
- divider: {
- marginTop: theme.spacing(4),
- marginBottom: theme.spacing(2),
- },
- link: {
- marginTop: theme.spacing(1),
- display: 'block',
- },
- img: {
- maxWidth: 500,
- width: '100%',
- height: 'auto',
- },
-});
+ link: {
+ marginTop: theme.spacing(1),
+ display: 'block',
+ },
+ img: {
+ maxWidth: 500,
+ width: '100%',
+ height: 'auto',
+ },
+ }),
+ { name: 'Steps' },
+);
-function HomeSteps(props) {
- const { classes } = props;
+function HomeSteps() {
+ const classes = useStyles();
const t = useSelector(state => state.options.t);
return (
@@ -159,8 +161,4 @@ function App() {
);
}
-HomeSteps.propTypes = {
- classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(HomeSteps);
+export default HomeSteps;
diff --git a/docs/src/modules/components/HomeThemes.js b/docs/src/pages/landing/Themes.js
similarity index 75%
rename from docs/src/modules/components/HomeThemes.js
rename to docs/src/pages/landing/Themes.js
index 0b1ccc4a7cbe66..e8592658c24d00 100644
--- a/docs/src/modules/components/HomeThemes.js
+++ b/docs/src/pages/landing/Themes.js
@@ -1,7 +1,6 @@
import React from 'react';
-import PropTypes from 'prop-types';
import { useSelector } from 'react-redux';
-import { withStyles, useTheme } from '@material-ui/core/styles';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import Container from '@material-ui/core/Container';
import Grid from '@material-ui/core/Grid';
@@ -9,27 +8,30 @@ import Button from '@material-ui/core/Button';
import NoSsr from '@material-ui/core/NoSsr';
import Link from 'docs/src/modules/components/Link';
-const styles = theme => ({
- root: {
- padding: theme.spacing(2),
- minHeight: 160,
- marginTop: theme.spacing(8),
- },
+const useStyles = makeStyles(
+ theme => ({
+ root: {
+ padding: theme.spacing(2),
+ minHeight: 160,
+ marginTop: theme.spacing(8),
+ },
- link: {
- marginTop: theme.spacing(1),
- display: 'block',
- },
- img: {
- maxWidth: 960,
- width: '100%',
- height: 'auto',
- marginTop: theme.spacing(4),
- },
- button: {
- margin: theme.spacing(4, 0, 6),
- },
-});
+ link: {
+ marginTop: theme.spacing(1),
+ display: 'block',
+ },
+ img: {
+ maxWidth: 960,
+ width: '100%',
+ height: 'auto',
+ marginTop: theme.spacing(4),
+ },
+ button: {
+ margin: theme.spacing(4, 0, 6),
+ },
+ }),
+ { name: 'Themes' },
+);
const PremiumThemesLink = React.forwardRef((props, ref) => {
return (
@@ -45,8 +47,8 @@ const PremiumThemesLink = React.forwardRef((props, ref) => {
);
});
-function HomeThemes(props) {
- const { classes } = props;
+export default function Themes() {
+ const classes = useStyles();
const t = useSelector(state => state.options.t);
const theme = useTheme();
@@ -88,9 +90,3 @@ function HomeThemes(props) {
);
}
-
-HomeThemes.propTypes = {
- classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(HomeThemes);
diff --git a/docs/src/modules/components/HomeUsers.js b/docs/src/pages/landing/Users.js
similarity index 78%
rename from docs/src/modules/components/HomeUsers.js
rename to docs/src/pages/landing/Users.js
index 4663ff2af4353a..a17ad2988a8485 100644
--- a/docs/src/modules/components/HomeUsers.js
+++ b/docs/src/pages/landing/Users.js
@@ -1,8 +1,7 @@
import React from 'react';
-import PropTypes from 'prop-types';
import clsx from 'clsx';
import { useSelector } from 'react-redux';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
import NoSsr from '@material-ui/core/NoSsr';
import Divider from '@material-ui/core/Divider';
import Grid from '@material-ui/core/Grid';
@@ -83,44 +82,47 @@ const users = [
},
];
-const styles = theme => ({
- root: {
- padding: theme.spacing(2),
- minHeight: 160,
- paddingTop: theme.spacing(5),
- },
- container: {
- marginBottom: theme.spacing(4),
- },
- users: {
- padding: theme.spacing(10, 4, 0),
- },
- grid: {
- marginTop: theme.spacing(5),
- marginBottom: theme.spacing(5),
- },
- img: {
- margin: theme.spacing(1.5, 3),
- },
- amazon: {
- margin: theme.spacing(2.4, 3, 1.5),
- },
- coursera: {
- margin: theme.spacing(2.3, 3, 1.5),
- },
- unity: {
- margin: theme.spacing(0.5, 3, 1.5),
- },
- walmart: {
- margin: '13px 4px 12px',
- },
- button: {
- margin: theme.spacing(2, 0, 0),
- },
-});
+const useStyles = makeStyles(
+ theme => ({
+ root: {
+ padding: theme.spacing(2),
+ minHeight: 160,
+ paddingTop: theme.spacing(5),
+ },
+ container: {
+ marginBottom: theme.spacing(4),
+ },
+ users: {
+ padding: theme.spacing(10, 4, 0),
+ },
+ grid: {
+ marginTop: theme.spacing(5),
+ marginBottom: theme.spacing(5),
+ },
+ img: {
+ margin: theme.spacing(1.5, 3),
+ },
+ amazon: {
+ margin: theme.spacing(2.4, 3, 1.5),
+ },
+ coursera: {
+ margin: theme.spacing(2.3, 3, 1.5),
+ },
+ unity: {
+ margin: theme.spacing(0.5, 3, 1.5),
+ },
+ walmart: {
+ margin: '13px 4px 12px',
+ },
+ button: {
+ margin: theme.spacing(2, 0, 0),
+ },
+ }),
+ { name: 'Users' },
+);
-function HomeUsers(props) {
- const { classes } = props;
+export default function Users() {
+ const classes = useStyles();
const t = useSelector(state => state.options.t);
return (
@@ -168,9 +170,3 @@ function HomeUsers(props) {
);
}
-
-HomeUsers.propTypes = {
- classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(HomeUsers);
diff --git a/docs/src/modules/components/backers-aa.md b/docs/src/pages/landing/backers-aa.md
similarity index 100%
rename from docs/src/modules/components/backers-aa.md
rename to docs/src/pages/landing/backers-aa.md
diff --git a/docs/src/modules/components/backers-de.md b/docs/src/pages/landing/backers-de.md
similarity index 100%
rename from docs/src/modules/components/backers-de.md
rename to docs/src/pages/landing/backers-de.md
diff --git a/docs/src/modules/components/backers-es.md b/docs/src/pages/landing/backers-es.md
similarity index 100%
rename from docs/src/modules/components/backers-es.md
rename to docs/src/pages/landing/backers-es.md
diff --git a/docs/src/modules/components/backers-fr.md b/docs/src/pages/landing/backers-fr.md
similarity index 100%
rename from docs/src/modules/components/backers-fr.md
rename to docs/src/pages/landing/backers-fr.md
diff --git a/docs/src/modules/components/backers-ja.md b/docs/src/pages/landing/backers-ja.md
similarity index 100%
rename from docs/src/modules/components/backers-ja.md
rename to docs/src/pages/landing/backers-ja.md
diff --git a/docs/src/modules/components/backers-pt.md b/docs/src/pages/landing/backers-pt.md
similarity index 100%
rename from docs/src/modules/components/backers-pt.md
rename to docs/src/pages/landing/backers-pt.md
diff --git a/docs/src/modules/components/backers-ru.md b/docs/src/pages/landing/backers-ru.md
similarity index 100%
rename from docs/src/modules/components/backers-ru.md
rename to docs/src/pages/landing/backers-ru.md
diff --git a/docs/src/modules/components/backers-zh.md b/docs/src/pages/landing/backers-zh.md
similarity index 100%
rename from docs/src/modules/components/backers-zh.md
rename to docs/src/pages/landing/backers-zh.md
diff --git a/docs/src/modules/components/backers.md b/docs/src/pages/landing/backers.md
similarity index 100%
rename from docs/src/modules/components/backers.md
rename to docs/src/pages/landing/backers.md
diff --git a/test/regressions/index.js b/test/regressions/index.js
index a75bf59914fa91..81eb74c7bb0e88 100644
--- a/test/regressions/index.js
+++ b/test/regressions/index.js
@@ -42,7 +42,6 @@ const blacklist = [
'docs-components-badges/BadgeAlignment.png', // Redux isolation
'docs-components-badges/BadgeVisibility.png', // Needs interaction
'docs-components-breadcrumbs/ActiveLastBreadcrumb.png', // Redundant
- 'docs-components-buttons/ButtonBases.png', // Flaky image loading
'docs-components-chips/ChipsPlayground.png', // Redux isolation
'docs-components-click-away-listener', // Needs interaction
'docs-components-container', // Can't see the impact
@@ -120,6 +119,7 @@ const blacklist = [
'docs-getting-started-templates-sign-in-side/SignInSide.png', // Flaky
'docs-getting-started-usage/Usage.png', // No public components
/^docs-guides-.*/, // No public components
+ 'docs-landing', // Mostly images, redundant
'docs-styles-advanced', // Redudant
'docs-system-borders', // Unit tests are enough
'docs-system-display', // Unit tests are enough