playground doc page first draft

Reviewed By: danielbuechele

Differential Revision: D6968725

fbshipit-source-id: 588018a347a723b32e4dcab407c4da2db0d85130

website/src/templates/index.css

@@ -1,6 +1,9 @@
-.doc-block .markdown {
+.no-playground .markdown {
   padding-top: 50px;
-  padding-bottom: 50px;
+}
+
+.doc-block .markdown {
+  padding-bottom: 20px;
 }
 
 .doc-block .overview {
@@ -35,3 +38,7 @@
   font-size: 14px;
   font-weight: 400;
 }
+
+.doc-block .prop {
+  margin-bottom: 20px;
+}

website/src/templates/withPlayground.js

@@ -17,32 +17,19 @@ import DocsSidebar from '../components/DocsSidebar';
 import EditValue from '../components/Playground/EditValue';
 import Link from 'gatsby-link';
 import {Button, Icon, Row, Col} from 'antd';
+import './index.css';
 
 export default ({pathContext}) => (
-  <Page>
+  <Page className="doc-block">
     <Playground
       selectedNodePath={[]}
       showGuides={false}
       renderSidebar={(layout, onChange) => (
         <DocsSidebar>
-          <Link to="/docs">
-            <Icon type="left-circle-o" /> back to overview
-          </Link>
-          <div dangerouslySetInnerHTML={{__html: pathContext.html}} />
-          {pathContext.frontmatter.editableProperties && (
-            <Row type="flex" align="bottom">
-              <Col span={12}>
-                <h3>Try it out</h3>
-              </Col>
-              <Col span={12}>
-                <Link to="/playground">
-                  <Icon type="export" /> Open in playground
-                </Link>
-              </Col>
-            </Row>
-          )}
+          <div className="markdown" dangerouslySetInnerHTML={{__html: pathContext.html}} />
+          
           {(pathContext.frontmatter.editableProperties || []).map(prop => (
-            <div key={prop}>
+            <div key={prop} className="prop">
               <h4>{prop}</h4>
               <EditValue
                 property={prop}
@@ -51,6 +38,10 @@ export default ({pathContext}) => (
               />
             </div>
           ))}
+          
+          <Link to="/docs" className="overview">
+            BACK TO OVERVIEW
+          </Link>
         </DocsSidebar>
       )}
     />

website/src/templates/withoutPlayground.js

@@ -19,7 +19,7 @@ import './index.css';
 
 export default ({pathContext}) => {
   return (
-    <Page className="doc-block">
+    <Page className="doc-block no-playground">
       <Padded>
         <Row>
           <Col xl={16} lg={16} md={24} sm={24} xs={24}>