[docs] Add example layouts (#12410)

* WIP layouts * Add chart and table * Add Layouts section, ImageOptimize some screenshots * Add fullScreen option to withRoot * fix content overflow * Fix the responsive chart width * Add Head to page * don't disable carbon * Simplfy the layout card * Add albumn * Improve the layout * Add albumn to layouts page, better image strategy * Add pricing layout * major happeningss * Add READMEs * Enhance checkout layout * Fix map keys * Update and optimze screenshots * Resolve yarn.lock conflict * Fix size limit * having a look at the implementation
mui · Aug 5, 2018 · 876cc40 · 876cc40
1 parent b8cc7f8
commit 876cc40
Show file tree

Hide file tree

Showing 49 changed files with 2,452 additions and 119 deletions.
diff --git a/.size-limit.js b/.size-limit.js
@@ -33,7 +33,7 @@ module.exports = [
     name: 'The main bundle of the docs',
     webpack: false,
     path: getMainFile().path,
-    limit: '180 KB',
+    limit: '181 KB',
   },
   {
     name: 'The home page of the docs',

diff --git a/docs/src/modules/components/AppDrawer.js b/docs/src/modules/components/AppDrawer.js
@@ -62,7 +62,7 @@ function reduceChildRoutes({ props, activePage, items, page, depth }) {
 
   if (page.children && page.children.length > 1) {
     const title = pageToTitle(page);
-    const openImmediately = activePage.pathname.indexOf(page.pathname) === 0;
+    const openImmediately = activePage.pathname.indexOf(`${page.pathname}/`) === 0;
 
     items.push(
       <AppDrawerNavItem depth={depth} key={title} openImmediately={openImmediately} title={title}>

diff --git a/docs/src/modules/components/AppFrame.js b/docs/src/modules/components/AppFrame.js
@@ -10,6 +10,7 @@ import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
 import IconButton from '@material-ui/core/IconButton';
 import Tooltip from '@material-ui/core/Tooltip';
+import CssBaseline from '@material-ui/core/CssBaseline';
 import MenuIcon from '@material-ui/icons/Menu';
 import ColorsIcon from '@material-ui/icons/InvertColors';
 import LightbulbOutlineIcon from '@material-ui/docs/svgIcons/LightbulbOutline';
@@ -131,6 +132,7 @@ class AppFrame extends React.Component {
     return (
       <div className={classes.root}>
         <NProgressBar />
+        <CssBaseline />
         <AppBar className={appBarClassName}>
           <Toolbar>
             <IconButton
@@ -220,9 +222,7 @@ AppFrame.contextTypes = {
 };
 
 export default compose(
-  withStyles(styles, {
-    name: 'AppFrame',
-  }),
+  withStyles(styles),
   connect(state => ({
     uiTheme: state.theme,
   })),

diff --git a/docs/src/modules/components/AppWrapper.js b/docs/src/modules/components/AppWrapper.js
@@ -4,11 +4,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { MuiThemeProvider } from '@material-ui/core/styles';
-import CssBaseline from '@material-ui/core/CssBaseline';
 import JssProvider from 'react-jss/lib/JssProvider';
 import { lightTheme, darkTheme, setPrismTheme } from '@material-ui/docs/MarkdownElement/prism';
 import getPageContext, { updatePageContext } from 'docs/src/modules/styles/getPageContext';
-import AppFrame from 'docs/src/modules/components/AppFrame';
 import GoogleTag from 'docs/src/modules/components/GoogleTag';
 
 // Inject the insertion-point-jss after docssearch
@@ -87,8 +85,7 @@ class AppWrapper extends React.Component {
         generateClassName={pageContext.generateClassName}
       >
         <MuiThemeProvider theme={pageContext.theme} sheetsManager={pageContext.sheetsManager}>
-          <CssBaseline />
-          <AppFrame>{children}</AppFrame>
+          {children}
           <GoogleTag />
         </MuiThemeProvider>
       </JssProvider>

diff --git a/docs/src/modules/components/MarkdownDocs.js b/docs/src/modules/components/MarkdownDocs.js
@@ -9,6 +9,7 @@ import Head from 'docs/src/modules/components/Head';
 import AppContent from 'docs/src/modules/components/AppContent';
 import Demo from 'docs/src/modules/components/Demo';
 import Carbon from 'docs/src/modules/components/Carbon';
+import AppFrame from 'docs/src/modules/components/AppFrame';
 import {
   getHeaders,
   getContents,
@@ -57,57 +58,61 @@ function MarkdownDocs(props, context) {
   const section = markdownLocation.split('/')[4];
 
   return (
-    <AppContent className={classes.root}>
-      <Head
-        title={`${headers.title || getTitle(markdown)} - Material-UI`}
-        description={getDescription(markdown)}
-      />
-      <div className={classes.header}>
-        <Button component="a" href={`${SOURCE_CODE_ROOT_URL}${markdownLocation}`}>
-          {'Edit this page'}
-        </Button>
-      </div>
-      {disableCarbon ? null : <Carbon key={markdownLocation} />}
-      {contents.map((content, index) => {
-        const match = content.match(demoRegexp);
-
-        if (match && demos) {
-          const demoOptions = JSON.parse(`{${content}}`);
-
-          const name = demoOptions.demo;
-          warning(demos && demos[name], `Missing demo: ${name}.`);
+    <AppFrame>
+      <AppContent className={classes.root}>
+        <Head
+          title={`${headers.title || getTitle(markdown)} - Material-UI`}
+          description={getDescription(markdown)}
+        />
+        <div className={classes.header}>
+          <Button component="a" href={`${SOURCE_CODE_ROOT_URL}${markdownLocation}`}>
+            {'Edit this page'}
+          </Button>
+        </div>
+        {disableCarbon ? null : <Carbon key={markdownLocation} />}
+        {contents.map((content, index) => {
+          const match = content.match(demoRegexp);
+
+          if (match && demos) {
+            const demoOptions = JSON.parse(`{${content}}`);
+
+            const name = demoOptions.demo;
+            warning(demos && demos[name], `Missing demo: ${name}.`);
+            return (
+              <Demo
+                key={content}
+                js={demos[name].js}
+                raw={demos[name].raw}
+                index={index}
+                demoOptions={demoOptions}
+                githubLocation={`${SOURCE_CODE_ROOT_URL}/docs/src/${name}`}
+              />
+            );
+          }
+
           return (
-            <Demo
-              key={content}
-              js={demos[name].js}
-              raw={demos[name].raw}
-              index={index}
-              demoOptions={demoOptions}
-              githubLocation={`${SOURCE_CODE_ROOT_URL}/docs/src/${name}`}
-            />
+            <MarkdownElement className={classes.markdownElement} key={content} text={content} />
           );
-        }
-
-        return <MarkdownElement className={classes.markdownElement} key={content} text={content} />;
-      })}
-      {headers.components.length > 0 ? (
-        <MarkdownElement
-          className={classes.markdownElement}
-          text={`
+        })}
+        {headers.components.length > 0 ? (
+          <MarkdownElement
+            className={classes.markdownElement}
+            text={`
 ## API
 
 ${headers.components
-            .map(
-              component =>
-                `- [&lt;${component} /&gt;](${section === 'lab' ? '/lab/api' : '/api'}/${kebabCase(
-                  component,
-                )})`,
-            )
-            .join('\n')}
+              .map(
+                component =>
+                  `- [&lt;${component} /&gt;](${
+                    section === 'lab' ? '/lab/api' : '/api'
+                  }/${kebabCase(component)})`,
+              )
+              .join('\n')}
           `}
-        />
-      ) : null}
-    </AppContent>
+          />
+        ) : null}
+      </AppContent>
+    </AppFrame>
   );
 }
 

diff --git a/docs/src/modules/components/withRoot.js b/docs/src/modules/components/withRoot.js
@@ -181,9 +181,11 @@ const pages = [
       },
     ],
   },
+  {
+    pathname: '/layouts',
+  },
   {
     pathname: '/premium-themes',
-    title: 'Premium Themes',
   },
   {
     pathname: '/lab',
@@ -251,7 +253,7 @@ const pages = [
 function findActivePage(currentPages, router) {
   const activePage = find(currentPages, page => {
     if (page.children) {
-      return router.pathname.indexOf(page.pathname) === 0;
+      return router.pathname.indexOf(`${page.pathname}/`) === 0;
     }
 
     // Should be an exact match if no children
@@ -298,7 +300,6 @@ function withRoot(Component) {
 
     render() {
       const { pageContext, ...other } = this.props;
-
       return (
         <React.StrictMode>
           <Provider store={this.redux}>

diff --git a/docs/src/pages/layouts/Layouts.js b/docs/src/pages/layouts/Layouts.js
@@ -0,0 +1,120 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } 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 Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+
+const styles = {
+  item: {
+    flexGrow: 1,
+  },
+  card: {
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    flexGrow: 1,
+  },
+  cardContent: {
+    flexGrow: 1,
+  },
+  cardMedia: {
+    height: 0,
+    paddingTop: '65%',
+  },
+};
+
+const themes = [
+  {
+    name: 'Sign-in',
+    description: 'A simple sign-in page.',
+    src: '/static/images/layouts/sign-in.png',
+    href: '/layouts/sign-in',
+    source: 'https://github.com/mui-org/material-ui/tree/master/docs/src/pages/layouts/sign-in',
+  },
+  {
+    name: 'Album',
+    description: 'A reponsive album / gallery layout with a hero unit and footer.',
+    src: '/static/images/layouts/album.png',
+    href: '/layouts/album',
+    source: 'https://github.com/mui-org/material-ui/tree/master/docs/src/pages/layouts/album',
+  },
+  {
+    name: 'Blog',
+    description:
+      'A sophisticated blog layout. Markdown support is courtesy of react-markdown, ' +
+      'but is easily replaced.',
+    src: '/static/images/layouts/blog.png',
+    href: '/layouts/blog',
+    source: 'https://github.com/mui-org/material-ui/tree/master/docs/src/pages/layouts/blog',
+  },
+  {
+    name: 'Pricing',
+    description:
+      'Quickly build an effective pricing table for your potential customers with this layout.',
+    src: '/static/images/layouts/pricing.png',
+    href: '/layouts/pricing',
+    source: 'https://github.com/mui-org/material-ui/tree/master/docs/src/pages/layouts/pricing',
+  },
+  {
+    name: 'Checkout',
+    description:
+      'A step-by-step checkout page layout. ' +
+      'Adapt the number of steps to suit your needs, or make steps optional.',
+    src: '/static/images/layouts/checkout.png',
+    href: '/layouts/checkout',
+    source: 'https://github.com/mui-org/material-ui/tree/master/docs/src/pages/layouts/checkout',
+  },
+  {
+    name: 'Dashboard',
+    description:
+      'A minimal dasboard with taskbar and mini variant draw. ' +
+      'The chart is courtesy of Recharts, but it is simple to substitute an alternative.',
+    src: '/static/images/layouts/dashboard.png',
+    href: '/layouts/dashboard',
+    source: 'https://github.com/mui-org/material-ui/tree/master/docs/src/pages/layouts/dashboard',
+  },
+];
+
+function Layouts(props) {
+  const { classes } = props;
+  return (
+    <Grid container spacing={16}>
+      {themes.map(theme => (
+        <Grid item sm={6} md={4} className={classes.item} key={theme.name}>
+          <Card className={classes.card}>
+            <CardMedia
+              component="a"
+              href={theme.href}
+              className={classes.cardMedia}
+              image={theme.src}
+              title={theme.name}
+              target="_blank"
+            />
+            <CardContent className={classes.cardContent}>
+              <Typography gutterBottom variant="headline" align="left" component="h2">
+                {theme.name}
+              </Typography>
+              <Typography component="p">{theme.description}</Typography>
+            </CardContent>
+            <CardActions>
+              <Button component="a" href={theme.source} size="small" color="primary">
+                Source code
+              </Button>
+            </CardActions>
+          </Card>
+        </Grid>
+      ))}
+    </Grid>
+  );
+}
+
+Layouts.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(Layouts);