Added link to code example source.

Author: Hyperkid123

packages/react-renderer-demo/src/app/pages/testing.md

@@ -11,13 +11,15 @@ Always make sure that your **custom components** and their features are tested t
 
 In these examples, we will use [Jest](https://jestjs.io/) and [Enzyme](https://enzymejs.github.io/enzyme/docs/api/) but the same rules apply to any other testing libraries.
 
+
 ## Testing the renderer
 
 If you want to test your whole form, the easiest way is just to render it as you would normally. Be careful that you will have to mock all your async validations and submissions. Data driven forms have great test coverage so its not necessary to test core features.
 
 Below is an example of a form with an async validation and a conditional field. All features in the data driven forms packages are tested by the library. It should not be required to tests them most of the time.
 
 <CodeExample source="tests/form-renderer.test" />
+<br/>
 
 ## Testing custom components
 
@@ -28,12 +30,14 @@ Components that are using `useFieldApi` or `useFormApi` must be children of cont
 Set up your renderer to make it easier to test the component-specific features. Use initial values to trigger falsey validation results to avoid unnecessary changes simulation.
 
 <CodeExample source="tests/custom-component-with-renderer.test" />
+<br/>
 
 ### Outside renderer
 
-Rendering components outside of the renderer will require some additional set up which is not traditionally used when using form renderer and require some additional knowledge of the library. Most notably, you need to wrap the component inside the `Form` component and `RendererContext`. No functionality provided by the renderer like validations or conditions will be provided so it must be configured.
+Rendering components outside of the renderer will require some additional set up which is not traditionally used when using form renderer and require some additional knowledge of the library. Most notably, you need to wrap the component inside the `Form` component and `RendererContext`. Be careful, no Data Driven Forms functionality is provided, so you have to configure it manually, if you need need to use it.
 
 <CodeExample source="tests/custom-component-outside-renderer.test" />
+<br/>
 
 </Grid>
 <Grid item xs={false} md={2}>

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

@@ -1,5 +1,9 @@
 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 dynamic from 'next/dynamic';
 import PropTypes from 'prop-types';
@@ -10,11 +14,33 @@ const CodeEditor = dynamic(import('./code-editor'), {
 
 const reqSource = require.context('!raw-loader!@data-driven-forms/examples', true, /\.js/);
 
+const useStyles = makeStyles(() => ({
+  codeWrapper: {
+    background: '#1D1F21',
+    paddingTop: 16,
+    paddingBottom: 16
+  }
+}));
+
 const CodeExample = ({ source }) => {
   const codeSource = reqSource(`./src/${source}.js`).default;
+  const classes = useStyles();
   return (
     <Grid container spacing={0} className="DocRawComponent">
       <Grid item xs={12}>
+        <Box display="flex" justifyContent="flex-end">
+          <Link
+            href={`https://github.com/data-driven-forms/react-forms/tree/master/packages/examples/src/${source}.js`}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Typography variant="subtitle1" component="h1">
+              View source on github
+            </Typography>
+          </Link>
+        </Box>
+      </Grid>
+      <Grid item xs={12} className={classes.codeWrapper}>
         <CodeEditor value={codeSource} />
       </Grid>
     </Grid>