Add both React and HTML examples for KuiButton.

package.json

@@ -234,6 +234,7 @@
     "gulp-sourcemaps": "1.7.3",
     "highlight.js": "9.0.0",
     "history": "2.1.1",
+    "html": "1.0.0",
     "html-loader": "0.4.3",
     "husky": "0.8.1",
     "image-diff": "1.6.0",

ui_framework/README.md

@@ -1,5 +1,9 @@
 # Kibana UI Framework
 
+> React UI components for quickly building user interfaces for Kibana.
+
+Not using React? No problem! You can still use the CSS behind each component.
+
 ## Development
 
 * Start development server with `npm run uiFramework:start`.

ui_framework/doc_site/src/services/index.js

@@ -1,12 +1,9 @@
+export { renderToHtml } from './string/render_to_html';
 
-export * from './example/create_example';
 export { default as createExample } from './example/create_example';
 
-export * from './js_injector/js_injector';
 export { default as JsInjector } from './js_injector/js_injector';
 
-export * from './routes/routes';
 export { default as Routes } from './routes/routes';
 
-export * from './string/slugify';
 export { default as Slugify } from './string/slugify';

ui_framework/doc_site/src/services/string/render_to_html.js

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import {
+  render,
+} from 'enzyme';
+
+import html from 'html';
+
+export function renderToHtml(componentReference, props = {}) {
+  // Create the React element, render it and get its HTML, then format it prettily.
+  const element = React.createElement(componentReference, props);
+  const htmlString = render(element).html();
+  return html.prettyPrint(htmlString, {
+    indent_size: 2,
+    unformatted: [], // Expand all tags, including spans
+  });
+}

ui_framework/doc_site/src/views/app_view.jsx

@@ -15,7 +15,7 @@ import {
 } from '../components';
 
 // Inject version into header.
-const pkg = require('json!../../../../package.json');
+const pkg = require('../../../../package.json');
 
 export class AppView extends Component {
   constructor(props) {

ui_framework/doc_site/src/views/button/button_example.jsx

@@ -3,6 +3,8 @@ import React, {
   PropTypes,
 } from 'react';
 
+import { renderToHtml } from '../../services';
+
 import {
   GuideDemo,
   GuideLink,
@@ -14,33 +16,43 @@ import {
 
 import Basic from './button_basic';
 const basicSource = require('!!raw!./button_basic');
+const basicHtml = renderToHtml(Basic);
 
 import Hollow from './button_hollow';
 const hollowSource = require('!!raw!./button_hollow');
+const hollowHtml = renderToHtml(Hollow);
 
 import Primary from './button_primary';
 const primarySource = require('!!raw!./button_primary');
+const primaryHtml = renderToHtml(Primary);
 
 import Danger from './button_danger';
 const dangerSource = require('!!raw!./button_danger');
+const dangerHtml = renderToHtml(Danger);
 
 import Loading from './button_loading';
 const loadingSource = require('!!raw!./button_loading');
+const loadingHtml = renderToHtml(Loading, { isLoading: true });
 
 import WithIcon from './button_with_icon';
 const withIconSource = require('!!raw!./button_with_icon');
+const withIconHtml = renderToHtml(WithIcon);
 
 import ButtonGroup from './button_group';
 const buttonGroupSource = require('!!raw!./button_group');
+const buttonGroupHtml = renderToHtml(ButtonGroup);
 
 import ButtonGroupUnited from './button_group_united';
 const buttonGroupUnitedSource = require('!!raw!./button_group_united');
+const buttonGroupUnitedHtml = renderToHtml(ButtonGroupUnited);
 
 import InToolBar from './buttons_in_tool_bar';
 const inToolBarSource = require('!!raw!./buttons_in_tool_bar');
+const inToolBarHtml = renderToHtml(InToolBar);
 
 import Elements from './button_elements';
 const elementsSource = require('!!raw!./button_elements');
+const elementsHtml = renderToHtml(Elements);
 
 export default props => (
   <GuidePage title={props.route.name}>
@@ -49,6 +61,9 @@ export default props => (
       source={[{
         type: GuideSectionTypes.JS,
         code: basicSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: basicHtml,
       }]}
     >
       <GuideText>
@@ -65,6 +80,9 @@ export default props => (
       source={[{
         type: GuideSectionTypes.JS,
         code: hollowSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: hollowHtml,
       }]}
     >
       <GuideText>
@@ -81,6 +99,9 @@ export default props => (
       source={[{
         type: GuideSectionTypes.JS,
         code: primarySource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: primaryHtml,
       }]}
     >
       <GuideText>
@@ -98,6 +119,9 @@ export default props => (
       source={[{
         type: GuideSectionTypes.JS,
         code: dangerSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: dangerHtml,
       }]}
     >
       <GuideText>
@@ -114,6 +138,9 @@ export default props => (
       source={[{
         type: GuideSectionTypes.JS,
         code: loadingSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: loadingHtml,
       }]}
     >
       <GuideDemo>
@@ -126,6 +153,9 @@ export default props => (
       source={[{
         type: GuideSectionTypes.JS,
         code: withIconSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: withIconHtml,
       }]}
     >
       <GuideText>
@@ -143,6 +173,9 @@ export default props => (
       source={[{
         type: GuideSectionTypes.JS,
         code: buttonGroupSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: buttonGroupHtml,
       }]}
     >
       <GuideDemo>
@@ -155,6 +188,9 @@ export default props => (
       source={[{
         type: GuideSectionTypes.JS,
         code: buttonGroupUnitedSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: buttonGroupUnitedHtml,
       }]}
     >
       <GuideText>
@@ -177,6 +213,9 @@ export default props => (
       source={[{
         type: GuideSectionTypes.JS,
         code: inToolBarSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: inToolBarHtml,
       }]}
     >
       <GuideText>
@@ -193,6 +232,9 @@ export default props => (
       source={[{
         type: GuideSectionTypes.JS,
         code: elementsSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: elementsHtml,
       }]}
     >
       <GuideText>

ui_framework/doc_site/src/views/button/button_loading.js

@@ -9,11 +9,11 @@ import {
 } from '../../../../components';
 
 export default class LoadingButton extends Component {
-  constructor() {
+  constructor(props) {
     super();
 
     this.state = {
-      isLoading: false,
+      isLoading: props.isLoading || false,
     };
 
     this.onClick = this.onClick.bind(this);

ui_framework/doc_site/webpack.config.js

@@ -18,8 +18,17 @@ module.exports = {
     ]
   },
 
+  externals: {
+    'react/lib/ExecutionEnvironment': true,
+    'react/lib/ReactContext': true,
+    'react/addons': true,
+  },
+
   module: {
     loaders: [{
+      test: /\.json$/,
+      loader: 'json-loader',
+    }, {
       test: /\.jsx?$/,
       loader: 'babel',
       exclude: /node_modules/,