Added examples

Author: Kameshwaran

docs/client/components/ComponentsPage/index.js

@@ -3,12 +3,26 @@ import React from 'react';
 import CardReadme from '../../../../src/card/readMe.md';
 import ButtonReadme from '../../../../src/button/readMe.md';
 
+import CardExample from '../../../../src/examples/card.js';
+import ButtonExample from '../../../../src/examples/button.js';
+
 import styles from './styles.scss';
 
+const renderHowItLooks = (ExampleComponent) => (
+  <div>
+    <h3>How it looks</h3>
+    <div>
+      <ExampleComponent />
+    </div>
+  </div>
+);
+
 const ComponentsPage = () => (
   <div className={styles.usage}>
     <div dangerouslySetInnerHTML={{ __html: CardReadme }} />
+    { renderHowItLooks(CardExample) }
     <div dangerouslySetInnerHTML={{ __html: ButtonReadme }} />
+    { renderHowItLooks(ButtonExample) }
     <div style={{ height: '300px' }} />
   </div>
 );

src/customcard.scss

@@ -0,0 +1,34 @@
+import React from 'react';
+import Button from './../button'; // eslint-disable-line
+
+const ButtonExample = () => (
+  <div>
+    <div>
+      <h4>Buttons with diffent styles</h4>
+      <Button>Default</Button>
+      <Button type="primary">Primary</Button>
+      <Button type="secondary">Secondary</Button>
+      <Button type="success">Success</Button>
+      <Button type="danger">Danger</Button>
+      <Button type="warning">Warning</Button>
+      <Button type="info">Info</Button>
+      <Button type="light">Light</Button>
+      <Button type="dark">Dark</Button>
+    </div>
+
+    <div>
+      <h4>Buttons with diffent sizes</h4>
+      <Button type="primary" size="small">Small</Button>
+      <Button type="primary" size="medium">Medium</Button>
+      <Button type="primary" size="large">Large</Button>
+    </div>
+
+    <div>
+      <h4>Buttons with Icon</h4>
+      <Button type="success" icon="done">Left Icon</Button>
+      <Button type="success" icon="done" iconAlignment="right">Right Icon</Button>
+    </div>
+  </div>
+);
+
+export default ButtonExample;

src/examples/button.js

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import Card from './../card';
+
+const CardExample = () => (
+  <div>
+    <Card
+      header="Card String header"
+      wrapContent
+    >
+      <div>Hello world!</div>
+      <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
+    </Card>
+  </div>
+);
+
+export default CardExample;

src/examples/card.js

@@ -1,49 +1,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import Card from './card';
-import customTheme from './customcard.scss';
 
-import Button from './button'; // eslint-disable-line
+import CardExample from './examples/card';
+import ButtonExample from './examples/button';
 
 const Index = () => (
   <div>
-    <Card
-      header="Card String header"
-      wrapContent
-      theme={customTheme}
-    >
-      <span>Card Content</span>
-      <span>Card Content</span>
-      <span>Card Content</span>
-    </Card>
-
-    <div style={{ margin: '20px' }}>
-      <div>
-        <h4>Buttons with diffent styles</h4>
-        <Button>Default</Button>
-        <Button type="primary">Primary</Button>
-        <Button type="secondary">Secondary</Button>
-        <Button type="success">Success</Button>
-        <Button type="danger">Danger</Button>
-        <Button type="warning">Warning</Button>
-        <Button type="info">Info</Button>
-        <Button type="light">Light</Button>
-        <Button type="dark">Dark</Button>
-      </div>
-
-      <div>
-        <h4>Buttons with diffent sizes</h4>
-        <Button type="primary" size="small">Small</Button>
-        <Button type="primary" size="medium">Medium</Button>
-        <Button type="primary" size="large">Large</Button>
-      </div>
-
-      <div>
-        <h4>Buttons with Icon</h4>
-        <Button type="success" icon="done">Left Icon</Button>
-        <Button type="success" icon="done" iconAlignment="right">Right Icon</Button>
-      </div>
-    </div>
+    <CardExample />
+    <ButtonExample />
   </div>
 );