Added fix for playground related previews

Author: prasanna1211

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

@@ -1,9 +1,28 @@
+:local(.playground-preview) {
+  position: fixed;
+  height: 100%;
+  width: 60%;
+  .header {
+    font-size: 24px;
+    font-weight: bold;
+  }
+}
+
 :local(.playground) {
   position: fixed;
-  height: 50%;
-  width: 100%;
+  width: 40%;
+  height: 100%;
+  border: 1px solid;
+}
+
+:local(.preview) {
   .header {
     font-size: 24px;
     font-weight: bold;
   }
-}
+  position: fixed;
+  left: 55%;
+  width: 35%;
+  height: 100%;
+  border: 1px solid;
+}

docs/client/components/PlaygroundPage/index.js

@@ -7,19 +7,41 @@ class PlaygroundPage extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      active: '',
+      isDocumentationOn: false,
+      activeComponent: '',
     };
+    this.expandDocumentation = this.expandDocumentation.bind(this);
+    this.handleClickComponent = this.handleClickComponent.bind(this);
+  }
+
+  expandDocumentation() {
+    this.setState({
+      isDocumentationOn: !this.state.isDocumentationOn,
+    });
+  }
+
+  handleClickComponent(activeComponent) {
+    this.setState({
+      activeComponent,
+    });
   }
 
   render() {
     return (
       <div>
-        <ComponentBar>
-          <PlaygroundWithPreview />
-          <Documentation />
+        <ComponentBar
+          onClickComponent={this.handleClickComponent}
+        >
+          <PlaygroundWithPreview
+            activeComponent={this.state.activeComponent}
+          />
+          <Documentation
+            isDocumentationOn={this.state.isDocumentationOn}
+            expandDocumentation={this.expandDocumentation}
+          />
         </ComponentBar>
       </div>
-    )
+    );
   }
 }