minor changes for active doc enabler

Author: prasanna1211

docs/client/components/PlaygroundPage/PlaygroundWithPreview/index.js

@@ -33,6 +33,8 @@ class PlaygroundWithPreview extends React.Component {
   render() {
     const {
       activeComponent,
+      expandDocumentation,
+      isDocumentationOn,
     } = this.props;
 
     return (
@@ -44,7 +46,11 @@ class PlaygroundWithPreview extends React.Component {
           <Playground
             code={this.props.defaultCode}
             onChange={this.handleOnChangeCode}
+            activeComponent={activeComponent}
+            expandDocumentation={expandDocumentation}
+            isDocumentationOn={isDocumentationOn}
           />
+          
           <Preview
             code={this.state.code}
           />

docs/client/components/PlaygroundPage/PlaygroundWithPreview/styles.scss

@@ -5,14 +5,22 @@
   .header {
     font-size: 24px;
     font-weight: bold;
+    margin-bottom: 20px;
   }
 }
 
 :local(.playground) {
   position: fixed;
   width: 40%;
   height: 100%;
-  border: 1px solid;
+  .doc-enabler {
+    margin: 40px auto;
+    width: 40%;
+    .switch {
+      margin-left: 10px;
+      margin-top: 10px;
+    }
+  }
 }
 
 :local(.preview) {
@@ -24,5 +32,4 @@
   left: 55%;
   width: 35%;
   height: 100%;
-  border: 1px solid;
 }

docs/client/components/PlaygroundPage/index.js

@@ -9,6 +9,7 @@ class PlaygroundPage extends React.Component {
     this.state = {
       isDocumentationOn: false,
       activeComponent: '',
+      activeDocs: '',
     };
     this.expandDocumentation = this.expandDocumentation.bind(this);
     this.handleClickComponent = this.handleClickComponent.bind(this);
@@ -20,10 +21,12 @@ class PlaygroundPage extends React.Component {
     });
   }
 
-  handleClickComponent(activeComponent, defaultCode) {
+  handleClickComponent(activeComponent, defaultCode, activeDocs) {
+    console.log('activeDocs ', activeDocs);
     this.setState({
       activeComponent,
       defaultCode,
+      activeDocs,
     });
   }