github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

[@kbn/ui-framework] Removes all but dist files (#85347) (#85599)

Browse source 
This package has long since been deprecated and no longer maintained.
The only reason it still exists is that not all plugins have migrated
away from using the kui classes to EUI. This removes all src and build
files as a step forward.

Signed-off-by: Tyler Smalley <tyler.smalley@elastic.co>
# Conflicts:
#	.eslintrc.js
#	packages/kbn-ui-framework/doc_site/src/components/guide_page/guide_page.js
#	yarn.lock
This commit is contained in:
Tyler Smalley 2020-12-10 11:32:31 -08:00 • committed by GitHub
parent 64dbd2e6fa
commit 81508c664e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
436 changed files with 14 additions and 20070 deletions
Download patch file Download diff file Expand all files Collapse all files

2
.eslintignore
View file

@ -41,7 +41,5 @@ snapshots.js
/packages/kbn-test/src/functional_test_runner/__tests__/fixtures/
/packages/kbn-test/src/functional_test_runner/lib/config/__tests__/fixtures/
/packages/kbn-ui-framework/dist
/packages/kbn-ui-framework/doc_site/build
/packages/kbn-ui-framework/generator-kui/*/templates/
/packages/kbn-ui-shared-deps/flot_charts
/packages/kbn-monaco/src/painless/antlr

31
.eslintrc.js
View file

@ -85,12 +85,6 @@ module.exports = {
/**
* Temporarily disable some react rules for specific plugins, remove in separate PRs
*/
{
files: ['packages/kbn-ui-framework/**/*.{js,mjs,ts,tsx}'],
rules: {
'jsx-a11y/no-onchange': 'off',
},
},
{
files: ['src/plugins/eui_utils/**/*.{js,mjs,ts,tsx}'],
rules: {
@ -417,7 +411,6 @@ module.exports = {
{
files: [
'**/public/**/*.js',
'packages/kbn-ui-framework/doc_site/src/**/*.js',
'src/fixtures/**/*.js', // TODO: this directory needs to be more obviously "public" (or go away)
],
settings: {
@ -440,11 +433,7 @@ module.exports = {
* Files that ARE NOT allowed to use devDependencies
*/
{
files: [
'packages/kbn-ui-framework/**/*.js',
'x-pack/**/*.js',
'packages/kbn-interpreter/**/*.js',
],
files: ['x-pack/**/*.js', 'packages/kbn-interpreter/**/*.js'],
rules: {
'import/no-extraneous-dependencies': [
'error',
@ -462,10 +451,6 @@ module.exports = {
*/
{
files: [
'packages/kbn-ui-framework/**/*.test.js',
'packages/kbn-ui-framework/doc_site/**/*.js',
'packages/kbn-ui-framework/generator-kui/**/*.js',
'packages/kbn-ui-framework/Gruntfile.js',
'packages/kbn-es/src/**/*.js',
'packages/kbn-interpreter/tasks/**/*.js',
'packages/kbn-interpreter/src/plugin/**/*.js',
@ -1077,20 +1062,6 @@ module.exports = {
},
},
/**
* disable jsx-a11y for kbn-ui-framework
*/
{
files: ['packages/kbn-ui-framework/**/*.js'],
rules: {
'jsx-a11y/click-events-have-key-events': 'off',
'jsx-a11y/anchor-has-content': 'off',
'jsx-a11y/tabindex-no-positive': 'off',
'jsx-a11y/label-has-associated-control': 'off',
'jsx-a11y/aria-role': 'off',
},
},
/**
* Canvas overrides
*/

2
.gitignore vendored
View file

@ -49,8 +49,6 @@ selenium
*.swp
*.swo
*.out
/packages/kbn-ui-framework/doc_site/build/*
!/packages/kbn-ui-framework/doc_site/build/index.html
package-lock.json
.yo-rc.json
.vscode

8
package.json
View file

@ -60,10 +60,6 @@
"lint:es": "node scripts/eslint",
"lint:sass": "node scripts/sasslint",
"makelogs": "node scripts/makelogs",
"uiFramework:start": "cd packages/kbn-ui-framework && yarn docSiteStart",
"uiFramework:build": "cd packages/kbn-ui-framework && yarn docSiteBuild",
"uiFramework:createComponent": "cd packages/kbn-ui-framework && yarn createComponent",
"uiFramework:documentComponent": "cd packages/kbn-ui-framework && yarn documentComponent",
"kbn:watch": "node scripts/kibana --dev --logging.json=false",
"build:types": "rm -rf ./target/types && tsc --p tsconfig.types.json",
"docs:acceptApiChanges": "node --max-old-space-size=6144 scripts/check_published_api_changes.js --accept",
@ -666,10 +662,6 @@
"graphql-codegen-typescript-server": "^0.18.2",
"grunt": "1.3.0",
"grunt-available-tasks": "^0.6.3",
"grunt-babel": "^8.0.0",
"grunt-contrib-clean": "^1.1.0",
"grunt-contrib-copy": "^1.0.0",
"grunt-contrib-watch": "^1.1.0",
"grunt-peg": "^2.0.1",
"gulp": "4.0.2",
"gulp-babel": "^8.0.0",

2
packages/kbn-test/jest-preset.js
View file

@ -85,7 +85,7 @@ module.exports = {
// An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
testPathIgnorePatterns: [
'<rootDir>/packages/kbn-ui-framework/(dist|doc_site|generator-kui)/',
'<rootDir>/packages/kbn-ui-framework/dist/',
'<rootDir>/packages/kbn-pm/dist/',
`integration_tests/`,
],

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

@ -1,244 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
/* eslint-disable import/no-extraneous-dependencies */
const sass = require('node-sass');
const postcss = require('postcss');
const postcssConfig = require('@kbn/optimizer/postcss.config.js');
const chokidar = require('chokidar');
const path = require('path');
const { debounce } = require('lodash');
const platform = require('os').platform();
const isPlatformWindows = /^win/.test(platform);
module.exports = function (grunt) {
grunt.initConfig({
clean: {
target: ['target'],
},
copy: {
makeProdBuild: {
expand: true,
src: [
'components/**/*',
'dist/**/*',
'src/**/*',
'package.json',
'!**/*.test.js',
'!**/__snapshots__/**/*',
],
dest: 'target',
},
},
babel: {
prodBuild: {
expand: true,
src: ['target/components/**/*.js', 'target/src/**/*.js'],
dest: '.',
options: {
presets: [require.resolve('@kbn/babel-preset/webpack_preset')],
},
},
},
});
const cwd = process.cwd();
grunt.file.setBase(path.resolve(__dirname, '../..'));
grunt.loadNpmTasks('grunt-babel');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.file.setBase(cwd);
grunt.registerTask('prodBuild', ['clean:target', 'copy:makeProdBuild', 'babel:prodBuild']);
grunt.registerTask('docSiteBuild', function () {
const done = this.async();
const serverCmd = {
cmd: isPlatformWindows ? '.\\node_modules\\.bin\\webpack.cmd' : './node_modules/.bin/webpack',
args: [
'-p',
'--config=doc_site/webpack.config.js',
'--devtool=null', // Prevent the source map from being generated
],
opts: { stdio: 'inherit' },
};
const uiFrameworkServerBuild = new Promise((resolve, reject) => {
grunt.util.spawn(serverCmd, (error, result, code) => {
if (error || code !== 0) {
const message = result.stderr || result.stdout;
grunt.log.error(message);
return reject();
}
grunt.log.writeln(result);
resolve();
});
});
uiFrameworkServerBuild.then(done);
});
grunt.registerTask('docSiteStart', function () {
const done = this.async();
Promise.all([uiFrameworkWatch(), uiFrameworkServerStart()]).then(done);
});
grunt.registerTask('compileCssLight', function () {
const done = this.async();
uiFrameworkCompileLight().then(done);
});
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',
args: [
'--config=doc_site/webpack.config.js',
'--hot',
'--inline',
'--content-base=doc_site/build',
'--host=0.0.0.0',
'--port=8020',
],
opts: { stdio: 'inherit' },
};
return new Promise((resolve, reject) => {
grunt.util.spawn(serverCmd, (error, result, code) => {
if (error || code !== 0) {
const message = result.stderr || result.stdout;
grunt.log.error(message);
return reject();
}
grunt.log.writeln(result);
resolve();
});
});
}
function uiFrameworkCompileLight() {
const src = 'src/kui_light.scss';
const dest = 'dist/kui_light.css';
return new Promise((resolve) => {
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();
});
}
);
});
}
function uiFrameworkCompileDark() {
const src = 'src/kui_dark.scss';
const dest = 'dist/kui_dark.css';
return new Promise((resolve) => {
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();
});
}
);
});
}
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 }
);
return new Promise(() => {
debouncedCompile();
chokidar.watch('src', { ignoreInitial: true }).on('all', (event, path) => {
grunt.log.writeln(event, path);
debouncedCompile();
});
});
}
};

20
packages/kbn-ui-framework/components/index.js
View file

@ -1,20 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
export * from '../src/components';

13
packages/kbn-ui-framework/doc_site/build/index.html
View file

@ -1,13 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF8">
<link href='https://fonts.googleapis.com/css?family=Open Sans:300,400,700|Ubuntu+Mono:400' rel='stylesheet' type='text/css'>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<script src="https://use.fontawesome.com/a9649923ac.js"></script>
</head>
<body class="guideBody">
<div id="guide" style="height: 100%"></div>
<script src="bundle.js"></script>
</body>
</html>

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

@ -1,34 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import keyMirror from 'keymirror';
export default keyMirror({
// Source code viewer actions
OPEN_CODE_VIEWER: null,
CLOSE_CODE_VIEWER: null,
// Sandbox actions
OPEN_SANDBOX: null,
CLOSE_SANDBOX: null,
// Example nav actions
REGISTER_SECTION: null,
UNREGISTER_SECTION: null,
});

30
packages/kbn-ui-framework/doc_site/src/actions/code_viewer_actions.js
View file

@ -1,30 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import ActionTypes from './action_types';
export const openCodeViewer = (source, title) => ({
type: ActionTypes.OPEN_CODE_VIEWER,
source,
title,
});
export const closeCodeViewer = () => ({
type: ActionTypes.CLOSE_CODE_VIEWER,
});

31
packages/kbn-ui-framework/doc_site/src/actions/example_nav_actions.js
View file

@ -1,31 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import ActionTypes from './action_types';
export const registerSection = (id, name) => ({
type: ActionTypes.REGISTER_SECTION,
id,
name,
});
export const unregisterSection = (id) => ({
type: ActionTypes.UNREGISTER_SECTION,
id,
});

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

@ -1,24 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
export { openCodeViewer, closeCodeViewer } from './code_viewer_actions';
export { openSandbox, closeSandbox } from './sandbox_actions';
export { registerSection, unregisterSection } from './example_nav_actions';

28
packages/kbn-ui-framework/doc_site/src/actions/sandbox_actions.js
View file

@ -1,28 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import ActionTypes from './action_types';
export const openSandbox = () => ({
type: ActionTypes.OPEN_SANDBOX,
});
export const closeSandbox = () => ({
type: ActionTypes.CLOSE_SANDBOX,
});

108
packages/kbn-ui-framework/doc_site/src/components/guide/_guide.scss
View file

@ -1,108 +0,0 @@
html {
height: 100%;
}
.guideBody {
height: 100%;
background-color: $euiColorFullShade;
margin: 0;
min-width: $guideMinWidth;
}
/**
* 1. Expand container to fit the page if the content is shorter than the page, or expand with the
* content if it's taller than the page.
*/
.guide {
display: flex;
min-height: 100%; /* 1 */
}
.guideContent {
display: flex;
flex-direction: column;
flex: 1 1 auto;
padding-top: $guideNavHeight;
background-color: $guideBaseBackgroundColor;
transition:
padding-top $guideChromeTransition,
padding-right $guideCodeViewerTransition,
opacity $guideCodeViewerTransition;
&.is-code-viewer-open {
padding-right: $guideCodeViewerWidth;
@include whenNarrowerThan($guideNormalBreakpoint) {
padding-right: $guideCodeViewerSmallWidth;
}
}
.is-guide-nav-open + & {
opacity: 0.7;
}
&.is-chrome-hidden {
padding-top: 0;
}
}
@media only screen and (max-width: 1300px) {
.guideHomePage {
justify-content: flex-start !important;
.guideContentPage__content {
margin-left: 250px;
}
}
}
.guideContentPage {
position: relative;
display: flex;
justify-content: center;
flex: 1 0 auto;
background-color: $euiColorEmptyShade;
}
.guideContentPage__hint {
position: absolute;
top: 0;
left: 0;
width: 100%;
max-width: 260px;
max-height: 500px;
padding: 30px;
margin: 20px;
border-radius: 4px;
background-color: $euiColorLightestShade;
line-height: $guideLineHeight;
}
.guideContentPage__content {
width: 100%;
max-width: 800px;
padding: 30px 60px;
}
.guideHintArrow {
position: absolute;
top: -15px;
left: 12px;
background-image: url("images/hint-arrow.svg");
width: 26px;
height: 40px;
background-repeat: no-repeat;
background-size: contain;
}
.guideWarning {
border-left: 5px solid $euiColorAccent;
margin-top: 19px;
padding: 0 14px;
line-height: 21px;
color: $euiColorAccent;
}
.guideBreak {
border: none;
}

6
packages/kbn-ui-framework/doc_site/src/components/guide_code/_guide_code.scss
View file

@ -1,6 +0,0 @@
.guideCode {
padding: 2px 4px;
font-family: 'Ubuntu Mono', monospace;
background-color: $euiColorLightestShade;
color: $euiColorDarkShade;
}

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

@ -1,22 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
export const GuideCode = (props) => <code className="guideCode">{props.children}</code>;

113
packages/kbn-ui-framework/doc_site/src/components/guide_code_viewer/_guide_code_viewer.scss
View file

@ -1,113 +0,0 @@
.guideCodeViewer {
position: fixed;
top: $guideNavHeight;
right: 0;
bottom: 0;
width: $guideCodeViewerWidth;
padding: 6px 0 40px;
background-color: $euiColorEmptyShade;
transform: translateX($guideCodeViewerWidth);
transition: transform $guideCodeViewerTransition;
overflow: auto;
border-left: $euiBorderThin;
@include scrollbar;
@include whenNarrowerThan($guideNormalBreakpoint) {
width: $guideCodeViewerSmallWidth;
}
&.is-code-viewer-open {
transform: translateX(0);
}
}
.guideCodeViewer__header {
padding: 0 20px 6px;
line-height: $guideLineHeight;
border-bottom: $euiBorderThin;
font-size: 14px;
font-weight: 700;
margin-bottom: 10px;
}
.guideCodeViewer__closeButton {
position: absolute;
top: 0;
right: 10px;
cursor: pointer;
padding: 10px;
border-radius: 3px;
color: $guideTextColor;
&:hover {
color: $guideLinkHoverColor;
}
}
.guideCodeViewer__title {
padding: 0 20px 6px;
border-bottom: $euiBorderThin;
line-height: $guideLineHeight;
font-size: 14px;
}
.guideCodeViewer__content {
margin: 0 0 16px;
}
// HLJS
.hljs {
display: block;
padding: 15px 20px;
color: $euiColorDarkShade;
font-size: 14px;
line-height: 1.3;
font-family: 'Ubuntu Mono', monospace;
}
.hljs-keyword {
color: #b58900;
}
.hljs-function {
.hljs-keyword {
color: #268bd2;
}
.hljs-title {
color: #7441c6;
}
}
.hljs-built_in {
color: #268bd2;
}
.hljs-string {
color: #36958e;
}
.hljs-comment {
color: #9d9d9d;
}
.hljs-number,
.hljs-literal {
color: #d84a7e;
}
.hljs-tag {
.hljs-name {
color: #63a35c;
}
.hljs-attr {
color: #795da3;
}
.hljs-string {
color: #df5000;
}
}

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

@ -1,89 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import classNames from 'classnames';
import hljs from 'highlight.js';
export class GuideCodeViewer extends Component {
constructor(props) {
super(props);
}
componentDidUpdate() {
if (this.refs.html) {
hljs.highlightBlock(this.refs.html);
}
if (this.refs.javascript) {
hljs.highlightBlock(this.refs.javascript);
}
}
renderSection(type, code) {
const typeToCodeClassMap = {
JavaScript: 'javascript',
HTML: 'html',
};
const codeClass = typeToCodeClassMap[type];
if (code) {
return (
<div className="guideCodeViewer__section" key={type}>
<div className="guideCodeViewer__title">{type}</div>
<pre className="guideCodeViewer__content">
<code ref={codeClass} className={codeClass}>
{code}
</code>
</pre>
</div>
);
}
}
render() {
const classes = classNames('guideCodeViewer', {
'is-code-viewer-open': this.props.isOpen,
});
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__closeButton fa fa-times" onClick={this.props.onClose} />
{codeSections}
</div>
);
}
}
GuideCodeViewer.propTypes = {
isOpen: PropTypes.bool,
onClose: PropTypes.func,
title: PropTypes.string,
source: PropTypes.array,
};

62
packages/kbn-ui-framework/doc_site/src/components/guide_components.scss
View file

@ -1,62 +0,0 @@
$guideVerticalRhythm: $euiSize;
$guideLineHeight: $euiSizeL;
$guideNavHeight: 60px;
$guideSideNavWidth: 400px;
$guideSideNavSmallWidth: 220px;
$guideCodeViewerWidth: 660px;
$guideCodeViewerSmallWidth: 520px;
$guideCodeViewerTransition: 0.2s ease;
$guideChromeTransition: 0.3s ease;
// Colors
$guideBaseBackgroundColor: $euiColorLightestShade;
$guidePanelBackgroundColor: $euiColorEmptyShade;
$guideTextColor: $euiColorDarkestShade;
$guideLinkColor: $euiColorPrimary;
$guideLinkHoverColor: darken($euiColorPrimary, 10%);
// Breakpoints
$guideMinWidth: 840px;
$guideNormalBreakpoint: 1900px;
@mixin whenNarrowerThan($browserWidth) {
@media only screen and (max-width: #{$browserWidth}) {
@content;
}
}
@mixin whenWiderThan($browserWidth) {
@media only screen and (min-width: #{$browserWidth}) {
@content;
}
}
@mixin scrollbar($color: $euiBorderColor) {
&::-webkit-scrollbar {
width: 16px;
height: 16px;
}
&::-webkit-scrollbar-thumb {
background-color: $color;
border: 6px solid transparent;
background-clip: content-box;
}
&::-webkit-scrollbar-track {
background-color: transparent;
}
}
@import "guide/guide";
@import "guide_code/guide_code";
@import "guide_code_viewer/guide_code_viewer";
@import "guide_demo/guide_demo";
@import "guide_link/guide_link";
@import "guide_nav/guide_nav";
@import "guide_page/guide_page";
@import "guide_page_side_nav/guide_page_side_nav";
@import "guide_sandbox/guide_sandbox";
@import "guide_section/guide_section";
@import "guide_text/guide_text";

23
packages/kbn-ui-framework/doc_site/src/components/guide_demo/_guide_demo.scss
View file

@ -1,23 +0,0 @@
.guideDemo {
margin-top: $guideVerticalRhythm;
}
.guideDemo--fullScreen {
width: 100%;
height: 100%;
margin-top: 0;
}
.guideDemo__highlightGrid {
.kuiFlexItem {
background: transparentize($euiColorPrimary, .9);
padding: 16px;
}
}
.guideDemo__highlightGridWrap {
.kuiFlexItem div {
background: transparentize($euiColorPrimary, .9);
padding: 16px;
}
}

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

@ -1,91 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import classNames from 'classnames';
export class GuideDemo extends Component {
componentDidMount() {
this.update();
}
componentDidUpdate() {
this.update();
}
update() {
// We'll just render the children if we have them.
if (this.props.children) {
return;
}
// Inject HTML.
this.content.innerHTML = this.props.html; // eslint-disable-line no-unsanitized/property
// Inject JS.
const js = document.createElement('script');
js.type = 'text/javascript';
js.innerHTML = this.props.js; // eslint-disable-line no-unsanitized/property
this.content.appendChild(js);
// Inject CSS.
const css = document.createElement('style');
css.innerHTML = this.props.css; // eslint-disable-line no-unsanitized/property
this.content.appendChild(css);
}
render() {
const {
isFullScreen,
children,
className,
js, // eslint-disable-line no-unused-vars
html, // eslint-disable-line no-unused-vars
css, // eslint-disable-line no-unused-vars
...rest
} = this.props;
const classes = classNames('guideDemo', className, {
'guideDemo--fullScreen': isFullScreen,
});
return (
<div className={classes} ref={(c) => (this.content = c)} {...rest}>
{children}
</div>
);
}
}
GuideDemo.propTypes = {
children: PropTypes.node,
js: PropTypes.string.isRequired,
html: PropTypes.string.isRequired,
css: PropTypes.string.isRequired,
isFullScreen: PropTypes.bool.isRequired,
};
GuideDemo.defaultProps = {
js: '',
html: '',
css: '',
isFullScreen: false,
};

9
packages/kbn-ui-framework/doc_site/src/components/guide_link/_guide_link.scss
View file

@ -1,9 +0,0 @@
.guideLink {
color: $guideLinkColor;
text-decoration: none;
&:hover {
color: $guideLinkHoverColor;
text-decoration: underline;
}
}

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

@ -1,26 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
export const GuideLink = (props) => (
<a href={props.href} target={props.target} className="guideLink">
{props.children}
</a>
);

204
packages/kbn-ui-framework/doc_site/src/components/guide_nav/_guide_nav.scss
View file

@ -1,204 +0,0 @@
.guideNav {
display: flex;
flex-direction: column;
position: fixed;
z-index: 10000;
top: 0;
left: 0;
right: 0;
min-width: $guideMinWidth;
height: $guideNavHeight;
border-bottom: $euiBorderThin;
color: $guideTextColor;
background-color: $guidePanelBackgroundColor;
transition:
top $guideChromeTransition,
height 0.3s ease,
box-shadow 0.3s linear;
overflow: hidden;
@include euiBottomShadowMedium;
&.is-guide-nav-open {
height: 100%;
@include euiBottomShadow;
}
&.is-chrome-hidden {
top: -$guideNavHeight;
}
}
.guideNav__showButton {
position: fixed;
z-index: 9999;
top: 5px;
right: 5px;
font-size: 10px;
opacity: 0;
transition: opacity $guideChromeTransition;
.is-chrome-hidden & {
opacity: 1;
}
}
.guideNav__header {
position: relative;
flex: 0 0 auto;
display: flex;
align-items: center;
height: 60px;
padding: 0 20px;
}
.guideNav__menu {
cursor: pointer;
margin-right: 10px;
padding: 10px;
border-radius: 3px;
&.is-menu-button-pinned,
&:hover {
background-color: rgba(black, 0.05);
}
&:active {
background-color: rgba(black, 0.2);
box-shadow: inset 0 2px 8px rgba(black, 0.1);
}
}
.guideNav__title {
color: $guideTextColor;
text-decoration: none;
font-size: 18px;
}
.guideNav__version {
margin-left: 10px;
font-weight: 300;
font-size: 14px;
}
.guideNav__elasticLogo {
position: absolute;
background-image: url("images/elastic-logo.svg");
width: 106px;
height: 36px;
background-repeat: no-repeat;
background-size: contain;
left: 50%;
transform: translateX(-50%);
}
.guideNavSearch {
margin: 0 20px;
width: 100%;
max-width: 400px;
font-size: 16px;
padding: 8px;
border: 1px solid rgba($guideTextColor, 0.2);
&:focus {
border-color: $guideLinkHoverColor;
outline: none;
}
}
/**
* 1. Height of the searchbox.
*/
.guideNavItemsContainer {
@include scrollbar;
display: flex;
overflow: auto;
min-height: calc(100vh - #{$guideNavHeight + 40px}); /* 1 */
}
.guideNavItems {
display: flex;
flex-direction: column;
align-items: flex-start;
flex-wrap: wrap;
align-content: flex-start;
}
.guideNavSectionTitle {
min-width: 200px;
padding: 8px 20px;
margin-left: 5px;
font-size: 14px;
line-height: 20px;
font-weight: 700;
}
.guideNavItem,
.guideNavNoItems {
min-width: 200px;
font-size: 20px;
line-height: 20px;
padding: 8px 20px;
margin-left: 5px;
}
.guideNavItem {
display: flex;
align-items: center;
}
.guideNavItem__link {
color: $guideTextColor;
text-decoration: none;
&:hover {
color: $guideLinkHoverColor;
}
}
.guideNavItem__reactLogo {
margin-left: 10px;
background-image: url("images/react-logo.svg");
width: 24px;
height: 22px;
background-repeat: no-repeat;
background-size: contain;
}
.guideNavNoItems {
color: rgba($guideTextColor, 0.5);
margin-top: 0;
margin-bottom: 0;
}
.guideNavPaginationButtons {
position: absolute;
top: 20px;
right: 10px;
}
.guideNavPaginationButton {
appearance: none;
border: none;
line-height: 10px;
padding: 4px 20px;
color: $guideLinkHoverColor;
background-color: $euiColorEmptyShade;
border: 1px solid $guideLinkHoverColor;
border-radius: 3px;
cursor: pointer;
&:hover,
&:active {
background-color: $euiColorLightestShade;
}
&.guideNavPaginationButton-isDisabled {
pointer-events: none;
color: rgba($guideTextColor, 0.25);
border-color: rgba($guideTextColor, 0.25);
}
& + & {
margin-left: 10px;
}
}

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

@ -1,212 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { Link } from 'react-router'; // eslint-disable-line
import classNames from 'classnames';
export class GuideNav extends Component {
constructor(props) {
super(props);
const currentRoute = props.routes[1];
const nextRoute = this.props.getNextRoute(currentRoute.name);
const previousRoute = this.props.getPreviousRoute(currentRoute.name);
this.state = {
search: '',
nextRoute,
previousRoute,
};
this.onSearchChange = this.onSearchChange.bind(this);
}
onSearchChange(event) {
this.setState({
search: event.target.value,
});
}
UNSAFE_componentWillReceiveProps(nextProps) {
const currentRoute = nextProps.routes[1];
const nextRoute = this.props.getNextRoute(currentRoute.name);
const previousRoute = this.props.getPreviousRoute(currentRoute.name);
this.setState({
nextRoute,
previousRoute,
});
}
renderNoItems(name) {
return <p className="guideNavNoItems">{`No ${name} match your search`}</p>;
}
renderPagination() {
const previousClasses = classNames('guideNavPaginationButton', {
'guideNavPaginationButton-isDisabled': !this.state.previousRoute,
});
const previousButton = (
<Link
className={previousClasses}
to={this.state.previousRoute ? this.state.previousRoute.path : ''}
>
<span className="fa fa-angle-left" />
</Link>
);
const nextClasses = classNames('guideNavPaginationButton', {
'guideNavPaginationButton-isDisabled': !this.state.nextRoute,
});
const nextButton = (
<Link className={nextClasses} to={this.state.nextRoute ? this.state.nextRoute.path : ''}>
<span className="fa fa-angle-right" />
</Link>
);
let hideChromeButton;
if (this.props.isSandbox) {
hideChromeButton = (
<button
className="guideLink"
style={{ marginRight: '10px' }}
onClick={this.props.onHideChrome}
>
Hide chrome
</button>
);
}
return (
<div className="guideNavPaginationButtons">
{hideChromeButton}
{previousButton}
{nextButton}
</div>
);
}
render() {
const classes = classNames('guideNav', {
'is-guide-nav-open': this.props.isNavOpen,
'is-chrome-hidden': !this.props.isChromeVisible,
});
const buttonClasses = classNames('guideNav__menu fa fa-bars', {
'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;
return (
<div key={`componentNavItem-${index}`} className="guideNavItem">
<Link className="guideNavItem__link" to={item.path} onClick={this.props.onClickNavItem}>
{item.name}
</Link>
{icon}
</div>
);
});
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}>
{item.name}
</Link>
{icon}
</div>
);
});
return (
<div className={classes}>
<div className="guideNav__header">
<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"
/>
{this.renderPagination()}
</div>
<div>
<input
type="text"
placeholder="Search components and sandboxes"
className="guideNavSearch"
value={this.state.search}
onChange={this.onSearchChange}
/>
</div>
<div className="guideNavItemsContainer">
<div className="guideNavItems">
<div className="guideNavSectionTitle">Components</div>
{componentNavItems.length ? componentNavItems : this.renderNoItems('components')}
<div className="guideNavSectionTitle">Sandboxes</div>
{sandboxNavItems.length ? sandboxNavItems : this.renderNoItems('sandboxes')}
</div>
</div>
<button className="guideLink guideNav__showButton" onClick={this.props.onShowChrome}>
Show chrome
</button>
</div>
);
}
}
GuideNav.propTypes = {
isChromeVisible: PropTypes.bool,
isNavOpen: PropTypes.bool,
isSandbox: PropTypes.bool,
onToggleNav: PropTypes.func,
onHideChrome: PropTypes.func,
onShowChrome: PropTypes.func,
onClickNavItem: PropTypes.func,
version: PropTypes.string,
routes: PropTypes.array,
getNextRoute: PropTypes.func,
getPreviousRoute: PropTypes.func,
components: PropTypes.array,
sandboxes: PropTypes.array,
};

42
packages/kbn-ui-framework/doc_site/src/components/guide_page/_guide_page.scss
View file

@ -1,42 +0,0 @@
.guidePage {
display: flex;
flex: 1 0 auto;
padding-bottom: 20px;
}
.guidePageBody {
$topMargin: 40px;
$leftMargin: 120px + $guideSideNavWidth;
$rightMargin: 80px;
$scrollBarWidth: 20px;
background-color: $guidePanelBackgroundColor;
border: $euiBorderThin;
border-radius: 4px;
flex: 1 1 auto;
padding: 40px 60px;
margin: $topMargin $rightMargin 0 $leftMargin;
width: calc(100vw - #{$leftMargin + $rightMargin + $scrollBarWidth});
.is-code-viewer-open & {
width: calc(100vw - #{$leftMargin + $rightMargin + $scrollBarWidth + $guideCodeViewerWidth});
}
@include whenNarrowerThan($guideNormalBreakpoint) {
$leftMargin: 20px + $guideSideNavSmallWidth;
$rightMargin: 20px;
margin: $topMargin $rightMargin 0 $leftMargin;
width: calc(100vw - #{$leftMargin + $rightMargin + $scrollBarWidth});
.is-code-viewer-open & {
width: calc(100vw - #{$leftMargin + $rightMargin + $scrollBarWidth + $guideCodeViewerSmallWidth});
}
}
}
.guidePageKillScreen {
background-color: tintOrShade($euiColorDanger, 90%, 70%);
padding: $euiSizeL;
margin-bottom: $euiSizeL;
}

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

@ -1,80 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { GuidePageSideNav, GuidePageSideNavItem } from '../';
export class GuidePage extends Component {
constructor(props) {
super(props);
this.onClickLink = this.onClickLink.bind(this);
}
onClickLink(id) {
// Scroll to element.
// eslint-disable-next-line no-undef
$('html, body').animate(
{
// eslint-disable-next-line no-undef
scrollTop: $(`#${id}`).offset().top - 100,
},
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}>
{section.name}
</GuidePageSideNavItem>
);
});
}
render() {
return (
<div className="guidePage">
<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>
<h2 className="guideTitle">
Please use the <a href="https://github.com/elastic/eui">EUI Framework instead</a>.
</h2>
</div>
{this.props.children}
</div>
</div>
);
}
}
GuidePage.propTypes = {
children: PropTypes.any,
title: PropTypes.string,
sections: PropTypes.array,
};

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

@ -1,28 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import { connect } from 'react-redux';
import { getSections } from '../../store';
import { GuidePage } from './guide_page';
const mapStateToProps = (state) => ({
sections: getSections(state),
});
export const GuidePageContainer = connect(mapStateToProps)(GuidePage);

44
packages/kbn-ui-framework/doc_site/src/components/guide_page_side_nav/_guide_page_side_nav.scss
View file

@ -1,44 +0,0 @@
.guidePageSideNav {
position: fixed;
top: 70px;
left: 10px;
bottom: 10px;
width: $guideSideNavWidth;
overflow: auto;
z-index: 100;
padding: 12px 20px;
@include scrollbar;
@include whenNarrowerThan($guideNormalBreakpoint) {
width: $guideSideNavSmallWidth;
}
}
.guidePageSideNav__title {
padding-bottom: 10px;
margin-bottom: 7px;
font-size: 22px;
line-height: $guideLineHeight;
opacity: 0.8;
}
.guidePageSideNavMenu {
line-height: $guideLineHeight;
}
.guidePageSideNavMenu__item {
& + & {
margin-top: 6px;
}
}
.guidePageSideNavMenu__itemLink {
cursor: pointer;
color: $guideTextColor;
text-decoration: none;
&:hover {
color: $guideLinkHoverColor;
}
}

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

@ -1,36 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import PropTypes from 'prop-types';
import React from 'react';
export const GuidePageSideNav = (props) => {
return (
<div className="guidePageSideNav">
<div className="guidePageSideNav__title">{props.title}</div>
<div className="guidePageSideNavMenu">{props.children}</div>
</div>
);
};
GuidePageSideNav.propTypes = {
title: PropTypes.string,
children: PropTypes.any,
};

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

@ -1,49 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import PropTypes from 'prop-types';
import React, { Component } from 'react';
export class GuidePageSideNavItem extends Component {
constructor(props) {
super(props);
this.onClick = this.onClick.bind(this);
}
onClick() {
this.props.onClick(this.props.id);
}
render() {
return (
<div className="guidePageSideNavMenu__item">
<div className="guidePageSideNavMenu__itemLink" onClick={this.onClick}>
{this.props.children}
</div>
</div>
);
}
}
GuidePageSideNavItem.propTypes = {
id: PropTypes.string,
children: PropTypes.any,
onClick: PropTypes.func,
};

10
packages/kbn-ui-framework/doc_site/src/components/guide_sandbox/_guide_sandbox.scss
View file

@ -1,10 +0,0 @@
.guideSandbox {
width: 100%;
height: 100%;
}
.guideSandboxCodeToggle {
position: fixed;
top: 70px;
right: 10px;
}

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

@ -1,63 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { getIsSandbox } from '../../store';
import { openSandbox, closeSandbox } from '../../actions';
function mapStateToProps(state) {
return {
isSandbox: getIsSandbox(state),
};
}
function mapDispatchToProps(dispatch) {
const actions = {
openSandbox,
closeSandbox,
};
return bindActionCreators(actions, dispatch);
}
class GuideSandboxComponent extends Component {
UNSAFE_componentWillMount() {
this.props.openSandbox();
}
componentWillUnmount() {
this.props.closeSandbox();
}
render() {
return <div className="guideSandbox">{this.props.children}</div>;
}
}
GuideSandboxComponent.propTypes = {
openSandbox: PropTypes.func,
closeSandbox: PropTypes.func,
};
export const GuideSandbox = connect(mapStateToProps, mapDispatchToProps)(GuideSandboxComponent);

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

@ -1,49 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import PropTypes from 'prop-types';
import React, { Component } from 'react';
export class GuideSandboxCodeToggle extends Component {
constructor(props) {
super(props);
this.onClickSource = this.onClickSource.bind(this);
}
onClickSource() {
this.props.openCodeViewer(this.props.source, this.props.title);
}
render() {
return (
<button
className="guideSandboxCodeToggle guideSection__sourceButton"
onClick={this.onClickSource}
>
<span className="fa fa-code" />
</button>
);
}
}
GuideSandboxCodeToggle.propTypes = {
source: PropTypes.array,
title: PropTypes.string,
openCodeViewer: PropTypes.func,
};

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

@ -1,27 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import { connect } from 'react-redux';
import { GuideSandboxCodeToggle } from './guide_sandbox_code_toggle';
import { openCodeViewer } from '../../actions';
export const GuideSandboxCodeToggleContainer = connect(null, {
openCodeViewer,
})(GuideSandboxCodeToggle);

39
packages/kbn-ui-framework/doc_site/src/components/guide_section/_guide_section.scss
View file

@ -1,39 +0,0 @@
.guideSection {
margin-bottom: 40px;
}
.guideSection__header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 2px;
line-height: $guideLineHeight;
}
.guideSection__title {
font-size: 18px;
font-weight: 700;
}
.guideSection__sourceButton {
appearance: none;
border: none;
line-height: 10px;
padding: 4px 10px;
color: $guideLinkHoverColor;
background-color: $euiColorEmptyShade;
border: 1px solid $guideLinkHoverColor;
border-radius: 3px;
cursor: pointer;
transform: translateX(0);
transition: transform $guideChromeTransition;
&:hover,
&:active {
background-color: $euiColorLightestShade;
}
.is-chrome-hidden & {
transform: translateX(60px);
}
}

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

@ -1,70 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import Slugify from '../../services/string/slugify';
export class GuideSection extends Component {
constructor(props) {
super(props);
this.onClickSource = this.onClickSource.bind(this);
}
getId() {
return Slugify.one(this.props.title);
}
onClickSource() {
this.props.openCodeViewer(this.props.source, this.props.title);
}
UNSAFE_componentWillMount() {
this.props.registerSection(this.getId(), this.props.title);
}
componentWillUnmount() {
this.props.unregisterSection(this.getId());
}
render() {
return (
<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}>
<span className="fa fa-code" />
</button>
</div>
{this.props.children}
</div>
);
}
}
GuideSection.propTypes = {
title: PropTypes.string,
source: PropTypes.array,
children: PropTypes.any,
openCodeViewer: PropTypes.func,
registerSection: PropTypes.func,
unregisterSection: PropTypes.func,
};

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

@ -1,29 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import { connect } from 'react-redux';
import { GuideSection } from './guide_section';
import { openCodeViewer, registerSection, unregisterSection } from '../../actions';
export const GuideSectionContainer = connect(null, {
openCodeViewer,
registerSection,
unregisterSection,
})(GuideSection);

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

@ -1,23 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
export const GuideSectionTypes = {
JS: 'JavaScript',
HTML: 'HTML',
};

16
packages/kbn-ui-framework/doc_site/src/components/guide_text/_guide_text.scss
View file

@ -1,16 +0,0 @@
.guideTitle {
font-weight: 700;
font-size: 22px;
line-height: 1.5;
margin: 0;
}
.guideText {
font-size: 14px;
line-height: 1.5;
margin: $guideVerticalRhythm 0 0;
}
.guideText--noMargin {
margin-top: 0;
}

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

@ -1,22 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
export const GuideText = (props) => <div className="guideText">{props.children}</div>;

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

@ -1,32 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
export { GuideCode } from './guide_code/guide_code';
export { GuideCodeViewer } from './guide_code_viewer/guide_code_viewer';
export { GuideDemo } from './guide_demo/guide_demo';
export { GuideLink } from './guide_link/guide_link';
export { GuideNav } from './guide_nav/guide_nav';
export { GuidePageContainer as GuidePage } from './guide_page/guide_page_container';
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 { GuideSectionContainer as GuideSection } from './guide_section/guide_section_container';
export { GuideSectionTypes } from './guide_section/guide_section_types';
export { GuideText } from './guide_text/guide_text';

3
packages/kbn-ui-framework/doc_site/src/images/elastic-logo.svg
View file

@ -1,3 +0,0 @@
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="-155 383.3 687.5 235.7" xml:space="preserve" enable-background="new -155 383.3 687.5 235.7">
<path fill="#FFFFFF" d="M81.6 506.8c0-19.8-12.3-37.2-30.8-43.9 0.8-4.2 1.2-8.4 1.2-12.7 0-36.9-30-66.9-66.8-66.9 -21.6 0-41.6 10.3-54.2 27.7 -6.2-4.8-13.8-7.4-21.7-7.4 -19.6 0-35.5 15.9-35.5 35.5 0 4.3 0.8 8.5 2.2 12.4 -18.4 6.6-31 24.3-31 44 0 19.9 12.4 37.3 30.9 44 -0.8 4.1-1.2 8.4-1.2 12.7 0 36.8 29.9 66.7 66.7 66.7 21.6 0 41.6-10.4 54.1-27.8 6.2 4.9 13.8 7.6 21.7 7.6 19.6 0 35.5-15.9 35.5-35.5 0-4.3-0.8-8.5-2.2-12.4C68.9 544.2 81.6 526.5 81.6 506.8"/><path fill="#FED10A" d="M-62 484.8l51.8 23.6L42 462.6c0.8-3.8 1.1-7.5 1.1-11.5 0-32.2-26.2-58.4-58.4-58.4 -19.3 0-37.2 9.5-48.1 25.4l-8.7 45.1L-62 484.8z"/><path fill="#24BBB1" d="M-115.6 539.6c-0.8 3.8-1.1 7.7-1.1 11.7 0 32.3 26.3 58.5 58.6 58.5 19.4 0 37.5-9.6 48.4-25.6l8.6-44.9 -11.5-22 -52-23.7L-115.6 539.6z"/><path fill="#EF5098" d="M-115.9 450l35.5 8.4 7.8-40.3c-4.8-3.7-10.8-5.7-17-5.7 -15.4 0-28 12.5-28 28C-117.6 443.7-117 447-115.9 450"/><path fill="#17A8E0" d="M-119 458.5c-15.8 5.2-26.9 20.4-26.9 37.1 0 16.3 10.1 30.8 25.2 36.6l49.8-45 -9.1-19.5L-119 458.5z"/><path fill="#93C83E" d="M-0.7 584.2c4.9 3.7 10.8 5.8 16.9 5.8 15.4 0 28-12.5 28-28 0-3.4-0.6-6.7-1.7-9.7L7.1 544 -0.7 584.2z"/><path fill="#0779A1" d="M6.5 534.7l39 9.1c15.9-5.2 26.9-20.4 26.9-37.2 0-16.2-10.1-30.8-25.2-36.5l-51 44.7L6.5 534.7z"/><path d="M175.8 548.8l4.7-0.5 0.3 9.6c-12.4 1.7-23 2.6-31.8 2.6 -11.7 0-20-3.4-24.9-10.2s-7.3-17.4-7.3-31.7c0-28.6 11.4-42.9 34.1-42.9 11 0 19.2 3.1 24.6 9.2s8.1 15.8 8.1 28.9l-0.7 9.3h-53.8c0 9 1.6 15.7 4.9 20 3.3 4.3 8.9 6.5 17 6.5C159.2 549.8 167.4 549.5 175.8 548.8zM171.4 513.5c0-10-1.6-17.1-4.8-21.2 -3.2-4.1-8.4-6.2-15.6-6.2s-12.7 2.2-16.3 6.5c-3.6 4.3-5.5 11.3-5.6 20.9H171.4z"/><path d="M200.6 559V442h12.2v117H200.6z"/><path d="M289.9 502.1v40.1c0 4.1 10.1 4.9 10.1 4.9l-0.6 10.8c-8.6 0-15.7 0.7-20-3.4 -9.8 4.3-19.5 6.1-29.3 6.1 -7.5 0-13.2-2.1-17.1-6.4 -3.9-4.2-5.9-10.3-5.9-18.3 0-7.9 2-13.8 6-17.5 4-3.7 10.3-6.1 18.9-6.9l25.6-2.4v-7c0-5.5-1.2-9.5-3.6-11.9 -2.4-2.4-5.7-3.6-9.8-3.6h-32.1v-10.8h31.3c9.2 0 15.9 2.1 20.1 6.4C287.8 486.4 289.9 493.1 289.9 502.1zM239.7 535.3c0 10 4.1 15 12.4 15 7.4 0 14.7-1.2 21.8-3.7l3.7-1.3v-26.9l-24.1 2.3c-4.9 0.4-8.4 1.8-10.6 4.2C240.7 527.3 239.7 530.8 239.7 535.3z"/><path d="M337.6 486.7c-11.8 0-17.8 4.1-17.8 12.4 0 3.8 1.4 6.5 4.1 8.1s8.9 3.2 18.6 4.9c9.7 1.7 16.5 4 20.5 7.1 4 3 6 8.7 6 17.1 0 8.4-2.7 14.5-8.1 18.4 -5.4 3.9-13.2 5.9-23.6 5.9 -6.7 0-29.2-2.5-29.2-2.5l0.7-10.6c12.9 1.2 22.3 2.2 28.6 2.2 6.3 0 11.1-1 14.4-3s5-5.4 5-10.1 -1.4-7.9-4.2-9.6c-2.8-1.7-9-3.3-18.6-4.8s-16.4-3.7-20.4-6.7c-4-2.9-6-8.4-6-16.3 0-7.9 2.8-13.8 8.4-17.6 5.6-3.8 12.6-5.7 20.9-5.7 6.6 0 29.6 1.7 29.6 1.7v10.7C354.4 487.6 344.5 486.7 337.6 486.7z"/><path d="M428 488.1h-25.9v39c0 9.3 0.7 15.5 2 18.4 1.4 2.9 4.6 4.4 9.7 4.4l14.5-1 0.8 10.1c-7.3 1.2-12.8 1.8-16.6 1.8 -8.5 0-14.3-2.1-17.6-6.2s-4.9-12-4.9-23.6v-42.9h-11.6v-10.6H390v-25h12.1v24.9H428V488.1z"/><path d="M445 459v-14.1h12.2v14.2L445 459 445 459zM445 559v-81.5h12.2V559H445z"/><path d="M510.2 475.8c3.6 0 9.7 0.7 18.3 2l3.9 0.5 -0.5 9.9c-8.7-1-15.1-1.5-19.2-1.5 -9.2 0-15.5 2.2-18.8 6.6s-5 12.6-5 24.5c0 11.9 1.5 20.2 4.6 24.9 3.1 4.7 9.5 7 19.3 7l19.2-1.5 0.5 10.1c-10.1 1.5-17.7 2.3-22.7 2.3 -12.7 0-21.5-3.3-26.3-9.8s-7.3-17.5-7.3-33 2.6-26.4 7.8-32.6C489.3 479 498 475.8 510.2 475.8z"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 3.4 KiB

25
packages/kbn-ui-framework/doc_site/src/images/hint-arrow.svg
View file

@ -1,25 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="33px" height="49px" viewBox="0 0 33 49" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
<title>arrow</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="arrow" transform="translate(1.000000, 1.000000)">
<polygon id="Path-2" fill="#FFFFFF" points="11.5991211 0.698242188 28.7232122 12.8994141 23.8833008 14.7114258 30.5878906 40.6455078 25.2529297 45.0541992 13.1123047 46.5180664 7.92724609 22.1758009 0.65625 21.4760742 6.46533203 3.15625"></polygon>
<polygon id="Path-3" stroke="#00C0B4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="12.2182617 0.248046875 29.2192383 12.9946289 24.0693359 14.1850586 30.3686523 40.2514648 17.4643555 42.2636719 11.4897461 17.4106445 5.90136719 18.2470703"></polygon>
<polyline id="Path-4" stroke="#00C0B4" stroke-width="2" stroke-linejoin="round" points="12.0644531 0.201171875 7.65820313 2.56591797 0.029296875 23.2556152 8.34814453 21.8032227 12.9428711 46.269043 24.7758789 44.972168 30.7910156 40.1357422"></polyline>
<path d="M25.5,41.5 L20.5,45.5" id="Line" stroke="#00C0B4" stroke-linecap="square"></path>
<path d="M6.5,5.5 L9.5,4.5" id="Line" stroke="#00C0B4" stroke-linecap="square"></path>
<path d="M4.5,10.5 L8.5,8.5" id="Line" stroke="#00C0B4" stroke-linecap="square"></path>
<path d="M7.5,12.5 L2.5,15.5" id="Line" stroke="#00C0B4" stroke-linecap="square"></path>
<path d="M5.5,17.5 L1.5,20.5" id="Line" stroke="#00C0B4" stroke-linecap="square"></path>
<path d="M3.5,22.5 L11.5,17.5" id="Line" stroke="#00C0B4" stroke-linecap="square"></path>
<path d="M9.5,24.5 L12.5,22.5" id="Line" stroke="#00C0B4" stroke-linecap="square"></path>
<path d="M9.5,30.5 L13.5,27.5" id="Line" stroke="#00C0B4" stroke-linecap="square"></path>
<path d="M11.5,35.5 L15.5,32.5" id="Line" stroke="#00C0B4" stroke-linecap="square"></path>
<path d="M11.5,41.5 L15.5,38.5" id="Line" stroke="#00C0B4" stroke-linecap="square"></path>
<path d="M15.5,45.5 L18.5,42.5" id="Line" stroke="#00C0B4" stroke-linecap="square"></path>
</g>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 2.4 KiB

15
packages/kbn-ui-framework/doc_site/src/images/react-logo.svg
View file

@ -1,15 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="256px" height="230px" viewBox="0 0 256 230" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
<title>react-logo</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="react-logo" fill-rule="nonzero">
<path d="M0.754,114.75 C0.754,133.965 19.517,151.902 49.097,162.013 C43.19,191.75 48.039,215.719 64.233,225.058 C80.878,234.658 105.676,228.013 129.213,207.438 C152.156,227.182 175.343,234.952 191.523,225.586 C208.153,215.959 213.21,190.365 207.14,159.699 C237.95,149.513 255.184,134.218 255.184,114.75 C255.184,95.981 236.387,79.744 207.205,69.698 C213.74,37.765 208.203,14.378 191.338,4.653 C175.079,-4.723 151.622,3.449 128.342,23.709 C104.122,2.205 80.897,-4.36 64.05,5.392 C47.806,14.795 43.171,39.2 49.097,69.487 C20.515,79.452 0.754,96.057 0.754,114.75 Z" id="Shape" fill="#FFFFFF"></path>
<path d="M201.025,79.674 C198.619969,78.8490275 196.194532,78.084785 193.751,77.382 C194.156225,75.7354057 194.530956,74.0814561 194.875,72.421 C200.381,45.693 196.781,24.161 184.487,17.073 C172.7,10.275 153.422,17.363 133.952,34.306 C132.033483,35.9793431 130.157551,37.7008924 128.326,39.469 C127.09946,38.2933132 125.851246,37.1404488 124.582,36.011 C104.177,17.893 83.724,10.259 71.443,17.368 C59.667,24.185 56.179,44.428 61.136,69.758 C61.6291869,72.266409 62.1860333,74.761881 62.806,77.242 C59.912,78.064 57.117,78.94 54.443,79.872 C30.521,88.212 15.243,101.284 15.243,114.842 C15.243,128.846 31.643,142.892 56.561,151.408 C58.5814818,152.09533 60.6187811,152.732195 62.671,153.318 C62.0043019,155.98994 61.4124042,158.67999 60.896,161.385 C56.17,186.275 59.861,206.038 71.606,212.813 C83.737,219.808 104.097,212.618 123.923,195.288 C125.49,193.918 127.063,192.465 128.638,190.942 C130.621822,192.856059 132.658613,194.714448 134.746,196.515 C153.95,213.04 172.916,219.713 184.651,212.92 C196.771,205.904 200.709,184.673 195.595,158.842 C195.205,156.869 194.75,154.854 194.24,152.802 C195.67,152.38 197.073,151.944 198.442,151.49 C224.346,142.908 241.199,129.033 241.199,114.842 C241.199,101.235 225.429,88.075 201.025,79.674 Z" id="Shape" fill="#00C0B4"></path>
<path d="M195.406,142.328 C194.171,142.737 192.903,143.132 191.611,143.515 C188.751,134.462 184.891,124.835 180.169,114.89 C184.676,105.18 188.386,95.677 191.166,86.682 C193.477,87.352 195.721,88.057 197.883,88.802 C218.793,95.999 231.547,106.642 231.547,114.842 C231.547,123.577 217.772,134.917 195.407,142.328 L195.406,142.328 Z M186.126,160.717 C188.387,172.139 188.71,182.466 187.212,190.539 C185.866,197.793 183.16,202.629 179.814,204.566 C172.693,208.688 157.464,203.33 141.042,189.198 C139.159,187.578 137.262,185.848 135.36,184.018 C141.727,177.054 148.09,168.958 154.3,159.968 C165.224,158.999 175.544,157.414 184.903,155.251 C185.363,157.111 185.773,158.934 186.126,160.717 L186.126,160.717 Z M92.276,203.854 C85.319,206.311 79.778,206.381 76.429,204.45 C69.301,200.34 66.339,184.47 70.38,163.185 C70.86054,160.66956 71.4107516,158.167932 72.03,155.683 C81.285,157.73 91.53,159.203 102.48,160.091 C108.731,168.888 115.278,176.974 121.876,184.055 C120.473749,185.411463 119.038314,186.733197 117.571,188.019 C108.804,195.683 100.019,201.119 92.277,203.854 L92.276,203.854 Z M59.683,142.274 C48.665,138.508 39.566,133.614 33.329,128.274 C27.725,123.474 24.895,118.709 24.895,114.842 C24.895,106.615 37.162,96.12 57.621,88.987 C60.1888992,88.0956173 62.7823434,87.2796011 65.398,86.54 C68.226,95.737 71.935,105.353 76.411,115.077 C71.877,124.946 68.115,134.715 65.261,144.02 C63.3876414,143.483792 61.5277463,142.901616 59.683,142.274 L59.683,142.274 Z M70.609,67.904 C66.362,46.201 69.182,29.83 76.279,25.722 C83.839,21.346 100.554,27.586 118.172,43.229 C119.298,44.229 120.429,45.276 121.562,46.359 C114.998,53.408 108.511,61.433 102.314,70.179 C91.687,71.164 81.514,72.746 72.162,74.865 C71.5859234,72.5577496 71.0680923,70.2363458 70.609,67.903 L70.609,67.904 Z M168.076,91.971 C165.867077,88.15543 163.576212,84.3878893 161.205,80.671 C168.415,81.581 175.322,82.791 181.808,84.272 C179.861,90.513 177.434,97.039 174.576,103.729 C172.487817,99.7667898 170.320718,95.846675 168.076,91.971 L168.076,91.971 Z M128.329,53.257 C132.781,58.08 137.24,63.466 141.626,69.309 C132.729011,68.8885802 123.817177,68.8865779 114.92,69.303 C119.31,63.514 123.807,58.136 128.329,53.257 L128.329,53.257 Z M88.327,92.037 C86.1103861,95.881852 83.9838071,99.7779128 81.949,103.722 C79.138,97.055 76.733,90.5 74.769,84.17 C81.216,82.727 88.091,81.548 95.254,80.653 C92.8562133,84.3929245 90.5465767,88.1886373 88.327,92.037 L88.327,92.037 Z M95.46,149.72 C88.06,148.894 81.081,147.775 74.636,146.372 C76.631,139.93 79.089,133.234 81.96,126.424 C84.0033853,130.371011 86.1393091,134.269422 88.366,138.116 C90.6381114,142.039828 93.0034501,145.908927 95.46,149.72 L95.46,149.72 Z M128.596,177.109 C124.021,172.172 119.458,166.712 115.001,160.839 C119.327,161.009 123.738,161.095 128.221,161.095 C132.827,161.095 137.38,160.992 141.861,160.792 C137.461,166.772 133.018,172.24 128.596,177.109 Z M174.668,126.077 C177.688,132.961 180.234,139.621 182.256,145.954 C175.704,147.449 168.631,148.653 161.178,149.547 C163.566351,145.760714 165.879142,141.927289 168.115,138.049 C170.387885,134.107446 172.57276,130.11579 174.668,126.077 L174.668,126.077 Z M159.753,133.227 C156.3302,139.172956 152.714956,145.006038 148.913,150.717 C142.209,151.196 135.281,151.443 128.221,151.443 C121.19,151.443 114.35,151.224 107.763,150.797 C103.862436,145.099336 100.178803,139.256158 96.72,133.28 C93.2773643,127.335549 90.0617139,121.262507 87.08,115.074 C90.05413,108.883639 93.2600631,102.807343 96.691,96.858 L96.691,96.86 C100.12086,90.9093895 103.775495,85.091196 107.647,79.418 C114.367,78.91 121.257,78.644 128.222,78.644 C135.218,78.644 142.117,78.912 148.835,79.424 C152.667346,85.088466 156.298605,90.8864072 159.722,96.807 C163.164735,102.743107 166.413453,108.789638 169.463,114.937 C166.444822,121.146994 163.206436,127.247527 159.754,133.227 L159.753,133.227 Z M179.666,25.435 C187.232,29.799 190.175,47.396 185.421,70.473 C185.109401,71.9763271 184.770679,73.4739046 184.405,74.965 C175.031,72.802 164.851,71.192 154.193,70.192 C147.984,61.351 141.551,53.312 135.093,46.354 C136.785263,44.7225479 138.517798,43.133391 140.289,41.588 C156.971,27.07 172.562,21.338 179.666,25.435 L179.666,25.435 Z" id="Shape" fill="#FFFFFF"></path>
<path d="M128.221,94.665 C139.365,94.665 148.398,103.699 148.398,114.842 C148.398,125.986 139.365,135.02 128.221,135.02 C117.078,135.02 108.044,125.986 108.044,114.842 C108.044,103.699 117.078,94.665 128.221,94.665" id="Shape" fill="#00C0B4"></path>
</g>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 6.7 KiB

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

@ -1,88 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
require('./main.scss');
import 'core-js/stable';
import 'regenerator-runtime/runtime';
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { Router, hashHistory } from 'react-router'; // eslint-disable-line
// Store.
import configureStore from './store/configure_store';
// Guide views.
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';
const store = configureStore();
const childRoutes = [].concat(Routes.getAppRoutes());
childRoutes.push({
path: '*',
component: NotFoundView,
name: 'Page Not Found',
});
const routes = [
{
path: '/',
component: AppContainer,
indexRoute: {
component: HomeView,
source: 'views/home/HomeView',
},
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';
};
const syncTitleWithRoutes = (routesList) => {
if (!routesList) return;
routesList.forEach((route) => {
route.onEnter = onRouteEnter; // eslint-disable-line no-param-reassign
if (route.indexRoute) {
// Index routes have a weird relationship with their "parent" routes,
// so it seems we need to give their own onEnter hooks.
route.indexRoute.onEnter = onRouteEnter; // eslint-disable-line no-param-reassign
}
syncTitleWithRoutes(route.childRoutes);
});
};
syncTitleWithRoutes(routes);
ReactDOM.render(
<Provider store={store}>
<Router history={hashHistory} routes={routes} />
</Provider>,
document.getElementById('guide')
);

7
packages/kbn-ui-framework/doc_site/src/main.scss
View file

@ -1,7 +0,0 @@
@import '~@elastic/eui/src/themes/eui/eui_colors_dark';
@import '~@elastic/eui/src/global_styling/functions/index';
@import '~@elastic/eui/src/global_styling/variables/index';
@import '~@elastic/eui/src/global_styling/mixins/index';
@import '~@elastic/eui/src/global_styling/reset/index';
@import '../../dist/kui_dark.css';
@import './components/guide_components';

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

@ -1,35 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
/* eslint import/named: 0 */
import { GuideExample } from '../../components';
export default function creatExample(examples) {
class Example extends GuideExample {
constructor(props) {
super(props, examples);
}
}
Example.propTypes = {
...GuideExample.propTypes,
};
return Example;
}

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

@ -1,28 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
export { renderToHtml } from './string/render_to_html';
export { default as createExample } from './example/create_example';
export { default as JsInjector } from './js_injector/js_injector';
export { default as Routes } from './routes/routes';
export { default as Slugify } from './string/slugify';

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

@ -1,37 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import $ from 'jquery';
const ID_ATTRIBUTE = 'injected-js-tag-id';
export default {
inject(js, id) {
if (id) {
$(`[${ID_ATTRIBUTE}=${id}]`).remove();
}
const script = $(`<script ${ID_ATTRIBUTE}=${id}>${js}</script>`);
$('body').append(script);
},
remove(id) {
$(`[${ID_ATTRIBUTE}=${id}]`).remove();
},
};

175
packages/kbn-ui-framework/doc_site/src/services/routes/routes.js
View file

@ -1,175 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import Slugify from '../string/slugify';
import BarExample from '../../views/bar/bar_example';
import ButtonExample from '../../views/button/button_example';
import CollapseButtonExample from '../../views/collapse_button/collapse_button_example';
import FormExample from '../../views/form/form_example';
import FormLayoutExample from '../../views/form_layout/form_layout_example';
import IconExample from '../../views/icon/icon_example';
import InfoPanelExample from '../../views/info_panel/info_panel_example';
import LinkExample from '../../views/link/link_example';
import LocalNavExample from '../../views/local_nav/local_nav_example';
import PagerExample from '../../views/pager/pager_example';
import PanelExample from '../../views/panel/panel_example';
import EmptyTablePromptExample from '../../views/empty_table_prompt/empty_table_prompt_example';
import StatusTextExample from '../../views/status_text/status_text_example';
import TableExample from '../../views/table/table_example';
import TabsExample from '../../views/tabs/tabs_example';
import ToolBarExample from '../../views/tool_bar/tool_bar_example';
import TypographyExample from '../../views/typography/typography_example';
import VerticalRhythmExample from '../../views/vertical_rhythm/vertical_rhythm_example';
import ViewSandbox from '../../views/view/view_sandbox';
// Component route names should match the component name exactly.
const components = [
{
name: 'Bar',
component: BarExample,
hasReact: true,
},
{
name: 'Button',
component: ButtonExample,
hasReact: true,
},
{
name: 'CollapseButton',
component: CollapseButtonExample,
hasReact: true,
},
{
name: 'EmptyTablePrompt',
component: EmptyTablePromptExample,
hasReact: true,
},
{
name: 'Form',
component: FormExample,
},
{
name: 'FormLayout',
component: FormLayoutExample,
hasReact: true,
},
{
name: 'Icon',
component: IconExample,
},
{
name: 'InfoPanel',
component: InfoPanelExample,
},
{
name: 'Link',
component: LinkExample,
},
{
name: 'LocalNav',
component: LocalNavExample,
hasReact: true,
},
{
name: 'Pager',
component: PagerExample,
hasReact: true,
},
{
name: 'Panel',
component: PanelExample,
},
{
name: 'StatusText',
component: StatusTextExample,
},
{
name: 'Table',
component: TableExample,
hasReact: true,
},
{
name: 'Tabs',
component: TabsExample,
hasReact: true,
},
{
name: 'ToolBar',
component: ToolBarExample,
hasReact: true,
},
{
name: 'Typography',
component: TypographyExample,
},
{
name: 'VerticalRhythm',
component: VerticalRhythmExample,
},
];
const sandboxes = [
{
name: 'View',
component: ViewSandbox,
},
];
const allRoutes = components.concat(sandboxes);
export default {
components: Slugify.each(components, 'name', 'path'),
sandboxes: Slugify.each(sandboxes, 'name', 'path'),
getAppRoutes: function getAppRoutes() {
return allRoutes;
},
getPreviousRoute: function getPreviousRoute(routeName) {
const index = allRoutes.findIndex((item) => {
return item.name === routeName;
});
return index >= 0 ? allRoutes[index - 1] : undefined;
},
getNextRoute: function getNextRoute(routeName) {
const index = allRoutes.findIndex((item) => {
return item.name === routeName;
});
return index < allRoutes.length - 1 ? allRoutes[index + 1] : undefined;
},
};

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

@ -1,44 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import { render, configure } from 'enzyme';
import EnzymeAdapter from 'enzyme-adapter-react-16';
import html from 'html';
configure({ adapter: new EnzymeAdapter() });
export function renderToHtml(componentReference, props = {}) {
// If there's a failure, just return an empty string. The actual component itself should
// trip an error boundary in the UI when it fails.
try {
// Create the React element, render it and get its HTML, then format it prettily.
const element = React.createElement(componentReference, props);
const htmlString = render(element).html();
return html.prettyPrint(htmlString, {
indent_size: 2,
unformatted: [], // Expand all tags, including spans
});
} catch (e) {
return '';
}
}

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

@ -1,45 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
/**
* Lowercases input and replaces spaces with hyphens:
* e.g. 'GridView Example' -> 'gridview-example'
*/
function one(str) {
const parts = str
.toLowerCase()
.replace(/[-]+/g, ' ')
.replace(/[^\w^\s]+/g, '')
.replace(/ +/g, ' ')
.split(' ');
return parts.join('-');
}
function each(items, src, dest) {
return items.map((item) => {
const _item = item;
_item[dest] = one(_item[src]);
return _item;
});
}
export default {
one,
each,
};

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

@ -1,49 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
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';
import codeViewerReducer from './reducers/code_viewer_reducer';
import sandboxReducer from './reducers/sandbox_reducer';
import sectionsReducer from './reducers/sections_reducer';
/**
* @param {Object} initialState An object defining the application's initial
* state.
*/
export default function configureStore(initialState) {
function rootReducer(state = {}, action) {
return {
routing: routerReducer(state.routing, action),
codeViewer: codeViewerReducer(state.codeViewer, action),
sandbox: sandboxReducer(state.sandbox, action),
sections: sectionsReducer(state.sections, action),
};
}
const finalStore = compose(applyMiddleware(thunk, routerMiddleware(browserHistory)))(createStore)(
rootReducer,
initialState
);
return finalStore;
}

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

@ -1,38 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
export function getIsCodeViewerOpen(state) {
return state.codeViewer.isOpen;
}
export function getIsSandbox(state) {
return state.sandbox.isSandbox;
}
export function getSections(state) {
return state.sections.sections;
}
export function getSource(state) {
return state.codeViewer.source;
}
export function getTitle(state) {
return state.codeViewer.title;
}

68
packages/kbn-ui-framework/doc_site/src/store/reducers/code_viewer_reducer.js
View file

@ -1,68 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import { LOCATION_CHANGE } from 'react-router-redux';
import ActionTypes from '../../actions/action_types';
const defaultState = {
isOpen: false,
codesBySlug: {},
source: undefined,
title: undefined,
};
export default function codeViewerReducer(state = defaultState, action) {
switch (action.type) {
case ActionTypes.OPEN_CODE_VIEWER: {
const { source, title } = action;
if (state.code === source) {
// If we are opening the existing code, then close the viewer.
return {
...state,
isOpen: false,
source: undefined,
title: undefined,
};
}
return {
...state,
isOpen: true,
source,
title,
};
}
case LOCATION_CHANGE: // Close Code Viewer when we navigate somewhere.
case ActionTypes.CLOSE_CODE_VIEWER: {
return {
...state,
isOpen: false,
source: undefined,
};
}
default:
break;
}
return state;
}

47
packages/kbn-ui-framework/doc_site/src/store/reducers/sandbox_reducer.js
View file

@ -1,47 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import ActionTypes from '../../actions/action_types';
const defaultState = {
isSandbox: false,
};
export default function sandboxReducer(state = defaultState, action) {
switch (action.type) {
case ActionTypes.OPEN_SANDBOX: {
return {
...state,
isSandbox: true,
};
}
case ActionTypes.CLOSE_SANDBOX: {
return {
...state,
isSandbox: false,
};
}
default:
break;
}
return state;
}

57
packages/kbn-ui-framework/doc_site/src/store/reducers/sections_reducer.js
View file

@ -1,57 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import ActionTypes from '../../actions/action_types';
const defaultState = {
sections: [],
};
export default function sectionsReducer(state = defaultState, action) {
switch (action.type) {
case ActionTypes.REGISTER_SECTION: {
const sections = state.sections.slice();
sections.push({
id: action.id,
name: action.name,
});
return {
...state,
sections: sections,
};
}
case ActionTypes.UNREGISTER_SECTION: {
const sections = state.sections.slice();
const index = sections.findIndex((section) => section.id === action.id);
sections.splice(index, 1);
return {
...state,
sections: sections,
};
}
default:
break;
}
return state;
}

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

@ -1,51 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { getIsCodeViewerOpen, getIsSandbox, getSections, getSource, getTitle } from '../store';
import { AppView } from './app_view';
import { openCodeViewer, closeCodeViewer, registerSection, unregisterSection } from '../actions';
function mapStateToProps(state, ownProps) {
return {
routes: ownProps.routes,
isCodeViewerOpen: getIsCodeViewerOpen(state),
isSandbox: getIsSandbox(state),
source: getSource(state),
title: getTitle(state),
sections: getSections(state),
};
}
function mapDispatchToProps(dispatch) {
const actions = {
openCodeViewer,
closeCodeViewer,
registerSection,
unregisterSection,
};
return bindActionCreators(actions, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(AppView);

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

@ -1,141 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import classNames from 'classnames';
import { Routes } from '../services';
import { GuideCodeViewer, GuideNav } from '../components';
// Inject version into header.
const pkg = require('../../../../../package.json');
export class AppView extends Component {
constructor(props) {
super(props);
this.state = {
isNavOpen: false,
isChromeVisible: !props.isSandbox,
};
this.onClickNavItem = this.onClickNavItem.bind(this);
this.onToggleNav = this.onToggleNav.bind(this);
this.onCloseCodeViewer = this.onCloseCodeViewer.bind(this);
this.onHideChrome = this.onHideChrome.bind(this);
this.onShowChrome = this.onShowChrome.bind(this);
}
onClickNavItem() {
this.setState({
isNavOpen: false,
});
}
onCloseCodeViewer() {
this.props.closeCodeViewer();
}
onToggleNav() {
this.setState({
isNavOpen: !this.state.isNavOpen,
});
}
onHideChrome() {
this.setState({
isChromeVisible: false,
isNavOpen: false,
});
this.props.closeCodeViewer();
}
onShowChrome() {
this.setState({
isChromeVisible: true,
});
}
UNSAFE_componentWillReceiveProps(nextProps) {
// Only force the chrome to be hidden if we're navigating from a non-sandbox to a sandbox.
if (!this.props.isSandbox && nextProps.isSandbox) {
this.setState({
isChromeVisible: false,
});
}
}
render() {
const contentClasses = classNames('guideContent', {
'is-code-viewer-open': this.props.isCodeViewerOpen,
'is-chrome-hidden': !this.state.isChromeVisible,
});
return (
<div className="guide">
<GuideNav
isChromeVisible={this.state.isChromeVisible}
isNavOpen={this.state.isNavOpen}
isSandbox={this.props.isSandbox}
onHideChrome={this.onHideChrome}
onShowChrome={this.onShowChrome}
onToggleNav={this.onToggleNav}
onClickNavItem={this.onClickNavItem}
version={pkg.version}
routes={this.props.routes}
getNextRoute={Routes.getNextRoute}
getPreviousRoute={Routes.getPreviousRoute}
components={Routes.components}
sandboxes={Routes.sandboxes}
/>
<div className={contentClasses}>{this.props.children}</div>
<GuideCodeViewer
isOpen={this.props.isCodeViewerOpen}
onClose={this.onCloseCodeViewer}
title={this.props.title}
source={this.props.source}
/>
</div>
);
}
}
AppView.propTypes = {
children: PropTypes.any,
routes: PropTypes.array.isRequired,
isSandbox: PropTypes.bool,
openCodeViewer: PropTypes.func,
closeCodeViewer: PropTypes.func,
isCodeViewerOpen: PropTypes.bool,
registerSection: PropTypes.func,
unregisterSection: PropTypes.func,
sections: PropTypes.array,
source: PropTypes.array,
title: PropTypes.string,
};
AppView.defaultProps = {
source: [],
};

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

@ -1,36 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import { KuiBar, KuiBarSection } from '../../../../components';
export default () => (
<KuiBar>
<KuiBarSection>
<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 />
<div>pages</div>
</KuiBarSection>
</KuiBar>
);

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

@ -1,115 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
/* eslint-disable import/no-duplicates */
import React from 'react';
import { renderToHtml } from '../../services';
import { GuideDemo, GuidePage, GuideSection, GuideSectionTypes, GuideText } from '../../components';
import Bar from './bar';
import barSource from '!!raw-loader!./bar';
const barHtml = renderToHtml(Bar);
import BarOneSection from './bar_one_section';
import barOneSectionSource from '!!raw-loader!./bar_one_section';
const barOneSectionHtml = renderToHtml(BarOneSection);
import BarThreeSections from './bar_three_sections';
import barThreeSectionsSource from '!!raw-loader!./bar_three_sections';
const barThreeSectionsHtml = renderToHtml(BarThreeSections);
export default (props) => (
<GuidePage title={props.route.name}>
<GuideSection
title="Bar"
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
surfacing controls in the corners of a view.
</GuideText>
<GuideText>
<strong>Note:</strong> Instead of using this component with a Table, try using the
ControlledTable, ToolBar, and ToolBarFooter components.
</GuideText>
<GuideDemo>
<Bar />
</GuideDemo>
</GuideSection>
<GuideSection
title="One section"
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.
</GuideText>
<GuideDemo>
<BarOneSection />
</GuideDemo>
</GuideSection>
<GuideSection
title="Three sections"
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.
</GuideText>
<GuideDemo>
<BarThreeSections />
</GuideDemo>
</GuideSection>
</GuidePage>
);

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

@ -1,33 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
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>
</div>
</KuiBarSection>
</KuiBar>
);

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

@ -1,48 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import { KuiBar, KuiBarSection, KuiButton, KuiButtonGroup } from '../../../../components';
export default () => (
<KuiBar>
<KuiBarSection>
<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>
</KuiButtonGroup>
</KuiBarSection>
<KuiBarSection>
<label htmlFor="limitInput">Limit to</label>
<input id="limitInput" className="kuiTextInput" size="2" value="10" readOnly />
<div>pages</div>
<KuiButtonGroup>
<KuiButton buttonType="basic">Undo</KuiButton>
<KuiButton buttonType="basic">Redo</KuiButton>
</KuiButtonGroup>
</KuiBarSection>
</KuiBar>
);

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

@ -1,37 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import { KuiButton } from '../../../../components';
export default () => (
<div>
<KuiButton buttonType="basic" onClick={() => window.alert('Button clicked')}>
Basic button
</KuiButton>
<br />
<br />
<KuiButton buttonType="basic" onClick={() => window.alert('Button clicked')} disabled>
Basic button, disabled
</KuiButton>
</div>
);

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

@ -1,35 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import { KuiButton } from '../../../../components';
export default () => (
<div>
<KuiButton buttonType="danger">Danger button</KuiButton>
<br />
<br />
<KuiButton buttonType="danger" disabled>
Danger button, disabled
</KuiButton>
</div>
);

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

@ -1,66 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import { KuiButton, KuiLinkButton, KuiSubmitButton } from '../../../../components';
export default () => (
<div>
<KuiButton buttonType="basic">Button element</KuiButton>
<br />
<br />
<form
onSubmit={(e) => {
e.preventDefault();
window.alert('Submit');
}}
>
<KuiSubmitButton buttonType="basic">Submit input element</KuiSubmitButton>
</form>
<br />
<form
onSubmit={(e) => {
e.preventDefault();
window.alert('Submit');
}}
>
<KuiSubmitButton buttonType="basic" disabled>
Submit input element, disabled
</KuiSubmitButton>
</form>
<br />
<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>
Anchor element, disabled
</KuiLinkButton>
</div>
);

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

@ -1,332 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
/* eslint-disable import/no-duplicates */
import React from 'react';
import { renderToHtml } from '../../services';
import { GuideDemo, GuidePage, GuideSection, GuideSectionTypes, GuideText } from '../../components';
import Basic from './button_basic';
import basicSource from '!!raw-loader!./button_basic';
const basicHtml = renderToHtml(Basic);
import Hollow from './button_hollow';
import hollowSource from '!!raw-loader!./button_hollow';
const hollowHtml = renderToHtml(Hollow);
import Primary from './button_primary';
import primarySource from '!!raw-loader!./button_primary';
const primaryHtml = renderToHtml(Primary);
import Secondary from './button_secondary';
import secondarySource from '!!raw-loader!./button_secondary';
const secondaryHtml = renderToHtml(Secondary);
import Danger from './button_danger';
import dangerSource from '!!raw-loader!./button_danger';
const dangerHtml = renderToHtml(Danger);
import Warning from './button_warning';
import warningSource from '!!raw-loader!./button_danger';
const warningHtml = renderToHtml(Warning);
import Loading from './button_loading';
import loadingSource from '!!raw-loader!./button_loading';
const loadingHtml = renderToHtml(Loading, { isLoading: true });
import WithIcon from './button_with_icon';
import withIconSource from '!!raw-loader!./button_with_icon';
const withIconHtml = renderToHtml(WithIcon);
import ButtonGroup from './button_group';
import buttonGroupSource from '!!raw-loader!./button_group';
const buttonGroupHtml = renderToHtml(ButtonGroup);
import ButtonGroupUnited from './button_group_united';
import buttonGroupUnitedSource from '!!raw-loader!./button_group_united';
const buttonGroupUnitedHtml = renderToHtml(ButtonGroupUnited);
import Elements from './button_elements';
import elementsSource from '!!raw-loader!./button_elements';
const elementsHtml = renderToHtml(Elements);
import sizesHtml from './button_sizes.html';
export default (props) => (
<GuidePage title={props.route.name}>
<GuideSection
title="Basic Button"
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).
</GuideText>
<GuideDemo>
<Basic />
</GuideDemo>
</GuideSection>
<GuideSection
title="Hollow Button"
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.
</GuideText>
<GuideDemo>
<Hollow />
</GuideDemo>
</GuideSection>
<GuideSection
title="Primary Button"
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.
</GuideText>
<GuideDemo>
<Primary />
</GuideDemo>
</GuideSection>
<GuideSection
title="Secondary Button"
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.
</GuideText>
<GuideDemo>
<Secondary />
</GuideDemo>
</GuideSection>
<GuideSection
title="Danger Button"
source={[
{
type: GuideSectionTypes.JS,
code: dangerSource,
},
{
type: GuideSectionTypes.HTML,
code: dangerHtml,
},
]}
>
<GuideText>Danger Buttons represent irreversible, potentially regrettable actions.</GuideText>
<GuideDemo>
<Danger />
</GuideDemo>
</GuideSection>
<GuideSection
title="Warning Button"
source={[
{
type: GuideSectionTypes.JS,
code: warningSource,
},
{
type: GuideSectionTypes.HTML,
code: warningHtml,
},
]}
>
<GuideText>Warning Buttons represent potentially notable actions.</GuideText>
<GuideDemo>
<Warning />
</GuideDemo>
</GuideSection>
<GuideSection
title="Loading Button"
source={[
{
type: GuideSectionTypes.JS,
code: loadingSource,
},
{
type: GuideSectionTypes.HTML,
code: loadingHtml,
},
]}
>
<GuideDemo>
<Loading />
</GuideDemo>
</GuideSection>
<GuideSection
title="Button with icon"
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).
</p>
</GuideText>
<GuideDemo>
<WithIcon />
</GuideDemo>
</GuideSection>
<GuideSection
title="ButtonGroup"
source={[
{
type: GuideSectionTypes.JS,
code: buttonGroupSource,
},
{
type: GuideSectionTypes.HTML,
code: buttonGroupHtml,
},
]}
>
<GuideDemo>
<ButtonGroup />
</GuideDemo>
</GuideSection>
<GuideSection
title="United ButtonGroup"
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
of Buttons, and differentiate them from Buttons outside of the set.
</GuideText>
<GuideText>
They support containing a single Button, so that Buttons can be dynamically added and
removed.
</GuideText>
<GuideDemo>
<ButtonGroupUnited />
</GuideDemo>
</GuideSection>
<GuideSection
title="Element variations"
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;].
</GuideText>
<GuideDemo>
<Elements />
</GuideDemo>
</GuideSection>
<GuideSection
title="Sizes"
source={[
{
type: GuideSectionTypes.HTML,
code: sizesHtml,
},
]}
>
<GuideDemo html={sizesHtml} />
</GuideSection>
</GuidePage>
);

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

@ -1,40 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import { KuiButton, KuiButtonGroup } from '../../../../components';
export default () => (
<div>
<KuiButtonGroup>
<KuiButton buttonType="basic">Cancel</KuiButton>
<KuiButton buttonType="basic">Duplicate</KuiButton>
<KuiButton buttonType="primary">Save</KuiButton>
</KuiButtonGroup>
<br />
<KuiButtonGroup>
<KuiButton buttonType="basic">Button group with one button</KuiButton>
</KuiButtonGroup>
</div>
);

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

@ -1,46 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import { KuiButton, KuiButtonGroup, KuiButtonIcon } from '../../../../components';
export default () => (
<div>
<KuiButtonGroup isUnited>
<KuiButton buttonType="basic">Option A</KuiButton>
<KuiButton buttonType="basic">Option B</KuiButton>
<KuiButton buttonType="basic">Option C</KuiButton>
</KuiButtonGroup>
<br />
<KuiButtonGroup isUnited>
<KuiButton
buttonType="basic"
aria-label="Previous"
icon={<KuiButtonIcon type="previous" />}
/>
<KuiButton buttonType="basic" aria-label="Next" icon={<KuiButtonIcon type="next" />} />
</KuiButtonGroup>
</div>
);

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

@ -1,35 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import { KuiButton } from '../../../../components';
export default () => (
<div>
<KuiButton buttonType="hollow">Hollow button</KuiButton>
<br />
<br />
<KuiButton buttonType="hollow" disabled>
Hollow button, disabled
</KuiButton>
</div>
);

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

@ -1,74 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React, { Component } from 'react';
import { KuiButtonIcon, KuiButton } from '../../../../components';
export default class LoadingButton extends Component {
constructor(props) {
super();
this.state = {
isLoading: props.isLoading || false,
};
this.onClick = this.onClick.bind(this);
}
onClick() {
this.setState({
isLoading: true,
});
setTimeout(() => {
this.setState({
isLoading: false,
});
}, 3000);
}
render() {
return (
<div>
<KuiButton
buttonType="basic"
onClick={this.onClick}
isLoading={this.state.isLoading}
disabled={this.state.isLoading}
>
{this.state.isLoading ? 'Loading...' : 'Load more'}
</KuiButton>
<br />
<br />
<KuiButton
buttonType="primary"
onClick={this.onClick}
icon={<KuiButtonIcon type="create" />}
isLoading={this.state.isLoading}
disabled={this.state.isLoading}
>
{this.state.isLoading ? 'Creating...' : 'Create'}
</KuiButton>
</div>
);
}
}

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

@ -1,35 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import { KuiButton } from '../../../../components';
export default () => (
<div>
<KuiButton buttonType="primary">Primary button</KuiButton>
<br />
<br />
<KuiButton buttonType="primary" disabled>
Primary button, disabled
</KuiButton>
</div>
);

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

@ -1,35 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import { KuiButton } from '../../../../components';
export default () => (
<div>
<KuiButton buttonType="secondary">Secondary button</KuiButton>
<br />
<br />
<KuiButton buttonType="secondary" disabled>
Secondary button, disabled
</KuiButton>
</div>
);

55
packages/kbn-ui-framework/doc_site/src/views/button/button_sizes.html
View file

@ -1,55 +0,0 @@
<div class="kuiButton kuiButton--basic kuiButton--small">
Small button
</div>
<hr class="guideBreak">
<div class="kuiButton kuiButton--basic kuiButton--iconText kuiButton--small">
<span class="kuiButton__icon kuiIcon fa-gear"
></span><span>Small button with icon</span>
</div>
<hr class="guideBreak">
<div class="kuiButton kuiButton--basic kuiButton--fullWidth">
Full-width button
</div>
<hr class="guideBreak">
<div class="kuiButton kuiButton--basic kuiButton--iconText kuiButton--fullWidth">
<span class="kuiButton__icon kuiIcon fa-gear"
></span><span>Full-width button with icon</span>
</div>
<hr class="guideBreak">
<div class="kuiButtonGroup kuiButtonGroup--fullWidth">
<div class="kuiButton kuiButton--basic">
Button A
</div>
<div class="kuiButton kuiButton--basic">
Button B
</div>
<div class="kuiButton kuiButton--basic">
Button C
</div>
</div>
<hr class="guideBreak">
<div class="kuiButtonGroup kuiButtonGroup--fullWidth">
<div class="kuiButton kuiButton--basic kuiButton--small">
Button A
</div>
<div class="kuiButton kuiButton--basic kuiButton--small">
Button B
</div>
<div class="kuiButton kuiButton--basic kuiButton--small">
Button C
</div>
</div>

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

@ -1,35 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import { KuiButton } from '../../../../components';
export default () => (
<div>
<KuiButton buttonType="warning">Warning button</KuiButton>
<br />
<br />
<KuiButton buttonType="warning" disabled>
Warning button, disabled
</KuiButton>
</div>
);

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

@ -1,67 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import { KuiButton, KuiButtonIcon } from '../../../../components';
export default () => (
<div>
<KuiButton buttonType="primary" icon={<KuiButtonIcon type="create" />}>
Create
</KuiButton>
<br />
<br />
<KuiButton buttonType="danger" icon={<KuiButtonIcon type="delete" />}>
Delete
</KuiButton>
<br />
<br />
<KuiButton buttonType="basic" icon={<KuiButtonIcon type="previous" />}>
Previous
</KuiButton>
<br />
<br />
<KuiButton buttonType="basic" icon={<KuiButtonIcon type="next" />} iconPosition="right">
Next
</KuiButton>
<br />
<br />
<KuiButton buttonType="basic" icon={<KuiButtonIcon type="loading" />}>
Loading
</KuiButton>
<br />
<br />
<KuiButton
buttonType="basic"
aria-label="Book flight"
icon={<KuiButtonIcon className="fa-plane" />}
/>
</div>
);

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

@ -1,31 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
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" />
</div>
);

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

@ -1,59 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React, { Component } from 'react';
import { KuiCollapseButton } from '../../../../components';
import { htmlIdGenerator } from '../../../../src/services';
export default class extends Component {
constructor(props) {
super(props);
this.state = {
isExpanded: false,
};
}
onToggleContent = (ev) => {
ev.preventDefault();
this.setState((state) => ({
isExpanded: !state.isExpanded,
}));
};
render() {
const { isExpanded } = this.state;
const idGen = htmlIdGenerator();
return (
<div>
<KuiCollapseButton
onClick={this.onToggleContent}
direction={isExpanded ? 'down' : 'up'}
aria-label="Toggle panel"
aria-expanded={isExpanded}
aria-controls={idGen('collapsible')}
/>
<div id={idGen('collapsible')} style={{ display: isExpanded ? 'block' : 'none' }}>
Here is some collapsible content.
</div>
</div>
);
}
}

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

@ -1,108 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
/* eslint-disable import/no-duplicates */
import React from 'react';
import { renderToHtml } from '../../services';
import { GuideDemo, GuidePage, GuideSection, GuideSectionTypes, GuideText } from '../../components';
import CollapseButton from './collapse_button';
import collapseButtonSource from '!!raw-loader!./collapse_button';
const collapseButtonHtml = renderToHtml(CollapseButton);
import CollapseButtonAria from './collapse_button_aria';
import collapseButtonAriaSource from '!!raw-loader!./collapse_button_aria';
const collapseButtonAriaHtml = renderToHtml(CollapseButtonAria);
export default (props) => (
<GuidePage title={props.route.name}>
<GuideSection
title="CollapseButton"
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
containers.
</GuideText>
<GuideDemo>
<CollapseButton />
</GuideDemo>
</GuideSection>
<GuideSection
title="CollapseButton accessibility"
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>
<dd>
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>
<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.
</GuideText>
<GuideDemo>
<CollapseButtonAria />
</GuideDemo>
</GuideSection>
</GuidePage>
);

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

@ -1,41 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import { KuiEmptyTablePrompt, KuiLinkButton, KuiButtonIcon } from '../../../../components';
export function EmptyTablePrompt() {
return (
<KuiEmptyTablePrompt
actions={
<KuiLinkButton
icon={<KuiButtonIcon type="create" />}
aria-label="Add a new item"
data-test-subj="addNewPromptButton"
buttonType="primary"
href="#"
>
Add a new item
</KuiLinkButton>
}
message="Uh oh, You have no items!"
/>
);
}

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

@ -1,80 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
/* eslint-disable import/no-duplicates */
import React from 'react';
import { renderToHtml } from '../../services';
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
const emptyTablePromptHtml = renderToHtml(EmptyTablePrompt);
import { ControlledTableWithEmptyPrompt } from './table_with_empty_prompt';
import tableWithEmptyPromptSource from '!!raw-loader!./table_with_empty_prompt'; // eslint-disable-line import/default
const tableWithEmptyPromptHtml = renderToHtml(ControlledTableWithEmptyPrompt);
export default (props) => (
<GuidePage title={props.route.name}>
<GuideSection
title="Empty table prompt"
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.
</GuideText>
<GuideDemo>
<EmptyTablePrompt />
</GuideDemo>
</GuideSection>
<GuideSection
title="Controlled table with empty table prompt"
source={[
{
type: GuideSectionTypes.JS,
code: tableWithEmptyPromptSource,
},
{
type: GuideSectionTypes.HTML,
code: tableWithEmptyPromptHtml,
},
]}
>
<GuideText>Wrap in an EmptyTablePromptPanel when using with a controlled table.</GuideText>
<GuideDemo>
<ControlledTableWithEmptyPrompt />
</GuideDemo>
</GuideSection>
</GuidePage>
);

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

@ -1,80 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import {
KuiEmptyTablePrompt,
KuiEmptyTablePromptPanel,
KuiToolBar,
KuiToolBarSearchBox,
KuiPager,
KuiLinkButton,
KuiButtonIcon,
KuiButtonGroup,
} from '../../../../components';
export function ControlledTableWithEmptyPrompt() {
return (
<div>
<KuiToolBar>
<KuiToolBarSearchBox onFilter={() => {}} />
<div className="kuiToolBarSection">
<KuiPager
startNumber={0}
endNumber={0}
totalItems={0}
hasNextPage={false}
hasPreviousPage={false}
onNextPage={() => {}}
onPreviousPage={() => {}}
/>
</div>
</KuiToolBar>
<KuiEmptyTablePromptPanel>
<KuiEmptyTablePrompt
actions={
<KuiButtonGroup>
<KuiLinkButton
icon={<KuiButtonIcon type="create" />}
aria-label="Add a new dashboard"
data-test-subj="addNewDashPromptButton"
buttonType="primary"
href="#"
>
Add a new dashboard
</KuiLinkButton>
<KuiLinkButton
icon={<KuiButtonIcon type="create" />}
aria-label="Add a new visualization"
data-test-subj="addNewVizPromptButton"
buttonType="primary"
href="#"
>
Add a new visualization
</KuiLinkButton>
</KuiButtonGroup>
}
message="You have no items. Would you like to add one?"
/>
</KuiEmptyTablePromptPanel>
</div>
);
}

14
packages/kbn-ui-framework/doc_site/src/views/form/assisted_input.html
View file

@ -1,14 +0,0 @@
<div class="kuiAssistedInput">
<input
style="width: 300px; padding-right: 5.5em"
type="text"
class="kuiTextInput"
placeholder="Enter API command"
>
<div class="kuiAssistedInput__assistance">
<p class="kuiText">
<a class="kuiLink" href="#">API docs</a>
</p>
</div>
</div>

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

@ -1,64 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React, { Component } from 'react';
import { KuiCheckBox, KuiCheckBoxLabel } from '../../../../components';
class KuiCheckBoxExample extends Component {
state = {
value1: false,
value2: true,
value3: true,
value4: false,
};
handleChange = (event, key) => {
this.setState({ [key]: event.target.checked });
};
render() {
return (
<div>
<KuiCheckBox
isChecked={this.state.value1}
onChange={(event) => this.handleChange(event, 'value1')}
/>
<hr className="guideBreak" />
<KuiCheckBox
isChecked={this.state.value2}
onChange={(event) => this.handleChange(event, 'value2')}
/>
<hr className="guideBreak" />
<KuiCheckBox
isChecked={this.state.value3}
onChange={(event) => this.handleChange(event, 'value3')}
isDisabled
/>
<hr className="guideBreak" />
<KuiCheckBoxLabel
text="With clickable label"
isChecked={this.state.value4}
onChange={(event) => this.handleChange(event, 'value4')}
/>
</div>
);
}
}
export default KuiCheckBoxExample;

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

@ -1,233 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
/* eslint-disable import/no-duplicates */
import React from 'react';
import { renderToHtml } from '../../services';
import {
GuideCode,
GuideDemo,
GuidePage,
GuideSection,
GuideSectionTypes,
GuideText,
} from '../../components';
import assistedInputHtml from './assisted_input.html';
import searchInputHtml from './search_input.html';
import staticInputHtml from './static_input.html';
import Label from './label';
import labelSource from '!!raw-loader!./label';
const labelHtml = renderToHtml(Label);
import TextInput from './text_input';
import textInputSource from '!!raw-loader!./text_input';
const textInputHtml = renderToHtml(TextInput, { id: '1' });
import TextArea from './text_area';
import textAreaSource from '!!raw-loader!./text_area';
const textAreaHtml = renderToHtml(TextArea);
import TextAreaNonResizable from './text_area_non_resizable';
import textAreaNonResizableSource from '!!raw-loader!./text_area_non_resizable';
const textAreaNonResizableHtml = renderToHtml(TextAreaNonResizable);
import Select from './select';
import selectSource from '!!raw-loader!./select';
const selectHtml = renderToHtml(Select);
import CheckBox from './check_box';
import checkBoxSource from '!!raw-loader!./check_box';
const checkBoxHtml = renderToHtml(CheckBox);
export default (props) => (
<GuidePage title={props.route.name}>
<GuideSection
title="Label"
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>.
</GuideText>
<GuideText>
For the sake of simplicity we haven&rsquo;t labeled the input elements on this page
correctly.
</GuideText>
<GuideDemo>
<Label />
</GuideDemo>
</GuideSection>
<GuideSection
title="TextInput"
source={[
{
type: GuideSectionTypes.JS,
code: textInputSource,
},
{
type: GuideSectionTypes.HTML,
code: textInputHtml,
},
]}
>
<GuideDemo>
<TextInput />
</GuideDemo>
</GuideSection>
<GuideSection
title="AssistedInput"
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.
</GuideText>
<GuideDemo html={assistedInputHtml} />
</GuideSection>
<GuideSection
title="SearchInput"
source={[
{
type: GuideSectionTypes.HTML,
code: searchInputHtml,
},
]}
>
<GuideDemo html={searchInputHtml} />
</GuideSection>
<GuideSection
title="StaticInput"
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.
</GuideText>
<GuideDemo html={staticInputHtml} />
</GuideSection>
<GuideSection
title="TextArea"
source={[
{
type: GuideSectionTypes.JS,
code: textAreaSource,
},
{
type: GuideSectionTypes.HTML,
code: textAreaHtml,
},
]}
>
<GuideDemo>
<TextArea />
</GuideDemo>
</GuideSection>
<GuideSection
title="TextArea, non-resizable"
source={[
{
type: GuideSectionTypes.JS,
code: textAreaNonResizableSource,
},
{
type: GuideSectionTypes.HTML,
code: textAreaNonResizableHtml,
},
]}
>
<GuideDemo>
<TextAreaNonResizable />
</GuideDemo>
</GuideSection>
<GuideSection
title="CheckBox"
source={[
{
type: GuideSectionTypes.JS,
code: checkBoxSource,
},
{
type: GuideSectionTypes.HTML,
code: checkBoxHtml,
},
]}
>
<GuideDemo>
<CheckBox />
</GuideDemo>
</GuideSection>
<GuideSection
title="Select"
source={[
{
type: GuideSectionTypes.JS,
code: selectSource,
},
{
type: GuideSectionTypes.HTML,
code: selectHtml,
},
]}
>
<GuideDemo>
<Select />
</GuideDemo>
</GuideSection>
</GuidePage>
);

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

@ -1,27 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import { KuiLabel } from '../../../../components';
const KuiLabelExample = () => {
return <KuiLabel>Label</KuiLabel>;
};
export default KuiLabelExample;

41
packages/kbn-ui-framework/doc_site/src/views/form/search_input.html
View file

@ -1,41 +0,0 @@
<div class="kuiSearchInput">
<div class="kuiSearchInput__icon kuiIcon fa-search"></div>
<input
class="kuiSearchInput__input"
type="text"
placeholder="Search..."
>
</div>
<hr class="guideBreak">
<div class="kuiSearchInput kuiSearchInput-isInvalid">
<div class="kuiSearchInput__icon kuiIcon fa-search"></div>
<input
class="kuiSearchInput__input"
type="text"
placeholder="Search..."
>
</div>
<hr class="guideBreak">
<div class="kuiSearchInput kuiSearchInput--small">
<div class="kuiSearchInput__icon kuiIcon fa-search"></div>
<input
class="kuiSearchInput__input"
type="text"
placeholder="Small..."
>
</div>
<hr class="guideBreak">
<div class="kuiSearchInput kuiSearchInput--large">
<div class="kuiSearchInput__icon kuiIcon fa-search"></div>
<input
class="kuiSearchInput__input"
type="text"
placeholder="Large..."
>
</div>

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

@ -1,84 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React, { Component } from 'react';
import { KuiSelect } from '../../../../components';
class KuiSelectExample extends Component {
state = {
value1: '',
value2: '',
value3: '',
value4: '',
value5: '',
};
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>
<hr className="guideBreak" />
<KuiSelect
value={this.state.value2}
onChange={(event) => this.handleChange(event, 'value2')}
isDisabled
>
<option>Disabled</option>
</KuiSelect>
<hr className="guideBreak" />
<KuiSelect
value={this.state.value3}
onChange={(event) => this.handleChange(event, 'value3')}
isInvalid
>
<option>Invalid</option>
</KuiSelect>
<hr className="guideBreak" />
<KuiSelect
value={this.state.value4}
onChange={(event) => this.handleChange(event, 'value4')}
size="small"
>
<option>Small</option>
</KuiSelect>
<hr className="guideBreak" />
<KuiSelect
value={this.state.value5}
onChange={(event) => this.handleChange(event, 'value5')}
size="large"
>
<option>Large</option>
</KuiSelect>
</div>
);
}
}
export default KuiSelectExample;

6
packages/kbn-ui-framework/doc_site/src/views/form/static_input.html
View file

@ -1,6 +0,0 @@
<input
type="text"
class="kuiStaticInput"
value="Entered text"
disabled
>

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

@ -1,81 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React, { Component } from 'react';
import { KuiTextArea } from '../../../../components';
class KuiTextAreaExample extends Component {
state = {
value1: '',
value2: 'Entered text',
value3: '',
value4: 'Disabled',
value5: '',
value6: '',
};
handleChange = (event, key) => {
this.setState({ [key]: event.target.value });
};
render() {
return (
<div>
<KuiTextArea
placeholder="Placeholder text"
value={this.state.value1}
onChange={(event) => this.handleChange(event, 'value1')}
/>
<hr className="guideBreak" />
<KuiTextArea
value={this.state.value2}
onChange={(event) => this.handleChange(event, 'value2')}
/>
<hr className="guideBreak" />
<KuiTextArea
isInvalid
value={this.state.value3}
onChange={(event) => this.handleChange(event, 'value3')}
/>
<hr className="guideBreak" />
<KuiTextArea
isDisabled
value={this.state.value4}
onChange={(event) => this.handleChange(event, 'value4')}
/>
<hr className="guideBreak" />
<KuiTextArea
placeholder="Small"
value={this.state.value5}
size="small"
onChange={(event) => this.handleChange(event, 'value5')}
/>
<hr className="guideBreak" />
<KuiTextArea
placeholder="Large"
value={this.state.value6}
size="large"
onChange={(event) => this.handleChange(event, 'value6')}
/>
</div>
);
}
}
export default KuiTextAreaExample;

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

@ -1,43 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React, { Component } from 'react';
import { KuiTextArea } from '../../../../components';
class KuiTextAreaNonResizableExample extends Component {
state = {
value1: 'Non-resizable',
};
handleChange = (event, key) => {
this.setState({ [key]: event.target.value });
};
render() {
return (
<KuiTextArea
value={this.state.value1}
onChange={(event) => this.handleChange(event, 'value1')}
isNonResizable
/>
);
}
}
export default KuiTextAreaNonResizableExample;

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

@ -1,82 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React, { Component } from 'react';
import { KuiTextInput } from '../../../../components';
class KuiTextInputExample extends Component {
state = {
value1: '',
value2: 'Entered text',
value3: '',
value4: 'Disabled',
value5: '',
value6: '',
};
handleChange = (event, key) => {
this.setState({ [key]: event.target.value });
};
render() {
return (
<div>
<KuiTextInput
value={this.state.value1}
placeholder="Placeholder text"
onChange={(event) => this.handleChange(event, 'value1')}
/>
<hr className="guideBreak" />
<KuiTextInput
value={this.state.value2}
autoFocus
onChange={(event) => this.handleChange(event, 'value2')}
/>
<hr className="guideBreak" />
<KuiTextInput
value={this.state.value3}
isInvalid
onChange={(event) => this.handleChange(event, 'value3')}
/>
<hr className="guideBreak" />
<KuiTextInput
value={this.state.value4}
isDisabled
onChange={(event) => this.handleChange(event, 'value4')}
/>
<hr className="guideBreak" />
<KuiTextInput
value={this.state.value5}
size="small"
placeholder="Small"
onChange={(event) => this.handleChange(event, 'value5')}
/>
<hr className="guideBreak" />
<KuiTextInput
value={this.state.value6}
size="large"
placeholder="Large"
onChange={(event) => this.handleChange(event, 'value6')}
/>
</div>
);
}
}
export default KuiTextInputExample;

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

@ -1,106 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import {
KuiFieldGroup,
KuiFieldGroupSection,
KuiButton,
KuiButtonIcon,
KuiButtonGroup,
} from '../../../../components';
export default () => (
<div>
<KuiFieldGroup>
<KuiFieldGroupSection isWide>
<div className="kuiSearchInput">
<div className="kuiSearchInput__icon kuiIcon fa-search" />
<input className="kuiSearchInput__input" type="text" />
</div>
</KuiFieldGroupSection>
<KuiFieldGroupSection>
<select className="kuiSelect">
<option>Animal</option>
<option>Mineral</option>
<option>Vegetable</option>
</select>
</KuiFieldGroupSection>
</KuiFieldGroup>
<br className="guideBreak" />
<KuiFieldGroup>
<KuiFieldGroupSection>
<input className="kuiTextInput" placeholder="http://" type="text" />
</KuiFieldGroupSection>
<KuiFieldGroupSection>
<KuiButton buttonType="primary">Ping</KuiButton>
</KuiFieldGroupSection>
</KuiFieldGroup>
<br className="guideBreak" />
<KuiFieldGroup isAlignedTop>
<KuiFieldGroupSection>
<textarea className="kuiTextArea" placeholder="http://" type="text" rows="5" />
</KuiFieldGroupSection>
<KuiFieldGroupSection>
<KuiButton buttonType="primary">Ping</KuiButton>
</KuiFieldGroupSection>
</KuiFieldGroup>
<br className="guideBreak" />
<KuiFieldGroup>
<KuiFieldGroupSection>
<input className="kuiTextInput" type="text" />
</KuiFieldGroupSection>
<KuiFieldGroupSection>
<KuiButtonGroup>
<KuiButton
buttonType="basic"
className="kuiButton--small"
aria-label="Increase"
icon={<KuiButtonIcon className="fa-plus" />}
/>
<KuiButton
buttonType="basic"
className="kuiButton--small"
aria-label="Decrease"
icon={<KuiButtonIcon className="fa-minus" />}
/>
<KuiButton
buttonType="danger"
className="kuiButton--small"
aria-label="Remove"
icon={<KuiButtonIcon className="fa-trash" />}
/>
</KuiButtonGroup>
</KuiFieldGroupSection>
</KuiFieldGroup>
</div>
);

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

@ -1,51 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
/* eslint-disable import/no-duplicates */
import React from 'react';
import { renderToHtml } from '../../services';
import { GuideDemo, GuidePage, GuideSection, GuideSectionTypes } from '../../components';
import FieldGroup from './field_group';
import fieldGroupSource from '!!raw-loader!./field_group';
const fieldGroupHtml = renderToHtml(FieldGroup);
export default (props) => (
<GuidePage title={props.route.name}>
<GuideSection
title="FieldGroup"
source={[
{
type: GuideSectionTypes.JS,
code: fieldGroupSource,
},
{
type: GuideSectionTypes.HTML,
code: fieldGroupHtml,
},
]}
>
<GuideDemo>
<FieldGroup />
</GuideDemo>
</GuideSection>
</GuidePage>
);

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

@ -1,34 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
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>
<h2 className="guideTitle">
Please use the <a href="https://github.com/elastic/eui">EUI Framework instead</a>.
</h2>
</div>
</div>
</div>
);

1
packages/kbn-ui-framework/doc_site/src/views/icon/icon.html
View file

@ -1 +0,0 @@
<div class="kuiIcon fa-gear"></div>

1
packages/kbn-ui-framework/doc_site/src/views/icon/icon_basic.html
View file

@ -1 +0,0 @@
<div class="kuiIcon kuiIcon--basic fa-train"></div>

1
packages/kbn-ui-framework/doc_site/src/views/icon/icon_error.html
View file

@ -1 +0,0 @@
<div class="kuiIcon kuiIcon--error fa-warning"></div>

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

@ -1,169 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import {
GuideCode,
GuideDemo,
GuidePage,
GuideSection,
GuideSectionTypes,
GuideText,
} from '../../components';
import iconHtml from './icon.html';
import infoHtml from './icon_info.html';
import basicHtml from './icon_basic.html';
import successHtml from './icon_success.html';
import warningHtml from './icon_warning.html';
import errorHtml from './icon_error.html';
import inactiveHtml from './icon_inactive.html';
import spinnerHtml from './icon_spinner.html';
import spinnerJs from 'raw-loader!./icon_spinner.js';
export default (props) => (
<GuidePage title={props.route.name}>
<GuideSection
title="Icon"
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} />
</GuideSection>
<GuideSection
title="Info"
source={[
{
type: GuideSectionTypes.HTML,
code: infoHtml,
},
]}
>
<GuideText>Use this Icon to denote useful information.</GuideText>
<GuideDemo html={infoHtml} />
</GuideSection>
<GuideSection
title="Basic"
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.
</GuideText>
<GuideDemo html={basicHtml} />
</GuideSection>
<GuideSection
title="Success"
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} />
</GuideSection>
<GuideSection
title="Warning"
source={[
{
type: GuideSectionTypes.HTML,
code: warningHtml,
},
]}
>
<GuideText>Use this Icon to denote an irregularity or potential problems.</GuideText>
<GuideDemo html={warningHtml} />
</GuideSection>
<GuideSection
title="Error"
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} />
</GuideSection>
<GuideSection
title="Inactive"
source={[
{
type: GuideSectionTypes.HTML,
code: inactiveHtml,
},
]}
>
<GuideText>
Use this Icon to denote a disabled, inactive, off, offline, or asleep status.
</GuideText>
<GuideDemo html={inactiveHtml} />
</GuideSection>
<GuideSection
title="Spinner"
source={[
{
type: GuideSectionTypes.HTML,
code: spinnerHtml,
},
]}
>
<GuideText>You can use Icons to represent a loading and successfully-loaded state.</GuideText>
<GuideDemo html={spinnerHtml} js={spinnerJs} />
</GuideSection>
</GuidePage>
);

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