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

EUI 5.8.1 comes with a brand color refresh. Also removes lots of KUI (#27009)

Browse source 
EUI 5.7.0 had a color refresh which switched around our palette to better match branding guidelines. Hex colors are still hard coded in large parts of Kibana so most of the changes not in kbn/ui-framework are simple shifts to match that styling.
This commit is contained in:
dave.snider@gmail.com 2018-12-18 10:59:31 -08:00 • committed by GitHub
parent 70ca46b1be
commit a94fd11a3e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
264 changed files with 801 additions and 11867 deletions
Download patch file Download diff file Expand all files Collapse all files

4
kibana.d.ts vendored
View file

@ -18,8 +18,8 @@
*/
/**
* All exports from TS source files (where the implementation is actually done in TS).
*/
* All exports from TS source files (where the implementation is actually done in TS).
*/
export * from './target/types/type_exports';
/**
* All exports from TS ambient definitions (where types are added for JS source in a .d.ts file).

2
package.json
View file

@ -93,7 +93,7 @@
},
"dependencies": {
"@elastic/datemath": "5.0.2",
"@elastic/eui": "5.6.2",
"@elastic/eui": "5.8.1",
"@elastic/filesaver": "1.1.2",
"@elastic/good": "8.1.1-kibana2",
"@elastic/numeral": "2.3.2",

1856
packages/kbn-ui-framework/dist/ui_framework.css vendored
View file

File diff suppressed because it is too large Load diff

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

@ -19,72 +19,26 @@
import Slugify from '../string/slugify';
import AccessibilityExample
from '../../views/accessibility/accessibility_example';
import ActionItemExample
from '../../views/action_item/action_item_example';
import BadgeExample
from '../../views/badge/badge_example';
import BarExample
from '../../views/bar/bar_example';
import ButtonExample
from '../../views/button/button_example';
import CardExample
from '../../views/card/card_example';
import CodeEditor
from '../../views/code_editor/code_editor_example';
import CollapseButtonExample
from '../../views/collapse_button/collapse_button_example';
import ColorPickerExample
from '../../views/color_picker/color_picker_example';
import ColumnExample
from '../../views/column/column_example';
import ContextMenuExample
from '../../views/context_menu/context_menu_example';
import EventExample
from '../../views/event/event_example';
import EventsSandbox
from '../../views/event/events_sandbox';
import ExpressionExample
from '../../views/expression/expression_example';
import FlexExample
from '../../views/flex/flex_example';
import FormExample
from '../../views/form/form_example';
import FormLayoutExample
from '../../views/form_layout/form_layout_example';
import GalleryExample
from '../../views/gallery/gallery_example';
import HeaderBarExample
from '../../views/header_bar/header_bar_example';
import HeaderBarSandbox
from '../../views/header_bar/header_bar_sandbox';
import IconExample
from '../../views/icon/icon_example';
import InfoButtonExample
from '../../views/info_button/info_button_example';
import InfoPanelExample
from '../../views/info_panel/info_panel_example';
@ -100,15 +54,9 @@ import MenuExample
import MenuButtonExample
from '../../views/menu_button/menu_button_example';
import MicroButtonExample
from '../../views/micro_button/micro_button_example';
import ModalExample
from '../../views/modal/modal_example';
import NoticeSandbox
from '../../views/notice/notice_sandbox';
import PagerExample
from '../../views/pager/pager_example';
@ -150,17 +98,6 @@ import ViewSandbox
// Component route names should match the component name exactly.
const components = [{
name: 'Accessibility',
component: AccessibilityExample,
hasReact: true,
}, {
name: 'ActionItem',
component: ActionItemExample,
hasReact: true,
}, {
name: 'Badge',
component: BadgeExample,
}, {
name: 'Bar',
component: BarExample,
hasReact: true,
@ -168,48 +105,22 @@ const components = [{
name: 'Button',
component: ButtonExample,
hasReact: true,
}, {
name: 'Card',
component: CardExample,
hasReact: true,
}, {
name: 'CodeEditor',
component: CodeEditor,
hasReact: true,
}, {
name: 'CollapseButton',
component: CollapseButtonExample,
hasReact: true,
}, {
name: 'ColorPicker',
component: ColorPickerExample,
hasReact: true,
}, {
name: 'Column',
component: ColumnExample,
}, {
name: 'CollapseButton',
component: CollapseButtonExample,
hasReact: true,
}, {
name: 'ContextMenu',
component: ContextMenuExample,
hasReact: true,
}, {
name: 'EmptyTablePrompt',
component: EmptyTablePromptExample,
hasReact: true,
}, {
name: 'Event',
component: EventExample,
hasReact: true,
}, {
name: 'Expression',
component: ExpressionExample,
hasReact: true,
}, {
name: 'Flex',
component: FlexExample,
}, {
name: 'Form',
component: FormExample,
@ -217,21 +128,9 @@ const components = [{
name: 'FormLayout',
component: FormLayoutExample,
hasReact: true,
}, {
name: 'Gallery',
component: GalleryExample,
hasReact: true,
}, {
name: 'HeaderBar',
component: HeaderBarExample,
hasReact: true,
}, {
name: 'Icon',
component: IconExample,
}, {
name: 'InfoButton',
component: InfoButtonExample,
hasReact: true,
}, {
name: 'InfoPanel',
component: InfoPanelExample,
@ -249,9 +148,6 @@ const components = [{
}, {
name: 'MenuButton',
component: MenuButtonExample,
}, {
name: 'MicroButton',
component: MicroButtonExample,
}, {
name: 'Modal',
component: ModalExample,
@ -298,15 +194,6 @@ const components = [{
}];
const sandboxes = [{
name: 'Events',
component: EventsSandbox,
}, {
name: 'HeaderBar with Table',
component: HeaderBarSandbox,
}, {
name: 'Notice',
component: NoticeSandbox,
}, {
name: 'View',
component: ViewSandbox,
}];

96
packages/kbn-ui-framework/doc_site/src/views/accessibility/accessibility_example.js
View file

@ -1,96 +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 { renderToHtml } from '../../services';
import {
GuideCode,
GuideDemo,
GuideLink,
GuidePage,
GuideSection,
GuideSectionTypes,
GuideText,
} from '../../components';
import KeyboardAccessible from './keyboard_accessible';
import ScreenReaderOnly from './screen_reader';
const keyboardAccessibleSource = require('!!raw-loader!./keyboard_accessible');
const keyboardAccessibleHtml = renderToHtml(KeyboardAccessible);
const screenReaderOnlyHtml = renderToHtml(ScreenReaderOnly);
const screenReaderOnlySource = require('!!raw-loader!./screen_reader');
export default props => (
<GuidePage title={props.route.name}>
<GuideSection
title="KeyboardAccessible"
source={[{
type: GuideSectionTypes.JS,
code: keyboardAccessibleSource,
}, {
type: GuideSectionTypes.HTML,
code: keyboardAccessibleHtml,
}]}
>
<GuideText>
You can make interactive elements keyboard-accessible with this component. This is necessary
for non-button elements and <GuideCode>a</GuideCode> tags without
<GuideCode>href</GuideCode> attributes.
</GuideText>
<GuideDemo>
<KeyboardAccessible />
</GuideDemo>
</GuideSection>
<GuideSection
title="ScreenReaderOnly"
source={[{
type: GuideSectionTypes.JS,
code: screenReaderOnlySource,
}, {
type: GuideSectionTypes.HTML,
code: screenReaderOnlyHtml,
}]}
>
<GuideText>
This class can be useful to add accessibility to older designs that are
still in use, but it shouldn&rsquo;t be a permanent solution. See {(
<GuideLink
href="http://webaim.org/techniques/css/invisiblecontent/"
>
http://webaim.org/techniques/css/invisiblecontent/
</GuideLink>
)} for more information.
</GuideText>
<GuideText>
Use a screenreader to verify that there is a second paragraph in this example:
</GuideText>
<GuideDemo>
<ScreenReaderOnly />
</GuideDemo>
</GuideSection>
</GuidePage>
);

75
packages/kbn-ui-framework/doc_site/src/views/accessibility/keyboard_accessible.js
View file

@ -1,75 +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 {
KuiKeyboardAccessible,
} from '../../../../components';
// For custom components, we just need to make sure they delegate props to their rendered root
// element, e.g. onClick, tabIndex, and role.
const CustomComponent = ({
children,
...rest
}) => (
<div {...rest}>
{children}
</div>
);
export default () => (
<div>
<KuiKeyboardAccessible>
<div onClick={() => window.alert('Div clicked')}>
Click this div
</div>
</KuiKeyboardAccessible>
<KuiKeyboardAccessible>
<a
className="kuiLink"
onClick={() => window.alert('Anchor tag clicked')}
>
Click this anchor tag
</a>
</KuiKeyboardAccessible>
<KuiKeyboardAccessible>
<CustomComponent onClick={() => window.alert('Custom component clicked')}>
Click this custom component
</CustomComponent>
</KuiKeyboardAccessible>
<KuiKeyboardAccessible>
<div onClick={() => window.alert('Outer KuiKeyboardAccessible clicked')}>
This KuiKeyboardAccessible contains another KuiKeyboardAccessible&nbsp;
<KuiKeyboardAccessible>
<a
className="kuiLink"
onClick={() => window.alert('Inner KuiKeyboardAccessible clicked')}
>
Clicking this inner one should call both onClick handlers
</a>
</KuiKeyboardAccessible>
</div>
</KuiKeyboardAccessible>
</div>
);

42
packages/kbn-ui-framework/doc_site/src/views/accessibility/screen_reader.js
View file

@ -1,42 +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 {
KuiScreenReaderOnly,
} from '../../../../components';
export default () => (
<div>
<p>
This is the first paragraph. It is visible to all.
</p>
<KuiScreenReaderOnly>
<p>
This is the second paragraph. It is hidden for sighted users but visible to screen readers.
</p>
</KuiScreenReaderOnly>
<p>
This is the third paragraph. It is visible to all.
</p>
</div>
);

41
packages/kbn-ui-framework/doc_site/src/views/action_item/action_item.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 {
KuiActionItem
} from '../../../../components';
export default () => (
<KuiActionItem>
<p className="kuiText">Item</p>
<div className="kuiMenuButtonGroup">
<button className="kuiMenuButton kuiMenuButton--basic">
Acknowledge
</button>
<button className="kuiMenuButton kuiMenuButton--basic">
Silence
</button>
<button className="kuiMenuButton kuiMenuButton--danger">
Delete
</button>
</div>
</KuiActionItem>
);

80
packages/kbn-ui-framework/doc_site/src/views/action_item/action_item_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.
*/
import React from 'react';
import { renderToHtml } from '../../services';
import {
GuideDemo,
GuidePage,
GuideSection,
GuideSectionTypes,
GuideText,
} from '../../components';
import ActionItem from './action_item';
const actionItemSource = require('!!raw-loader!./action_item');
const actionItemHtml = renderToHtml(ActionItem);
import ActionItemInMenu from './action_items_in_menu';
const actionItemInMenuSource = require('!!raw-loader!./action_items_in_menu');
const actionItemInMenuHtml = renderToHtml(ActionItemInMenu);
export default props => (
<GuidePage title={props.route.name}>
<GuideSection
title="ActionItem"
source={[{
type: GuideSectionTypes.JS,
code: actionItemSource,
}, {
type: GuideSectionTypes.HTML,
code: actionItemHtml,
}]}
>
<GuideText>
Events can represent updates, logs, notifications, and status changes.
</GuideText>
<GuideDemo>
<ActionItem />
</GuideDemo>
</GuideSection>
<GuideSection
title="ActionItems in Menu"
source={[{
type: GuideSectionTypes.JS,
code: actionItemInMenuSource,
}, {
type: GuideSectionTypes.HTML,
code: actionItemInMenuHtml,
}]}
>
<GuideText>
You&rsquo;ll typically want to present them within a Menu.
</GuideText>
<GuideDemo>
<ActionItemInMenu />
</GuideDemo>
</GuideSection>
</GuidePage>
);

81
packages/kbn-ui-framework/doc_site/src/views/action_item/action_items_in_menu.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 from 'react';
import {
KuiActionItem,
KuiMenu,
KuiMenuItem
} from '../../../../components';
export default () => (
<KuiMenu contained>
<KuiMenuItem>
<KuiActionItem>
<p className="kuiText">Item A</p>
<div className="kuiMenuButtonGroup">
<button className="kuiMenuButton kuiMenuButton--basic">
Acknowledge
</button>
<button className="kuiMenuButton kuiMenuButton--basic">
Silence
</button>
<button className="kuiMenuButton kuiMenuButton--danger">
Delete
</button>
</div>
</KuiActionItem>
</KuiMenuItem>
<KuiMenuItem>
<KuiActionItem>
<p className="kuiText">Item B</p>
<div className="kuiMenuButtonGroup">
<button className="kuiMenuButton kuiMenuButton--basic">
Acknowledge
</button>
<button className="kuiMenuButton kuiMenuButton--basic">
Silence
</button>
<button className="kuiMenuButton kuiMenuButton--danger">
Delete
</button>
</div>
</KuiActionItem>
</KuiMenuItem>
<KuiMenuItem>
<KuiActionItem>
<p className="kuiText">Item C</p>
<div className="kuiMenuButtonGroup">
<button className="kuiMenuButton kuiMenuButton--basic">
Acknowledge
</button>
<button className="kuiMenuButton kuiMenuButton--basic">
Silence
</button>
<button className="kuiMenuButton kuiMenuButton--danger">
Delete
</button>
</div>
</KuiActionItem>
</KuiMenuItem>
</KuiMenu>
);

50
packages/kbn-ui-framework/doc_site/src/views/badge/badge_example.js
View file

@ -1,50 +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 {
GuideDemo,
GuidePage,
GuideSection,
GuideSectionTypes,
GuideText,
} from '../../components';
const defaultHtml = require('./default_badge.html');
export default props => (
<GuidePage title={props.route.name}>
<GuideSection
title="Default Badge"
source={[{
type: GuideSectionTypes.HTML,
code: defaultHtml,
}]}
>
<GuideText>
Use the Default Badge to signify a neutral status of a document or object.
</GuideText>
<GuideDemo
html={defaultHtml}
/>
</GuideSection>
</GuidePage>
);

9
packages/kbn-ui-framework/doc_site/src/views/badge/default_badge.html
View file

@ -1,9 +0,0 @@
<div class="kuiBadge kuiBadge--default">
<span class="kuiIcon fa-lock"></span>
Reserved
</div>
<div class="kuiBadge kuiBadge--default">
<span class="kuiIcon fa-warning"></span>
Disabled
</div>

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

@ -1,54 +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 {
KuiCard,
KuiCardDescription,
KuiCardDescriptionTitle,
KuiCardDescriptionText,
KuiCardFooter,
KuiLinkButton
} from '../../../../components';
export default () => {
return (
<KuiCard>
<KuiCardDescription>
<KuiCardDescriptionTitle>
Get a banana
</KuiCardDescriptionTitle>
<KuiCardDescriptionText>
Bananas are yellow, fit easily in the hand, and have a lot of potassium or something.
</KuiCardDescriptionText>
</KuiCardDescription>
<KuiCardFooter>
<KuiLinkButton
buttonType="basic"
href="#"
>
Banana!
</KuiLinkButton>
</KuiCardFooter>
</KuiCard>
);
};

77
packages/kbn-ui-framework/doc_site/src/views/card/card_example.js
View file

@ -1,77 +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 { renderToHtml } from '../../services';
import {
GuideDemo,
GuidePage,
GuideSection,
GuideSectionTypes,
GuideText,
} from '../../components';
import Card from './card';
const cardSource = require('!!raw-loader!./card');
const cardHtml = renderToHtml(Card);
import CardGroup from './card_group';
const cardGroupSource = require('!!raw-loader!./card_group');
const cardGroupHtml = renderToHtml(CardGroup);
export default props => (
<GuidePage title={props.route.name}>
<GuideSection
title="Card"
source={[{
type: GuideSectionTypes.JS,
code: cardSource,
}, {
type: GuideSectionTypes.HTML,
code: cardHtml,
}]}
>
<GuideText>
Cards expand to fill their container. To restrict a card&rsquo;s width, define the width of its
container.
</GuideText>
<GuideDemo>
<Card />
</GuideDemo>
</GuideSection>
<GuideSection
title="CardGroup"
source={[{
type: GuideSectionTypes.JS,
code: cardGroupSource,
}, {
type: GuideSectionTypes.HTML,
code: cardGroupHtml,
}]}
>
<GuideDemo>
<CardGroup />
</GuideDemo>
</GuideSection>
</GuidePage>
);

180
packages/kbn-ui-framework/doc_site/src/views/card/card_group.js
View file

@ -1,180 +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 {
KuiCardGroup,
KuiCard,
KuiCardDescription,
KuiCardDescriptionTitle,
KuiCardDescriptionText,
KuiCardFooter,
KuiLinkButton
} from '../../../../components';
export default () => {
/**
* These styles are just for demonstration purposes. It is recommended to use
* properly named classes to set the width in production code.
*/
const cardStyle = {
width: '400px'
};
return (
<div>
<KuiCardGroup>
<KuiCard style={cardStyle}>
<KuiCardDescription>
<KuiCardDescriptionTitle>
Get a banana
</KuiCardDescriptionTitle>
<KuiCardDescriptionText>
Bananas are yellow, fit easily in the hand, and have a lot of potassium or something.
</KuiCardDescriptionText>
</KuiCardDescription>
<KuiCardFooter>
<KuiLinkButton
buttonType="basic"
href="#"
>
Banana!
</KuiLinkButton>
</KuiCardFooter>
</KuiCard>
<KuiCard style={cardStyle}>
<KuiCardDescription>
<KuiCardDescriptionTitle>
Get a pteradactyl
</KuiCardDescriptionTitle>
<KuiCardDescriptionText>
Pteradactyls can fly, like to squawk all the time, and are difficult to spell correctly.
</KuiCardDescriptionText>
</KuiCardDescription>
<KuiCardFooter>
<KuiLinkButton
buttonType="primary"
href="https://www.elastic.co/subscriptions/xpack"
target="_blank"
>
Pteradactyl!
</KuiLinkButton>
</KuiCardFooter>
</KuiCard>
<KuiCard style={cardStyle}>
<KuiCardDescription>
<KuiCardDescriptionTitle>
Get a magnolia tree
</KuiCardDescriptionTitle>
<KuiCardDescriptionText>
Magnolia trees have broad, waxy leaves which they shed year-round.
</KuiCardDescriptionText>
</KuiCardDescription>
<KuiCardFooter>
<KuiLinkButton
buttonType="basic"
href="https://www.elastic.co/subscriptions/xpack"
target="_blank"
>
Magnolia!
</KuiLinkButton>
</KuiCardFooter>
</KuiCard>
</KuiCardGroup>
<br className="guideBreak"/>
<KuiCardGroup isUnited>
<KuiCard>
<KuiCardDescription>
<KuiCardDescriptionTitle>
Get a banana
</KuiCardDescriptionTitle>
<KuiCardDescriptionText>
Bananas are yellow, fit easily in the hand, and have a lot of potassium or something.
</KuiCardDescriptionText>
</KuiCardDescription>
<KuiCardFooter>
<KuiLinkButton
buttonType="basic"
href="#"
>
Banana!
</KuiLinkButton>
</KuiCardFooter>
</KuiCard>
<KuiCard>
<KuiCardDescription>
<KuiCardDescriptionTitle>
Get a pteradactyl
</KuiCardDescriptionTitle>
<KuiCardDescriptionText>
Pteradactyls can fly, like to squawk all the time, and are difficult to spell correctly.
</KuiCardDescriptionText>
</KuiCardDescription>
<KuiCardFooter>
<KuiLinkButton
buttonType="primary"
href="https://www.elastic.co/subscriptions/xpack"
target="_blank"
>
Pteradactyl!
</KuiLinkButton>
</KuiCardFooter>
</KuiCard>
<KuiCard style={cardStyle}>
<KuiCardDescription>
<KuiCardDescriptionTitle>
Get a magnolia tree
</KuiCardDescriptionTitle>
<KuiCardDescriptionText>
Magnolia trees have broad, waxy leaves which they shed year-round.
</KuiCardDescriptionText>
</KuiCardDescription>
<KuiCardFooter>
<KuiLinkButton
buttonType="basic"
href="https://www.elastic.co/subscriptions/xpack"
target="_blank"
>
Magnolia!
</KuiLinkButton>
</KuiCardFooter>
</KuiCard>
</KuiCardGroup>
</div>
);
};

51
packages/kbn-ui-framework/doc_site/src/views/code_editor/code_editor.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 React, { Component } from 'react';
import 'brace/mode/less';
import 'brace/theme/github';
import {
KuiCodeEditor
} from '../../../../components';
export default class extends Component {
state = {
value: ''
};
onChange = (value) => {
this.setState({ value });
};
render() {
return (
<KuiCodeEditor
mode="less"
theme="github"
width="100%"
value={this.state.value}
onChange={this.onChange}
setOptions={{ fontSize: '14px' }}
onBlur={() => console.log('KuiCodeEditor.onBlur() called')}
/>
);
}
}

74
packages/kbn-ui-framework/doc_site/src/views/code_editor/code_editor_example.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 from 'react';
import {
GuideDemo,
GuidePage,
GuideSection,
GuideSectionTypes,
GuideText,
} from '../../components';
import CodeEditor from './code_editor';
const codeEditorSource = require('!!raw-loader!./code_editor');
import ReadOnly from './read_only';
const readOnlySource = require('!!raw-loader!./read_only');
export default props => (
<GuidePage title={props.route.name}>
<GuideSection
title="Code Editor"
source={[{
type: GuideSectionTypes.JS,
code: codeEditorSource,
}]}
>
<GuideText>
<p>
The KuiCodeEditor component is a wrapper around <code>react-ace</code> (which
itself wraps the ACE code editor), that adds an accessible keyboard mode
to it. You should always use this component instead of <code>AceReact</code>.
</p>
<p>
All parameters, that you specify are passed down to the
underlying <code>AceReact</code> component.
</p>
</GuideText>
<GuideDemo>
<CodeEditor />
</GuideDemo>
</GuideSection>
<GuideSection
title="Read-only"
source={[{
type: GuideSectionTypes.JS,
code: readOnlySource,
}]}
>
<GuideDemo>
<ReadOnly />
</GuideDemo>
</GuideSection>
</GuidePage>
);

46
packages/kbn-ui-framework/doc_site/src/views/code_editor/read_only.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, { Component } from 'react';
import 'brace/mode/less';
import 'brace/theme/github';
import {
KuiCodeEditor
} from '../../../../components';
export default class extends Component {
state = {
value: '<p>This code is read only</p>'
};
render() {
return (
<KuiCodeEditor
mode="less"
theme="github"
width="100%"
value={this.state.value}
setOptions={{ fontSize: '14px' }}
isReadOnly
/>
);
}
}

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

@ -1,39 +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 { KuiColorPicker } from '../../../../components';
export class ColorPicker extends React.Component {
constructor(props) {
super(props);
this.state = {
color: '#ffffff'
};
}
handleChange = (value) => {
this.setState({ color: value });
};
render() {
return <KuiColorPicker onChange={this.handleChange} color={this.state.color}/>;
}
}

73
packages/kbn-ui-framework/doc_site/src/views/color_picker/color_picker_clear.js
View file

@ -1,73 +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 {
KuiColorPicker,
KuiFieldGroup,
KuiFieldGroupSection,
KuiKeyboardAccessible,
} from '../../../../components';
export class ColorPickerLabelAndClear extends React.Component {
constructor(props) {
super(props);
this.state = {
color: null
};
}
handleChange = (value) => {
this.setState({ color: value });
};
resetColor = () => {
this.setState({ color: null });
};
render() {
return (
<KuiFieldGroup>
<KuiFieldGroupSection>
<label className="kuiLabel">
Background color
</label>
</KuiFieldGroupSection>
<KuiFieldGroupSection>
<KuiColorPicker
onChange={this.handleChange}
color={this.state.color}
/>
</KuiFieldGroupSection>
<KuiFieldGroupSection>
<p className="kuiText">
<KuiKeyboardAccessible>
<a className="kuiLink" onClick={this.resetColor}>
Reset
</a>
</KuiKeyboardAccessible>
</p>
</KuiFieldGroupSection>
</KuiFieldGroup>
);
}
}

88
packages/kbn-ui-framework/doc_site/src/views/color_picker/color_picker_example.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.
*/
import React from 'react';
import {
GuideDemo,
GuidePage,
GuideSection,
GuideSectionTypes,
} from '../../components';
import { renderToHtml } from '../../services';
import { ColorPicker } from './color_picker';
const colorPickerSource = require('!!raw-loader!./color_picker');
const colorPickerHtml = renderToHtml(ColorPicker);
import { ColorPickerLabelAndClear } from './color_picker_clear';
const colorPickerClearSource = require('!!raw-loader!./color_picker_clear');
const colorPickerClearHtml = renderToHtml(ColorPickerLabelAndClear);
import { ColorPickerNoColorLabel } from './color_picker_no_color_label';
const colorPickerNoColorLabelSource = require('!!raw-loader!./color_picker_no_color_label');
const colorPickerNoColorLabelHtml = renderToHtml(ColorPickerNoColorLabel);
export default props => (
<GuidePage title={props.route.name}>
<GuideSection
title="Color Picker"
source={[{
type: GuideSectionTypes.JS,
code: colorPickerSource,
}, {
type: GuideSectionTypes.HTML,
code: colorPickerHtml,
}]}
>
<GuideDemo>
<ColorPicker />
</GuideDemo>
</GuideSection>
<GuideSection
title="Color Picker with label and reset link"
source={[{
type: GuideSectionTypes.JS,
code: colorPickerClearSource,
}, {
type: GuideSectionTypes.HTML,
code: colorPickerClearHtml,
}]}
>
<GuideDemo>
<ColorPickerLabelAndClear />
</GuideDemo>
</GuideSection>
<GuideSection
title="Color Picker without a color label"
source={[{
type: GuideSectionTypes.JS,
code: colorPickerNoColorLabelSource,
}, {
type: GuideSectionTypes.HTML,
code: colorPickerNoColorLabelHtml,
}]}
>
<GuideDemo>
<ColorPickerNoColorLabel />
</GuideDemo>
</GuideSection>
</GuidePage>
);

59
packages/kbn-ui-framework/doc_site/src/views/color_picker/color_picker_no_color_label.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 from 'react';
import {
KuiColorPicker,
KuiFieldGroup,
KuiFieldGroupSection,
} from '../../../../components';
export class ColorPickerNoColorLabel extends React.Component {
constructor(props) {
super(props);
this.state = {
color: '#00FFFF'
};
}
handleChange = (value) => {
this.setState({ color: value });
};
render() {
return (
<KuiFieldGroup>
<KuiFieldGroupSection>
<label className="kuiLabel">
Foreground color
</label>
</KuiFieldGroupSection>
<KuiFieldGroupSection>
<KuiColorPicker
onChange={this.handleChange}
color={this.state.color}
showColorLabel={false}
/>
</KuiFieldGroupSection>
</KuiFieldGroup>
);
}
}

56
packages/kbn-ui-framework/doc_site/src/views/column/column_example.js
View file

@ -1,56 +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';
const columnsHtml = require('./columns.html');
export default props => (
<GuidePage title={props.route.name}>
<GuideSection
title="Columns"
source={[{
type: GuideSectionTypes.HTML,
code: columnsHtml,
}]}
>
<GuideText>
<strong>Note:</strong> Don&rsquo;t use this. It&rsquo;s subject to change as we evolve our grid system.
</GuideText>
<GuideText>
This is a substitute grid system. It uses <GuideCode>display: inline-block</GuideCode>, so
you need to structure your markup to leave no whitespace between each column.
</GuideText>
<GuideDemo
html={columnsHtml}
/>
</GuideSection>
</GuidePage>
);

47
packages/kbn-ui-framework/doc_site/src/views/column/columns.html
View file

@ -1,47 +0,0 @@
<div>
<div class="kuiColumn kuiColumn--1">
<div style="background-color: lightgray; height: 20px"></div>
</div><div class="kuiColumn kuiColumn--11">
<div style="background-color: lightgray; height: 20px"></div>
</div>
</div>
<div>
<div class="kuiColumn kuiColumn--2">
<div style="background-color: lightgray; height: 20px"></div>
</div><div class="kuiColumn kuiColumn--10">
<div style="background-color: lightgray; height: 20px"></div>
</div>
</div>
<div>
<div class="kuiColumn kuiColumn--3">
<div style="background-color: lightgray; height: 20px"></div>
</div><div class="kuiColumn kuiColumn--9">
<div style="background-color: lightgray; height: 20px"></div>
</div>
</div>
<div>
<div class="kuiColumn kuiColumn--4">
<div style="background-color: lightgray; height: 20px"></div>
</div><div class="kuiColumn kuiColumn--8">
<div style="background-color: lightgray; height: 20px"></div>
</div>
</div>
<div>
<div class="kuiColumn kuiColumn--5">
<div style="background-color: lightgray; height: 20px"></div>
</div><div class="kuiColumn kuiColumn--7">
<div style="background-color: lightgray; height: 20px"></div>
</div>
</div>
<div>
<div class="kuiColumn kuiColumn--6">
<div style="background-color: lightgray; height: 20px"></div>
</div><div class="kuiColumn kuiColumn--6">
<div style="background-color: lightgray; height: 20px"></div>
</div>
</div>

174
packages/kbn-ui-framework/doc_site/src/views/context_menu/context_menu.js
View file

@ -1,174 +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 {
KuiButton,
KuiContextMenu,
KuiFieldGroup,
KuiFieldGroupSection,
KuiPopover,
} from '../../../../components';
function flattenPanelTree(tree, array = []) {
array.push(tree);
if (tree.items) {
tree.items.forEach(item => {
if (item.panel) {
flattenPanelTree(item.panel, array);
item.panel = item.panel.id;
}
});
}
return array;
}
export default class extends Component {
constructor(props) {
super(props);
this.state = {
isPopoverOpen: false,
};
const panelTree = {
id: 0,
title: 'View options',
items: [{
name: 'Show fullscreen',
icon: (
<span className="kuiIcon fa-search" />
),
onClick: () => { this.closePopover(); window.alert('Show fullscreen'); },
}, {
name: 'Share this dashboard',
icon: <span className="kuiIcon fa-user" />,
panel: {
id: 1,
title: 'Share this dashboard',
items: [{
name: 'PDF reports',
icon: <span className="kuiIcon fa-user" />,
onClick: () => { this.closePopover(); window.alert('PDF reports'); },
}, {
name: 'CSV reports',
icon: <span className="kuiIcon fa-user" />,
onClick: () => { this.closePopover(); window.alert('CSV reports'); },
}, {
name: 'Embed code',
icon: <span className="kuiIcon fa-user" />,
panel: {
id: 2,
title: 'Embed code',
content: (
<div style={{ padding: 16 }}>
<div className="kuiVerticalRhythmSmall">
<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>
</div>
<div className="kuiVerticalRhythmSmall">
<KuiButton buttonType="primary">Save</KuiButton>
</div>
</div>
),
},
}, {
name: 'Permalinks',
icon: <span className="kuiIcon fa-user" />,
onClick: () => { this.closePopover(); window.alert('Permalinks'); },
}],
},
}, {
name: 'Edit / add panels',
icon: <span className="kuiIcon fa-user" />,
onClick: () => { this.closePopover(); window.alert('Edit / add panels'); },
}, {
name: 'Display options',
icon: <span className="kuiIcon fa-user" />,
onClick: () => { this.closePopover(); window.alert('Display options'); },
}, {
name: 'Disabled option',
icon: <span className="kuiIcon fa-user" />,
disabled: true,
onClick: () => { this.closePopover(); window.alert('Disabled option'); },
}],
};
this.panels = flattenPanelTree(panelTree);
}
onButtonClick = () => {
this.setState(prevState => ({
isPopoverOpen: !prevState.isPopoverOpen,
}));
};
closePopover = () => {
this.setState({
isPopoverOpen: false,
});
};
render() {
const button = (
<KuiButton buttonType="basic" onClick={this.onButtonClick}>
Click me to load a context menu
</KuiButton>
);
return (
<KuiPopover
button={button}
isOpen={this.state.isPopoverOpen}
closePopover={this.closePopover}
panelPaddingSize="none"
withTitle
anchorPosition="left"
>
<KuiContextMenu
initialPanelId={0}
panels={this.panels}
/>
</KuiPopover>
);
}
}

88
packages/kbn-ui-framework/doc_site/src/views/context_menu/context_menu_example.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.
*/
import React from 'react';
import { renderToHtml } from '../../services';
import {
GuideCode,
GuideDemo,
GuidePage,
GuideSection,
GuideSectionTypes,
GuideText,
} from '../../components';
import ContextMenu from './context_menu';
const contextMenuSource = require('!!raw-loader!./context_menu');
const contextMenuHtml = renderToHtml(ContextMenu);
import SinglePanel from './single_panel';
const singlePanelSource = require('!!raw-loader!./single_panel');
const singlePanelHtml = renderToHtml(SinglePanel);
export default props => (
<GuidePage title={props.route.name}>
<GuideSection
title="Context Menu"
source={[{
type: GuideSectionTypes.JS,
code: contextMenuSource,
}, {
type: GuideSectionTypes.HTML,
code: contextMenuHtml,
}]}
>
<GuideText>
<GuideCode>KuiContextMenu</GuideCode> is a nested menu system useful
for navigating complicated trees. It lives within a <GuideCode>KuiPopover</GuideCode>
which itself can be wrapped around any component (like a button in this example).
</GuideText>
<GuideDemo style={{ height: 280 }}>
<ContextMenu />
</GuideDemo>
<GuideDemo isDarkTheme={true} style={{ height: 280 }}>
<ContextMenu />
</GuideDemo>
</GuideSection>
<GuideSection
title="Single panel"
source={[{
type: GuideSectionTypes.JS,
code: singlePanelSource,
}, {
type: GuideSectionTypes.HTML,
code: singlePanelHtml,
}]}
>
<GuideText>
You can put a single panel inside of the menu using the
<GuideCode>KuiContextMenuPanel</GuideCode> component directly.
</GuideText>
<GuideDemo style={{ height: 280 }}>
<SinglePanel />
</GuideDemo>
</GuideSection>
</GuidePage>
);

103
packages/kbn-ui-framework/doc_site/src/views/context_menu/single_panel.js
View file

@ -1,103 +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 {
KuiButton,
KuiContextMenuPanel,
KuiContextMenuItem,
KuiPopover,
} from '../../../../components';
export default class extends Component {
constructor(props) {
super(props);
this.state = {
isPopoverOpen: false,
};
}
onButtonClick = () => {
this.setState(prevState => ({
isPopoverOpen: !prevState.isPopoverOpen,
}));
};
closePopover = () => {
this.setState({
isPopoverOpen: false,
});
};
render() {
const button = (
<KuiButton buttonType="basic" onClick={this.onButtonClick}>
Click me to load a context menu
</KuiButton>
);
const items = [
(
<KuiContextMenuItem
key="A"
icon={<span className="kuiIcon fa-user" />}
onClick={() => { this.closePopover(); window.alert('A'); }}
>
Option A
</KuiContextMenuItem>
), (
<KuiContextMenuItem
key="B"
icon={<span className="kuiIcon fa-user" />}
onClick={() => { this.closePopover(); window.alert('B'); }}
>
Option B
</KuiContextMenuItem>
), (
<KuiContextMenuItem
key="C"
icon={<span className="kuiIcon fa-user" />}
onClick={() => { this.closePopover(); window.alert('C'); }}
>
Option C
</KuiContextMenuItem>
)
];
return (
<KuiPopover
button={button}
isOpen={this.state.isPopoverOpen}
closePopover={this.closePopover}
panelPaddingSize="none"
withTitle
anchorPosition="left"
>
<KuiContextMenuPanel
title="Options"
items={items}
/>
</KuiPopover>
);
}
}

46
packages/kbn-ui-framework/doc_site/src/views/event/event.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 {
KuiEvent,
KuiEventSymbol,
KuiEventBody,
KuiEventBodyMessage,
KuiEventBodyMetadata,
} from '../../../../components';
export default () => (
<KuiEvent>
<KuiEventSymbol>
<span className="kuiIcon kuiIcon--error fa-warning" aria-label="Error" role="img"/>
</KuiEventSymbol>
<KuiEventBody>
<KuiEventBodyMessage>
minimum_master_nodes setting of 1 is less than quorum of 2
</KuiEventBodyMessage>
<KuiEventBodyMetadata>
August 4, 2021
</KuiEventBodyMetadata>
</KuiEventBody>
</KuiEvent>
);

79
packages/kbn-ui-framework/doc_site/src/views/event/event_example.js
View file

@ -1,79 +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 { renderToHtml } from '../../services';
import {
GuideDemo,
GuidePage,
GuideSection,
GuideSectionTypes,
GuideText,
} from '../../components';
import Event from './event';
const eventSource = require('!!raw-loader!./event');
const eventHtml = renderToHtml(Event);
import EventMenu from './event_menu';
const eventMenuSource = require('!!raw-loader!./event_menu');
const eventMenuHtml = renderToHtml(EventMenu);
export default props => (
<GuidePage title={props.route.name}>
<GuideSection
title="Event"
source={[{
type: GuideSectionTypes.JS,
code: eventSource,
}, {
type: GuideSectionTypes.HTML,
code: eventHtml,
}]}
>
<GuideText>
Events can represent updates, logs, notifications, and status changes.
</GuideText>
<GuideDemo>
<Event />
</GuideDemo>
</GuideSection>
<GuideSection
title="Event Menu"
source={[{
type: GuideSectionTypes.JS,
code: eventMenuSource,
}, {
type: GuideSectionTypes.HTML,
code: eventMenuHtml,
}]}
>
<GuideText>
You&rsquo;ll typically want to present them within a Menu.
</GuideText>
<GuideDemo>
<EventMenu />
</GuideDemo>
</GuideSection>
</GuidePage>
);

88
packages/kbn-ui-framework/doc_site/src/views/event/event_menu.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.
*/
import React from 'react';
import {
KuiEvent,
KuiEventSymbol,
KuiEventBody,
KuiEventBodyMessage,
KuiEventBodyMetadata,
KuiMenu,
KuiMenuItem,
} from '../../../../components';
export default () => (
<KuiMenu>
<KuiMenuItem>
<KuiEvent>
<KuiEventSymbol>
<span className="kuiIcon kuiIcon--error fa-warning" aria-label="Error" role="img"/>
</KuiEventSymbol>
<KuiEventBody>
<KuiEventBodyMessage>
minimum_master_nodes setting of 1 is less than quorum of 2
</KuiEventBodyMessage>
<KuiEventBodyMetadata>
August 4, 2021 02:23:28
</KuiEventBodyMetadata>
</KuiEventBody>
</KuiEvent>
</KuiMenuItem>
<KuiMenuItem>
<KuiEvent>
<KuiEventSymbol>
<span className="kuiIcon kuiIcon--error fa-warning" aria-label="Error" role="img"/>
</KuiEventSymbol>
<KuiEventBody>
<KuiEventBodyMessage>
Cluster state is red because 17 primary shards are unassigned
</KuiEventBodyMessage>
<KuiEventBodyMetadata>
August 3, 2021 12:00:54
</KuiEventBodyMetadata>
</KuiEventBody>
</KuiEvent>
</KuiMenuItem>
<KuiMenuItem>
<KuiEvent>
<KuiEventSymbol>
<span className="kuiIcon kuiIcon--warning fa-bolt" aria-label="Warning" role="img"/>
</KuiEventSymbol>
<KuiEventBody>
<KuiEventBodyMessage>
Elasticsearch node version mismatches detected: 5.1.0
</KuiEventBodyMessage>
<KuiEventBodyMetadata>
July 27, 2021 11:20:09
</KuiEventBodyMetadata>
</KuiEventBody>
</KuiEvent>
</KuiMenuItem>
</KuiMenu>
);

52
packages/kbn-ui-framework/doc_site/src/views/event/events_sandbox.js
View file

@ -1,52 +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 { renderToHtml } from '../../services';
import {
GuideDemo,
GuideSandbox,
GuideSandboxCodeToggle,
GuideSectionTypes,
} from '../../components';
import EventsSandboxContent from './events_sandbox_content';
const eventsSandboxContentSource = require('!!raw-loader!./events_sandbox_content');
const eventsSandboxContentHtml = renderToHtml(EventsSandboxContent);
export default props => (
<GuideSandbox>
<GuideDemo
isFullScreen={true}
html={eventsSandboxContentHtml}
/>
<GuideSandboxCodeToggle
source={[{
type: GuideSectionTypes.JS,
code: eventsSandboxContentSource,
}, {
type: GuideSectionTypes.HTML,
code: eventsSandboxContentHtml,
}]}
title={props.route.name}
/>
</GuideSandbox>
);

112
packages/kbn-ui-framework/doc_site/src/views/event/events_sandbox_content.js
View file

@ -1,112 +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 {
KuiEvent,
KuiEventSymbol,
KuiEventBody,
KuiEventBodyMessage,
KuiEventBodyMetadata,
KuiMenu,
KuiMenuItem,
KuiHeaderBar,
KuiHeaderBarSection
} from '../../../../components';
export default () => (
<div className="kuiView">
{/* Constrained width, centered content */}
<div className="kuiViewContent kuiViewContent--constrainedWidth">
<div className="kuiViewContentItem">
<KuiHeaderBar>
<KuiHeaderBarSection>
<h2 className="kuiSubTitle">
Cluster of Almonds
</h2>
</KuiHeaderBarSection>
<KuiHeaderBarSection>
<div className="kuiText">
<a className="kuiLink" href="#">View all 21 almonds</a>
</div>
</KuiHeaderBarSection>
</KuiHeaderBar>
<KuiMenu className="kuiVerticalRhythm">
<KuiMenuItem>
<KuiEvent>
<KuiEventSymbol>
<span className="kuiIcon kuiIcon--info fa-info" aria-label="Info" role="img"/>
</KuiEventSymbol>
<KuiEventBody>
<KuiEventBodyMessage>
margarine_masher_toad sitting of 1 is less than opossum of 2
</KuiEventBodyMessage>
<KuiEventBodyMetadata>
August 4, 2021 02:23:28
</KuiEventBodyMetadata>
</KuiEventBody>
</KuiEvent>
</KuiMenuItem>
<KuiMenuItem>
<KuiEvent>
<KuiEventSymbol>
<span className="kuiIcon kuiIcon--error fa-warning" aria-label="Error" role="img"/>
</KuiEventSymbol>
<KuiEventBody>
<KuiEventBodyMessage>
Cluster stork is red because 17 pillory stars are unenamored
</KuiEventBodyMessage>
<KuiEventBodyMetadata>
August 3, 2021 12:00:54
</KuiEventBodyMetadata>
</KuiEventBody>
</KuiEvent>
</KuiMenuItem>
<KuiMenuItem>
<KuiEvent>
<KuiEventSymbol>
<span className="kuiIcon kuiIcon--warning fa-bolt" aria-label="Warning" role="img"/>
</KuiEventSymbol>
<KuiEventBody>
<KuiEventBodyMessage>
Elastic band nematode vision marshmallow directed: 50,100
</KuiEventBodyMessage>
<KuiEventBodyMetadata>
July 27, 2021 11:20:09
</KuiEventBodyMetadata>
</KuiEventBody>
</KuiEvent>
</KuiMenuItem>
</KuiMenu>
</div>
</div>
</div>
);

263
packages/kbn-ui-framework/doc_site/src/views/flex/flex_example.js
View file

@ -1,263 +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 { renderToHtml } from '../../services';
import {
GuideCode,
GuideDemo,
GuidePage,
GuideSection,
GuideSectionTypes,
GuideText,
} from '../../components';
import FlexGroup from './flex_group';
const flexGroupSource = require('!!raw-loader!./flex_group');
const flexGroupHtml = renderToHtml(FlexGroup);
import FlexGroupWrap from './flex_group_wrap';
const flexGroupWrapSource = require('!!raw-loader!./flex_group_wrap');
const flexGroupWrapHtml = renderToHtml(FlexGroupWrap);
import FlexItems from './flex_items';
const flexItemsSource = require('!!raw-loader!./flex_items');
const flexItemsHtml = renderToHtml(FlexItems);
import FlexGutter from './flex_gutter';
const flexGutterSource = require('!!raw-loader!./flex_gutter');
const flexGutterHtml = renderToHtml(FlexGutter);
import FlexGrowZero from './flex_grow_zero';
const flexGrowZeroSource = require('!!raw-loader!./flex_grow_zero');
const flexGrowZeroHtml = renderToHtml(FlexGrowZero);
import FlexGrowNumeric from './flex_grow_numeric';
const flexGrowNumericSource = require('!!raw-loader!./flex_grow_numeric');
const flexGrowNumericHtml = renderToHtml(FlexGrowNumeric);
import FlexJustify from './flex_justify';
const flexJustifySource = require('!!raw-loader!./flex_justify');
const flexJustifyHtml = renderToHtml(FlexJustify);
import FlexGrid from './flex_grid';
const flexGridSource = require('!!raw-loader!./flex_grid');
const flexGridHtml = renderToHtml(FlexGrid);
import FlexGridColumns from './flex_grid_columns';
const flexGridColumnsSource = require('!!raw-loader!./flex_grid_columns');
const flexGridColumnsHtml = renderToHtml(FlexGridColumns);
import FlexNest from './flex_nest';
const flexNestSource = require('!!raw-loader!./flex_nest');
const flexNestHtml = renderToHtml(FlexNest);
export default props => (
<GuidePage title={props.route.name}>
<GuideSection
title="FlexGroup is for a single row layout"
source={[{
type: GuideSectionTypes.JS,
code: flexGroupSource,
}, {
type: GuideSectionTypes.HTML,
code: flexGroupHtml,
}]}
>
<GuideText>
<GuideCode>FlexGroup</GuideCode> is useful for setting up layouts for a <strong>single row</strong> of
content. By default any <GuideCode>FlexItem</GuideCode> within <GuideCode>FlexGroup</GuideCode> will
stretch and grow to match their siblings.
</GuideText>
<GuideDemo className="guideDemo__highlightGrid"><FlexGroup /></GuideDemo>
</GuideSection>
<GuideSection
title="FlexGroup can wrap its items"
source={[{
type: GuideSectionTypes.JS,
code: flexGroupWrapSource,
}, {
type: GuideSectionTypes.HTML,
code: flexGroupWrapHtml,
}]}
>
<GuideText>
You can set <GuideCode>wrap</GuideCode> on <GuideCode>FlexGroup</GuideCode> if it
contains <GuideCode>FlexItem</GuideCode>s with minimum widths, which you want to wrap as
the container becomes narrower.
</GuideText>
<GuideDemo className="guideDemo__highlightGrid"><FlexGroupWrap /></GuideDemo>
</GuideSection>
<GuideSection
title="FlexGroup accepts infinite items"
source={[{
type: GuideSectionTypes.JS,
code: flexItemsSource,
}, {
type: GuideSectionTypes.HTML,
code: flexItemsHtml,
}]}
>
<GuideText>
Same code as above. Notice that <GuideCode>FlexItem</GuideCode> creates equal width items
no matter the number of siblings. <GuideCode>FlexGroup</GuideCode> never wraps.
</GuideText>
<GuideDemo className="guideDemo__highlightGrid"><FlexItems /></GuideDemo>
</GuideSection>
<GuideSection
title="FlexItem can individually turn off stretching"
source={[{
type: GuideSectionTypes.JS,
code: flexGrowZeroSource,
}, {
type: GuideSectionTypes.HTML,
code: flexGrowZeroHtml,
}]}
>
<GuideText>
Sometimes you do not want a <GuideCode>FlexItem</GuideCode> to grow. It
can be turned off on each item individually.
</GuideText>
<GuideDemo className="guideDemo__highlightGrid"><FlexGrowZero /></GuideDemo>
</GuideSection>
<GuideSection
title="FlexItem can specify a proportional width"
source={[{
type: GuideSectionTypes.JS,
code: flexGrowNumericSource,
}, {
type: GuideSectionTypes.HTML,
code: flexGrowNumericHtml,
}]}
>
<GuideText>
You can specify a number between 1 and 10 for a <GuideCode>FlexItem</GuideCode> to
try to take up a proportional part of the flex box it is in.
</GuideText>
<GuideDemo className="guideDemo__highlightGrid"><FlexGrowNumeric /></GuideDemo>
</GuideSection>
<GuideSection
title="FlexGroup can justify and align"
source={[{
type: GuideSectionTypes.JS,
code: flexJustifySource,
}, {
type: GuideSectionTypes.HTML,
code: flexJustifyHtml,
}]}
>
<GuideText>
<GuideCode>FlexGroup</GuideCode>s can also
use <GuideCode>justifyContent</GuideCode> and <GuideCode>alignItems</GuideCode>props
that accept normal flex-box paramenters. Below are some common scenarios,
where you need to separate two items, center justify a single one, or
center an item vertically. Note the usage
of <GuideCode>FlexItem</GuideCode>s with <GuideCode>grow=false</GuideCode> so that they do not stretch.
</GuideText>
<GuideDemo className="guideDemo__highlightGrid"><FlexJustify /></GuideDemo>
</GuideSection>
<GuideSection
title="FlexGrids are for repeatable grids"
source={[{
type: GuideSectionTypes.JS,
code: flexGridSource,
}, {
type: GuideSectionTypes.HTML,
code: flexGridHtml,
}]}
>
<GuideText>
<GuideCode>FlexGrid</GuideCode> is a more rigid component that sets multiple, wrapping
rows of same width items.
</GuideText>
<GuideDemo className="guideDemo__highlightGridWrap"><FlexGrid /></GuideDemo>
</GuideSection>
<GuideSection
title="FlexGrids can have set column widths"
source={[{
type: GuideSectionTypes.JS,
code: flexGridColumnsSource,
}, {
type: GuideSectionTypes.HTML,
code: flexGridColumnsHtml,
}]}
>
<GuideText>
You can set a <GuideCode>columns</GuideCode> prop to specify
anywhere between 2-4 columns. Any more would likely break on laptop screens.
</GuideText>
<GuideDemo className="guideDemo__highlightGridWrap"><FlexGridColumns /></GuideDemo>
</GuideSection>
<GuideSection
title="FlexGrids and FlexGroups can nest"
source={[{
type: GuideSectionTypes.JS,
code: flexNestSource,
}, {
type: GuideSectionTypes.HTML,
code: flexNestHtml,
}]}
>
<GuideText>
<GuideCode>FlexGroup</GuideCode> and <GuideCode>FlexGrid</GuideCode> can nest
within themselves indefinitely. For example, here we turn off the growth on a
<GuideCode>FlexGroup</GuideCode>, then nest a grid inside of it.
</GuideText>
<GuideDemo className="guideDemo__highlightGrid"><FlexNest /></GuideDemo>
</GuideSection>
<GuideSection
title="Gutter sizing can be used on either FlexGroups or FlexGrids"
source={[{
type: GuideSectionTypes.JS,
code: flexGutterSource,
}, {
type: GuideSectionTypes.HTML,
code: flexGutterHtml,
}]}
>
<GuideText>
The <GuideCode>gutterSize</GuideCode> prop can be applied to either a
<GuideCode>FlexGroup</GuideCode> or a <GuideCode>FlexGrid</GuideCode> to adjust the
spacing between <GuideCode>FlexItem</GuideCode>s.
</GuideText>
<GuideDemo className="guideDemo__highlightGrid"><FlexGutter /></GuideDemo>
</GuideSection>
</GuidePage>
);

41
packages/kbn-ui-framework/doc_site/src/views/flex/flex_grid.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 {
KuiFlexGrid,
KuiFlexItem,
} from '../../../../components';
const ITEM_STYLE = { width: '300px' };
export default () => (
<div>
<KuiFlexGrid>
<KuiFlexItem style={ITEM_STYLE}><div>One</div></KuiFlexItem>
<KuiFlexItem style={ITEM_STYLE}><div>Two</div></KuiFlexItem>
<KuiFlexItem style={ITEM_STYLE}><div>Three</div></KuiFlexItem>
<KuiFlexItem style={ITEM_STYLE}><div>Four</div></KuiFlexItem>
<KuiFlexItem style={ITEM_STYLE}><div>Five</div></KuiFlexItem>
<KuiFlexItem style={ITEM_STYLE}><div>Six</div></KuiFlexItem>
<KuiFlexItem style={ITEM_STYLE}><div>Seven</div></KuiFlexItem>
</KuiFlexGrid>
</div>
);

39
packages/kbn-ui-framework/doc_site/src/views/flex/flex_grid_columns.js
View file

@ -1,39 +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 {
KuiFlexGrid,
KuiFlexItem,
} from '../../../../components';
export default () => (
<div>
<KuiFlexGrid columns={3}>
<KuiFlexItem><div>One</div></KuiFlexItem>
<KuiFlexItem><div>Two</div></KuiFlexItem>
<KuiFlexItem><div>Three</div></KuiFlexItem>
<KuiFlexItem><div>Four</div></KuiFlexItem>
<KuiFlexItem><div>Five</div></KuiFlexItem>
<KuiFlexItem><div>Six</div></KuiFlexItem>
<KuiFlexItem><div>Seven</div></KuiFlexItem>
</KuiFlexGrid>
</div>
);

37
packages/kbn-ui-framework/doc_site/src/views/flex/flex_group.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 {
KuiFlexGroup,
KuiFlexItem,
} from '../../../../components';
export default () => (
<KuiFlexGroup>
<KuiFlexItem>Content grid item</KuiFlexItem>
<KuiFlexItem>
<p>Another content grid item</p>
<br/>
<br/>
<p>Note how both of these are the same width and height despite having different content?</p>
</KuiFlexItem>
</KuiFlexGroup>
);

41
packages/kbn-ui-framework/doc_site/src/views/flex/flex_group_wrap.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 {
KuiFlexGroup,
KuiFlexItem,
} from '../../../../components';
export default () => (
<KuiFlexGroup wrap>
<KuiFlexItem style={{ minWidth: 300 }}>
Min-width 300px
</KuiFlexItem>
<KuiFlexItem style={{ minWidth: 300 }}>
Min-width 300px
</KuiFlexItem>
<KuiFlexItem style={{ minWidth: 300 }}>
Min-width 300px
</KuiFlexItem>
</KuiFlexGroup>
);

46
packages/kbn-ui-framework/doc_site/src/views/flex/flex_grow_numeric.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 {
KuiFlexGroup,
KuiFlexItem,
} from '../../../../components';
export default () => (
<div>
<KuiFlexGroup>
<KuiFlexItem grow={1}>1</KuiFlexItem>
<KuiFlexItem grow={2}>2<br />wraps content if necessary</KuiFlexItem>
<KuiFlexItem grow={3}>3<br />expands_to_fit_if_content_cannot_wrap</KuiFlexItem>
<KuiFlexItem grow={4}>4</KuiFlexItem>
</KuiFlexGroup>
<br /><br />
<KuiFlexGroup>
<KuiFlexItem grow={6}>6</KuiFlexItem>
<KuiFlexItem grow={3}>3</KuiFlexItem>
<KuiFlexItem grow={1}>1</KuiFlexItem>
<KuiFlexItem grow={3}>3</KuiFlexItem>
<KuiFlexItem grow={6}>6</KuiFlexItem>
</KuiFlexGroup>
</div>
);

34
packages/kbn-ui-framework/doc_site/src/views/flex/flex_grow_zero.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';
import {
KuiFlexGroup,
KuiFlexItem,
} from '../../../../components';
export default () => (
<div>
<KuiFlexGroup>
<KuiFlexItem grow={false}>This item wont grow</KuiFlexItem>
<KuiFlexItem>But this item will.</KuiFlexItem>
</KuiFlexGroup>
</div>
);

76
packages/kbn-ui-framework/doc_site/src/views/flex/flex_gutter.js
View file

@ -1,76 +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 {
KuiFlexGroup,
KuiFlexItem,
} from '../../../../components';
export default () => (
<div>
<KuiFlexGroup gutterSize="none">
<KuiFlexItem>None</KuiFlexItem>
<KuiFlexItem>None</KuiFlexItem>
<KuiFlexItem>None</KuiFlexItem>
<KuiFlexItem>None</KuiFlexItem>
</KuiFlexGroup>
<br/>
<br/>
<KuiFlexGroup gutterSize="small">
<KuiFlexItem>Small</KuiFlexItem>
<KuiFlexItem>Small</KuiFlexItem>
<KuiFlexItem>Small</KuiFlexItem>
<KuiFlexItem>Small</KuiFlexItem>
</KuiFlexGroup>
<br/>
<br/>
<KuiFlexGroup gutterSize="medium">
<KuiFlexItem>Medium</KuiFlexItem>
<KuiFlexItem>Medium</KuiFlexItem>
<KuiFlexItem>Medium</KuiFlexItem>
<KuiFlexItem>Medium</KuiFlexItem>
</KuiFlexGroup>
<br/>
<br/>
<KuiFlexGroup gutterSize="large">
<KuiFlexItem>Large (default)</KuiFlexItem>
<KuiFlexItem>Large (default)</KuiFlexItem>
<KuiFlexItem>Large (default)</KuiFlexItem>
<KuiFlexItem>Large (default)</KuiFlexItem>
</KuiFlexGroup>
<br/>
<br/>
<KuiFlexGroup gutterSize="extraLarge">
<KuiFlexItem>Extra Large</KuiFlexItem>
<KuiFlexItem>Extra Large</KuiFlexItem>
<KuiFlexItem>Extra Large</KuiFlexItem>
<KuiFlexItem>Extra Large</KuiFlexItem>
</KuiFlexGroup>
</div>
);

35
packages/kbn-ui-framework/doc_site/src/views/flex/flex_items.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 {
KuiFlexGroup,
KuiFlexItem,
} from '../../../../components';
export default () => (
<KuiFlexGroup>
<KuiFlexItem>One</KuiFlexItem>
<KuiFlexItem>Two</KuiFlexItem>
<KuiFlexItem>Three</KuiFlexItem>
<KuiFlexItem>Four</KuiFlexItem>
<KuiFlexItem>Five</KuiFlexItem>
</KuiFlexGroup>
);

54
packages/kbn-ui-framework/doc_site/src/views/flex/flex_justify.js
View file

@ -1,54 +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 {
KuiFlexGroup,
KuiFlexItem,
} from '../../../../components';
export default () => (
<div>
<KuiFlexGroup justifyContent="spaceBetween">
<KuiFlexItem grow={false}>One here on the left</KuiFlexItem>
<KuiFlexItem grow={false}>The other over here on the right.</KuiFlexItem>
</KuiFlexGroup>
<br/><br/>
<KuiFlexGroup justifyContent="spaceAround">
<KuiFlexItem grow={false}>I&rsquo;m a single centered item!</KuiFlexItem>
</KuiFlexGroup>
<br/><br/>
<KuiFlexGroup alignItems="center">
<KuiFlexItem grow={false}>
<div>
<p>I</p>
<p>am</p>
<p>really</p>
<p>tall</p>
</div>
</KuiFlexItem>
<KuiFlexItem>I am vertically centered!</KuiFlexItem>
</KuiFlexGroup>
</div>
);

44
packages/kbn-ui-framework/doc_site/src/views/flex/flex_nest.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 {
KuiFlexGroup,
KuiFlexItem,
KuiFlexGrid,
} from '../../../../components';
export default () => (
<div>
<KuiFlexGroup>
<KuiFlexItem grow={false}>Group One</KuiFlexItem>
<KuiFlexItem grow={false}>
<div>Group Two</div>
<br/><br/>
<KuiFlexGrid columns={3}>
<KuiFlexItem>Nested Grid One</KuiFlexItem>
<KuiFlexItem>Nested Grid Two</KuiFlexItem>
<KuiFlexItem>Nested Grid Three</KuiFlexItem>
<KuiFlexItem>Nested Grid Four</KuiFlexItem>
</KuiFlexGrid>
</KuiFlexItem>
</KuiFlexGroup>
</div>
);

116
packages/kbn-ui-framework/doc_site/src/views/gallery/gallery.js
View file

@ -1,116 +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 {
KuiGallery,
KuiGalleryItem,
KuiGalleryItemIcon,
KuiGalleryItemImage,
KuiGalleryItemLabel
} from '../../../../components';
export default () => {
/**
* These styles are just for demonstration purposes. It is recommended to use
* properly named classes instead of CSS properties in production code.
*/
const imageStyle = {
backgroundColor: 'lightgray'
};
return (
<div>
<div className="kuiVerticalRhythm">
<h2 className="kuiSubTitle kuiVerticalRhythmSmall">
Some items
</h2>
<KuiGallery className="kuiVerticalRhythmSmall">
<KuiGalleryItem href="#">
<KuiGalleryItemImage style={imageStyle}/>
<KuiGalleryItemLabel>
Item A
</KuiGalleryItemLabel>
<KuiGalleryItemIcon className="fa-flask"/>
</KuiGalleryItem>
<KuiGalleryItem href="#">
<KuiGalleryItemImage style={imageStyle}/>
<KuiGalleryItemLabel>
Item B
</KuiGalleryItemLabel>
</KuiGalleryItem>
<KuiGalleryItem onClick={() => window.alert('Clicked an item')}>
<KuiGalleryItemImage style={imageStyle}/>
<KuiGalleryItemLabel>
Item C
</KuiGalleryItemLabel>
</KuiGalleryItem>
<KuiGalleryItem>
<KuiGalleryItemImage style={imageStyle}/>
<KuiGalleryItemLabel>
Item D
</KuiGalleryItemLabel>
</KuiGalleryItem>
<KuiGalleryItem>
<KuiGalleryItemImage style={imageStyle}/>
<KuiGalleryItemLabel>
Item E
</KuiGalleryItemLabel>
</KuiGalleryItem>
</KuiGallery>
</div>
<div className="kuiVerticalRhythm">
<div className="kuiSubTitle kuiVerticalRhythmSmall">
Some more items
</div>
<KuiGallery className="kuiVerticalRhythmSmall">
<KuiGalleryItem href="#">
<KuiGalleryItemImage style={imageStyle}/>
<KuiGalleryItemLabel>
Item F
</KuiGalleryItemLabel>
</KuiGalleryItem>
<KuiGalleryItem href="#">
<KuiGalleryItemImage style={imageStyle}/>
<KuiGalleryItemLabel>
Item G with a long label with ellipsis
</KuiGalleryItemLabel>
</KuiGalleryItem>
</KuiGallery>
</div>
</div>
);
};

66
packages/kbn-ui-framework/doc_site/src/views/gallery/gallery_example.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 { renderToHtml } from '../../services';
import {
GuideCode,
GuideDemo,
GuidePage,
GuideSection,
GuideSectionTypes,
GuideText
} from '../../components';
import Gallery from './gallery';
const gallerySource = require('!!raw-loader!./gallery');
const galleryHtml = renderToHtml(Gallery);
export default props => (
<GuidePage title={props.route.name}>
<GuideSection
title="Gallery"
source={[{
type: GuideSectionTypes.JS,
code: gallerySource,
}, {
type: GuideSectionTypes.HTML,
code: galleryHtml,
}]}
>
<GuideText>
Use GalleryItem to show a gallery item.
If you specify an <GuideCode>href</GuideCode> property the item will render
as an HTML <GuideCode>a</GuideCode> element. If not, it will be rendered
as a <GuideCode>button</GuideCode> and you can attach an
<GuideCode>onClick</GuideCode> listener to it.
</GuideText>
<GuideText>
<strong>Note:</strong> You are not allowed to specify the <GuideCode>href</GuideCode> property
and the <GuideCode>onClick</GuideCode> property at the same time.
</GuideText>
<GuideDemo>
<Gallery />
</GuideDemo>
</GuideSection>
</GuidePage>
);

37
packages/kbn-ui-framework/doc_site/src/views/header_bar/header_bar.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 {
KuiHeaderBar,
KuiHeaderBarSection
} from '../../../../components';
export default () => {
return (
<KuiHeaderBar>
<KuiHeaderBarSection>
<h2 className="kuiSubTitle">
Section 1
</h2>
</KuiHeaderBarSection>
</KuiHeaderBar>
);
};

70
packages/kbn-ui-framework/doc_site/src/views/header_bar/header_bar_example.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 React from 'react';
import { renderToHtml } from '../../services';
import {
GuideDemo,
GuidePage,
GuideSection,
GuideSectionTypes,
} from '../../components';
import HeaderBar from './header_bar';
const headerBarSource = require('!!raw-loader!./header_bar');
const headerBarHtml = renderToHtml(HeaderBar);
import HeaderBarTwoSections from './header_bar_two_sections';
const headerBarTwoSectionsSource = require('!!raw-loader!./header_bar_two_sections');
const headerBarTwoSectionsHtml = renderToHtml(HeaderBarTwoSections);
export default props => (
<GuidePage title={props.route.name}>
<GuideSection
title="Header Bar"
source={[{
type: GuideSectionTypes.JS,
code: headerBarSource,
}, {
type: GuideSectionTypes.HTML,
code: headerBarHtml,
}]}
>
<GuideDemo>
<HeaderBar />
</GuideDemo>
</GuideSection>
<GuideSection
title="Two sections"
source={[{
type: GuideSectionTypes.JS,
code: headerBarTwoSectionsSource,
}, {
type: GuideSectionTypes.HTML,
code: headerBarTwoSectionsHtml,
}]}
>
<GuideDemo>
<HeaderBarTwoSections />
</GuideDemo>
</GuideSection>
</GuidePage>
);

52
packages/kbn-ui-framework/doc_site/src/views/header_bar/header_bar_sandbox.js
View file

@ -1,52 +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 { renderToHtml } from '../../services';
import {
GuideDemo,
GuideSandbox,
GuideSandboxCodeToggle,
GuideSectionTypes,
} from '../../components';
import HeaderBarSandboxContent from './header_bar_sandbox_content';
const headerBarSandboxContentSource = require('!!raw-loader!./header_bar_sandbox_content');
const headerBarSandboxContentHtml = renderToHtml(HeaderBarSandboxContent);
export default props => (
<GuideSandbox>
<GuideDemo
isFullScreen={true}
html={headerBarSandboxContentHtml}
/>
<GuideSandboxCodeToggle
source={[{
type: GuideSectionTypes.JS,
code: headerBarSandboxContentSource,
}, {
type: GuideSectionTypes.HTML,
code: headerBarSandboxContentHtml,
}]}
title={props.route.name}
/>
</GuideSandbox>
);

260
packages/kbn-ui-framework/doc_site/src/views/header_bar/header_bar_sandbox_content.js
View file

@ -1,260 +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 {
KuiHeaderBar,
KuiHeaderBarSection
} from '../../../../components';
export default () => {
return (
<div className="kuiView">
{/* Constrained width, centered content */}
<div className="kuiViewContent kuiViewContent--constrainedWidth">
<div className="kuiViewContentItem">
<KuiHeaderBar className="kuiVerticalRhythm">
<KuiHeaderBarSection>
<h2 className="kuiSubTitle">
Elysium stork
</h2>
</KuiHeaderBarSection>
<KuiHeaderBarSection>
<span className="kuiText">
<span className="kuiStatusText kuiStatusText--error">
<span className="kuiStatusText__icon kuiIcon fa-warning" />
Rope Hoth
</span>
</span>
</KuiHeaderBarSection>
</KuiHeaderBar>
{/* Table */}
<div className="kuiControlledTable kuiVerticalRhythm">
{/* ToolBar */}
<div className="kuiToolBar">
<div className="kuiToolBarSearch">
<div className="kuiToolBarSearchBox">
<div className="kuiToolBarSearchBox__icon kuiIcon fa-search" />
<input
className="kuiToolBarSearchBox__input"
type="text"
placeholder="Search..."
/>
</div>
</div>
<div className="kuiToolBarSection">
<button className="kuiButton kuiButton--primary">
Add
</button>
<button className="kuiButton kuiButton--basic kuiButton--icon">
<span className="kuiButton__icon kuiIcon fa-gear" />
</button>
<button className="kuiButton kuiButton--basic kuiButton--icon">
<span className="kuiButton__icon kuiIcon fa-bars" />
</button>
</div>
<div className="kuiToolBarSection">
<div className="kuiToolBarText">
1 &ndash; 20 of 33
</div>
<div className="kuiButtonGroup kuiButtonGroup--united">
<button className="kuiButton kuiButton--basic kuiButton--icon">
<span className="kuiButton__icon kuiIcon fa-chevron-left" />
</button>
<button className="kuiButton kuiButton--basic kuiButton--icon">
<span className="kuiButton__icon kuiIcon fa-chevron-right" />
</button>
</div>
</div>
</div>
{/* Table */}
<table className="kuiTable">
<thead>
<tr>
<th scope="col" className="kuiTableHeaderCell kuiTableHeaderCell--checkBox">
<input type="checkbox" className="kuiCheckBox"/>
</th>
<th scope="col" className="kuiTableHeaderCell">
Title
</th>
<th scope="col" className="kuiTableHeaderCell">
Status
</th>
<th scope="col" className="kuiTableHeaderCell">
Date created
</th>
<th scope="col" className="kuiTableHeaderCell kuiTableHeaderCell--alignRight">
Orders of magnitude
</th>
</tr>
</thead>
<tbody>
<tr className="kuiTableRow">
<td className="kuiTableRowCell kuiTableRowCell--checkBox">
<div className="kuiTableRowCell__liner">
<input type="checkbox" className="kuiCheckBox"/>
</div>
</td>
<td className="kuiTableRowCell">
<div className="kuiTableRowCell__liner">
<a className="kuiLink" href="#">Alligator</a>
</div>
</td>
<td className="kuiTableRowCell">
<div className="kuiTableRowCell__liner">
<div className="kuiIcon kuiIcon--success fa-check" />
</div>
</td>
<td className="kuiTableRowCell">
<div className="kuiTableRowCell__liner">
Tue Dec 06 2016 12:56:15 GMT-0800 (PST)
</div>
</td>
<td className="kuiTableRowCell kuiTableRowCell--alignRight">
<div className="kuiTableRowCell__liner">
1
</div>
</td>
</tr>
<tr className="kuiTableRow">
<td className="kuiTableRowCell kuiTableRowCell--checkBox">
<div className="kuiTableRowCell__liner">
<input type="checkbox" className="kuiCheckBox"/>
</div>
</td>
<td className="kuiTableRowCell">
<div className="kuiTableRowCell__liner">
<a className="kuiLink" href="#">Boomerang</a>
</div>
</td>
<td className="kuiTableRowCell">
<div className="kuiTableRowCell__liner">
<div className="kuiIcon kuiIcon--success fa-check" />
</div>
</td>
<td className="kuiTableRowCell">
<div className="kuiTableRowCell__liner">
Tue Dec 06 2016 12:56:15 GMT-0800 (PST)
</div>
</td>
<td className="kuiTableRowCell kuiTableRowCell--alignRight">
<div className="kuiTableRowCell__liner">
10
</div>
</td>
</tr>
<tr className="kuiTableRow">
<td className="kuiTableRowCell kuiTableRowCell--checkBox">
<div className="kuiTableRowCell__liner">
<input type="checkbox" className="kuiCheckBox"/>
</div>
</td>
<td className="kuiTableRowCell">
<div className="kuiTableRowCell__liner">
<a className="kuiLink" href="#">Celebration</a>
</div>
</td>
<td className="kuiTableRowCell">
<div className="kuiTableRowCell__liner">
<div className="kuiIcon kuiIcon--warning fa-bolt" />
</div>
</td>
<td className="kuiTableRowCell">
<div className="kuiTableRowCell__liner">
Tue Dec 06 2016 12:56:15 GMT-0800 (PST)
</div>
</td>
<td className="kuiTableRowCell kuiTableRowCell--alignRight">
<div className="kuiTableRowCell__liner">
100
</div>
</td>
</tr>
<tr className="kuiTableRow">
<td className="kuiTableRowCell kuiTableRowCell--checkBox">
<div className="kuiTableRowCell__liner">
<input type="checkbox" className="kuiCheckBox"/>
</div>
</td>
<td className="kuiTableRowCell">
<div className="kuiTableRowCell__liner">
<a className="kuiLink" href="#">Dog</a>
</div>
</td>
<td className="kuiTableRowCell">
<div className="kuiTableRowCell__liner">
<div className="kuiIcon kuiIcon--error fa-warning" />
</div>
</td>
<td className="kuiTableRowCell">
<div className="kuiTableRowCell__liner">
Tue Dec 06 2016 12:56:15 GMT-0800 (PST)
</div>
</td>
<td className="kuiTableRowCell kuiTableRowCell--alignRight">
<div className="kuiTableRowCell__liner">
1000
</div>
</td>
</tr>
</tbody>
</table>
{/* ToolBarFooter */}
<div className="kuiToolBarFooter">
<div className="kuiToolBarFooterSection">
<div className="kuiToolBarText">
5 Items selected
</div>
</div>
<div className="kuiToolBarFooterSection">
<div className="kuiToolBarText">
1 &ndash; 20 of 33
</div>
<div className="kuiButtonGroup kuiButtonGroup--united">
<button className="kuiButton kuiButton--basic kuiButton--icon">
<span className="kuiButton__icon kuiIcon fa-chevron-left" />
</button>
<button className="kuiButton kuiButton--basic kuiButton--icon">
<span className="kuiButton__icon kuiIcon fa-chevron-right" />
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
};

46
packages/kbn-ui-framework/doc_site/src/views/header_bar/header_bar_two_sections.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 {
KuiHeaderBar,
KuiHeaderBarSection
} from '../../../../components';
export default () => {
return (
<KuiHeaderBar>
<KuiHeaderBarSection>
<h2 className="kuiSubTitle">
Cluster Alerts
</h2>
</KuiHeaderBarSection>
<KuiHeaderBarSection>
<span className="kuiText">
<span className="kuiStatusText kuiStatusText--error">
<span className="kuiStatusText__icon kuiIcon fa-warning" aria-label="Warning" role="img"/>
Red health
</span>
</span>
</KuiHeaderBarSection>
</KuiHeaderBar>
);
};

31
packages/kbn-ui-framework/doc_site/src/views/info_button/info_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 {
KuiInfoButton,
} from '../../../../components';
export default () => (
<div>
<KuiInfoButton />
</div>
);

61
packages/kbn-ui-framework/doc_site/src/views/info_button/info_button_example.js
View file

@ -1,61 +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 { renderToHtml } from '../../services';
import {
GuideDemo,
GuidePage,
GuideSection,
GuideSectionTypes,
GuideText,
} from '../../components';
import Example from './info_button';
const basicSource = require('!!raw-loader!./info_button');
const basicHtml = renderToHtml(Example);
export default props => (
<GuidePage title={props.route.name}>
<GuideSection
title="Info Button"
source={[{
type: GuideSectionTypes.JS,
code: basicSource,
}, {
type: GuideSectionTypes.HTML,
code: basicHtml,
}]}
>
<GuideText>
This is just button with an info icon, used for a keyboard-accessible
trigger for helpful inline content. For example, use it as a tooltip
trigger.
</GuideText>
<GuideDemo>
<Example />
</GuideDemo>
</GuideSection>
</GuidePage>
);

3
packages/kbn-ui-framework/doc_site/src/views/micro_button/micro_button.html
View file

@ -1,3 +0,0 @@
<button class="kuiMicroButton" title="Edit" aria-label="Edit">
<span class="kuiIcon fa-gear"></span>
</button>

9
packages/kbn-ui-framework/doc_site/src/views/micro_button/micro_button_elements.html
View file

@ -1,9 +0,0 @@
<button class="kuiMicroButton" title="Edit" aria-label="Edit">
<span class="kuiIcon fa-gear"></span>
</button>
&nbsp;
<a href="#" class="kuiMicroButton" title="View" aria-label="View">
<span class="kuiIcon fa-eye"></span>
</a>

85
packages/kbn-ui-framework/doc_site/src/views/micro_button/micro_button_example.js
View file

@ -1,85 +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 {
GuideDemo,
GuidePage,
GuideSection,
GuideSectionTypes,
GuideText,
} from '../../components';
const microButtonHtml = require('./micro_button.html');
const microButtonGroupHtml = require('./micro_button_group.html');
const microButtonElementsHtml = require('./micro_button_elements.html');
export default props => (
<GuidePage title={props.route.name}>
<GuideSection
title="MicroButton"
source={[{
type: GuideSectionTypes.HTML,
code: microButtonHtml,
}]}
>
<GuideText>
Use MicroButtons for inline actions inside of Table rows.
</GuideText>
<GuideDemo
html={microButtonHtml}
/>
</GuideSection>
<GuideSection
title="MicroButtonGroup"
source={[{
type: GuideSectionTypes.HTML,
code: microButtonGroupHtml,
}]}
>
<GuideText>
se the MicroButtonGroup to emphasize the relationships between a set of MicroButtons, and
differentiate them from MicroButtons outside of the set.
</GuideText>
<GuideDemo
html={microButtonGroupHtml}
/>
</GuideSection>
<GuideSection
title="Element variations"
source={[{
type: GuideSectionTypes.HTML,
code: microButtonElementsHtml,
}]}
>
<GuideText>
You can create a MicroButton using a button element or a link.
</GuideText>
<GuideDemo
html={microButtonElementsHtml}
/>
</GuideSection>
</GuidePage>
);

13
packages/kbn-ui-framework/doc_site/src/views/micro_button/micro_button_group.html
View file

@ -1,13 +0,0 @@
<div class="kuiMicroButtonGroup" role="group">
<button class="kuiMicroButton" title="Edit" aria-label="Edit">
<span class="kuiIcon fa-gear"></span>
</button>
<button class="kuiMicroButton" title="View" aria-label="View">
<span class="kuiIcon fa-eye"></span>
</button>
<button class="kuiMicroButton" title="Delete" aria-label="Delete">
<span class="kuiIcon fa-trash"></span>
</button>
</div>

25
packages/kbn-ui-framework/doc_site/src/views/notice/notice_sandbox.html
View file

@ -1,25 +0,0 @@
<div
class="kuiView"
style="background-color: pink"
>
<div
class="kuiViewContent kuiViewContent--constrainedWidth"
style="background-color: pink"
>
<div class="kuiNotice">
<h1 class="kuiTitle kuiVerticalRhythm">
<span class="kuiIcon kuiIcon--error fa-warning"></span>
Notice title
</h1>
<p class="kuiText kuiVerticalRhythm">
You can use the Notice component to present content in the center of the content area,
within a container with a narrow, fixed width.
</p>
<p class="kuiText kuiVerticalRhythm">
The pink color is just for demonstration purposes.
</p>
</div>
</div>
</div>

46
packages/kbn-ui-framework/doc_site/src/views/notice/notice_sandbox.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 {
GuideDemo,
GuideSandbox,
GuideSandboxCodeToggle,
GuideSectionTypes,
} from '../../components';
const html = require('./notice_sandbox.html');
export default props => (
<GuideSandbox>
<GuideDemo
isFullScreen={true}
html={html}
/>
<GuideSandboxCodeToggle
source={[{
type: GuideSectionTypes.HTML,
code: html,
}]}
title={props.route.name}
/>
</GuideSandbox>
);

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

@ -24,11 +24,6 @@ import React, {
import classNames from 'classnames';
import {
KuiButton,
KuiButtonIcon,
KuiPopover,
KuiContextMenuPanel,
KuiContextMenuItem,
KuiTable,
KuiTableBody,
KuiTableHeader,
@ -173,57 +168,6 @@ export class Table extends Component {
<KuiTableRowCell>
{item.dateCreated}
</KuiTableRowCell>
<KuiTableRowCell textOnly={false}>
<KuiPopover
button={(
<KuiButton
buttonType="basic"
onClick={() => this.togglePopover(item)}
icon={<KuiButtonIcon className="fa-angle-down" />}
iconPosition="right"
>
Actions
</KuiButton>
)}
isOpen={this.isPopoverOpen(item)}
closePopover={() => this.closePopover(item)}
panelPaddingSize="none"
withTitle
anchorPosition="right"
>
<KuiContextMenuPanel
style={{ width: '100px' }}
items={[
(
<KuiContextMenuItem
key="A"
icon={<span className="kuiIcon fa-pencil" />}
onClick={() => { this.closePopover(item); window.alert('Edit'); }}
>
Edit
</KuiContextMenuItem>
), (
<KuiContextMenuItem
key="B"
icon={<span className="kuiIcon fa-share" />}
onClick={() => { this.closePopover(item); window.alert('Share'); }}
>
Share
</KuiContextMenuItem>
), (
<KuiContextMenuItem
key="C"
icon={<span className="kuiIcon fa-trash-o" />}
onClick={() => { this.closePopover(item); window.alert('Delete'); }}
>
Delete
</KuiContextMenuItem>
)
]}
/>
</KuiPopover>
</KuiTableRowCell>
</KuiTableRow>
);
@ -274,10 +218,6 @@ export class Table extends Component {
<KuiTableHeaderCell>
Date created
</KuiTableHeaderCell>
<KuiTableHeaderCell width="110px">
Actions
</KuiTableHeaderCell>
</KuiTableHeader>
<KuiTableBody>

22
packages/kbn-ui-framework/src/components/accessibility/__snapshots__/keyboard_accessible.test.js.snap
View file

@ -1,22 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`KuiKeyboardAccessible adds accessibility attributes tabindex and role 1`] = `
<div
role="button"
tabindex="0"
/>
`;
exports[`KuiKeyboardAccessible doesn't override pre-existing accessibility attributes role 1`] = `
<div
role="submit"
tabindex="0"
/>
`;
exports[`KuiKeyboardAccessible doesn't override pre-existing accessibility attributes tabindex 1`] = `
<div
role="button"
tabindex="1"
/>
`;

17
packages/kbn-ui-framework/src/components/accessibility/__snapshots__/screen_reader.test.js.snap
View file

@ -1,17 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`KuiScreenReaderOnly adds an accessibility class to a child element and combines other classNames (foo, bar) given as props on the child 1`] = `
<p
class="kuiScreenReaderOnly foo bar"
>
This paragraph is not visible to sighted users but will be read by screenreaders.
</p>
`;
exports[`KuiScreenReaderOnly adds an accessibility class to a child element when used with no props 1`] = `
<p
class="kuiScreenReaderOnly"
>
This paragraph is not visible to sighted users but will be read by screenreaders.
</p>
`;

1
packages/kbn-ui-framework/src/components/accessibility/_index.scss
View file

@ -1 +0,0 @@
@import "screen_reader";

8
packages/kbn-ui-framework/src/components/accessibility/_screen_reader.scss
View file

@ -1,8 +0,0 @@
.kuiScreenReaderOnly {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}

21
packages/kbn-ui-framework/src/components/accessibility/index.js
View file

@ -1,21 +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 { KuiKeyboardAccessible } from './keyboard_accessible';
export { KuiScreenReaderOnly } from './screen_reader';

120
packages/kbn-ui-framework/src/components/accessibility/keyboard_accessible.js
View file

@ -1,120 +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.
*/
/**
* Interactive elements must be able to receive focus.
*
* Ideally, this means using elements that are natively keyboard accessible (<a href="">,
* <input type="button">, or <button>). Note that links should be used when navigating and buttons
* should be used when performing an action on the page.
*
* If, however, you need to use elements that aren't natively keyboard accessible (for example, <div>,
* <p>, or <a> without the href attribute), then you need to allow them to receive focus and to
* respond to keyboard input. The workaround is to:
*
* - Give the element tabindex="0" so that it can receive keyboard focus.
* - Add a JavaScript onkeyup event handler that triggers element functionality if the Enter key
* is pressed while the element is focused. This is necessary because some browsers do not trigger
* onclick events for such elements when activated via the keyboard.
* - If the item is meant to function as a button, the onkeyup event handler should also detect the
* Spacebar in addition to the Enter key, and the element should be given role="button".
*
* Wrap any such elements that aren't natively keyboard accessible in this component to automatically
* apply the above workaround to them.
*/
import {
Component,
cloneElement,
} from 'react';
import { keyCodes } from '../../services';
export class KuiKeyboardAccessible extends Component {
onKeyDown = e => {
// Prevent a scroll from occurring if the user has hit space.
if (e.keyCode === keyCodes.SPACE) {
e.preventDefault();
}
}
onKeyUp = e => {
// Support keyboard accessibility by emulating mouse click on ENTER or SPACE keypress.
if (e.keyCode === keyCodes.ENTER || e.keyCode === keyCodes.SPACE) {
// Delegate to the click handler on the element.
this.props.children.props.onClick(e);
}
}
applyKeyboardAccessibility(child) {
// Add attributes required for accessibility unless they are already specified.
const props = {
tabIndex: '0',
role: 'button',
...child.props,
onKeyDown: this.onKeyDown,
onKeyUp: this.onKeyUp,
};
return cloneElement(child, props);
}
render() {
return this.applyKeyboardAccessibility(this.props.children);
}
}
const keyboardInaccessibleElement = (props, propName, componentName) => {
const child = props.children;
if (!child) {
throw new Error(`${componentName} needs to wrap an element with which the user interacts.`);
}
// The whole point of this component is to hack in functionality that native buttons provide
// by default.
if (child.type === 'button') {
throw new Error(`${componentName} doesn't need to be used on a button.`);
}
if (child.type === 'a' && child.props.href !== undefined) {
throw new Error(`${componentName} doesn't need to be used on a link if it has a href attribute.`);
}
// We're emulating a click action, so we should already have a regular click handler defined.
if (!child.props.onClick) {
throw new Error(`${componentName} needs to wrap an element which has an onClick prop assigned.`);
}
if (typeof child.props.onClick !== 'function') {
throw new Error(`${componentName}'s child's onClick prop needs to be a function.`);
}
if (child.props.onKeyDown) {
throw new Error(`${componentName}'s child can't have an onKeyDown prop because the implementation will override it.`);
}
if (child.props.onKeyUp) {
throw new Error(`${componentName}'s child can't have an onKeyUp prop because the implementation will override it.`);
}
};
KuiKeyboardAccessible.propTypes = {
children: keyboardInaccessibleElement,
};

217
packages/kbn-ui-framework/src/components/accessibility/keyboard_accessible.test.js
View file

@ -1,217 +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,
shallow,
} from 'enzyme';
import sinon from 'sinon';
import { KuiKeyboardAccessible } from './keyboard_accessible';
import { keyCodes } from '../../services';
describe('KuiKeyboardAccessible', () => {
describe('throws an error', () => {
let consoleStub;
beforeEach(() => {
consoleStub = sinon.stub(console, 'error');
});
afterEach(() => {
console.error.restore();
});
test(`when there's no child`, () => {
const component = ( // eslint-disable-line no-unused-vars
<KuiKeyboardAccessible />
);
expect(consoleStub.calledOnce).toBe(true);
expect(consoleStub.getCall(0).args[0]).toContain(
`needs to wrap an element with which the user interacts.`
);
});
test('when the child is a button', () => {
const component = ( // eslint-disable-line no-unused-vars
<KuiKeyboardAccessible>
<button onClick={() => {}} />
</KuiKeyboardAccessible>
);
expect(consoleStub.calledOnce).toBe(true);
expect(consoleStub.getCall(0).args[0]).toContain(
`doesn't need to be used on a button.`
);
});
test('when the child is a link with an href', () => {
const component = ( // eslint-disable-line no-unused-vars
<KuiKeyboardAccessible>
<a href="#" onClick={() => {}} />
</KuiKeyboardAccessible>
);
expect(consoleStub.calledOnce).toBe(true);
expect(consoleStub.getCall(0).args[0]).toContain(
`doesn't need to be used on a link if it has a href attribute.`
);
});
test(`when the child doesn't have an onClick prop`, () => {
const component = ( // eslint-disable-line no-unused-vars
<KuiKeyboardAccessible>
<div />
</KuiKeyboardAccessible>
);
expect(consoleStub.calledOnce).toBe(true);
expect(consoleStub.getCall(0).args[0]).toContain(
`needs to wrap an element which has an onClick prop assigned.`
);
});
test(`when the child's onClick prop isn't a function`, () => {
const component = ( // eslint-disable-line no-unused-vars
<KuiKeyboardAccessible>
<div onClick="notAFunction" />
</KuiKeyboardAccessible>
);
expect(consoleStub.calledOnce).toBe(true);
expect(consoleStub.getCall(0).args[0]).toContain(
`child's onClick prop needs to be a function.`
);
});
test(`when the child has an onKeyDown prop`, () => {
const component = ( // eslint-disable-line no-unused-vars
<KuiKeyboardAccessible>
<div onClick={() => {}} onKeyDown={() => {}} />
</KuiKeyboardAccessible>
);
expect(consoleStub.calledOnce).toBe(true);
expect(consoleStub.getCall(0).args[0]).toContain(
`child can't have an onKeyDown prop because the implementation will override it.`
);
});
test(`when the child has an onKeyUp prop`, () => {
const component = ( // eslint-disable-line no-unused-vars
<KuiKeyboardAccessible>
<div onClick={() => {}} onKeyUp={() => {}} />
</KuiKeyboardAccessible>
);
expect(consoleStub.calledOnce).toBe(true);
expect(consoleStub.getCall(0).args[0]).toContain(
`child can't have an onKeyUp prop because the implementation will override it.`
);
});
});
describe(`doesn't throw an error`, () => {
test('when the element is a link without an href', () => {
const consoleStub = sinon.stub(console, 'error');
const component = ( // eslint-disable-line no-unused-vars
<KuiKeyboardAccessible>
<a onClick={() => {}} />
</KuiKeyboardAccessible>
);
expect(consoleStub.called).toBe(false);
console.error.restore();
});
});
describe('adds accessibility attributes', () => {
test('tabindex and role', () => {
const $button = render(
<KuiKeyboardAccessible>
<div onClick={() => {}} />
</KuiKeyboardAccessible>
);
expect($button)
.toMatchSnapshot();
});
});
describe(`doesn't override pre-existing accessibility attributes`, () => {
test('tabindex', () => {
const $button = render(
<KuiKeyboardAccessible>
<div onClick={() => {}} tabIndex="1" />
</KuiKeyboardAccessible>
);
expect($button)
.toMatchSnapshot();
});
test('role', () => {
const $button = render(
<KuiKeyboardAccessible>
<div onClick={() => {}} role="submit" />
</KuiKeyboardAccessible>
);
expect($button)
.toMatchSnapshot();
});
});
describe(`calls onClick`, () => {
test(`on ENTER keyup`, () => {
const onClickHandler = sinon.stub();
const $button = shallow(
<KuiKeyboardAccessible>
<div data-div onClick={onClickHandler} />
</KuiKeyboardAccessible>
);
$button.find('[data-div]').simulate('keyup', {
keyCode: keyCodes.ENTER
});
sinon.assert.calledOnce(onClickHandler);
});
test(`on SPACE keyup`, () => {
const onClickHandler = sinon.stub();
const $button = shallow(
<KuiKeyboardAccessible>
<div data-div onClick={onClickHandler} />
</KuiKeyboardAccessible>
);
$button.find('[data-div]').simulate('keyup', {
keyCode: keyCodes.SPACE
});
sinon.assert.calledOnce(onClickHandler);
});
});
});

38
packages/kbn-ui-framework/src/components/accessibility/screen_reader.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.
*/
import PropTypes from 'prop-types';
import { cloneElement } from 'react';
import classNames from 'classnames';
export const KuiScreenReaderOnly = ({ children }) => {
const classes = classNames('kuiScreenReaderOnly', children.props.className);
const props = {
...children.props,
className: classes,
};
return cloneElement(children, props);
};
KuiScreenReaderOnly.propTypes = {
children: PropTypes.node
};

54
packages/kbn-ui-framework/src/components/accessibility/screen_reader.test.js
View file

@ -1,54 +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 } from 'enzyme';
import { KuiScreenReaderOnly } from './screen_reader';
describe('KuiScreenReaderOnly', () => {
describe('adds an accessibility class to a child element', () => {
test('when used with no props', () => {
const $paragraph = render(
<KuiScreenReaderOnly>
<p>
This paragraph is not visible to sighted users but will be read by
screenreaders.
</p>
</KuiScreenReaderOnly>
);
expect($paragraph)
.toMatchSnapshot();
});
test('and combines other classNames (foo, bar) given as props on the child', () => {
const $paragraph = render(
<KuiScreenReaderOnly>
<p className="foo bar">
This paragraph is not visible to sighted users but will be read by
screenreaders.
</p>
</KuiScreenReaderOnly>
);
expect($paragraph)
.toMatchSnapshot();
});
});
});

11
packages/kbn-ui-framework/src/components/action_item/__snapshots__/action_item.test.js.snap
View file

@ -1,11 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders KuiActionItem 1`] = `
<div
aria-label="aria-label"
class="kuiActionItem testClass1 testClass2"
data-test-subj="test subject string"
>
children
</div>
`;

5
packages/kbn-ui-framework/src/components/action_item/_action_item.scss
View file

@ -1,5 +0,0 @@
.kuiActionItem {
display: flex;
align-items: center;
justify-content: space-between;
}

1
packages/kbn-ui-framework/src/components/action_item/_index.scss
View file

@ -1 +0,0 @@
@import "action_item";

31
packages/kbn-ui-framework/src/components/action_item/action_item.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 PropTypes from 'prop-types';
import React from 'react';
import classNames from 'classnames';
export const KuiActionItem = ({ children, className, ...rest }) => {
const classes = classNames('kuiActionItem', className);
return <div className={classes} {...rest} >{children}</div>;
};
KuiActionItem.propTypes = {
children: PropTypes.node,
className: PropTypes.string,
};

31
packages/kbn-ui-framework/src/components/action_item/action_item.test.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 { render } from 'enzyme';
import { requiredProps } from '../../test/required_props';
import {
KuiActionItem,
} from './action_item';
test('renders KuiActionItem', () => {
const component = <KuiActionItem {...requiredProps}>children</KuiActionItem>;
expect(render(component)).toMatchSnapshot();
});

20
packages/kbn-ui-framework/src/components/action_item/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 { KuiActionItem } from './action_item';

14
packages/kbn-ui-framework/src/components/badge/_badge.scss
View file

@ -1,14 +0,0 @@
.kuiBadge {
display: inline-block;
margin-left: 0.5em;
padding: 0.1em 0.7em;
vertical-align: middle;
font-size: $badgeFontSize;
line-height: $kuiLineHeight;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.kuiBadge--default {
background-color: rgba(0, 0, 0, 0.1);
}

3
packages/kbn-ui-framework/src/components/badge/_index.scss
View file

@ -1,3 +0,0 @@
$badgeFontSize: 11px;
@import "badge";

11
packages/kbn-ui-framework/src/components/card/__snapshots__/card.test.js.snap
View file

@ -1,11 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders KuiCard 1`] = `
<div
aria-label="aria-label"
class="kuiCard testClass1 testClass2"
data-test-subj="test subject string"
>
children
</div>
`;

11
packages/kbn-ui-framework/src/components/card/__snapshots__/card_description.test.js.snap
View file

@ -1,11 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders KuiCardDescription 1`] = `
<div
aria-label="aria-label"
class="kuiCard__description testClass1 testClass2"
data-test-subj="test subject string"
>
children
</div>
`;

11
packages/kbn-ui-framework/src/components/card/__snapshots__/card_description_text.test.js.snap
View file

@ -1,11 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders KuiCardDescriptionText 1`] = `
<div
aria-label="aria-label"
class="kuiCard__descriptionText testClass1 testClass2"
data-test-subj="test subject string"
>
children
</div>
`;

12
packages/kbn-ui-framework/src/components/card/__snapshots__/card_description_title.test.js.snap
View file

@ -1,12 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders KuiCardDescriptionTitle 1`] = `
<div
aria-label="aria-label"
class="kuiCard__descriptionTitle testClass1 testClass2"
data-test-subj="test subject string"
role="heading"
>
children
</div>
`;

11
packages/kbn-ui-framework/src/components/card/__snapshots__/card_footer.test.js.snap
View file

@ -1,11 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders KuiCardFooter 1`] = `
<div
aria-label="aria-label"
class="kuiCard__footer testClass1 testClass2"
data-test-subj="test subject string"
>
children
</div>
`;

23
packages/kbn-ui-framework/src/components/card/__snapshots__/card_group.test.js.snap
View file

@ -1,23 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders KuiCardGroup 1`] = `
<div
aria-label="aria-label"
class="kuiCardGroup testClass1 testClass2"
data-test-subj="test subject string"
role="group"
>
children
</div>
`;
exports[`renders KuiCardGroup isUnited 1`] = `
<div
aria-label="aria-label"
class="kuiCardGroup testClass1 testClass2 kuiCardGroup--united"
data-test-subj="test subject string"
role="group"
>
children
</div>
`;

37
packages/kbn-ui-framework/src/components/card/_card.scss
View file

@ -1,37 +0,0 @@
.kuiCard {
display: flex;
flex-direction: column;
border: 1px solid $cardBorderColor;
border-radius: $kuiBorderRadius;
overflow: hidden;
line-height: $kuiLineHeight;
}
.kuiCard__description {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 18px 0;
text-align: center;
}
.kuiCard__descriptionTitle {
font-size: $kuiFontSize;
font-weight: bold;
margin-bottom: 10px;
text-align: center;
max-width: $cardMaxWidth;
}
.kuiCard__descriptionText {
font-size: $kuiFontSize;
max-width: $cardMaxWidth;
}
.kuiCard__footer {
text-align: center;
font-size: 14px;
padding: 0 15px 20px;
}

49
packages/kbn-ui-framework/src/components/card/_card_group.scss
View file

@ -1,49 +0,0 @@
/**
* 1. Wrap cards when necessary.
* 2. Offset the spacing between wrapped cards.
*/
.kuiCardGroup {
display: flex;
flex-wrap: wrap; /* 1 */
margin: -$cardSpacing; /* 2 */
/**
* 1. Use the defined width of the card to determine when to wrap.
* 2. Use an even margin all around the card so that the spacing is still even when wrapped.
*/
.kuiCard {
flex: 1 1 auto; /* 1 */
margin: $cardSpacing; /* 2 */
.kuiCard__description {
flex: 1 1 auto;
}
}
}
/**
* 1. There's no way to make this look good when wrapped.
* 2. Undo the default styles.
*/
.kuiCardGroup--united {
flex-wrap: nowrap; /* 1 */
border: 1px solid $cardBorderColor;
border-radius: $kuiBorderRadius;
overflow: hidden;
margin: 0; /* 2 */
/**
* 1. Force all cards to be the same size.
* 2. Undo the default styles.
*/
.kuiCard {
flex-basis: 0; /* 1 */
border: none; /* 2 */
border-radius: 0; /* 2 */
margin: 0; /* 2 */
}
.kuiCard + .kuiCard {
border-left: 1px solid $cardBorderColor;
}
}

6
packages/kbn-ui-framework/src/components/card/_index.scss
View file

@ -1,6 +0,0 @@
$cardSpacing: 15px;
$cardBorderColor: #E0E0E0;
$cardMaxWidth: calc(100% - 48px);
@import "card";
@import "card_group";

31
packages/kbn-ui-framework/src/components/card/card.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 PropTypes from 'prop-types';
import React from 'react';
import classNames from 'classnames';
export const KuiCard = ({ children, className, ...rest }) => {
const classes = classNames('kuiCard', className);
return <div className={classes} {...rest}>{children}</div>;
};
KuiCard.propTypes = {
children: PropTypes.node,
className: PropTypes.string,
};

31
packages/kbn-ui-framework/src/components/card/card.test.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 { render } from 'enzyme';
import { requiredProps } from '../../test/required_props';
import {
KuiCard,
} from './card';
test('renders KuiCard', () => {
const component = <KuiCard {...requiredProps}>children</KuiCard>;
expect(render(component)).toMatchSnapshot();
});

31
packages/kbn-ui-framework/src/components/card/card_description.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 PropTypes from 'prop-types';
import React from 'react';
import classNames from 'classnames';
export const KuiCardDescription = ({ children, className, ...rest }) => {
const classes = classNames('kuiCard__description', className);
return <div className={classes} {...rest}>{children}</div>;
};
KuiCardDescription.propTypes = {
children: PropTypes.node,
className: PropTypes.string,
};

31
packages/kbn-ui-framework/src/components/card/card_description.test.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 { render } from 'enzyme';
import { requiredProps } from '../../test/required_props';
import {
KuiCardDescription,
} from './card_description';
test('renders KuiCardDescription', () => {
const component = <KuiCardDescription {...requiredProps}>children</KuiCardDescription>;
expect(render(component)).toMatchSnapshot();
});

31
packages/kbn-ui-framework/src/components/card/card_description_text.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 PropTypes from 'prop-types';
import React from 'react';
import classNames from 'classnames';
export const KuiCardDescriptionText = ({ children, className, ...rest }) => {
const classes = classNames('kuiCard__descriptionText', className);
return <div className={classes} {...rest}>{children}</div>;
};
KuiCardDescriptionText.propTypes = {
children: PropTypes.node,
className: PropTypes.string,
};

31
packages/kbn-ui-framework/src/components/card/card_description_text.test.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 { render } from 'enzyme';
import { requiredProps } from '../../test/required_props';
import {
KuiCardDescriptionText,
} from './card_description_text';
test('renders KuiCardDescriptionText', () => {
const component = <KuiCardDescriptionText {...requiredProps}>children</KuiCardDescriptionText>;
expect(render(component)).toMatchSnapshot();
});

31
packages/kbn-ui-framework/src/components/card/card_description_title.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 PropTypes from 'prop-types';
import React from 'react';
import classNames from 'classnames';
export const KuiCardDescriptionTitle = ({ children, className, ...rest }) => {
const classes = classNames('kuiCard__descriptionTitle', className);
return <div className={classes} role="heading" {...rest}>{children}</div>;
};
KuiCardDescriptionTitle.propTypes = {
children: PropTypes.node,
className: PropTypes.string,
};

31
packages/kbn-ui-framework/src/components/card/card_description_title.test.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 { render } from 'enzyme';
import { requiredProps } from '../../test/required_props';
import {
KuiCardDescriptionTitle,
} from './card_description_title';
test('renders KuiCardDescriptionTitle', () => {
const component = <KuiCardDescriptionTitle {...requiredProps}>children</KuiCardDescriptionTitle>;
expect(render(component)).toMatchSnapshot();
});

31
packages/kbn-ui-framework/src/components/card/card_footer.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 PropTypes from 'prop-types';
import React from 'react';
import classNames from 'classnames';
export const KuiCardFooter = ({ children, className, ...rest }) => {
const classes = classNames('kuiCard__footer', className);
return <div className={classes} {...rest}>{children}</div>;
};
KuiCardFooter.propTypes = {
children: PropTypes.node,
className: PropTypes.string,
};

31
packages/kbn-ui-framework/src/components/card/card_footer.test.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 { render } from 'enzyme';
import { requiredProps } from '../../test/required_props';
import {
KuiCardFooter,
} from './card_footer';
test('renders KuiCardFooter', () => {
const component = <KuiCardFooter {...requiredProps}>children</KuiCardFooter>;
expect(render(component)).toMatchSnapshot();
});

37
packages/kbn-ui-framework/src/components/card/card_group.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 PropTypes from 'prop-types';
import React from 'react';
import classNames from 'classnames';
export const KuiCardGroup = ({ children, className, isUnited, ...rest }) => {
const classes = classNames('kuiCardGroup', className, { 'kuiCardGroup--united': isUnited });
return <div className={classes} role="group" {...rest}>{children}</div>;
};
KuiCardGroup.defaultProps = {
isUnited: false
};
KuiCardGroup.propTypes = {
children: PropTypes.node,
className: PropTypes.string,
isUnited: PropTypes.bool
};

36
packages/kbn-ui-framework/src/components/card/card_group.test.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 { render } from 'enzyme';
import { requiredProps } from '../../test/required_props';
import {
KuiCardGroup,
} from './card_group';
test('renders KuiCardGroup', () => {
const component = <KuiCardGroup {...requiredProps}>children</KuiCardGroup>;
expect(render(component)).toMatchSnapshot();
});
test('renders KuiCardGroup isUnited', () => {
const component = <KuiCardGroup isUnited {...requiredProps}>children</KuiCardGroup>;
expect(render(component)).toMatchSnapshot();
});

25
packages/kbn-ui-framework/src/components/card/index.js
View file

@ -1,25 +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 { KuiCard } from './card';
export { KuiCardDescriptionText } from './card_description_text';
export { KuiCardDescriptionTitle } from './card_description_title';
export { KuiCardDescription } from './card_description';
export { KuiCardFooter } from './card_footer';
export { KuiCardGroup } from './card_group';

305
packages/kbn-ui-framework/src/components/code_editor/__snapshots__/code_editor.test.js.snap
View file

@ -1,305 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`KuiCodeEditor behavior hint element should be disabled when the ui ace box gains focus 1`] = `
<div
class="kuiCodeEditorKeyboardHint"
data-test-subj="codeEditorHint"
id="42"
role="button"
tabindex="0"
>
<p
class="kuiText kuiVerticalRhythmSmall"
>
Press Enter to start
editing
.
</p>
<p
class="kuiText kuiVerticalRhythmSmall"
>
When you’re done, press Escape to stop
editing
.
</p>
</div>
`;
exports[`KuiCodeEditor behavior hint element should be enabled when the ui ace box loses focus 1`] = `
<div
class="kuiCodeEditorKeyboardHint"
data-test-subj="codeEditorHint"
id="42"
role="button"
tabindex="0"
>
<p
class="kuiText kuiVerticalRhythmSmall"
>
Press Enter to start
editing
.
</p>
<p
class="kuiText kuiVerticalRhythmSmall"
>
When you’re done, press Escape to stop
editing
.
</p>
</div>
`;
exports[`KuiCodeEditor behavior hint element should be tabable 1`] = `
<div
class="kuiCodeEditorKeyboardHint"
data-test-subj="codeEditorHint"
id="42"
role="button"
tabindex="0"
>
<p
class="kuiText kuiVerticalRhythmSmall"
>
Press Enter to start
editing
.
</p>
<p
class="kuiText kuiVerticalRhythmSmall"
>
When you’re done, press Escape to stop
editing
.
</p>
</div>
`;
exports[`KuiCodeEditor is rendered 1`] = `
<div
class="kuiCodeEditorWrapper"
>
<div
class="kuiCodeEditorKeyboardHint"
data-test-subj="codeEditorHint"
id="42"
role="button"
tabindex="0"
>
<p
class="kuiText kuiVerticalRhythmSmall"
>
Press Enter to start editing.
</p>
<p
class="kuiText kuiVerticalRhythmSmall"
>
When you’re done, press Escape to stop editing.
</p>
</div>
<div
class=" ace_editor ace-tm testClass1 testClass2"
id="brace-editor"
style="width: 500px; height: 500px;"
>
<textarea
autocapitalize="off"
autocorrect="off"
class="ace_text-input"
spellcheck="false"
style="opacity: 0;"
tabindex="-1"
wrap="off"
/>
<div
aria-hidden="true"
class="ace_gutter"
>
<div
class="ace_layer ace_gutter-layer ace_folding-enabled"
/>
<div
class="ace_gutter-active-line"
/>
</div>
<div
class="ace_scroller"
>
<div
class="ace_content"
>
<div
class="ace_layer ace_print-margin-layer"
>
<div
class="ace_print-margin"
style="left: 4px; visibility: visible;"
/>
</div>
<div
class="ace_layer ace_marker-layer"
/>
<div
class="ace_layer ace_text-layer"
style="padding: 0px 4px;"
/>
<div
class="ace_layer ace_marker-layer"
/>
<div
class="ace_layer ace_cursor-layer ace_hidden-cursors"
>
<div
class="ace_cursor"
/>
</div>
</div>
</div>
<div
class="ace_scrollbar ace_scrollbar-v"
style="display: none; width: 20px;"
>
<div
class="ace_scrollbar-inner"
style="width: 20px;"
/>
</div>
<div
class="ace_scrollbar ace_scrollbar-h"
style="display: none; height: 20px;"
>
<div
class="ace_scrollbar-inner"
style="height: 20px;"
/>
</div>
<div
style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
>
<div
style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
/>
<div
style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
</div>
</div>
</div>
</div>
`;
exports[`KuiCodeEditor props isReadOnly renders alternate hint text 1`] = `
<div
class="kuiCodeEditorWrapper"
>
<div
class="kuiCodeEditorKeyboardHint"
data-test-subj="codeEditorHint"
id="42"
role="button"
tabindex="0"
>
<p
class="kuiText kuiVerticalRhythmSmall"
>
Press Enter to start interacting with the code.
</p>
<p
class="kuiText kuiVerticalRhythmSmall"
>
When you’re done, press Escape to stop interacting with the code.
</p>
</div>
<div
class=" ace_editor ace-tm"
id="brace-editor"
style="width: 500px; height: 500px;"
>
<textarea
autocapitalize="off"
autocorrect="off"
class="ace_text-input"
spellcheck="false"
style="opacity: 0;"
tabindex="-1"
wrap="off"
/>
<div
aria-hidden="true"
class="ace_gutter"
>
<div
class="ace_layer ace_gutter-layer ace_folding-enabled"
/>
<div
class="ace_gutter-active-line"
style="display: none;"
/>
</div>
<div
class="ace_scroller"
>
<div
class="ace_content"
>
<div
class="ace_layer ace_print-margin-layer"
>
<div
class="ace_print-margin"
style="left: 4px; visibility: visible;"
/>
</div>
<div
class="ace_layer ace_marker-layer"
/>
<div
class="ace_layer ace_text-layer"
style="padding: 0px 4px;"
/>
<div
class="ace_layer ace_marker-layer"
/>
<div
class="ace_layer ace_cursor-layer ace_hidden-cursors"
>
<div
class="ace_cursor"
/>
</div>
</div>
</div>
<div
class="ace_scrollbar ace_scrollbar-v"
style="display: none; width: 20px;"
>
<div
class="ace_scrollbar-inner"
style="width: 20px;"
/>
</div>
<div
class="ace_scrollbar ace_scrollbar-h"
style="display: none; height: 20px;"
>
<div
class="ace_scrollbar-inner"
style="height: 20px;"
/>
</div>
<div
style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
>
<div
style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
/>
<div
style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
</div>
</div>
</div>
</div>
`;

38
packages/kbn-ui-framework/src/components/code_editor/_code_editor.scss
View file

@ -1,38 +0,0 @@
.kuiCodeEditorWrapper {
position: relative;
.ace_hidden-cursors {
opacity: 0;
}
&.kuiCodeEditorWrapper-isEditing {
.ace_hidden-cursors {
opacity: 1;
}
}
}
.kuiCodeEditorKeyboardHint {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: rgba(255, 255, 255, 0.7);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
opacity: 0;
&:focus {
opacity: 1;
border: 2px solid $kuiColorBlue;
z-index: 1000;
}
&.kuiCodeEditorKeyboardHint-isInactive {
display: none;
}
}

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