Limit max width for content on documentation

Author: rvsia

packages/react-renderer-demo/src/components/common/connected-links.js

@@ -9,12 +9,16 @@ import Link from 'next/link';
 import MenuContext from '../navigation/menu-context';
 import useMapperLink from '../../hooks/use-mapper-link';
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles((theme) => ({
   linksContainer: {
     paddingLeft: 32,
     paddingRight: 32,
     marginTop: 64,
-    marginBottom: 16
+    marginBottom: 16,
+    [theme.breakpoints.up('md')]: {
+      paddingLeft: 'calc((100% - (768px + 17%)) / 2)',
+      paddingRight: 'calc((100% - (768px + 17%)) / 2)'
+    }
   },
   link: {
     textDecoration: 'none'

packages/react-renderer-demo/src/components/component-example-text.js

@@ -1,19 +1,42 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ComponentExample from '@docs/components/component-example';
+import { makeStyles } from '@material-ui/core/styles';
+
 import { Heading } from './mdx/mdx-components';
 import avalableMappers from '../helpers/available-mappers';
 
-const ComponentExampleText = ({ linkText, schema, variants, component, activeMapper, ContentText }) => (
-  <React.Fragment>
-    <Heading level="4" component="h1">
-      {`${avalableMappers.find(({ mapper }) => mapper === activeMapper).title} ${linkText}`}
-    </Heading>
-    <ComponentExample variants={variants} schema={schema} activeMapper={activeMapper} component={component} />
-    <br />
-    <ContentText activeMapper={activeMapper} component={component} />
-  </React.Fragment>
-);
+const useStyles = makeStyles((theme) => ({
+  wrapper: {
+    [theme.breakpoints.up('md')]: {
+      display: 'flex',
+      justifyContent: 'center'
+    }
+  },
+  content: {
+    [theme.breakpoints.up('md')]: {
+      maxWidth: 'calc(768px + 17%)',
+      width: 'calc(768px + 17%)'
+    }
+  }
+}));
+
+const ComponentExampleText = ({ linkText, schema, variants, component, activeMapper, ContentText }) => {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.wrapper}>
+      <div className={classes.content}>
+        <Heading level="4" component="h1">
+          {`${avalableMappers.find(({ mapper }) => mapper === activeMapper).title} ${linkText}`}
+        </Heading>
+        <ComponentExample variants={variants} schema={schema} activeMapper={activeMapper} component={component} />
+        <br />
+        <ContentText activeMapper={activeMapper} component={component} />
+      </div>
+    </div>
+  );
+};
 
 ComponentExampleText.propTypes = {
   component: PropTypes.string.isRequired,

packages/react-renderer-demo/src/components/doc-page.js

@@ -15,9 +15,15 @@ const useStyles = makeStyles((theme) => ({
     height: '100%'
   },
   wrapper: {
+    justifyContent: 'center',
     [theme.breakpoints.down('sm')]: {
       flexDirection: 'column-reverse'
     }
+  },
+  content: {
+    [theme.breakpoints.up('md')]: {
+      maxWidth: 768
+    }
   }
 }));
 
@@ -32,7 +38,7 @@ const DocPage = ({ children }) => {
 
   return (
     <Grid container item className={classes.wrapper}>
-      <Grid item xs={12} md={10}>
+      <Grid item xs={12} md={10} className={classes.content}>
         {children}
       </Grid>
       <Grid item xs={12} md={2}>

packages/react-renderer-demo/src/helpers/generic-mui-component.js

@@ -86,31 +86,13 @@ const mapperLinks = {
 const mapper = (activeMapper, component) => (mapperLinks[activeMapper] && mapperLinks[activeMapper][component]) || component;
 
 const GenericMuiComponent = ({ activeMapper = 'mui', component }) => (
-  <React.Fragment>
-    <Typography variant="body1" gutterBottom>
-      This component also accepts all other original props, please see{' '}
-      <a
-        target="__blank"
-        rel="noreferrer noopener"
-        href={`${docsLinks[activeMapper]}${activeMapper !== 'pf3' ? mapper(activeMapper, component) : ''}`}
-      >
-        here
-      </a>
-      !
-    </Typography>
-
-    {activeMapper === 'mui'
-      ? (component === 'date-picker' || component === 'time-picker') && (
-          <Typography variant="body1">
-            This component also use API from material-ui-pickers, please see{' '}
-            <a target="__blank" rel="noreferrer noopener" href={`https://material-ui-pickers.firebaseapp.com/api/${component.replace('-', '')}`}>
-              here
-            </a>
-            !
-          </Typography>
-        )
-      : ''}
-  </React.Fragment>
+  <Typography variant="body1" gutterBottom>
+    This component also accepts all other original props, please see{' '}
+    <a target="__blank" rel="noreferrer noopener" href={`${docsLinks[activeMapper]}${activeMapper !== 'pf3' ? mapper(activeMapper, component) : ''}`}>
+      here
+    </a>
+    !
+  </Typography>
 );
 
 GenericMuiComponent.propTypes = {

packages/react-renderer-demo/src/helpers/list-of-contents.js

@@ -21,7 +21,7 @@ const useLinkStyles = makeStyles((theme) => ({
     color: theme.palette.text.secondary,
     overflow: 'hidden',
     textOverflow: 'ellipsis',
-    width: 'calc(240px - 32px)',
+    width: 'calc(100% - 32px)',
     whiteSpace: 'nowrap',
     display: 'block',
     paddingLeft: 16,

packages/react-renderer-demo/src/pages/mappers/date-picker.js

@@ -50,7 +50,6 @@ export default () => {
         variants={variants}
         linkText="Date picker"
       />
-      {activeMapper === 'mui' && <DatePickerText />}
     </Fragment>
   );
 };

packages/react-renderer-demo/src/pages/mappers/time-picker.js

@@ -28,7 +28,6 @@ export default () => {
         variants={variants}
         linkText="Time picker"
       />
-      {activeMapper === 'mui' && <TimePickerText />}
     </Fragment>
   );
 };