Restyled expansion panned and added GH link.

Author: Hyperkid123

packages/react-renderer-demo/src/app/src/components/code-example.js

@@ -1,12 +1,20 @@
-import React, { useEffect, useState, lazy, Suspense } from 'react';
+import React from 'react';
 import Grid from '@material-ui/core/Grid';
 import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import Link from '@material-ui/core/Link';
 import Box from '@material-ui/core/Box';
-
+import CodeIcon from '@material-ui/icons/Code';
+import ExpansionPanel from '@material-ui/core/ExpansionPanel';
+import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
 import dynamic from 'next/dynamic';
 import PropTypes from 'prop-types';
+import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
+import Paper from '@material-ui/core/Paper';
+import clsx from 'clsx';
+import grey from '@material-ui/core/colors/grey';
+
+import GhIcon from './common/gh-svg-icon';
 
 const CodeEditor = dynamic(import('./code-editor'), {
   ssr: false
@@ -15,11 +23,33 @@ const CodeEditor = dynamic(import('./code-editor'), {
 const reqSource = require.context('!raw-loader!@docs/examples', true, /\.js/);
 const req = require.context('@docs/examples', true, /\.js/);
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles((theme) => ({
   codeWrapper: {
     background: '#1D1F21',
     paddingTop: 16,
-    paddingBottom: 16
+    paddingBottom: 16,
+    borderRadius: 4
+  },
+  componentPanel: {
+    padding: 16
+  },
+  heading: {
+    fontSize: theme.typography.pxToRem(15),
+    fontWeight: theme.typography.fontWeightRegular,
+    flexGrow: 1
+  },
+  secondaryHeading: {
+    fontSize: theme.typography.pxToRem(15),
+    color: theme.palette.text.secondary
+  },
+  expansionPanel: {
+    border: 'none',
+    boxShadow: 'none',
+    background: 'none',
+    padding: 0
+  },
+  expansionPanelSummary: {
+    padding: 0
   }
 }));
 
@@ -29,6 +59,38 @@ const CodeExample = ({ source, mode }) => {
   let Component;
   if (mode === 'preview') {
     Component = req(`./${source}.js`).default;
+
+    return (
+      <Grid container spacing={0} className="DocRawComponent">
+        <Grid item xs={12}>
+          <ExpansionPanel className={classes.expansionPanel}>
+            <ExpansionPanelSummary className={classes.expansionPanelSummary} expandIcon={<CodeIcon />}>
+              {Component && <Typography className={classes.heading}>{Component.name}</Typography>}
+              <Box display="flex">
+                <Link
+                  href={`https://github.com/data-driven-forms/react-forms/tree/master/packages/react-renderer-demo/src/app/examples/${source}.js`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  onClick={(event) => event.stopPropagation()}
+                >
+                  <GhIcon style={{ color: grey[700] }} />
+                </Link>
+              </Box>
+            </ExpansionPanelSummary>
+            <ExpansionPanelDetails className={clsx(classes.expansionPanelDetail, classes.codeWrapper)}>
+              <CodeEditor value={codeSource} />
+            </ExpansionPanelDetails>
+          </ExpansionPanel>
+        </Grid>
+        {Component && (
+          <Grid className={classes.formContainer} item xs={12}>
+            <Paper className={classes.componentPanel}>
+              <Component />
+            </Paper>
+          </Grid>
+        )}
+      </Grid>
+    );
   }
 
   return (
@@ -49,11 +111,6 @@ const CodeExample = ({ source, mode }) => {
       <Grid item xs={12} className={classes.codeWrapper}>
         <CodeEditor value={codeSource} />
       </Grid>
-      {mode === 'preview' && Component && (
-        <Suspense fallback={<div>loading</div>}>
-          <Component />
-        </Suspense>
-      )}
     </Grid>
   );
 };

packages/react-renderer-demo/src/app/src/components/common/gh-svg-icon.js

@@ -1,10 +1,11 @@
 /* eslint-disable max-len */
 import React from 'react';
+import SvgIcon from '@material-ui/core/SvgIcon';
 
 const GhIcon = (props) => (
-  <svg {...props} viewBox="0 0 24 24" aria-hidden="true" role="presentation">
+  <SvgIcon {...props} viewBox="0 0 24 24" role="presentation">
     <path d="M12 .3a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2c-3.3.7-4-1.6-4-1.6-.6-1.4-1.4-1.8-1.4-1.8-1-.7.1-.7.1-.7 1.2 0 1.9 1.2 1.9 1.2 1 1.8 2.8 1.3 3.5 1 0-.8.4-1.3.7-1.6-2.7-.3-5.5-1.3-5.5-6 0-1.2.5-2.3 1.3-3.1-.2-.4-.6-1.6 0-3.2 0 0 1-.3 3.4 1.2a11.5 11.5 0 0 1 6 0c2.3-1.5 3.3-1.2 3.3-1.2.6 1.6.2 2.8 0 3.2.9.8 1.3 1.9 1.3 3.2 0 4.6-2.8 5.6-5.5 5.9.5.4.9 1 .9 2.2v3.3c0 .3.1.7.8.6A12 12 0 0 0 12 .3"></path>
-  </svg>
+  </SvgIcon>
 );
 
 export default GhIcon;