Added props-doc to the TableOfRecords example (#2)

- since the default props docs don't support rich props hierarchy, we construct the docgen info ourselves.
- changes the styling of the props docs
- introduced a special `_euiObjectType` field in docgenInfo "mark" the documented component as a "type" rather than a react component
- added internal links between the different types

src-docs/src/components/guide_section/guide_section.js

@@ -22,6 +22,7 @@ import {
   EuiText,
   EuiTextColor,
   EuiTitle,
+  EuiLink
 } from '../../../../src/components';
 
 
@@ -139,7 +140,7 @@ export class GuideSection extends Component {
     }
 
     const docgenInfo = Array.isArray(component.__docgenInfo) ? component.__docgenInfo[0] : component.__docgenInfo;
-    const { description, props } = docgenInfo;
+    const { _euiObjectType, description, props } = docgenInfo;
 
     if (!props && !description) {
       return;
@@ -169,14 +170,30 @@ export class GuideSection extends Component {
 
       const humanizedType = humanizeType(type);
 
+      function markup(text) {
+        const regex = /(#[a-zA-Z]+)/;
+        return text.split(regex).map(token => {
+          if (!token.startsWith('#')) {
+            return token;
+          }
+          const id = token.substring(1);
+          const onClick = () => {
+            document.getElementById(id).scrollIntoView();
+          };
+          return <EuiLink onClick={onClick}>{id}</EuiLink>;
+        });
+      }
+
+      const typeMarkup = markup(humanizedType);
+
       const cells = [
         (
           <EuiTableRowCell key="name">
             {humanizedName}
           </EuiTableRowCell>
         ), (
           <EuiTableRowCell key="type">
-            <EuiCode>{humanizedType}</EuiCode>
+            <EuiCode>{typeMarkup}</EuiCode>
           </EuiTableRowCell>
         ), (
           <EuiTableRowCell key="defaultValue">
@@ -196,6 +213,10 @@ export class GuideSection extends Component {
       );
     });
 
+    const title = _euiObjectType === 'type' ?
+      <EuiCode id={componentName}>{componentName}</EuiCode> :
+      <EuiText color="accent">{componentName}</EuiText>;
+
     let descriptionElement;
 
     if (description) {
@@ -241,7 +262,7 @@ export class GuideSection extends Component {
 
     return [
       <EuiSpacer size="m" key={`propsSpacer-${componentName}-1`} />,
-      <EuiTitle size="s" key={`propsName-${componentName}`}><h3>Props for {componentName}</h3></EuiTitle>,
+      <EuiTitle size="s" key={`propsName-${componentName}`}><h3>{title}</h3></EuiTitle>,
       <EuiSpacer size="s" key={`propsSpacer-${componentName}-2`} />,
       descriptionElement,
       table,