Merge pull request #6 from Codebrahma/docs-component-integration

Docs component integration

Author: prasanna1211

docs/client/components/AppNavbar/index.js

@@ -63,7 +63,7 @@ class Navbar extends React.Component {
                   to="/components"
                   onClick={() => { this.handleNavClick('components') }}
                 > 
-                  <span className={`${activeLink === 'components' && 'active'}`}>API</span> 
+                  <span className={`${activeLink === 'components' && 'active'}`}>Usage</span> 
                 </Link>
               </Col>
             </Row>

docs/client/components/ComponentsPage/index.js

@@ -1,8 +1,13 @@
 import React from 'react';
 
+import CardReadme from '../../../../src/card/readMe.md';
+
+import styles from './styles.scss';
+
 const ComponentsPage = () => (
-  <div>
-    Components Page
+  <div className={styles.usage}>
+    <div dangerouslySetInnerHTML={{ __html: CardReadme }} />
+    <div style={{ height: '300px' }} />
   </div>
 );
 

docs/client/components/ComponentsPage/styles.scss

@@ -0,0 +1,19 @@
+:local(.usage) {
+  overflow: scroll;
+  height: 800px;
+  padding: 5%;
+
+  table, td, th {
+    border: 1px solid #d2d2d2;
+    border-collapse: collapse;
+  }
+  td {
+    padding: 5px;
+    font-size: 12px;
+    height: 40px;
+  }
+  .hljs {
+    padding: 15px 0px;
+    background: #f1f1f1;
+  }
+}

docs/client/components/GettingStartedPage/index.js

@@ -1,8 +1,26 @@
 import React from 'react';
 
+import SampleCode from './sampleCode.md';
+import styles from './styles.scss';
+
 const GettingStartedPage = () => (
-  <div>
-    GettingStarted Page
+  <div className={styles.code}>
+    <div className="header">
+      GettingStarted Page
+    </div>
+    <div className="sub-header">
+      Installation
+    </div>
+    <div className="js-code">
+      npm install react-lite
+    </div>
+    <div className="sub-header">
+      Usage
+    </div>
+    <div className="js-code">
+      <div dangerouslySetInnerHTML={{ __html: SampleCode }} />
+    </div>
+    <div className="empty-div" />
   </div>
 );
 

docs/client/components/GettingStartedPage/sampleCode.md

@@ -0,0 +1,23 @@
+```
+import { Card } from 'react-lite;
+import theme from './theme.scss';
+
+const App = (
+  <Card
+    header='Card String header'
+    wrapContent
+    noPadding
+    theme={customTheme}>
+    <span>Card Content</span>
+    <span>Card Content</span>
+    <span>Card Content</span>
+  </Card>
+);
+
+export default App;
+
+// In theme.scss Customize any themeable option and pass it as a prop
+:local(.card) {
+  background: #d2d2d2;
+}
+```

docs/client/components/GettingStartedPage/styles.scss

@@ -0,0 +1,24 @@
+:local(.code) {
+  width: 50%;
+  padding-bottom: 200px;
+  margin: 0 auto;
+  .header {
+    font-size: 24px;
+    font-weight: bold;
+  }
+  .sub-header {
+    font-size: 18px;
+    font-weight: bold;
+  }
+  .js-code {
+    padding: 20px;
+    background: #e2e2e2;
+    margin-bottom: 20px;
+    min-width: 300px;
+  }
+
+  .empty-div {
+    height: 200px;
+  }
+  
+}

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

@@ -11,7 +11,7 @@ const ComponentBarPage = ({ children, onClickComponent }) => (
         <div
           className="each-component-item"
           key={component.name}
-          onClick={() => { onClickComponent(component.name) }}
+          onClick={() => { onClickComponent(component.name, component.defaultCode, component.docs) }}
         >
           {component.name}
         </div>

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

@@ -9,6 +9,7 @@
     padding-top: 25px;
     box-shadow: 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12), 0 2px 4px -1px rgba(0,0,0,.2);
     .each-component-item {
+      font-size: 23px;
       color: $primary-dark-font;
       padding: 15px 5px 15px 15px;
       font-weight: bold;

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

@@ -5,24 +5,18 @@ import styles from './styles.scss';
 const DocumentationPage = ({
   isDocumentationOn,
   expandDocumentation,
+  activeDocs,
 }) => {
   const docStatusClass = isDocumentationOn ? 'active' : '';
-  return isDocumentationOn ? (
+  return (
     <div className={cx(styles.documentation, docStatusClass)}>
       <div className="header">
         Documentation
       </div>
-      <button
-        onClick={expandDocumentation}
-      > Let me try!!! </button>  
+      <div className="content" dangerouslySetInnerHTML={{ __html: activeDocs }} />
+      <div className="empty-div" />
     </div>
-  ) : (
-    <div className={cx(styles.documentation, docStatusClass)}>
-      <button
-        onClick={expandDocumentation}
-      > Props </button>  
-    </div>
-  )
+  );
 }
 
 

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

@@ -1,28 +1,70 @@
+/* Safari 4.0 - 8.0 */
+@-webkit-keyframes open {
+  from {width: 0%;}
+  to {width: 45%;}
+}
+
+/* Standard syntax */
+@keyframes open {
+  from {width: 0%;}
+  to {width: 45%;}
+}
+
 :local(.documentation) {
   position: fixed;
+  padding: 5px 20px 50px 20px;
   right: 0%;
   top: 78px;
   height: 100%;
-  width: 5%;
+  width: 0%;
   box-shadow: 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12), 0 2px 4px -1px rgba(0,0,0,.2);
   background: #ffffff;
+  overflow: scroll;
   .header {
     font-size: 24px;
     font-weight: bold;
     padding: 10px;
   }
-  button {
-    border-radius: 50%;
-    padding: 30px 25px;
-    position: absolute;
-    left: -45px;
-    top: 40%;
+  .content {
+    font-size: 12px;
+    table, th, td {
+      border: 1px solid #d2d2d2;
+      border-collapse: collapse;
+    }
+    th {
+      height: 40px;
+    }
+    td {
+      height: 40px;
+      padding: 5px;
+    }
+    .hljs {
+      padding: 15px 0px;
+      background: #f1f1f1;
+    }
   }
+  
   &.active {
-    width: 50%;
+    width: 45%;
+    -webkit-animation: open 0.5s; /* Safari 4.0 - 8.0 */
+    animation: open 0.5s;
     button {
       left: -55px;
     }
   }
 
-}
+  .docs-btn {
+    button {
+      border-radius: 50%;
+      padding: 30px 25px;
+      position: absolute;
+      right: -45px;
+      top: 2%;
+    }
+  }
+
+  .empty-div {
+    height: 100px;
+  }
+}
+