[Doc] Improve codgen

docs/src/app/app-routes.jsx

@@ -22,7 +22,7 @@ import InlineStyles from './components/pages/customization/inline-styles';
 import Components from './components/pages/components';
 import AppBar from './components/pages/components/app-bar';
 import AutoComplete from './components/pages/components/auto-complete';
-import Avatars from './components/pages/components/avatars';
+import Avatar from './components/pages/components/avatar';
 import Badge from './components/pages/components/badge';
 import Buttons from './components/pages/components/buttons';
 import Cards from './components/pages/components/cards';
@@ -77,11 +77,11 @@ const AppRoutes = (
       <Route path="inline-styles" component={InlineStyles} />
     </Route>
 
-    <Redirect from="components" to="/components/appbar" />
+    <Redirect from="components" to="/components/app-bar" />
     <Route path="components" component={Components}>
-      <Route path="appbar" component={AppBar} />
+      <Route path="app-bar" component={AppBar} />
       <Route path="auto-complete" component={AutoComplete} />
-      <Route path="avatars" component={Avatars} />
+      <Route path="avatar" component={Avatar} />
       <Route path="badge" component={Badge} />
       <Route path="buttons" component={Buttons} />
       <Route path="cards" component={Cards} />

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

@@ -1,4 +1,4 @@
-## AppBar
+## App Bar
 
 App bars are a collection of components placed as a static header for an application.
 It is used for navigation, search branding, and actions.

docs/src/app/components/MarkdownElement.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import marked from 'marked';
 import PureRenderMixin from 'react-addons-pure-render-mixin';
+import StylePropable from 'material-ui/lib/mixins/style-propable';
 
 require('./mui-github-markdown.css');
 
@@ -14,6 +15,7 @@ const styles = {
 
 const MarkdownElement = React.createClass({
   propTypes: {
+    style: React.PropTypes.object,
     text: React.PropTypes.string,
   },
   mixins: [
@@ -42,13 +44,14 @@ const MarkdownElement = React.createClass({
 
   render() {
     const {
+      style,
       text,
     } = this.props;
 
 /* eslint-disable */
     return (
       <div
-        style={styles.root}
+        style={StylePropable.mergeStyles(styles.root, style)}
         className="markdown-body"
         dangerouslySetInnerHTML={{__html: marked(text)}}
       />

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

@@ -1,6 +1,30 @@
 import React from 'react';
 import MarkdownElement from '../MarkdownElement';
 import PureRenderMixin from 'react-addons-pure-render-mixin';
+import StylePropable from 'material-ui/lib/mixins/style-propable';
+import FlatButton from 'material-ui/lib/flat-button';
+import Transitions from 'material-ui/lib/styles/transitions';
+
+const LINE_MAX = 17;
+
+const styles = {
+  root: {
+    background: '#f8f8f8',
+    borderTop: 'solid 1px #e0e0e0',
+  },
+  markdown: {
+    overflow: 'auto',
+    maxHeight: 2000,
+    transition: Transitions.easeOut('1s', 'max-height'),
+  },
+  markdownRetracted: {
+    maxHeight: LINE_MAX * 18,
+  },
+  expand: {
+    padding: 10,
+    textAlign: 'center',
+  },
+};
 
 const CodeBlock = React.createClass({
   propTypes: {
@@ -9,14 +33,53 @@ const CodeBlock = React.createClass({
   mixins: [
     PureRenderMixin,
   ],
+  getInitialState: function() {
+    return {
+      expand: false,
+    };
+  },
+  handleTouchTap() {
+    this.setState({
+      expand: !this.state.expand,
+    });
+  },
   render() {
     const text = `\`\`\`js
 ${this.props.children}
     \`\`\``;
 
+    const lineNumber = (text.match(/\n/g) || []).length;
+
+    let expand;
+    let style = styles.markdown;
+
+    if (lineNumber > LINE_MAX) {
+      let label;
+
+      if (this.state.expand) {
+        label = 'Retract the example';
+      } else {
+        style = StylePropable.mergeStyles(styles.markdown, styles.markdownRetracted);
+        label = 'Expand the example';
+      }
+
+      expand = (
+        <div
+          style={styles.expand}
+          onTouchTap={this.handleTouchTap}
+        >
+          <FlatButton label={label} />
+        </div>
+      );
+    }
+
     return (
-      <div className="CodeMirror">
-        <MarkdownElement text={text} />
+      <div style={styles.root}>
+        <MarkdownElement
+          style={style}
+          text={text}
+        />
+        {expand}
       </div>
     );
   },

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

@@ -65,7 +65,6 @@ const CodeExample = React.createClass({
       root: {
         backgroundColor: canvasColor,
         marginBottom: 32,
-        overflow: 'hidden',
       },
       exampleLabel: {
         color: borderColor,

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

@@ -5,9 +5,9 @@ export default class Components extends React.Component {
 
   render() {
     let menuItems = [
-      {route: '/components/appbar', text: 'AppBar'},
+      {route: '/components/app-bar', text: 'App Bar'},
       {route: '/components/auto-complete', text: 'Auto Complete'},
-      {route: '/components/avatars', text: 'Avatars'},
+      {route: '/components/avatar', text: 'Avatar'},
       {route: '/components/badge', text: 'Badge'},
       {route: '/components/buttons', text: 'Buttons'},
       {route: '/components/cards', text: 'Cards'},

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import appBarCode from '!raw!material-ui/app-bar';
+import appBarCode from '!raw!material-ui/lib/app-bar';
 import CodeExample from '../../code-example/code-example';
 import PropTypeDescription from '../../PropTypeDescription';
 import AppBarExampleIcon from '../../AppBar/ExampleIcon';

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import avatarCode from '!raw!material-ui/avatar';
+import avatarCode from '!raw!material-ui/lib/avatar';
 import CodeExample from '../../code-example/code-example';
 import PropTypeDescription from '../../PropTypeDescription';
 import AvatarExampleSimple from '../../Avatar/ExampleSimple';
@@ -8,11 +8,6 @@ import MarkdownElement from '../../MarkdownElement';
 import avatarReadmeText from '../../Avatar/README';
 
 export default class AvatarsPage extends React.Component {
-
-  constructor(props) {
-    super(props);
-  }
-
   render() {
     return (
       <div>

docs/src/www/css/main.css

@@ -4,13 +4,6 @@
 /* hightlight.js for syntax highlighting */
 @import "github.css";
 
-.CodeMirror{
-  overflow: hidden;
-  background: #f8f8f8;
-  border-top: solid 1px #e0e0e0;
-  padding-top: 10px;
-}
-
 a {
   color: #ff4081;
   text-decoration: none;