EuiTableOfRecords component

package.json

@@ -29,6 +29,7 @@
     "jquery": "^3.2.1",
     "keymirror": "^0.1.1",
     "lodash": "^4.17.4",
+    "numeral": "^2.0.6",
     "prop-types": "^15.6.0",
     "react-ace": "^5.5.0",
     "serve": "^6.3.1",
@@ -52,7 +53,6 @@
     "babel-preset-env": "^1.6.1",
     "babel-preset-react": "^6.24.1",
     "chokidar": "^1.7.0",
-    "eslint-plugin-jest": "^21.6.2",
     "circular-dependency-plugin": "^4.3.0",
     "css-loader": "^0.28.7",
     "enzyme": "^3.1.0",
@@ -62,6 +62,7 @@
     "eslint-import-resolver-webpack": "^0.8.3",
     "eslint-plugin-babel": "^4.1.2",
     "eslint-plugin-import": "^2.8.0",
+    "eslint-plugin-jest": "^21.6.2",
     "eslint-plugin-jsx-a11y": "^6.0.2",
     "eslint-plugin-mocha": "^4.11.0",
     "eslint-plugin-prefer-object-spread": "^1.2.1",
@@ -72,6 +73,7 @@
     "jest": "^22.0.6",
     "jest-cli": "^22.0.6",
     "lodash": "^4.17.4",
+    "moment": "2.13.0",
     "node-sass": "^4.5.3",
     "npm-run": "^4.1.2",
     "postcss-cli": "^4.1.1",
@@ -97,6 +99,7 @@
     "yo": "^2.0.0"
   },
   "peerDependencies": {
+    "moment": "^2.13.0",
     "react": "^16.2.0 || ^16.2"
   }
 }

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,22 +170,53 @@ export class GuideSection extends Component {
 
       const humanizedType = humanizeType(type);
 
+      function markup(text) {
+        const regex = /(#[a-zA-Z]+)|(`[^`]+`)/g;
+        return text.split(regex).map(token => {
+          if (!token) {
+            return '';
+          }
+          if (token.startsWith('#')) {
+            const id = token.substring(1);
+            const onClick = () => {
+              document.getElementById(id).scrollIntoView();
+            };
+            return <EuiLink onClick={onClick}>{id}</EuiLink>;
+          }
+          if (token.startsWith('`')) {
+            const code = token.substring(1, token.length - 1);
+            return <EuiCode>{code}</EuiCode>;
+          }
+          return token;
+
+        });
+      }
+
+      const typeMarkup = markup(humanizedType);
+      const descriptionMarkup = markup(propDescription);
+      let defaultValueMarkup = '';
+      if (defaultValue) {
+        defaultValueMarkup = [ <EuiCode>{defaultValue.value}</EuiCode> ];
+        if (defaultValue.comment) {
+          defaultValueMarkup.push(`(${defaultValue.comment})`);
+        }
+      }
       const cells = [
         (
           <EuiTableRowCell key="name">
             {humanizedName}
           </EuiTableRowCell>
         ), (
           <EuiTableRowCell key="type">
-            <EuiCode>{humanizedType}</EuiCode>
+            <EuiCode>{typeMarkup}</EuiCode>
           </EuiTableRowCell>
         ), (
           <EuiTableRowCell key="defaultValue">
-            {defaultValue ? <EuiCode>{defaultValue.value}</EuiCode> : ''}
+            {defaultValueMarkup}
           </EuiTableRowCell>
         ), (
           <EuiTableRowCell key="description">
-            {propDescription}
+            {descriptionMarkup}
           </EuiTableRowCell>
         )
       ];
@@ -196,6 +228,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 +277,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,

src-docs/src/routes.js

@@ -136,6 +136,9 @@ import { StepsExample }
 import { TableExample }
   from './views/table/table_example';
 
+import { TableOfRecordsExample }
+  from './views/table_of_records/table_of_records_example';
+
 import { TabsExample }
   from './views/tabs/tabs_example';
 
@@ -238,6 +241,7 @@ const components = [
   SpacerExample,
   StepsExample,
   TableExample,
+  TableOfRecordsExample,
   TabsExample,
   TextExample,
   TitleExample,

src-docs/src/views/table_of_records/column_data_types.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import { times } from 'lodash';
+
+import {
+  Random
+} from '../../../../src/services';
+
+import {
+  EuiTableOfRecords,
+} from '../../../../src/components';
+
+const random = new Random();
+
+const records = times(5, (index) => {
+  return {
+    id: index,
+    string: random.oneOf('Martijn', 'Elissa', 'Clinton', 'Igor', 'Karl', 'Drew', 'Honza', 'Rashid', 'Jordan'),
+    number: random.integer({ min: 0, max: 2000000 }),
+    boolean: random.boolean(),
+    date: random.date({ min: new Date(1971, 0, 0), max: new Date(1990, 0, 0) })
+  };
+});
+
+const model = {
+  data: { records }
+};
+
+const config = {
+  recordId: 'id',
+  columns: [
+    {
+      field: 'string',
+      name: 'string',
+      dataType: 'string',
+    },
+    {
+      field: 'number',
+      name: 'number',
+      dataType: 'number'
+    },
+    {
+      field: 'boolean',
+      name: 'boolean',
+      dataType: 'boolean'
+    },
+    {
+      field: 'date',
+      name: 'date',
+      dataType: 'date'
+    },
+  ],
+};
+
+export default () => {
+  return <EuiTableOfRecords config={config} model={model} />;
+};