Updated Docs Site

docs/src/app/app-routes.jsx

@@ -11,13 +11,12 @@ var Home = require('./components/pages/home.jsx');
 var GetStarted = require('./components/pages/get-started.jsx');
 
 var Customization = require('./components/pages/customization.jsx');
-// var Colors = require('./components/pages/customization/colors.jsx');
-// var Typography = require('./components/pages/customization/typography.jsx');
-
 var Colors = require('./components/pages/customization/colors.jsx');
 var Themes = require('./components/pages/customization/themes.jsx'); 
+var InlineStyles = require('./components/pages/customization/inline-styles.jsx'); 
 
 var Components = require('./components/pages/components.jsx');
+var AppBar = require('./components/pages/components/app-bar.jsx');
 var Buttons = require('./components/pages/components/buttons.jsx');
 var DatePicker = require('./components/pages/components/date-picker.jsx');
 var Dialog = require('./components/pages/components/dialog.jsx');
@@ -51,10 +50,12 @@ var AppRoutes = (
     <Route name="customization" handler={Customization}>
       <Route name="colors" handler={Colors} />
       <Route name="themes" handler={Themes} />
-      <Redirect from="/customization" to="colors" />
+      <Route name="inline-styles" handler={InlineStyles} />
+      <Redirect from="/customization" to="inline-styles" />
     </Route>
 
     <Route name="components" handler={Components}>
+      <Route name="appbar" handler={AppBar} />
       <Route name="buttons" handler={Buttons} />
       <Route name="date-picker" handler={DatePicker} />
       <Route name="dialog" handler={Dialog} />

docs/src/app/components/code-example/code-example.jsx

@@ -12,8 +12,6 @@ class CodeExample extends React.Component {
         color: borderColor
       },
       block: {
-        borderRight: 'solid 1px ' + borderColor,
-        borderBottom: 'solid 1px ' + borderColor,
         borderRadius: '0 0 2px 0'
       }
     };

docs/src/app/components/component-doc.jsx

@@ -40,10 +40,15 @@ var ComponentDoc = React.createClass({
       }
     }
 
+    var header;
+    if (this.props.name.length > 0) {
+      header = <h2 className="mui-font-style-headline">{this.props.name}</h2>
+    }
+
     return (
       <div className={classes}>
-
-        <h2 className="mui-font-style-headline">{this.props.name}</h2>
+        
+        {header}
 
         <CodeExample code={this.props.code}>
           {this.props.children}

docs/src/app/components/master.jsx

@@ -12,7 +12,7 @@ class Master extends React.Component {
 
   constructor() {
     super();
-    this._onMenuIconButtonTouchTap = this._onMenuIconButtonTouchTap.bind(this);
+    this._onLeftIconButtonTouchTap = this._onLeftIconButtonTouchTap.bind(this);
   }
 
   getChildContext() {
@@ -40,7 +40,7 @@ class Master extends React.Component {
 
         <AppBar
           className="mui-dark-theme"
-          onMenuIconButtonTouchTap={this._onMenuIconButtonTouchTap}
+          onLeftIconButtonTouchTap={this._onLeftIconButtonTouchTap}
           title={title}
           zDepth={0}
           iconClassNameRight="muidocs-icon-custom-github"/>
@@ -61,7 +61,7 @@ class Master extends React.Component {
     );
   }
 
-  _onMenuIconButtonTouchTap() {
+  _onLeftIconButtonTouchTap() {
     this.refs.leftNav.toggle();
   }
 

docs/src/app/components/pages/components.jsx

@@ -5,6 +5,7 @@ class Components extends React.Component {
 
   render() {
     var menuItems = [
+      { route: 'appbar', text: 'AppBar'},
       { route: 'buttons', text: 'Buttons'},
       { route: 'date-picker', text: 'Date Picker'},
       { route: 'dialog', text: 'Dialog'},

docs/src/app/components/pages/components/app-bar.jsx

@@ -0,0 +1,115 @@
+var React = require('react');
+var mui = require('mui');
+var ComponentDoc = require('../../component-doc.jsx');
+
+var {AppBar, DropDownMenu} = mui;
+
+class AppBarPage extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.code = 
+          '<AppBar title=\'Title\' iconClassNameRight="muidocs-icon-navigation-expand-more"/>';
+
+    this.desc = 'App bars are a collection of components placed as a static ' +
+                'header for an application. It is used for navigation, search ' +
+                'branding, and actions. An app bar is also referred to as the ' +
+                'primary toolbar or action bar for Android.';
+
+    this.componentInfo = [
+      {
+        name: 'Props',
+        infoArray: [
+          {
+            name: 'iconClassNameLeft',
+            type: 'string',
+            header: 'optional',
+            desc: 'The classname of the icon on the left of the app bar. If you ' +
+                  'are using a stylesheet for your icons, enter the class name ' +
+                  'for the icon to be used here.'
+          },
+          {
+            name: 'iconClassNameRight',
+            type: 'string',
+            header: 'optional',
+            desc: 'Similiar to the iconClassNameLeft prop except that is applies ' +
+                  'to the icon displayed on the right of the app bar.'
+          },
+          {
+            name: 'iconElementLeft',
+            type: 'element',
+            header: 'optional',
+            desc: 'The custom element to be displayed on the left side of the ' +
+                  'app bar such as an SvgIcon.'
+          },
+          {
+            name: 'iconElementRight',
+            type: 'element',
+            header: 'optional',
+            desc: 'Similiar to the iconElementLeft prop except that this element ' +
+                  'is displayed on the right of the app bar.'
+          },        
+          {
+            name: 'style',
+            type: 'object',
+            header: 'optional',
+            desc: 'Override the inline-styles of the app bars\'s root element.'
+          },
+          {
+            name: 'showMenuIconButton',
+            type: 'boolean',
+            header: 'default: true',
+            desc: 'Determines whether or not to display the Menu icon next to ' +
+                  'the title. Setting this prop to false will hide the icon.'
+          },
+          {
+            name: 'title',
+            type: 'string',
+            header: 'optional',
+            desc: 'A string of text that is displayed on the app bar.'
+          },
+          {
+            name: 'zDepth',
+            type: 'number',
+            header: 'default: 1',
+            desc: 'The zDepth of the app bar. The shadow of the app bar is also ' +
+                  'dependent on this property.'
+          }
+        ] 
+      },
+      {
+        name: 'Events',
+        infoArray: [
+          {
+            name: 'onLeftIconButtonTouchTap',
+            header: 'AppBar.onLeftIconButtonTouchTap(e)',
+            desc: 'Callback function for when the left icon is selected via ' +
+                  'a touch tap.'
+          }, 
+          {
+            name: 'onRightIconButtonTouchTap',
+            header: 'AppBar.onRightIconButtonTouchTap(e)',
+            desc: 'Callback function for when the right icon is selected via ' +
+                  'a touch tap.'
+          }
+        ]
+      }
+    ];
+  }
+
+  render() {
+    return (
+      <ComponentDoc
+        name="AppBar"
+        code={this.code}
+        desc={this.desc}
+        componentInfo={this.componentInfo}>
+          <AppBar title='Title' iconClassNameRight="muidocs-icon-navigation-expand-more"/>
+      </ComponentDoc>
+    );
+  }
+
+}
+
+module.exports = AppBarPage;