Add drawer documentation

components/dialog/readme.md

@@ -39,13 +39,13 @@ class DialogTest extends React.Component {
 |:-                 |:-:            | :-              |:-|
 | actions       | Array         |    `[]`         | A array of objects representing the buttons for the dialog navigation area. The properties will be transferred to the buttons.|
 | active        | Boolean       |  `false`        | If true, the dialog will be active by default.|
-| className     | String        |     `''`        | Sets a class to give customized styles to the time picker.|
+| className     | String        |     `''`        | Sets a class to give customized styles to the dialog.|
 | title         | String        |                 | The text string to use as standar title of the dialog.|
 | type          | String        |  `normal`       | Used to determine the size of the dialog. It can be `small`, `normal` or `large`. |
 
 ## Methods
 
-The Dialog has state to determine if it is being shown or not. It exposes method to show and hide:
+The Dialog has state to determine if it is being shown or not. It exposes methods to show and hide:
 
 - `show` is used to show the dialog.
 - `hide` is used to hide the dialog.

components/drawer/index.jsx

@@ -6,7 +6,7 @@ class Drawer extends React.Component {
     active: React.PropTypes.bool,
     className: React.PropTypes.string,
     hideable: React.PropTypes.bool,
-    type: React.PropTypes.string
+    type: React.PropTypes.oneOf(['left', 'right'])
   };
 
   static defaultProps = {

components/drawer/readme.md

@@ -1,37 +1,43 @@
-# Aside
+# Drawer
 
-```
-var Aside = require('react-toolbox/components/aside');
+The [navigation drawer](https://www.google.com/design/spec/patterns/navigation-drawer.html) slides in from the left. It is a common pattern found in Google apps and follows the keylines and metrics for lists.
 
-<Aside>
-  <header/>
-  <section>
-    <h1>Hello World</h1>
-  </section>
-  <footer/>
-</Aside>
+<!-- example -->
+```jsx
+import Drawer from 'react-toolbox/drawer';
+
+class DrawerTest extends React.Component {
+  handleClick = () => {
+    this.refs.drawer.show();
+  };
+
+  render () {
+    return (
+      <div>
+        <Button kind='raised' accent label='Show Drawer' onClick={this.handleClick} />
+        <Drawer ref='drawer' hideable>
+          <h5>This is your Drawer.</h5>
+          <p>You can embed any content you want, for example a Menu.</p>
+        </Drawer>
+      </div>
+    );
+  }
+}
 ```
 
 ## Properties
 
 | Name              | Type          | Default         | Description|
 |:-                 |:-:            | :-              |:-|
-| **active**        | Bool          | false           | If true, component will be show by default.|
-| **className**     | String        |                 | Sets the class-styles of the Component.|
-| **hideable**      | Bool          | false           | If true, the componente can be hideable clicking in it.|
-| **type**          | String        | "left"          | Type of the component, overwrite this property if you need set a different stylesheet. Options: "left" or "right"|
+| active        | Boolean       |  `false`        | If true, the drawer will be active by default.|
+| className     | String        |     `''`        | Sets a class to give customized styles to the drawer.|
+| hideable      | Bool          | `true`           | If true, the drawer will be hidden by clicking the overlay.|
+| type          | String        | `left`          | Type of drawer. It can be left or right to display the drawer on the left or right side of the screen.|
 
 ## Methods
 
-#### show
-Show component.
+The Drawer has state to determine if it is being shown or not. It exposes methods to show and hide:
 
-```
-aside_instance.show();
-```
+- `show` is used to show the drawer.
+- `hide` is used to hide the drawer.
 
-#### hide
-Hide component.
-```
-aside_instance.hide();
-```

docs/app/components/layout/main/modules/components.js

@@ -30,6 +30,7 @@ import CardExample1 from './examples/card_example_1.txt';
 import CheckboxExample1 from './examples/checkbox_example_1.txt';
 import DatePickerExample1 from './examples/datepicker_example_1.txt';
 import DialogExample1 from './examples/dialog_example_1.txt';
+import DrawerExample1 from './examples/drawer_example_1.txt';
 import TimePickerTest from './examples/timepicker_example_1.txt';
 
 export default {
@@ -77,7 +78,8 @@ export default {
   drawer: {
     name: 'Drawer',
     docs: Drawer,
-    path: '/components/drawer'
+    path: '/components/drawer',
+    examples: [DrawerExample1]
   },
   dropdown: {
     name: 'Dropdown',

docs/app/components/layout/main/modules/examples/drawer_example_1.txt

@@ -0,0 +1,19 @@
+class DrawerTest extends React.Component {
+  handleClick = () => {
+    this.refs.drawer.show();
+  };
+
+  render () {
+    return (
+      <div>
+        <Button kind='raised' accent label='Show Drawer' onClick={this.handleClick} />
+        <Drawer ref='drawer' hideable>
+          <h5>This is your Drawer.</h5>
+          <p>You can embed any content you want, for example a Menu.</p>
+        </Drawer>
+      </div>
+    );
+  }
+}
+
+return <DrawerTest />;