github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 17:28:26 -04:00
Code Issues Projects Releases Packages Wiki Activity

autofix all violations

Browse source
This commit is contained in:
spalger 2019-12-13 23:55:01 -07:00
parent a07fa9f81d
commit c2c12539b8
4245 changed files with 87854 additions and 83023 deletions
Download patch file Download diff file Expand all files Collapse all files

6
Gruntfile.js
View file

@ -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

2
packages/kbn-analytics/babel.config.js
View file

@ -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'],

2
packages/kbn-babel-code-parser/src/can_require.js
View file

@ -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;

6
packages/kbn-babel-code-parser/src/code_parser.js
View file

@ -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;

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

@ -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`);
});

36
packages/kbn-babel-code-parser/src/visitors.js
View file

@ -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);
}
}
},
};
})();
}

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

@ -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)
);

2
packages/kbn-babel-preset/common_babel_parser_options.js
View file

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

24
packages/kbn-babel-preset/node_preset.js
View file

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

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

@ -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);

1
packages/kbn-interpreter/src/common/registries.js
View file

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

30
packages/kbn-interpreter/tasks/build/cli.js
View file

@ -24,27 +24,19 @@ const del = require('del');
const supportsColor = require('supports-color');
const { ToolingLog, withProcRunner, pickLevelFromFlags } = require('@kbn/dev-utils');
const {
ROOT_DIR,
BUILD_DIR,
} = require('./paths');
const { ROOT_DIR, BUILD_DIR } = require('./paths');
const unknownFlags = [];
const flags = getopts(process.argv, {
boolean: [
'watch',
'dev',
'help',
'debug'
],
boolean: ['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`,
'--out-dir', relative(cwd, BUILD_DIR),
'--ignore',
`*.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);
});

1
packages/kbn-interpreter/tasks/build/paths.js
View file

@ -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');

2
packages/kbn-interpreter/tasks/build/server_code_transformer.js
View file

@ -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':

3
packages/kbn-spec-to-console/bin/spec_to_console.js
View file

@ -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 {

1
packages/kbn-spec-to-console/index.js
View file

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

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

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

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

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

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

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

152
packages/kbn-ui-framework/Gruntfile.js
View file

@ -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: [
'target/components/**/*.js',
'target/src/**/*.js',
],
src: ['target/components/**/*.js', 'target/src/**/*.js'],
dest: '.',
options: {
presets: [
require.resolve('@kbn/babel-preset/webpack_preset')
]
presets: [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({
file: src,
}, function (error, result) {
if (error) {
grunt.log.error(error);
sass.render(
{
file: src,
},
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({
file: src,
}, function (error, result) {
if (error) {
grunt.log.error(error);
sass.render(
{
file: src,
},
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(() => {
// Compile the SCSS in a separate process because node-sass throws a fatal error if it fails
// to compile.
grunt.util.spawn({
cmd: isPlatformWindows ? '.\\node_modules\\.bin\\grunt.cmd' : './node_modules/.bin/grunt',
args: [
'compileCssLight',
'compileCssDark',
],
}, (error, result) => {
if (error) {
grunt.log.error(result.stdout);
} else {
grunt.log.writeln(result);
}
});
}, 400, { leading: true });
const debouncedCompile = debounce(
() => {
// Compile the SCSS in a separate process because node-sass throws a fatal error if it fails
// to compile.
grunt.util.spawn(
{
cmd: isPlatformWindows
? '.\\node_modules\\.bin\\grunt.cmd'
: './node_modules/.bin/grunt',
args: ['compileCssLight', 'compileCssDark'],
},
(error, result) => {
if (error) {
grunt.log.error(result.stdout);
} else {
grunt.log.writeln(result);
}
}
);
},
400,
{ leading: true }
);
return new Promise(() => {
debouncedCompile();

4
packages/kbn-ui-framework/doc_site/postcss.config.js
View file

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

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

@ -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,
});

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

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

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

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

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

@ -49,14 +49,9 @@ export class GuideCodeViewer extends Component {
if (code) {
return (
<div className="guideCodeViewer__section" key={type}>
<div className="guideCodeViewer__title">
{type}
</div>
<div className="guideCodeViewer__title">{type}</div>
<pre className="guideCodeViewer__content">
<code
ref={codeClass}
className={codeClass}
>
<code 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">
{this.props.title}
</div>
<div className="guideCodeViewer__header">{this.props.title}</div>
<div
className="guideCodeViewer__closeButton fa fa-times"
onClick={this.props.onClose}
/>
<div className="guideCodeViewer__closeButton fa fa-times" onClick={this.props.onClose} />
{codeSections}
</div>

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

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

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

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

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

@ -59,11 +59,7 @@ export class GuideNav extends Component {
}
renderNoItems(name) {
return (
<p className="guideNavNoItems">
{ `No ${name} match your search` }
</p>
);
return <p className="guideNavNoItems">{`No ${name} match your search`}</p>;
}
renderPagination() {
@ -85,10 +81,7 @@ export class GuideNav extends Component {
});
const nextButton = (
<Link
className={nextClasses}
to={this.state.nextRoute ? this.state.nextRoute.path : ''}
>
<Link 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 =
this.props.components.filter(item => (
item.name.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1
)).map((item, index) => {
const icon =
item.hasReact
? <div className="guideNavItem__reactLogo" />
: undefined;
const componentNavItems = this.props.components
.filter(item => item.name.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1)
.map((item, index) => {
const icon = item.hasReact ? <div className="guideNavItem__reactLogo" /> : undefined;
return (
<div key={`componentNavItem-${index}`} className="guideNavItem">
<Link
className="guideNavItem__link"
to={item.path}
onClick={this.props.onClickNavItem}
>
<Link className="guideNavItem__link" to={item.path} onClick={this.props.onClickNavItem}>
{item.name}
</Link>
@ -149,21 +134,13 @@ export class GuideNav extends Component {
);
});
const sandboxNavItems =
this.props.sandboxes.filter(item => (
item.name.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1
)).map((item, index) => {
const icon =
item.hasReact
? <div className="guideNavItem__reactLogo" />
: undefined;
const sandboxNavItems = this.props.sandboxes
.filter(item => item.name.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1)
.map((item, index) => {
const icon = item.hasReact ? <div className="guideNavItem__reactLogo" /> : undefined;
return (
<div key={`sandboxNavItem-${index}`} className="guideNavItem">
<Link
className="guideNavItem__link"
to={item.path}
onClick={this.props.onClickNavItem}
>
<Link 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
className={buttonClasses}
onClick={this.props.onToggleNav}
/>
<Link
className="guideNav__title"
to="/"
onClick={this.props.onClickNavItem}
>
<div className={buttonClasses} 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">
Components
</div>
<div className="guideNavSectionTitle">Components</div>
{ componentNavItems.length ? componentNavItems : this.renderNoItems('components') }
{componentNavItems.length ? componentNavItems : this.renderNoItems('components')}
<div className="guideNavSectionTitle">
Sandboxes
</div>
<div className="guideNavSectionTitle">Sandboxes</div>
{ sandboxNavItems.length ? sandboxNavItems : this.renderNoItems('sandboxes') }
{sandboxNavItems.length ? sandboxNavItems : this.renderNoItems('sandboxes')}
</div>
</div>
<button
className="guideLink guideNav__showButton"
onClick={this.props.onShowChrome}
>
<button className="guideLink guideNav__showButton" onClick={this.props.onShowChrome}>
Show chrome
</button>
</div>

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

@ -20,10 +20,7 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import {
GuidePageSideNav,
GuidePageSideNavItem,
} from '../';
import { 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
scrollTop: $(`#${id}`).offset().top - 100 // eslint-disable-line no-undef
}, 250);
$('html, body').animate(
{
// 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
key={index}
id={section.id}
onClick={this.onClickLink}
>
<GuidePageSideNavItem 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}>
{this.renderSideNavMenu()}
</GuidePageSideNav>
<GuidePageSideNav title={this.props.title}>{this.renderSideNavMenu()}</GuidePageSideNav>
<div className="guidePageBody">
<div className="guidePageKillScreen">
<h1 className="guideTitle">
The Kibana UI Framework has been DEPRECATED.
</h1>
<h1 className="guideTitle">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>.

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

@ -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">
{props.title}
</div>
<div className="guidePageSideNav__title">{props.title}</div>
<div className="guidePageSideNavMenu">
{props.children}
</div>
<div className="guidePageSideNavMenu">{props.children}</div>
</div>
);
};

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

@ -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
className="guidePageSideNavMenu__itemLink"
onClick={this.onClick}
>
<div className="guidePageSideNavMenu__itemLink" onClick={this.onClick}>
{this.props.children}
</div>
</div>
);
}
}
GuidePageSideNavItem.propTypes = {

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

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

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

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

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

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

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

@ -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';
export const GuideSectionContainer = connect(
null,
{
openCodeViewer,
registerSection,
unregisterSection,
},
)(GuideSection);
})(GuideSection);

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

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

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

@ -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 {
GuideSandboxCodeToggleContainer as GuideSandboxCodeToggle
} from './guide_sandbox/guide_sandbox_code_toggle_container';
export { 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';

33
packages/kbn-ui-framework/doc_site/src/index.js
View file

@ -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 {
Routes,
} from './services';
import { Routes } from './services';
const store = configureStore();
@ -47,22 +45,24 @@ childRoutes.push({
name: 'Page Not Found',
});
const routes = [{
path: '/',
component: AppContainer,
indexRoute: {
component: HomeView,
source: 'views/home/HomeView',
const routes = [
{
path: '/',
component: AppContainer,
indexRoute: {
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 ?
`Kibana UI Framework - ${leafRoute.name}` :
'Kibana UI Framework';
document.title = leafRoute.name
? `Kibana UI Framework - ${leafRoute.name}`
: 'Kibana UI Framework';
};
const syncTitleWithRoutes = routesList => {
@ -82,10 +82,7 @@ syncTitleWithRoutes(routes);
ReactDOM.render(
<Provider store={store}>
<Router
history={hashHistory}
routes={routes}
/>
<Router history={hashHistory} routes={routes} />
</Provider>,
document.getElementById('guide')
);

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

@ -18,9 +18,7 @@
*/
/* eslint import/named: 0 */
import {
GuideExample,
} from '../../components';
import { 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;

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

@ -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();
},
};

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

@ -19,10 +19,7 @@
import React from 'react';
import {
render,
configure
} from 'enzyme';
import { 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 '';
}
}

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

@ -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('-');
}

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

@ -17,11 +17,7 @@
* under the License.
*/
import {
applyMiddleware,
createStore,
compose,
} from 'redux';
import { 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(
applyMiddleware(
thunk,
routerMiddleware(browserHistory)
)
)(createStore)(rootReducer, initialState);
const finalStore = compose(applyMiddleware(thunk, routerMiddleware(browserHistory)))(createStore)(
rootReducer,
initialState
);
return finalStore;
}

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

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

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

@ -22,14 +22,9 @@ import React, { Component } from 'react';
import classNames from 'classnames';
import {
Routes,
} from '../services';
import { Routes } from '../services';
import {
GuideCodeViewer,
GuideNav,
} from '../components';
import { 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}>
{this.props.children}
</div>
<div className={contentClasses}>{this.props.children}</div>
<GuideCodeViewer
isOpen={this.props.isCodeViewerOpen}

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

@ -19,22 +19,17 @@
import React from 'react';
import {
KuiBar,
KuiBarSection
} from '../../../../components';
import { KuiBar, KuiBarSection } from '../../../../components';
export default () => (
<KuiBar>
<KuiBarSection>
<div className="kuiTitle">
The Great American Novel
</div>
<div className="kuiTitle">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>

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

@ -22,13 +22,7 @@
import React from 'react';
import { renderToHtml } from '../../services';
import {
GuideDemo,
GuidePage,
GuideSection,
GuideSectionTypes,
GuideText,
} from '../../components';
import { 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={[{
type: GuideSectionTypes.JS,
code: barSource,
}, {
type: GuideSectionTypes.HTML,
code: barHtml,
}]}
source={[
{
type: GuideSectionTypes.JS,
code: barSource,
},
{
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={[{
type: GuideSectionTypes.JS,
code: barOneSectionSource,
}, {
type: GuideSectionTypes.HTML,
code: barOneSectionHtml,
}]}
source={[
{
type: GuideSectionTypes.JS,
code: barOneSectionSource,
},
{
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,
just add another section and leave it empty, or don&rsquo;t use a Bar at all.
A Bar with one section will align it to the right, by default. To align it to the left, just
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={[{
type: GuideSectionTypes.JS,
code: barThreeSectionsSource,
}, {
type: GuideSectionTypes.HTML,
code: barThreeSectionsHtml,
}]}
source={[
{
type: GuideSectionTypes.JS,
code: barThreeSectionsSource,
},
{
type: GuideSectionTypes.HTML,
code: barThreeSectionsHtml,
},
]}
>
<GuideText>
Technically the Bar can contain three or more sections, but there&rsquo;s no established use-case
for this.
Technically the Bar can contain three or more sections, but there&rsquo;s no established
use-case for this.
</GuideText>
<GuideDemo>

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

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

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

@ -19,44 +19,29 @@
import React from 'react';
import {
KuiBar,
KuiBarSection,
KuiButton,
KuiButtonGroup
} from '../../../../components';
import { KuiBar, KuiBarSection, KuiButton, KuiButtonGroup } from '../../../../components';
export default () => (
<KuiBar>
<KuiBarSection>
<div className="kuiTitle">
The Great American Novel
</div>
<div className="kuiTitle">The Great American Novel</div>
</KuiBarSection>
<KuiBarSection>
<KuiButtonGroup>
<KuiButton buttonType="basic">
Create new page
</KuiButton>
<KuiButton buttonType="danger">
Clear all pages
</KuiButton>
<KuiButton buttonType="basic">Create new page</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">
Undo
</KuiButton>
<KuiButton buttonType="basic">
Redo
</KuiButton>
<KuiButton buttonType="basic">Undo</KuiButton>
<KuiButton buttonType="basic">Redo</KuiButton>
</KuiButtonGroup>
</KuiBarSection>
</KuiBar>

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

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

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

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

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

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

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

@ -23,13 +23,7 @@ import React from 'react';
import { renderToHtml } from '../../services';
import {
GuideDemo,
GuidePage,
GuideSection,
GuideSectionTypes,
GuideText,
} from '../../components';
import { 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={[{
type: GuideSectionTypes.JS,
code: basicSource,
}, {
type: GuideSectionTypes.HTML,
code: basicHtml,
}]}
source={[
{
type: GuideSectionTypes.JS,
code: basicSource,
},
{
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={[{
type: GuideSectionTypes.JS,
code: hollowSource,
}, {
type: GuideSectionTypes.HTML,
code: hollowHtml,
}]}
source={[
{
type: GuideSectionTypes.JS,
code: hollowSource,
},
{
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={[{
type: GuideSectionTypes.JS,
code: primarySource,
}, {
type: GuideSectionTypes.HTML,
code: primaryHtml,
}]}
source={[
{
type: GuideSectionTypes.JS,
code: primarySource,
},
{
type: GuideSectionTypes.HTML,
code: primaryHtml,
},
]}
>
<GuideText>
Use the primary Button to represent the most common action. Generally, there won&rsquo;t be a
need to present more than one of these at a time.
Use the primary Button to represent the most common action. Generally, there won&rsquo;t be
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={[{
type: GuideSectionTypes.JS,
code: secondarySource,
}, {
type: GuideSectionTypes.HTML,
code: secondaryHtml,
}]}
source={[
{
type: GuideSectionTypes.JS,
code: secondarySource,
},
{
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={[{
type: GuideSectionTypes.JS,
code: dangerSource,
}, {
type: GuideSectionTypes.HTML,
code: dangerHtml,
}]}
source={[
{
type: GuideSectionTypes.JS,
code: dangerSource,
},
{
type: GuideSectionTypes.HTML,
code: dangerHtml,
},
]}
>
<GuideText>
Danger Buttons represent irreversible, potentially regrettable actions.
</GuideText>
<GuideText>Danger Buttons represent irreversible, potentially regrettable actions.</GuideText>
<GuideDemo>
<Danger />
@ -177,17 +186,18 @@ export default props => (
<GuideSection
title="Warning Button"
source={[{
type: GuideSectionTypes.JS,
code: warningSource,
}, {
type: GuideSectionTypes.HTML,
code: warningHtml,
}]}
source={[
{
type: GuideSectionTypes.JS,
code: warningSource,
},
{
type: GuideSectionTypes.HTML,
code: warningHtml,
},
]}
>
<GuideText>
Warning Buttons represent potentially notable actions.
</GuideText>
<GuideText>Warning Buttons represent potentially notable actions.</GuideText>
<GuideDemo>
<Warning />
@ -196,13 +206,16 @@ export default props => (
<GuideSection
title="Loading Button"
source={[{
type: GuideSectionTypes.JS,
code: loadingSource,
}, {
type: GuideSectionTypes.HTML,
code: loadingHtml,
}]}
source={[
{
type: GuideSectionTypes.JS,
code: loadingSource,
},
{
type: GuideSectionTypes.HTML,
code: loadingHtml,
},
]}
>
<GuideDemo>
<Loading />
@ -211,20 +224,23 @@ export default props => (
<GuideSection
title="Button with icon"
source={[{
type: GuideSectionTypes.JS,
code: withIconSource,
}, {
type: GuideSectionTypes.HTML,
code: withIconHtml,
}]}
source={[
{
type: GuideSectionTypes.JS,
code: withIconSource,
},
{
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
or specify custom icon classes. If you have a button without textual content, make sure you set
the <code>aria-label</code> attribute with a textual representation for screen readers (see
last example below).
You can toss an icon into a Button, with or without text. You can also use a predefined
icon or specify custom icon classes. If you have a button without textual content, make
sure you set the <code>aria-label</code> attribute with a textual representation for
screen readers (see last example below).
</p>
</GuideText>
@ -235,13 +251,16 @@ export default props => (
<GuideSection
title="ButtonGroup"
source={[{
type: GuideSectionTypes.JS,
code: buttonGroupSource,
}, {
type: GuideSectionTypes.HTML,
code: buttonGroupHtml,
}]}
source={[
{
type: GuideSectionTypes.JS,
code: buttonGroupSource,
},
{
type: GuideSectionTypes.HTML,
code: buttonGroupHtml,
},
]}
>
<GuideDemo>
<ButtonGroup />
@ -250,13 +269,16 @@ export default props => (
<GuideSection
title="United ButtonGroup"
source={[{
type: GuideSectionTypes.JS,
code: buttonGroupUnitedSource,
}, {
type: GuideSectionTypes.HTML,
code: buttonGroupUnitedHtml,
}]}
source={[
{
type: GuideSectionTypes.JS,
code: buttonGroupUnitedSource,
},
{
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={[{
type: GuideSectionTypes.JS,
code: elementsSource,
}, {
type: GuideSectionTypes.HTML,
code: elementsHtml,
}]}
source={[
{
type: GuideSectionTypes.JS,
code: elementsSource,
},
{
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={[{
type: GuideSectionTypes.HTML,
code: sizesHtml,
}]}
source={[
{
type: GuideSectionTypes.HTML,
code: sizesHtml,
},
]}
>
<GuideDemo
html={sizesHtml}
/>
<GuideDemo html={sizesHtml} />
</GuideSection>
</GuidePage>
);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -19,27 +19,24 @@
import React, { Component } from 'react';
import {
KuiCollapseButton
} from '../../../../components';
import { 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) => ({
isExpanded: !state.isExpanded
this.setState(state => ({
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
id={idGen('collapsible')}
style={{ display: isExpanded ? 'block' : 'none' }}
>
<div id={idGen('collapsible')} style={{ display: isExpanded ? 'block' : 'none' }}>
Here is some collapsible content.
</div>
</div>
);
}
}

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

@ -22,13 +22,7 @@
import React from 'react';
import { renderToHtml } from '../../services';
import {
GuideDemo,
GuidePage,
GuideSection,
GuideSectionTypes,
GuideText,
} from '../../components';
import { 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={[{
type: GuideSectionTypes.JS,
code: collapseButtonSource,
}, {
type: GuideSectionTypes.HTML,
code: collapseButtonHtml,
}]}
source={[
{
type: GuideSectionTypes.JS,
code: collapseButtonSource,
},
{
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={[{
type: GuideSectionTypes.JS,
code: collapseButtonAriaSource,
}, {
type: GuideSectionTypes.HTML,
code: collapseButtonAriaHtml,
}]}
source={[
{
type: GuideSectionTypes.JS,
code: collapseButtonAriaSource,
},
{
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
the state of the collapsable content.
should be <code>true</code> or <code>false</code> depending on the state of the
collapsable content.
</dd>
<dt><code>aria-controls</code></dt>
<dd>should reference the <code>id</code> of the actual collapsable content element.</dd>
<dt><code>aria-label</code></dt>
<dt>
<code>aria-controls</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.
should reference the <code>id</code> of the actual collapsable content element.
</dd>
<dt>
<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.

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

@ -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!"

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

@ -22,13 +22,7 @@
import React from 'react';
import { renderToHtml } from '../../services';
import {
GuideDemo,
GuidePage,
GuideSection,
GuideSectionTypes,
GuideText,
} from '../../components';
import { 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={[{
type: GuideSectionTypes.JS,
code: emptyTablePromptSource,
}, {
type: GuideSectionTypes.HTML,
code: emptyTablePromptHtml,
}]}
source={[
{
type: GuideSectionTypes.JS,
code: emptyTablePromptSource,
},
{
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
to follow some next actions, such as creating an item.
Use this prompt when a table has no results. It helps create space and provides a place to
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={[{
type: GuideSectionTypes.JS,
code: tableWithEmptyPromptSource,
}, {
type: GuideSectionTypes.HTML,
code: tableWithEmptyPromptHtml,
}]}
source={[
{
type: GuideSectionTypes.JS,
code: tableWithEmptyPromptSource,
},
{
type: GuideSectionTypes.HTML,
code: tableWithEmptyPromptHtml,
},
]}
>
<GuideText>
Wrap in an EmptyTablePromptPanel when using with a controlled table.
</GuideText>
<GuideText>Wrap in an EmptyTablePromptPanel when using with a controlled table.</GuideText>
<GuideDemo>
<ControlledTableWithEmptyPrompt/>
<ControlledTableWithEmptyPrompt />
</GuideDemo>
</GuideSection>
</GuidePage>

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

@ -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>
}

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

@ -17,14 +17,8 @@
* under the License.
*/
import React, {
Component,
} from 'react';
import {
KuiCheckBox,
KuiCheckBoxLabel
} from '../../../../components';
import React, { Component } 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}

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

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

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

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

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

@ -17,12 +17,8 @@
* under the License.
*/
import React, {
Component,
} from 'react';
import {
KuiSelect,
} from '../../../../components';
import React, { Component } 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
value={this.state.value1}
onChange={event => this.handleChange(event, 'value1')}
>
<option value="apple" >Apple</option>
<option value="bread" >Bread</option>
<option value="cheese" >Cheese</option>
<KuiSelect value={this.state.value1} onChange={event => this.handleChange(event, 'value1')}>
<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')}

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

@ -17,12 +17,8 @@
* under the License.
*/
import React, {
Component,
} from 'react';
import {
KuiTextArea,
} from '../../../../components';
import React, { Component } 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}

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

@ -17,12 +17,8 @@
* under the License.
*/
import React, {
Component,
} from 'react';
import {
KuiTextArea,
} from '../../../../components';
import React, { Component } 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 (

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

@ -17,12 +17,8 @@
* under the License.
*/
import React, {
Component,
} from 'react';
import {
KuiTextInput,
} from '../../../../components';
import React, { Component } 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"

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

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

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

@ -22,12 +22,7 @@
import React from 'react';
import { renderToHtml } from '../../services';
import {
GuideDemo,
GuidePage,
GuideSection,
GuideSectionTypes,
} from '../../components';
import { 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={[{
type: GuideSectionTypes.JS,
code: fieldGroupSource,
}, {
type: GuideSectionTypes.HTML,
code: fieldGroupHtml,
}]}
source={[
{
type: GuideSectionTypes.JS,
code: fieldGroupSource,
},
{
type: GuideSectionTypes.HTML,
code: fieldGroupHtml,
},
]}
>
<GuideDemo>
<FieldGroup />

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

@ -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">
The Kibana UI Framework has been DEPRECATED.
</h1>
<h1 className="guideTitle">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>.

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

@ -42,135 +42,128 @@ export default props => (
<GuidePage title={props.route.name}>
<GuideSection
title="Icon"
source={[{
type: GuideSectionTypes.HTML,
code: iconHtml,
}]}
source={[
{
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
html={iconHtml}
/>
<GuideDemo html={iconHtml} />
</GuideSection>
<GuideSection
title="Info"
source={[{
type: GuideSectionTypes.HTML,
code: infoHtml,
}]}
source={[
{
type: GuideSectionTypes.HTML,
code: infoHtml,
},
]}
>
<GuideText>
Use this Icon to denote useful information.
</GuideText>
<GuideText>Use this Icon to denote useful information.</GuideText>
<GuideDemo
html={infoHtml}
/>
<GuideDemo html={infoHtml} />
</GuideSection>
<GuideSection
title="Basic"
source={[{
type: GuideSectionTypes.HTML,
code: basicHtml,
}]}
source={[
{
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
color.
Use this Icon when you don&rsquo;t want to communicate any particular meaning with the
icon&rsquo;s color.
</GuideText>
<GuideDemo
html={basicHtml}
/>
<GuideDemo html={basicHtml} />
</GuideSection>
<GuideSection
title="Success"
source={[{
type: GuideSectionTypes.HTML,
code: successHtml,
}]}
source={[
{
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
html={successHtml}
/>
<GuideDemo html={successHtml} />
</GuideSection>
<GuideSection
title="Warning"
source={[{
type: GuideSectionTypes.HTML,
code: warningHtml,
}]}
source={[
{
type: GuideSectionTypes.HTML,
code: warningHtml,
},
]}
>
<GuideText>
Use this Icon to denote an irregularity or potential problems.
</GuideText>
<GuideText>Use this Icon to denote an irregularity or potential problems.</GuideText>
<GuideDemo
html={warningHtml}
/>
<GuideDemo html={warningHtml} />
</GuideSection>
<GuideSection
title="Error"
source={[{
type: GuideSectionTypes.HTML,
code: errorHtml,
}]}
source={[
{
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
html={errorHtml}
/>
<GuideDemo html={errorHtml} />
</GuideSection>
<GuideSection
title="Inactive"
source={[{
type: GuideSectionTypes.HTML,
code: inactiveHtml,
}]}
source={[
{
type: GuideSectionTypes.HTML,
code: inactiveHtml,
},
]}
>
<GuideText>
Use this Icon to denote a disabled, inactive, off, offline, or asleep status.
</GuideText>
<GuideDemo
html={inactiveHtml}
/>
<GuideDemo html={inactiveHtml} />
</GuideSection>
<GuideSection
title="Spinner"
source={[{
type: GuideSectionTypes.HTML,
code: spinnerHtml,
}]}
source={[
{
type: GuideSectionTypes.HTML,
code: spinnerHtml,
},
]}
>
<GuideText>
You can use Icons to represent a loading and successfully-loaded state.
</GuideText>
<GuideText>You can use Icons to represent a loading and successfully-loaded state.</GuideText>
<GuideDemo
html={spinnerHtml}
js={spinnerJs}
/>
<GuideDemo html={spinnerHtml} js={spinnerJs} />
</GuideSection>
</GuidePage>
);

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

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

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

@ -19,12 +19,7 @@
import React from 'react';
import {
GuideDemo,
GuidePage,
GuideSection,
GuideSectionTypes,
} from '../../components';
import { 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={[{
type: GuideSectionTypes.HTML,
code: linkHtml,
}]}
source={[
{
type: GuideSectionTypes.HTML,
code: linkHtml,
},
]}
>
<GuideDemo
html={linkHtml}
/>
<GuideDemo html={linkHtml} />
</GuideSection>
</GuidePage>
);

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

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

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

@ -19,11 +19,7 @@
import React from 'react';
import {
KuiLocalNav,
KuiLocalNavRow,
KuiLocalNavRowSection,
} from '../../../../components';
import { 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">
Header for a section of content
</div>
<div className="kuiLocalDropdownHeader__label">Header for a section of content</div>
</div>
{/* Input */}
<input
className="kuiLocalDropdownInput"
type="text"
placeholder="Input something here"
/>
<input 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
className="kuiLocalDropdownHeader__action"
href=""
>
<a className="kuiLocalDropdownHeader__action" href="">
Action A
</a>
<a
className="kuiLocalDropdownHeader__action"
href=""
>
<a className="kuiLocalDropdownHeader__action" href="">
Action B
</a>
</div>

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

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

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

@ -22,13 +22,7 @@ import React from 'react';
import { renderToHtml } from '../../services';
import {
GuideDemo,
GuidePage,
GuideSection,
GuideSectionTypes,
GuideText,
} from '../../components';
import { 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>
You can replace the Title with Breadcrumbs.
</GuideText>
<GuideText>You can replace the Title with Breadcrumbs.</GuideText>
<GuideDemo>
<LocalNavWithBreadcrumbs />
@ -123,14 +116,11 @@ export default props => (
},
]}
>
<GuideText>
You can add a Search component for filtering results.
</GuideText>
<GuideText>You can add a Search component for filtering results.</GuideText>
<GuideDemo>
<LocalNavWithSearch />
</GuideDemo>
</GuideSection>
<GuideSection
@ -190,9 +180,7 @@ export default props => (
},
]}
>
<GuideText>
Selecting a Menu Item will commonly result in an open Dropdown.
</GuideText>
<GuideText>Selecting a Menu Item will commonly result in an open Dropdown.</GuideText>
<GuideDemo>
<LocalNavWithDropdown />
@ -212,9 +200,7 @@ export default props => (
},
]}
>
<GuideText>
You can split the Dropdown into side-by-side Panels.
</GuideText>
<GuideText>You can split the Dropdown into side-by-side Panels.</GuideText>
<GuideDemo>
<LocalNavWithDropdownPanels />
@ -234,9 +220,7 @@ export default props => (
},
]}
>
<GuideText>
You can display Tabs for navigating local content.
</GuideText>
<GuideText>You can display Tabs for navigating local content.</GuideText>
<GuideDemo>
<LocalNavWithTabs />
@ -245,15 +229,14 @@ export default props => (
<GuideSection
title="DatePicker"
source={[{
type: GuideSectionTypes.HTML,
code: datePickerHtml,
}]}
source={[
{
type: GuideSectionTypes.HTML,
code: datePickerHtml,
},
]}
>
<GuideDemo
html={datePickerHtml}
/>
<GuideDemo html={datePickerHtml} />
</GuideSection>
</GuidePage>
);

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

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

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

@ -19,11 +19,7 @@
import React from 'react';
import {
KuiLocalNav,
KuiLocalNavRow,
KuiLocalNavRowSection,
} from '../../../../components';
import { 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>

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

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

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

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

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

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

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

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

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

@ -19,17 +19,14 @@
import React from 'react';
import {
KuiButton,
KuiPagerButtonGroup
} from '../../../../components';
import { 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>
);
}

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

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

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

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

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

@ -19,13 +19,7 @@
import React from 'react';
import {
GuideDemo,
GuidePage,
GuideSection,
GuideSectionTypes,
GuideText,
} from '../../components';
import { 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={[{
type: GuideSectionTypes.HTML,
code: panelHtml,
}]}
source={[
{
type: GuideSectionTypes.HTML,
code: panelHtml,
},
]}
>
<GuideDemo
html={panelHtml}
/>
<GuideDemo html={panelHtml} />
</GuideSection>
<GuideSection
title="Panel with PanelHeaderSections"
source={[{
type: GuideSectionTypes.HTML,
code: panelWithHeaderSectionsHtml,
}]}
source={[
{
type: GuideSectionTypes.HTML,
code: panelWithHeaderSectionsHtml,
},
]}
>
<GuideText>
PanelHeaders can have sections.
</GuideText>
<GuideText>PanelHeaders can have sections.</GuideText>
<GuideDemo
html={panelWithHeaderSectionsHtml}
/>
<GuideDemo html={panelWithHeaderSectionsHtml} />
</GuideSection>
<GuideSection
title="Panel with Toolbar"
source={[{
type: GuideSectionTypes.HTML,
code: panelWithToolBarHtml,
}]}
source={[
{
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
html={panelWithToolBarHtml}
/>
<GuideDemo html={panelWithToolBarHtml} />
</GuideSection>
</GuidePage>
);

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

@ -19,12 +19,7 @@
import React from 'react';
import {
GuideDemo,
GuidePage,
GuideSection,
GuideSectionTypes,
} from '../../components';
import { 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={[{
type: GuideSectionTypes.HTML,
code: html,
}]}
source={[
{
type: GuideSectionTypes.HTML,
code: html,
},
]}
>
<GuideDemo
html={html}
/>
<GuideDemo html={html} />
</GuideSection>
<GuideSection
title="Info"
source={[{
type: GuideSectionTypes.HTML,
code: infoHtml,
}]}
source={[
{
type: GuideSectionTypes.HTML,
code: infoHtml,
},
]}
>
<GuideDemo
html={infoHtml}
/>
<GuideDemo html={infoHtml} />
</GuideSection>
<GuideSection
title="Success"
source={[{
type: GuideSectionTypes.HTML,
code: successHtml,
}]}
source={[
{
type: GuideSectionTypes.HTML,
code: successHtml,
},
]}
>
<GuideDemo
html={successHtml}
/>
<GuideDemo html={successHtml} />
</GuideSection>
<GuideSection
title="Warning"
source={[{
type: GuideSectionTypes.HTML,
code: warningHtml,
}]}
source={[
{
type: GuideSectionTypes.HTML,
code: warningHtml,
},
]}
>
<GuideDemo
html={warningHtml}
/>
<GuideDemo html={warningHtml} />
</GuideSection>
<GuideSection
title="Error"
source={[{
type: GuideSectionTypes.HTML,
code: errorHtml,
}]}
source={[
{
type: GuideSectionTypes.HTML,
code: errorHtml,
},
]}
>
<GuideDemo
html={errorHtml}
/>
<GuideDemo html={errorHtml} />
</GuideSection>
</GuidePage>
);

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

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

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

@ -19,16 +19,9 @@
import React, { Component } from 'react';
import {
KuiButton,
KuiButtonIcon,
KuiPager,
KuiListingTable,
} from '../../../../components';
import { KuiButton, KuiButtonIcon, KuiPager, KuiListingTable } from '../../../../components';
import {
RIGHT_ALIGNMENT
} from '../../../../src/services';
import { 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>,
<div className="kuiIcon kuiIcon--success fa-check"/>,
<a className="kuiLink" href="#">
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>,
<div className="kuiIcon kuiIcon--success fa-check"/>,
<a className="kuiLink" href="#">
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>,
<div className="kuiIcon kuiIcon--warning fa-bolt"/>,
<a className="kuiLink" href="#">
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>,
<div className="kuiIcon kuiIcon--error fa-warning"/>,
<a className="kuiLink" href="#">
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
key="add"
buttonType="primary"
aria-label="Add"
>
<KuiButton 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 });
};

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

@ -27,9 +27,7 @@ import {
KuiListingTableLoadingPrompt,
} from '../../../../components';
import {
RIGHT_ALIGNMENT
} from '../../../../src/services';
import { 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
key="add"
buttonType="primary"
aria-label="Add"
>
<KuiButton 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" />}
/>
/>,
];
}

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

@ -26,7 +26,7 @@ import {
KuiEmptyTablePrompt,
KuiEmptyTablePromptPanel,
KuiListingTable,
KuiTableHeaderCell
KuiTableHeaderCell,
} from '../../../../components';
function renderEmptyTablePrompt() {
@ -42,25 +42,21 @@ function renderEmptyTablePrompt() {
function renderToolBarActions() {
return [
<KuiButton
key="add"
buttonType="primary"
aria-label="Add"
>
<KuiButton 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={() => {
}}
onPreviousPage={() => {
}}
onNextPage={() => {}}
onPreviousPage={() => {}}
/>
);
}
function renderHeader() {
return [
<KuiTableHeaderCell key="title">
Title
</KuiTableHeaderCell>,
<KuiTableHeaderCell key="status">
Status
</KuiTableHeaderCell>,
<KuiTableHeaderCell key="created">
Date created
</KuiTableHeaderCell>,
<KuiTableHeaderCell
key="order"
className="kuiTableHeaderCell--alignRight"
>
<KuiTableHeaderCell key="title">Title</KuiTableHeaderCell>,
<KuiTableHeaderCell key="status">Status</KuiTableHeaderCell>,
<KuiTableHeaderCell key="created">Date created</KuiTableHeaderCell>,
<KuiTableHeaderCell key="order" className="kuiTableHeaderCell--alignRight">
Orders of magnitude
</KuiTableHeaderCell>
</KuiTableHeaderCell>,
];
}

20
packages/kbn-ui-framework/doc_site/src/views/table/listing_table_with_no_items.js
View file

@ -26,31 +26,25 @@ import {
KuiListingTableNoMatchesPrompt,
} from '../../../../components';
import {
RIGHT_ALIGNMENT
} from '../../../../src/services';
import { RIGHT_ALIGNMENT } from '../../../../src/services';
function renderToolBarActions() {
return [
<KuiButton
key="add"
buttonType="primary"
aria-label="Add"
>
<KuiButton 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" />}
/>,
];
}
@ -61,8 +55,8 @@ function renderHeader() {
'Date created',
{
content: 'Orders of magnitude',
align: RIGHT_ALIGNMENT
}
align: RIGHT_ALIGNMENT,
},
];
}

Some files were not shown because too many files have changed in this diff Show more