[Doc] Convert Avatar to use the new standard

docs/src/app/components/Avatar/ExampleSimple.jsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import Avatar from 'material-ui/lib/avatar';
+import FileFolder from 'material-ui/lib/svg-icons/file/folder';
+import styles from 'material-ui/lib/styles';
+import FontIcon from 'material-ui/lib/font-icon';
+import List from 'material-ui/lib/lists/list';
+import ListItem from 'material-ui/lib/lists/list-item';
+
+const colors = styles.Colors;
+
+const AvatarExampleSimple = React.createClass({
+  render() {
+    return (
+      <List>
+        <ListItem
+          disabled={true}
+          leftAvatar={
+            <Avatar src="images/uxceo-128.jpg" />
+          }
+        >
+          Image Avatar
+        </ListItem>
+        <ListItem
+          disabled={true}
+          leftAvatar={
+            <Avatar icon={<FileFolder />} />
+          }
+        >
+          SvgIcon Avatar
+        </ListItem>
+        <ListItem
+          disabled={true}
+          leftAvatar={
+            <Avatar
+              icon={<FileFolder />}
+              color={colors.orange200}
+              backgroundColor={colors.pink400}
+            />
+          }
+        >
+          SvgIcon Avatar with custom colors
+        </ListItem>
+        <ListItem
+          disabled={true}
+          leftAvatar={
+            <Avatar icon={<FontIcon className="muidocs-icon-communication-voicemail" />} />
+          }
+        >
+          FontIcon Avatar
+        </ListItem>
+        <ListItem
+          disabled={true}
+          leftAvatar={
+            <Avatar
+              icon={<FontIcon className="muidocs-icon-communication-voicemail" />}
+              color={colors.blue300}
+              backgroundColor={colors.indigo900}
+            />
+          }
+        >
+          FontIcon Avatar with custom colors
+        </ListItem>
+        <ListItem
+          disabled={true}
+          leftAvatar={<Avatar>A</Avatar>}
+        >
+          Letter Avatar
+        </ListItem>
+        <ListItem
+          disabled={true}
+          leftAvatar={
+            <Avatar
+              color={colors.deepOrange300}
+              backgroundColor={colors.purple500}
+            >
+              A
+            </Avatar>
+          }
+        >
+          Letter Avatar with custom colors
+        </ListItem>
+      </List>
+    );
+  },
+});
+
+export default AvatarExampleSimple;

docs/src/app/components/Avatar/README.md

@@ -0,0 +1,5 @@
+## Avatar
+
+Avatars can be used to represent people or object.
+
+### Examples

docs/src/app/components/MarkdownElement.jsx

@@ -6,6 +6,7 @@ require('./mui-github-markdown.css');
 
 const styles = {
   root: {
+    marginTop: 10,
     marginBottom: 14,
     padding: '0 10px',
   },

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

@@ -1,108 +1,27 @@
 import React from 'react';
-import {
-  Avatar,
-  FontIcon,
-  List,
-  ListItem,
-  Styles,
-  Paper,
-} from 'material-ui';
-import ComponentDoc from '../../component-doc';
-import FileFolder from 'material-ui/svg-icons/file/folder';
-const {Colors} = Styles;
-import Code from 'avatars-code';
+import avatarCode from '!raw!material-ui/avatar';
 import CodeExample from '../../code-example/code-example';
-import CodeBlock from '../../code-example/code-block';
-
+import PropTypeDescription from '../../PropTypeDescription';
+import AvatarExampleSimple from '../../Avatar/ExampleSimple';
+import avatarExampleSimpleCode from '!raw!../../Avatar/ExampleSimple';
+import MarkdownElement from '../../MarkdownElement';
+import avatarReadmeText from '../../Avatar/README';
 
 export default class AvatarsPage extends React.Component {
 
-  render() {
-
-    let desc = null;
-
-    let componentInfo = [
-      {
-        name: 'Props',
-        infoArray: [
-          {
-            name: 'icon',
-            type: 'element',
-            header: 'optional',
-            desc: 'This is the SvgIcon or FontIcon to be used inside the avatar.',
-          },
-          {
-            name: 'backgroundColor',
-            type: 'string',
-            header: 'default: grey400',
-            desc: 'The backgroundColor of the avatar. Does not apply to image avatars.',
-          },
-          {
-            name: 'color',
-            type: 'string',
-            header: 'default: white',
-            desc: 'The icon or letter color.',
-          },
-          {
-            name: 'size',
-            type: 'number',
-            header: 'default: 40',
-            desc: 'This is the size of the avatar in pixels',
-          },
-          {
-            name: 'src',
-            type: 'string',
-            header: 'optional',
-            desc: 'If passed in, this component will render an img element. Otherwise, a div will be rendered.',
-          },
-          {
-            name: 'style',
-            type: 'object',
-            header: 'optional',
-            desc: 'Override the inline-styles of the root element.',
-          },
-        ],
-      },
-    ];
-
-    let imageAvatar = <Avatar src="images/uxceo-128.jpg" />;
-    let svgAvatar = <Avatar icon={<FileFolder />} />;
-    let customSvgAvatar = <Avatar icon={<FileFolder />} color={Colors.orange200} backgroundColor={Colors.pink400} />;
-    let fontAvatar = <Avatar icon={<FontIcon className="muidocs-icon-communication-voicemail" />} />;
-    let customFontAvatar = <Avatar icon={<FontIcon className="muidocs-icon-communication-voicemail" />}
-      color={Colors.blue300} backgroundColor={Colors.indigo900} />;
-    let letterAvatar = <Avatar>A</Avatar>;
-    let customLetterAvatar = <Avatar color={Colors.deepOrange300} backgroundColor={Colors.purple500}>A</Avatar>;
+  constructor(props) {
+    super(props);
+  }
 
+  render() {
     return (
-      <ComponentDoc
-        name="Avatars"
-        desc={desc}
-        componentInfo={componentInfo}>
-
-        <Paper style = {{marginBottom: '22px'}}>
-          <CodeBlock>
-          {
-            '//Import statement:\nimport Avatar from \'material-ui/lib/avatar\';\n\n' +
-            '//See material-ui/lib/index.js for more\n'
-          }
-          </CodeBlock>
-        </Paper>
-
-        <CodeExample code={Code}>
-          <List>
-            <ListItem leftAvatar={imageAvatar} disabled={true}>Image Avatar</ListItem>
-            <ListItem leftAvatar={svgAvatar} disabled={true}>SvgIcon Avatar</ListItem>
-            <ListItem leftAvatar={customSvgAvatar} disabled={true}>SvgIcon Avatar with custom colors</ListItem>
-            <ListItem leftAvatar={fontAvatar} disabled={true}>FontIcon Avatar</ListItem>
-            <ListItem leftAvatar={customFontAvatar} disabled={true}>FontIcon Avatar with custom colors</ListItem>
-            <ListItem leftAvatar={letterAvatar} disabled={true}>Letter Avatar</ListItem>
-            <ListItem leftAvatar={customLetterAvatar} disabled={true}>Letter Avatar with custom colors</ListItem>
-          </List>
+      <div>
+        <MarkdownElement text={avatarReadmeText} />
+        <CodeExample code={avatarExampleSimpleCode}>
+          <AvatarExampleSimple />
         </CodeExample>
-      </ComponentDoc>
+        <PropTypeDescription code={avatarCode}/>
+      </div>
     );
-
   }
-
 }

src/avatar.jsx

@@ -24,12 +24,44 @@ const Avatar = React.createClass({
   },
 
   propTypes: {
+    /**
+     * The backgroundColor of the avatar. Does not apply to image avatars.
+     */
     backgroundColor: React.PropTypes.string,
+
+    /**
+     * Can be used, for instance, to render a letter inside the avatar.
+     */
     children: React.PropTypes.node,
+
+    /**
+     * The css class name of the root `div` or `img` element.
+     */
+    className: React.PropTypes.string,
+
+    /**
+     * The icon or letter's color.
+     */
     color: React.PropTypes.string,
+
+    /**
+     * This is the SvgIcon or FontIcon to be used inside the avatar.
+     */
     icon: React.PropTypes.element,
+
+    /**
+     * This is the size of the avatar in pixels.
+     */
     size: React.PropTypes.number,
+
+    /**
+     * If passed in, this component will render an img element. Otherwise, a div will be rendered.
+     */
     src: React.PropTypes.string,
+
+    /**
+     * Override the inline-styles of the root element.
+     */
     style: React.PropTypes.object,
   },
 
@@ -62,6 +94,7 @@ const Avatar = React.createClass({
       size,
       src,
       style,
+      className,
       ...other,
     } = this.props;
 
@@ -86,7 +119,14 @@ const Avatar = React.createClass({
         });
       }
 
-      return <img {...other} src={src} style={this.prepareStyles(styles.root, style)} />;
+      return (
+        <img
+          {...other}
+          src={src}
+          style={this.prepareStyles(styles.root, style)}
+          className={className}
+        />
+      );
     } else {
       styles.root = this.mergeStyles(styles.root, {
         backgroundColor: backgroundColor,
@@ -105,10 +145,16 @@ const Avatar = React.createClass({
         style: this.mergeStyles(styleIcon, icon.props.style),
       }) : null;
 
-      return <div {...other} style={this.prepareStyles(styles.root, style)}>
-        {iconElement}
-        {this.props.children}
-      </div>;
+      return (
+        <div
+          {...other}
+          style={this.prepareStyles(styles.root, style)}
+          className={className}
+        >
+          {iconElement}
+          {this.props.children}
+        </div>
+      );
     }
   },
 });