Merge pull request #2489 from oliviertassinari/docs-codegen-badge

[Doc] Migrate Badge to the new format

docs/src/app/components/Badge/ExampleContent.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import Badge from 'material-ui/lib/badge';
+import IconButton from 'material-ui/lib/icon-button';
+import UploadIcon from 'material-ui/lib/svg-icons/file/cloud-upload';
+import FolderIcon from 'material-ui/lib/svg-icons/file/folder-open';
+
+const BadgeExampleContent = () => (
+  <div>
+    <Badge
+      badgeContent={<IconButton tooltip="Backup"><UploadIcon/></IconButton>}
+      backgroundColor="#d8d8d8"
+    >
+      <FolderIcon />
+    </Badge>
+    <Badge
+      badgeContent="&copy;"
+      badgeStyle={{fontSize: 20}}
+    >
+      Company Name
+    </Badge>
+  </div>
+);
+
+export default BadgeExampleContent;

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import Badge from 'material-ui/lib/badge';
+import IconButton from 'material-ui/lib/icon-button';
+import NotificationsIcon from 'material-ui/lib/svg-icons/social/notifications';
+
+const BadgeExampleSimple = () => (
+  <div>
+    <Badge
+      badgeContent={4}
+      primary={true}
+    >
+      <NotificationsIcon />
+    </Badge>
+    <Badge
+      badgeContent={10}
+      secondary={true}
+      badgeStyle={{top: 12, right: 12}}
+    >
+      <IconButton tooltip="Notifications">
+        <NotificationsIcon/>
+      </IconButton>
+    </Badge>
+  </div>
+);
+
+export default BadgeExampleSimple;

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

@@ -0,0 +1,5 @@
+## Badge
+
+This component generates a small badge to the top-right of it's child(ren).
+
+### Examples

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

@@ -14,8 +14,8 @@ const styles = {
   },
   markdown: {
     overflow: 'auto',
-    maxHeight: 2000,
-    transition: Transitions.easeOut('1s', 'max-height'),
+    maxHeight: 1400,
+    transition: Transitions.create('max-height', '800ms', '0ms', 'ease-in-out'),
   },
   markdownRetracted: {
     maxHeight: LINE_MAX * 18,

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

@@ -1,106 +1,27 @@
 import React from 'react';
-import {
-  IconButton,
-  Badge,
-  Paper,
-} from 'material-ui';
-import ComponentDoc from '../../component-doc';
-import Code from 'badge-code';
+import badgeCode from '!raw!material-ui/lib/badge';
 import CodeExample from '../../code-example/code-example';
-import NotificationsIcon from 'material-ui/svg-icons/social/notifications';
-import ShoppingCartIcon from 'material-ui/svg-icons/action/shopping-cart';
-import FolderIcon from 'material-ui/svg-icons/file/folder-open';
-import UploadIcon from 'material-ui/svg-icons/file/cloud-upload';
-import CodeBlock from '../../code-example/code-block';
-
-export default class BadgePage extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.desc = 'This component generates a small badge to the top-right of it\'s child(ren)';
-
-    this.componentInfo = [
-      {
-        name: 'Props',
-        infoArray: [
-          {
-            name: 'badgeContent',
-            type: 'node',
-            header: 'required',
-            desc: 'This is the content rendered within the badge.',
-          },
-          {
-            name: 'primary',
-            type: 'bool',
-            header: 'default: false',
-            desc: 'If true, the badge will use the primary badge colors.',
-          },
-          {
-            name: 'secondary',
-            type: 'bool',
-            header: 'default: false',
-            desc: 'If true, the badge will use the secondary badge colors.',
-          },
-          {
-            name: 'style',
-            type: 'object',
-            header: 'optional',
-            desc: 'Override the inline-styles of the root element.',
-          },
-          {
-            name: 'badgeStyle',
-            type: 'object',
-            header: 'optional',
-            desc: 'Override the inline-styles of the badge element.',
-          },
-        ],
-      },
-    ];
-  }
-
-  render() {
-    return (
-      <ComponentDoc
-        name="Badge"
-        desc={this.desc}
-        componentInfo={this.componentInfo}>
-
-        <Paper style = {{marginBottom: '22px'}}>
-          <CodeBlock>
-          {
-            `//Import statement:
-import Badge from 'material-ui/lib/badge';
-
-//See material-ui/lib/index.js for more
-            `
-          }
-          </CodeBlock>
-        </Paper>
-
-        <CodeExample code={Code}>
-
-          <Badge badgeContent={4} primary={true}>
-            <NotificationsIcon />
-          </Badge>
-
-          <Badge badgeContent={10} secondary={true} badgeStyle={{top:12, right:12}}>
-            <IconButton tooltip="Go To Cart">
-              <ShoppingCartIcon/>
-            </IconButton>
-          </Badge>
-
-          <Badge backgroundColor="#d8d8d8"
-            badgeContent={<IconButton tooltip="Backup"><UploadIcon/></IconButton>}>
-            <FolderIcon />
-          </Badge>
-
-          <Badge badgeContent="&copy;" badgeStyle={{fontSize:20}}>
-            <h3>Company Name</h3>
-          </Badge>
-
-        </CodeExample>
-      </ComponentDoc>
-    );
-  }
-
-}
+import PropTypeDescription from '../../PropTypeDescription';
+import MarkdownElement from '../../MarkdownElement';
+import badgeReadmeText from '../../Badge/README';
+import BadgeExampleSimple from '../../Badge/ExampleSimple';
+import badgeExampleSimpleCode from '!raw!../../Badge/ExampleSimple';
+import BadgeExampleContent from '../../Badge/ExampleContent';
+import badgeExampleContentCode from '!raw!../../Badge/ExampleContent';
+
+const BadgePage = () => {
+  return (
+    <div>
+      <MarkdownElement text={badgeReadmeText} />
+      <CodeExample code={badgeExampleSimpleCode}>
+        <BadgeExampleSimple />
+      </CodeExample>
+      <CodeExample code={badgeExampleContentCode}>
+        <BadgeExampleContent />
+      </CodeExample>
+      <PropTypeDescription code={badgeCode}/>
+    </div>
+  );
+};
+
+export default BadgePage;

src/badge.jsx

@@ -5,8 +5,7 @@ import ThemeManager from './styles/theme-manager';
 import StylePropable from './mixins/style-propable';
 
 // Badge
-export default React.createClass({
-  displayName: 'Badge',
+const Badge = React.createClass({
   mixins: [StylePropable],
   contextTypes: {
     muiTheme: React.PropTypes.object,
@@ -21,12 +20,39 @@ export default React.createClass({
     };
   },
   propTypes: {
+    /**
+     * This is the content rendered within the badge.
+     */
     badgeContent: React.PropTypes.node.isRequired,
+
+    /**
+     * Override the inline-styles of the badge element.
+     */
     badgeStyle: React.PropTypes.object,
+
+    /**
+     * The badge will be added relativelty to this node.
+     */
     children: React.PropTypes.node,
+
+    /**
+     * The css class name of the root element.
+     */
     className: React.PropTypes.string,
+
+    /**
+     * If true, the badge will use the primary badge colors.
+     */
     primary: React.PropTypes.bool,
+
+    /**
+     * If true, the badge will use the secondary badge colors.
+     */
     secondary: React.PropTypes.bool,
+
+    /**
+     * Override the inline-styles of the root element.
+     */
     style: React.PropTypes.object,
   },
   getInitialState() {
@@ -36,11 +62,8 @@ export default React.createClass({
   },
   getDefaultProps() {
     return {
-      className: '',
       primary: false,
       secondary: false,
-      style: {},
-      badgeStyle: {},
     };
   },
   componentWillReceiveProps(nextProps, nextContext) {
@@ -94,14 +117,25 @@ export default React.createClass({
     };
   },
   render() {
+    const {
+      style,
+      children,
+      badgeContent,
+      badgeStyle,
+      ...other,
+    } = this.props;
+
     const styles = this.getStyles();
+
     return (
-      <div style={this.prepareStyles(styles.root, this.props.style)} className={this.props.className}>
-        {this.props.children}
-        <span style={this.prepareStyles(styles.badge, this.props.badgeStyle)}>
-          {this.props.badgeContent}
+      <div {...other} style={this.prepareStyles(styles.root, style)}>
+        {children}
+        <span style={this.prepareStyles(styles.badge, badgeStyle)}>
+          {badgeContent}
         </span>
       </div>
     );
   },
 });
+
+export default Badge;