render children in ComponentExample and add anchor links

Author: levithomason

docs/app/Components/ComponentDoc/ComponentExample.js

@@ -9,6 +9,7 @@ import exampleContext from 'docs/app/utils/ExampleContext';
  */
 export default class ComponentExample extends Component {
   static propTypes = {
+    children: PropTypes.node,
     description: PropTypes.string,
     examplePath: PropTypes.string.isRequired,
     title: PropTypes.string,
@@ -17,11 +18,21 @@ export default class ComponentExample extends Component {
   state = {showCode: false};
   fileContents = require(`!raw!docs/app/Examples/${this.props.examplePath}`);
   component = exampleContext(`./${this.props.examplePath}.js`);
+  // 'elements/Button/Types/Button' => #Button-Types-Button
+  anchor = this.props.examplePath.split('/').slice(1).join('-');
 
   toggleShowCode = () => {
     this.setState({showCode: !this.state.showCode});
   };
 
+  handleMouseEnter = () => {
+    this.setState({showLink: true});
+  };
+
+  handleMouseLeave = () => {
+    this.setState({showLink: false});
+  };
+
   render() {
     const code = (
       <Column>
@@ -31,13 +42,28 @@ export default class ComponentExample extends Component {
       </Column>
     );
 
+    let linkIconStyle = {
+      display: this.state.showLink ? 'inline-block' : 'none',
+      marginLeft: '0.25em',
+    };
+
+    let children = <Column>{this.props.children}</Column>;
+
     return (
-      <Grid className='one column' style={{marginBottom: '4em'}}>
+      <Grid className='one column' style={{marginBottom: '4em'}} id={this.anchor}>
         <Column>
           <Grid>
             <Column width={12}>
-              <h3 className='ui header' style={{marginBottom: 0}}>
+              <h3
+                className='ui header'
+                style={{marginBottom: 0}}
+                onMouseEnter={this.handleMouseEnter}
+                onMouseLeave={this.handleMouseLeave}
+              >
                 {this.props.title}
+                <a href={`#${this.anchor}`}>
+                  <i className='linkify icon' style={linkIconStyle} />
+                </a>
               </h3>
               <p>{this.props.description}</p>
             </Column>
@@ -49,7 +75,7 @@ export default class ComponentExample extends Component {
             </Column>
           </Grid>
         </Column>
-
+        {this.props.children && children}
         <Column>
           {createElement(this.component)}
         </Column>