autofix all violations

Gruntfile.js

@@ -19,7 +19,7 @@
 
 require('./src/setup_node_env');
 
-module.exports = function (grunt) {
+module.exports = function(grunt) {
   // set the config once before calling load-grunt-config
   // and once during so that we have access to it via
   // grunt.config.get() within the config files
@@ -35,8 +35,8 @@ module.exports = function (grunt) {
     init: true,
     config: config,
     loadGruntTasks: {
-      pattern: ['grunt-*', '@*/grunt-*', 'gruntify-*', '@*/gruntify-*']
+      pattern: ['grunt-*', '@*/grunt-*', 'gruntify-*', '@*/gruntify-*'],
-    }
+    },
   });
 
   // load task definitions

packages/kbn-analytics/babel.config.js

@@ -22,7 +22,7 @@ module.exports = {
   plugins: ['@babel/plugin-proposal-class-properties'],
   env: {
     web: {
-      presets: ['@kbn/babel-preset/webpack_preset']
+      presets: ['@kbn/babel-preset/webpack_preset'],
     },
     node: {
       presets: ['@kbn/babel-preset/node_preset'],

packages/kbn-babel-code-parser/src/can_require.js

@@ -28,7 +28,7 @@ export function canRequire(entry, cwd = require.resolve.paths(entry) || []) {
     // looking recursively as normal starting
     // from those locations.
     return require.resolve(entry, {
-      paths: [].concat(cwd)
+      paths: [].concat(cwd),
     });
   } catch (e) {
     return false;

packages/kbn-babel-code-parser/src/code_parser.js

@@ -81,7 +81,7 @@ export async function parseEntries(cwd, entries, strategy, results, wasParsed =
   // Test each entry against canRequire function
   const entriesQueue = entries.map(entry => canRequire(entry));
 
-  while(entriesQueue.length) {
+  while (entriesQueue.length) {
     // Get the first element in the queue as
     // select it as our current entry to parse
     const mainEntry = entriesQueue.shift();
@@ -93,7 +93,9 @@ export async function parseEntries(cwd, entries, strategy, results, wasParsed =
     }
 
     // Find new entries and adds them to the end of the queue
-    entriesQueue.push(...(await strategy(sanitizedCwd, parseSingleFile, mainEntry, wasParsed, results)));
+    entriesQueue.push(
+      ...(await strategy(sanitizedCwd, parseSingleFile, mainEntry, wasParsed, results))
+    );
 
     // Mark the current main entry as already parsed
     wasParsed[mainEntry] = true;

packages/kbn-babel-code-parser/src/strategies.test.js

@@ -23,11 +23,11 @@ import { parseSingleFile } from './code_parser';
 import { _calculateTopLevelDependency, dependenciesParseStrategy } from './strategies';
 
 jest.mock('./can_require', () => ({
-  canRequire: jest.fn()
+  canRequire: jest.fn(),
 }));
 
 jest.mock('fs', () => ({
-  readFile: jest.fn()
+  readFile: jest.fn(),
 }));
 
 const mockCwd = '/tmp/project/dir/';
@@ -69,7 +69,13 @@ describe('Code Parser Strategies', () => {
       }
     });
 
-    const results = await dependenciesParseStrategy(mockCwd, parseSingleFile, 'dep1/file.js', {}, {});
+    const results = await dependenciesParseStrategy(
+      mockCwd,
+      parseSingleFile,
+      'dep1/file.js',
+      {},
+      {}
+    );
     expect(results[0]).toBe(`${mockCwd}node_modules/dep_from_node_modules/index.js`);
   });
 
@@ -78,7 +84,7 @@ describe('Code Parser Strategies', () => {
       cb(null, `require('./relative_dep')`);
     });
 
-    canRequire.mockImplementation((entry) => {
+    canRequire.mockImplementation(entry => {
       if (entry === `${mockCwd}dep1/relative_dep`) {
         return `${entry}/index.js`;
       }
@@ -86,7 +92,13 @@ describe('Code Parser Strategies', () => {
       return false;
     });
 
-    const results = await dependenciesParseStrategy(mockCwd, parseSingleFile, 'dep1/file.js', {}, {});
+    const results = await dependenciesParseStrategy(
+      mockCwd,
+      parseSingleFile,
+      'dep1/file.js',
+      {},
+      {}
+    );
     expect(results[0]).toBe(`${mockCwd}dep1/relative_dep/index.js`);
   });
 

packages/kbn-babel-code-parser/src/visitors.js

@@ -21,29 +21,29 @@ export function dependenciesVisitorsGenerator(dependenciesAcc) {
       // raw values on require + require.resolve
       CallExpression: ({ node }) => {
         // AST check for require expressions
-        const isRequire = (node) => {
+        const isRequire = node => {
           return matches({
             callee: {
               type: 'Identifier',
-              name: 'require'
+              name: 'require',
-            }
+            },
           })(node);
         };
 
         // AST check for require.resolve expressions
-        const isRequireResolve = (node) => {
+        const isRequireResolve = node => {
           return matches({
             callee: {
               type: 'MemberExpression',
               object: {
                 type: 'Identifier',
-                name: 'require'
+                name: 'require',
               },
               property: {
                 type: 'Identifier',
-                name: 'resolve'
+                name: 'resolve',
-              }
+              },
-            }
+            },
           })(node);
         };
 
@@ -66,12 +66,12 @@ export function dependenciesVisitorsGenerator(dependenciesAcc) {
       // raw values on import
       ImportDeclaration: ({ node }) => {
         // AST check for supported import expressions
-        const isImport = (node) => {
+        const isImport = node => {
           return matches({
             type: 'ImportDeclaration',
             source: {
-              type: 'StringLiteral'
+              type: 'StringLiteral',
-            }
+            },
           })(node);
         };
 
@@ -85,12 +85,12 @@ export function dependenciesVisitorsGenerator(dependenciesAcc) {
       // raw values on export from
       ExportNamedDeclaration: ({ node }) => {
         // AST check for supported export from expressions
-        const isExportFrom = (node) => {
+        const isExportFrom = node => {
           return matches({
             type: 'ExportNamedDeclaration',
             source: {
-              type: 'StringLiteral'
+              type: 'StringLiteral',
-            }
+            },
           })(node);
         };
 
@@ -104,12 +104,12 @@ export function dependenciesVisitorsGenerator(dependenciesAcc) {
       // raw values on export * from
       ExportAllDeclaration: ({ node }) => {
         // AST check for supported export * from expressions
-        const isExportAllFrom = (node) => {
+        const isExportAllFrom = node => {
           return matches({
             type: 'ExportAllDeclaration',
             source: {
-              type: 'StringLiteral'
+              type: 'StringLiteral',
-            }
+            },
           })(node);
         };
 
@@ -118,7 +118,7 @@ export function dependenciesVisitorsGenerator(dependenciesAcc) {
           const exportAllFromSource = node.source;
           dependenciesAcc.push(exportAllFromSource.value);
         }
-      }
+      },
     };
   })();
 }

packages/kbn-babel-code-parser/src/visitors.test.js

@@ -21,12 +21,12 @@ import * as parser from '@babel/parser';
 import traverse from '@babel/traverse';
 import { dependenciesVisitorsGenerator } from './visitors';
 
-const visitorsApplier = (code) => {
+const visitorsApplier = code => {
   const result = [];
   traverse(
     parser.parse(code, {
       sourceType: 'unambiguous',
-      plugins: ['exportDefaultFrom']
+      plugins: ['exportDefaultFrom'],
     }),
     dependenciesVisitorsGenerator(result)
   );

packages/kbn-babel-preset/common_babel_parser_options.js

@@ -28,6 +28,6 @@ module.exports = {
     'exportDefaultFrom',
     'exportNamespaceFrom',
     'objectRestSpread',
-    'throwExpressions'
+    'throwExpressions',
   ],
 };

packages/kbn-babel-preset/istanbul_preset.js

@@ -17,9 +17,8 @@
  * under the License.
  */
 
-
 module.exports = () => {
   return {
-    plugins: ['istanbul']
+    plugins: ['istanbul'],
   };
 };

packages/kbn-babel-preset/node_preset.js

@@ -20,21 +20,19 @@
 module.exports = (_, options = {}) => {
   const overrides = [];
   if (!process.env.ALLOW_PERFORMANCE_HOOKS_IN_TASK_MANAGER) {
-    overrides.push(
+    overrides.push({
-      {
+      test: [/x-pack[\/\\]legacy[\/\\]plugins[\/\\]task_manager/],
-        test: [/x-pack[\/\\]legacy[\/\\]plugins[\/\\]task_manager/],
+      plugins: [
-        plugins: [
+        [
-          [
+          require.resolve('babel-plugin-filter-imports'),
-            require.resolve('babel-plugin-filter-imports'),
+          {
-            {
+            imports: {
-              imports: {
+              perf_hooks: ['performance'],
-                perf_hooks: ['performance'],
-              },
             },
-          ],
+          },
         ],
-      }
+      ],
-    );
+    });
   }
 
   return {

packages/kbn-interpreter/src/common/lib/get_by_alias.test.js

@@ -25,7 +25,10 @@ describe('getByAlias', () => {
     bar: { name: 'bar', aliases: ['b'] },
   };
 
-  const fnsArray = [{ name: 'foo', aliases: ['f'] }, { name: 'bar', aliases: ['b'] }];
+  const fnsArray = [
+    { name: 'foo', aliases: ['f'] },
+    { name: 'bar', aliases: ['b'] },
+  ];
 
   it('returns the function by name', () => {
     expect(getByAlias(fnsObject, 'foo')).toBe(fnsObject.foo);

packages/kbn-interpreter/src/common/registries.js

@@ -17,7 +17,6 @@
  * under the License.
  */
 
-
 /**
  * Add a new set of registries to an existing set of registries.
  *

packages/kbn-interpreter/tasks/build/cli.js

@@ -24,27 +24,19 @@ const del = require('del');
 const supportsColor = require('supports-color');
 const { ToolingLog, withProcRunner, pickLevelFromFlags } = require('@kbn/dev-utils');
 
-const {
+const { ROOT_DIR, BUILD_DIR } = require('./paths');
-  ROOT_DIR,
-  BUILD_DIR,
-} = require('./paths');
 
 const unknownFlags = [];
 const flags = getopts(process.argv, {
-  boolean: [
+  boolean: ['watch', 'dev', 'help', 'debug'],
-    'watch',
-    'dev',
-    'help',
-    'debug'
-  ],
   unknown(name) {
     unknownFlags.push(name);
-  }
+  },
 });
 
 const log = new ToolingLog({
   level: pickLevelFromFlags(flags),
-  writeTo: process.stdout
+  writeTo: process.stdout,
 });
 
 if (unknownFlags.length) {
@@ -64,7 +56,7 @@ if (flags.help) {
   process.exit();
 }
 
-withProcRunner(log, async (proc) => {
+withProcRunner(log, async proc => {
   log.info('Deleting old output');
   await del(BUILD_DIR);
 
@@ -80,20 +72,22 @@ withProcRunner(log, async (proc) => {
       cmd: 'babel',
       args: [
         'src',
-        '--ignore', `*.test.js`,
+        '--ignore',
-        '--out-dir', relative(cwd, BUILD_DIR),
+        `*.test.js`,
+        '--out-dir',
+        relative(cwd, BUILD_DIR),
         '--copy-files',
         ...(flags.dev ? ['--source-maps', 'inline'] : []),
-        ...(flags.watch ? ['--watch'] : ['--quiet'])
+        ...(flags.watch ? ['--watch'] : ['--quiet']),
       ],
       wait: true,
       env,
-      cwd
+      cwd,
     }),
   ]);
 
   log.success('Complete');
-}).catch((error) => {
+}).catch(error => {
   log.error(error);
   process.exit(1);
 });

packages/kbn-interpreter/tasks/build/paths.js

@@ -24,4 +24,3 @@ exports.SOURCE_DIR = resolve(exports.ROOT_DIR, 'src');
 exports.BUILD_DIR = resolve(exports.ROOT_DIR, 'target');
 
 exports.BABEL_PRESET_PATH = require.resolve('@kbn/babel-preset/webpack_preset');
-

packages/kbn-interpreter/tasks/build/server_code_transformer.js

@@ -21,7 +21,7 @@ const { extname } = require('path');
 
 const { transform } = require('@babel/core');
 
-exports.createServerCodeTransformer = (sourceMaps) => {
+exports.createServerCodeTransformer = sourceMaps => {
   return (content, path) => {
     switch (extname(path)) {
       case '.js':

packages/kbn-spec-to-console/bin/spec_to_console.js

@@ -17,7 +17,6 @@
  * under the License.
  */
 
-
 const fs = require('fs');
 const path = require('path');
 const program = require('commander');
@@ -48,7 +47,7 @@ files.forEach(file => {
     try {
       fs.mkdirSync(program.directory, { recursive: true });
       fs.writeFileSync(outputPath, output + '\n');
-    } catch(e) {
+    } catch (e) {
       console.log('Cannot write file ', e);
     }
   } else {

packages/kbn-spec-to-console/index.js

@@ -17,6 +17,5 @@
  * under the License.
  */
 
-
 const convert = require('./lib/convert');
 module.exports = convert;

packages/kbn-spec-to-console/lib/convert.test.js

@@ -17,7 +17,6 @@
  * under the License.
  */
 
-
 const convert = require('./convert');
 
 const clusterHealthSpec = require('../test/fixtures/cluster_health_spec');

packages/kbn-spec-to-console/lib/convert/methods.js

@@ -17,7 +17,6 @@
  * under the License.
  */
 
-
 module.exports = methods => {
   return methods;
 };

packages/kbn-spec-to-console/lib/convert/params.js

@@ -17,7 +17,6 @@
  * under the License.
  */
 
-
 module.exports = params => {
   const result = {};
   Object.keys(params).forEach(param => {

packages/kbn-ui-framework/Gruntfile.js

@@ -26,7 +26,7 @@ const debounce = require('lodash/function/debounce');
 const platform = require('os').platform();
 const isPlatformWindows = /^win/.test(platform);
 
-module.exports = function (grunt) {
+module.exports = function(grunt) {
   grunt.initConfig({
     clean: {
       target: ['target'],
@@ -43,23 +43,18 @@ module.exports = function (grunt) {
           '!**/__snapshots__/**/*',
         ],
         dest: 'target',
-      }
+      },
     },
     babel: {
       prodBuild: {
         expand: true,
-        src: [
+        src: ['target/components/**/*.js', 'target/src/**/*.js'],
-          'target/components/**/*.js',
-          'target/src/**/*.js',
-        ],
         dest: '.',
         options: {
-          presets: [
+          presets: [require.resolve('@kbn/babel-preset/webpack_preset')],
-            require.resolve('@kbn/babel-preset/webpack_preset')
-          ]
         },
-      }
+      },
-    }
+    },
   });
 
   grunt.loadNpmTasks('grunt-babel');
@@ -67,7 +62,7 @@ module.exports = function (grunt) {
   grunt.loadNpmTasks('grunt-contrib-copy');
   grunt.registerTask('prodBuild', ['clean:target', 'copy:makeProdBuild', 'babel:prodBuild']);
 
-  grunt.registerTask('docSiteBuild', function () {
+  grunt.registerTask('docSiteBuild', function() {
     const done = this.async();
 
     const serverCmd = {
@@ -77,7 +72,7 @@ module.exports = function (grunt) {
         '--config=doc_site/webpack.config.js',
         '--devtool=null', // Prevent the source map from being generated
       ],
-      opts: { stdio: 'inherit' }
+      opts: { stdio: 'inherit' },
     };
 
     const uiFrameworkServerBuild = new Promise((resolve, reject) => {
@@ -99,24 +94,26 @@ module.exports = function (grunt) {
     uiFrameworkServerBuild.then(done);
   });
 
-  grunt.registerTask('docSiteStart', function () {
+  grunt.registerTask('docSiteStart', function() {
     const done = this.async();
     Promise.all([uiFrameworkWatch(), uiFrameworkServerStart()]).then(done);
   });
 
-  grunt.registerTask('compileCssLight', function () {
+  grunt.registerTask('compileCssLight', function() {
     const done = this.async();
     uiFrameworkCompileLight().then(done);
   });
 
-  grunt.registerTask('compileCssDark', function () {
+  grunt.registerTask('compileCssDark', function() {
     const done = this.async();
     uiFrameworkCompileDark().then(done);
   });
 
   function uiFrameworkServerStart() {
     const serverCmd = {
-      cmd: isPlatformWindows ? '.\\node_modules\\.bin\\webpack-dev-server.cmd' : './node_modules/.bin/webpack-dev-server',
+      cmd: isPlatformWindows
+        ? '.\\node_modules\\.bin\\webpack-dev-server.cmd'
+        : './node_modules/.bin/webpack-dev-server',
       args: [
         '--config=doc_site/webpack.config.js',
         '--hot',
@@ -125,7 +122,7 @@ module.exports = function (grunt) {
         '--host=0.0.0.0',
         '--port=8020',
       ],
-      opts: { stdio: 'inherit' }
+      opts: { stdio: 'inherit' },
     };
 
     return new Promise((resolve, reject) => {
@@ -142,7 +139,6 @@ module.exports = function (grunt) {
 
         resolve();
       });
-
     });
   }
 
@@ -151,25 +147,28 @@ module.exports = function (grunt) {
     const dest = 'dist/kui_light.css';
 
     return new Promise(resolve => {
-      sass.render({
+      sass.render(
-        file: src,
+        {
-      }, function (error, result) {
+          file: src,
-        if (error) {
+        },
-          grunt.log.error(error);
+        function(error, result) {
+          if (error) {
+            grunt.log.error(error);
+          }
+
+          postcss([postcssConfig])
+            .process(result.css, { from: src, to: dest })
+            .then(result => {
+              grunt.file.write(dest, result.css);
+
+              if (result.map) {
+                grunt.file.write(`${dest}.map`, result.map);
+              }
+
+              resolve();
+            });
         }
-
+      );
-        postcss([postcssConfig])
-          .process(result.css, { from: src, to: dest })
-          .then(result => {
-            grunt.file.write(dest, result.css);
-
-            if (result.map) {
-              grunt.file.write(`${dest}.map`, result.map);
-            }
-
-            resolve();
-          });
-      });
     });
   }
 
@@ -178,46 +177,55 @@ module.exports = function (grunt) {
     const dest = 'dist/kui_dark.css';
 
     return new Promise(resolve => {
-      sass.render({
+      sass.render(
-        file: src,
+        {
-      }, function (error, result) {
+          file: src,
-        if (error) {
+        },
-          grunt.log.error(error);
+        function(error, result) {
+          if (error) {
+            grunt.log.error(error);
+          }
+
+          postcss([postcssConfig])
+            .process(result.css, { from: src, to: dest })
+            .then(result => {
+              grunt.file.write(dest, result.css);
+
+              if (result.map) {
+                grunt.file.write(`${dest}.map`, result.map);
+              }
+
+              resolve();
+            });
         }
-
+      );
-        postcss([postcssConfig])
-          .process(result.css, { from: src, to: dest })
-          .then(result => {
-            grunt.file.write(dest, result.css);
-
-            if (result.map) {
-              grunt.file.write(`${dest}.map`, result.map);
-            }
-
-            resolve();
-          });
-      });
     });
   }
 
   function uiFrameworkWatch() {
-    const debouncedCompile = debounce(() => {
+    const debouncedCompile = debounce(
-      // Compile the SCSS in a separate process because node-sass throws a fatal error if it fails
+      () => {
-      // to compile.
+        // Compile the SCSS in a separate process because node-sass throws a fatal error if it fails
-      grunt.util.spawn({
+        // to compile.
-        cmd: isPlatformWindows ? '.\\node_modules\\.bin\\grunt.cmd' : './node_modules/.bin/grunt',
+        grunt.util.spawn(
-        args: [
+          {
-          'compileCssLight',
+            cmd: isPlatformWindows
-          'compileCssDark',
+              ? '.\\node_modules\\.bin\\grunt.cmd'
-        ],
+              : './node_modules/.bin/grunt',
-      }, (error, result) => {
+            args: ['compileCssLight', 'compileCssDark'],
-        if (error) {
+          },
-          grunt.log.error(result.stdout);
+          (error, result) => {
-        } else {
+            if (error) {
-          grunt.log.writeln(result);
+              grunt.log.error(result.stdout);
-        }
+            } else {
-      });
+              grunt.log.writeln(result);
-    }, 400, { leading: true });
+            }
+          }
+        );
+      },
+      400,
+      { leading: true }
+    );
 
     return new Promise(() => {
       debouncedCompile();

packages/kbn-ui-framework/doc_site/postcss.config.js

@@ -18,7 +18,5 @@
  */
 
 module.exports = {
-  plugins: [
+  plugins: [require('autoprefixer')()],
-    require('autoprefixer')()
-  ]
 };

packages/kbn-ui-framework/doc_site/src/actions/action_types.js

@@ -17,11 +17,9 @@
  * under the License.
  */
 
-
 import keyMirror from 'keymirror';
 
 export default keyMirror({
-
   // Source code viewer actions
   OPEN_CODE_VIEWER: null,
   CLOSE_CODE_VIEWER: null,
@@ -33,5 +31,4 @@ export default keyMirror({
   // Example nav actions
   REGISTER_SECTION: null,
   UNREGISTER_SECTION: null,
-
 });

packages/kbn-ui-framework/doc_site/src/actions/index.js

@@ -17,17 +17,8 @@
  * under the License.
  */
 
-export {
+export { openCodeViewer, closeCodeViewer } from './code_viewer_actions';
-  openCodeViewer,
-  closeCodeViewer,
-} from './code_viewer_actions';
 
-export {
+export { openSandbox, closeSandbox } from './sandbox_actions';
-  openSandbox,
-  closeSandbox,
-} from './sandbox_actions';
 
-export {
+export { registerSection, unregisterSection } from './example_nav_actions';
-  registerSection,
-  unregisterSection,
-} from './example_nav_actions';

packages/kbn-ui-framework/doc_site/src/components/guide_code/guide_code.js

@@ -19,6 +19,4 @@
 
 import React from 'react';
 
-export const GuideCode = props => (
+export const GuideCode = props => <code className="guideCode">{props.children}</code>;
-  <code className="guideCode">{props.children}</code>
-);

packages/kbn-ui-framework/doc_site/src/components/guide_code_viewer/guide_code_viewer.js

@@ -49,14 +49,9 @@ export class GuideCodeViewer extends Component {
     if (code) {
       return (
         <div className="guideCodeViewer__section" key={type}>
-          <div className="guideCodeViewer__title">
+          <div className="guideCodeViewer__title">{type}</div>
-            {type}
-          </div>
           <pre className="guideCodeViewer__content">
-            <code
+            <code ref={codeClass} className={codeClass}>
-              ref={codeClass}
-              className={codeClass}
-            >
               {code}
             </code>
           </pre>
@@ -70,20 +65,15 @@ export class GuideCodeViewer extends Component {
       'is-code-viewer-open': this.props.isOpen,
     });
 
-    const codeSections = this.props.source.map(sourceObject => (
+    const codeSections = this.props.source.map(sourceObject =>
       this.renderSection(sourceObject.type, sourceObject.code)
-    ));
+    );
 
     return (
       <div className={classes}>
-        <div className="guideCodeViewer__header">
+        <div className="guideCodeViewer__header">{this.props.title}</div>
-          {this.props.title}
-        </div>
 
-        <div
+        <div className="guideCodeViewer__closeButton fa fa-times" onClick={this.props.onClose} />
-          className="guideCodeViewer__closeButton fa fa-times"
-          onClick={this.props.onClose}
-        />
 
         {codeSections}
       </div>

packages/kbn-ui-framework/doc_site/src/components/guide_demo/guide_demo.js

@@ -68,11 +68,7 @@ export class GuideDemo extends Component {
     });
 
     return (
-      <div
+      <div className={classes} ref={c => (this.content = c)} {...rest}>
-        className={classes}
-        ref={c => (this.content = c)}
-        {...rest}
-      >
         {children}
       </div>
     );

packages/kbn-ui-framework/doc_site/src/components/guide_link/guide_link.js

@@ -20,11 +20,7 @@
 import React from 'react';
 
 export const GuideLink = props => (
-  <a
+  <a href={props.href} target={props.target} className="guideLink">
-    href={props.href}
-    target={props.target}
-    className="guideLink"
-  >
     {props.children}
   </a>
 );

packages/kbn-ui-framework/doc_site/src/components/guide_nav/guide_nav.js

@@ -59,11 +59,7 @@ export class GuideNav extends Component {
   }
 
   renderNoItems(name) {
-    return (
+    return <p className="guideNavNoItems">{`No ${name} match your search`}</p>;
-      <p className="guideNavNoItems">
-        { `No ${name} match your search` }
-      </p>
-    );
   }
 
   renderPagination() {
@@ -85,10 +81,7 @@ export class GuideNav extends Component {
     });
 
     const nextButton = (
-      <Link
+      <Link className={nextClasses} to={this.state.nextRoute ? this.state.nextRoute.path : ''}>
-        className={nextClasses}
-        to={this.state.nextRoute ? this.state.nextRoute.path : ''}
-      >
         <span className="fa fa-angle-right" />
       </Link>
     );
@@ -126,21 +119,13 @@ export class GuideNav extends Component {
       'is-menu-button-pinned': this.props.isNavOpen,
     });
 
-    const componentNavItems =
+    const componentNavItems = this.props.components
-      this.props.components.filter(item => (
+      .filter(item => item.name.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1)
-        item.name.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1
+      .map((item, index) => {
-      )).map((item, index) => {
+        const icon = item.hasReact ? <div className="guideNavItem__reactLogo" /> : undefined;
-        const icon =
-          item.hasReact
-            ? <div className="guideNavItem__reactLogo" />
-            : undefined;
         return (
           <div key={`componentNavItem-${index}`} className="guideNavItem">
-            <Link
+            <Link className="guideNavItem__link" to={item.path} onClick={this.props.onClickNavItem}>
-              className="guideNavItem__link"
-              to={item.path}
-              onClick={this.props.onClickNavItem}
-            >
               {item.name}
             </Link>
 
@@ -149,21 +134,13 @@ export class GuideNav extends Component {
         );
       });
 
-    const sandboxNavItems =
+    const sandboxNavItems = this.props.sandboxes
-      this.props.sandboxes.filter(item => (
+      .filter(item => item.name.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1)
-        item.name.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1
+      .map((item, index) => {
-      )).map((item, index) => {
+        const icon = item.hasReact ? <div className="guideNavItem__reactLogo" /> : undefined;
-        const icon =
-          item.hasReact
-            ? <div className="guideNavItem__reactLogo" />
-            : undefined;
         return (
           <div key={`sandboxNavItem-${index}`} className="guideNavItem">
-            <Link
+            <Link className="guideNavItem__link" to={item.path} onClick={this.props.onClickNavItem}>
-              className="guideNavItem__link"
-              to={item.path}
-              onClick={this.props.onClickNavItem}
-            >
               {item.name}
             </Link>
 
@@ -175,18 +152,15 @@ export class GuideNav extends Component {
     return (
       <div className={classes}>
         <div className="guideNav__header">
-          <div
+          <div className={buttonClasses} onClick={this.props.onToggleNav} />
-            className={buttonClasses}
+          <Link className="guideNav__title" to="/" onClick={this.props.onClickNavItem}>
-            onClick={this.props.onToggleNav}
-          />
-          <Link
-            className="guideNav__title"
-            to="/"
-            onClick={this.props.onClickNavItem}
-          >
             Kibana UI Framework <span className="guideNav__version">{this.props.version}</span>
           </Link>
-          <a href="http://elastic.co" className="guideNav__elasticLogo" aria-label="Go to the Elastic website" />
+          <a
+            href="http://elastic.co"
+            className="guideNav__elasticLogo"
+            aria-label="Go to the Elastic website"
+          />
 
           {this.renderPagination()}
         </div>
@@ -203,24 +177,17 @@ export class GuideNav extends Component {
 
         <div className="guideNavItemsContainer">
           <div className="guideNavItems">
-            <div className="guideNavSectionTitle">
+            <div className="guideNavSectionTitle">Components</div>
-              Components
-            </div>
 
-            { componentNavItems.length ? componentNavItems : this.renderNoItems('components') }
+            {componentNavItems.length ? componentNavItems : this.renderNoItems('components')}
 
-            <div className="guideNavSectionTitle">
+            <div className="guideNavSectionTitle">Sandboxes</div>
-              Sandboxes
-            </div>
 
-            { sandboxNavItems.length ? sandboxNavItems : this.renderNoItems('sandboxes') }
+            {sandboxNavItems.length ? sandboxNavItems : this.renderNoItems('sandboxes')}
           </div>
         </div>
 
-        <button
+        <button className="guideLink guideNav__showButton" onClick={this.props.onShowChrome}>
-          className="guideLink guideNav__showButton"
-          onClick={this.props.onShowChrome}
-        >
           Show chrome
         </button>
       </div>

packages/kbn-ui-framework/doc_site/src/components/guide_page/guide_page.js

@@ -20,10 +20,7 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
-import {
+import { GuidePageSideNav, GuidePageSideNavItem } from '../';
-  GuidePageSideNav,
-  GuidePageSideNavItem,
-} from '../';
 
 export class GuidePage extends Component {
   constructor(props) {
@@ -34,20 +31,20 @@ export class GuidePage extends Component {
 
   onClickLink(id) {
     // Scroll to element.
-    $('html, body').animate({ // eslint-disable-line no-undef
+    $('html, body').animate(
-      scrollTop: $(`#${id}`).offset().top - 100 // eslint-disable-line no-undef
+      {
-    }, 250);
+        // eslint-disable-line no-undef
+        scrollTop: $(`#${id}`).offset().top - 100, // eslint-disable-line no-undef
+      },
+      250
+    );
   }
 
   renderSideNavMenu() {
     // Traverse sections and build side nav from it.
     return this.props.sections.map((section, index) => {
       return (
-        <GuidePageSideNavItem
+        <GuidePageSideNavItem key={index} id={section.id} onClick={this.onClickLink}>
-          key={index}
-          id={section.id}
-          onClick={this.onClickLink}
-        >
           {section.name}
         </GuidePageSideNavItem>
       );
@@ -57,15 +54,11 @@ export class GuidePage extends Component {
   render() {
     return (
       <div className="guidePage">
-        <GuidePageSideNav title={this.props.title}>
+        <GuidePageSideNav title={this.props.title}>{this.renderSideNavMenu()}</GuidePageSideNav>
-          {this.renderSideNavMenu()}
-        </GuidePageSideNav>
 
         <div className="guidePageBody">
           <div className="guidePageKillScreen">
-            <h1 className="guideTitle">
+            <h1 className="guideTitle">The Kibana UI Framework has been DEPRECATED.</h1>
-              The Kibana UI Framework has been DEPRECATED.
-            </h1>
 
             <h2 className="guideTitle">
               Please use the <a href="https://github.com/elastic/eui">EUI Framework instead</a>.

packages/kbn-ui-framework/doc_site/src/components/guide_page_side_nav/guide_page_side_nav.js

@@ -20,16 +20,12 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
-export const GuidePageSideNav = props =>  {
+export const GuidePageSideNav = props => {
   return (
     <div className="guidePageSideNav">
-      <div className="guidePageSideNav__title">
+      <div className="guidePageSideNav__title">{props.title}</div>
-        {props.title}
-      </div>
 
-      <div className="guidePageSideNavMenu">
+      <div className="guidePageSideNavMenu">{props.children}</div>
-        {props.children}
-      </div>
     </div>
   );
 };

packages/kbn-ui-framework/doc_site/src/components/guide_page_side_nav/guide_page_side_nav_item.js

@@ -21,7 +21,6 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 export class GuidePageSideNavItem extends Component {
-
   constructor(props) {
     super(props);
 
@@ -35,16 +34,12 @@ export class GuidePageSideNavItem extends Component {
   render() {
     return (
       <div className="guidePageSideNavMenu__item">
-        <div
+        <div className="guidePageSideNavMenu__itemLink" onClick={this.onClick}>
-          className="guidePageSideNavMenu__itemLink"
-          onClick={this.onClick}
-        >
           {this.props.children}
         </div>
       </div>
     );
   }
-
 }
 
 GuidePageSideNavItem.propTypes = {

packages/kbn-ui-framework/doc_site/src/components/guide_sandbox/guide_sandbox.js

@@ -17,21 +17,14 @@
  * under the License.
  */
 
-import React, {
+import React, { Component } from 'react';
-  Component,
-} from 'react';
 import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 
-import {
+import { getIsSandbox } from '../../store';
-  getIsSandbox,
-} from '../../store';
 
-import {
+import { openSandbox, closeSandbox } from '../../actions';
-  openSandbox,
-  closeSandbox,
-} from '../../actions';
 
 function mapStateToProps(state) {
   return {
@@ -58,11 +51,7 @@ class GuideSandboxComponent extends Component {
   }
 
   render() {
-    return (
+    return <div className="guideSandbox">{this.props.children}</div>;
-      <div className="guideSandbox">
-        {this.props.children}
-      </div>
-    );
   }
 }
 

packages/kbn-ui-framework/doc_site/src/components/guide_sandbox/guide_sandbox_code_toggle_container.js

@@ -20,13 +20,8 @@
 import { connect } from 'react-redux';
 
 import { GuideSandboxCodeToggle } from './guide_sandbox_code_toggle';
-import {
+import { openCodeViewer } from '../../actions';
-  openCodeViewer,
-} from '../../actions';
 
-export const GuideSandboxCodeToggleContainer = connect(
+export const GuideSandboxCodeToggleContainer = connect(null, {
-  null,
+  openCodeViewer,
-  {
+})(GuideSandboxCodeToggle);
-    openCodeViewer,
-  },
-)(GuideSandboxCodeToggle);

packages/kbn-ui-framework/doc_site/src/components/guide_section/guide_section.js

@@ -46,18 +46,10 @@ export class GuideSection extends Component {
 
   render() {
     return (
-      <div
+      <div id={this.getId()} className="guideSection">
-        id={this.getId()}
-        className="guideSection"
-      >
         <div className="guideSection__header">
-          <div className="guideSection__title">
+          <div className="guideSection__title">{this.props.title}</div>
-            {this.props.title}
+          <button className="guideSection__sourceButton" onClick={this.onClickSource}>
-          </div>
-          <button
-            className="guideSection__sourceButton"
-            onClick={this.onClickSource}
-          >
             <span className="fa fa-code" />
           </button>
         </div>

packages/kbn-ui-framework/doc_site/src/components/guide_section/guide_section_container.js

@@ -20,17 +20,10 @@
 import { connect } from 'react-redux';
 
 import { GuideSection } from './guide_section';
-import {
+import { openCodeViewer, registerSection, unregisterSection } from '../../actions';
+
+export const GuideSectionContainer = connect(null, {
   openCodeViewer,
   registerSection,
   unregisterSection,
-} from '../../actions';
+})(GuideSection);
-
-export const GuideSectionContainer = connect(
-  null,
-  {
-    openCodeViewer,
-    registerSection,
-    unregisterSection,
-  },
-)(GuideSection);

packages/kbn-ui-framework/doc_site/src/components/guide_text/guide_text.js

@@ -19,6 +19,4 @@
 
 import React from 'react';
 
-export const GuideText = props => (
+export const GuideText = props => <div className="guideText">{props.children}</div>;
-  <div className="guideText">{props.children}</div>
-);

packages/kbn-ui-framework/doc_site/src/components/index.js

@@ -26,9 +26,7 @@ export { GuidePageContainer as GuidePage } from './guide_page/guide_page_contain
 export { GuidePageSideNav } from './guide_page_side_nav/guide_page_side_nav';
 export { GuidePageSideNavItem } from './guide_page_side_nav/guide_page_side_nav_item';
 export { GuideSandbox } from './guide_sandbox/guide_sandbox';
-export {
+export { GuideSandboxCodeToggleContainer as GuideSandboxCodeToggle } from './guide_sandbox/guide_sandbox_code_toggle_container';
-  GuideSandboxCodeToggleContainer as GuideSandboxCodeToggle
-} from './guide_sandbox/guide_sandbox_code_toggle_container';
 export { GuideSectionContainer as GuideSection } from './guide_section/guide_section_container';
 export { GuideSectionTypes } from './guide_section/guide_section_types';
 export { GuideText } from './guide_text/guide_text';

packages/kbn-ui-framework/doc_site/src/index.js

@@ -34,9 +34,7 @@ import AppContainer from './views/app_container';
 import { HomeView } from './views/home/home_view';
 import { NotFoundView } from './views/not_found/not_found_view';
 
-import {
+import { Routes } from './services';
-  Routes,
-} from './services';
 
 const store = configureStore();
 
@@ -47,22 +45,24 @@ childRoutes.push({
   name: 'Page Not Found',
 });
 
-const routes = [{
+const routes = [
-  path: '/',
+  {
-  component: AppContainer,
+    path: '/',
-  indexRoute: {
+    component: AppContainer,
-    component: HomeView,
+    indexRoute: {
-    source: 'views/home/HomeView',
+      component: HomeView,
+      source: 'views/home/HomeView',
+    },
+    childRoutes,
   },
-  childRoutes,
+];
-}];
 
 // Update document title with route name.
 const onRouteEnter = route => {
   const leafRoute = route.routes[route.routes.length - 1];
-  document.title = leafRoute.name ?
+  document.title = leafRoute.name
-    `Kibana UI Framework - ${leafRoute.name}` :
+    ? `Kibana UI Framework - ${leafRoute.name}`
-    'Kibana UI Framework';
+    : 'Kibana UI Framework';
 };
 
 const syncTitleWithRoutes = routesList => {
@@ -82,10 +82,7 @@ syncTitleWithRoutes(routes);
 
 ReactDOM.render(
   <Provider store={store}>
-    <Router
+    <Router history={hashHistory} routes={routes} />
-      history={hashHistory}
-      routes={routes}
-    />
   </Provider>,
   document.getElementById('guide')
 );

packages/kbn-ui-framework/doc_site/src/services/example/create_example.js

@@ -18,9 +18,7 @@
  */
 
 /* eslint import/named: 0 */
-import {
+import { GuideExample } from '../../components';
-  GuideExample,
-} from '../../components';
 
 export default function creatExample(examples) {
   class Example extends GuideExample {
@@ -30,7 +28,7 @@ export default function creatExample(examples) {
   }
 
   Example.propTypes = {
-    ...GuideExample.propTypes
+    ...GuideExample.propTypes,
   };
 
   return Example;

packages/kbn-ui-framework/doc_site/src/services/js_injector/js_injector.js

@@ -17,13 +17,11 @@
  * under the License.
  */
 
-
 import $ from 'jquery';
 
 const ID_ATTRIBUTE = 'injected-js-tag-id';
 
 export default {
-
   inject(js, id) {
     if (id) {
       $(`[${ID_ATTRIBUTE}=${id}]`).remove();
@@ -36,5 +34,4 @@ export default {
   remove(id) {
     $(`[${ID_ATTRIBUTE}=${id}]`).remove();
   },
-
 };

packages/kbn-ui-framework/doc_site/src/services/string/render_to_html.js

@@ -19,10 +19,7 @@
 
 import React from 'react';
 
-import {
+import { render, configure } from 'enzyme';
-  render,
-  configure
-} from 'enzyme';
 
 import EnzymeAdapter from 'enzyme-adapter-react-16';
 
@@ -41,7 +38,7 @@ export function renderToHtml(componentReference, props = {}) {
       indent_size: 2,
       unformatted: [], // Expand all tags, including spans
     });
-  } catch(e) {
+  } catch (e) {
     return '';
   }
 }

packages/kbn-ui-framework/doc_site/src/services/string/slugify.js

@@ -17,8 +17,6 @@
  * under the License.
  */
 
-
-
 /**
  * Lowercases input and replaces spaces with hyphens:
  * e.g. 'GridView Example' -> 'gridview-example'
@@ -28,7 +26,8 @@ function one(str) {
     .toLowerCase()
     .replace(/[-]+/g, ' ')
     .replace(/[^\w^\s]+/g, '')
-    .replace(/ +/g, ' ').split(' ');
+    .replace(/ +/g, ' ')
+    .split(' ');
   return parts.join('-');
 }
 

packages/kbn-ui-framework/doc_site/src/store/configure_store.js

@@ -17,11 +17,7 @@
  * under the License.
  */
 
-import {
+import { applyMiddleware, createStore, compose } from 'redux';
-  applyMiddleware,
-  createStore,
-  compose,
-} from 'redux';
 import thunk from 'redux-thunk';
 import { browserHistory } from 'react-router'; // eslint-disable-line
 import { routerMiddleware, routerReducer } from 'react-router-redux';
@@ -44,12 +40,10 @@ export default function configureStore(initialState) {
     };
   }
 
-  const finalStore = compose(
+  const finalStore = compose(applyMiddleware(thunk, routerMiddleware(browserHistory)))(createStore)(
-    applyMiddleware(
+    rootReducer,
-      thunk,
+    initialState
-      routerMiddleware(browserHistory)
+  );
-    )
-  )(createStore)(rootReducer, initialState);
 
   return finalStore;
 }

packages/kbn-ui-framework/doc_site/src/views/app_container.js

@@ -20,22 +20,11 @@
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 
-import {
+import { getIsCodeViewerOpen, getIsSandbox, getSections, getSource, getTitle } from '../store';
-  getIsCodeViewerOpen,
-  getIsSandbox,
-  getSections,
-  getSource,
-  getTitle,
-} from '../store';
 
 import { AppView } from './app_view';
 
-import {
+import { openCodeViewer, closeCodeViewer, registerSection, unregisterSection } from '../actions';
-  openCodeViewer,
-  closeCodeViewer,
-  registerSection,
-  unregisterSection,
-} from '../actions';
 
 function mapStateToProps(state, ownProps) {
   return {

packages/kbn-ui-framework/doc_site/src/views/app_view.js

@@ -22,14 +22,9 @@ import React, { Component } from 'react';
 
 import classNames from 'classnames';
 
-import {
+import { Routes } from '../services';
-  Routes,
-} from '../services';
 
-import {
+import { GuideCodeViewer, GuideNav } from '../components';
-  GuideCodeViewer,
-  GuideNav,
-} from '../components';
 
 // Inject version into header.
 const pkg = require('../../../../../package.json');
@@ -114,9 +109,7 @@ export class AppView extends Component {
           sandboxes={Routes.sandboxes}
         />
 
-        <div className={contentClasses}>
+        <div className={contentClasses}>{this.props.children}</div>
-          {this.props.children}
-        </div>
 
         <GuideCodeViewer
           isOpen={this.props.isCodeViewerOpen}

packages/kbn-ui-framework/doc_site/src/views/bar/bar.js

@@ -19,22 +19,17 @@
 
 import React from 'react';
 
-import {
+import { KuiBar, KuiBarSection } from '../../../../components';
-  KuiBar,
-  KuiBarSection
-} from '../../../../components';
 
 export default () => (
   <KuiBar>
     <KuiBarSection>
-      <div className="kuiTitle">
+      <div className="kuiTitle">The Great American Novel</div>
-        The Great American Novel
-      </div>
     </KuiBarSection>
 
     <KuiBarSection>
       <label htmlFor="limitInputField">Limit to</label>
-      <input id="limitInputField" className="kuiTextInput" size="2" value="10" readOnly/>
+      <input id="limitInputField" className="kuiTextInput" size="2" value="10" readOnly />
       <div>pages</div>
     </KuiBarSection>
   </KuiBar>

packages/kbn-ui-framework/doc_site/src/views/bar/bar_example.js

@@ -22,13 +22,7 @@
 import React from 'react';
 import { renderToHtml } from '../../services';
 
-import {
+import { GuideDemo, GuidePage, GuideSection, GuideSectionTypes, GuideText } from '../../components';
-  GuideDemo,
-  GuidePage,
-  GuideSection,
-  GuideSectionTypes,
-  GuideText,
-} from '../../components';
 
 import Bar from './bar';
 import barSource from '!!raw-loader!./bar';
@@ -46,13 +40,16 @@ export default props => (
   <GuidePage title={props.route.name}>
     <GuideSection
       title="Bar"
-      source={[{
+      source={[
-        type: GuideSectionTypes.JS,
+        {
-        code: barSource,
+          type: GuideSectionTypes.JS,
-      }, {
+          code: barSource,
-        type: GuideSectionTypes.HTML,
+        },
-        code: barHtml,
+        {
-      }]}
+          type: GuideSectionTypes.HTML,
+          code: barHtml,
+        },
+      ]}
     >
       <GuideText>
         Use the Bar to organize controls in a horizontal layout. This is especially useful for
@@ -71,17 +68,20 @@ export default props => (
 
     <GuideSection
       title="One section"
-      source={[{
+      source={[
-        type: GuideSectionTypes.JS,
+        {
-        code: barOneSectionSource,
+          type: GuideSectionTypes.JS,
-      }, {
+          code: barOneSectionSource,
-        type: GuideSectionTypes.HTML,
+        },
-        code: barOneSectionHtml,
+        {
-      }]}
+          type: GuideSectionTypes.HTML,
+          code: barOneSectionHtml,
+        },
+      ]}
     >
       <GuideText>
-        A Bar with one section will align it to the right, by default. To align it to the left,
+        A Bar with one section will align it to the right, by default. To align it to the left, just
-        just add another section and leave it empty, or don&rsquo;t use a Bar at all.
+        add another section and leave it empty, or don&rsquo;t use a Bar at all.
       </GuideText>
 
       <GuideDemo>
@@ -91,17 +91,20 @@ export default props => (
 
     <GuideSection
       title="Three sections"
-      source={[{
+      source={[
-        type: GuideSectionTypes.JS,
+        {
-        code: barThreeSectionsSource,
+          type: GuideSectionTypes.JS,
-      }, {
+          code: barThreeSectionsSource,
-        type: GuideSectionTypes.HTML,
+        },
-        code: barThreeSectionsHtml,
+        {
-      }]}
+          type: GuideSectionTypes.HTML,
+          code: barThreeSectionsHtml,
+        },
+      ]}
     >
       <GuideText>
-        Technically the Bar can contain three or more sections, but there&rsquo;s no established use-case
+        Technically the Bar can contain three or more sections, but there&rsquo;s no established
-        for this.
+        use-case for this.
       </GuideText>
 
       <GuideDemo>

packages/kbn-ui-framework/doc_site/src/views/bar/bar_one_section.js

@@ -19,22 +19,14 @@
 
 import React from 'react';
 
-import {
+import { KuiBar, KuiBarSection, KuiButton } from '../../../../components';
-  KuiBar,
-  KuiBarSection,
-  KuiButton
-} from '../../../../components';
 
 export default () => (
   <KuiBar>
     <KuiBarSection>
       <div className="kuiButtonGroup">
-        <KuiButton buttonType="basic">
+        <KuiButton buttonType="basic">See previous 10 pages</KuiButton>
-        See previous 10 pages
+        <KuiButton buttonType="basic">See next 10 pages</KuiButton>
-        </KuiButton>
-        <KuiButton buttonType="basic">
-        See next 10 pages
-        </KuiButton>
       </div>
     </KuiBarSection>
   </KuiBar>

packages/kbn-ui-framework/doc_site/src/views/bar/bar_three_sections.js

@@ -19,44 +19,29 @@
 
 import React from 'react';
 
-import {
+import { KuiBar, KuiBarSection, KuiButton, KuiButtonGroup } from '../../../../components';
-  KuiBar,
-  KuiBarSection,
-  KuiButton,
-  KuiButtonGroup
-} from '../../../../components';
 
 export default () => (
   <KuiBar>
     <KuiBarSection>
-      <div className="kuiTitle">
+      <div className="kuiTitle">The Great American Novel</div>
-      The Great American Novel
-      </div>
     </KuiBarSection>
 
     <KuiBarSection>
       <KuiButtonGroup>
-        <KuiButton buttonType="basic">
+        <KuiButton buttonType="basic">Create new page</KuiButton>
-        Create new page
+        <KuiButton buttonType="danger">Clear all pages</KuiButton>
-        </KuiButton>
-        <KuiButton buttonType="danger">
-        Clear all pages
-        </KuiButton>
       </KuiButtonGroup>
     </KuiBarSection>
 
     <KuiBarSection>
       <label htmlFor="limitInput">Limit to</label>
-      <input id="limitInput" className="kuiTextInput" size="2" value="10" readOnly/>
+      <input id="limitInput" className="kuiTextInput" size="2" value="10" readOnly />
       <div>pages</div>
 
       <KuiButtonGroup>
-        <KuiButton buttonType="basic">
+        <KuiButton buttonType="basic">Undo</KuiButton>
-        Undo
+        <KuiButton buttonType="basic">Redo</KuiButton>
-        </KuiButton>
-        <KuiButton buttonType="basic">
-        Redo
-        </KuiButton>
       </KuiButtonGroup>
     </KuiBarSection>
   </KuiBar>

packages/kbn-ui-framework/doc_site/src/views/button/button_basic.js

@@ -19,27 +19,18 @@
 
 import React from 'react';
 
-import {
+import { KuiButton } from '../../../../components';
-  KuiButton,
-} from '../../../../components';
 
 export default () => (
   <div>
-    <KuiButton
+    <KuiButton buttonType="basic" onClick={() => window.alert('Button clicked')}>
-      buttonType="basic"
-      onClick={() => window.alert('Button clicked')}
-    >
       Basic button
     </KuiButton>
 
     <br />
     <br />
 
-    <KuiButton
+    <KuiButton buttonType="basic" onClick={() => window.alert('Button clicked')} disabled>
-      buttonType="basic"
-      onClick={() => window.alert('Button clicked')}
-      disabled
-    >
       Basic button, disabled
     </KuiButton>
   </div>

packages/kbn-ui-framework/doc_site/src/views/button/button_danger.js

@@ -19,25 +19,17 @@
 
 import React from 'react';
 
-import {
+import { KuiButton } from '../../../../components';
-  KuiButton,
-} from '../../../../components';
 
 export default () => (
   <div>
-    <KuiButton buttonType="danger">
+    <KuiButton buttonType="danger">Danger button</KuiButton>
-      Danger button
-    </KuiButton>
 
     <br />
     <br />
 
-    <KuiButton
+    <KuiButton buttonType="danger" disabled>
-      buttonType="danger"
-      disabled
-    >
       Danger button, disabled
     </KuiButton>
   </div>
-
 );

packages/kbn-ui-framework/doc_site/src/views/button/button_elements.js

@@ -19,37 +19,31 @@
 
 import React from 'react';
 
-import {
+import { KuiButton, KuiLinkButton, KuiSubmitButton } from '../../../../components';
-  KuiButton,
-  KuiLinkButton,
-  KuiSubmitButton,
-} from '../../../../components';
 
 export default () => (
   <div>
-    <KuiButton buttonType="basic">
+    <KuiButton buttonType="basic">Button element</KuiButton>
-      Button element
-    </KuiButton>
 
     <br />
     <br />
 
-    <form onSubmit={e => {
+    <form
-      e.preventDefault();
+      onSubmit={e => {
-      window.alert('Submit');
+        e.preventDefault();
-    }}
+        window.alert('Submit');
+      }}
     >
-      <KuiSubmitButton buttonType="basic">
+      <KuiSubmitButton buttonType="basic">Submit input element</KuiSubmitButton>
-        Submit input element
-      </KuiSubmitButton>
     </form>
 
     <br />
 
-    <form onSubmit={e => {
+    <form
-      e.preventDefault();
+      onSubmit={e => {
-      window.alert('Submit');
+        e.preventDefault();
-    }}
+        window.alert('Submit');
+      }}
     >
       <KuiSubmitButton buttonType="basic" disabled>
         Submit input element, disabled
@@ -58,23 +52,14 @@ export default () => (
 
     <br />
 
-    <KuiLinkButton
+    <KuiLinkButton buttonType="basic" href="http://www.google.com" target="_blank">
-      buttonType="basic"
-      href="http://www.google.com"
-      target="_blank"
-    >
       Anchor element
     </KuiLinkButton>
 
     <br />
     <br />
 
-    <KuiLinkButton
+    <KuiLinkButton buttonType="basic" href="http://www.google.com" target="_blank" disabled>
-      buttonType="basic"
-      href="http://www.google.com"
-      target="_blank"
-      disabled
-    >
       Anchor element, disabled
     </KuiLinkButton>
   </div>

packages/kbn-ui-framework/doc_site/src/views/button/button_example.js

@@ -23,13 +23,7 @@ import React from 'react';
 
 import { renderToHtml } from '../../services';
 
-import {
+import { GuideDemo, GuidePage, GuideSection, GuideSectionTypes, GuideText } from '../../components';
-  GuideDemo,
-  GuidePage,
-  GuideSection,
-  GuideSectionTypes,
-  GuideText,
-} from '../../components';
 
 import Basic from './button_basic';
 import basicSource from '!!raw-loader!./button_basic';
@@ -81,16 +75,20 @@ export default props => (
   <GuidePage title={props.route.name}>
     <GuideSection
       title="Basic Button"
-      source={[{
+      source={[
-        type: GuideSectionTypes.JS,
+        {
-        code: basicSource,
+          type: GuideSectionTypes.JS,
-      }, {
+          code: basicSource,
-        type: GuideSectionTypes.HTML,
+        },
-        code: basicHtml,
+        {
-      }]}
+          type: GuideSectionTypes.HTML,
+          code: basicHtml,
+        },
+      ]}
     >
       <GuideText>
-        Use the basic button for navigation elements or controls that are not the primary focus of the page (ex: pagination, toggles...etc).
+        Use the basic button for navigation elements or controls that are not the primary focus of
+        the page (ex: pagination, toggles...etc).
       </GuideText>
 
       <GuideDemo>
@@ -100,13 +98,16 @@ export default props => (
 
     <GuideSection
       title="Hollow Button"
-      source={[{
+      source={[
-        type: GuideSectionTypes.JS,
+        {
-        code: hollowSource,
+          type: GuideSectionTypes.JS,
-      }, {
+          code: hollowSource,
-        type: GuideSectionTypes.HTML,
+        },
-        code: hollowHtml,
+        {
-      }]}
+          type: GuideSectionTypes.HTML,
+          code: hollowHtml,
+        },
+      ]}
     >
       <GuideText>
         Use the hollow Button when presenting a neutral action, e.g. a &ldquo;Cancel&rdquo; button.
@@ -119,17 +120,20 @@ export default props => (
 
     <GuideSection
       title="Primary Button"
-      source={[{
+      source={[
-        type: GuideSectionTypes.JS,
+        {
-        code: primarySource,
+          type: GuideSectionTypes.JS,
-      }, {
+          code: primarySource,
-        type: GuideSectionTypes.HTML,
+        },
-        code: primaryHtml,
+        {
-      }]}
+          type: GuideSectionTypes.HTML,
+          code: primaryHtml,
+        },
+      ]}
     >
       <GuideText>
-        Use the primary Button to represent the most common action. Generally, there won&rsquo;t be a
+        Use the primary Button to represent the most common action. Generally, there won&rsquo;t be
-        need to present more than one of these at a time.
+        a need to present more than one of these at a time.
       </GuideText>
 
       <GuideDemo>
@@ -139,16 +143,20 @@ export default props => (
 
     <GuideSection
       title="Secondary Button"
-      source={[{
+      source={[
-        type: GuideSectionTypes.JS,
+        {
-        code: secondarySource,
+          type: GuideSectionTypes.JS,
-      }, {
+          code: secondarySource,
-        type: GuideSectionTypes.HTML,
+        },
-        code: secondaryHtml,
+        {
-      }]}
+          type: GuideSectionTypes.HTML,
+          code: secondaryHtml,
+        },
+      ]}
     >
       <GuideText>
-        Secondary buttons are usually used for actions (&ldquo;do this&rdquo;) that are optional actions on a page.
+        Secondary buttons are usually used for actions (&ldquo;do this&rdquo;) that are optional
+        actions on a page.
       </GuideText>
 
       <GuideDemo>
@@ -158,17 +166,18 @@ export default props => (
 
     <GuideSection
       title="Danger Button"
-      source={[{
+      source={[
-        type: GuideSectionTypes.JS,
+        {
-        code: dangerSource,
+          type: GuideSectionTypes.JS,
-      }, {
+          code: dangerSource,
-        type: GuideSectionTypes.HTML,
+        },
-        code: dangerHtml,
+        {
-      }]}
+          type: GuideSectionTypes.HTML,
+          code: dangerHtml,
+        },
+      ]}
     >
-      <GuideText>
+      <GuideText>Danger Buttons represent irreversible, potentially regrettable actions.</GuideText>
-        Danger Buttons represent irreversible, potentially regrettable actions.
-      </GuideText>
 
       <GuideDemo>
         <Danger />
@@ -177,17 +186,18 @@ export default props => (
 
     <GuideSection
       title="Warning Button"
-      source={[{
+      source={[
-        type: GuideSectionTypes.JS,
+        {
-        code: warningSource,
+          type: GuideSectionTypes.JS,
-      }, {
+          code: warningSource,
-        type: GuideSectionTypes.HTML,
+        },
-        code: warningHtml,
+        {
-      }]}
+          type: GuideSectionTypes.HTML,
+          code: warningHtml,
+        },
+      ]}
     >
-      <GuideText>
+      <GuideText>Warning Buttons represent potentially notable actions.</GuideText>
-        Warning Buttons represent potentially notable actions.
-      </GuideText>
 
       <GuideDemo>
         <Warning />
@@ -196,13 +206,16 @@ export default props => (
 
     <GuideSection
       title="Loading Button"
-      source={[{
+      source={[
-        type: GuideSectionTypes.JS,
+        {
-        code: loadingSource,
+          type: GuideSectionTypes.JS,
-      }, {
+          code: loadingSource,
-        type: GuideSectionTypes.HTML,
+        },
-        code: loadingHtml,
+        {
-      }]}
+          type: GuideSectionTypes.HTML,
+          code: loadingHtml,
+        },
+      ]}
     >
       <GuideDemo>
         <Loading />
@@ -211,20 +224,23 @@ export default props => (
 
     <GuideSection
       title="Button with icon"
-      source={[{
+      source={[
-        type: GuideSectionTypes.JS,
+        {
-        code: withIconSource,
+          type: GuideSectionTypes.JS,
-      }, {
+          code: withIconSource,
-        type: GuideSectionTypes.HTML,
+        },
-        code: withIconHtml,
+        {
-      }]}
+          type: GuideSectionTypes.HTML,
+          code: withIconHtml,
+        },
+      ]}
     >
       <GuideText>
         <p>
-          You can toss an icon into a Button, with or without text. You can also use a predefined icon
+          You can toss an icon into a Button, with or without text. You can also use a predefined
-          or specify custom icon classes. If you have a button without textual content, make sure you set
+          icon or specify custom icon classes. If you have a button without textual content, make
-          the <code>aria-label</code> attribute with a textual representation for screen readers (see
+          sure you set the <code>aria-label</code> attribute with a textual representation for
-          last example below).
+          screen readers (see last example below).
         </p>
       </GuideText>
 
@@ -235,13 +251,16 @@ export default props => (
 
     <GuideSection
       title="ButtonGroup"
-      source={[{
+      source={[
-        type: GuideSectionTypes.JS,
+        {
-        code: buttonGroupSource,
+          type: GuideSectionTypes.JS,
-      }, {
+          code: buttonGroupSource,
-        type: GuideSectionTypes.HTML,
+        },
-        code: buttonGroupHtml,
+        {
-      }]}
+          type: GuideSectionTypes.HTML,
+          code: buttonGroupHtml,
+        },
+      ]}
     >
       <GuideDemo>
         <ButtonGroup />
@@ -250,13 +269,16 @@ export default props => (
 
     <GuideSection
       title="United ButtonGroup"
-      source={[{
+      source={[
-        type: GuideSectionTypes.JS,
+        {
-        code: buttonGroupUnitedSource,
+          type: GuideSectionTypes.JS,
-      }, {
+          code: buttonGroupUnitedSource,
-        type: GuideSectionTypes.HTML,
+        },
-        code: buttonGroupUnitedHtml,
+        {
-      }]}
+          type: GuideSectionTypes.HTML,
+          code: buttonGroupUnitedHtml,
+        },
+      ]}
     >
       <GuideText>
         Use the united version of the ButtonGroup to emphasize the close relationship within a set
@@ -275,13 +297,16 @@ export default props => (
 
     <GuideSection
       title="Element variations"
-      source={[{
+      source={[
-        type: GuideSectionTypes.JS,
+        {
-        code: elementsSource,
+          type: GuideSectionTypes.JS,
-      }, {
+          code: elementsSource,
-        type: GuideSectionTypes.HTML,
+        },
-        code: elementsHtml,
+        {
-      }]}
+          type: GuideSectionTypes.HTML,
+          code: elementsHtml,
+        },
+      ]}
     >
       <GuideText>
         You can create a Button using a button element, link, or input[type=&ldquo;submit&rdquo;].
@@ -294,14 +319,14 @@ export default props => (
 
     <GuideSection
       title="Sizes"
-      source={[{
+      source={[
-        type: GuideSectionTypes.HTML,
+        {
-        code: sizesHtml,
+          type: GuideSectionTypes.HTML,
-      }]}
+          code: sizesHtml,
+        },
+      ]}
     >
-      <GuideDemo
+      <GuideDemo html={sizesHtml} />
-        html={sizesHtml}
-      />
     </GuideSection>
   </GuidePage>
 );

packages/kbn-ui-framework/doc_site/src/views/button/button_group.js

@@ -19,33 +19,22 @@
 
 import React from 'react';
 
-import {
+import { KuiButton, KuiButtonGroup } from '../../../../components';
-  KuiButton,
-  KuiButtonGroup,
-} from '../../../../components';
 
 export default () => (
   <div>
     <KuiButtonGroup>
-      <KuiButton buttonType="basic">
+      <KuiButton buttonType="basic">Cancel</KuiButton>
-        Cancel
-      </KuiButton>
 
-      <KuiButton buttonType="basic">
+      <KuiButton buttonType="basic">Duplicate</KuiButton>
-        Duplicate
-      </KuiButton>
 
-      <KuiButton buttonType="primary">
+      <KuiButton buttonType="primary">Save</KuiButton>
-        Save
-      </KuiButton>
     </KuiButtonGroup>
 
     <br />
 
     <KuiButtonGroup>
-      <KuiButton buttonType="basic">
+      <KuiButton buttonType="basic">Button group with one button</KuiButton>
-        Button group with one button
-      </KuiButton>
     </KuiButtonGroup>
   </div>
 );

packages/kbn-ui-framework/doc_site/src/views/button/button_group_united.js

@@ -19,26 +19,16 @@
 
 import React from 'react';
 
-import {
+import { KuiButton, KuiButtonGroup, KuiButtonIcon } from '../../../../components';
-  KuiButton,
-  KuiButtonGroup,
-  KuiButtonIcon,
-} from '../../../../components';
 
 export default () => (
   <div>
     <KuiButtonGroup isUnited>
-      <KuiButton buttonType="basic">
+      <KuiButton buttonType="basic">Option A</KuiButton>
-        Option A
-      </KuiButton>
 
-      <KuiButton buttonType="basic">
+      <KuiButton buttonType="basic">Option B</KuiButton>
-        Option B
-      </KuiButton>
 
-      <KuiButton buttonType="basic">
+      <KuiButton buttonType="basic">Option C</KuiButton>
-        Option C
-      </KuiButton>
     </KuiButtonGroup>
 
     <br />
@@ -50,11 +40,7 @@ export default () => (
         icon={<KuiButtonIcon type="previous" />}
       />
 
-      <KuiButton
+      <KuiButton buttonType="basic" aria-label="Next" icon={<KuiButtonIcon type="next" />} />
-        buttonType="basic"
-        aria-label="Next"
-        icon={<KuiButtonIcon type="next" />}
-      />
     </KuiButtonGroup>
   </div>
 );

packages/kbn-ui-framework/doc_site/src/views/button/button_hollow.js

@@ -19,23 +19,16 @@
 
 import React from 'react';
 
-import {
+import { KuiButton } from '../../../../components';
-  KuiButton,
-} from '../../../../components';
 
 export default () => (
   <div>
-    <KuiButton buttonType="hollow">
+    <KuiButton buttonType="hollow">Hollow button</KuiButton>
-      Hollow button
-    </KuiButton>
 
     <br />
     <br />
 
-    <KuiButton
+    <KuiButton buttonType="hollow" disabled>
-      buttonType="hollow"
-      disabled
-    >
       Hollow button, disabled
     </KuiButton>
   </div>

packages/kbn-ui-framework/doc_site/src/views/button/button_loading.js

@@ -17,14 +17,9 @@
  * under the License.
  */
 
-import React, {
+import React, { Component } from 'react';
-  Component,
-} from 'react';
 
-import {
+import { KuiButtonIcon, KuiButton } from '../../../../components';
-  KuiButtonIcon,
-  KuiButton,
-} from '../../../../components';
 
 export default class LoadingButton extends Component {
   constructor(props) {

packages/kbn-ui-framework/doc_site/src/views/button/button_primary.js

@@ -19,23 +19,16 @@
 
 import React from 'react';
 
-import {
+import { KuiButton } from '../../../../components';
-  KuiButton,
-} from '../../../../components';
 
 export default () => (
   <div>
-    <KuiButton buttonType="primary">
+    <KuiButton buttonType="primary">Primary button</KuiButton>
-      Primary button
-    </KuiButton>
 
     <br />
     <br />
 
-    <KuiButton
+    <KuiButton buttonType="primary" disabled>
-      buttonType="primary"
-      disabled
-    >
       Primary button, disabled
     </KuiButton>
   </div>

packages/kbn-ui-framework/doc_site/src/views/button/button_secondary.js

@@ -19,25 +19,17 @@
 
 import React from 'react';
 
-import {
+import { KuiButton } from '../../../../components';
-  KuiButton,
-} from '../../../../components';
 
 export default () => (
   <div>
-    <KuiButton buttonType="secondary">
+    <KuiButton buttonType="secondary">Secondary button</KuiButton>
-      Secondary button
-    </KuiButton>
 
     <br />
     <br />
 
-    <KuiButton
+    <KuiButton buttonType="secondary" disabled>
-      buttonType="secondary"
-      disabled
-    >
       Secondary button, disabled
     </KuiButton>
   </div>
 );
-

packages/kbn-ui-framework/doc_site/src/views/button/button_warning.js

@@ -19,25 +19,17 @@
 
 import React from 'react';
 
-import {
+import { KuiButton } from '../../../../components';
-  KuiButton,
-} from '../../../../components';
 
 export default () => (
   <div>
-    <KuiButton buttonType="warning">
+    <KuiButton buttonType="warning">Warning button</KuiButton>
-      Warning button
-    </KuiButton>
 
     <br />
     <br />
 
-    <KuiButton
+    <KuiButton buttonType="warning" disabled>
-      buttonType="warning"
-      disabled
-    >
       Warning button, disabled
     </KuiButton>
   </div>
-
 );

packages/kbn-ui-framework/doc_site/src/views/button/button_with_icon.js

@@ -19,58 +19,39 @@
 
 import React from 'react';
 
-import {
+import { KuiButton, KuiButtonIcon } from '../../../../components';
-  KuiButton,
-  KuiButtonIcon,
-} from '../../../../components';
 
 export default () => (
   <div>
-    <KuiButton
+    <KuiButton buttonType="primary" icon={<KuiButtonIcon type="create" />}>
-      buttonType="primary"
-      icon={<KuiButtonIcon type="create" />}
-    >
       Create
     </KuiButton>
 
     <br />
     <br />
 
-    <KuiButton
+    <KuiButton buttonType="danger" icon={<KuiButtonIcon type="delete" />}>
-      buttonType="danger"
-      icon={<KuiButtonIcon type="delete" />}
-    >
       Delete
     </KuiButton>
 
     <br />
     <br />
 
-    <KuiButton
+    <KuiButton buttonType="basic" icon={<KuiButtonIcon type="previous" />}>
-      buttonType="basic"
-      icon={<KuiButtonIcon type="previous" />}
-    >
       Previous
     </KuiButton>
 
     <br />
     <br />
 
-    <KuiButton
+    <KuiButton buttonType="basic" icon={<KuiButtonIcon type="next" />} iconPosition="right">
-      buttonType="basic"
-      icon={<KuiButtonIcon type="next" />}
-      iconPosition="right"
-    >
       Next
     </KuiButton>
 
     <br />
     <br />
 
-    <KuiButton
+    <KuiButton buttonType="basic" icon={<KuiButtonIcon type="loading" />}>
-      buttonType="basic"
-      icon={<KuiButtonIcon type="loading" />}
-    >
       Loading
     </KuiButton>
 

packages/kbn-ui-framework/doc_site/src/views/collapse_button/collapse_button.js

@@ -19,15 +19,13 @@
 
 import React from 'react';
 
-import {
+import { KuiCollapseButton } from '../../../../components';
-  KuiCollapseButton
-} from '../../../../components';
 
 export default () => (
   <div>
-    <KuiCollapseButton aria-label="Toggle panel" direction="down"/>
+    <KuiCollapseButton aria-label="Toggle panel" direction="down" />
-    <KuiCollapseButton aria-label="Toggle panel" direction="up"/>
+    <KuiCollapseButton aria-label="Toggle panel" direction="up" />
-    <KuiCollapseButton aria-label="Toggle panel" direction="left"/>
+    <KuiCollapseButton aria-label="Toggle panel" direction="left" />
-    <KuiCollapseButton aria-label="Toggle panel" direction="right"/>
+    <KuiCollapseButton aria-label="Toggle panel" direction="right" />
   </div>
 );

packages/kbn-ui-framework/doc_site/src/views/collapse_button/collapse_button_aria.js

@@ -19,27 +19,24 @@
 
 import React, { Component } from 'react';
 
-import {
+import { KuiCollapseButton } from '../../../../components';
-  KuiCollapseButton
-} from '../../../../components';
 
 import { htmlIdGenerator } from '../../../../src/services';
 
 export default class extends Component {
-
   constructor(props) {
     super(props);
     this.state = {
-      isExpanded: false
+      isExpanded: false,
     };
   }
 
-  onToggleContent = (ev) => {
+  onToggleContent = ev => {
     ev.preventDefault();
-    this.setState((state) => ({
+    this.setState(state => ({
-      isExpanded: !state.isExpanded
+      isExpanded: !state.isExpanded,
     }));
-  }
+  };
 
   render() {
     const { isExpanded } = this.state;
@@ -53,14 +50,10 @@ export default class extends Component {
           aria-expanded={isExpanded}
           aria-controls={idGen('collapsible')}
         />
-        <div
+        <div id={idGen('collapsible')} style={{ display: isExpanded ? 'block' : 'none' }}>
-          id={idGen('collapsible')}
-          style={{ display: isExpanded ? 'block' : 'none' }}
-        >
           Here is some collapsible content.
         </div>
       </div>
     );
   }
-
 }

packages/kbn-ui-framework/doc_site/src/views/collapse_button/collapse_button_example.js

@@ -22,13 +22,7 @@
 import React from 'react';
 import { renderToHtml } from '../../services';
 
-import {
+import { GuideDemo, GuidePage, GuideSection, GuideSectionTypes, GuideText } from '../../components';
-  GuideDemo,
-  GuidePage,
-  GuideSection,
-  GuideSectionTypes,
-  GuideText,
-} from '../../components';
 
 import CollapseButton from './collapse_button';
 import collapseButtonSource from '!!raw-loader!./collapse_button';
@@ -42,13 +36,16 @@ export default props => (
   <GuidePage title={props.route.name}>
     <GuideSection
       title="CollapseButton"
-      source={[{
+      source={[
-        type: GuideSectionTypes.JS,
+        {
-        code: collapseButtonSource,
+          type: GuideSectionTypes.JS,
-      }, {
+          code: collapseButtonSource,
-        type: GuideSectionTypes.HTML,
+        },
-        code: collapseButtonHtml,
+        {
-      }]}
+          type: GuideSectionTypes.HTML,
+          code: collapseButtonHtml,
+        },
+      ]}
     >
       <GuideText>
         Use this button to collapse and expand panels, drawers, sidebars, legends, and other
@@ -62,31 +59,42 @@ export default props => (
 
     <GuideSection
       title="CollapseButton accessibility"
-      source={[{
+      source={[
-        type: GuideSectionTypes.JS,
+        {
-        code: collapseButtonAriaSource,
+          type: GuideSectionTypes.JS,
-      }, {
+          code: collapseButtonAriaSource,
-        type: GuideSectionTypes.HTML,
+        },
-        code: collapseButtonAriaHtml,
+        {
-      }]}
+          type: GuideSectionTypes.HTML,
+          code: collapseButtonAriaHtml,
+        },
+      ]}
     >
       <GuideText>
         To make an expandable element properly accessible you should add the following
         ARIA-attributes to it:
         <dl>
-          <dt><code>aria-expanded</code></dt>
+          <dt>
+            <code>aria-expanded</code>
+          </dt>
           <dd>
-            should be <code>true</code> or <code>false</code> depending on
+            should be <code>true</code> or <code>false</code> depending on the state of the
-            the state of the collapsable content.
+            collapsable content.
           </dd>
-          <dt><code>aria-controls</code></dt>
+          <dt>
-          <dd>should reference the <code>id</code> of the actual collapsable content element.</dd>
+            <code>aria-controls</code>
-          <dt><code>aria-label</code></dt>
+          </dt>
           <dd>
-            should contain a label like &quot;Toggle panel&quot; or preferably more specific what
+            should reference the <code>id</code> of the actual collapsable content element.
-            it toggles (e.g. &quot;Toggle filter actions&quot;). You don&rsquo;t need to switch the label
+          </dd>
-            when the state changes, since a screen reader will use <code>aria-expanded</code> to
+          <dt>
-            read out the current state.
+            <code>aria-label</code>
+          </dt>
+          <dd>
+            should contain a label like &quot;Toggle panel&quot; or preferably more specific what it
+            toggles (e.g. &quot;Toggle filter actions&quot;). You don&rsquo;t need to switch the
+            label when the state changes, since a screen reader will use <code>aria-expanded</code>{' '}
+            to read out the current state.
           </dd>
         </dl>
         The following example demonstrate the usage of these attributes.

packages/kbn-ui-framework/doc_site/src/views/empty_table_prompt/empty_table_prompt.js

@@ -26,13 +26,13 @@ export function EmptyTablePrompt() {
     <KuiEmptyTablePrompt
       actions={
         <KuiLinkButton
-          icon={<KuiButtonIcon type="create"/>}
+          icon={<KuiButtonIcon type="create" />}
           aria-label="Add a new item"
           data-test-subj="addNewPromptButton"
           buttonType="primary"
           href="#"
         >
-            Add a new item
+          Add a new item
         </KuiLinkButton>
       }
       message="Uh oh, You have no items!"

packages/kbn-ui-framework/doc_site/src/views/empty_table_prompt/empty_table_prompt_example.js

@@ -22,13 +22,7 @@
 import React from 'react';
 import { renderToHtml } from '../../services';
 
-import {
+import { GuideDemo, GuidePage, GuideSection, GuideSectionTypes, GuideText } from '../../components';
-  GuideDemo,
-  GuidePage,
-  GuideSection,
-  GuideSectionTypes,
-  GuideText,
-} from '../../components';
 
 import { EmptyTablePrompt } from './empty_table_prompt';
 import emptyTablePromptSource from '!!raw-loader!./empty_table_prompt'; // eslint-disable-line import/default
@@ -42,40 +36,44 @@ export default props => (
   <GuidePage title={props.route.name}>
     <GuideSection
       title="Empty table prompt"
-      source={[{
+      source={[
-        type: GuideSectionTypes.JS,
+        {
-        code: emptyTablePromptSource,
+          type: GuideSectionTypes.JS,
-      }, {
+          code: emptyTablePromptSource,
-        type: GuideSectionTypes.HTML,
+        },
-        code: emptyTablePromptHtml,
+        {
-      }]}
+          type: GuideSectionTypes.HTML,
+          code: emptyTablePromptHtml,
+        },
+      ]}
     >
       <GuideText>
-        Use this prompt when a table has no results. It helps create space and provides a place to prompt the user
+        Use this prompt when a table has no results. It helps create space and provides a place to
-        to follow some next actions, such as creating an item.
+        prompt the user to follow some next actions, such as creating an item.
       </GuideText>
 
       <GuideDemo>
-        <EmptyTablePrompt/>
+        <EmptyTablePrompt />
       </GuideDemo>
     </GuideSection>
 
     <GuideSection
       title="Controlled table with empty table prompt"
-      source={[{
+      source={[
-        type: GuideSectionTypes.JS,
+        {
-        code: tableWithEmptyPromptSource,
+          type: GuideSectionTypes.JS,
-      }, {
+          code: tableWithEmptyPromptSource,
-        type: GuideSectionTypes.HTML,
+        },
-        code: tableWithEmptyPromptHtml,
+        {
-      }]}
+          type: GuideSectionTypes.HTML,
+          code: tableWithEmptyPromptHtml,
+        },
+      ]}
     >
-      <GuideText>
+      <GuideText>Wrap in an EmptyTablePromptPanel when using with a controlled table.</GuideText>
-        Wrap in an EmptyTablePromptPanel when using with a controlled table.
-      </GuideText>
 
       <GuideDemo>
-        <ControlledTableWithEmptyPrompt/>
+        <ControlledTableWithEmptyPrompt />
       </GuideDemo>
     </GuideSection>
   </GuidePage>

packages/kbn-ui-framework/doc_site/src/views/empty_table_prompt/table_with_empty_prompt.js

@@ -52,7 +52,7 @@ export function ControlledTableWithEmptyPrompt() {
           actions={
             <KuiButtonGroup>
               <KuiLinkButton
-                icon={<KuiButtonIcon type="create"/>}
+                icon={<KuiButtonIcon type="create" />}
                 aria-label="Add a new dashboard"
                 data-test-subj="addNewDashPromptButton"
                 buttonType="primary"
@@ -62,13 +62,13 @@ export function ControlledTableWithEmptyPrompt() {
               </KuiLinkButton>
 
               <KuiLinkButton
-                icon={<KuiButtonIcon type="create"/>}
+                icon={<KuiButtonIcon type="create" />}
                 aria-label="Add a new visualization"
                 data-test-subj="addNewVizPromptButton"
                 buttonType="primary"
                 href="#"
               >
-              Add a new visualization
+                Add a new visualization
               </KuiLinkButton>
             </KuiButtonGroup>
           }

packages/kbn-ui-framework/doc_site/src/views/form/check_box.js

@@ -17,14 +17,8 @@
  * under the License.
  */
 
-import React, {
+import React, { Component } from 'react';
-  Component,
+import { KuiCheckBox, KuiCheckBoxLabel } from '../../../../components';
-} from 'react';
-import {
-  KuiCheckBox,
-  KuiCheckBoxLabel
-} from '../../../../components';
-
 
 class KuiCheckBoxExample extends Component {
   state = {
@@ -36,7 +30,7 @@ class KuiCheckBoxExample extends Component {
 
   handleChange = (event, key) => {
     this.setState({ [key]: event.target.checked });
-  }
+  };
 
   render() {
     return (
@@ -45,18 +39,18 @@ class KuiCheckBoxExample extends Component {
           isChecked={this.state.value1}
           onChange={event => this.handleChange(event, 'value1')}
         />
-        <hr className="guideBreak"/>
+        <hr className="guideBreak" />
         <KuiCheckBox
           isChecked={this.state.value2}
           onChange={event => this.handleChange(event, 'value2')}
         />
-        <hr className="guideBreak"/>
+        <hr className="guideBreak" />
         <KuiCheckBox
           isChecked={this.state.value3}
           onChange={event => this.handleChange(event, 'value3')}
           isDisabled
         />
-        <hr className="guideBreak"/>
+        <hr className="guideBreak" />
         <KuiCheckBoxLabel
           text="With clickable label"
           isChecked={this.state.value4}

packages/kbn-ui-framework/doc_site/src/views/form/form_example.js

@@ -63,154 +63,171 @@ export default props => (
   <GuidePage title={props.route.name}>
     <GuideSection
       title="Label"
-      source={[{
+      source={[
-        type: GuideSectionTypes.JS,
+        {
-        code: labelSource,
+          type: GuideSectionTypes.JS,
-      }, {
+          code: labelSource,
-        type: GuideSectionTypes.HTML,
+        },
-        code: labelHtml,
+        {
-      }]}
+          type: GuideSectionTypes.HTML,
+          code: labelHtml,
+        },
+      ]}
     >
-
       <GuideText>
-        Never forget to label every input element. You can either
+        Never forget to label every input element. You can either use a <GuideCode>label</GuideCode>{' '}
-        use a <GuideCode>label</GuideCode> element with a <GuideCode>for</GuideCode> attribute
+        element with a <GuideCode>for</GuideCode> attribute referencing the{' '}
-        referencing the <GuideCode>id</GuideCode> of the input field, wrap the <GuideCode>input</GuideCode> field
+        <GuideCode>id</GuideCode> of the input field, wrap the <GuideCode>input</GuideCode> field
-        within the <GuideCode>label</GuideCode> element or use <GuideCode>aria-label</GuideCode> or <GuideCode>aria-labelledby</GuideCode>.
+        within the <GuideCode>label</GuideCode> element or use <GuideCode>aria-label</GuideCode> or{' '}
+        <GuideCode>aria-labelledby</GuideCode>.
       </GuideText>
 
       <GuideText>
-        For the sake of simplicity we haven&rsquo;t labeled the input elements on
+        For the sake of simplicity we haven&rsquo;t labeled the input elements on this page
-        this page correctly.
+        correctly.
       </GuideText>
 
       <GuideDemo>
-        <Label/>
+        <Label />
       </GuideDemo>
-
     </GuideSection>
 
     <GuideSection
       title="TextInput"
-      source={[{
+      source={[
-        type: GuideSectionTypes.JS,
+        {
-        code: textInputSource,
+          type: GuideSectionTypes.JS,
-      }, {
+          code: textInputSource,
-        type: GuideSectionTypes.HTML,
+        },
-        code: textInputHtml,
+        {
-      }]}
+          type: GuideSectionTypes.HTML,
+          code: textInputHtml,
+        },
+      ]}
     >
       <GuideDemo>
-        <TextInput/>
+        <TextInput />
       </GuideDemo>
     </GuideSection>
 
     <GuideSection
       title="AssistedInput"
-      source={[{
+      source={[
-        type: GuideSectionTypes.HTML,
+        {
-        code: assistedInputHtml,
+          type: GuideSectionTypes.HTML,
-      }]}
+          code: assistedInputHtml,
+        },
+      ]}
     >
       <GuideText>
-        <strong>Note:</strong> You have to specify right-side padding using a custom class or
+        <strong>Note:</strong> You have to specify right-side padding using a custom class or inline
-        inline style to keep the input text from overlapping with the assistance content.
+        style to keep the input text from overlapping with the assistance content. Use{' '}
-        Use <GuideCode>em</GuideCode> units for this padding so that it scales appropriately if the
+        <GuideCode>em</GuideCode> units for this padding so that it scales appropriately if the user
-        user changes their root font-size.
+        changes their root font-size.
       </GuideText>
 
-      <GuideDemo
+      <GuideDemo html={assistedInputHtml} />
-        html={assistedInputHtml}
-      />
     </GuideSection>
 
     <GuideSection
       title="SearchInput"
-      source={[{
+      source={[
-        type: GuideSectionTypes.HTML,
+        {
-        code: searchInputHtml,
+          type: GuideSectionTypes.HTML,
-      }]}
+          code: searchInputHtml,
+        },
+      ]}
     >
-      <GuideDemo
+      <GuideDemo html={searchInputHtml} />
-        html={searchInputHtml}
-      />
     </GuideSection>
 
     <GuideSection
       title="StaticInput"
-      source={[{
+      source={[
-        type: GuideSectionTypes.HTML,
+        {
-        code: staticInputHtml,
+          type: GuideSectionTypes.HTML,
-      }]}
+          code: staticInputHtml,
+        },
+      ]}
     >
       <GuideText>
-        Use StaticInput to display dynamic content in a form which the user isn&rsquo;t allowed to edit.
+        Use StaticInput to display dynamic content in a form which the user isn&rsquo;t allowed to
+        edit.
       </GuideText>
 
-      <GuideDemo
+      <GuideDemo html={staticInputHtml} />
-        html={staticInputHtml}
-      />
     </GuideSection>
 
     <GuideSection
       title="TextArea"
-      source={[{
+      source={[
-        type: GuideSectionTypes.JS,
+        {
-        code: textAreaSource,
+          type: GuideSectionTypes.JS,
-      }, {
+          code: textAreaSource,
-        type: GuideSectionTypes.HTML,
+        },
-        code: textAreaHtml,
+        {
-      }]}
+          type: GuideSectionTypes.HTML,
+          code: textAreaHtml,
+        },
+      ]}
     >
       <GuideDemo>
-        <TextArea/>
+        <TextArea />
       </GuideDemo>
     </GuideSection>
 
     <GuideSection
       title="TextArea, non-resizable"
-      source={[{
+      source={[
-        type: GuideSectionTypes.JS,
+        {
-        code: textAreaNonResizableSource,
+          type: GuideSectionTypes.JS,
-      }, {
+          code: textAreaNonResizableSource,
-        type: GuideSectionTypes.HTML,
+        },
-        code: textAreaNonResizableHtml,
+        {
-      }]}
+          type: GuideSectionTypes.HTML,
+          code: textAreaNonResizableHtml,
+        },
+      ]}
     >
       <GuideDemo>
-        <TextAreaNonResizable/>
+        <TextAreaNonResizable />
       </GuideDemo>
     </GuideSection>
 
     <GuideSection
       title="CheckBox"
-      source={[{
+      source={[
-        type: GuideSectionTypes.JS,
+        {
-        code: checkBoxSource,
+          type: GuideSectionTypes.JS,
-      }, {
+          code: checkBoxSource,
-        type: GuideSectionTypes.HTML,
+        },
-        code: checkBoxHtml,
+        {
-      }]}
+          type: GuideSectionTypes.HTML,
+          code: checkBoxHtml,
+        },
+      ]}
     >
       <GuideDemo>
-        <CheckBox/>
+        <CheckBox />
       </GuideDemo>
     </GuideSection>
 
     <GuideSection
       title="Select"
-      source={[{
+      source={[
-        type: GuideSectionTypes.JS,
+        {
-        code: selectSource,
+          type: GuideSectionTypes.JS,
-      }, {
+          code: selectSource,
-        type: GuideSectionTypes.HTML,
+        },
-        code: selectHtml,
+        {
-      }]}
+          type: GuideSectionTypes.HTML,
+          code: selectHtml,
+        },
+      ]}
     >
       <GuideDemo>
-        <Select/>
+        <Select />
       </GuideDemo>
-
     </GuideSection>
   </GuidePage>
 );

packages/kbn-ui-framework/doc_site/src/views/form/label.js

@@ -18,9 +18,7 @@
  */
 
 import React from 'react';
-import {
+import { KuiLabel } from '../../../../components';
-  KuiLabel,
-} from '../../../../components';
 
 const KuiLabelExample = () => {
   return <KuiLabel>Label</KuiLabel>;

packages/kbn-ui-framework/doc_site/src/views/form/select.js

@@ -17,12 +17,8 @@
  * under the License.
  */
 
-import React, {
+import React, { Component } from 'react';
-  Component,
+import { KuiSelect } from '../../../../components';
-} from 'react';
-import {
-  KuiSelect,
-} from '../../../../components';
 
 class KuiSelectExample extends Component {
   state = {
@@ -35,20 +31,17 @@ class KuiSelectExample extends Component {
 
   handleChange = (event, key) => {
     this.setState({ [key]: event.target.value });
-  }
+  };
 
   render() {
     return (
       <div>
-        <KuiSelect
+        <KuiSelect value={this.state.value1} onChange={event => this.handleChange(event, 'value1')}>
-          value={this.state.value1}
+          <option value="apple">Apple</option>
-          onChange={event => this.handleChange(event, 'value1')}
+          <option value="bread">Bread</option>
-        >
+          <option value="cheese">Cheese</option>
-          <option value="apple" >Apple</option>
-          <option value="bread" >Bread</option>
-          <option value="cheese" >Cheese</option>
         </KuiSelect>
-        <hr className="guideBreak"/>
+        <hr className="guideBreak" />
         <KuiSelect
           value={this.state.value2}
           onChange={event => this.handleChange(event, 'value2')}
@@ -56,7 +49,7 @@ class KuiSelectExample extends Component {
         >
           <option>Disabled</option>
         </KuiSelect>
-        <hr className="guideBreak"/>
+        <hr className="guideBreak" />
         <KuiSelect
           value={this.state.value3}
           onChange={event => this.handleChange(event, 'value3')}
@@ -64,7 +57,7 @@ class KuiSelectExample extends Component {
         >
           <option>Invalid</option>
         </KuiSelect>
-        <hr className="guideBreak"/>
+        <hr className="guideBreak" />
         <KuiSelect
           value={this.state.value4}
           onChange={event => this.handleChange(event, 'value4')}
@@ -72,7 +65,7 @@ class KuiSelectExample extends Component {
         >
           <option>Small</option>
         </KuiSelect>
-        <hr className="guideBreak"/>
+        <hr className="guideBreak" />
         <KuiSelect
           value={this.state.value5}
           onChange={event => this.handleChange(event, 'value5')}

packages/kbn-ui-framework/doc_site/src/views/form/text_area.js

@@ -17,12 +17,8 @@
  * under the License.
  */
 
-import React, {
+import React, { Component } from 'react';
-  Component,
+import { KuiTextArea } from '../../../../components';
-} from 'react';
-import {
-  KuiTextArea,
-} from '../../../../components';
 
 class KuiTextAreaExample extends Component {
   state = {
@@ -36,7 +32,7 @@ class KuiTextAreaExample extends Component {
 
   handleChange = (event, key) => {
     this.setState({ [key]: event.target.value });
-  }
+  };
 
   render() {
     return (
@@ -46,31 +42,31 @@ class KuiTextAreaExample extends Component {
           value={this.state.value1}
           onChange={event => this.handleChange(event, 'value1')}
         />
-        <hr className="guideBreak"/>
+        <hr className="guideBreak" />
         <KuiTextArea
           value={this.state.value2}
           onChange={event => this.handleChange(event, 'value2')}
         />
-        <hr className="guideBreak"/>
+        <hr className="guideBreak" />
         <KuiTextArea
           isInvalid
           value={this.state.value3}
           onChange={event => this.handleChange(event, 'value3')}
         />
-        <hr className="guideBreak"/>
+        <hr className="guideBreak" />
         <KuiTextArea
           isDisabled
           value={this.state.value4}
           onChange={event => this.handleChange(event, 'value4')}
         />
-        <hr className="guideBreak"/>
+        <hr className="guideBreak" />
         <KuiTextArea
           placeholder="Small"
           value={this.state.value5}
           size="small"
           onChange={event => this.handleChange(event, 'value5')}
         />
-        <hr className="guideBreak"/>
+        <hr className="guideBreak" />
         <KuiTextArea
           placeholder="Large"
           value={this.state.value6}

packages/kbn-ui-framework/doc_site/src/views/form/text_area_non_resizable.js

@@ -17,12 +17,8 @@
  * under the License.
  */
 
-import React, {
+import React, { Component } from 'react';
-  Component,
+import { KuiTextArea } from '../../../../components';
-} from 'react';
-import {
-  KuiTextArea,
-} from '../../../../components';
 
 class KuiTextAreaNonResizableExample extends Component {
   state = {
@@ -31,7 +27,7 @@ class KuiTextAreaNonResizableExample extends Component {
 
   handleChange = (event, key) => {
     this.setState({ [key]: event.target.value });
-  }
+  };
 
   render() {
     return (

packages/kbn-ui-framework/doc_site/src/views/form/text_input.js

@@ -17,12 +17,8 @@
  * under the License.
  */
 
-import React, {
+import React, { Component } from 'react';
-  Component,
+import { KuiTextInput } from '../../../../components';
-} from 'react';
-import {
-  KuiTextInput,
-} from '../../../../components';
 
 class KuiTextInputExample extends Component {
   state = {
@@ -36,7 +32,7 @@ class KuiTextInputExample extends Component {
 
   handleChange = (event, key) => {
     this.setState({ [key]: event.target.value });
-  }
+  };
 
   render() {
     return (
@@ -46,32 +42,32 @@ class KuiTextInputExample extends Component {
           placeholder="Placeholder text"
           onChange={event => this.handleChange(event, 'value1')}
         />
-        <hr className="guideBreak"/>
+        <hr className="guideBreak" />
         <KuiTextInput
           value={this.state.value2}
           autoFocus
           onChange={event => this.handleChange(event, 'value2')}
         />
-        <hr className="guideBreak"/>
+        <hr className="guideBreak" />
         <KuiTextInput
           value={this.state.value3}
           isInvalid
           onChange={event => this.handleChange(event, 'value3')}
         />
-        <hr className="guideBreak"/>
+        <hr className="guideBreak" />
         <KuiTextInput
           value={this.state.value4}
           isDisabled
           onChange={event => this.handleChange(event, 'value4')}
         />
-        <hr className="guideBreak"/>
+        <hr className="guideBreak" />
         <KuiTextInput
           value={this.state.value5}
           size="small"
           placeholder="Small"
           onChange={event => this.handleChange(event, 'value5')}
         />
-        <hr className="guideBreak"/>
+        <hr className="guideBreak" />
         <KuiTextInput
           value={this.state.value6}
           size="large"

packages/kbn-ui-framework/doc_site/src/views/form_layout/field_group.js

@@ -33,10 +33,7 @@ export default () => (
       <KuiFieldGroupSection isWide>
         <div className="kuiSearchInput">
           <div className="kuiSearchInput__icon kuiIcon fa-search" />
-          <input
+          <input className="kuiSearchInput__input" type="text" />
-            className="kuiSearchInput__input"
-            type="text"
-          />
         </div>
       </KuiFieldGroupSection>
 
@@ -49,51 +46,35 @@ export default () => (
       </KuiFieldGroupSection>
     </KuiFieldGroup>
 
-    <br className="guideBreak"/>
+    <br className="guideBreak" />
 
     <KuiFieldGroup>
       <KuiFieldGroupSection>
-        <input
+        <input className="kuiTextInput" placeholder="http://" type="text" />
-          className="kuiTextInput"
-          placeholder="http://"
-          type="text"
-        />
       </KuiFieldGroupSection>
 
       <KuiFieldGroupSection>
-        <KuiButton buttonType="primary">
+        <KuiButton buttonType="primary">Ping</KuiButton>
-          Ping
-        </KuiButton>
       </KuiFieldGroupSection>
     </KuiFieldGroup>
 
-    <br className="guideBreak"/>
+    <br className="guideBreak" />
 
     <KuiFieldGroup isAlignedTop>
       <KuiFieldGroupSection>
-        <textarea
+        <textarea className="kuiTextArea" placeholder="http://" type="text" rows="5" />
-          className="kuiTextArea"
-          placeholder="http://"
-          type="text"
-          rows="5"
-        />
       </KuiFieldGroupSection>
 
       <KuiFieldGroupSection>
-        <KuiButton buttonType="primary">
+        <KuiButton buttonType="primary">Ping</KuiButton>
-          Ping
-        </KuiButton>
       </KuiFieldGroupSection>
     </KuiFieldGroup>
 
-    <br className="guideBreak"/>
+    <br className="guideBreak" />
 
     <KuiFieldGroup>
       <KuiFieldGroupSection>
-        <input
+        <input className="kuiTextInput" type="text" />
-          className="kuiTextInput"
-          type="text"
-        />
       </KuiFieldGroupSection>
 
       <KuiFieldGroupSection>

packages/kbn-ui-framework/doc_site/src/views/form_layout/form_layout_example.js

@@ -22,12 +22,7 @@
 import React from 'react';
 import { renderToHtml } from '../../services';
 
-import {
+import { GuideDemo, GuidePage, GuideSection, GuideSectionTypes } from '../../components';
-  GuideDemo,
-  GuidePage,
-  GuideSection,
-  GuideSectionTypes,
-} from '../../components';
 
 import FieldGroup from './field_group';
 import fieldGroupSource from '!!raw-loader!./field_group';
@@ -37,13 +32,16 @@ export default props => (
   <GuidePage title={props.route.name}>
     <GuideSection
       title="FieldGroup"
-      source={[{
+      source={[
-        type: GuideSectionTypes.JS,
+        {
-        code: fieldGroupSource,
+          type: GuideSectionTypes.JS,
-      }, {
+          code: fieldGroupSource,
-        type: GuideSectionTypes.HTML,
+        },
-        code: fieldGroupHtml,
+        {
-      }]}
+          type: GuideSectionTypes.HTML,
+          code: fieldGroupHtml,
+        },
+      ]}
     >
       <GuideDemo>
         <FieldGroup />

packages/kbn-ui-framework/doc_site/src/views/home/home_view.js

@@ -23,9 +23,7 @@ export const HomeView = () => (
   <div className="guideContentPage guideHomePage">
     <div className="guideContentPage__content">
       <div style={{ marginBottom: 40, backgroundColor: '#ffec9d', padding: 20 }}>
-        <h1 className="guideTitle">
+        <h1 className="guideTitle">The Kibana UI Framework has been DEPRECATED.</h1>
-          The Kibana UI Framework has been DEPRECATED.
-        </h1>
 
         <h2 className="guideTitle">
           Please use the <a href="https://github.com/elastic/eui">EUI Framework instead</a>.

packages/kbn-ui-framework/doc_site/src/views/icon/icon_example.js

@@ -42,135 +42,128 @@ export default props => (
   <GuidePage title={props.route.name}>
     <GuideSection
       title="Icon"
-      source={[{
+      source={[
-        type: GuideSectionTypes.HTML,
+        {
-        code: iconHtml,
+          type: GuideSectionTypes.HTML,
-      }]}
+          code: iconHtml,
+        },
+      ]}
     >
       <GuideText>
         Use the <GuideCode>icon</GuideCode> class instead of the <GuideCode>fa</GuideCode> class for
         FontAwesome icons. This will make it easier for us to migrate away from FontAwesome.
       </GuideText>
 
-      <GuideDemo
+      <GuideDemo html={iconHtml} />
-        html={iconHtml}
-      />
     </GuideSection>
 
     <GuideSection
       title="Info"
-      source={[{
+      source={[
-        type: GuideSectionTypes.HTML,
+        {
-        code: infoHtml,
+          type: GuideSectionTypes.HTML,
-      }]}
+          code: infoHtml,
+        },
+      ]}
     >
-      <GuideText>
+      <GuideText>Use this Icon to denote useful information.</GuideText>
-        Use this Icon to denote useful information.
-      </GuideText>
 
-      <GuideDemo
+      <GuideDemo html={infoHtml} />
-        html={infoHtml}
-      />
     </GuideSection>
 
     <GuideSection
       title="Basic"
-      source={[{
+      source={[
-        type: GuideSectionTypes.HTML,
+        {
-        code: basicHtml,
+          type: GuideSectionTypes.HTML,
-      }]}
+          code: basicHtml,
+        },
+      ]}
     >
       <GuideText>
-        Use this Icon when you don&rsquo;t want to communicate any particular meaning with the icon&rsquo;s
+        Use this Icon when you don&rsquo;t want to communicate any particular meaning with the
-        color.
+        icon&rsquo;s color.
       </GuideText>
 
-      <GuideDemo
+      <GuideDemo html={basicHtml} />
-        html={basicHtml}
-      />
     </GuideSection>
 
     <GuideSection
       title="Success"
-      source={[{
+      source={[
-        type: GuideSectionTypes.HTML,
+        {
-        code: successHtml,
+          type: GuideSectionTypes.HTML,
-      }]}
+          code: successHtml,
+        },
+      ]}
     >
       <GuideText>
         Use this Icon to denote the successful completion of an action, e.g. filling out a form
         field correctly or a successful API request.
       </GuideText>
 
-      <GuideDemo
+      <GuideDemo html={successHtml} />
-        html={successHtml}
-      />
     </GuideSection>
 
     <GuideSection
       title="Warning"
-      source={[{
+      source={[
-        type: GuideSectionTypes.HTML,
+        {
-        code: warningHtml,
+          type: GuideSectionTypes.HTML,
-      }]}
+          code: warningHtml,
+        },
+      ]}
     >
-      <GuideText>
+      <GuideText>Use this Icon to denote an irregularity or potential problems.</GuideText>
-        Use this Icon to denote an irregularity or potential problems.
-      </GuideText>
 
-      <GuideDemo
+      <GuideDemo html={warningHtml} />
-        html={warningHtml}
-      />
     </GuideSection>
 
     <GuideSection
       title="Error"
-      source={[{
+      source={[
-        type: GuideSectionTypes.HTML,
+        {
-        code: errorHtml,
+          type: GuideSectionTypes.HTML,
-      }]}
+          code: errorHtml,
+        },
+      ]}
     >
       <GuideText>
         Use this Icon to denote a failed attempt at an action, e.g. an invalid form field or an API
         error.
       </GuideText>
 
-      <GuideDemo
+      <GuideDemo html={errorHtml} />
-        html={errorHtml}
-      />
     </GuideSection>
 
     <GuideSection
       title="Inactive"
-      source={[{
+      source={[
-        type: GuideSectionTypes.HTML,
+        {
-        code: inactiveHtml,
+          type: GuideSectionTypes.HTML,
-      }]}
+          code: inactiveHtml,
+        },
+      ]}
     >
       <GuideText>
         Use this Icon to denote a disabled, inactive, off, offline, or asleep status.
       </GuideText>
 
-      <GuideDemo
+      <GuideDemo html={inactiveHtml} />
-        html={inactiveHtml}
-      />
     </GuideSection>
 
     <GuideSection
       title="Spinner"
-      source={[{
+      source={[
-        type: GuideSectionTypes.HTML,
+        {
-        code: spinnerHtml,
+          type: GuideSectionTypes.HTML,
-      }]}
+          code: spinnerHtml,
+        },
+      ]}
     >
-      <GuideText>
+      <GuideText>You can use Icons to represent a loading and successfully-loaded state.</GuideText>
-        You can use Icons to represent a loading and successfully-loaded state.
-      </GuideText>
 
-      <GuideDemo
+      <GuideDemo html={spinnerHtml} js={spinnerJs} />
-        html={spinnerHtml}
-        js={spinnerJs}
-      />
     </GuideSection>
   </GuidePage>
 );

packages/kbn-ui-framework/doc_site/src/views/info_panel/info_panel_example.js

@@ -19,13 +19,7 @@
 
 import React from 'react';
 
-import {
+import { GuideDemo, GuidePage, GuideSection, GuideSectionTypes, GuideText } from '../../components';
-  GuideDemo,
-  GuidePage,
-  GuideSection,
-  GuideSectionTypes,
-  GuideText,
-} from '../../components';
 
 import infoHtml from './info_panel_info.html';
 import successHtml from './info_panel_success.html';
@@ -36,66 +30,62 @@ export default props => (
   <GuidePage title={props.route.name}>
     <GuideSection
       title="Info"
-      source={[{
+      source={[
-        type: GuideSectionTypes.HTML,
+        {
-        code: infoHtml,
+          type: GuideSectionTypes.HTML,
-      }]}
+          code: infoHtml,
+        },
+      ]}
     >
-      <GuideText>
+      <GuideText>Use this InfoPanel to generally inform the user.</GuideText>
-        Use this InfoPanel to generally inform the user.
-      </GuideText>
 
-      <GuideDemo
+      <GuideDemo html={infoHtml} />
-        html={infoHtml}
-      />
     </GuideSection>
 
     <GuideSection
       title="Success"
-      source={[{
+      source={[
-        type: GuideSectionTypes.HTML,
+        {
-        code: successHtml,
+          type: GuideSectionTypes.HTML,
-      }]}
+          code: successHtml,
+        },
+      ]}
     >
       <GuideText>
         Use this InfoPanel to notify the user of an action successfully completing.
       </GuideText>
 
-      <GuideDemo
+      <GuideDemo html={successHtml} />
-        html={successHtml}
-      />
     </GuideSection>
 
     <GuideSection
       title="Warning"
-      source={[{
+      source={[
-        type: GuideSectionTypes.HTML,
+        {
-        code: warningHtml,
+          type: GuideSectionTypes.HTML,
-      }]}
+          code: warningHtml,
+        },
+      ]}
     >
       <GuideText>
         Use this InfoPanel to warn the user against decisions they might regret.
       </GuideText>
 
-      <GuideDemo
+      <GuideDemo html={warningHtml} />
-        html={warningHtml}
-      />
     </GuideSection>
 
     <GuideSection
       title="Error"
-      source={[{
+      source={[
-        type: GuideSectionTypes.HTML,
+        {
-        code: errorHtml,
+          type: GuideSectionTypes.HTML,
-      }]}
+          code: errorHtml,
+        },
+      ]}
     >
-      <GuideText>
+      <GuideText>Use this InfoPanel to let the user know something went wrong.</GuideText>
-        Use this InfoPanel to let the user know something went wrong.
-      </GuideText>
 
-      <GuideDemo
+      <GuideDemo html={errorHtml} />
-        html={errorHtml}
-      />
     </GuideSection>
   </GuidePage>
 );

packages/kbn-ui-framework/doc_site/src/views/link/link_example.js

@@ -19,12 +19,7 @@
 
 import React from 'react';
 
-import {
+import { GuideDemo, GuidePage, GuideSection, GuideSectionTypes } from '../../components';
-  GuideDemo,
-  GuidePage,
-  GuideSection,
-  GuideSectionTypes,
-} from '../../components';
 
 import linkHtml from './link.html';
 
@@ -32,14 +27,14 @@ export default props => (
   <GuidePage title={props.route.name}>
     <GuideSection
       title="Link"
-      source={[{
+      source={[
-        type: GuideSectionTypes.HTML,
+        {
-        code: linkHtml,
+          type: GuideSectionTypes.HTML,
-      }]}
+          code: linkHtml,
+        },
+      ]}
     >
-      <GuideDemo
+      <GuideDemo html={linkHtml} />
-        html={linkHtml}
-      />
     </GuideSection>
   </GuidePage>
 );

packages/kbn-ui-framework/doc_site/src/views/local_nav/local_nav_breadcrumbs.js

@@ -19,11 +19,7 @@
 
 import React from 'react';
 
-import {
+import { KuiLocalNav, KuiLocalNavRow, KuiLocalNavRowSection } from '../../../../components';
-  KuiLocalNav,
-  KuiLocalNavRow,
-  KuiLocalNavRowSection,
-} from '../../../../components';
 
 export function LocalNavWithBreadcrumbs() {
   return (

packages/kbn-ui-framework/doc_site/src/views/local_nav/local_nav_dropdown.js

@@ -19,11 +19,7 @@
 
 import React from 'react';
 
-import {
+import { KuiLocalNav, KuiLocalNavRow, KuiLocalNavRowSection } from '../../../../components';
-  KuiLocalNav,
-  KuiLocalNavRow,
-  KuiLocalNavRowSection,
-} from '../../../../components';
 
 export function LocalNavWithDropdown() {
   return (
@@ -75,17 +71,11 @@ export function LocalNavWithDropdown() {
         <div className="kuiLocalDropdownSection">
           {/* Header */}
           <div className="kuiLocalDropdownHeader">
-            <div className="kuiLocalDropdownHeader__label">
+            <div className="kuiLocalDropdownHeader__label">Header for a section of content</div>
-              Header for a section of content
-            </div>
           </div>
 
           {/* Input */}
-          <input
+          <input className="kuiLocalDropdownInput" type="text" placeholder="Input something here" />
-            className="kuiLocalDropdownInput"
-            type="text"
-            placeholder="Input something here"
-          />
         </div>
 
         <div className="kuiLocalDropdownSection">
@@ -95,16 +85,10 @@ export function LocalNavWithDropdown() {
               Header for another section of content
             </div>
             <div className="kuiLocalDropdownHeader__actions">
-              <a
+              <a className="kuiLocalDropdownHeader__action" href="">
-                className="kuiLocalDropdownHeader__action"
-                href=""
-              >
                 Action A
               </a>
-              <a
+              <a className="kuiLocalDropdownHeader__action" href="">
-                className="kuiLocalDropdownHeader__action"
-                href=""
-              >
                 Action B
               </a>
             </div>

packages/kbn-ui-framework/doc_site/src/views/local_nav/local_nav_dropdown_panels.js

@@ -19,11 +19,7 @@
 
 import React from 'react';
 
-import {
+import { KuiLocalNav, KuiLocalNavRow, KuiLocalNavRowSection } from '../../../../components';
-  KuiLocalNav,
-  KuiLocalNavRow,
-  KuiLocalNavRowSection,
-} from '../../../../components';
 
 export function LocalNavWithDropdownPanels() {
   return (

packages/kbn-ui-framework/doc_site/src/views/local_nav/local_nav_example.js

@@ -22,13 +22,7 @@ import React from 'react';
 
 import { renderToHtml } from '../../services';
 
-import {
+import { GuideDemo, GuidePage, GuideSection, GuideSectionTypes, GuideText } from '../../components';
-  GuideDemo,
-  GuidePage,
-  GuideSection,
-  GuideSectionTypes,
-  GuideText,
-} from '../../components';
 
 import { SimpleLocalNav } from './local_nav_simple';
 import simpleLocalNavSource from '!!raw-loader!./local_nav_simple';
@@ -80,7 +74,8 @@ export default props => (
       ]}
     >
       <GuideText>
-        Here&rsquo;s a simple LocalNav with a Title in the top left corner and Menu in the top right.
+        Here&rsquo;s a simple LocalNav with a Title in the top left corner and Menu in the top
+        right.
       </GuideText>
 
       <GuideDemo>
@@ -101,9 +96,7 @@ export default props => (
         },
       ]}
     >
-      <GuideText>
+      <GuideText>You can replace the Title with Breadcrumbs.</GuideText>
-        You can replace the Title with Breadcrumbs.
-      </GuideText>
 
       <GuideDemo>
         <LocalNavWithBreadcrumbs />
@@ -123,14 +116,11 @@ export default props => (
         },
       ]}
     >
-      <GuideText>
+      <GuideText>You can add a Search component for filtering results.</GuideText>
-        You can add a Search component for filtering results.
-      </GuideText>
 
       <GuideDemo>
         <LocalNavWithSearch />
       </GuideDemo>
-
     </GuideSection>
 
     <GuideSection
@@ -190,9 +180,7 @@ export default props => (
         },
       ]}
     >
-      <GuideText>
+      <GuideText>Selecting a Menu Item will commonly result in an open Dropdown.</GuideText>
-        Selecting a Menu Item will commonly result in an open Dropdown.
-      </GuideText>
 
       <GuideDemo>
         <LocalNavWithDropdown />
@@ -212,9 +200,7 @@ export default props => (
         },
       ]}
     >
-      <GuideText>
+      <GuideText>You can split the Dropdown into side-by-side Panels.</GuideText>
-        You can split the Dropdown into side-by-side Panels.
-      </GuideText>
 
       <GuideDemo>
         <LocalNavWithDropdownPanels />
@@ -234,9 +220,7 @@ export default props => (
         },
       ]}
     >
-      <GuideText>
+      <GuideText>You can display Tabs for navigating local content.</GuideText>
-        You can display Tabs for navigating local content.
-      </GuideText>
 
       <GuideDemo>
         <LocalNavWithTabs />
@@ -245,15 +229,14 @@ export default props => (
 
     <GuideSection
       title="DatePicker"
-      source={[{
+      source={[
-        type: GuideSectionTypes.HTML,
+        {
-        code: datePickerHtml,
+          type: GuideSectionTypes.HTML,
-      }]}
+          code: datePickerHtml,
+        },
+      ]}
     >
-      <GuideDemo
+      <GuideDemo html={datePickerHtml} />
-        html={datePickerHtml}
-      />
     </GuideSection>
   </GuidePage>
 );
-

packages/kbn-ui-framework/doc_site/src/views/local_nav/local_nav_menu_item_states.js

@@ -19,11 +19,7 @@
 
 import React from 'react';
 
-import {
+import { KuiLocalNav, KuiLocalNavRow, KuiLocalNavRowSection } from '../../../../components';
-  KuiLocalNav,
-  KuiLocalNavRow,
-  KuiLocalNavRowSection,
-} from '../../../../components';
 
 export function LocalNavWithMenuItemStates() {
   return (

packages/kbn-ui-framework/doc_site/src/views/local_nav/local_nav_search.js

@@ -19,11 +19,7 @@
 
 import React from 'react';
 
-import {
+import { KuiLocalNav, KuiLocalNavRow, KuiLocalNavRowSection } from '../../../../components';
-  KuiLocalNav,
-  KuiLocalNavRow,
-  KuiLocalNavRowSection,
-} from '../../../../components';
 
 export function LocalNavWithSearch() {
   return (
@@ -65,7 +61,9 @@ export function LocalNavWithSearch() {
             />
             <div className="kuiLocalSearchAssistedInput__assistance">
               <p className="kuiText">
-                <a className="kuiLink" href="#">API docs</a>
+                <a className="kuiLink" href="#">
+                  API docs
+                </a>
               </p>
             </div>
           </div>

packages/kbn-ui-framework/doc_site/src/views/local_nav/local_nav_search_error.js

@@ -19,11 +19,7 @@
 
 import React from 'react';
 
-import {
+import { KuiLocalNav, KuiLocalNavRow, KuiLocalNavRowSection } from '../../../../components';
-  KuiLocalNav,
-  KuiLocalNavRow,
-  KuiLocalNavRowSection,
-} from '../../../../components';
 
 export function LocalNavWithSearchError() {
   return (

packages/kbn-ui-framework/doc_site/src/views/local_nav/local_nav_simple.js

@@ -31,9 +31,7 @@ export function SimpleLocalNav() {
     <KuiLocalNav>
       <KuiLocalNavRow>
         <KuiLocalNavRowSection>
-          <KuiLocalTitle>
+          <KuiLocalTitle>Untitled Document</KuiLocalTitle>
-            Untitled Document
-          </KuiLocalTitle>
         </KuiLocalNavRowSection>
         <KuiLocalNavRowSection>
           <div className="kuiLocalMenu">

packages/kbn-ui-framework/doc_site/src/views/local_nav/local_nav_tabs.js

@@ -60,9 +60,7 @@ export function LocalNavWithTabs() {
           <KuiLocalTab href="#" isSelected>
             Overview
           </KuiLocalTab>
-          <KuiLocalTab href="#">
+          <KuiLocalTab href="#">Your Documents</KuiLocalTab>
-            Your Documents
-          </KuiLocalTab>
           <KuiLocalTab href="#" isDisabled>
             Another Tab
           </KuiLocalTab>

packages/kbn-ui-framework/doc_site/src/views/not_found/not_found_view.js

@@ -29,17 +29,15 @@ export const NotFoundView = () => (
       </h1>
 
       <p className="guideText">
-        You visited a page which doesn&rsquo;t exist, causing <em>this</em> page to exist. This page thanks
+        You visited a page which doesn&rsquo;t exist, causing <em>this</em> page to exist. This page
-        you for summoning it into existence from the raw fabric of reality, but it thinks you may
+        thanks you for summoning it into existence from the raw fabric of reality, but it thinks you
-        find another page more interesting. Might it suggest
+        may find another page more interesting. Might it suggest the{' '}
-        the {(
+        {
-          <Link
+          <Link className="guideLink" to="/">
-            className="guideLink"
-            to="/"
-          >
             home page
           </Link>
-        )}?
+        }
+        ?
       </p>
     </div>
   </div>

packages/kbn-ui-framework/doc_site/src/views/pager/pager_buttons.js

@@ -19,17 +19,14 @@
 
 import React from 'react';
 
-import {
+import { KuiButton, KuiPagerButtonGroup } from '../../../../components';
-  KuiButton,
-  KuiPagerButtonGroup
-} from '../../../../components';
 
 export class PagerButtons extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       item: 1,
-      maxItems: 3
+      maxItems: 3,
     };
   }
 
@@ -58,7 +55,7 @@ export class PagerButtons extends React.Component {
           onNext={this.onNext}
           onPrevious={this.onPrevious}
         />
-        { this.getPage() }
+        {this.getPage()}
       </div>
     );
   }

packages/kbn-ui-framework/doc_site/src/views/pager/pager_example.js

@@ -22,13 +22,7 @@
 import React from 'react';
 import { renderToHtml } from '../../services';
 
-import {
+import { GuideDemo, GuidePage, GuideSection, GuideSectionTypes, GuideText } from '../../components';
-  GuideDemo,
-  GuidePage,
-  GuideSection,
-  GuideSectionTypes,
-  GuideText,
-} from '../../components';
 
 import { ToolBarPager } from './tool_bar_pager';
 import toolBarPagerSource from '!!raw-loader!./tool_bar_pager'; // eslint-disable-line import/default
@@ -42,17 +36,18 @@ export default props => (
   <GuidePage title={props.route.name}>
     <GuideSection
       title="Pager"
-      source={[{
+      source={[
-        type: GuideSectionTypes.JS,
+        {
-        code: toolBarPagerSource,
+          type: GuideSectionTypes.JS,
-      }, {
+          code: toolBarPagerSource,
-        type: GuideSectionTypes.HTML,
+        },
-        code: toolBarPagerHtml,
+        {
-      }]}
+          type: GuideSectionTypes.HTML,
+          code: toolBarPagerHtml,
+        },
+      ]}
     >
-      <GuideText>
+      <GuideText>Use the Pager in a tool bar.</GuideText>
-        Use the Pager in a tool bar.
-      </GuideText>
 
       <GuideDemo>
         <ToolBarPager />
@@ -61,17 +56,18 @@ export default props => (
 
     <GuideSection
       title="Pager Buttons"
-      source={[{
+      source={[
-        type: GuideSectionTypes.JS,
+        {
-        code: pagerButtonsSource,
+          type: GuideSectionTypes.JS,
-      }, {
+          code: pagerButtonsSource,
-        type: GuideSectionTypes.HTML,
+        },
-        code: pagerButtonsHtml,
+        {
-      }]}
+          type: GuideSectionTypes.HTML,
+          code: pagerButtonsHtml,
+        },
+      ]}
     >
-      <GuideText>
+      <GuideText>Use the Pager Buttons to navigate through a set of items.</GuideText>
-        Use the Pager Buttons to navigate through a set of items.
-      </GuideText>
 
       <GuideDemo>
         <PagerButtons />

packages/kbn-ui-framework/doc_site/src/views/pager/tool_bar_pager.js

@@ -19,11 +19,7 @@
 
 import React from 'react';
 
-import {
+import { KuiToolBar, KuiToolBarSearchBox, KuiPager } from '../../../../components';
-  KuiToolBar,
-  KuiToolBarSearchBox,
-  KuiPager
-} from '../../../../components';
 
 export const ToolBarPager = () => (
   <KuiToolBar>

packages/kbn-ui-framework/doc_site/src/views/panel/panel_example.js

@@ -19,13 +19,7 @@
 
 import React from 'react';
 
-import {
+import { GuideDemo, GuidePage, GuideSection, GuideSectionTypes, GuideText } from '../../components';
-  GuideDemo,
-  GuidePage,
-  GuideSection,
-  GuideSectionTypes,
-  GuideText,
-} from '../../components';
 
 import panelHtml from './panel.html';
 import panelWithToolBarHtml from './panel_with_toolbar.html';
@@ -35,46 +29,45 @@ export default props => (
   <GuidePage title={props.route.name}>
     <GuideSection
       title="Panel"
-      source={[{
+      source={[
-        type: GuideSectionTypes.HTML,
+        {
-        code: panelHtml,
+          type: GuideSectionTypes.HTML,
-      }]}
+          code: panelHtml,
+        },
+      ]}
     >
-      <GuideDemo
+      <GuideDemo html={panelHtml} />
-        html={panelHtml}
-      />
     </GuideSection>
 
     <GuideSection
       title="Panel with PanelHeaderSections"
-      source={[{
+      source={[
-        type: GuideSectionTypes.HTML,
+        {
-        code: panelWithHeaderSectionsHtml,
+          type: GuideSectionTypes.HTML,
-      }]}
+          code: panelWithHeaderSectionsHtml,
+        },
+      ]}
     >
-      <GuideText>
+      <GuideText>PanelHeaders can have sections.</GuideText>
-        PanelHeaders can have sections.
-      </GuideText>
 
-      <GuideDemo
+      <GuideDemo html={panelWithHeaderSectionsHtml} />
-        html={panelWithHeaderSectionsHtml}
-      />
     </GuideSection>
 
     <GuideSection
       title="Panel with Toolbar"
-      source={[{
+      source={[
-        type: GuideSectionTypes.HTML,
+        {
-        code: panelWithToolBarHtml,
+          type: GuideSectionTypes.HTML,
-      }]}
+          code: panelWithToolBarHtml,
+        },
+      ]}
     >
       <GuideText>
-        Panels can live within toolbar sections. This is normally used as replacement for an empty table.
+        Panels can live within toolbar sections. This is normally used as replacement for an empty
+        table.
       </GuideText>
 
-      <GuideDemo
+      <GuideDemo html={panelWithToolBarHtml} />
-        html={panelWithToolBarHtml}
-      />
     </GuideSection>
   </GuidePage>
 );

packages/kbn-ui-framework/doc_site/src/views/status_text/status_text_example.js

@@ -19,12 +19,7 @@
 
 import React from 'react';
 
-import {
+import { GuideDemo, GuidePage, GuideSection, GuideSectionTypes } from '../../components';
-  GuideDemo,
-  GuidePage,
-  GuideSection,
-  GuideSectionTypes,
-} from '../../components';
 
 import html from './status_text.html';
 import infoHtml from './status_text_info.html';
@@ -36,62 +31,62 @@ export default props => (
   <GuidePage title={props.route.name}>
     <GuideSection
       title="StatusText"
-      source={[{
+      source={[
-        type: GuideSectionTypes.HTML,
+        {
-        code: html,
+          type: GuideSectionTypes.HTML,
-      }]}
+          code: html,
+        },
+      ]}
     >
-      <GuideDemo
+      <GuideDemo html={html} />
-        html={html}
-      />
     </GuideSection>
 
     <GuideSection
       title="Info"
-      source={[{
+      source={[
-        type: GuideSectionTypes.HTML,
+        {
-        code: infoHtml,
+          type: GuideSectionTypes.HTML,
-      }]}
+          code: infoHtml,
+        },
+      ]}
     >
-      <GuideDemo
+      <GuideDemo html={infoHtml} />
-        html={infoHtml}
-      />
     </GuideSection>
 
     <GuideSection
       title="Success"
-      source={[{
+      source={[
-        type: GuideSectionTypes.HTML,
+        {
-        code: successHtml,
+          type: GuideSectionTypes.HTML,
-      }]}
+          code: successHtml,
+        },
+      ]}
     >
-      <GuideDemo
+      <GuideDemo html={successHtml} />
-        html={successHtml}
-      />
     </GuideSection>
 
     <GuideSection
       title="Warning"
-      source={[{
+      source={[
-        type: GuideSectionTypes.HTML,
+        {
-        code: warningHtml,
+          type: GuideSectionTypes.HTML,
-      }]}
+          code: warningHtml,
+        },
+      ]}
     >
-      <GuideDemo
+      <GuideDemo html={warningHtml} />
-        html={warningHtml}
-      />
     </GuideSection>
 
     <GuideSection
       title="Error"
-      source={[{
+      source={[
-        type: GuideSectionTypes.HTML,
+        {
-        code: errorHtml,
+          type: GuideSectionTypes.HTML,
-      }]}
+          code: errorHtml,
+        },
+      ]}
     >
-      <GuideDemo
+      <GuideDemo html={errorHtml} />
-        html={errorHtml}
-      />
     </GuideSection>
   </GuidePage>
 );

packages/kbn-ui-framework/doc_site/src/views/table/fluid_table.js

@@ -17,9 +17,7 @@
  * under the License.
  */
 
-import React, {
+import React, { Component } from 'react';
-  Component,
-} from 'react';
 
 import {
   KuiTable,
@@ -30,9 +28,7 @@ import {
   KuiTableBody,
 } from '../../../../components';
 
-import {
+import { SortableProperties } from '../../../../src/services';
-  SortableProperties,
-} from '../../../../src/services';
 
 export class FluidTable extends Component {
   constructor(props) {
@@ -42,26 +38,36 @@ export class FluidTable extends Component {
       sortedColumn: 'title',
     };
 
-    this.items = [{
+    this.items = [
-      title: 'Cryogenics',
+      {
-      description: 'AC turned to 11',
+        title: 'Cryogenics',
-    }, {
+        description: 'AC turned to 11',
-      title: 'Propellant',
+      },
-      description: 'Go fast',
+      {
-    }, {
+        title: 'Propellant',
-      title: 'Rockets',
+        description: 'Go fast',
-      description: 'Hot and burny',
+      },
-    }];
+      {
+        title: 'Rockets',
+        description: 'Hot and burny',
+      },
+    ];
 
-    this.sortableProperties = new SortableProperties([{
+    this.sortableProperties = new SortableProperties(
-      name: 'title',
+      [
-      getValue: item => item.title.toLowerCase(),
+        {
-      isAscending: true,
+          name: 'title',
-    }, {
+          getValue: item => item.title.toLowerCase(),
-      name: 'description',
+          isAscending: true,
-      getValue: item => item.description.toLowerCase(),
+        },
-      isAscending: true,
+        {
-    }], this.state.sortedColumn);
+          name: 'description',
+          getValue: item => item.description.toLowerCase(),
+          isAscending: true,
+        },
+      ],
+      this.state.sortedColumn
+    );
   }
 
   onSort = prop => {
@@ -70,18 +76,14 @@ export class FluidTable extends Component {
     this.setState({
       sortedColumn: prop,
     });
-  }
+  };
 
   renderRows() {
     return this.items.map(item => (
       <KuiTableRow key={item.title}>
-        <KuiTableRowCell>
+        <KuiTableRowCell>{item.title}</KuiTableRowCell>
-          {item.title}
-        </KuiTableRowCell>
 
-        <KuiTableRowCell>
+        <KuiTableRowCell>{item.description}</KuiTableRowCell>
-          {item.description}
-        </KuiTableRowCell>
 
         <KuiTableRowCell>
           <select className="kuiSelect" defaultValue="on">
@@ -114,14 +116,10 @@ export class FluidTable extends Component {
             Description
           </KuiTableHeaderCell>
 
-          <KuiTableHeaderCell>
+          <KuiTableHeaderCell>Action</KuiTableHeaderCell>
-            Action
-          </KuiTableHeaderCell>
         </KuiTableHeader>
 
-        <KuiTableBody>
+        <KuiTableBody>{this.renderRows()}</KuiTableBody>
-          {this.renderRows()}
-        </KuiTableBody>
       </KuiTable>
     );
   }

packages/kbn-ui-framework/doc_site/src/views/table/listing_table.js

@@ -19,16 +19,9 @@
 
 import React, { Component } from 'react';
 
-import {
+import { KuiButton, KuiButtonIcon, KuiPager, KuiListingTable } from '../../../../components';
-  KuiButton,
-  KuiButtonIcon,
-  KuiPager,
-  KuiListingTable,
-} from '../../../../components';
 
-import {
+import { RIGHT_ALIGNMENT } from '../../../../src/services';
-  RIGHT_ALIGNMENT
-} from '../../../../src/services';
 
 export class ListingTable extends Component {
   constructor(props) {
@@ -41,51 +34,59 @@ export class ListingTable extends Component {
       {
         id: '1',
         cells: [
-          <a className="kuiLink" href="#">Alligator</a>,
+          <a className="kuiLink" href="#">
-          <div className="kuiIcon kuiIcon--success fa-check"/>,
+            Alligator
+          </a>,
+          <div className="kuiIcon kuiIcon--success fa-check" />,
           'Tue Dec 06 2016 12:56:15 GMT-0800 (PST)',
           {
             content: '1',
-            align: RIGHT_ALIGNMENT
+            align: RIGHT_ALIGNMENT,
           },
-        ]
+        ],
       },
       {
         id: '2',
         cells: [
-          <a className="kuiLink" href="#">Boomerang</a>,
+          <a className="kuiLink" href="#">
-          <div className="kuiIcon kuiIcon--success fa-check"/>,
+            Boomerang
+          </a>,
+          <div className="kuiIcon kuiIcon--success fa-check" />,
           'Tue Dec 06 2016 12:56:15 GMT-0800 (PST)',
           {
             content: '10',
-            align: RIGHT_ALIGNMENT
+            align: RIGHT_ALIGNMENT,
           },
-        ]
+        ],
       },
       {
         id: '3',
         cells: [
-          <a className="kuiLink" href="#">Celebration</a>,
+          <a className="kuiLink" href="#">
-          <div className="kuiIcon kuiIcon--warning fa-bolt"/>,
+            Celebration
+          </a>,
+          <div className="kuiIcon kuiIcon--warning fa-bolt" />,
           'Tue Dec 06 2016 12:56:15 GMT-0800 (PST)',
           {
             content: '100',
-            align: RIGHT_ALIGNMENT
+            align: RIGHT_ALIGNMENT,
           },
-        ]
+        ],
       },
       {
         id: '4',
         cells: [
-          <a className="kuiLink" href="#">Dog</a>,
+          <a className="kuiLink" href="#">
-          <div className="kuiIcon kuiIcon--error fa-warning"/>,
+            Dog
+          </a>,
+          <div className="kuiIcon kuiIcon--error fa-warning" />,
           'Tue Dec 06 2016 12:56:15 GMT-0800 (PST)',
           {
             content: '1000',
-            align: RIGHT_ALIGNMENT
+            align: RIGHT_ALIGNMENT,
           },
-        ]
+        ],
-      }
+      },
     ];
 
     this.header = [
@@ -98,7 +99,7 @@ export class ListingTable extends Component {
         isSorted: true,
         isSortAscending: true,
         align: RIGHT_ALIGNMENT,
-      }
+      },
     ];
   }
 
@@ -118,11 +119,7 @@ export class ListingTable extends Component {
 
   renderToolBarActions() {
     return [
-      <KuiButton
+      <KuiButton key="add" buttonType="primary" aria-label="Add">
-        key="add"
-        buttonType="primary"
-        aria-label="Add"
-      >
         Add
       </KuiButton>,
       <KuiButton
@@ -136,11 +133,11 @@ export class ListingTable extends Component {
         aria-label="Menu"
         buttonType="basic"
         icon={<KuiButtonIcon type="menu" />}
-      />
+      />,
     ];
   }
 
-  onItemSelectionChanged = (selectedRowIds) => {
+  onItemSelectionChanged = selectedRowIds => {
     this.setState({ selectedRowIds });
   };
 

packages/kbn-ui-framework/doc_site/src/views/table/listing_table_loading_items.js

@@ -27,9 +27,7 @@ import {
   KuiListingTableLoadingPrompt,
 } from '../../../../components';
 
-import {
+import { RIGHT_ALIGNMENT } from '../../../../src/services';
-  RIGHT_ALIGNMENT
-} from '../../../../src/services';
 
 function renderHeader() {
   return [
@@ -38,8 +36,8 @@ function renderHeader() {
     'Date created',
     {
       content: 'Orders of magnitude',
-      align: RIGHT_ALIGNMENT
+      align: RIGHT_ALIGNMENT,
-    }
+    },
   ];
 }
 
@@ -59,11 +57,7 @@ function renderPager() {
 
 function renderToolBarActions() {
   return [
-    <KuiButton
+    <KuiButton key="add" buttonType="primary" aria-label="Add">
-      key="add"
-      buttonType="primary"
-      aria-label="Add"
-    >
       Add
     </KuiButton>,
     <KuiButton
@@ -77,7 +71,7 @@ function renderToolBarActions() {
       aria-label="Menu"
       buttonType="basic"
       icon={<KuiButtonIcon type="menu" />}
-    />
+    />,
   ];
 }
 

packages/kbn-ui-framework/doc_site/src/views/table/listing_table_with_empty_prompt.js

@@ -26,7 +26,7 @@ import {
   KuiEmptyTablePrompt,
   KuiEmptyTablePromptPanel,
   KuiListingTable,
-  KuiTableHeaderCell
+  KuiTableHeaderCell,
 } from '../../../../components';
 
 function renderEmptyTablePrompt() {
@@ -42,25 +42,21 @@ function renderEmptyTablePrompt() {
 
 function renderToolBarActions() {
   return [
-    <KuiButton
+    <KuiButton key="add" buttonType="primary" aria-label="Add">
-      key="add"
-      buttonType="primary"
-      aria-label="Add"
-    >
       Add
     </KuiButton>,
     <KuiButton
       key="settings"
       aria-label="Settings"
       buttonType="basic"
-      icon={<KuiButtonIcon type="settings"/>}
+      icon={<KuiButtonIcon type="settings" />}
     />,
     <KuiButton
       key="menu"
       aria-label="Menu"
       buttonType="basic"
-      icon={<KuiButtonIcon type="menu"/>}
+      icon={<KuiButtonIcon type="menu" />}
-    />
+    />,
   ];
 }
 
@@ -72,31 +68,20 @@ function renderPager() {
       hasPreviousPage={false}
       endNumber={10}
       totalItems={100}
-      onNextPage={() => {
+      onNextPage={() => {}}
-      }}
+      onPreviousPage={() => {}}
-      onPreviousPage={() => {
-      }}
     />
   );
 }
 
 function renderHeader() {
   return [
-    <KuiTableHeaderCell key="title">
+    <KuiTableHeaderCell key="title">Title</KuiTableHeaderCell>,
-      Title
+    <KuiTableHeaderCell key="status">Status</KuiTableHeaderCell>,
-    </KuiTableHeaderCell>,
+    <KuiTableHeaderCell key="created">Date created</KuiTableHeaderCell>,
-    <KuiTableHeaderCell key="status">
+    <KuiTableHeaderCell key="order" className="kuiTableHeaderCell--alignRight">
-      Status
-    </KuiTableHeaderCell>,
-    <KuiTableHeaderCell key="created">
-      Date created
-    </KuiTableHeaderCell>,
-    <KuiTableHeaderCell
-      key="order"
-      className="kuiTableHeaderCell--alignRight"
-    >
       Orders of magnitude
-    </KuiTableHeaderCell>
+    </KuiTableHeaderCell>,
   ];
 }