mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 17:59:23 -04:00
[UI Framework] Reactify kuiHeaderBar and related CSS components (#12280)
* [UI Framework] Reactify kuiHeaderBar and related CSS components
This commit is contained in:
Árpád Poprádi
CJ Cenizal
parent
120c065e91
commit
0b0a2facbb
18 changed files with 416 additions and 271 deletions
|
|
@ -0,0 +1,11 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders KuiHeaderBar 1`] = `
|
||||
<div
|
||||
aria-label="aria-label"
|
||||
class="kuiHeaderBar testClass1 testClass2"
|
||||
data-test-subj="test subject string"
|
||||
>
|
||||
children
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders KuiHeaderBarSection 1`] = `
|
||||
<div
|
||||
aria-label="aria-label"
|
||||
class="kuiHeaderBarSection testClass1 testClass2"
|
||||
data-test-subj="test subject string"
|
||||
>
|
||||
children
|
||||
</div>
|
||||
`;
|
||||
19
ui_framework/components/header_bar/header_bar.js
Normal file
19
ui_framework/components/header_bar/header_bar.js
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import classNames from 'classnames';
|
||||
|
||||
export const KuiHeaderBar = ({ children, className, ...rest }) => {
|
||||
const classes = classNames('kuiHeaderBar', className);
|
||||
return (
|
||||
<div
|
||||
className={classes}
|
||||
{...rest}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
KuiHeaderBar.propTypes = {
|
||||
children: PropTypes.node,
|
||||
className: PropTypes.string,
|
||||
};
|
||||
12
ui_framework/components/header_bar/header_bar.test.js
Normal file
12
ui_framework/components/header_bar/header_bar.test.js
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
import React from 'react';
|
||||
import { render } from 'enzyme';
|
||||
import { requiredProps } from '../../test/required_props';
|
||||
|
||||
import {
|
||||
KuiHeaderBar
|
||||
} from './header_bar';
|
||||
|
||||
test('renders KuiHeaderBar', () => {
|
||||
const component = <KuiHeaderBar { ...requiredProps }>children</KuiHeaderBar>;
|
||||
expect(render(component)).toMatchSnapshot();
|
||||
});
|
||||
19
ui_framework/components/header_bar/header_bar_section.js
Normal file
19
ui_framework/components/header_bar/header_bar_section.js
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import classNames from 'classnames';
|
||||
|
||||
export const KuiHeaderBarSection = ({ children, className, ...rest }) => {
|
||||
const classes = classNames('kuiHeaderBarSection', className);
|
||||
return (
|
||||
<div
|
||||
className={classes}
|
||||
{...rest}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
KuiHeaderBarSection.propTypes = {
|
||||
children: PropTypes.node,
|
||||
className: PropTypes.string,
|
||||
};
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import React from 'react';
|
||||
import { render } from 'enzyme';
|
||||
import { requiredProps } from '../../test/required_props';
|
||||
|
||||
import {
|
||||
KuiHeaderBarSection
|
||||
} from './header_bar_section';
|
||||
|
||||
test('renders KuiHeaderBarSection', () => {
|
||||
const component = <KuiHeaderBarSection { ...requiredProps }>children</KuiHeaderBarSection>;
|
||||
expect(render(component)).toMatchSnapshot();
|
||||
});
|
||||
2
ui_framework/components/header_bar/index.js
Normal file
2
ui_framework/components/header_bar/index.js
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
export { KuiHeaderBar } from './header_bar';
|
||||
export { KuiHeaderBarSection } from './header_bar_section';
|
||||
|
|
@ -51,6 +51,11 @@ export {
|
|||
KuiGalleryButtonLabel
|
||||
} from './gallery';
|
||||
|
||||
export {
|
||||
KuiHeaderBar,
|
||||
KuiHeaderBarSection,
|
||||
} from './header_bar';
|
||||
|
||||
export { KuiInfoButton } from './info_button';
|
||||
|
||||
export {
|
||||
|
|
|
|||
|
|
@ -167,6 +167,7 @@ const components = [{
|
|||
}, {
|
||||
name: 'HeaderBar',
|
||||
component: HeaderBarExample,
|
||||
hasReact: true,
|
||||
}, {
|
||||
name: 'Icon',
|
||||
component: IconExample,
|
||||
|
|
|
|||
|
|
@ -8,6 +8,8 @@ import {
|
|||
KuiEventBodyMetadata,
|
||||
KuiMenu,
|
||||
KuiMenuItem,
|
||||
KuiHeaderBar,
|
||||
KuiHeaderBarSection
|
||||
} from '../../../../components';
|
||||
|
||||
export default () => (
|
||||
|
|
@ -16,19 +18,19 @@ export default () => (
|
|||
<div className="kuiViewContent kuiViewContent--constrainedWidth">
|
||||
<div className="kuiViewContentItem">
|
||||
|
||||
<div className="kuiHeaderBar">
|
||||
<div className="kuiHeaderBarSection">
|
||||
<KuiHeaderBar>
|
||||
<KuiHeaderBarSection>
|
||||
<h2 className="kuiSubTitle">
|
||||
Cluster of Almonds
|
||||
</h2>
|
||||
</div>
|
||||
</KuiHeaderBarSection>
|
||||
|
||||
<div className="kuiHeaderBarSection">
|
||||
<KuiHeaderBarSection>
|
||||
<div className="kuiText">
|
||||
<a className="kuiLink" href="#">View all 21 almonds</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</KuiHeaderBarSection>
|
||||
</KuiHeaderBar>
|
||||
|
||||
<KuiMenu className="kuiVerticalRhythm">
|
||||
<KuiMenuItem>
|
||||
|
|
|
|||
|
|
@ -1,7 +0,0 @@
|
|||
<div class="kuiHeaderBar">
|
||||
<div class="kuiHeaderBarSection">
|
||||
<h2 class="kuiSubTitle">
|
||||
Section 1
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
18
ui_framework/doc_site/src/views/header_bar/header_bar.js
Normal file
18
ui_framework/doc_site/src/views/header_bar/header_bar.js
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
import React from 'react';
|
||||
|
||||
import {
|
||||
KuiHeaderBar,
|
||||
KuiHeaderBarSection
|
||||
} from '../../../../components';
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<KuiHeaderBar>
|
||||
<KuiHeaderBarSection>
|
||||
<h2 className="kuiSubTitle">
|
||||
Section 1
|
||||
</h2>
|
||||
</KuiHeaderBarSection>
|
||||
</KuiHeaderBar>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
import React from 'react';
|
||||
import { renderToHtml } from '../../services';
|
||||
|
||||
import {
|
||||
GuideDemo,
|
||||
|
|
@ -7,33 +8,44 @@ import {
|
|||
GuideSectionTypes,
|
||||
} from '../../components';
|
||||
|
||||
const headerBarHtml = require('./header_bar.html');
|
||||
const twoSectionsHtml = require('./header_bar_two_sections.html');
|
||||
import HeaderBar from './header_bar';
|
||||
const headerBarSource = require('!!raw!./header_bar');
|
||||
const headerBarHtml = renderToHtml(HeaderBar);
|
||||
|
||||
import HeaderBarTwoSections from './header_bar_two_sections';
|
||||
const headerBarTwoSectionsSource = require('!!raw!./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
|
||||
html={headerBarHtml}
|
||||
/>
|
||||
<GuideDemo>
|
||||
<HeaderBar />
|
||||
</GuideDemo>
|
||||
</GuideSection>
|
||||
|
||||
<GuideSection
|
||||
title="Two sections"
|
||||
source={[{
|
||||
type: GuideSectionTypes.JS,
|
||||
code: headerBarTwoSectionsSource,
|
||||
}, {
|
||||
type: GuideSectionTypes.HTML,
|
||||
code: twoSectionsHtml,
|
||||
code: headerBarTwoSectionsHtml,
|
||||
}]}
|
||||
>
|
||||
<GuideDemo
|
||||
html={twoSectionsHtml}
|
||||
/>
|
||||
<GuideDemo>
|
||||
<HeaderBarTwoSections />
|
||||
</GuideDemo>
|
||||
</GuideSection>
|
||||
</GuidePage>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,230 +0,0 @@
|
|||
<div class="kuiView">
|
||||
<!-- Constrained width, centered content -->
|
||||
<div class="kuiViewContent kuiViewContent--constrainedWidth">
|
||||
<div class="kuiViewContentItem">
|
||||
<div class="kuiHeaderBar kuiVerticalRhythm">
|
||||
<div class="kuiHeaderBarSection">
|
||||
<h2 class="kuiSubTitle">
|
||||
Elysium stork
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="kuiHeaderBarSection">
|
||||
<span class="kuiText">
|
||||
<span class="kuiStatusText kuiStatusText--error">
|
||||
<span class="kuiStatusText__icon kuiIcon fa-warning"></span>
|
||||
Rope Hoth
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Table -->
|
||||
<div class="kuiControlledTable kuiVerticalRhythm">
|
||||
<!-- ToolBar -->
|
||||
<div class="kuiToolBar">
|
||||
<div class="kuiToolBarSearch">
|
||||
<div class="kuiToolBarSearchBox">
|
||||
<div class="kuiToolBarSearchBox__icon kuiIcon fa-search"></div>
|
||||
<input
|
||||
class="kuiToolBarSearchBox__input"
|
||||
type="text"
|
||||
placeholder="Search..."
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="kuiToolBarSection">
|
||||
<button class="kuiButton kuiButton--primary">
|
||||
Add
|
||||
</button>
|
||||
|
||||
<button class="kuiButton kuiButton--basic kuiButton--icon">
|
||||
<span class="kuiButton__icon kuiIcon fa-gear"></span>
|
||||
</button>
|
||||
|
||||
<button class="kuiButton kuiButton--basic kuiButton--icon">
|
||||
<span class="kuiButton__icon kuiIcon fa-bars"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="kuiToolBarSection">
|
||||
<div class="kuiToolBarText">
|
||||
1 – 20 of 33
|
||||
</div>
|
||||
|
||||
<div class="kuiButtonGroup kuiButtonGroup--united">
|
||||
<button class="kuiButton kuiButton--basic kuiButton--icon">
|
||||
<span class="kuiButton__icon kuiIcon fa-chevron-left"></span>
|
||||
</button>
|
||||
<button class="kuiButton kuiButton--basic kuiButton--icon">
|
||||
<span class="kuiButton__icon kuiIcon fa-chevron-right"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Table -->
|
||||
<table class="kuiTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="kuiTableHeaderCell kuiTableHeaderCell--checkBox">
|
||||
<input type="checkbox" class="kuiCheckBox">
|
||||
</th>
|
||||
<th class="kuiTableHeaderCell">
|
||||
Title
|
||||
</th>
|
||||
<th class="kuiTableHeaderCell">
|
||||
Status
|
||||
</th>
|
||||
<th class="kuiTableHeaderCell">
|
||||
Date created
|
||||
</th>
|
||||
<th class="kuiTableHeaderCell kuiTableHeaderCell--alignRight">
|
||||
Orders of magnitude
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr class="kuiTableRow">
|
||||
<td class="kuiTableRowCell kuiTableRowCell--checkBox">
|
||||
<div class="kuiTableRowCell__liner">
|
||||
<input type="checkbox" class="kuiCheckBox">
|
||||
</div>
|
||||
</td>
|
||||
<td class="kuiTableRowCell">
|
||||
<div class="kuiTableRowCell__liner">
|
||||
<a class="kuiLink" href="#">Alligator</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="kuiTableRowCell">
|
||||
<div class="kuiTableRowCell__liner">
|
||||
<div class="kuiIcon kuiIcon--success fa-check"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="kuiTableRowCell">
|
||||
<div class="kuiTableRowCell__liner">
|
||||
Tue Dec 06 2016 12:56:15 GMT-0800 (PST)
|
||||
</div>
|
||||
</td>
|
||||
<td class="kuiTableRowCell kuiTableRowCell--alignRight">
|
||||
<div class="kuiTableRowCell__liner">
|
||||
1
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="kuiTableRow">
|
||||
<td class="kuiTableRowCell kuiTableRowCell--checkBox">
|
||||
<div class="kuiTableRowCell__liner">
|
||||
<input type="checkbox" class="kuiCheckBox">
|
||||
</div>
|
||||
</td>
|
||||
<td class="kuiTableRowCell">
|
||||
<div class="kuiTableRowCell__liner">
|
||||
<a class="kuiLink" href="#">Boomerang</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="kuiTableRowCell">
|
||||
<div class="kuiTableRowCell__liner">
|
||||
<div class="kuiIcon kuiIcon--success fa-check"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="kuiTableRowCell">
|
||||
<div class="kuiTableRowCell__liner">
|
||||
Tue Dec 06 2016 12:56:15 GMT-0800 (PST)
|
||||
</div>
|
||||
</td>
|
||||
<td class="kuiTableRowCell kuiTableRowCell--alignRight">
|
||||
<div class="kuiTableRowCell__liner">
|
||||
10
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="kuiTableRow">
|
||||
<td class="kuiTableRowCell kuiTableRowCell--checkBox">
|
||||
<div class="kuiTableRowCell__liner">
|
||||
<input type="checkbox" class="kuiCheckBox">
|
||||
</div>
|
||||
</td>
|
||||
<td class="kuiTableRowCell">
|
||||
<div class="kuiTableRowCell__liner">
|
||||
<a class="kuiLink" href="#">Celebration</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="kuiTableRowCell">
|
||||
<div class="kuiTableRowCell__liner">
|
||||
<div class="kuiIcon kuiIcon--warning fa-bolt"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="kuiTableRowCell">
|
||||
<div class="kuiTableRowCell__liner">
|
||||
Tue Dec 06 2016 12:56:15 GMT-0800 (PST)
|
||||
</div>
|
||||
</td>
|
||||
<td class="kuiTableRowCell kuiTableRowCell--alignRight">
|
||||
<div class="kuiTableRowCell__liner">
|
||||
100
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="kuiTableRow">
|
||||
<td class="kuiTableRowCell kuiTableRowCell--checkBox">
|
||||
<div class="kuiTableRowCell__liner">
|
||||
<input type="checkbox" class="kuiCheckBox">
|
||||
</div>
|
||||
</td>
|
||||
<td class="kuiTableRowCell">
|
||||
<div class="kuiTableRowCell__liner">
|
||||
<a class="kuiLink" href="#">Dog</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="kuiTableRowCell">
|
||||
<div class="kuiTableRowCell__liner">
|
||||
<div class="kuiIcon kuiIcon--error fa-warning"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="kuiTableRowCell">
|
||||
<div class="kuiTableRowCell__liner">
|
||||
Tue Dec 06 2016 12:56:15 GMT-0800 (PST)
|
||||
</div>
|
||||
</td>
|
||||
<td class="kuiTableRowCell kuiTableRowCell--alignRight">
|
||||
<div class="kuiTableRowCell__liner">
|
||||
1000
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- ToolBarFooter -->
|
||||
<div class="kuiToolBarFooter">
|
||||
<div class="kuiToolBarFooterSection">
|
||||
<div class="kuiToolBarText">
|
||||
5 Items selected
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="kuiToolBarFooterSection">
|
||||
<div class="kuiToolBarText">
|
||||
1 – 20 of 33
|
||||
</div>
|
||||
|
||||
<div class="kuiButtonGroup kuiButtonGroup--united">
|
||||
<button class="kuiButton kuiButton--basic kuiButton--icon">
|
||||
<span class="kuiButton__icon kuiIcon fa-chevron-left"></span>
|
||||
</button>
|
||||
<button class="kuiButton kuiButton--basic kuiButton--icon">
|
||||
<span class="kuiButton__icon kuiIcon fa-chevron-right"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
import React from 'react';
|
||||
import { renderToHtml } from '../../services';
|
||||
|
||||
import {
|
||||
GuideDemo,
|
||||
|
|
@ -7,19 +8,24 @@ import {
|
|||
GuideSectionTypes,
|
||||
} from '../../components';
|
||||
|
||||
const html = require('./header_bar_sandbox.html');
|
||||
import HeaderBarSandboxContent from './header_bar_sandbox_content';
|
||||
const headerBarSandboxContentSource = require('!!raw!./header_bar_sandbox_content');
|
||||
const headerBarSandboxContentHtml = renderToHtml(HeaderBarSandboxContent);
|
||||
|
||||
export default props => (
|
||||
<GuideSandbox>
|
||||
<GuideDemo
|
||||
isFullScreen={true}
|
||||
html={html}
|
||||
html={headerBarSandboxContentHtml}
|
||||
/>
|
||||
|
||||
<GuideSandboxCodeToggle
|
||||
source={[{
|
||||
type: GuideSectionTypes.JS,
|
||||
code: headerBarSandboxContentSource,
|
||||
}, {
|
||||
type: GuideSectionTypes.HTML,
|
||||
code: html,
|
||||
code: headerBarSandboxContentHtml,
|
||||
}]}
|
||||
title={props.route.name}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,241 @@
|
|||
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"></span>
|
||||
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"></div>
|
||||
<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"></span>
|
||||
</button>
|
||||
|
||||
<button className="kuiButton kuiButton--basic kuiButton--icon">
|
||||
<span className="kuiButton__icon kuiIcon fa-bars"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="kuiToolBarSection">
|
||||
<div className="kuiToolBarText">
|
||||
1 – 20 of 33
|
||||
</div>
|
||||
|
||||
<div className="kuiButtonGroup kuiButtonGroup--united">
|
||||
<button className="kuiButton kuiButton--basic kuiButton--icon">
|
||||
<span className="kuiButton__icon kuiIcon fa-chevron-left"></span>
|
||||
</button>
|
||||
<button className="kuiButton kuiButton--basic kuiButton--icon">
|
||||
<span className="kuiButton__icon kuiIcon fa-chevron-right"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Table */}
|
||||
<table className="kuiTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="kuiTableHeaderCell kuiTableHeaderCell--checkBox">
|
||||
<input type="checkbox" className="kuiCheckBox"/>
|
||||
</th>
|
||||
<th className="kuiTableHeaderCell">
|
||||
Title
|
||||
</th>
|
||||
<th className="kuiTableHeaderCell">
|
||||
Status
|
||||
</th>
|
||||
<th className="kuiTableHeaderCell">
|
||||
Date created
|
||||
</th>
|
||||
<th 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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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 – 20 of 33
|
||||
</div>
|
||||
|
||||
<div className="kuiButtonGroup kuiButtonGroup--united">
|
||||
<button className="kuiButton kuiButton--basic kuiButton--icon">
|
||||
<span className="kuiButton__icon kuiIcon fa-chevron-left"></span>
|
||||
</button>
|
||||
<button className="kuiButton kuiButton--basic kuiButton--icon">
|
||||
<span className="kuiButton__icon kuiIcon fa-chevron-right"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
<div class="kuiHeaderBar">
|
||||
<div class="kuiHeaderBarSection">
|
||||
<h2 class="kuiSubTitle">
|
||||
Cluster Alerts
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="kuiHeaderBarSection">
|
||||
<span class="kuiText">
|
||||
<span class="kuiStatusText kuiStatusText--error">
|
||||
<span class="kuiStatusText__icon kuiIcon fa-warning"></span>
|
||||
Red health
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
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"></span>
|
||||
Red health
|
||||
</span>
|
||||
</span>
|
||||
</KuiHeaderBarSection>
|
||||
</KuiHeaderBar>
|
||||
);
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue