Merge branch 'components-refactoring' into 'master'

Components refactoring

See merge request code.brahma/react-lite-ui!3

Author: Arjun-sna

.eslintrc

@@ -3,7 +3,8 @@
   "extends": "airbnb",
   "rules": {
     "react/jsx-filename-extension": 0,
-    "import/no-extraneous-dependencies": ["error" , { "devDependencies" : true }]
+    "import/no-extraneous-dependencies": ["error" , { "devDependencies" : true }],
+    "jsx-a11y/label-has-for": 0
   },
   "parserOptions": {
     "ecmaFeatures": {

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

@@ -10,6 +10,12 @@ import components from '../../../../../src';
 import styles from './styles.scss';
 import theme from '../../../components/common/DefaultCode/theme.scss';
 
+const PreviewBlock = ({ children, header }) => (
+  <div className="preview-block">
+    <div className="header">{header}</div>
+    {children}
+  </div>
+)
 class PlaygroundWithPreview extends React.Component {
   constructor(props) {
     super(props);
@@ -34,11 +40,13 @@ class PlaygroundWithPreview extends React.Component {
           (Editor not available at this screen size) 
         </div>
         <LiveProvider 
-          scope={{ ...components, theme }}
+          scope={{ ...components, PreviewBlock, theme }}
           code={this.props.defaultCode}
         >
           <div className="code-editor">
-            <LiveEditor />
+            <div className="editor-wrapper">
+              <LiveEditor />
+            </div>
             <div className="doc-enabler">
               <label htmlFor="normal-switch">
                 <div>Show Docs</div>

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

@@ -15,6 +15,11 @@
     }
     .code-editor {
       width: 50%;
+      .editor-wrapper {
+        height: 400px !important;
+        overflow-y: scroll;
+      }
+      
       float: left;
     }
 
@@ -62,4 +67,13 @@
     }
   }
 
+  .preview-block {
+    .header {
+      font-weight: bold;
+      font-size: 20px;
+      margin-top: 10px;
+      margin-bottom: 15px;
+    }
+    
+  }
 }

docs/client/components/common/DefaultCode/Button/index.js

@@ -3,8 +3,7 @@ class Demo extends React.Component {
   render() {
     return (
       <div>
-        <div>
-          <h4>Buttons with diffent styles</h4>
+        <PreviewBlock header="Styled Buttons">
           <Button>Default</Button>
           <Button type="primary">Primary</Button>
           <Button type="secondary">Secondary</Button>
@@ -14,20 +13,27 @@ class Demo extends React.Component {
           <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>
+        </PreviewBlock>
+        <PreviewBlock header="Sizable Buttons">
+          <Button 
+            type="primary"
+            size="small"
+          >
+            Small
+          </Button> 
+          <Button
+            type="primary"
+            size="medium"
+          >
+            Medium
+          </Button>
+          <Button 
+            type="primary"
+            size="large"
+          >
+            Large
+          </Button>
+        </PreviewBlock>
       </div>
     )
   }

docs/client/components/common/DefaultCode/Checkbox/index.js

@@ -0,0 +1,41 @@
+export const defaultCode =   `
+class Demo extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.handleCheckClick = this.handleCheckClick.bind(this);
+  }
+
+  handleCheckClick () {
+    alert('Clicked one of the checkbox');
+  }
+  render() {
+    return (
+      <div>
+        {/* PreviewBlock 1 */}
+        <PreviewBlock header="Normal Checkbox">
+          <Checkbox 
+            onClick={this.handleCheckClick}
+          />
+        </PreviewBlock>
+        {/* PreviewBlock 2 */}
+        <PreviewBlock header="Checked by default">
+          <Checkbox 
+            onClick={this.handleCheckClick}
+            checked
+          />
+        </PreviewBlock>
+        {/* PreviewBlock 3 */}
+        <PreviewBlock header="Checkbox with label">
+          <Checkbox 
+            onClick={this.handleCheckClick}
+          />
+          <span style={{ marginLeft: '10px' }}>
+            Label for the checkbox
+          </span>
+        </PreviewBlock>
+      </div>
+    )
+  }
+}
+`;

docs/client/components/common/DefaultCode/CheckboxGroup/index.js

@@ -0,0 +1,28 @@
+export const defaultCode =   `
+class Demo extends React.Component {
+  render() {
+    const options = [
+      { label: 'Alpha' }, 
+      { label: 'Beta'}, 
+      { label: 'Zheta' }
+    ];
+    return (
+      <div>
+        {/* Preview Block 1 */}
+        <PreviewBlock header="Default Checkbox group">
+          <CheckboxGroup
+            options={options}
+          />
+        </PreviewBlock>
+        {/* Preview Block 2 */}
+        <PreviewBlock header="Inline Checkbox group">
+          <CheckboxGroup
+            inline
+            options={options}
+          />
+        </PreviewBlock>
+      </div>
+    )
+  }
+}
+`;

docs/client/components/common/DefaultCode/Toggle/index.js

@@ -0,0 +1,36 @@
+export const defaultCode =   `
+class Demo extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      toggled: true,
+    };
+    this.handleToggle = this.handleToggle.bind(this);
+  }
+
+  handleToggle() {
+    this.setState({
+      toggled: !this.state.toggled,
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        {/* Preview Block 1 */}
+        <PreviewBlock header="Default toggle (without toggable)">
+          <Toggle />
+        </PreviewBlock>
+        {/* Preview Block 2 */}
+        <PreviewBlock header="Toggle with switch on (with toggable)">
+          <Toggle 
+            toggled={this.state.toggled}
+            onClick={this.handleToggle}
+          />
+        </PreviewBlock>
+      </div>
+    )
+  }
+}
+`;

docs/client/components/common/DefaultCode/index.js

@@ -1,2 +1,5 @@
 export { defaultCode as CardDefaultCode } from './Card';
 export { defaultCode as ButtonDefaultCode } from './Button';
+export { defaultCode as CheckboxDefaultCode } from './Checkbox';
+export { defaultCode as CheckboxGroupDefaultCode } from './CheckboxGroup';
+export { defaultCode as ToggleDefaultCode } from './Toggle';

docs/client/components/common/componentList.js

@@ -2,10 +2,19 @@ import Card from '../../../../src/card';
 import CardReadme from '../../../../src/card/readMe.md';
 import Button from '../../../../src/button';
 import ButtonReadme from '../../../../src/button/readMe.md';
+import Checkbox from '../../../../src/checkbox';
+import CheckboxReadme from '../../../../src/checkbox/readMe.md';
+import CheckboxGroup from '../../../../src/checkbox';
+import CheckboxGroupReadme from '../../../../src/checkbox/readMe.md';
+import Toggle from '../../../../src/toggle';
+import ToggleReadme from '../../../../src/toggle/readMe.md';
 
 import {
   CardDefaultCode,
   ButtonDefaultCode,
+  CheckboxDefaultCode,
+  CheckboxGroupDefaultCode,
+  ToggleDefaultCode,
 } from './DefaultCode';
 
 export const componentList = [
@@ -21,4 +30,22 @@ export const componentList = [
     component: Button,
     defaultCode: ButtonDefaultCode,
   },
+  {
+    name: 'Checkbox',
+    docs: CheckboxReadme,
+    component: Checkbox,
+    defaultCode: CheckboxDefaultCode,
+  },
+  {
+    name: 'CheckboxGroup',
+    docs: CheckboxGroupReadme,
+    component: CheckboxGroup,
+    defaultCode: CheckboxGroupDefaultCode,
+  },
+  {
+    name: 'Toggle',
+    docs: CheckboxGroupReadme,
+    component: Toggle,
+    defaultCode: ToggleDefaultCode,
+  },
 ];