diff --git a/ui_framework/doc_site/src/services/routes/routes.js b/ui_framework/doc_site/src/services/routes/routes.js index aeffc98698f14..7e1edd7ea441b 100644 --- a/ui_framework/doc_site/src/services/routes/routes.js +++ b/ui_framework/doc_site/src/services/routes/routes.js @@ -12,6 +12,9 @@ import HeaderExample import KeyPadMenuExample from '../../views/key_pad_menu/key_pad_menu_example'; +import KibanaSandbox + from '../../views/kibana/kibana_sandbox'; + import PageExample from '../../views/page/page_example'; @@ -21,6 +24,7 @@ import PopoverExample import TypographyExample from '../../views/typography/typography_example'; + // Component route names should match the component name exactly. const components = [{ name: 'Accessibility', @@ -52,7 +56,11 @@ const components = [{ hasReact: true, }]; -const sandboxes = []; +const sandboxes = [{ + name: 'Kibana', + component: KibanaSandbox, + hasReact: true, +}]; const allRoutes = components.concat(sandboxes); diff --git a/ui_framework/doc_site/src/views/kibana/kibana.js b/ui_framework/doc_site/src/views/kibana/kibana.js new file mode 100644 index 0000000000000..ef11644b79494 --- /dev/null +++ b/ui_framework/doc_site/src/views/kibana/kibana.js @@ -0,0 +1,332 @@ +import React, { + Component, +} from 'react'; + +import { + KuiHeader, + KuiHeaderBreadcrumb, + KuiHeaderBreadcrumbCollapsed, + KuiHeaderBreadcrumbs, + KuiHeaderLogo, + KuiHeaderSection, + KuiHeaderSectionItem, + KuiHeaderSectionItemButton, + KuiIcon, + KuiKeyPadMenu, + KuiKeyPadMenuItem, + KuiPage, + KuiPageBody, + KuiPageContent, + KuiPageContentBody, + KuiPageContentHeader, + KuiPageContentHeaderSection, + KuiPageHeader, + KuiPageHeaderSection, + KuiPageSidebar, + KuiPopover, + KuiTitle, +} from '../../../../components'; + +export default class extends Component { + constructor(props) { + super(props); + + this.state = { + isUserMenuOpen: false, + isAppMenuOpen: false, + }; + } + + onUserMenuButtonClick() { + this.setState({ + isUserMenuOpen: !this.state.isUserMenuOpen, + }); + } + + onAppMenuButtonClick() { + this.setState({ + isAppMenuOpen: !this.state.isAppMenuOpen, + }); + } + + closeUserMenu() { + this.setState({ + isUserMenuOpen: false, + }); + } + + closeAppMenu() { + this.setState({ + isAppMenuOpen: false, + }); + } + + renderLogo() { + return ( + + ); + } + + renderBreadcrumbs() { + return ( + + + Management + + + + Truncation test is here + + + + + + Users + + + + Create + + + ); + } + + renderSearch() { + return ( + + + + ); + } + + renderUserMenu() { + const button = ( + + + 3 + + ); + + return ( + +
+
+
+
+
+

John Username

+
+ +
+ Log out +
+
+
+
+
+ + + +

Here's a notification title

+

I am the hat judge. Show me a hat and I will tell you if it's a good hat or bad hat.

+
+ +
+ Nov. 14, 02:14PM. +
+
+
+
+ + + +

Here's a really long notification title with nonsense beneath it.

+

Walk the cow through a warm room, and then bring it to my plate.

+
+ +
+ Nov. 14, 02:14PM. +
+
+
+
+ + + +

Here's a notification title

+

+ Only usable on grilled cheese sandwiches. + That is the only application of Kraft Singles as far as I'm concerned. +

+
+ +
+ Nov. 14, 02:14PM. +
+
+
+ + ); + } + + renderAppMenu() { + const button = ( + + + + ); + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); + } + + renderHeader() { + return ( + + + + {this.renderLogo()} + + + {this.renderBreadcrumbs()} + + + + + {this.renderSearch()} + + + + {this.renderUserMenu()} + + + + {this.renderAppMenu()} + + + + ); + } + + renderPage() { + return ( + + + + +

Page title

+ + + + Page abilities + + + + + Sidebar nav + + + + + +

Content title

+ + + + Content abilities + + + + Content body + + + + + ); + } + + render() { + return ( +
+ {this.renderHeader()} + {this.renderPage()} +
+ ); + } +} + diff --git a/ui_framework/doc_site/src/views/kibana/kibana_sandbox.js b/ui_framework/doc_site/src/views/kibana/kibana_sandbox.js new file mode 100644 index 0000000000000..f0e3c1976c818 --- /dev/null +++ b/ui_framework/doc_site/src/views/kibana/kibana_sandbox.js @@ -0,0 +1,33 @@ +import React from 'react'; + +import { renderToHtml } from '../../services'; + +import { + GuideDemo, + GuideSandbox, + GuideSandboxCodeToggle, + GuideSectionTypes, +} from '../../components'; + +import Kibana from './kibana'; +const kibanaSource = require('!!raw!./kibana'); +const kibanaHtml = renderToHtml(Kibana); + +export default props => ( + + + + + + + +); diff --git a/ui_framework/generator-kui/documentation/index.js b/ui_framework/generator-kui/documentation/index.js index 9cbf993b3ea29..03eff1d7e0853 100644 --- a/ui_framework/generator-kui/documentation/index.js +++ b/ui_framework/generator-kui/documentation/index.js @@ -95,11 +95,13 @@ module.exports = class extends Generator { const writeSandbox = () => { const fileName = config.name; const componentExampleName = utils.makeComponentName(fileName, false); + const componentExamplePrefix = utils.lowerCaseFirstLetter(componentExampleName); const path = DOCUMENTATION_PAGE_PATH; const vars = config.documentationVars = { componentExampleName, + componentExamplePrefix, fileName, }; @@ -107,11 +109,6 @@ module.exports = class extends Generator { = config.documentationPageDemoPath = `${path}/${config.name}/${fileName}`; - this.fs.copyTpl( - this.templatePath('documentation_sandbox.html'), - this.destinationPath(`${sandboxPath}_sandbox.html`) - ); - this.fs.copyTpl( this.templatePath('documentation_sandbox.js'), this.destinationPath(`${sandboxPath}_sandbox.js`), @@ -131,6 +128,7 @@ module.exports = class extends Generator { case 'sandbox': writeSandbox(); + writeDocumentationPageDemo(config.name, config.name); break; } } diff --git a/ui_framework/generator-kui/documentation/templates/documentation_sandbox.js b/ui_framework/generator-kui/documentation/templates/documentation_sandbox.js index 3edfa10665c65..385edb7ffe1e7 100644 --- a/ui_framework/generator-kui/documentation/templates/documentation_sandbox.js +++ b/ui_framework/generator-kui/documentation/templates/documentation_sandbox.js @@ -1,5 +1,7 @@ import React from 'react'; +import { renderToHtml } from '../../services'; + import { GuideDemo, GuideSandbox, @@ -7,21 +9,25 @@ import { GuideSectionTypes, } from '../../components'; -const html = require('./<%= fileName %>_sandbox.html'); +import <%= componentExampleName %> from './<%= fileName %>'; +const <%= componentExamplePrefix %>Source = require('!!raw!./<%= fileName %>'); +const <%= componentExamplePrefix %>Html = renderToHtml(<%= componentExampleName %>); export default props => ( - + + <<%= componentExampleName %> /> + Source, + }, { type: GuideSectionTypes.HTML, - code: html, + code: <%= componentExamplePrefix %>Html, }]} - title={props.route.name} /> );