From 8516c3e99a374ee3a9bb65bc20e0e1d33d202836 Mon Sep 17 00:00:00 2001 From: Joe Fleming Date: Thu, 31 Aug 2017 17:09:24 -0700 Subject: [PATCH 1/7] chore: checkin with working static build --- packages/ui_framework/.gitignore | 1 + packages/ui_framework/README.md | 211 + packages/ui_framework/components/index.js | 1 + packages/ui_framework/dist/ui_framework.css | 3552 +++++++++++++++++ .../ui_framework/doc_site/build/index.html | 13 + .../ui_framework/doc_site/postcss.config.js | 5 + .../doc_site/src/actions/action_types.js | 18 + .../src/actions/code_viewer_actions.js | 11 + .../src/actions/example_nav_actions.js | 12 + .../doc_site/src/actions/index.js | 14 + .../doc_site/src/actions/sandbox_actions.js | 9 + .../doc_site/src/components/guide/_guide.scss | 108 + .../components/guide_code/_guide_code.scss | 6 + .../src/components/guide_code/guide_code.js | 5 + .../guide_code_viewer/_guide_code_viewer.scss | 113 + .../guide_code_viewer/guide_code_viewer.js | 80 + .../src/components/guide_components.scss | 62 + .../components/guide_demo/_guide_demo.scss | 14 + .../src/components/guide_demo/guide_demo.js | 66 + .../components/guide_link/_guide_link.scss | 9 + .../src/components/guide_link/guide_link.js | 11 + .../src/components/guide_nav/_guide_nav.scss | 204 + .../src/components/guide_nav/guide_nav.js | 228 ++ .../components/guide_page/_guide_page.scss | 36 + .../src/components/guide_page/guide_page.js | 57 + .../guide_page/guide_page_container.js | 9 + .../_guide_page_side_nav.scss | 44 + .../guide_page_side_nav.js | 21 + .../guide_page_side_nav_item.js | 35 + .../guide_sandbox/_guide_sandbox.scss | 10 + .../components/guide_sandbox/guide_sandbox.js | 55 + .../guide_sandbox_code_toggle.js | 30 + .../guide_sandbox_code_toggle_container.js | 13 + .../guide_section/_guide_section.scss | 39 + .../components/guide_section/guide_section.js | 59 + .../guide_section/guide_section_container.js | 17 + .../guide_section/guide_section_types.js | 4 + .../components/guide_text/_guide_text.scss | 16 + .../src/components/guide_text/guide_text.js | 5 + .../doc_site/src/components/index.js | 15 + .../doc_site/src/images/elastic-logo.svg | 3 + .../doc_site/src/images/hint-arrow.svg | 25 + .../doc_site/src/images/react-logo.svg | 15 + packages/ui_framework/doc_site/src/index.js | 80 + packages/ui_framework/doc_site/src/main.scss | 2 + .../src/services/example/create_example.js | 16 + .../doc_site/src/services/index.js | 9 + .../src/services/js_injector/js_injector.js | 21 + .../doc_site/src/services/routes/routes.js | 285 ++ .../src/services/string/render_to_html.js | 17 + .../doc_site/src/services/string/slugify.js | 27 + .../doc_site/src/store/configure_store.js | 39 + .../ui_framework/doc_site/src/store/index.js | 19 + .../src/store/reducers/code_viewer_reducer.js | 46 + .../src/store/reducers/sandbox_reducer.js | 26 + .../src/store/reducers/sections_reducer.js | 36 + .../accessibility/accessibility_example.js | 77 + .../accessibility/keyboard_accessible.js | 56 + .../src/views/accessibility/screen_reader.js | 23 + .../src/views/action_item/action_item.js | 22 + .../views/action_item/action_item_example.js | 61 + .../views/action_item/action_items_in_menu.js | 62 + .../doc_site/src/views/app_container.js | 43 + .../doc_site/src/views/app_view.js | 129 + .../doc_site/src/views/badge/badge_example.js | 31 + .../src/views/badge/default_badge.html | 9 + .../doc_site/src/views/bar/bar.js | 22 + .../doc_site/src/views/bar/bar_example.js | 91 + .../doc_site/src/views/bar/bar_one_section.js | 22 + .../src/views/bar/bar_three_sections.js | 44 + .../doc_site/src/views/button/button_basic.js | 27 + .../src/views/button/button_danger.js | 24 + .../src/views/button/button_elements.js | 62 + .../src/views/button/button_example.js | 286 ++ .../doc_site/src/views/button/button_group.js | 32 + .../src/views/button/button_group_united.js | 39 + .../src/views/button/button_hollow.js | 23 + .../src/views/button/button_loading.js | 60 + .../src/views/button/button_primary.js | 23 + .../src/views/button/button_secondary.js | 24 + .../src/views/button/button_sizes.html | 55 + .../src/views/button/button_warning.js | 24 + .../src/views/button/button_with_icon.js | 66 + .../doc_site/src/views/card/card.js | 35 + .../doc_site/src/views/card/card_example.js | 58 + .../doc_site/src/views/card/card_group.js | 161 + .../views/collapse_button/collapse_button.js | 14 + .../collapse_button_example.js | 38 + .../src/views/color_picker/color_picker.js | 20 + .../views/color_picker/color_picker_clear.js | 54 + .../color_picker/color_picker_example.js | 69 + .../color_picker_no_color_label.js | 40 + .../src/views/column/column_example.js | 37 + .../doc_site/src/views/column/columns.html | 47 + .../empty_table_prompt/empty_table_prompt.js | 22 + .../empty_table_prompt_example.js | 61 + .../table_with_empty_prompt.js | 61 + .../doc_site/src/views/event/event.js | 27 + .../doc_site/src/views/event/event_example.js | 60 + .../doc_site/src/views/event/event_menu.js | 69 + .../src/views/event/events_sandbox.js | 33 + .../src/views/event/events_sandbox_content.js | 93 + .../src/views/expression/expression.html | 59 + .../src/views/expression/expression.js | 26 + .../views/expression/expression_example.js | 38 + .../src/views/form/assisted_input.html | 14 + .../doc_site/src/views/form/check_box.html | 21 + .../doc_site/src/views/form/form_example.js | 168 + .../doc_site/src/views/form/label.html | 3 + .../doc_site/src/views/form/search_input.html | 41 + .../doc_site/src/views/form/select.html | 29 + .../doc_site/src/views/form/static_input.html | 6 + .../doc_site/src/views/form/text_area.html | 47 + .../views/form/text_area_non_resizable.html | 3 + .../doc_site/src/views/form/text_input.html | 21 + .../src/views/form_layout/field_group.js | 103 + .../views/form_layout/form_layout_example.js | 32 + .../doc_site/src/views/gallery/gallery.js | 97 + .../src/views/gallery/gallery_example.js | 38 + .../src/views/header_bar/header_bar.js | 18 + .../views/header_bar/header_bar_example.js | 51 + .../views/header_bar/header_bar_sandbox.js | 33 + .../header_bar/header_bar_sandbox_content.js | 241 ++ .../header_bar/header_bar_two_sections.js | 27 + .../doc_site/src/views/home/home_view.js | 85 + .../doc_site/src/views/icon/icon.html | 1 + .../doc_site/src/views/icon/icon_basic.html | 1 + .../doc_site/src/views/icon/icon_error.html | 1 + .../doc_site/src/views/icon/icon_example.js | 157 + .../src/views/icon/icon_inactive.html | 1 + .../doc_site/src/views/icon/icon_info.html | 1 + .../doc_site/src/views/icon/icon_spinner.html | 23 + .../doc_site/src/views/icon/icon_spinner.js | 19 + .../doc_site/src/views/icon/icon_success.html | 1 + .../doc_site/src/views/icon/icon_warning.html | 1 + .../src/views/info_button/info_button.js | 12 + .../views/info_button/info_button_example.js | 42 + .../views/info_panel/info_panel_error.html | 14 + .../views/info_panel/info_panel_example.js | 82 + .../src/views/info_panel/info_panel_info.html | 18 + .../views/info_panel/info_panel_success.html | 14 + .../views/info_panel/info_panel_warning.html | 14 + .../doc_site/src/views/link/link.html | 4 + .../doc_site/src/views/link/link_example.js | 31 + .../views/local_nav/local_nav_breadcrumbs.js | 39 + .../local_nav/local_nav_date_picker.html | 375 ++ .../src/views/local_nav/local_nav_dropdown.js | 122 + .../local_nav/local_nav_dropdown_panels.js | 82 + .../src/views/local_nav/local_nav_example.js | 276 ++ .../local_nav/local_nav_menu_item_states.js | 52 + .../src/views/local_nav/local_nav_search.js | 75 + .../views/local_nav/local_nav_search_error.js | 52 + .../src/views/local_nav/local_nav_simple.js | 33 + .../src/views/local_nav/local_nav_tabs.js | 54 + .../doc_site/src/views/menu/menu.js | 24 + .../doc_site/src/views/menu/menu_contained.js | 24 + .../doc_site/src/views/menu/menu_example.js | 52 + .../views/menu_button/menu_button_basic.html | 9 + .../views/menu_button/menu_button_danger.html | 9 + .../menu_button/menu_button_elements.html | 17 + .../views/menu_button/menu_button_example.js | 100 + .../views/menu_button/menu_button_group.html | 19 + .../menu_button/menu_button_primary.html | 9 + .../menu_button/menu_button_with_icon.html | 17 + .../src/views/micro_button/micro_button.html | 3 + .../micro_button/micro_button_elements.html | 9 + .../micro_button/micro_button_example.js | 66 + .../micro_button/micro_button_group.html | 13 + .../src/views/modal/confirm_modal_example.js | 50 + .../doc_site/src/views/modal/modal_example.js | 56 + .../doc_site/src/views/modal/static.js | 16 + .../src/views/not_found/not_found_view.js | 29 + .../src/views/notice/notice_sandbox.html | 25 + .../src/views/notice/notice_sandbox.js | 27 + .../doc_site/src/views/pager/pager_buttons.js | 46 + .../doc_site/src/views/pager/pager_example.js | 60 + .../src/views/pager/tool_bar_pager.js | 25 + .../doc_site/src/views/panel/panel.html | 5 + .../doc_site/src/views/panel/panel_example.js | 61 + .../panel/panel_with_header_sections.html | 19 + .../src/views/panel/panel_with_toolbar.html | 10 + .../doc_site/src/views/popover/popover.js | 48 + .../views/popover/popover_anchor_position.js | 77 + .../views/popover/popover_body_class_name.js | 47 + .../src/views/popover/popover_example.js | 76 + .../src/views/status_text/status_text.html | 37 + .../views/status_text/status_text_error.html | 6 + .../views/status_text/status_text_example.js | 78 + .../views/status_text/status_text_info.html | 6 + .../status_text/status_text_success.html | 6 + .../status_text/status_text_warning.html | 6 + .../src/views/table/controlled_table.js | 184 + .../table/controlled_table_loading_items.js | 86 + .../controlled_table_with_empty_prompt.js | 87 + .../table/controlled_table_with_no_items.js | 86 + .../doc_site/src/views/table/fluid_table.js | 109 + .../doc_site/src/views/table/table.js | 201 + .../doc_site/src/views/table/table_example.js | 155 + .../views/table/table_with_menu_buttons.js | 96 + .../doc_site/src/views/tabs/tabs.js | 58 + .../doc_site/src/views/tabs/tabs_example.js | 47 + .../views/toggle_button/toggle_button.html | 4 + .../src/views/toggle_button/toggle_button.js | 17 + .../toggle_button/toggle_button_disabled.html | 4 + .../toggle_button/toggle_button_example.js | 61 + .../src/views/toggle_button/toggle_panel.html | 15 + .../src/views/toggle_button/toggle_panel.js | 22 + .../doc_site/src/views/tool_bar/tool_bar.js | 57 + .../src/views/tool_bar/tool_bar_example.js | 62 + .../src/views/tool_bar/tool_bar_footer.js | 35 + .../src/views/typography/sub_text.html | 3 + .../src/views/typography/sub_title.html | 3 + .../src/views/typography/subdued_type.html | 11 + .../doc_site/src/views/typography/text.html | 3 + .../src/views/typography/text_title.html | 3 + .../doc_site/src/views/typography/title.html | 3 + .../views/typography/typography_example.js | 117 + .../vertical_rhythm/vertical_rhythm.html | 8 + .../vertical_rhythm_as_wrapper.html | 41 + .../vertical_rhythm_example.js | 84 + .../vertical_rhythm_on_component.html | 35 + .../vertical_rhythm_small.html | 8 + .../doc_site/src/views/view/view_sandbox.html | 15 + .../doc_site/src/views/view/view_sandbox.js | 27 + .../generator-kui/app/component.js | 28 + .../generator-kui/app/documentation.js | 31 + .../generator-kui/component/index.js | 146 + .../component/templates/_component.scss | 3 + .../component/templates/_index.scss | 1 + .../component/templates/component.js | 35 + .../component/templates/index.js | 3 + .../component/templates/stateless_function.js | 25 + .../generator-kui/component/templates/test.js | 16 + .../generator-kui/documentation/index.js | 217 + .../templates/documentation_page.js | 39 + .../templates/documentation_page_demo.js | 11 + .../templates/documentation_sandbox.html | 1 + .../templates/documentation_sandbox.js | 27 + packages/ui_framework/generator-kui/utils.js | 35 + packages/ui_framework/package.json | 50 + packages/ui_framework/services/index.js | 1 + .../keyboard_accessible.test.js.snap | 22 + .../__snapshots__/screen_reader.test.js.snap | 17 + .../src/components/accessibility/_index.scss | 1 + .../accessibility/_screen_reader.scss | 8 + .../src/components/accessibility/index.js | 2 + .../accessibility/keyboard_accessible.js | 101 + .../accessibility/keyboard_accessible.test.js | 198 + .../components/accessibility/screen_reader.js | 18 + .../accessibility/screen_reader.test.js | 35 + .../__snapshots__/action_item.test.js.snap | 11 + .../components/action_item/_action_item.scss | 5 + .../src/components/action_item/_index.scss | 1 + .../src/components/action_item/action_item.js | 12 + .../action_item/action_item.test.js | 12 + .../src/components/action_item/index.js | 1 + .../src/components/badge/_badge.scss | 14 + .../src/components/badge/_index.scss | 3 + .../bar/__snapshots__/bar.test.js.snap | 11 + .../__snapshots__/bar_section.test.js.snap | 11 + .../ui_framework/src/components/bar/_bar.scss | 3 + .../src/components/bar/_bar_section.scss | 3 + .../src/components/bar/_index.scss | 2 + .../ui_framework/src/components/bar/bar.js | 12 + .../src/components/bar/bar.test.js | 12 + .../src/components/bar/bar_section.js | 12 + .../src/components/bar/bar_section.test.js | 12 + .../ui_framework/src/components/bar/index.js | 2 + .../button/__snapshots__/button.test.js.snap | 171 + .../__snapshots__/link_button.test.js.snap | 172 + .../__snapshots__/submit_button.test.js.snap | 68 + .../src/components/button/_button.scss | 204 + .../src/components/button/_index.scss | 48 + .../src/components/button/button.js | 179 + .../src/components/button/button.test.js | 144 + .../__snapshots__/button_group.test.js.snap | 21 + .../button/button_group/_button_group.scss | 44 + .../button/button_group/button_group.js | 23 + .../button/button_group/button_group.test.js | 43 + .../__snapshots__/button_icon.test.js.snap | 64 + .../button/button_icon/button_icon.js | 47 + .../button/button_icon/button_icon.test.js | 46 + .../src/components/button/index.js | 7 + .../src/components/button/link_button.test.js | 121 + .../components/button/submit_button.test.js | 85 + .../card/__snapshots__/card.test.js.snap | 11 + .../card_description.test.js.snap | 11 + .../card_description_text.test.js.snap | 11 + .../card_description_title.test.js.snap | 11 + .../__snapshots__/card_footer.test.js.snap | 11 + .../__snapshots__/card_group.test.js.snap | 21 + .../src/components/card/_card.scss | 37 + .../src/components/card/_card_group.scss | 49 + .../src/components/card/_index.scss | 6 + .../ui_framework/src/components/card/card.js | 12 + .../src/components/card/card.test.js | 12 + .../src/components/card/card_description.js | 12 + .../components/card/card_description.test.js | 12 + .../components/card/card_description_text.js | 12 + .../card/card_description_text.test.js | 12 + .../components/card/card_description_title.js | 12 + .../card/card_description_title.test.js | 12 + .../src/components/card/card_footer.js | 12 + .../src/components/card/card_footer.test.js | 12 + .../src/components/card/card_group.js | 18 + .../src/components/card/card_group.test.js | 17 + .../ui_framework/src/components/card/index.js | 6 + .../collapse_button.test.js.snap | 53 + .../collapse_button/_collapse_button.scss | 3 + .../components/collapse_button/_index.scss | 1 + .../collapse_button/collapse_button.js | 42 + .../collapse_button/collapse_button.test.js | 48 + .../src/components/collapse_button/index.js | 1 + .../__snapshots__/color_picker.test.js.snap | 76 + .../color_picker/_color_picker.scss | 43 + .../src/components/color_picker/_index.scss | 3 + .../components/color_picker/color_picker.js | 86 + .../color_picker/color_picker.test.js | 109 + .../color_picker/color_picker_empty_swatch.js | 10 + .../color_picker/color_picker_swatch.js | 35 + .../src/components/color_picker/index.js | 1 + .../src/components/column/_column.scss | 19 + .../src/components/column/_index.scss | 1 + .../empty_table_prompt.test.js.snap | 37 + .../empty_table_prompt_actions.test.js.snap | 11 + .../empty_table_prompt_message.test.js.snap | 11 + .../empty_table_prompt_panel.test.js.snap | 11 + .../_empty_table_prompt.scss | 16 + .../components/empty_table_prompt/_index.scss | 1 + .../empty_table_prompt/empty_table_prompt.js | 26 + .../empty_table_prompt.test.js | 31 + .../empty_table_prompt_actions.js | 12 + .../empty_table_prompt_actions.test.js | 12 + .../empty_table_prompt_message.js | 12 + .../empty_table_prompt_message.test.js | 12 + .../empty_table_prompt_panel.js | 12 + .../empty_table_prompt_panel.test.js | 12 + .../components/empty_table_prompt/index.js | 3 + .../event/__snapshots__/event.test.js.snap | 11 + .../__snapshots__/event_body.test.js.snap | 11 + .../event_body_message.test.js.snap | 11 + .../event_body_metadata.test.js.snap | 11 + .../__snapshots__/event_symbol.test.js.snap | 11 + .../src/components/event/_event.scss | 26 + .../src/components/event/_index.scss | 1 + .../src/components/event/event.js | 12 + .../src/components/event/event.test.js | 12 + .../src/components/event/event_body.js | 12 + .../src/components/event/event_body.test.js | 12 + .../components/event/event_body_message.js | 12 + .../event/event_body_message.test.js | 12 + .../components/event/event_body_metadata.js | 12 + .../event/event_body_metadata.test.js | 12 + .../src/components/event/event_symbol.js | 12 + .../src/components/event/event_symbol.test.js | 12 + .../src/components/event/index.js | 5 + .../components/expression/_expression.scss | 104 + .../src/components/expression/_index.scss | 3 + .../src/components/form/_assisted_input.scss | 17 + .../src/components/form/_check_box.scss | 67 + .../src/components/form/_index.scss | 8 + .../src/components/form/_label.scss | 9 + .../src/components/form/_search_input.scss | 41 + .../src/components/form/_select.scss | 27 + .../src/components/form/_static_input.scss | 9 + .../src/components/form/_text_area.scss | 26 + .../src/components/form/_text_input.scss | 17 + .../__snapshots__/field_group.test.js.snap | 21 + .../field_group_section.test.js.snap | 21 + .../components/form_layout/_field_group.scss | 27 + .../src/components/form_layout/_index.scss | 1 + .../src/components/form_layout/field_group.js | 32 + .../form_layout/field_group.test.js | 17 + .../form_layout/field_group_section.js | 32 + .../form_layout/field_group_section.test.js | 17 + .../src/components/form_layout/index.js | 2 + .../__snapshots__/gallery.test.js.snap | 11 + .../src/components/gallery/_gallery.scss | 4 + .../components/gallery/_gallery_button.scss | 50 + .../src/components/gallery/_index.scss | 6 + .../src/components/gallery/gallery.js | 19 + .../src/components/gallery/gallery.test.js | 12 + .../__snapshots__/gallery_button.test.js.snap | 12 + .../gallery_button_icon.test.js.snap | 11 + .../gallery_button_image.test.js.snap | 11 + .../gallery_button_label.test.js.snap | 11 + .../gallery/gallery_button/gallery_button.js | 19 + .../gallery_button/gallery_button.test.js | 12 + .../gallery_button/gallery_button_icon.js | 19 + .../gallery_button_icon.test.js | 12 + .../gallery_button/gallery_button_image.js | 19 + .../gallery_button_image.test.js | 12 + .../gallery_button/gallery_button_label.js | 19 + .../gallery_button_label.test.js | 12 + .../src/components/gallery/index.js | 5 + .../__snapshots__/header_bar.test.js.snap | 11 + .../header_bar_section.test.js.snap | 11 + .../components/header_bar/_header_bar.scss | 16 + .../src/components/header_bar/_index.scss | 1 + .../src/components/header_bar/header_bar.js | 19 + .../components/header_bar/header_bar.test.js | 12 + .../header_bar/header_bar_section.js | 19 + .../header_bar/header_bar_section.test.js | 12 + .../src/components/header_bar/index.js | 2 + .../src/components/icon/_icon.scss | 36 + .../src/components/icon/_index.scss | 3 + packages/ui_framework/src/components/index.js | 137 + .../ui_framework/src/components/index.scss | 52 + .../__snapshots__/info_button.test.js.snap | 23 + .../src/components/info_button/_index.scss | 1 + .../components/info_button/_info_button.scss | 14 + .../src/components/info_button/index.js | 1 + .../src/components/info_button/info_button.js | 22 + .../info_button/info_button.test.js | 32 + .../src/components/info_panel/_index.scss | 3 + .../components/info_panel/_info_panel.scss | 66 + .../src/components/link/_index.scss | 1 + .../src/components/link/_link.scss | 3 + .../__snapshots__/local_nav.test.js.snap | 11 + .../__snapshots__/local_nav_row.test.js.snap | 21 + .../local_nav_row_section.test.js.snap | 11 + .../__snapshots__/local_tab.test.js.snap | 31 + .../__snapshots__/local_tabs.test.js.snap | 11 + .../__snapshots__/local_title.test.js.snap | 11 + .../src/components/local_nav/_index.scss | 66 + .../local_nav/_local_breadcrumbs.scss | 43 + .../local_nav/_local_date_picker.scss | 159 + .../components/local_nav/_local_dropdown.scss | 164 + .../src/components/local_nav/_local_menu.scss | 72 + .../src/components/local_nav/_local_nav.scss | 49 + .../components/local_nav/_local_search.scss | 80 + .../src/components/local_nav/_local_tabs.scss | 54 + .../components/local_nav/_local_title.scss | 8 + .../src/components/local_nav/index.js | 6 + .../src/components/local_nav/local_nav.js | 17 + .../components/local_nav/local_nav.test.js | 10 + .../src/components/local_nav/local_nav_row.js | 24 + .../local_nav/local_nav_row.test.js | 17 + .../local_nav/local_nav_row_section.js | 17 + .../local_nav/local_nav_row_section.test.js | 10 + .../src/components/local_nav/local_tab.js | 27 + .../components/local_nav/local_tab.test.js | 24 + .../src/components/local_nav/local_tabs.js | 17 + .../components/local_nav/local_tabs.test.js | 10 + .../src/components/local_nav/local_title.js | 17 + .../components/local_nav/local_title.test.js | 10 + .../menu/__snapshots__/menu.test.js.snap | 19 + .../menu/__snapshots__/menu_item.test.js.snap | 11 + .../src/components/menu/_index.scss | 1 + .../src/components/menu/_menu.scss | 26 + .../ui_framework/src/components/menu/index.js | 2 + .../ui_framework/src/components/menu/menu.js | 29 + .../src/components/menu/menu.test.js | 17 + .../src/components/menu/menu_item.js | 24 + .../src/components/menu/menu_item.test.js | 12 + .../src/components/menu_button/_index.scss | 20 + .../components/menu_button/_menu_button.scss | 114 + .../menu_button/_menu_button_group.scss | 11 + .../src/components/micro_button/_index.scss | 2 + .../micro_button/_micro_button.scss | 4 + .../micro_button/_micro_button_group.scss | 7 + .../__snapshots__/confirm_modal.test.js.snap | 59 + .../modal/__snapshots__/modal.test.js.snap | 11 + .../__snapshots__/modal_body.test.js.snap | 11 + .../modal_body_text.test.js.snap | 11 + .../__snapshots__/modal_footer.test.js.snap | 11 + .../__snapshots__/modal_header.test.js.snap | 11 + .../modal_header_title.test.js.snap | 11 + .../__snapshots__/modal_overlay.test.js.snap | 11 + .../src/components/modal/_index.scss | 12 + .../src/components/modal/_modal.scss | 62 + .../src/components/modal/_modal_overlay.scss | 13 + .../src/components/modal/confirm_modal.js | 98 + .../components/modal/confirm_modal.test.js | 124 + .../src/components/modal/index.js | 12 + .../src/components/modal/modal.js | 17 + .../src/components/modal/modal.test.js | 12 + .../src/components/modal/modal_body.js | 17 + .../src/components/modal/modal_body.test.js | 12 + .../src/components/modal/modal_body_text.js | 17 + .../components/modal/modal_body_text.test.js | 12 + .../src/components/modal/modal_footer.js | 17 + .../src/components/modal/modal_footer.test.js | 12 + .../src/components/modal/modal_header.js | 17 + .../src/components/modal/modal_header.test.js | 12 + .../components/modal/modal_header_title.js | 17 + .../modal/modal_header_title.test.js | 12 + .../src/components/modal/modal_overlay.js | 17 + .../components/modal/modal_overlay.test.js | 12 + .../src/components/notice/_index.scss | 4 + .../src/components/notice/_notice.scss | 6 + .../outside_click_detector.test.js.snap | 3 + .../outside_click_detector/index.js | 3 + .../outside_click_detector.js | 48 + .../outside_click_detector.test.js | 17 + .../pager/__snapshots__/pager.test.js.snap | 138 + .../pager_button_group.test.js.snap | 36 + .../src/components/pager/_index.scss | 1 + .../src/components/pager/_pager.scss | 18 + .../src/components/pager/index.js | 2 + .../src/components/pager/pager.js | 47 + .../src/components/pager/pager.test.js | 98 + .../components/pager/pager_button_group.js | 35 + .../pager/pager_button_group.test.js | 116 + .../src/components/panel/_index.scss | 4 + .../src/components/panel/_panel.scss | 68 + .../__snapshots__/popover.test.js.snap | 82 + .../src/components/popover/_index.scss | 3 + .../src/components/popover/_popover.scss | 95 + .../src/components/popover/index.js | 3 + .../src/components/popover/popover.js | 67 + .../src/components/popover/popover.test.js | 101 + .../src/components/status_text/_index.scss | 3 + .../components/status_text/_status_text.scss | 30 + .../controlled_table.test.js.snap | 11 + .../table/__snapshots__/table.test.js.snap | 60 + .../table_header_cell.test.js.snap | 15 + .../table_header_check_box_cell.test.js.snap | 19 + .../__snapshots__/table_info.test.js.snap | 11 + .../__snapshots__/table_row.test.js.snap | 19 + .../__snapshots__/table_row_cell.test.js.snap | 13 + .../table_row_check_box_cell.test.js.snap | 19 + .../components/table/_controlled_table.scss | 17 + .../src/components/table/_index.scss | 8 + .../src/components/table/_table.scss | 166 + .../src/components/table/controlled_table.js | 12 + .../components/table/controlled_table.test.js | 12 + .../src/components/table/index.js | 10 + .../src/components/table/table.js | 18 + .../src/components/table/table.test.js | 34 + .../src/components/table/table_body.js | 14 + .../src/components/table/table_header.js | 14 + .../src/components/table/table_header_cell.js | 69 + .../table/table_header_cell.test.js | 12 + .../table/table_header_check_box_cell.js | 27 + .../table/table_header_check_box_cell.test.js | 12 + .../src/components/table/table_info.js | 12 + .../src/components/table/table_info.test.js | 12 + .../src/components/table/table_row.js | 12 + .../src/components/table/table_row.test.js | 20 + .../src/components/table/table_row_cell.js | 30 + .../components/table/table_row_cell.test.js | 12 + .../table/table_row_check_box_cell.js | 27 + .../table/table_row_check_box_cell.test.js | 12 + .../src/components/table_info/_index.scss | 1 + .../components/table_info/_table_info.scss | 6 + .../tabs/__snapshots__/tab.test.js.snap | 21 + .../tabs/__snapshots__/tabs.test.js.snap | 9 + .../src/components/tabs/_index.scss | 10 + .../src/components/tabs/_tabs.scss | 85 + .../ui_framework/src/components/tabs/index.js | 2 + .../ui_framework/src/components/tabs/tab.js | 30 + .../src/components/tabs/tab.test.js | 36 + .../ui_framework/src/components/tabs/tabs.js | 25 + .../src/components/tabs/tabs.test.js | 17 + .../src/components/toggle_button/_index.scss | 2 + .../toggle_button/_toggle_button.scss | 40 + .../toggle_button/_toggle_panel.scss | 13 + .../__snapshots__/tool_bar.test.js.snap | 11 + .../tool_bar_footer.test.js.snap | 11 + .../tool_bar_footer_section.test.js.snap | 11 + .../tool_bar_search_box.test.js.snap | 64 + .../tool_bar_section.test.js.snap | 11 + .../__snapshots__/tool_bar_text.test.js.snap | 11 + .../src/components/tool_bar/_index.scss | 4 + .../src/components/tool_bar/_tool_bar.scss | 23 + .../components/tool_bar/_tool_bar_footer.scss | 12 + .../components/tool_bar/_tool_bar_search.scss | 60 + .../components/tool_bar/_tool_bar_text.scss | 9 + .../src/components/tool_bar/index.js | 6 + .../src/components/tool_bar/tool_bar.js | 12 + .../src/components/tool_bar/tool_bar.test.js | 13 + .../components/tool_bar/tool_bar_footer.js | 12 + .../tool_bar/tool_bar_footer.test.js | 12 + .../tool_bar/tool_bar_footer_section.js | 12 + .../tool_bar/tool_bar_footer_section.test.js | 12 + .../tool_bar/tool_bar_search_box.js | 37 + .../tool_bar/tool_bar_search_box.test.js | 40 + .../components/tool_bar/tool_bar_section.js | 12 + .../tool_bar/tool_bar_section.test.js | 12 + .../src/components/tool_bar/tool_bar_text.js | 12 + .../components/tool_bar/tool_bar_text.test.js | 13 + .../__snapshots__/typography.test.js.snap | 37 + .../src/components/typography/_index.scss | 2 + .../components/typography/_typography.scss | 48 + .../src/components/typography/typography.js | 41 + .../components/typography/typography.test.js | 50 + .../components/vertical_rhythm/_index.scss | 4 + .../vertical_rhythm/_vertical_rhythm.scss | 11 + .../src/components/view/_index.scss | 4 + .../src/components/view/_view.scss | 22 + .../global_styling/mixins/_global_mixins.scss | 309 ++ .../src/global_styling/mixins/_index.scss | 1 + .../src/global_styling/reset/_index.scss | 1 + .../src/global_styling/reset/_reset.scss | 24 + .../src/global_styling/utilities/_index.scss | 0 .../global_styling/variables/_animations.scss | 9 + .../global_styling/variables/_borders.scss | 6 + .../src/global_styling/variables/_colors.scss | 49 + .../src/global_styling/variables/_font.scss | 9 + .../src/global_styling/variables/_form.scss | 6 + .../src/global_styling/variables/_index.scss | 17 + .../global_styling/variables/_shadows.scss | 3 + .../src/global_styling/variables/_timing.scss | 3 + .../global_styling/variables/_tool_bar.scss | 4 + .../global_styling/variables/_z_index.scss | 0 packages/ui_framework/src/index.scss | 11 + .../accessibility/accessible_click_keys.js | 7 + .../accessibility/combo_box_key_codes.js | 24 + .../src/services/accessibility/index.js | 2 + .../ui_framework/src/services/alignment.js | 2 + packages/ui_framework/src/services/index.js | 12 + .../ui_framework/src/services/key_codes.js | 8 + .../ui_framework/src/services/sort/index.js | 1 + .../src/services/sort/sortable_properties.js | 99 + .../services/sort/sortable_properties.test.js | 121 + .../ui_framework/src/test/required_props.js | 7 + .../src/themes/light_theme/_index.scss | 0 618 files changed, 24702 insertions(+) create mode 100644 packages/ui_framework/.gitignore create mode 100644 packages/ui_framework/README.md create mode 100644 packages/ui_framework/components/index.js create mode 100644 packages/ui_framework/dist/ui_framework.css create mode 100644 packages/ui_framework/doc_site/build/index.html create mode 100644 packages/ui_framework/doc_site/postcss.config.js create mode 100644 packages/ui_framework/doc_site/src/actions/action_types.js create mode 100644 packages/ui_framework/doc_site/src/actions/code_viewer_actions.js create mode 100644 packages/ui_framework/doc_site/src/actions/example_nav_actions.js create mode 100644 packages/ui_framework/doc_site/src/actions/index.js create mode 100644 packages/ui_framework/doc_site/src/actions/sandbox_actions.js create mode 100644 packages/ui_framework/doc_site/src/components/guide/_guide.scss create mode 100644 packages/ui_framework/doc_site/src/components/guide_code/_guide_code.scss create mode 100644 packages/ui_framework/doc_site/src/components/guide_code/guide_code.js create mode 100644 packages/ui_framework/doc_site/src/components/guide_code_viewer/_guide_code_viewer.scss create mode 100644 packages/ui_framework/doc_site/src/components/guide_code_viewer/guide_code_viewer.js create mode 100644 packages/ui_framework/doc_site/src/components/guide_components.scss create mode 100644 packages/ui_framework/doc_site/src/components/guide_demo/_guide_demo.scss create mode 100644 packages/ui_framework/doc_site/src/components/guide_demo/guide_demo.js create mode 100644 packages/ui_framework/doc_site/src/components/guide_link/_guide_link.scss create mode 100644 packages/ui_framework/doc_site/src/components/guide_link/guide_link.js create mode 100644 packages/ui_framework/doc_site/src/components/guide_nav/_guide_nav.scss create mode 100644 packages/ui_framework/doc_site/src/components/guide_nav/guide_nav.js create mode 100644 packages/ui_framework/doc_site/src/components/guide_page/_guide_page.scss create mode 100644 packages/ui_framework/doc_site/src/components/guide_page/guide_page.js create mode 100644 packages/ui_framework/doc_site/src/components/guide_page/guide_page_container.js create mode 100644 packages/ui_framework/doc_site/src/components/guide_page_side_nav/_guide_page_side_nav.scss create mode 100644 packages/ui_framework/doc_site/src/components/guide_page_side_nav/guide_page_side_nav.js create mode 100644 packages/ui_framework/doc_site/src/components/guide_page_side_nav/guide_page_side_nav_item.js create mode 100644 packages/ui_framework/doc_site/src/components/guide_sandbox/_guide_sandbox.scss create mode 100644 packages/ui_framework/doc_site/src/components/guide_sandbox/guide_sandbox.js create mode 100644 packages/ui_framework/doc_site/src/components/guide_sandbox/guide_sandbox_code_toggle.js create mode 100644 packages/ui_framework/doc_site/src/components/guide_sandbox/guide_sandbox_code_toggle_container.js create mode 100644 packages/ui_framework/doc_site/src/components/guide_section/_guide_section.scss create mode 100644 packages/ui_framework/doc_site/src/components/guide_section/guide_section.js create mode 100644 packages/ui_framework/doc_site/src/components/guide_section/guide_section_container.js create mode 100644 packages/ui_framework/doc_site/src/components/guide_section/guide_section_types.js create mode 100644 packages/ui_framework/doc_site/src/components/guide_text/_guide_text.scss create mode 100644 packages/ui_framework/doc_site/src/components/guide_text/guide_text.js create mode 100644 packages/ui_framework/doc_site/src/components/index.js create mode 100644 packages/ui_framework/doc_site/src/images/elastic-logo.svg create mode 100644 packages/ui_framework/doc_site/src/images/hint-arrow.svg create mode 100644 packages/ui_framework/doc_site/src/images/react-logo.svg create mode 100644 packages/ui_framework/doc_site/src/index.js create mode 100644 packages/ui_framework/doc_site/src/main.scss create mode 100644 packages/ui_framework/doc_site/src/services/example/create_example.js create mode 100644 packages/ui_framework/doc_site/src/services/index.js create mode 100644 packages/ui_framework/doc_site/src/services/js_injector/js_injector.js create mode 100644 packages/ui_framework/doc_site/src/services/routes/routes.js create mode 100644 packages/ui_framework/doc_site/src/services/string/render_to_html.js create mode 100644 packages/ui_framework/doc_site/src/services/string/slugify.js create mode 100644 packages/ui_framework/doc_site/src/store/configure_store.js create mode 100644 packages/ui_framework/doc_site/src/store/index.js create mode 100644 packages/ui_framework/doc_site/src/store/reducers/code_viewer_reducer.js create mode 100644 packages/ui_framework/doc_site/src/store/reducers/sandbox_reducer.js create mode 100644 packages/ui_framework/doc_site/src/store/reducers/sections_reducer.js create mode 100644 packages/ui_framework/doc_site/src/views/accessibility/accessibility_example.js create mode 100644 packages/ui_framework/doc_site/src/views/accessibility/keyboard_accessible.js create mode 100644 packages/ui_framework/doc_site/src/views/accessibility/screen_reader.js create mode 100644 packages/ui_framework/doc_site/src/views/action_item/action_item.js create mode 100644 packages/ui_framework/doc_site/src/views/action_item/action_item_example.js create mode 100644 packages/ui_framework/doc_site/src/views/action_item/action_items_in_menu.js create mode 100644 packages/ui_framework/doc_site/src/views/app_container.js create mode 100644 packages/ui_framework/doc_site/src/views/app_view.js create mode 100644 packages/ui_framework/doc_site/src/views/badge/badge_example.js create mode 100644 packages/ui_framework/doc_site/src/views/badge/default_badge.html create mode 100644 packages/ui_framework/doc_site/src/views/bar/bar.js create mode 100644 packages/ui_framework/doc_site/src/views/bar/bar_example.js create mode 100644 packages/ui_framework/doc_site/src/views/bar/bar_one_section.js create mode 100644 packages/ui_framework/doc_site/src/views/bar/bar_three_sections.js create mode 100644 packages/ui_framework/doc_site/src/views/button/button_basic.js create mode 100644 packages/ui_framework/doc_site/src/views/button/button_danger.js create mode 100644 packages/ui_framework/doc_site/src/views/button/button_elements.js create mode 100644 packages/ui_framework/doc_site/src/views/button/button_example.js create mode 100644 packages/ui_framework/doc_site/src/views/button/button_group.js create mode 100644 packages/ui_framework/doc_site/src/views/button/button_group_united.js create mode 100644 packages/ui_framework/doc_site/src/views/button/button_hollow.js create mode 100644 packages/ui_framework/doc_site/src/views/button/button_loading.js create mode 100644 packages/ui_framework/doc_site/src/views/button/button_primary.js create mode 100644 packages/ui_framework/doc_site/src/views/button/button_secondary.js create mode 100644 packages/ui_framework/doc_site/src/views/button/button_sizes.html create mode 100644 packages/ui_framework/doc_site/src/views/button/button_warning.js create mode 100644 packages/ui_framework/doc_site/src/views/button/button_with_icon.js create mode 100644 packages/ui_framework/doc_site/src/views/card/card.js create mode 100644 packages/ui_framework/doc_site/src/views/card/card_example.js create mode 100644 packages/ui_framework/doc_site/src/views/card/card_group.js create mode 100644 packages/ui_framework/doc_site/src/views/collapse_button/collapse_button.js create mode 100644 packages/ui_framework/doc_site/src/views/collapse_button/collapse_button_example.js create mode 100644 packages/ui_framework/doc_site/src/views/color_picker/color_picker.js create mode 100644 packages/ui_framework/doc_site/src/views/color_picker/color_picker_clear.js create mode 100644 packages/ui_framework/doc_site/src/views/color_picker/color_picker_example.js create mode 100644 packages/ui_framework/doc_site/src/views/color_picker/color_picker_no_color_label.js create mode 100644 packages/ui_framework/doc_site/src/views/column/column_example.js create mode 100644 packages/ui_framework/doc_site/src/views/column/columns.html create mode 100644 packages/ui_framework/doc_site/src/views/empty_table_prompt/empty_table_prompt.js create mode 100644 packages/ui_framework/doc_site/src/views/empty_table_prompt/empty_table_prompt_example.js create mode 100644 packages/ui_framework/doc_site/src/views/empty_table_prompt/table_with_empty_prompt.js create mode 100644 packages/ui_framework/doc_site/src/views/event/event.js create mode 100644 packages/ui_framework/doc_site/src/views/event/event_example.js create mode 100644 packages/ui_framework/doc_site/src/views/event/event_menu.js create mode 100644 packages/ui_framework/doc_site/src/views/event/events_sandbox.js create mode 100644 packages/ui_framework/doc_site/src/views/event/events_sandbox_content.js create mode 100644 packages/ui_framework/doc_site/src/views/expression/expression.html create mode 100644 packages/ui_framework/doc_site/src/views/expression/expression.js create mode 100644 packages/ui_framework/doc_site/src/views/expression/expression_example.js create mode 100644 packages/ui_framework/doc_site/src/views/form/assisted_input.html create mode 100644 packages/ui_framework/doc_site/src/views/form/check_box.html create mode 100644 packages/ui_framework/doc_site/src/views/form/form_example.js create mode 100644 packages/ui_framework/doc_site/src/views/form/label.html create mode 100644 packages/ui_framework/doc_site/src/views/form/search_input.html create mode 100644 packages/ui_framework/doc_site/src/views/form/select.html create mode 100644 packages/ui_framework/doc_site/src/views/form/static_input.html create mode 100644 packages/ui_framework/doc_site/src/views/form/text_area.html create mode 100644 packages/ui_framework/doc_site/src/views/form/text_area_non_resizable.html create mode 100644 packages/ui_framework/doc_site/src/views/form/text_input.html create mode 100644 packages/ui_framework/doc_site/src/views/form_layout/field_group.js create mode 100644 packages/ui_framework/doc_site/src/views/form_layout/form_layout_example.js create mode 100644 packages/ui_framework/doc_site/src/views/gallery/gallery.js create mode 100644 packages/ui_framework/doc_site/src/views/gallery/gallery_example.js create mode 100644 packages/ui_framework/doc_site/src/views/header_bar/header_bar.js create mode 100644 packages/ui_framework/doc_site/src/views/header_bar/header_bar_example.js create mode 100644 packages/ui_framework/doc_site/src/views/header_bar/header_bar_sandbox.js create mode 100644 packages/ui_framework/doc_site/src/views/header_bar/header_bar_sandbox_content.js create mode 100644 packages/ui_framework/doc_site/src/views/header_bar/header_bar_two_sections.js create mode 100644 packages/ui_framework/doc_site/src/views/home/home_view.js create mode 100644 packages/ui_framework/doc_site/src/views/icon/icon.html create mode 100644 packages/ui_framework/doc_site/src/views/icon/icon_basic.html create mode 100644 packages/ui_framework/doc_site/src/views/icon/icon_error.html create mode 100644 packages/ui_framework/doc_site/src/views/icon/icon_example.js create mode 100644 packages/ui_framework/doc_site/src/views/icon/icon_inactive.html create mode 100644 packages/ui_framework/doc_site/src/views/icon/icon_info.html create mode 100644 packages/ui_framework/doc_site/src/views/icon/icon_spinner.html create mode 100644 packages/ui_framework/doc_site/src/views/icon/icon_spinner.js create mode 100644 packages/ui_framework/doc_site/src/views/icon/icon_success.html create mode 100644 packages/ui_framework/doc_site/src/views/icon/icon_warning.html create mode 100644 packages/ui_framework/doc_site/src/views/info_button/info_button.js create mode 100644 packages/ui_framework/doc_site/src/views/info_button/info_button_example.js create mode 100644 packages/ui_framework/doc_site/src/views/info_panel/info_panel_error.html create mode 100644 packages/ui_framework/doc_site/src/views/info_panel/info_panel_example.js create mode 100644 packages/ui_framework/doc_site/src/views/info_panel/info_panel_info.html create mode 100644 packages/ui_framework/doc_site/src/views/info_panel/info_panel_success.html create mode 100644 packages/ui_framework/doc_site/src/views/info_panel/info_panel_warning.html create mode 100644 packages/ui_framework/doc_site/src/views/link/link.html create mode 100644 packages/ui_framework/doc_site/src/views/link/link_example.js create mode 100644 packages/ui_framework/doc_site/src/views/local_nav/local_nav_breadcrumbs.js create mode 100644 packages/ui_framework/doc_site/src/views/local_nav/local_nav_date_picker.html create mode 100644 packages/ui_framework/doc_site/src/views/local_nav/local_nav_dropdown.js create mode 100644 packages/ui_framework/doc_site/src/views/local_nav/local_nav_dropdown_panels.js create mode 100644 packages/ui_framework/doc_site/src/views/local_nav/local_nav_example.js create mode 100644 packages/ui_framework/doc_site/src/views/local_nav/local_nav_menu_item_states.js create mode 100644 packages/ui_framework/doc_site/src/views/local_nav/local_nav_search.js create mode 100644 packages/ui_framework/doc_site/src/views/local_nav/local_nav_search_error.js create mode 100644 packages/ui_framework/doc_site/src/views/local_nav/local_nav_simple.js create mode 100644 packages/ui_framework/doc_site/src/views/local_nav/local_nav_tabs.js create mode 100644 packages/ui_framework/doc_site/src/views/menu/menu.js create mode 100644 packages/ui_framework/doc_site/src/views/menu/menu_contained.js create mode 100644 packages/ui_framework/doc_site/src/views/menu/menu_example.js create mode 100644 packages/ui_framework/doc_site/src/views/menu_button/menu_button_basic.html create mode 100644 packages/ui_framework/doc_site/src/views/menu_button/menu_button_danger.html create mode 100644 packages/ui_framework/doc_site/src/views/menu_button/menu_button_elements.html create mode 100644 packages/ui_framework/doc_site/src/views/menu_button/menu_button_example.js create mode 100644 packages/ui_framework/doc_site/src/views/menu_button/menu_button_group.html create mode 100644 packages/ui_framework/doc_site/src/views/menu_button/menu_button_primary.html create mode 100644 packages/ui_framework/doc_site/src/views/menu_button/menu_button_with_icon.html create mode 100644 packages/ui_framework/doc_site/src/views/micro_button/micro_button.html create mode 100644 packages/ui_framework/doc_site/src/views/micro_button/micro_button_elements.html create mode 100644 packages/ui_framework/doc_site/src/views/micro_button/micro_button_example.js create mode 100644 packages/ui_framework/doc_site/src/views/micro_button/micro_button_group.html create mode 100644 packages/ui_framework/doc_site/src/views/modal/confirm_modal_example.js create mode 100644 packages/ui_framework/doc_site/src/views/modal/modal_example.js create mode 100644 packages/ui_framework/doc_site/src/views/modal/static.js create mode 100644 packages/ui_framework/doc_site/src/views/not_found/not_found_view.js create mode 100644 packages/ui_framework/doc_site/src/views/notice/notice_sandbox.html create mode 100644 packages/ui_framework/doc_site/src/views/notice/notice_sandbox.js create mode 100644 packages/ui_framework/doc_site/src/views/pager/pager_buttons.js create mode 100644 packages/ui_framework/doc_site/src/views/pager/pager_example.js create mode 100644 packages/ui_framework/doc_site/src/views/pager/tool_bar_pager.js create mode 100644 packages/ui_framework/doc_site/src/views/panel/panel.html create mode 100644 packages/ui_framework/doc_site/src/views/panel/panel_example.js create mode 100644 packages/ui_framework/doc_site/src/views/panel/panel_with_header_sections.html create mode 100644 packages/ui_framework/doc_site/src/views/panel/panel_with_toolbar.html create mode 100644 packages/ui_framework/doc_site/src/views/popover/popover.js create mode 100644 packages/ui_framework/doc_site/src/views/popover/popover_anchor_position.js create mode 100644 packages/ui_framework/doc_site/src/views/popover/popover_body_class_name.js create mode 100644 packages/ui_framework/doc_site/src/views/popover/popover_example.js create mode 100644 packages/ui_framework/doc_site/src/views/status_text/status_text.html create mode 100644 packages/ui_framework/doc_site/src/views/status_text/status_text_error.html create mode 100644 packages/ui_framework/doc_site/src/views/status_text/status_text_example.js create mode 100644 packages/ui_framework/doc_site/src/views/status_text/status_text_info.html create mode 100644 packages/ui_framework/doc_site/src/views/status_text/status_text_success.html create mode 100644 packages/ui_framework/doc_site/src/views/status_text/status_text_warning.html create mode 100644 packages/ui_framework/doc_site/src/views/table/controlled_table.js create mode 100644 packages/ui_framework/doc_site/src/views/table/controlled_table_loading_items.js create mode 100644 packages/ui_framework/doc_site/src/views/table/controlled_table_with_empty_prompt.js create mode 100644 packages/ui_framework/doc_site/src/views/table/controlled_table_with_no_items.js create mode 100644 packages/ui_framework/doc_site/src/views/table/fluid_table.js create mode 100644 packages/ui_framework/doc_site/src/views/table/table.js create mode 100644 packages/ui_framework/doc_site/src/views/table/table_example.js create mode 100644 packages/ui_framework/doc_site/src/views/table/table_with_menu_buttons.js create mode 100644 packages/ui_framework/doc_site/src/views/tabs/tabs.js create mode 100644 packages/ui_framework/doc_site/src/views/tabs/tabs_example.js create mode 100644 packages/ui_framework/doc_site/src/views/toggle_button/toggle_button.html create mode 100644 packages/ui_framework/doc_site/src/views/toggle_button/toggle_button.js create mode 100644 packages/ui_framework/doc_site/src/views/toggle_button/toggle_button_disabled.html create mode 100644 packages/ui_framework/doc_site/src/views/toggle_button/toggle_button_example.js create mode 100644 packages/ui_framework/doc_site/src/views/toggle_button/toggle_panel.html create mode 100644 packages/ui_framework/doc_site/src/views/toggle_button/toggle_panel.js create mode 100644 packages/ui_framework/doc_site/src/views/tool_bar/tool_bar.js create mode 100644 packages/ui_framework/doc_site/src/views/tool_bar/tool_bar_example.js create mode 100644 packages/ui_framework/doc_site/src/views/tool_bar/tool_bar_footer.js create mode 100644 packages/ui_framework/doc_site/src/views/typography/sub_text.html create mode 100644 packages/ui_framework/doc_site/src/views/typography/sub_title.html create mode 100644 packages/ui_framework/doc_site/src/views/typography/subdued_type.html create mode 100644 packages/ui_framework/doc_site/src/views/typography/text.html create mode 100644 packages/ui_framework/doc_site/src/views/typography/text_title.html create mode 100644 packages/ui_framework/doc_site/src/views/typography/title.html create mode 100644 packages/ui_framework/doc_site/src/views/typography/typography_example.js create mode 100644 packages/ui_framework/doc_site/src/views/vertical_rhythm/vertical_rhythm.html create mode 100644 packages/ui_framework/doc_site/src/views/vertical_rhythm/vertical_rhythm_as_wrapper.html create mode 100644 packages/ui_framework/doc_site/src/views/vertical_rhythm/vertical_rhythm_example.js create mode 100644 packages/ui_framework/doc_site/src/views/vertical_rhythm/vertical_rhythm_on_component.html create mode 100644 packages/ui_framework/doc_site/src/views/vertical_rhythm/vertical_rhythm_small.html create mode 100644 packages/ui_framework/doc_site/src/views/view/view_sandbox.html create mode 100644 packages/ui_framework/doc_site/src/views/view/view_sandbox.js create mode 100644 packages/ui_framework/generator-kui/app/component.js create mode 100644 packages/ui_framework/generator-kui/app/documentation.js create mode 100644 packages/ui_framework/generator-kui/component/index.js create mode 100644 packages/ui_framework/generator-kui/component/templates/_component.scss create mode 100644 packages/ui_framework/generator-kui/component/templates/_index.scss create mode 100644 packages/ui_framework/generator-kui/component/templates/component.js create mode 100644 packages/ui_framework/generator-kui/component/templates/index.js create mode 100644 packages/ui_framework/generator-kui/component/templates/stateless_function.js create mode 100644 packages/ui_framework/generator-kui/component/templates/test.js create mode 100644 packages/ui_framework/generator-kui/documentation/index.js create mode 100644 packages/ui_framework/generator-kui/documentation/templates/documentation_page.js create mode 100644 packages/ui_framework/generator-kui/documentation/templates/documentation_page_demo.js create mode 100644 packages/ui_framework/generator-kui/documentation/templates/documentation_sandbox.html create mode 100644 packages/ui_framework/generator-kui/documentation/templates/documentation_sandbox.js create mode 100644 packages/ui_framework/generator-kui/utils.js create mode 100644 packages/ui_framework/package.json create mode 100644 packages/ui_framework/services/index.js create mode 100644 packages/ui_framework/src/components/accessibility/__snapshots__/keyboard_accessible.test.js.snap create mode 100644 packages/ui_framework/src/components/accessibility/__snapshots__/screen_reader.test.js.snap create mode 100644 packages/ui_framework/src/components/accessibility/_index.scss create mode 100644 packages/ui_framework/src/components/accessibility/_screen_reader.scss create mode 100644 packages/ui_framework/src/components/accessibility/index.js create mode 100644 packages/ui_framework/src/components/accessibility/keyboard_accessible.js create mode 100644 packages/ui_framework/src/components/accessibility/keyboard_accessible.test.js create mode 100644 packages/ui_framework/src/components/accessibility/screen_reader.js create mode 100644 packages/ui_framework/src/components/accessibility/screen_reader.test.js create mode 100644 packages/ui_framework/src/components/action_item/__snapshots__/action_item.test.js.snap create mode 100644 packages/ui_framework/src/components/action_item/_action_item.scss create mode 100644 packages/ui_framework/src/components/action_item/_index.scss create mode 100644 packages/ui_framework/src/components/action_item/action_item.js create mode 100644 packages/ui_framework/src/components/action_item/action_item.test.js create mode 100644 packages/ui_framework/src/components/action_item/index.js create mode 100644 packages/ui_framework/src/components/badge/_badge.scss create mode 100644 packages/ui_framework/src/components/badge/_index.scss create mode 100644 packages/ui_framework/src/components/bar/__snapshots__/bar.test.js.snap create mode 100644 packages/ui_framework/src/components/bar/__snapshots__/bar_section.test.js.snap create mode 100644 packages/ui_framework/src/components/bar/_bar.scss create mode 100644 packages/ui_framework/src/components/bar/_bar_section.scss create mode 100644 packages/ui_framework/src/components/bar/_index.scss create mode 100644 packages/ui_framework/src/components/bar/bar.js create mode 100644 packages/ui_framework/src/components/bar/bar.test.js create mode 100644 packages/ui_framework/src/components/bar/bar_section.js create mode 100644 packages/ui_framework/src/components/bar/bar_section.test.js create mode 100644 packages/ui_framework/src/components/bar/index.js create mode 100644 packages/ui_framework/src/components/button/__snapshots__/button.test.js.snap create mode 100644 packages/ui_framework/src/components/button/__snapshots__/link_button.test.js.snap create mode 100644 packages/ui_framework/src/components/button/__snapshots__/submit_button.test.js.snap create mode 100644 packages/ui_framework/src/components/button/_button.scss create mode 100644 packages/ui_framework/src/components/button/_index.scss create mode 100644 packages/ui_framework/src/components/button/button.js create mode 100644 packages/ui_framework/src/components/button/button.test.js create mode 100644 packages/ui_framework/src/components/button/button_group/__snapshots__/button_group.test.js.snap create mode 100644 packages/ui_framework/src/components/button/button_group/_button_group.scss create mode 100644 packages/ui_framework/src/components/button/button_group/button_group.js create mode 100644 packages/ui_framework/src/components/button/button_group/button_group.test.js create mode 100644 packages/ui_framework/src/components/button/button_icon/__snapshots__/button_icon.test.js.snap create mode 100644 packages/ui_framework/src/components/button/button_icon/button_icon.js create mode 100644 packages/ui_framework/src/components/button/button_icon/button_icon.test.js create mode 100644 packages/ui_framework/src/components/button/index.js create mode 100644 packages/ui_framework/src/components/button/link_button.test.js create mode 100644 packages/ui_framework/src/components/button/submit_button.test.js create mode 100644 packages/ui_framework/src/components/card/__snapshots__/card.test.js.snap create mode 100644 packages/ui_framework/src/components/card/__snapshots__/card_description.test.js.snap create mode 100644 packages/ui_framework/src/components/card/__snapshots__/card_description_text.test.js.snap create mode 100644 packages/ui_framework/src/components/card/__snapshots__/card_description_title.test.js.snap create mode 100644 packages/ui_framework/src/components/card/__snapshots__/card_footer.test.js.snap create mode 100644 packages/ui_framework/src/components/card/__snapshots__/card_group.test.js.snap create mode 100644 packages/ui_framework/src/components/card/_card.scss create mode 100644 packages/ui_framework/src/components/card/_card_group.scss create mode 100644 packages/ui_framework/src/components/card/_index.scss create mode 100644 packages/ui_framework/src/components/card/card.js create mode 100644 packages/ui_framework/src/components/card/card.test.js create mode 100644 packages/ui_framework/src/components/card/card_description.js create mode 100644 packages/ui_framework/src/components/card/card_description.test.js create mode 100644 packages/ui_framework/src/components/card/card_description_text.js create mode 100644 packages/ui_framework/src/components/card/card_description_text.test.js create mode 100644 packages/ui_framework/src/components/card/card_description_title.js create mode 100644 packages/ui_framework/src/components/card/card_description_title.test.js create mode 100644 packages/ui_framework/src/components/card/card_footer.js create mode 100644 packages/ui_framework/src/components/card/card_footer.test.js create mode 100644 packages/ui_framework/src/components/card/card_group.js create mode 100644 packages/ui_framework/src/components/card/card_group.test.js create mode 100644 packages/ui_framework/src/components/card/index.js create mode 100644 packages/ui_framework/src/components/collapse_button/__snapshots__/collapse_button.test.js.snap create mode 100644 packages/ui_framework/src/components/collapse_button/_collapse_button.scss create mode 100644 packages/ui_framework/src/components/collapse_button/_index.scss create mode 100644 packages/ui_framework/src/components/collapse_button/collapse_button.js create mode 100644 packages/ui_framework/src/components/collapse_button/collapse_button.test.js create mode 100644 packages/ui_framework/src/components/collapse_button/index.js create mode 100644 packages/ui_framework/src/components/color_picker/__snapshots__/color_picker.test.js.snap create mode 100644 packages/ui_framework/src/components/color_picker/_color_picker.scss create mode 100644 packages/ui_framework/src/components/color_picker/_index.scss create mode 100644 packages/ui_framework/src/components/color_picker/color_picker.js create mode 100644 packages/ui_framework/src/components/color_picker/color_picker.test.js create mode 100644 packages/ui_framework/src/components/color_picker/color_picker_empty_swatch.js create mode 100644 packages/ui_framework/src/components/color_picker/color_picker_swatch.js create mode 100644 packages/ui_framework/src/components/color_picker/index.js create mode 100644 packages/ui_framework/src/components/column/_column.scss create mode 100644 packages/ui_framework/src/components/column/_index.scss create mode 100644 packages/ui_framework/src/components/empty_table_prompt/__snapshots__/empty_table_prompt.test.js.snap create mode 100644 packages/ui_framework/src/components/empty_table_prompt/__snapshots__/empty_table_prompt_actions.test.js.snap create mode 100644 packages/ui_framework/src/components/empty_table_prompt/__snapshots__/empty_table_prompt_message.test.js.snap create mode 100644 packages/ui_framework/src/components/empty_table_prompt/__snapshots__/empty_table_prompt_panel.test.js.snap create mode 100644 packages/ui_framework/src/components/empty_table_prompt/_empty_table_prompt.scss create mode 100644 packages/ui_framework/src/components/empty_table_prompt/_index.scss create mode 100644 packages/ui_framework/src/components/empty_table_prompt/empty_table_prompt.js create mode 100644 packages/ui_framework/src/components/empty_table_prompt/empty_table_prompt.test.js create mode 100644 packages/ui_framework/src/components/empty_table_prompt/empty_table_prompt_actions.js create mode 100644 packages/ui_framework/src/components/empty_table_prompt/empty_table_prompt_actions.test.js create mode 100644 packages/ui_framework/src/components/empty_table_prompt/empty_table_prompt_message.js create mode 100644 packages/ui_framework/src/components/empty_table_prompt/empty_table_prompt_message.test.js create mode 100644 packages/ui_framework/src/components/empty_table_prompt/empty_table_prompt_panel.js create mode 100644 packages/ui_framework/src/components/empty_table_prompt/empty_table_prompt_panel.test.js create mode 100644 packages/ui_framework/src/components/empty_table_prompt/index.js create mode 100644 packages/ui_framework/src/components/event/__snapshots__/event.test.js.snap create mode 100644 packages/ui_framework/src/components/event/__snapshots__/event_body.test.js.snap create mode 100644 packages/ui_framework/src/components/event/__snapshots__/event_body_message.test.js.snap create mode 100644 packages/ui_framework/src/components/event/__snapshots__/event_body_metadata.test.js.snap create mode 100644 packages/ui_framework/src/components/event/__snapshots__/event_symbol.test.js.snap create mode 100644 packages/ui_framework/src/components/event/_event.scss create mode 100644 packages/ui_framework/src/components/event/_index.scss create mode 100644 packages/ui_framework/src/components/event/event.js create mode 100644 packages/ui_framework/src/components/event/event.test.js create mode 100644 packages/ui_framework/src/components/event/event_body.js create mode 100644 packages/ui_framework/src/components/event/event_body.test.js create mode 100644 packages/ui_framework/src/components/event/event_body_message.js create mode 100644 packages/ui_framework/src/components/event/event_body_message.test.js create mode 100644 packages/ui_framework/src/components/event/event_body_metadata.js create mode 100644 packages/ui_framework/src/components/event/event_body_metadata.test.js create mode 100644 packages/ui_framework/src/components/event/event_symbol.js create mode 100644 packages/ui_framework/src/components/event/event_symbol.test.js create mode 100644 packages/ui_framework/src/components/event/index.js create mode 100644 packages/ui_framework/src/components/expression/_expression.scss create mode 100644 packages/ui_framework/src/components/expression/_index.scss create mode 100644 packages/ui_framework/src/components/form/_assisted_input.scss create mode 100644 packages/ui_framework/src/components/form/_check_box.scss create mode 100644 packages/ui_framework/src/components/form/_index.scss create mode 100644 packages/ui_framework/src/components/form/_label.scss create mode 100644 packages/ui_framework/src/components/form/_search_input.scss create mode 100644 packages/ui_framework/src/components/form/_select.scss create mode 100644 packages/ui_framework/src/components/form/_static_input.scss create mode 100644 packages/ui_framework/src/components/form/_text_area.scss create mode 100644 packages/ui_framework/src/components/form/_text_input.scss create mode 100644 packages/ui_framework/src/components/form_layout/__snapshots__/field_group.test.js.snap create mode 100644 packages/ui_framework/src/components/form_layout/__snapshots__/field_group_section.test.js.snap create mode 100644 packages/ui_framework/src/components/form_layout/_field_group.scss create mode 100644 packages/ui_framework/src/components/form_layout/_index.scss create mode 100644 packages/ui_framework/src/components/form_layout/field_group.js create mode 100644 packages/ui_framework/src/components/form_layout/field_group.test.js create mode 100644 packages/ui_framework/src/components/form_layout/field_group_section.js create mode 100644 packages/ui_framework/src/components/form_layout/field_group_section.test.js create mode 100644 packages/ui_framework/src/components/form_layout/index.js create mode 100644 packages/ui_framework/src/components/gallery/__snapshots__/gallery.test.js.snap create mode 100644 packages/ui_framework/src/components/gallery/_gallery.scss create mode 100644 packages/ui_framework/src/components/gallery/_gallery_button.scss create mode 100644 packages/ui_framework/src/components/gallery/_index.scss create mode 100644 packages/ui_framework/src/components/gallery/gallery.js create mode 100644 packages/ui_framework/src/components/gallery/gallery.test.js create mode 100644 packages/ui_framework/src/components/gallery/gallery_button/__snapshots__/gallery_button.test.js.snap create mode 100644 packages/ui_framework/src/components/gallery/gallery_button/__snapshots__/gallery_button_icon.test.js.snap create mode 100644 packages/ui_framework/src/components/gallery/gallery_button/__snapshots__/gallery_button_image.test.js.snap create mode 100644 packages/ui_framework/src/components/gallery/gallery_button/__snapshots__/gallery_button_label.test.js.snap create mode 100644 packages/ui_framework/src/components/gallery/gallery_button/gallery_button.js create mode 100644 packages/ui_framework/src/components/gallery/gallery_button/gallery_button.test.js create mode 100644 packages/ui_framework/src/components/gallery/gallery_button/gallery_button_icon.js create mode 100644 packages/ui_framework/src/components/gallery/gallery_button/gallery_button_icon.test.js create mode 100644 packages/ui_framework/src/components/gallery/gallery_button/gallery_button_image.js create mode 100644 packages/ui_framework/src/components/gallery/gallery_button/gallery_button_image.test.js create mode 100644 packages/ui_framework/src/components/gallery/gallery_button/gallery_button_label.js create mode 100644 packages/ui_framework/src/components/gallery/gallery_button/gallery_button_label.test.js create mode 100644 packages/ui_framework/src/components/gallery/index.js create mode 100644 packages/ui_framework/src/components/header_bar/__snapshots__/header_bar.test.js.snap create mode 100644 packages/ui_framework/src/components/header_bar/__snapshots__/header_bar_section.test.js.snap create mode 100644 packages/ui_framework/src/components/header_bar/_header_bar.scss create mode 100644 packages/ui_framework/src/components/header_bar/_index.scss create mode 100644 packages/ui_framework/src/components/header_bar/header_bar.js create mode 100644 packages/ui_framework/src/components/header_bar/header_bar.test.js create mode 100644 packages/ui_framework/src/components/header_bar/header_bar_section.js create mode 100644 packages/ui_framework/src/components/header_bar/header_bar_section.test.js create mode 100644 packages/ui_framework/src/components/header_bar/index.js create mode 100644 packages/ui_framework/src/components/icon/_icon.scss create mode 100644 packages/ui_framework/src/components/icon/_index.scss create mode 100644 packages/ui_framework/src/components/index.js create mode 100644 packages/ui_framework/src/components/index.scss create mode 100644 packages/ui_framework/src/components/info_button/__snapshots__/info_button.test.js.snap create mode 100644 packages/ui_framework/src/components/info_button/_index.scss create mode 100644 packages/ui_framework/src/components/info_button/_info_button.scss create mode 100644 packages/ui_framework/src/components/info_button/index.js create mode 100644 packages/ui_framework/src/components/info_button/info_button.js create mode 100644 packages/ui_framework/src/components/info_button/info_button.test.js create mode 100644 packages/ui_framework/src/components/info_panel/_index.scss create mode 100644 packages/ui_framework/src/components/info_panel/_info_panel.scss create mode 100644 packages/ui_framework/src/components/link/_index.scss create mode 100644 packages/ui_framework/src/components/link/_link.scss create mode 100644 packages/ui_framework/src/components/local_nav/__snapshots__/local_nav.test.js.snap create mode 100644 packages/ui_framework/src/components/local_nav/__snapshots__/local_nav_row.test.js.snap create mode 100644 packages/ui_framework/src/components/local_nav/__snapshots__/local_nav_row_section.test.js.snap create mode 100644 packages/ui_framework/src/components/local_nav/__snapshots__/local_tab.test.js.snap create mode 100644 packages/ui_framework/src/components/local_nav/__snapshots__/local_tabs.test.js.snap create mode 100644 packages/ui_framework/src/components/local_nav/__snapshots__/local_title.test.js.snap create mode 100644 packages/ui_framework/src/components/local_nav/_index.scss create mode 100644 packages/ui_framework/src/components/local_nav/_local_breadcrumbs.scss create mode 100644 packages/ui_framework/src/components/local_nav/_local_date_picker.scss create mode 100644 packages/ui_framework/src/components/local_nav/_local_dropdown.scss create mode 100644 packages/ui_framework/src/components/local_nav/_local_menu.scss create mode 100644 packages/ui_framework/src/components/local_nav/_local_nav.scss create mode 100644 packages/ui_framework/src/components/local_nav/_local_search.scss create mode 100644 packages/ui_framework/src/components/local_nav/_local_tabs.scss create mode 100644 packages/ui_framework/src/components/local_nav/_local_title.scss create mode 100644 packages/ui_framework/src/components/local_nav/index.js create mode 100644 packages/ui_framework/src/components/local_nav/local_nav.js create mode 100644 packages/ui_framework/src/components/local_nav/local_nav.test.js create mode 100644 packages/ui_framework/src/components/local_nav/local_nav_row.js create mode 100644 packages/ui_framework/src/components/local_nav/local_nav_row.test.js create mode 100644 packages/ui_framework/src/components/local_nav/local_nav_row_section.js create mode 100644 packages/ui_framework/src/components/local_nav/local_nav_row_section.test.js create mode 100644 packages/ui_framework/src/components/local_nav/local_tab.js create mode 100644 packages/ui_framework/src/components/local_nav/local_tab.test.js create mode 100644 packages/ui_framework/src/components/local_nav/local_tabs.js create mode 100644 packages/ui_framework/src/components/local_nav/local_tabs.test.js create mode 100644 packages/ui_framework/src/components/local_nav/local_title.js create mode 100644 packages/ui_framework/src/components/local_nav/local_title.test.js create mode 100644 packages/ui_framework/src/components/menu/__snapshots__/menu.test.js.snap create mode 100644 packages/ui_framework/src/components/menu/__snapshots__/menu_item.test.js.snap create mode 100644 packages/ui_framework/src/components/menu/_index.scss create mode 100644 packages/ui_framework/src/components/menu/_menu.scss create mode 100644 packages/ui_framework/src/components/menu/index.js create mode 100644 packages/ui_framework/src/components/menu/menu.js create mode 100644 packages/ui_framework/src/components/menu/menu.test.js create mode 100644 packages/ui_framework/src/components/menu/menu_item.js create mode 100644 packages/ui_framework/src/components/menu/menu_item.test.js create mode 100644 packages/ui_framework/src/components/menu_button/_index.scss create mode 100644 packages/ui_framework/src/components/menu_button/_menu_button.scss create mode 100644 packages/ui_framework/src/components/menu_button/_menu_button_group.scss create mode 100644 packages/ui_framework/src/components/micro_button/_index.scss create mode 100644 packages/ui_framework/src/components/micro_button/_micro_button.scss create mode 100644 packages/ui_framework/src/components/micro_button/_micro_button_group.scss create mode 100644 packages/ui_framework/src/components/modal/__snapshots__/confirm_modal.test.js.snap create mode 100644 packages/ui_framework/src/components/modal/__snapshots__/modal.test.js.snap create mode 100644 packages/ui_framework/src/components/modal/__snapshots__/modal_body.test.js.snap create mode 100644 packages/ui_framework/src/components/modal/__snapshots__/modal_body_text.test.js.snap create mode 100644 packages/ui_framework/src/components/modal/__snapshots__/modal_footer.test.js.snap create mode 100644 packages/ui_framework/src/components/modal/__snapshots__/modal_header.test.js.snap create mode 100644 packages/ui_framework/src/components/modal/__snapshots__/modal_header_title.test.js.snap create mode 100644 packages/ui_framework/src/components/modal/__snapshots__/modal_overlay.test.js.snap create mode 100644 packages/ui_framework/src/components/modal/_index.scss create mode 100644 packages/ui_framework/src/components/modal/_modal.scss create mode 100644 packages/ui_framework/src/components/modal/_modal_overlay.scss create mode 100644 packages/ui_framework/src/components/modal/confirm_modal.js create mode 100644 packages/ui_framework/src/components/modal/confirm_modal.test.js create mode 100644 packages/ui_framework/src/components/modal/index.js create mode 100644 packages/ui_framework/src/components/modal/modal.js create mode 100644 packages/ui_framework/src/components/modal/modal.test.js create mode 100644 packages/ui_framework/src/components/modal/modal_body.js create mode 100644 packages/ui_framework/src/components/modal/modal_body.test.js create mode 100644 packages/ui_framework/src/components/modal/modal_body_text.js create mode 100644 packages/ui_framework/src/components/modal/modal_body_text.test.js create mode 100644 packages/ui_framework/src/components/modal/modal_footer.js create mode 100644 packages/ui_framework/src/components/modal/modal_footer.test.js create mode 100644 packages/ui_framework/src/components/modal/modal_header.js create mode 100644 packages/ui_framework/src/components/modal/modal_header.test.js create mode 100644 packages/ui_framework/src/components/modal/modal_header_title.js create mode 100644 packages/ui_framework/src/components/modal/modal_header_title.test.js create mode 100644 packages/ui_framework/src/components/modal/modal_overlay.js create mode 100644 packages/ui_framework/src/components/modal/modal_overlay.test.js create mode 100644 packages/ui_framework/src/components/notice/_index.scss create mode 100644 packages/ui_framework/src/components/notice/_notice.scss create mode 100644 packages/ui_framework/src/components/outside_click_detector/__snapshots__/outside_click_detector.test.js.snap create mode 100644 packages/ui_framework/src/components/outside_click_detector/index.js create mode 100644 packages/ui_framework/src/components/outside_click_detector/outside_click_detector.js create mode 100644 packages/ui_framework/src/components/outside_click_detector/outside_click_detector.test.js create mode 100644 packages/ui_framework/src/components/pager/__snapshots__/pager.test.js.snap create mode 100644 packages/ui_framework/src/components/pager/__snapshots__/pager_button_group.test.js.snap create mode 100644 packages/ui_framework/src/components/pager/_index.scss create mode 100644 packages/ui_framework/src/components/pager/_pager.scss create mode 100644 packages/ui_framework/src/components/pager/index.js create mode 100644 packages/ui_framework/src/components/pager/pager.js create mode 100644 packages/ui_framework/src/components/pager/pager.test.js create mode 100644 packages/ui_framework/src/components/pager/pager_button_group.js create mode 100644 packages/ui_framework/src/components/pager/pager_button_group.test.js create mode 100644 packages/ui_framework/src/components/panel/_index.scss create mode 100644 packages/ui_framework/src/components/panel/_panel.scss create mode 100644 packages/ui_framework/src/components/popover/__snapshots__/popover.test.js.snap create mode 100644 packages/ui_framework/src/components/popover/_index.scss create mode 100644 packages/ui_framework/src/components/popover/_popover.scss create mode 100644 packages/ui_framework/src/components/popover/index.js create mode 100644 packages/ui_framework/src/components/popover/popover.js create mode 100644 packages/ui_framework/src/components/popover/popover.test.js create mode 100644 packages/ui_framework/src/components/status_text/_index.scss create mode 100644 packages/ui_framework/src/components/status_text/_status_text.scss create mode 100644 packages/ui_framework/src/components/table/__snapshots__/controlled_table.test.js.snap create mode 100644 packages/ui_framework/src/components/table/__snapshots__/table.test.js.snap create mode 100644 packages/ui_framework/src/components/table/__snapshots__/table_header_cell.test.js.snap create mode 100644 packages/ui_framework/src/components/table/__snapshots__/table_header_check_box_cell.test.js.snap create mode 100644 packages/ui_framework/src/components/table/__snapshots__/table_info.test.js.snap create mode 100644 packages/ui_framework/src/components/table/__snapshots__/table_row.test.js.snap create mode 100644 packages/ui_framework/src/components/table/__snapshots__/table_row_cell.test.js.snap create mode 100644 packages/ui_framework/src/components/table/__snapshots__/table_row_check_box_cell.test.js.snap create mode 100644 packages/ui_framework/src/components/table/_controlled_table.scss create mode 100644 packages/ui_framework/src/components/table/_index.scss create mode 100644 packages/ui_framework/src/components/table/_table.scss create mode 100644 packages/ui_framework/src/components/table/controlled_table.js create mode 100644 packages/ui_framework/src/components/table/controlled_table.test.js create mode 100644 packages/ui_framework/src/components/table/index.js create mode 100644 packages/ui_framework/src/components/table/table.js create mode 100644 packages/ui_framework/src/components/table/table.test.js create mode 100644 packages/ui_framework/src/components/table/table_body.js create mode 100644 packages/ui_framework/src/components/table/table_header.js create mode 100644 packages/ui_framework/src/components/table/table_header_cell.js create mode 100644 packages/ui_framework/src/components/table/table_header_cell.test.js create mode 100644 packages/ui_framework/src/components/table/table_header_check_box_cell.js create mode 100644 packages/ui_framework/src/components/table/table_header_check_box_cell.test.js create mode 100644 packages/ui_framework/src/components/table/table_info.js create mode 100644 packages/ui_framework/src/components/table/table_info.test.js create mode 100644 packages/ui_framework/src/components/table/table_row.js create mode 100644 packages/ui_framework/src/components/table/table_row.test.js create mode 100644 packages/ui_framework/src/components/table/table_row_cell.js create mode 100644 packages/ui_framework/src/components/table/table_row_cell.test.js create mode 100644 packages/ui_framework/src/components/table/table_row_check_box_cell.js create mode 100644 packages/ui_framework/src/components/table/table_row_check_box_cell.test.js create mode 100644 packages/ui_framework/src/components/table_info/_index.scss create mode 100644 packages/ui_framework/src/components/table_info/_table_info.scss create mode 100644 packages/ui_framework/src/components/tabs/__snapshots__/tab.test.js.snap create mode 100644 packages/ui_framework/src/components/tabs/__snapshots__/tabs.test.js.snap create mode 100644 packages/ui_framework/src/components/tabs/_index.scss create mode 100644 packages/ui_framework/src/components/tabs/_tabs.scss create mode 100644 packages/ui_framework/src/components/tabs/index.js create mode 100644 packages/ui_framework/src/components/tabs/tab.js create mode 100644 packages/ui_framework/src/components/tabs/tab.test.js create mode 100644 packages/ui_framework/src/components/tabs/tabs.js create mode 100644 packages/ui_framework/src/components/tabs/tabs.test.js create mode 100644 packages/ui_framework/src/components/toggle_button/_index.scss create mode 100644 packages/ui_framework/src/components/toggle_button/_toggle_button.scss create mode 100644 packages/ui_framework/src/components/toggle_button/_toggle_panel.scss create mode 100644 packages/ui_framework/src/components/tool_bar/__snapshots__/tool_bar.test.js.snap create mode 100644 packages/ui_framework/src/components/tool_bar/__snapshots__/tool_bar_footer.test.js.snap create mode 100644 packages/ui_framework/src/components/tool_bar/__snapshots__/tool_bar_footer_section.test.js.snap create mode 100644 packages/ui_framework/src/components/tool_bar/__snapshots__/tool_bar_search_box.test.js.snap create mode 100644 packages/ui_framework/src/components/tool_bar/__snapshots__/tool_bar_section.test.js.snap create mode 100644 packages/ui_framework/src/components/tool_bar/__snapshots__/tool_bar_text.test.js.snap create mode 100644 packages/ui_framework/src/components/tool_bar/_index.scss create mode 100644 packages/ui_framework/src/components/tool_bar/_tool_bar.scss create mode 100644 packages/ui_framework/src/components/tool_bar/_tool_bar_footer.scss create mode 100644 packages/ui_framework/src/components/tool_bar/_tool_bar_search.scss create mode 100644 packages/ui_framework/src/components/tool_bar/_tool_bar_text.scss create mode 100644 packages/ui_framework/src/components/tool_bar/index.js create mode 100644 packages/ui_framework/src/components/tool_bar/tool_bar.js create mode 100644 packages/ui_framework/src/components/tool_bar/tool_bar.test.js create mode 100644 packages/ui_framework/src/components/tool_bar/tool_bar_footer.js create mode 100644 packages/ui_framework/src/components/tool_bar/tool_bar_footer.test.js create mode 100644 packages/ui_framework/src/components/tool_bar/tool_bar_footer_section.js create mode 100644 packages/ui_framework/src/components/tool_bar/tool_bar_footer_section.test.js create mode 100644 packages/ui_framework/src/components/tool_bar/tool_bar_search_box.js create mode 100644 packages/ui_framework/src/components/tool_bar/tool_bar_search_box.test.js create mode 100644 packages/ui_framework/src/components/tool_bar/tool_bar_section.js create mode 100644 packages/ui_framework/src/components/tool_bar/tool_bar_section.test.js create mode 100644 packages/ui_framework/src/components/tool_bar/tool_bar_text.js create mode 100644 packages/ui_framework/src/components/tool_bar/tool_bar_text.test.js create mode 100644 packages/ui_framework/src/components/typography/__snapshots__/typography.test.js.snap create mode 100644 packages/ui_framework/src/components/typography/_index.scss create mode 100644 packages/ui_framework/src/components/typography/_typography.scss create mode 100644 packages/ui_framework/src/components/typography/typography.js create mode 100644 packages/ui_framework/src/components/typography/typography.test.js create mode 100644 packages/ui_framework/src/components/vertical_rhythm/_index.scss create mode 100644 packages/ui_framework/src/components/vertical_rhythm/_vertical_rhythm.scss create mode 100644 packages/ui_framework/src/components/view/_index.scss create mode 100644 packages/ui_framework/src/components/view/_view.scss create mode 100644 packages/ui_framework/src/global_styling/mixins/_global_mixins.scss create mode 100644 packages/ui_framework/src/global_styling/mixins/_index.scss create mode 100644 packages/ui_framework/src/global_styling/reset/_index.scss create mode 100644 packages/ui_framework/src/global_styling/reset/_reset.scss create mode 100644 packages/ui_framework/src/global_styling/utilities/_index.scss create mode 100644 packages/ui_framework/src/global_styling/variables/_animations.scss create mode 100644 packages/ui_framework/src/global_styling/variables/_borders.scss create mode 100644 packages/ui_framework/src/global_styling/variables/_colors.scss create mode 100644 packages/ui_framework/src/global_styling/variables/_font.scss create mode 100644 packages/ui_framework/src/global_styling/variables/_form.scss create mode 100644 packages/ui_framework/src/global_styling/variables/_index.scss create mode 100644 packages/ui_framework/src/global_styling/variables/_shadows.scss create mode 100644 packages/ui_framework/src/global_styling/variables/_timing.scss create mode 100644 packages/ui_framework/src/global_styling/variables/_tool_bar.scss create mode 100644 packages/ui_framework/src/global_styling/variables/_z_index.scss create mode 100644 packages/ui_framework/src/index.scss create mode 100644 packages/ui_framework/src/services/accessibility/accessible_click_keys.js create mode 100644 packages/ui_framework/src/services/accessibility/combo_box_key_codes.js create mode 100644 packages/ui_framework/src/services/accessibility/index.js create mode 100644 packages/ui_framework/src/services/alignment.js create mode 100644 packages/ui_framework/src/services/index.js create mode 100644 packages/ui_framework/src/services/key_codes.js create mode 100644 packages/ui_framework/src/services/sort/index.js create mode 100644 packages/ui_framework/src/services/sort/sortable_properties.js create mode 100644 packages/ui_framework/src/services/sort/sortable_properties.test.js create mode 100644 packages/ui_framework/src/test/required_props.js create mode 100644 packages/ui_framework/src/themes/light_theme/_index.scss diff --git a/packages/ui_framework/.gitignore b/packages/ui_framework/.gitignore new file mode 100644 index 0000000000000..e9df1be1031f0 --- /dev/null +++ b/packages/ui_framework/.gitignore @@ -0,0 +1 @@ +doc_site/build diff --git a/packages/ui_framework/README.md b/packages/ui_framework/README.md new file mode 100644 index 0000000000000..b7c7de51fff00 --- /dev/null +++ b/packages/ui_framework/README.md @@ -0,0 +1,211 @@ +# Kibana UI Framework + +> The Kibana UI Framework is a collection of React UI components for quickly building user interfaces +> for Kibana. Not using React? No problem! You can still use the CSS behind each component. + +## Using the Framework + +### Documentation + +Compile the CSS with `./node_modules/grunt/bin/grunt uiFramework:compileCss` (OS X) or +`.\node_modules\grunt\bin\grunt uiFramework:compileCss` (Windows). + +You can view interactive documentation by running `npm run uiFramework:start` and then visiting +`http://localhost:8020/`. This will also start watching the SCSS files, and will recompile the CSS +automatically for you when you make changes. + +You can run `node scripts/jest --watch` to watch for changes and run the tests as you code. + +You can run `node scripts/jest --coverage` to generate a code coverage report to see how +fully-tested the code is. + +See the documentation in [`scripts/jest.js`](../scripts/jest.js) for more options. + +## Creating components + +There are four steps to creating a new component: + +1. Create the SCSS for the component in `ui_framework/src/components`. +2. Create the React portion of the component. +3. Write tests. +4. Document it with examples in `ui_framework/doc_site`. + +You can do this using Yeoman (the easy way), or you can do it manually (the hard way). + +### Using Yeoman + +#### Create a new component + +From the command line, run `npm run uiFramework:createComponent`. + +First, you'll be prompted for what kind of component to create: + +| Choice | Description | +|---|---| +| Stateless function | A stateless functional React component | +| Component class | A class-based React component | + +Next, you'll enter a series of prompts. + +#### "What's the name of this component?" + +Yeoman will ask you what to name the file. It expects you to provide the name +in snake case. Yeoman will automatically add file extensions and a "kui" prefix so you should leave those out. + +#### "Where do you want to create this component's files?" + +This defaults to the last directory you specified for this prompt, or to the UI Framework's +components directory if you haven't specified one. To change this location, type in the path to the +directory where the files should live. + +If you want Yeoman to automatically generate a directory to organize the files, +that directory will be created inside of the location you specify (see next prompt). + +#### "Does it need its own directory?"" + +This defaults to `YES`. This will automatically generate a directory with the +same name as the file, but without a "kui" prefix. + +#### Done! + +Yeoman will generate the files you need in your project's folder system. + +For your convenience, it will also output some snippets you can tweak to import +and re-export the generated JS and SCSS files. + +### Manually + +#### Create component SCSS + +1. Create a directory for your component in `ui_framework/src/components`. +2. In this directory, create `_{component name}.scss`. +3. _Optional:_ Create any other components that should be [logically-grouped](#logically-grouped-components) +in this directory. +4. Create an `_index.scss` file in this directory that import all of the new component SCSS files +you created. +5. Import the `_index.scss` file into `ui_framework/src/components/index.scss`. + +This makes your styles available to Kibana and the UI Framework documentation. + +#### Create the React component + +1. Create the React component(s) in the same directory as the related SCSS file(s). +2. Export these components from an `index.js` file. +3. Re-export these components from `ui_framework/src/components/index.js`. + +This makes your React component available for import into Kibana. + +#### Test the component + +1. Start Jest in watch mode by running `node scripts/jest --watch`. +2. Create test files with the name pattern of `{component name}.test.js`. +3. Write your tests and see them fail or succeed. + +To see how well the components have been covered by tests, you can run +`node scripts/jest --coverage` and check the generated report in +`target/jest-coverage/index.html`. + +#### Document the component with examples + +1. Create a directory for your example in `ui_framework/doc_site/src/views`. Name it the name of the +component. +2. Create a `{component name}_example.js` file inside the directory. You'll use this file to define +the different examples for your component. +3. Add the route to this file in `ui_framework/doc_site/src/services/routes/Routes.js`. +4. In the `{component name}_example.js` file you created, define examples which demonstrate the component and describe +its role from a UI perspective. + +The complexity of the component should determine how many examples you need to create, and how +complex they should be. In general, your examples should demonstrate: + +* The most common use-cases for the component. +* How the component handles edge cases, e.g. overflowing content, text-based vs. element-based +content. +* The various states of the component, e.g. disabled, selected, empty of content, error state. + +## Creating documentation + +You can use the same Yeoman generator referenced above to create documentation. + +From the command line, run `npm run uiFramework:documentComponent`. + +First, you'll be prompted for what kind of documentation to create: + +| Choice | Description | +|---|---| +| Page | A page for documenting a component(s) with multiple demos | +| Page demo | An individual demo of a particular component use case | +| Sandbox | An empty document where you can do pretty much anything | + +Just follow the prompts and your documentation files will be created. +You can use the snippets that are printed to the terminal to integrate these files into the UI Framework documentation site. + +## Principles + +### Logically-grouped components + +If a component has subcomponents (e.g. ToolBar and ToolBarSearch), tightly-coupled components (e.g. +Button and ButtonGroup), or you just want to group some related components together (e.g. TextInput, +TextArea, and CheckBox), then they belong in the same logical grouping. In this case, you can create +additional SCSS files for these components in the same component directory. + +### Writing CSS + +Check out our [CSS style guide](https://github.com/elastic/kibana/blob/master/style_guides/css_style_guide.md) +and [SCSS style guide](https://github.com/elastic/kibana/blob/master/style_guides/scss_style_guide.md). + +## Benefits + +### Dynamic, interactive documentation + +By having a "living style guide", we relieve our designers of the burden of creating and maintaining +static style guides. This also makes it easier for our engineers to translate mockups, prototypes, +and wireframes into products. + +### Copy-pasteable UI + +Engineers can copy and paste sample code into their projects to quickly get reliable, consistent results. + +### Remove CSS from the day-to-day + +The CSS portion of this framework means engineers don't need to spend mental cycles translating a +design into CSS. These cycles can be spent on the things critical to the identity of the specific +project they're working on, like architecture and business logic. + +If they use the React components, engineers won't even need to _see_ CSS -- it will be encapsulated +behind the React components' interfaces. + +### More UI tests === fewer UI bugs + +By covering our UI components with great unit tests and having those tests live within the framework +itself, we can rest assured that our UI layer is tested and remove some of that burden from our +integration/end-to-end tests. + +## Why not just use Bootstrap? + +In short: we've outgrown it! Third-party CSS frameworks like Bootstrap and Foundation are designed +for a general audience, so they offer things we don't need and _don't_ offer things we _do_ need. +As a result, we've been forced to override their styles until the original framework is no longer +recognizable. When the CSS reaches that point, it's time to take ownership over it and build +your own framework. + +We also gain the ability to fix some of the common issues with third-party CSS frameworks: + +* They have non-semantic markup. +* They deeply nest their selectors. + +For a more in-depth analysis of the problems with Bootstrap (and similar frameworks), check out this +article and the links it has at the bottom: ["Bootstrap Bankruptcy"](http://www.matthewcopeland.me/blog/2013/11/04/bootstrap-bankruptcy/). + +## Examples of other in-house UI frameworks + +* [Smaato React UI Framework](http://smaato.github.io/ui-framework/#/modal) +* [Ubiquiti CSS Framework](http://ubnt-css.herokuapp.com/#/app/popover) +* [GitHub's Primer](http://primercss.io/) +* [Palantir's Blueprint](http://blueprintjs.com/docs/#components) +* [Lonely Planet Style Guide](http://rizzo.lonelyplanet.com/styleguide/design-elements/colours) +* [MailChimp Patterns Library](http://ux.mailchimp.com/patterns) +* [Salesforce Lightning Design System](https://www.lightningdesignsystem.com/) +* [Refills](http://refills.bourbon.io/) +* [Formstone](https://formstone.it/) +* [Element VueJS Framework](http://element.eleme.io/#/en-US/component/dialog) diff --git a/packages/ui_framework/components/index.js b/packages/ui_framework/components/index.js new file mode 100644 index 0000000000000..aa94edb4a57f0 --- /dev/null +++ b/packages/ui_framework/components/index.js @@ -0,0 +1 @@ +export * from '../src/components'; diff --git a/packages/ui_framework/dist/ui_framework.css b/packages/ui_framework/dist/ui_framework.css new file mode 100644 index 0000000000000..c54d1b14c3bf4 --- /dev/null +++ b/packages/ui_framework/dist/ui_framework.css @@ -0,0 +1,3552 @@ +/** + * 1. Enforce pointer when there's no href. + * 2. Allow these styles to be applied to a button element. + */ +/** + * 1. Override Bootstrap styles. + */ +/** + * 1. Links can't have a disabled attribute, so they can't support :disabled. + */ +/** + * 1. Links can't have a disabled attribute, so they can't support :enabled. + */ +/** + * 1. Links can't have a disabled attribute, so they can't support :enabled. + */ +/** + * 1. Links can't have a disabled attribute, so they can't support :enabled. + */ +/** + * 1. Make sure outline doesn't get hidden beneath adjacent elements. + * 2. Override inherited styles (possibly from Bootstrap). + * 3. Create an offset box-shadow that follows the contours of the element. + */ +/** + * Nothing fancy, just the basics so we can use this for both regular and static controls. + */ +/** + * 1. Prevent Firefox users from being able to resize textareas to smaller than the min-height. + */ +/** + * We specifically don't include Angular's ng-${state} classes here because we don't want to be tightly + * coupled with Angular. + */ +/** + * 1. Embedded SVG of fa-caret-down (https://github.com/encharm/Font-Awesome-SVG-PNG/blob/master/black/svg/caret-down.svg). + * 2. Make room on right side for the caret. + * 3. Prevent Firefox from showing dotted line around text on focus. + */ +/** + * 1. Setting to inline-block guarantees the same height when applied to both + * button elements and anchor tags. + * 2. Fit MicroButton inside of Table rows without pushing them taller. + */ +/** + * 1. Give Bar a consistent height for when it contains shorter children, and therefore can't + * depend on them to give it the desired height. + */ +/** + * 1. Put 10px of space between each child. + * 2. If there is only one section, align it to the right. If you wanted it aligned right, you + * wouldn't use the Bar in the first place. + * 3. Children in the middle should center their content. + * 4. Fix an IE bug which causes the last child to overflow the container. + * 5. Fixing this bug means we now need to align the children to the right. + */ +* { + box-sizing: border-box; } + *:before, *:after { + box-sizing: border-box; } + +:focus { + z-index: 1; + /* 1 */ + outline: none !important; + /* 2 */ + box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #0079a5; + /* 3 */ } + +body { + font-family: "Open Sans", Helvetica, Arial, sans-serif; } + +/** + * 1. Required for IE11. + */ +main { + display: block; + /* 1 */ } + +.kuiScreenReaderOnly { + position: absolute; + left: -10000px; + top: auto; + width: 1px; + height: 1px; + overflow: hidden; } + +.kuiActionItem { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; } + +.kuiBadge { + display: inline-block; + margin-left: 0.5em; + padding: 0.1em 0.7em; + vertical-align: middle; + font-size: 11px; + line-height: 1.5; + letter-spacing: 0.1em; + text-transform: uppercase; } + +.kuiBadge--default { + background-color: rgba(0, 0, 0, 0.1); } + +.kuiBar { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + min-height: 30px; + /* 1 */ } + +.kuiBarSection { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-flex: 1; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + margin-left: 25px; + margin-right: 25px; } + .kuiBarSection:not(:first-child):not(:last-child):not(:only-child) { + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + /* 3 */ } + .kuiBarSection:first-child { + margin-left: 0; } + .kuiBarSection:last-child { + margin-right: 0; + -webkit-box-flex: 0; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + /* 4 */ + -webkit-box-pack: end; + -webkit-justify-content: flex-end; + -ms-flex-pack: end; + justify-content: flex-end; + /* 5 */ } + .kuiBarSection:only-child { + margin-left: auto; + /* 2 */ } + .kuiBarSection > * + * { + margin-left: 10px; + /* 1 */ } + +/** + * 1. Setting to inline-block guarantees the same height when applied to both + * button elements and anchor tags. + * 2. Links can be focused when they're "disabled" (since we're just faking this with a class), but + * at least make them look like they're not focused. + */ +.kuiButton { + display: inline-block; + /* 1 */ + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + cursor: pointer; + padding: 4px 12px 5px; + font-size: 14px; + font-weight: 400; + line-height: 1.5; + height: 30px; + text-decoration: none; + border: none; + border-radius: 4px; } + .kuiButton:disabled { + cursor: not-allowed; + opacity: .5; } + a.kuiButton.kuiButton-isDisabled { + cursor: not-allowed; + opacity: .5; } + .kuiButton:enabled:active { + -webkit-transform: translateY(1px); + transform: translateY(1px); } + a.kuiButton:not(.kuiButton-isDisabled):active { + /* 1 */ + -webkit-transform: translateY(1px); + transform: translateY(1px); } + +/** + * 1. Solves whitespace problems introduced by inline elements. + */ +.kuiButton__inner { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + /* 1 */ + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + /* 1 */ } + +.kuiButton--small { + font-size: 12px; + padding: 2px 8px 3px; + height: 22px; } + +.kuiButton--fullWidth { + width: 100%; + text-align: center; } + +.kuiButton--iconText .kuiButton__icon:first-child:not(:only-child) { + margin-right: 8px; } + +.kuiButton--iconText .kuiButton__icon:last-child:not(:only-child) { + margin-left: 8px; } + +.kuiButton--iconText.kuiButton--small .kuiButton__icon:first-child:not(:only-child) { + margin-right: 4px; } + +.kuiButton--iconText.kuiButton--small .kuiButton__icon:last-child:not(:only-child) { + margin-left: 4px; } + +/** + * 1. Override Bootstrap. + */ +.kuiButton--basic { + color: #2d2d2d; + background-color: #F5F5F5; } + .kuiButton--basic:not(a):enabled:focus { + color: #2d2d2d; } + a.kuiButton--basic:not(.kuiButton-isDisabled):focus { + /* 1 */ + color: #2d2d2d; } + .kuiButton--basic:enabled:hover { + background-color: gainsboro !important; + /* 1 */ } + a.kuiButton--basic:not(.kuiButton-isDisabled):hover { + /* 1 */ + background-color: gainsboro !important; + /* 1 */ } + .kuiButton--basic:enabled:active { + background-color: gainsboro !important; + /* 1 */ } + a.kuiButton--basic:not(.kuiButton-isDisabled):active { + /* 1 */ + background-color: gainsboro !important; + /* 1 */ } + .theme-dark .kuiButton--basic { + color: #FFF; + background-color: #9c9c9c; } + .theme-dark .kuiButton--basic:not(a):enabled:focus { + z-index: 1; + /* 1 */ + outline: none !important; + /* 2 */ + box-shadow: 0 0 0 1px #777777, 0 0 0 2px #0079a5; + /* 3 */ + color: #FFF; } + a.theme-dark .kuiButton--basic:not(.kuiButton-isDisabled):focus { + /* 1 */ + z-index: 1; + /* 1 */ + outline: none !important; + /* 2 */ + box-shadow: 0 0 0 1px #777777, 0 0 0 2px #0079a5; + /* 3 */ + color: #FFF; } + .theme-dark .kuiButton--basic:enabled:hover { + background-color: dimgray !important; + /* 1 */ } + a.theme-dark .kuiButton--basic:not(.kuiButton-isDisabled):hover { + /* 1 */ + background-color: dimgray !important; + /* 1 */ } + .theme-dark .kuiButton--basic:enabled:active { + background-color: dimgray !important; + /* 1 */ } + a.theme-dark .kuiButton--basic:not(.kuiButton-isDisabled):active { + /* 1 */ + background-color: dimgray !important; + /* 1 */ } + +/** + * 1. Override Bootstrap. + */ +.kuiButton--primary { + color: #FFF; + background-color: #0079a5; } + .kuiButton--primary:not(a):enabled:focus { + color: #FFF; } + a.kuiButton--primary:not(.kuiButton-isDisabled):focus { + /* 1 */ + color: #FFF; } + .kuiButton--primary:enabled:hover { + color: #FFF !important; + /* 1 */ + background-color: #005472; } + a.kuiButton--primary:not(.kuiButton-isDisabled):hover { + /* 1 */ + color: #FFF !important; + /* 1 */ + background-color: #005472; } + .kuiButton--primary:enabled:active { + color: #FFF !important; + /* 1 */ + background-color: #005472; } + a.kuiButton--primary:not(.kuiButton-isDisabled):active { + /* 1 */ + color: #FFF !important; + /* 1 */ + background-color: #005472; } + +/** + * 1. Override Bootstrap. + */ +.kuiButton--success { + color: #FFF; + background-color: #00A69B; } + .kuiButton--success:not(a):enabled:focus { + color: #FFF; } + a.kuiButton--success:not(.kuiButton-isDisabled):focus { + /* 1 */ + color: #FFF; } + .kuiButton--success:enabled:hover { + color: #FFF !important; + /* 1 */ + background-color: #00736b; } + a.kuiButton--success:not(.kuiButton-isDisabled):hover { + /* 1 */ + color: #FFF !important; + /* 1 */ + background-color: #00736b; } + .kuiButton--success:enabled:active { + color: #FFF !important; + /* 1 */ + background-color: #00736b; } + a.kuiButton--success:not(.kuiButton-isDisabled):active { + /* 1 */ + color: #FFF !important; + /* 1 */ + background-color: #00736b; } + +/** + * 1. Override Bootstrap. + */ +.kuiButton--danger { + color: #A30000; + background-color: rgba(255, 255, 255, 0.5); + border: solid 1px #A30000; } + .kuiButton--danger:not(a):enabled:focus { + z-index: 1; + /* 1 */ + outline: none !important; + /* 2 */ + box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #ff523c; + /* 3 */ + color: #A30000; } + a.kuiButton--danger:not(.kuiButton-isDisabled):focus { + /* 1 */ + z-index: 1; + /* 1 */ + outline: none !important; + /* 2 */ + box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #ff523c; + /* 3 */ + color: #A30000; } + .kuiButton--danger:enabled:hover { + color: #700000 !important; + background-color: rgba(255, 163, 163, 0.5); + border: solid 1px #700000; } + a.kuiButton--danger:not(.kuiButton-isDisabled):hover { + /* 1 */ + color: #700000 !important; + background-color: rgba(255, 163, 163, 0.5); + border: solid 1px #700000; } + .kuiButton--danger:enabled:active { + color: #700000 !important; + background-color: rgba(255, 163, 163, 0.5); + border: solid 1px #700000; } + a.kuiButton--danger:not(.kuiButton-isDisabled):active { + /* 1 */ + color: #700000 !important; + background-color: rgba(255, 163, 163, 0.5); + border: solid 1px #700000; } + +/** + * 1. Override Bootstrap. + */ +.kuiButton--warning { + color: #FFF; + background-color: #f98100; } + .kuiButton--warning:not(a):enabled:focus { + z-index: 1; + /* 1 */ + outline: none !important; + /* 2 */ + box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #ffa500; + /* 3 */ + color: #FFF; } + a.kuiButton--warning:not(.kuiButton-isDisabled):focus { + /* 1 */ + z-index: 1; + /* 1 */ + outline: none !important; + /* 2 */ + box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #ffa500; + /* 3 */ + color: #FFF; } + .kuiButton--warning:enabled:hover { + color: #FFF !important; + /* 1 */ + background-color: #c66700; } + a.kuiButton--warning:not(.kuiButton-isDisabled):hover { + /* 1 */ + color: #FFF !important; + /* 1 */ + background-color: #c66700; } + .kuiButton--warning:enabled:active { + color: #FFF !important; + /* 1 */ + background-color: #c66700; } + a.kuiButton--warning:not(.kuiButton-isDisabled):active { + /* 1 */ + color: #FFF !important; + /* 1 */ + background-color: #c66700; } + .kuiButton--warning:disabled { + background-color: #ff9a2d; } + a.kuiButton--warning.kuiButton-isDisabled { + background-color: #ff9a2d; } + +/** + * 1. Override Bootstrap. + * 2. Override either Bootstrap or Timelion styles. + */ +.kuiButton--hollow { + color: #0079a5 !important; + /* 2 */ + background-color: transparent; } + .kuiButton--hollow:enabled:hover { + color: #006E8A !important; + /* 1 */ + text-decoration: underline; } + a.kuiButton--hollow:not(.kuiButton-isDisabled):hover { + /* 1 */ + color: #006E8A !important; + /* 1 */ + text-decoration: underline; } + .kuiButton--hollow:enabled:active { + color: #006E8A !important; + /* 1 */ + text-decoration: underline; } + a.kuiButton--hollow:not(.kuiButton-isDisabled):active { + /* 1 */ + color: #006E8A !important; + /* 1 */ + text-decoration: underline; } + +.kuiButton--secondary { + color: #0079a5 !important; + /* 2 */ + border: solid 1px #0079a5; + background-color: rgba(255, 255, 255, 0.5); } + .kuiButton--secondary:enabled:hover { + color: #005472 !important; + /* 1 */ + border: solid 1px #005472; + background-color: rgba(165, 231, 255, 0.5); } + a.kuiButton--secondary:not(.kuiButton-isDisabled):hover { + /* 1 */ + color: #005472 !important; + /* 1 */ + border: solid 1px #005472; + background-color: rgba(165, 231, 255, 0.5); } + .kuiButton--secondary:enabled:active { + color: #005472 !important; + /* 1 */ + border: solid 1px #005472; + background-color: rgba(165, 231, 255, 0.5); } + a.kuiButton--secondary:not(.kuiButton-isDisabled):active { + /* 1 */ + color: #005472 !important; + /* 1 */ + border: solid 1px #005472; + background-color: rgba(165, 231, 255, 0.5); } + +.kuiButtonGroup { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; } + .kuiButtonGroup .kuiButton + .kuiButton { + margin-left: 4px; } + +.kuiButtonGroup--united > .kuiButton:not(:first-child):not(:last-child) { + border-radius: 0; } + +.kuiButtonGroup--united > .kuiButton:first-child { + border-top-right-radius: 0; + border-bottom-right-radius: 0; } + +.kuiButtonGroup--united > .kuiButton:last-child { + border-top-left-radius: 0; + border-bottom-left-radius: 0; } + +.kuiButtonGroup--united > .kuiButton:only-child { + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; } + +.kuiButtonGroup--united .kuiButton + .kuiButton { + margin-left: 2px; } + +.kuiButtonGroup--fullWidth { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; } + .kuiButtonGroup--fullWidth > .kuiButton { + -webkit-box-flex: 1; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + text-align: center; } + +.kuiCard { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + border: 1px solid #E0E0E0; + border-radius: 4px; + overflow: hidden; + line-height: 1.5; } + +.kuiCard__description { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + padding: 18px 0; + text-align: center; } + +.kuiCard__descriptionTitle { + font-size: 14px; + font-weight: bold; + margin-bottom: 10px; + text-align: center; + max-width: calc(100% - 48px); } + +.kuiCard__descriptionText { + font-size: 14px; + max-width: calc(100% - 48px); } + +.kuiCard__footer { + text-align: center; + font-size: 14px; + padding: 0 15px 20px; } + +/** + * 1. Wrap cards when necessary. + * 2. Offset the spacing between wrapped cards. + */ +.kuiCardGroup { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + /* 1 */ + margin: -15px; + /* 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. + */ } + .kuiCardGroup .kuiCard { + -webkit-box-flex: 1; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + /* 1 */ + margin: 15px; + /* 2 */ } + .kuiCardGroup .kuiCard .kuiCard__description { + -webkit-box-flex: 1; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; } + +/** + * 1. There's no way to make this look good when wrapped. + * 2. Undo the default styles. + */ +.kuiCardGroup--united { + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + /* 1 */ + border: 1px solid #E0E0E0; + border-radius: 4px; + overflow: hidden; + margin: 0; + /* 2 */ + /** + * 1. Force all cards to be the same size. + * 2. Undo the default styles. + */ } + .kuiCardGroup--united .kuiCard { + -webkit-flex-basis: 0; + -ms-flex-preferred-size: 0; + flex-basis: 0; + /* 1 */ + border: none; + /* 2 */ + border-radius: 0; + /* 2 */ + margin: 0; + /* 2 */ } + .kuiCardGroup--united .kuiCard + .kuiCard { + border-left: 1px solid #E0E0E0; } + +.kuiCollapseButton { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-color: transparent; + padding: 4px; + border: none; + line-height: 1; + font-size: 16px; + color: #2d2d2d !important; + /* 1 */ + cursor: pointer; + opacity: 0.35; } + .kuiCollapseButton:hover { + opacity: 1; } + .theme-dark .kuiCollapseButton { + color: #cecece !important; + /* 1 */ } + +.kuiColorPicker { + cursor: pointer; } + +.kuiColorPicker__preview { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; } + +.kuiColorPicker__swatch { + width: 20px; + height: 20px; + border-radius: 4px; + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); + display: inline-block; } + +.kuiColorPicker__emptySwatch svg { + position: absolute; + width: 20px; + height: 20px; } + +.kuiColorPicker__emptySwatch svg line { + stroke: red; + stroke-width: 2; } + +.kuiColorPicker__label { + font-size: 14px; + line-height: 1.5; + margin-left: 10px; + display: inline-block; + vertical-align: middle; } + +.kuiColorPickerPopUp { + position: absolute; + z-index: 10; } + +/** + * 1. If we use margins instead, columns get pushed to the next line. + */ +.kuiColumn + .kuiColumn { + padding-left: 10px; + /* 1 */ } + +/** + * 1. Use inline-block instead of flexbox so that content doesn't overflow. + * 2. Content can be aligned by offsetting from the top. + */ +.kuiColumn--1 { + display: inline-block; + /* 1 */ + vertical-align: top; + /* 2 */ + width: 8.33333%; } + +.kuiColumn--2 { + display: inline-block; + /* 1 */ + vertical-align: top; + /* 2 */ + width: 16.66667%; } + +.kuiColumn--3 { + display: inline-block; + /* 1 */ + vertical-align: top; + /* 2 */ + width: 25%; } + +.kuiColumn--4 { + display: inline-block; + /* 1 */ + vertical-align: top; + /* 2 */ + width: 33.33333%; } + +.kuiColumn--5 { + display: inline-block; + /* 1 */ + vertical-align: top; + /* 2 */ + width: 41.66667%; } + +.kuiColumn--6 { + display: inline-block; + /* 1 */ + vertical-align: top; + /* 2 */ + width: 50%; } + +.kuiColumn--7 { + display: inline-block; + /* 1 */ + vertical-align: top; + /* 2 */ + width: 58.33333%; } + +.kuiColumn--8 { + display: inline-block; + /* 1 */ + vertical-align: top; + /* 2 */ + width: 66.66667%; } + +.kuiColumn--9 { + display: inline-block; + /* 1 */ + vertical-align: top; + /* 2 */ + width: 75%; } + +.kuiColumn--10 { + display: inline-block; + /* 1 */ + vertical-align: top; + /* 2 */ + width: 83.33333%; } + +.kuiColumn--11 { + display: inline-block; + /* 1 */ + vertical-align: top; + /* 2 */ + width: 91.66667%; } + +.kuiColumn--12 { + display: inline-block; + /* 1 */ + vertical-align: top; + /* 2 */ + width: 100%; } + +.kuiEvent { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; } + +.kuiEventSymbol { + -webkit-box-flex: 0; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + font-size: 14px; + line-height: 1.5; + padding-right: 8px; } + +.kuiEventBody { + -webkit-box-flex: 1; + -webkit-flex: 1 1 0%; + -ms-flex: 1 1 0%; + flex: 1 1 0%; } + +.kuiEventBody__message { + font-size: 14px; + line-height: 1.5; + color: #191E23; } + +.kuiEventBody__metadata { + font-size: 14px; + line-height: 1.5; + color: #666; } + +.kuiExpressionItem { + display: inline-block; + position: relative; } + .kuiExpressionItem + .kuiExpressionItem { + margin-left: 10px; } + +.kuiExpressionItem__button { + background-color: transparent; + padding: 5px 0px; + border: none; + border-bottom: dotted 2px #D9D9D9; + font-size: 14px; + cursor: pointer; } + +.kuiExpressionItem__buttonDescription { + color: #00A69B; + text-transform: uppercase; } + +.kuiExpressionItem__buttonValue { + color: #2d2d2d; + text-transform: lowercase; } + +.kuiExpressionItem__button--isActive { + border-bottom: solid 2px #00A69B; } + +.kuiExpressionItem__popover { + position: absolute; + top: calc(100% + 15px); + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-flex: 1; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + background-color: white; + border: 1px solid #D9D9D9; + border-radius: 6px; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1); + visibility: visible; + opacity: 1; + -webkit-transform: translateY(-5px) translateZ(0); + transform: translateY(-5px) translateZ(0); + transition: opacity 250ms cubic-bezier(0.34, 1.61, 0.7, 1), -webkit-transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1); + transition: transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1), opacity 250ms cubic-bezier(0.34, 1.61, 0.7, 1); + transition: transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1), opacity 250ms cubic-bezier(0.34, 1.61, 0.7, 1), -webkit-transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1); } + .kuiExpressionItem__popover.ng-hide, .kuiExpressionItem__popover.kuiExpressionItem__popover--isHidden { + display: block !important; + visibility: hidden; + opacity: 0; + -webkit-transform: translateY(0px) translateZ(0); + transform: translateY(0px) translateZ(0); } + .kuiExpressionItem__popover:before { + position: absolute; + content: ""; + top: -8px; + left: 20px; + height: 0; + width: 0; + border-left: 8px solid transparent; + border-right: 8px solid transparent; + border-bottom: 8px solid #D9D9D9; } + .kuiExpressionItem__popover:after { + position: absolute; + content: ""; + top: -7px; + left: 20px; + height: 0; + width: 0; + border-left: 8px solid transparent; + border-right: 8px solid transparent; + border-bottom: 8px solid #e6e6e6; } + .kuiExpressionItem__popover.kuiExpressionItem__popover--alignRight { + right: 0; } + .kuiExpressionItem__popover.kuiExpressionItem__popover--alignRight:before, .kuiExpressionItem__popover.kuiExpressionItem__popover--alignRight:after { + left: auto; + right: 20px; } + +.kuiExpressionItem__popoverTitle { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 1; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + background-color: #e6e6e6; + border-radius: 4px 4px 0 0; + color: #2d2d2d; + padding: 5px 10px; + line-height: 1.5; } + +.kuiExpressionItem__popoverContent { + padding: 20px; + white-space: nowrap; } + +/** + * 1. Set inline-block so this wrapper shrinks to fit the input. + */ +.kuiAssistedInput { + display: inline-block; + /* 1 */ + position: relative; } + +/** + * 1. Vertically center the assistance, regardless of its height. + */ +.kuiAssistedInput__assistance { + position: absolute; + right: 12px; + top: 50%; + /* 1 */ + -webkit-transform: translateY(-50%); + transform: translateY(-50%); + /* 1 */ } + +/** + * 1. Deliberately disable only webkit appearance. If we disable it in Firefox, we get a really + * ugly default appearance which we can't customize, so our best option is to give Firefox + * control over the checkbox's appearance. + * 2. Override default styles (possibly from Bootstrap). + */ +.kuiCheckBox { + -webkit-appearance: none; + /* 1 */ + background-color: #FFF; + border: 1px solid #BEBEBE; + border-radius: 4px; + width: 16px; + height: 16px; + line-height: 1.5 !important; + /* 2 */ + margin: 0 !important; + /* 2 */ + font: "Open Sans", Helvetica, Arial, sans-serif !important; + /* 2 */ + font-family: "Open Sans", Helvetica, Arial, sans-serif !important; + /* 2 */ + font-size: 10px !important; + /* 2 */ + transition: background-color 0.1s linear; } + .kuiCheckBox:before { + position: relative; + left: 0.25em; + font-family: FontAwesome; + content: "\F00C"; + font-size: 1em; + opacity: 0; + color: #FFF; + transition: opacity 0.1s linear; } + .kuiCheckBox:checked { + border-color: #0079a5; + background-color: #0079a5; } + .kuiCheckBox:checked:before { + opacity: 1; } + .kuiCheckBox:focus { + z-index: 1; + /* 1 */ + outline: none !important; + /* 2 */ + box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #0079a5; + /* 3 */ } + .kuiCheckBox:disabled { + opacity: 0.3; + cursor: not-allowed; } + +.kuiCheckBoxLabel { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + font-weight: normal !important; + line-height: 1.5; } + +.kuiCheckBoxLabel__text { + font-size: 14px; + margin-left: 8px; } + +/** + * 1. Override Bootstrap. + */ +.kuiLabel { + font-size: 14px; + line-height: 1.5; + font-weight: bold; + margin-bottom: 0; + /* 1 */ } + +.kuiSearchInput { + width: 180px; + display: inline-block; + position: relative; + font-size: 14px; + line-height: 1.5; } + .kuiSearchInput.kuiSearchInput-isInvalid .kuiSearchInput__input { + border-color: #A30000; } + +.kuiSearchInput__icon { + position: absolute; + top: 0.5em; + left: 0.7em; + font-size: 1em; + color: #ACACAC; } + +/** + * 1. Make space for search icon. + * 2. Expand to fill container. + */ +.kuiSearchInput__input { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + font-family: "Open Sans", Helvetica, Arial, sans-serif; + padding: 3px 12px 4px; + font-size: 14px; + font-weight: 400; + line-height: 1.5; + color: #191E23; + background-color: #ffffff; + border: 1px solid #DEDEDE; + border-radius: 4px; + transition: border-color 0.1s linear; + min-height: 30px; + /* 1 */ + padding-left: 28px; + /* 1 */ + width: 100%; + /* 2 */ } + .theme-dark .kuiSearchInput__input { + color: #cecece; } + .kuiSearchInput__input:invalid { + border-color: #A30000; } + .kuiSearchInput__input:focus { + outline: none; + border-color: #0079a5; } + .kuiSearchInput__input:disabled { + opacity: 0.4; + cursor: not-allowed; } + .theme-dark .kuiSearchInput__input { + background-color: #444444; + border-color: #444444; } + .theme-dark .kuiSearchInput__input:focus { + outline: none; + border-color: #0079a5; } + +.kuiSearchInput--small { + width: 60px; } + +.kuiSearchInput--large { + width: 400px; } + +/** + * Avoid setting a width here, so that the width of the options can dynamically set the width. + */ +.kuiSelect { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + font-family: "Open Sans", Helvetica, Arial, sans-serif; + padding: 3px 12px 4px; + font-size: 14px; + font-weight: 400; + line-height: 1.5; + color: #191E23; + background-color: #ffffff; + border: 1px solid #DEDEDE; + border-radius: 4px; + transition: border-color 0.1s linear; + min-height: 30px; + /* 1 */ + padding-right: 30px; + /* 2 */ + background-image: url('data:image/svg+xml;utf8,'); + /* 1 */ + background-size: 14px; + background-repeat: no-repeat; + background-position: calc(100% - 8px); + /* 2 */ } + .theme-dark .kuiSelect { + color: #cecece; } + .kuiSelect:invalid { + border-color: #A30000; } + .kuiSelect:focus { + outline: none; + border-color: #0079a5; } + .kuiSelect:disabled { + opacity: 0.4; + cursor: not-allowed; } + .theme-dark .kuiSelect { + background-color: #444444; + border-color: #444444; } + .theme-dark .kuiSelect:focus { + outline: none; + border-color: #0079a5; } + .kuiSelect:-moz-focusring { + text-shadow: 0 0 0; + /* 3 */ } + .theme-dark .kuiSelect { + background-image: url('data:image/svg+xml;utf8,'); + /* 1 */ } + .kuiSelect.kuiSelect-isInvalid { + border-color: #A30000; } + .kuiSelect:focus { + box-shadow: none; + outline: none; + border-color: #0079a5; } + +.kuiSelect--small { + width: 60px; } + +.kuiSelect--medium { + width: 180px; } + +.kuiSelect--large { + width: 400px; } + +/** + * 1. Have the same spatial footprint as the regular input. + */ +.kuiStaticInput { + width: 180px; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + font-family: "Open Sans", Helvetica, Arial, sans-serif; + padding: 3px 12px 4px; + font-size: 14px; + font-weight: 400; + line-height: 1.5; + color: #191E23; + border: 1px solid transparent; + /* 1 */ + background-color: transparent; } + .theme-dark .kuiStaticInput { + color: #cecece; } + +.kuiTextArea { + width: 180px; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + font-family: "Open Sans", Helvetica, Arial, sans-serif; + padding: 3px 12px 4px; + font-size: 14px; + font-weight: 400; + line-height: 1.5; + color: #191E23; + background-color: #ffffff; + border: 1px solid #DEDEDE; + border-radius: 4px; + transition: border-color 0.1s linear; + min-height: 30px; + /* 1 */ } + .theme-dark .kuiTextArea { + color: #cecece; } + .kuiTextArea:invalid { + border-color: #A30000; } + .kuiTextArea:focus { + outline: none; + border-color: #0079a5; } + .kuiTextArea:disabled { + opacity: 0.4; + cursor: not-allowed; } + .theme-dark .kuiTextArea { + background-color: #444444; + border-color: #444444; } + .theme-dark .kuiTextArea:focus { + outline: none; + border-color: #0079a5; } + .kuiTextArea:focus { + box-shadow: none; + outline: none; + border-color: #0079a5; } + .kuiTextArea.kuiTextArea-isInvalid { + border-color: #A30000; } + +.kuiTextArea--nonResizable { + resize: none; } + +.kuiTextArea--small { + width: 60px; } + +.kuiTextArea--large { + width: 400px; } + +.kuiTextInput { + width: 180px; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + font-family: "Open Sans", Helvetica, Arial, sans-serif; + padding: 3px 12px 4px; + font-size: 14px; + font-weight: 400; + line-height: 1.5; + color: #191E23; + background-color: #ffffff; + border: 1px solid #DEDEDE; + border-radius: 4px; + transition: border-color 0.1s linear; + min-height: 30px; + /* 1 */ } + .theme-dark .kuiTextInput { + color: #cecece; } + .kuiTextInput:invalid { + border-color: #A30000; } + .kuiTextInput:focus { + outline: none; + border-color: #0079a5; } + .kuiTextInput:disabled { + opacity: 0.4; + cursor: not-allowed; } + .theme-dark .kuiTextInput { + background-color: #444444; + border-color: #444444; } + .theme-dark .kuiTextInput:focus { + outline: none; + border-color: #0079a5; } + .kuiTextInput.kuiTextInput-isInvalid { + border-color: #A30000; } + +.kuiTextInput--small { + width: 60px; } + +.kuiTextInput--large { + width: 400px; } + +/** + * 1. We may want to put elements in here which have different heights. + */ +.kuiFieldGroup { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + /* 1 */ } + +.kuiFieldGroup--alignTop { + -webkit-box-align: start; + -webkit-align-items: flex-start; + -ms-flex-align: start; + align-items: flex-start; } + +.kuiFieldGroupSection { + line-height: 1.5; } + .kuiFieldGroupSection + .kuiFieldGroupSection { + margin-left: 10px; } + +.kuiFieldGroupSection--wide { + -webkit-box-flex: 1; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; } + .kuiFieldGroupSection--wide > * { + width: 100%; } + +.kuiGallery { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; } + +.kuiGalleryButton { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + position: relative; + width: 140px; + height: 140px; + margin: 0 20px 20px 0; + padding: 25px 10px 10px; + line-height: 1.5; + background-color: #F6F6F6; + border: 1px solid #CED5DA; + border-radius: 4px; + text-decoration: none; } + .kuiGalleryButton:hover { + background-color: #FFFFFF; + border-color: #00A6FF; } + +.kuiGalleryButton__image { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + width: 50px; + height: 50px; + margin-bottom: 20px; } + +/** + * 1. Truncate overflowing text. + */ +.kuiGalleryButton__label { + font-size: 14px; + color: #191E23; + text-align: center; + max-width: 100%; + /* 1 */ + white-space: nowrap; + /* 1 */ + overflow: hidden; + /* 1 */ + text-overflow: ellipsis; + /* 1 */ } + +.kuiGalleryButton__icon { + position: absolute; + top: 5px; + right: 5px; + color: #666; } + +.kuiHeaderBar { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + min-height: 30px; + /* 1 */ + border-bottom: 1px solid #D9D9D9; } + +/** + * 1. Align a single section to the left by default. + */ +.kuiHeaderBarSection { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-flex: 1; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + margin-left: 25px; + margin-right: 25px; } + .kuiHeaderBarSection:not(:first-child):not(:last-child):not(:only-child) { + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + /* 3 */ } + .kuiHeaderBarSection:first-child { + margin-left: 0; } + .kuiHeaderBarSection:last-child { + margin-right: 0; + -webkit-box-flex: 0; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + /* 4 */ + -webkit-box-pack: end; + -webkit-justify-content: flex-end; + -ms-flex-pack: end; + justify-content: flex-end; + /* 5 */ } + .kuiHeaderBarSection:only-child { + margin-left: auto; + /* 2 */ } + .kuiHeaderBarSection > * + * { + margin-left: 10px; + /* 1 */ } + .kuiHeaderBarSection:only-child { + margin-left: 0; + /* 1 */ } + +.kuiInfoButton { + font-size: 16px; + line-height: 0; + background-color: transparent; + color: #0079a5; + cursor: pointer; + border: none; + padding: 0; } + .kuiInfoButton:hover, .kuiInfoButton:active { + color: #005472; } + +/** + * 1. Copied from FontAwesome's .fa class. We use a custom class to make it easier to migrate away + * from FontAwesome someday. When we do migrate away, we can just update this definition. + */ +.kuiIcon { + display: inline-block; + /* 1 */ + font: normal normal normal 14px/1 FontAwesome; + /* 1 */ + font-size: inherit; + /* 1 */ + text-rendering: auto; + /* 1 */ + -webkit-font-smoothing: antialiased; + /* 1 */ + -moz-osx-font-smoothing: grayscale; + /* 1 */ } + +.kuiIcon--info { + color: #3fa8c7; } + +.kuiIcon--success { + color: #417505; } + +.kuiIcon--warning { + color: #ec9800; } + +.kuiIcon--error { + color: #A30000; } + +.kuiIcon--inactive { + color: #c3c3c3; } + +.kuiIcon--basic { + color: #565656; } + +.kuiInfoPanel { + padding: 14px 20px 18px; + line-height: 1.5; + border: 2px solid; } + +/** + * 1. TODO: Pick a hex value instead of making these colors translucent. + */ +.kuiInfoPanel--info { + border-color: rgba(63, 168, 199, 0.25); + /* 1 */ } + +/** + * 1. TODO: Pick a hex value instead of making these colors translucent. + */ +.kuiInfoPanel--success { + border-color: rgba(65, 117, 5, 0.25); + /* 1 */ } + +/** + * 1. TODO: Pick a hex value instead of making these colors translucent. + */ +.kuiInfoPanel--warning { + border-color: rgba(236, 152, 0, 0.25); + /* 1 */ } + +/** + * 1. TODO: Pick a hex value instead of making these colors translucent. + */ +.kuiInfoPanel--error { + border-color: rgba(163, 0, 0, 0.25); + /* 1 */ } + +/** + * 1. Align with first line of title text if it wraps. + */ +.kuiInfoPanelHeader { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: baseline; + -webkit-align-items: baseline; + -ms-flex-align: baseline; + align-items: baseline; + /* 1 */ } + +.kuiInfoPanelHeader__icon { + margin-right: 10px; + font-size: 14px; + line-height: 1.5; } + +.kuiInfoPanelHeader__title { + font-size: 14px; + line-height: 1.5; + font-weight: 700; } + +.kuiInfoPanelBody { + margin-top: 8px; } + .kuiInfoPanelBody > * + * { + margin-top: 8px; } + +.kuiInfoPanelBody__message { + font-size: 14px; + line-height: 1.5; } + +.kuiLink { + color: #0079a5; + text-decoration: none; + cursor: pointer; + /* 1 */ + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + /* 2 */ + background-color: transparent; + /* 2 */ + border: none; + /* 2 */ + font-size: inherit; + /* 2 */ + line-height: inherit; + /* 2 */ } + .kuiLink:visited, .kuiLink:active { + color: #0079a5; } + .kuiLink:hover { + color: #006E8A; + text-decoration: underline; } + .theme-dark .kuiLink { + color: #b7e2ea; } + .theme-dark .kuiLink:hover { + color: #b7e2ea; } + +/** + * 1. Breadcrumbs are placed in the top-left corner and need to be bumped over + * a bit. + */ +.kuiLocalBreadcrumbs { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + padding-left: 10px; + /* 1 */ } + +.kuiLocalBreadcrumb { + font-size: 14px; + margin: 0; + font-weight: normal; } + .kuiLocalBreadcrumb + .kuiLocalBreadcrumb { + margin-left: 6px; } + .kuiLocalBreadcrumb + .kuiLocalBreadcrumb:before { + content: '/'; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + margin-right: 4px; + color: #5a5a5a; } + .theme-dark .kuiLocalBreadcrumb + .kuiLocalBreadcrumb:before { + color: #a5a5a5; } + +/** + * 1. Make it a bit darker to contrast with the gray background. + */ +.kuiLocalBreadcrumb__link { + color: #0079a5; + text-decoration: none; + cursor: pointer; + /* 1 */ + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + /* 2 */ + background-color: transparent; + /* 2 */ + border: none; + /* 2 */ + font-size: inherit; + /* 2 */ + line-height: inherit; + /* 2 */ + color: #0079a5; + /* 1 */ + font-size: 14px; } + .kuiLocalBreadcrumb__link:visited, .kuiLocalBreadcrumb__link:active { + color: #0079a5; } + .kuiLocalBreadcrumb__link:hover { + color: #006E8A; + text-decoration: underline; } + .theme-dark .kuiLocalBreadcrumb__link { + color: #b7e2ea; } + .theme-dark .kuiLocalBreadcrumb__link:hover { + color: #b7e2ea; } + +.kuiLocalBreadcrumb__emphasis { + font-weight: 700; } + +.kuiDatePicker { + background-color: transparent; + border-collapse: collapse; + border-spacing: 0; + line-height: 1.5; } + +.kuiDatePickerNavigationCell { + padding: 0; } + +.kuiDatePickerNavigation { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + margin-bottom: 4px; } + +/** + * 1. Override inherited styles. + */ +.kuiDatePickerNavigationButton { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-color: transparent; + border: none; + font-size: 12px; + color: #2d2d2d; + padding: 3px 6px; + border-radius: 4px; } + .kuiDatePickerNavigationButton:hover, .kuiDatePickerNavigationButton:active { + cursor: pointer; + color: #F5F5F5; + background-color: #0079a5; } + .kuiDatePickerNavigationButton:focus { + z-index: 1; + /* 1 */ + outline: none !important; + /* 2 */ + box-shadow: 0 0 0 1px #F5F5F5, 0 0 0 2px #0079a5; + /* 3 */ + color: #2d2d2d; + /* 1 */ } + .theme-dark .kuiDatePickerNavigationButton { + color: #dedede; } + .theme-dark .kuiDatePickerNavigationButton:hover, .theme-dark .kuiDatePickerNavigationButton:active { + color: #ffffff; + background-color: rgba(0, 0, 0, 0.4); } + .theme-dark .kuiDatePickerNavigationButton:focus { + z-index: 1; + /* 1 */ + outline: none !important; + /* 2 */ + box-shadow: 0 0 0 1px #525252, 0 0 0 2px #0079a5; + /* 3 */ + color: #dedede; + /* 1 */ } + +.kuiDatePickerHeaderCell { + padding: 9px 0; + color: #2d2d2d; + font-size: 12px; + font-weight: bold; + text-align: center; + line-height: 1.2; } + .theme-dark .kuiDatePickerHeaderCell { + color: #cecece; } + +.kuiDatePickerRowCell { + padding: 0; + text-align: center; + /** + * This state class exists to support weird angular-bootstrap datepicker functionality, + * in which you can't select a day on the "From" calendar if it falls after the selected day in + * the "To" calendar (and vice versa, you can't select a "To" day if it is before the "From" day). + */ } + .kuiDatePickerRowCell.kuiDatePickerRowCell-isBlocked { + cursor: not-allowed; } + .kuiDatePickerRowCell.kuiDatePickerRowCell-isBlocked .kuiDatePickerRowCellContent { + pointer-events: none; } + +/** + * 1. Override inherited styles. + */ +.kuiDatePickerRowCellContent { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-color: transparent; + width: 100%; + border: 1px solid transparent; + color: #2d2d2d; + font-size: 12px; + padding: 8px; + border-radius: 4px; + line-height: 1.2; } + .kuiDatePickerRowCellContent:focus { + z-index: 1; + /* 1 */ + outline: none !important; + /* 2 */ + box-shadow: 0 0 0 1px #F5F5F5, 0 0 0 2px #0079a5; + /* 3 */ + color: #2d2d2d; + /* 1 */ } + .kuiDatePickerRowCellContent:disabled { + pointer-events: none; + opacity: 0.5; } + .kuiDatePickerRowCellContent.kuiDatePickerRowCellContent-isOtherMonth { + visibility: hidden; + pointer-events: none; } + .kuiDatePickerRowCellContent.kuiDatePickerRowCellContent-isCurrent { + color: #0079a5; } + .kuiDatePickerRowCellContent.kuiDatePickerRowCellContent-isSelected { + background-color: #777777; + color: #ffffff; } + .kuiDatePickerRowCellContent:hover, .kuiDatePickerRowCellContent:active { + cursor: pointer; + color: #F5F5F5; + background-color: #0079a5; } + .theme-dark .kuiDatePickerRowCellContent { + color: #cecece; } + .theme-dark .kuiDatePickerRowCellContent:focus { + z-index: 1; + /* 1 */ + outline: none !important; + /* 2 */ + box-shadow: 0 0 0 1px #525252, 0 0 0 2px #0079a5; + /* 3 */ } + .theme-dark .kuiDatePickerRowCellContent.kuiDatePickerRowCellContent-isCurrent { + color: #b7e2ea; } + .theme-dark .kuiDatePickerRowCellContent.kuiDatePickerRowCellContent-isSelected { + color: #ffffff; } + .theme-dark .kuiDatePickerRowCellContent:hover, .theme-dark .kuiDatePickerRowCellContent:active { + color: #ffffff; + background-color: rgba(0, 0, 0, 0.4); } + +.kuiLocalDropdown { + position: relative; + padding: 10px 10px 14px; + background-color: #F5F5F5; + border-bottom: solid 1px #D9D9D9; + border-top: solid 1px #D9D9D9; + margin-bottom: 10px; + line-height: 20px; } + .theme-dark .kuiLocalDropdown { + background-color: #525252; + border-color: #1a1a1a; } + +.kuiLocalDropdownCloseButton { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-color: transparent; + padding: 4px; + border: none; + line-height: 1; + font-size: 16px; + color: #2d2d2d !important; + /* 1 */ + cursor: pointer; + opacity: 0.35; + position: absolute; + top: 1px; + right: 5px; } + .kuiLocalDropdownCloseButton:hover { + opacity: 1; } + .theme-dark .kuiLocalDropdownCloseButton { + color: #cecece !important; + /* 1 */ } + .theme-dark .kuiLocalDropdownCloseButton { + color: #cecece !important; + /* 1 */ } + +.kuiLocalDropdownPanels { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; } + +.kuiLocalDropdownPanel { + -webkit-box-flex: 1; + -webkit-flex: 1 1 0%; + -ms-flex: 1 1 0%; + flex: 1 1 0%; } + +.kuiLocalDropdownPanel--left { + margin-right: 30px; } + +.kuiLocalDropdownPanel--right { + margin-left: 30px; } + +.kuiLocalDropdownTitle { + margin-bottom: 12px; + font-size: 18px; + color: #2d2d2d; } + .theme-dark .kuiLocalDropdownTitle { + color: #cecece; } + +.kuiLocalDropdownSection { + margin-bottom: 16px; } + .kuiLocalDropdownSection:last-child { + margin-bottom: 0; } + +.kuiLocalDropdownHeader { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + margin-bottom: 6px; } + +.kuiLocalDropdownHeader__label { + font-size: 14px; + font-weight: 700; + color: #2d2d2d; } + .theme-dark .kuiLocalDropdownHeader__label { + color: #cecece; } + +.kuiLocalDropdownHeader__actions { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; } + +.kuiLocalDropdownHeader__action { + color: #0079a5; + font-size: 12px; + text-decoration: none; + cursor: pointer; } + .kuiLocalDropdownHeader__action + .kuiLocalDropdownHeader__action { + margin-left: 10px; } + .kuiLocalDropdownHeader__action:hover, .kuiLocalDropdownHeader__action:active { + color: #005472; } + .theme-dark .kuiLocalDropdownHeader__action { + color: #b7e2ea; } + .theme-dark .kuiLocalDropdownHeader__action:hover, .theme-dark .kuiLocalDropdownHeader__action:active { + color: #def2f6; } + +.kuiLocalDropdownInput { + display: block; + width: 100%; + margin-bottom: 12px; + padding: 5px 15px; + font-size: 14px; + color: #2d2d2d; + background-color: #FFF; + border: 1px solid #D9D9D9; + border-radius: 4px; } + .kuiLocalDropdownInput:focus { + border-color: #0079a5; } + .theme-dark .kuiLocalDropdownInput { + color: #cecece; + background-color: #444444; + border-color: #444444; } + .theme-dark .kuiLocalDropdownInput:focus { + border-color: #0079a5; } + +.kuiLocalDropdownFormNote { + font-size: 14px; + color: #737373; } + .theme-dark .kuiLocalDropdownFormNote { + color: #a2a2a2; } + +.kuiLocalDropdownWarning { + margin-bottom: 16px; + padding: 6px 10px; + font-size: 14px; + color: #2d2d2d; + background-color: #FFF; } + .theme-dark .kuiLocalDropdownWarning { + color: #cecece; + background-color: #636363; } + +.kuiLocalDropdownHelpText { + margin-bottom: 16px; + font-size: 14px; + color: #2D2D2D; } + .theme-dark .kuiLocalDropdownHelpText { + color: #9e9e9e; } + +.kuiLocalMenu { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: stretch; + -webkit-align-items: stretch; + -ms-flex-align: stretch; + align-items: stretch; } + +.kuiLocalMenuItem { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + height: 100%; + padding: 0 10px; + font-size: 14px; + background-color: transparent; + color: #2d2d2d; + border: 0; + cursor: pointer; + border-right: solid 1px transparent; + border-left: solid 1px transparent; } + .kuiLocalMenuItem:hover, .kuiLocalMenuItem:focus { + background-color: #0079a5; + color: #F5F5F5; } + .kuiLocalMenuItem.kuiLocalMenuItem-isSelected { + background-color: #F5F5F5; + border-color: #D9D9D9; + height: calc(100% + 1px); + z-index: 2; + color: #0079a5; } + .kuiLocalMenuItem.kuiLocalMenuItem-isSelected:hover, .kuiLocalMenuItem.kuiLocalMenuItem-isSelected:focus { + color: #0079a5; } + .kuiLocalMenuItem.kuiLocalMenuItem-isDisabled { + opacity: 0.5; + cursor: not-allowed; } + .kuiLocalMenuItem.kuiLocalMenuItem-isDisabled:hover { + background-color: transparent; + color: #2d2d2d; } + .theme-dark .kuiLocalMenuItem { + color: #dedede; } + .theme-dark .kuiLocalMenuItem:hover { + background-color: #000000; + color: #ffffff; } + .theme-dark .kuiLocalMenuItem.kuiLocalMenuItem-isSelected { + background-color: #525252; + border-color: #1a1a1a; + color: #ffffff; } + .theme-dark .kuiLocalMenuItem.kuiLocalMenuItem-isDisabled:hover { + background-color: transparent; + color: #dedede; } + +.kuiLocalMenuItem__icon { + margin-right: 5px; + margin-bottom: -1px; } + +/** + * 1. Match height of logo in side bar, but allow it to expand to accommodate + * dropdown. + */ +.kuiLocalNav { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + min-height: 69px; + /* 1 */ + color: #2d2d2d; + background-color: #FFF; + line-height: 1.5; + border-bottom: solid 1px #D9D9D9; } + .theme-dark .kuiLocalNav { + color: #cecece; + background-color: #333333; + border-color: #1a1a1a; } + +/** + * 1. Allow row to expand if the content is so long that it wraps. + */ +.kuiLocalNavRow { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: stretch; + -webkit-align-items: stretch; + -ms-flex-align: stretch; + align-items: stretch; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + min-height: 29px; + /* 1 */ } + +.kuiLocalNavRow__section { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: stretch; + -webkit-align-items: stretch; + -ms-flex-align: stretch; + align-items: stretch; } + +/** + * 1. We make this row flex-start because it usually contains a search input, which may expand + * beyond the height of this container. We can't use `align-items: center`, because this would + * cause the search input to overflow both on the top and bottom; `align-items: flex-start` + * makes it only overflow on the bottom. But this means we need to manually center the content + * of this container using padding. + */ +.kuiLocalNavRow--secondary { + height: 40px; + /* 1 */ + padding: 0 10px 0; + /* 1 */ + -webkit-box-align: start; + -webkit-align-items: flex-start; + -ms-flex-align: start; + align-items: flex-start; + /* 1 */ } + +.kuiLocalSearch { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + width: 100%; } + +.kuiLocalSearchInput { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + font-family: "Open Sans", Helvetica, Arial, sans-serif; + padding: 3px 12px 4px; + font-size: 14px; + font-weight: 400; + line-height: 1.5; + color: #191E23; + background-color: #ffffff; + border: 1px solid #DEDEDE; + border-radius: 4px; + transition: border-color 0.1s linear; + min-height: 30px; + /* 1 */ + -webkit-box-flex: 1; + -webkit-flex: 1 1 100%; + -ms-flex: 1 1 100%; + flex: 1 1 100%; + border-color: #ffffff; + border-color: #D9D9D9; + border-radius: 4px 0 0 4px; } + .theme-dark .kuiLocalSearchInput { + color: #cecece; } + .kuiLocalSearchInput:invalid { + border-color: #A30000; } + .kuiLocalSearchInput:focus { + outline: none; + border-color: #0079a5; } + .kuiLocalSearchInput:disabled { + opacity: 0.4; + cursor: not-allowed; } + .theme-dark .kuiLocalSearchInput { + background-color: #444444; + border-color: #444444; } + .theme-dark .kuiLocalSearchInput:focus { + outline: none; + border-color: #0079a5; } + .kuiLocalSearchInput.kuiLocalSearchInput-isInvalid { + border-color: #e74C3c; } + +.kuiLocalSearchInput--secondary { + height: 30px; + -webkit-box-flex: 0; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + border-radius: 0; + border-left-width: 0; } + .theme-dark .kuiLocalSearchInput--secondary { + border-left-width: 1px; + border-left-color: #333333; + border-right-color: #333333; } + +.kuiLocalSearchAssistedInput { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 1; + -webkit-flex: 1 1 100%; + -ms-flex: 1 1 100%; + flex: 1 1 100%; + position: relative; } + +/** + * 1. Vertically center the assistance, regardless of its height. + */ +.kuiLocalSearchAssistedInput__assistance { + position: absolute; + right: 12px; + top: 50%; + /* 1 */ + z-index: 2; + -webkit-transform: translateY(-50%); + transform: translateY(-50%); + /* 1 */ } + +.kuiLocalSearchSelect { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + font-family: "Open Sans", Helvetica, Arial, sans-serif; + padding: 3px 12px 4px; + font-size: 14px; + font-weight: 400; + line-height: 1.5; + color: #191E23; + background-color: #ffffff; + border: 1px solid #DEDEDE; + border-radius: 4px; + transition: border-color 0.1s linear; + min-height: 30px; + /* 1 */ + padding-right: 30px; + /* 2 */ + background-image: url('data:image/svg+xml;utf8,'); + /* 1 */ + background-size: 14px; + background-repeat: no-repeat; + background-position: calc(100% - 8px); + /* 2 */ + border-left-width: 0; + border-radius: 0; } + .theme-dark .kuiLocalSearchSelect { + color: #cecece; } + .kuiLocalSearchSelect:invalid { + border-color: #A30000; } + .kuiLocalSearchSelect:focus { + outline: none; + border-color: #0079a5; } + .kuiLocalSearchSelect:disabled { + opacity: 0.4; + cursor: not-allowed; } + .theme-dark .kuiLocalSearchSelect { + background-color: #444444; + border-color: #444444; } + .theme-dark .kuiLocalSearchSelect:focus { + outline: none; + border-color: #0079a5; } + .kuiLocalSearchSelect:-moz-focusring { + text-shadow: 0 0 0; + /* 3 */ } + .theme-dark .kuiLocalSearchSelect { + background-image: url('data:image/svg+xml;utf8,'); + /* 1 */ } + +/** + * 1. Override inherited styles. + */ +.kuiLocalSearchButton { + width: 43px; + height: 30px; + font-size: 14px; + line-height: 0; + /* 1 */ + color: #ffffff; + background-color: #666; + border: 0; + border-radius: 0 4px 4px 0; } + .kuiLocalSearchButton:focus { + z-index: 1; + /* 1 */ + outline: none !important; + /* 2 */ + box-shadow: 0 0 0 1px #D9D9D9, 0 0 0 2px #0079a5; + /* 3 */ } + .theme-dark .kuiLocalSearchButton { + color: #ffffff; + background-color: #777777; } + .theme-dark .kuiLocalSearchButton:focus { + z-index: 1; + /* 1 */ + outline: none !important; + /* 2 */ + box-shadow: 0 0 0 1px #333333, 0 0 0 2px #0079a5; + /* 3 */ } + +/** + * 1. We want the bottom border on selected tabs to be flush with the bottom of the container. + */ +.kuiLocalTabs { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: end; + -webkit-align-items: flex-end; + -ms-flex-align: end; + align-items: flex-end; + height: 100%; } + +.kuiLocalTab { + padding: 5px 0 6px 0; + font-size: 18px; + color: #3F3F3F; + border-bottom: 2px solid transparent; + text-decoration: none; + cursor: pointer; + /** + * 1. We may want to show a tooltip to explain why the tab is disabled, so we will just show + * a regular cursor instead of setting pointer-events: none. + */ } + .kuiLocalTab:hover:not(.kuiLocalTab-isDisabled), .kuiLocalTab:active:not(.kuiLocalTab-isDisabled) { + color: #0079a5; } + .theme-dark .kuiLocalTab:hover:not(.kuiLocalTab-isDisabled), .theme-dark .kuiLocalTab:active:not(.kuiLocalTab-isDisabled) { + color: #ffffff; } + .kuiLocalTab.kuiLocalTab-isSelected { + color: #0079a5; + border-bottom-color: #0079a5; + cursor: default; } + .theme-dark .kuiLocalTab.kuiLocalTab-isSelected { + color: #ffffff; + border-bottom-color: #ffffff; } + .kuiLocalTab.kuiLocalTab-isDisabled { + opacity: 0.5; + cursor: default; + /* 1 */ } + .kuiLocalTab + .kuiLocalTab { + margin-left: 15px; } + .theme-dark .kuiLocalTab { + color: #dedede; } + +.kuiLocalTitle { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + height: 100%; + padding-left: 10px; + font-size: 14px; + font-weight: bold; } + +/** + * 1. Allow class to be applied to `ul` and `ol` elements + */ +.kuiMenu { + padding-left: 0; + /* 1 */ } + +.kuiMenu--contained { + border: 1px solid #D9D9D9; } + .kuiMenu--contained .kuiMenuItem { + padding: 6px 10px; } + +/** + * 1. Allow class to be applied to `li` elements + */ +.kuiMenuItem { + list-style: none; + /* 1 */ + padding: 6px 0; } + .kuiMenuItem + .kuiMenuItem { + border-top: 1px solid #D9D9D9; } + +/** + * 1. Setting to inline-block guarantees the same height when applied to both + * button elements and anchor tags. + * 2. Disable for Angular. + * 3. Make the button just tall enough to fit inside an Option Layout. + */ +.kuiMenuButton { + display: inline-block; + /* 1 */ + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + cursor: pointer; + padding: 2px 10px; + /* 3 */ + font-size: 12px; + font-weight: 400; + line-height: 1.5; + text-decoration: none; + border: none; + border-radius: 4px; } + .kuiMenuButton:disabled { + cursor: default; + pointer-events: none; + /* 2 */ } + .kuiMenuButton:active:enabled { + -webkit-transform: translateY(1px); + transform: translateY(1px); } + .kuiMenuButton:focus { + z-index: 1; + /* 1 */ + outline: none !important; + /* 2 */ + box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #0079a5; + /* 3 */ } + +.kuiMenuButton--iconText .kuiMenuButton__icon:first-child { + margin-right: 4px; } + +.kuiMenuButton--iconText .kuiMenuButton__icon:last-child { + margin-left: 4px; } + +/** + * 1. Override Bootstrap. + * 2. Safari won't respect :enabled:hover/active on links. + */ +.kuiMenuButton--basic { + color: #5a5a5a; + background-color: #ffffff; } + .kuiMenuButton--basic:focus { + color: #5a5a5a !important; + /* 1 */ } + .kuiMenuButton--basic:hover, .kuiMenuButton--basic:active { + /* 2 */ + color: #5a5a5a !important; + /* 1 */ + background-color: #F2F2F2; } + .kuiMenuButton--basic:disabled { + color: #9B9B9B; } + +/** + * 1. Override Bootstrap. + * 2. Safari won't respect :enabled:hover/active on links. + */ +.kuiMenuButton--primary { + color: #ffffff; + background-color: #0079a5; } + .kuiMenuButton--primary:focus { + color: #ffffff !important; + /* 1 */ } + .kuiMenuButton--primary:hover, .kuiMenuButton--primary:active { + /* 2 */ + color: #ffffff !important; + /* 1 */ + background-color: #006E8A; } + .kuiMenuButton--primary:disabled { + background-color: #B6D6E0; } + +/** + * 1. Override Bootstrap. + * 2. Safari won't respect :enabled:hover/active on links. + */ +.kuiMenuButton--danger { + color: #D76051; + background-color: #ffffff; } + .kuiMenuButton--danger:hover, .kuiMenuButton--danger:active { + /* 2 */ + color: #FFFFFF !important; + /* 1 */ + background-color: #D76051; } + .kuiMenuButton--danger:disabled { + color: #9B9B9B; } + .kuiMenuButton--danger:focus { + z-index: 1; + /* 1 */ + outline: none !important; + /* 2 */ + box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #ff523c; + /* 3 */ } + +.kuiMenuButtonGroup { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; } + .kuiMenuButtonGroup .kuiMenuButton + .kuiMenuButton { + margin-left: 4px; } + +.kuiMenuButtonGroup--alignRight { + -webkit-box-pack: end; + -webkit-justify-content: flex-end; + -ms-flex-pack: end; + justify-content: flex-end; } + +.kuiMicroButton { + display: inline-block; + /* 1 */ + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + cursor: pointer; + padding: 2px 5px; + border: 1px solid transparent; + color: #666; + background-color: transparent; + line-height: 1; + /* 2 */ + font-size: 12px; } + .kuiMicroButton:hover { + color: #191E23; } + +.kuiMicroButtonGroup { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; } + .kuiMicroButtonGroup .kuiMicroButton + .kuiMicroButton { + margin-left: 2px; } + +.kuiModalOverlay { + position: fixed; + z-index: 1000; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + padding-bottom: 10vh; + background-color: rgba(0, 0, 0, 0.5); } + +.kuiModal { + line-height: 1.5; + background-color: #FFF; + border: 1px solid #D9D9D9; + border-radius: 4px; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1); + z-index: 1001; } + .theme-dark .kuiModal { + background-color: #525252; + border-color: #000; } + +.kuiModalHeader { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + padding: 10px; + padding-left: 20px; + border-bottom: 1px solid #D9D9D9; } + .theme-dark .kuiModalHeader { + border-bottom-color: #000; } + +.kuiModalHeader__title { + font-size: 18px; } + .theme-dark .kuiModalHeader__title { + color: #cecece; } + +.kuiModalHeaderCloseButton { + display: inline-block; + /* 1 */ + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + cursor: pointer; + padding: 2px 5px; + border: 1px solid transparent; + color: #666; + background-color: transparent; + line-height: 1; + /* 2 */ + font-size: 18px; } + .kuiModalHeaderCloseButton:hover { + color: #191E23; } + +.kuiModalBody { + padding: 20px; } + +.kuiModalBodyText { + font-size: 14px; } + .theme-dark .kuiModalBodyText { + color: #cecece; } + +.kuiModalFooter { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: end; + -webkit-justify-content: flex-end; + -ms-flex-pack: end; + justify-content: flex-end; + padding: 20px; + padding-top: 10px; } + .kuiModalFooter > * + * { + margin-left: 5px; } + +.kuiNotice { + padding: 40px 60px 48px; + margin: 20px; + background-color: #FFF; + line-height: 1.5; } + +/** + * 1. Put 10px of space between each child. + */ +.kuiPager { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; } + .kuiPager > * + * { + margin-left: 10px; + /* 1 */ } + +.kuiPagerText { + font-size: 14px; + line-height: 1.5; + color: #5A5A5A; + white-space: nowrap; + /* 1 */ } + +.kuiPanel { + border: 1px solid #D9D9D9; + border-radius: 4px; } + +.kuiPanel--prompt { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + text-align: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + min-height: 300px; } + .kuiPanel--prompt .kuiPanelBody { + padding: 30px; + max-width: 500px; } + +.kuiPanel--noBorder { + border: none; } + +.kuiPanel--withToolBar { + border-top: none; + border-radius: 0; } + +.kuiPanel--centered { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; } + +.kuiPanelHeader { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + min-height: 30px; + /* 1 */ + padding: 10px; + height: 50px; + border-bottom: 1px solid #D9D9D9; } + .kuiPanelHeader .kuiButton:not(a):enabled:focus { + z-index: 1; + /* 1 */ + outline: none !important; + /* 2 */ + box-shadow: 0 0 0 1px #D9D9D9, 0 0 0 2px #0079a5; + /* 3 */ } + a.kuiPanelHeader .kuiButton:not(.kuiButton-isDisabled):focus { + /* 1 */ + z-index: 1; + /* 1 */ + outline: none !important; + /* 2 */ + box-shadow: 0 0 0 1px #D9D9D9, 0 0 0 2px #0079a5; + /* 3 */ } + .kuiPanelHeader .kuiButton--danger:not(a):enabled:focus { + z-index: 1; + /* 1 */ + outline: none !important; + /* 2 */ + box-shadow: 0 0 0 1px #D9D9D9, 0 0 0 2px #ff523c; + /* 3 */ } + a.kuiPanelHeader .kuiButton--danger:not(.kuiButton-isDisabled):focus { + /* 1 */ + z-index: 1; + /* 1 */ + outline: none !important; + /* 2 */ + box-shadow: 0 0 0 1px #D9D9D9, 0 0 0 2px #ff523c; + /* 3 */ } + .kuiPanelHeader .kuiSelect { + border-color: #ffffff; } + .kuiPanelHeader .kuiSelect:not(a):enabled:focus { + outline: none; + border-color: #0079a5; } + a.kuiPanelHeader .kuiSelect:not(.kuiButton-isDisabled):focus { + /* 1 */ + outline: none; + border-color: #0079a5; } + +/** + * 1. This way we can use h1, h2, etc. + */ +.kuiPanelHeader__title { + font-size: 18px; + line-height: 1.5; + margin: 0; + /* 1 */ } + +/** + * 1. Undo what barSection mixin does. + */ +.kuiPanelHeaderSection { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-flex: 1; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + margin-left: 25px; + margin-right: 25px; } + .kuiPanelHeaderSection:not(:first-child):not(:last-child):not(:only-child) { + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + /* 3 */ } + .kuiPanelHeaderSection:first-child { + margin-left: 0; } + .kuiPanelHeaderSection:last-child { + margin-right: 0; + -webkit-box-flex: 0; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + /* 4 */ + -webkit-box-pack: end; + -webkit-justify-content: flex-end; + -ms-flex-pack: end; + justify-content: flex-end; + /* 5 */ } + .kuiPanelHeaderSection:only-child { + margin-left: auto; + /* 2 */ } + .kuiPanelHeaderSection > * + * { + margin-left: 10px; + /* 1 */ } + .kuiPanelHeaderSection:only-child { + margin-left: 0; + /* 1 */ + margin-right: auto; + /* 1 */ } + +.kuiPanelBody { + padding: 10px; } + +.kuiPopover { + display: inline-block; + position: relative; } + .kuiPopover.kuiPopover-isOpen .kuiPopover__body { + opacity: 1; + visibility: visible; + z-index: 1; + margin-top: 10px; + box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1); } + +.kuiPopover__body { + line-height: 1.5; + font-size: 14px; + position: absolute; + min-width: 256px; + top: 100%; + left: 50%; + background: #FFF; + border: 1px solid #D9D9D9; + border-radius: 4px 0 4px 4px; + padding: 16px; + -webkit-transform: translateX(-50%) translateY(8px) translateZ(0); + transform: translateX(-50%) translateY(8px) translateZ(0); + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-transform-origin: center top; + transform-origin: center top; + opacity: 0; + visibility: hidden; + margin-top: 32px; } + .kuiPopover__body:before { + position: absolute; + content: ""; + top: -16px; + height: 0; + width: 0; + left: 50%; + margin-left: -16px; + border-left: 16px solid transparent; + border-right: 16px solid transparent; + border-bottom: 16px solid #D9D9D9; } + .kuiPopover__body:after { + position: absolute; + content: ""; + top: -15px; + right: 0; + height: 0; + left: 50%; + margin-left: -16px; + width: 0; + border-left: 16px solid transparent; + border-right: 16px solid transparent; + border-bottom: 16px solid #FFF; } + +.kuiPopover--anchorLeft .kuiPopover__body { + left: 0; + -webkit-transform: translateX(0%) translateY(8px) translateZ(0); + transform: translateX(0%) translateY(8px) translateZ(0); } + .kuiPopover--anchorLeft .kuiPopover__body:before, .kuiPopover--anchorLeft .kuiPopover__body:after { + right: auto; + left: 8px; + margin: 0; } + +.kuiPopover--anchorRight .kuiPopover__body { + left: 100%; + -webkit-transform: translateX(-100%) translateY(8px) translateZ(0); + transform: translateX(-100%) translateY(8px) translateZ(0); } + .kuiPopover--anchorRight .kuiPopover__body:before, .kuiPopover--anchorRight .kuiPopover__body:after { + right: 8px; + left: auto; } + +.kuiEmptyTablePrompt { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + padding: 30px; } + +.kuiEmptyTablePrompt__message { + font-size: 18px; + color: #666; + line-height: 1.5; } + +.kuiEmptyTablePrompt__actions { + margin-top: 10px; } + +.kuiStatusText { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-align: baseline; + -webkit-align-items: baseline; + -ms-flex-align: baseline; + align-items: baseline; } + +.kuiStatusText--info { + color: #3fa8c7; } + +.kuiStatusText--success { + color: #417505; } + +.kuiStatusText--warning { + color: #ec9800; } + +.kuiStatusText--error { + color: #A30000; } + +/** + * 1. Set the image to be the same size as a font icon at 14px. + * 2. We need to cap the height too, in case the icon was designed thin and tall. + */ +.kuiStatusText__icon { + margin-right: 6px; + width: 1.15em; + /* 1 */ + max-height: 1.15em; + /* 2 */ } + +/** + * 1. Make seamless transition from ToolBar to Table header and contained Menu. + * 1. Make seamless transition from Table to ToolBarFooter header. + */ +.kuiControlledTable .kuiTable { + border-top: none; + /* 1 */ } + +.kuiControlledTable .kuiToolBarFooter { + border-top: none; + /* 2 */ } + +.kuiControlledTable .kuiMenu--contained { + border-top: none; + /* 1 */ } + +/** + * 1. Prevent cells from expanding based on content size. This substitutes for table-layout: fixed. + */ +/** + * NOTE: table-layout: fixed causes a bug in IE11 and Edge (see #9929). It also prevents us from + * specifying a column width, e.g. the checkbox column. + */ +.kuiTable { + width: 100%; + border: 1px solid #D9D9D9; + border-collapse: collapse; + background-color: #FFF; } + +/** + * 1. Allow contents of cells to determine table's width. + */ +.kuiTable--fluid { + width: auto; + /* 1 */ } + .kuiTable--fluid .kuiTableHeaderCell, + .kuiTable--fluid .kuiTableRowCell { + max-width: none; + /* 1 */ } + +.kuiTableHeaderCell { + font-size: 14px; + font-weight: 400; + text-align: left; + max-width: 20px; + /* 1 */ + line-height: 1.5; + color: #a7a7a7; } + +.kuiTableHeaderCell__liner { + display: inline-block; + padding: 7px 8px 8px; } + +/** + * 1. Prevent rapid clicking from selecting text. + * 2. Remove native button element styles. + * 3. Make buttons look and behave like table header cells. + */ +.kuiTableHeaderCellButton { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + /* 1 */ + cursor: pointer; + width: 100%; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + /* 2 */ + background-color: transparent; + /* 2 */ + border: 0; + /* 2 */ + padding: 0; + /* 2 */ + color: inherit; + /* 3 */ + line-height: inherit; + /* 3 */ + font-size: inherit; + /* 3 */ + text-align: inherit; + /* 3 */ } + .kuiTableHeaderCellButton:hover .kuiTableSortIcon { + display: block; + opacity: 1; } + .kuiTableHeaderCellButton .kuiTableHeaderCell__liner { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; } + +.kuiTableHeaderCell--alignRight { + text-align: right; } + +.kuiTableSortIcon { + display: none; + pointer-events: none; + margin-left: 4px; } + .kuiTableHeaderCellButton-isSorted .kuiTableSortIcon { + display: block; + opacity: 0.4; } + +.kuiTableRow:hover .kuiTableRowHoverReveal { + display: inline-block; } + +.kuiTableRowHoverReveal { + display: none; } + +.kuiTableRowCell { + font-size: 14px; + font-weight: 400; + text-align: left; + max-width: 20px; + /* 1 */ + color: #191E23; + border-top: 1px solid #D9D9D9; } + +.kuiTableRowCell--wrap .kuiTableRowCell__liner { + white-space: normal; } + +/** + * 1. We don't want to create too strong a disconnect between the original row and the row + * that contains its expanded details. + */ +.kuiTableRowCell--expanded { + border-top-color: #f0f0f0; + /* 1 */ } + +/** + * 1. Vertically align all children. + * 2. Truncate text with an ellipsis. The padding on this div allows the ellipsis to show. If + * the padding was on the cell, the ellipsis would be cropped. + */ +.kuiTableRowCell__liner { + white-space: nowrap; + /* 2 */ + overflow: hidden; + /* 2 */ + text-overflow: ellipsis; + /* 2 */ + padding: 7px 8px 8px; + /* 2 */ + line-height: 1.5; + /* 1 */ } + .kuiTableRowCell__liner > * { + vertical-align: middle; + /* 1 */ } + +.kuiTableRowCell--alignRight { + text-align: right; } + .kuiTableRowCell--alignRight .kuiTableRowCell__liner { + text-align: right; } + +/** + * 1. Rendered width of cell with checkbox inside of it. + * 2. Align checkbox with text in other cells. + * 3. Show the checkbox in Edge; otherwise it gets cropped. + */ +.kuiTableHeaderCell--checkBox, +.kuiTableRowCell--checkBox { + width: 28px; + /* 1 */ + line-height: 1; + /* 2 */ } + .kuiTableHeaderCell--checkBox .kuiTableRowCell__liner, + .kuiTableRowCell--checkBox .kuiTableRowCell__liner { + overflow: visible; + /* 3 */ } + .kuiTableHeaderCell--checkBox .kuiTableHeaderCell__liner, + .kuiTableHeaderCell--checkBox .kuiTableRowCell__liner, + .kuiTableRowCell--checkBox .kuiTableHeaderCell__liner, + .kuiTableRowCell--checkBox .kuiTableRowCell__liner { + padding-right: 0; } + +.kuiTableInfo { + padding: 30px; + font-size: 18px; + color: #666; + line-height: 1.5; } + +.kuiTabs { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + border-bottom: 1px solid #D9D9D9; } + .theme-dark .kuiTabs { + border-bottom: 1px solid #777777; } + +/** + * 1. Override button styles (some of which are from Bootstrap). + * 2. Adding a border shifts tabs right by 1px, so we need to shift them back. + * 3. Move the tab down so that its bottom border covers the container's bottom border. + * 4. When the tab is focused, its bottom border changes to be 1px, so we need to add 1px more + * of padding to make sure the text doesn't shift down. + */ +.kuiTab { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + /* 1 */ + cursor: pointer; + padding: 10px 30px; + font-size: 14px; + color: #666; + background-color: #FFF; + /* 1 */ + border: 1px solid #D9D9D9; + border-radius: 0; + /* 1 */ + margin-bottom: -1px; + /* 3 */ } + .theme-dark .kuiTab { + color: #cecece; + background-color: #333333; + border-color: #777777; } + .kuiTab + .kuiTab { + border-left: none; } + .kuiTab + .kuiTab:focus:not(.kuiTab-isSelected):not(:active) { + margin-left: -1px; + /* 2 */ } + .kuiTab:active { + outline: none !important; + /* 1 */ + box-shadow: none; + /* 1 */ } + .kuiTab:focus { + outline: none; + /* 1 */ } + .kuiTab:focus:not(.kuiTab-isSelected):not(:active) { + z-index: 1; + color: #0079a5; + border: 1px solid #0079a5 !important; } + .theme-dark .kuiTab:focus:not(.kuiTab-isSelected):not(:active) { + color: #cecece; + background-color: #333333; + border-color: #777777 !important; } + .kuiTab:hover:not(.kuiTab-isSelected) { + color: #006E8A; + background-color: #F2F2F2; } + .theme-dark .kuiTab:hover:not(.kuiTab-isSelected) { + color: #def2f6; + background-color: #777777; } + .kuiTab.kuiTab-isSelected { + cursor: default; + color: #191E23; + border-bottom-color: #FFF; } + .theme-dark .kuiTab.kuiTab-isSelected { + color: #cecece; + background-color: #333333; + border-bottom-color: #333333; } + +/** + * 1. Allow container to deteermine font-size and line-height. + * 2. Override inherited Bootstrap styles. + */ +.kuiToggleButton { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + cursor: pointer; + background-color: transparent; + border: none; + padding: 0; + font-size: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: #191E23; } + .kuiToggleButton:focus { + color: #191E23; } + .kuiToggleButton:active { + color: #0079a5 !important; + /* 2 */ } + .kuiToggleButton:hover:not(:disabled) { + color: #006E8A !important; + /* 2 */ + text-decoration: underline; } + .kuiToggleButton:disabled { + cursor: not-allowed; + opacity: .5; } + +/** + * 1. Make icon a consistent width so the text doesn't get pushed around as the icon changes + * between "expand" and "collapse". Use ems to be relative to inherited font-size. + */ +.kuiToggleButton__icon { + width: 0.8em; + /* 1 */ } + +.kuiTogglePanelHeader { + padding-bottom: 4px; + margin-bottom: 15px; + border-bottom: 1px solid #D9D9D9; + /** + * 1. Allow the user to click anywhere on the header, not just on the button text. + */ } + .kuiTogglePanelHeader .kuiToggleButton { + width: 100%; + /* 1 */ + text-align: left; + /* 1 */ } + +.kuiToolBar { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + min-height: 30px; + /* 1 */ + padding: 10px; + height: 50px; + background-color: transparent; + border: solid 1px #D9D9D9; } + .kuiToolBar .kuiButton:not(a):enabled:focus { + z-index: 1; + /* 1 */ + outline: none !important; + /* 2 */ + box-shadow: 0 0 0 1px #D9D9D9, 0 0 0 2px #0079a5; + /* 3 */ } + a.kuiToolBar .kuiButton:not(.kuiButton-isDisabled):focus { + /* 1 */ + z-index: 1; + /* 1 */ + outline: none !important; + /* 2 */ + box-shadow: 0 0 0 1px #D9D9D9, 0 0 0 2px #0079a5; + /* 3 */ } + .kuiToolBar .kuiButton--danger:not(a):enabled:focus { + z-index: 1; + /* 1 */ + outline: none !important; + /* 2 */ + box-shadow: 0 0 0 1px #D9D9D9, 0 0 0 2px #ff523c; + /* 3 */ } + a.kuiToolBar .kuiButton--danger:not(.kuiButton-isDisabled):focus { + /* 1 */ + z-index: 1; + /* 1 */ + outline: none !important; + /* 2 */ + box-shadow: 0 0 0 1px #D9D9D9, 0 0 0 2px #ff523c; + /* 3 */ } + .kuiToolBar .kuiSelect { + border-color: #ffffff; } + .kuiToolBar .kuiSelect:not(a):enabled:focus { + outline: none; + border-color: #0079a5; } + a.kuiToolBar .kuiSelect:not(.kuiButton-isDisabled):focus { + /* 1 */ + outline: none; + border-color: #0079a5; } + +.kuiToolBarSection { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-flex: 1; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + margin-left: 25px; + margin-right: 25px; } + .kuiToolBarSection:not(:first-child):not(:last-child):not(:only-child) { + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + /* 3 */ } + .kuiToolBarSection:first-child { + margin-left: 0; } + .kuiToolBarSection:last-child { + margin-right: 0; + -webkit-box-flex: 0; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + /* 4 */ + -webkit-box-pack: end; + -webkit-justify-content: flex-end; + -ms-flex-pack: end; + justify-content: flex-end; + /* 5 */ } + .kuiToolBarSection:only-child { + margin-left: auto; + /* 2 */ } + .kuiToolBarSection > * + * { + margin-left: 10px; + /* 1 */ } + +/** + * 1. Override Bar styles and put Search on the left side. + */ +.kuiToolBar--searchOnly .kuiToolBarSearch { + margin-left: 0 !important; + /* 1 */ } + +.kuiToolBarFooter { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + min-height: 30px; + /* 1 */ + padding: 10px; + height: 40px; + background-color: #ffffff; + border: 1px solid #D9D9D9; } + +.kuiToolBarFooterSection { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-flex: 1; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + margin-left: 25px; + margin-right: 25px; } + .kuiToolBarFooterSection:not(:first-child):not(:last-child):not(:only-child) { + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + /* 3 */ } + .kuiToolBarFooterSection:first-child { + margin-left: 0; } + .kuiToolBarFooterSection:last-child { + margin-right: 0; + -webkit-box-flex: 0; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + /* 4 */ + -webkit-box-pack: end; + -webkit-justify-content: flex-end; + -ms-flex-pack: end; + justify-content: flex-end; + /* 5 */ } + .kuiToolBarFooterSection:only-child { + margin-left: auto; + /* 2 */ } + .kuiToolBarFooterSection > * + * { + margin-left: 10px; + /* 1 */ } + +/** + * 1. Put 10px of space between each child. + */ +.kuiToolBarSearch { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + margin-left: 25px; + margin-right: 25px; + -webkit-box-flex: 1; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + max-width: 800px; + line-height: 1.5; } + .kuiToolBarSearch:first-child { + margin-left: 0; } + .kuiToolBarSearch:last-child { + margin-right: 0; } + .kuiToolBarSearch > * + * { + margin-left: 10px; + /* 1 */ } + +.kuiToolBarSearchBox { + -webkit-box-flex: 1; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + position: relative; + font-size: 14px; } + +.kuiToolBarSearchBox__icon { + position: absolute; + top: 0.5em; + left: 0.7em; + font-size: 1em; + color: #ACACAC; } + +/** + * 1. Fix inherited styles (possibly from Bootstrap). + */ +.kuiToolBarSearchBox__input { + width: 100%; + min-width: 200px; + padding: 4px 12px 5px 28px; + font-family: "Open Sans", Helvetica, Arial, sans-serif; + /* 1 */ + background-color: #FFFFFF; + color: #191E23; + border-radius: 4px; + font-size: 1em; + border: 1px solid #D9D9D9; + line-height: normal; + /* 1 */ + transition: border-color 0.1s linear; } + .kuiToolBarSearchBox__input:focus { + outline: none; + border-color: #0079a5; } + +/* + * 1. We don't want the text to take up two lines and overflow the ToolBar. + */ +.kuiToolBarText { + font-size: 14px; + line-height: 1.5; + color: #5A5A5A; + white-space: nowrap; + /* 1 */ } + +/** + * 1. Override h1. + */ +.kuiTitle { + margin: 0; + /* 1 */ + font-weight: 400; + /* 1 */ + font-size: 22px; } + +/** + * 1. Override h2, h3, etc. + */ +.kuiSubTitle { + margin: 0; + /* 1 */ + font-weight: 400; + /* 1 */ + font-size: 18px; } + +/** + * 1. Override p. + */ +.kuiTextTitle { + margin: 0; + /* 1 */ + font-weight: 700; + /* 1 */ + line-height: 1.5; + font-size: 14px; } + +/** + * 1. Override p. + */ +.kuiText { + margin: 0; + /* 1 */ + font-weight: 400; + /* 1 */ + line-height: 1.5; + font-size: 14px; } + +.kuiSubText { + margin: 0; + /* 1 */ + font-weight: 400; + /* 1 */ + line-height: 1.5; + font-size: 12px; } + +.kuiSubduedText { + color: #666 !important; } + +.kuiVerticalRhythm + .kuiVerticalRhythm { + margin-top: 10px; } + +.kuiVerticalRhythmSmall + .kuiVerticalRhythmSmall { + margin-top: 5px; } + +.kuiView { + background-color: #FFF; + -webkit-box-flex: 1; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; } + +.kuiViewContent { + padding-top: 20px; + padding-bottom: 20px; + width: 100%; } + +.kuiViewContent--constrainedWidth { + width: 100%; + max-width: 1100px; + margin-left: auto; + margin-right: auto; } + +.kuiViewContentItem { + padding-left: 20px; + padding-right: 20px; } diff --git a/packages/ui_framework/doc_site/build/index.html b/packages/ui_framework/doc_site/build/index.html new file mode 100644 index 0000000000000..aed4fcf3ba4e3 --- /dev/null +++ b/packages/ui_framework/doc_site/build/index.html @@ -0,0 +1,13 @@ + + + + + + + + + +
+ + + diff --git a/packages/ui_framework/doc_site/postcss.config.js b/packages/ui_framework/doc_site/postcss.config.js new file mode 100644 index 0000000000000..dc06a629c48b7 --- /dev/null +++ b/packages/ui_framework/doc_site/postcss.config.js @@ -0,0 +1,5 @@ +module.exports = { + plugins: [ + require('autoprefixer')({ browsers: ['last 2 versions'] }) + ] +}; diff --git a/packages/ui_framework/doc_site/src/actions/action_types.js b/packages/ui_framework/doc_site/src/actions/action_types.js new file mode 100644 index 0000000000000..66ef2b2afcd5f --- /dev/null +++ b/packages/ui_framework/doc_site/src/actions/action_types.js @@ -0,0 +1,18 @@ + +import keyMirror from 'keymirror'; + +export default keyMirror({ + + // Source code viewer actions + OPEN_CODE_VIEWER: null, + CLOSE_CODE_VIEWER: null, + + // Sandbox actions + OPEN_SANDBOX: null, + CLOSE_SANDBOX: null, + + // Example nav actions + REGISTER_SECTION: null, + UNREGISTER_SECTION: null, + +}); diff --git a/packages/ui_framework/doc_site/src/actions/code_viewer_actions.js b/packages/ui_framework/doc_site/src/actions/code_viewer_actions.js new file mode 100644 index 0000000000000..b193af7f5eb3d --- /dev/null +++ b/packages/ui_framework/doc_site/src/actions/code_viewer_actions.js @@ -0,0 +1,11 @@ +import ActionTypes from './action_types'; + +export const openCodeViewer = (source, title) => ({ + type: ActionTypes.OPEN_CODE_VIEWER, + source, + title, +}); + +export const closeCodeViewer = () => ({ + type: ActionTypes.CLOSE_CODE_VIEWER, +}); diff --git a/packages/ui_framework/doc_site/src/actions/example_nav_actions.js b/packages/ui_framework/doc_site/src/actions/example_nav_actions.js new file mode 100644 index 0000000000000..cbcc5c542403f --- /dev/null +++ b/packages/ui_framework/doc_site/src/actions/example_nav_actions.js @@ -0,0 +1,12 @@ +import ActionTypes from './action_types'; + +export const registerSection = (id, name) => ({ + type: ActionTypes.REGISTER_SECTION, + id, + name, +}); + +export const unregisterSection = id => ({ + type: ActionTypes.UNREGISTER_SECTION, + id, +}); diff --git a/packages/ui_framework/doc_site/src/actions/index.js b/packages/ui_framework/doc_site/src/actions/index.js new file mode 100644 index 0000000000000..9517d850e4a2b --- /dev/null +++ b/packages/ui_framework/doc_site/src/actions/index.js @@ -0,0 +1,14 @@ +export { + openCodeViewer, + closeCodeViewer, +} from './code_viewer_actions'; + +export { + openSandbox, + closeSandbox, +} from './sandbox_actions'; + +export { + registerSection, + unregisterSection, +} from './example_nav_actions'; diff --git a/packages/ui_framework/doc_site/src/actions/sandbox_actions.js b/packages/ui_framework/doc_site/src/actions/sandbox_actions.js new file mode 100644 index 0000000000000..33b7e345f717d --- /dev/null +++ b/packages/ui_framework/doc_site/src/actions/sandbox_actions.js @@ -0,0 +1,9 @@ +import ActionTypes from './action_types'; + +export const openSandbox = () => ({ + type: ActionTypes.OPEN_SANDBOX, +}); + +export const closeSandbox = () => ({ + type: ActionTypes.CLOSE_SANDBOX, +}); diff --git a/packages/ui_framework/doc_site/src/components/guide/_guide.scss b/packages/ui_framework/doc_site/src/components/guide/_guide.scss new file mode 100644 index 0000000000000..3c292e01fedbd --- /dev/null +++ b/packages/ui_framework/doc_site/src/components/guide/_guide.scss @@ -0,0 +1,108 @@ +html { + height: 100%; +} + +.guideBody { + height: 100%; + background-color: #000000; + margin: 0; + min-width: $guideMinWidth; +} + +/** + * 1. Expand container to fit the page if the content is shorter than the page, or expand with the + * content if it's taller than the page. + */ +.guide { + display: flex; + min-height: 100%; /* 1 */ +} + +.guideContent { + display: flex; + flex-direction: column; + flex: 1 1 auto; + padding-top: $guideNavHeight; + background-color: $guideBaseBackgroundColor; + transition: + padding-top $guideChromeTransition, + padding-right $guideCodeViewerTransition, + opacity $guideCodeViewerTransition; + + &.is-code-viewer-open { + padding-right: $guideCodeViewerWidth; + + @include whenNarrowerThan($guideNormalBreakpoint) { + padding-right: $guideCodeViewerSmallWidth; + } + } + + .is-guide-nav-open + & { + opacity: 0.7; + } + + &.is-chrome-hidden { + padding-top: 0; + } +} + +@media only screen and (max-width: 1300px) { + .guideHomePage { + justify-content: flex-start !important; + + .guideContentPage__content { + margin-left: 250px; + } + } +} + +.guideContentPage { + position: relative; + display: flex; + justify-content: center; + flex: 1 0 auto; + background-color: #ffffff; +} + + .guideContentPage__hint { + position: absolute; + top: 0; + left: 0; + width: 100%; + max-width: 260px; + max-height: 500px; + padding: 30px; + margin: 20px; + border-radius: 4px; + background-color: #e8e8e8; + line-height: $guideLineHeight; + } + + .guideContentPage__content { + width: 100%; + max-width: 800px; + padding: 30px 60px; + } + +.guideHintArrow { + position: absolute; + top: -15px; + left: 12px; + background-image: url("images/hint-arrow.svg"); + width: 26px; + height: 40px; + background-repeat: no-repeat; + background-size: contain; +} + +.guideWarning { + border-left: 5px solid #e8488b; + margin-top: 19px; + padding: 0 14px; + line-height: 21px; + color: #e8488b; +} + +.guideBreak { + border: none; +} diff --git a/packages/ui_framework/doc_site/src/components/guide_code/_guide_code.scss b/packages/ui_framework/doc_site/src/components/guide_code/_guide_code.scss new file mode 100644 index 0000000000000..084c74fec9219 --- /dev/null +++ b/packages/ui_framework/doc_site/src/components/guide_code/_guide_code.scss @@ -0,0 +1,6 @@ +.guideCode { + padding: 2px 4px; + font-family: 'Ubuntu Mono', monospace; + background-color: #e8e8e8; + color: #565656; +} diff --git a/packages/ui_framework/doc_site/src/components/guide_code/guide_code.js b/packages/ui_framework/doc_site/src/components/guide_code/guide_code.js new file mode 100644 index 0000000000000..8bca4d55222be --- /dev/null +++ b/packages/ui_framework/doc_site/src/components/guide_code/guide_code.js @@ -0,0 +1,5 @@ +import React from 'react'; + +export const GuideCode = props => ( + {props.children} +); diff --git a/packages/ui_framework/doc_site/src/components/guide_code_viewer/_guide_code_viewer.scss b/packages/ui_framework/doc_site/src/components/guide_code_viewer/_guide_code_viewer.scss new file mode 100644 index 0000000000000..11883f9e79cbe --- /dev/null +++ b/packages/ui_framework/doc_site/src/components/guide_code_viewer/_guide_code_viewer.scss @@ -0,0 +1,113 @@ +.guideCodeViewer { + position: fixed; + top: $guideNavHeight; + right: 0; + bottom: 0; + width: $guideCodeViewerWidth; + padding: 6px 0 40px; + background-color: white; + transform: translateX($guideCodeViewerWidth); + transition: transform $guideCodeViewerTransition; + overflow: auto; + border-left: 1px solid #d6d6d6; + + @include scrollbar; + + @include whenNarrowerThan($guideNormalBreakpoint) { + width: $guideCodeViewerSmallWidth; + } + + &.is-code-viewer-open { + transform: translateX(0); + } +} + + .guideCodeViewer__header { + padding: 0 20px 6px; + line-height: $guideLineHeight; + border-bottom: 1px solid #d6d6d6; + font-size: 14px; + font-weight: 700; + margin-bottom: 10px; + } + + .guideCodeViewer__closeButton { + position: absolute; + top: 0; + right: 10px; + cursor: pointer; + padding: 10px; + border-radius: 3px; + color: $guideTextColor; + + &:hover { + color: $guideLinkHoverColor; + } + } + + .guideCodeViewer__title { + padding: 0 20px 6px; + border-bottom: 1px solid #d6d6d6; + line-height: $guideLineHeight; + font-size: 14px; + } + + .guideCodeViewer__content { + margin: 0 0 16px; + } + +// HLJS + +.hljs { + display: block; + padding: 15px 20px; + color: #637c84; + font-size: 14px; + line-height: 1.3; + font-family: 'Ubuntu Mono', monospace; +} + +.hljs-keyword { + color: #b58900; +} + +.hljs-function { + .hljs-keyword { + color: #268bd2; + } + + .hljs-title { + color: #7441c6; + } +} + +.hljs-built_in { + color: #268bd2; +} + +.hljs-string { + color: #36958e; +} + +.hljs-comment { + color: #9d9d9d; +} + +.hljs-number, +.hljs-literal { + color: #d84a7e; +} + +.hljs-tag { + .hljs-name { + color: #63a35c; + } + + .hljs-attr { + color: #795da3; + } + + .hljs-string { + color: #df5000; + } +} diff --git a/packages/ui_framework/doc_site/src/components/guide_code_viewer/guide_code_viewer.js b/packages/ui_framework/doc_site/src/components/guide_code_viewer/guide_code_viewer.js new file mode 100644 index 0000000000000..ed47a17bcb31b --- /dev/null +++ b/packages/ui_framework/doc_site/src/components/guide_code_viewer/guide_code_viewer.js @@ -0,0 +1,80 @@ +import PropTypes from 'prop-types'; +import React, { Component } from 'react'; + +import classNames from 'classnames'; +import hljs from 'highlight.js'; + +export class GuideCodeViewer extends Component { + constructor(props) { + super(props); + } + + componentDidUpdate() { + if (this.refs.html) { + hljs.highlightBlock(this.refs.html); + } + + if (this.refs.javascript) { + hljs.highlightBlock(this.refs.javascript); + } + } + + renderSection(type, code) { + const typeToCodeClassMap = { + JavaScript: 'javascript', + HTML: 'html', + }; + + const codeClass = typeToCodeClassMap[type]; + + if (code) { + return ( +
+
+ {type} +
+ 
+            
+              {code}
+            
+
+
+ ); + } + } + + render() { + const classes = classNames('guideCodeViewer', { + 'is-code-viewer-open': this.props.isOpen, + }); + + const codeSections = this.props.source.map(sourceObject => ( + this.renderSection(sourceObject.type, sourceObject.code) + )); + + return ( +
+
+ {this.props.title} +
+ +
+ + {codeSections} +
+ ); + } +} + +GuideCodeViewer.propTypes = { + isOpen: PropTypes.bool, + onClose: PropTypes.func, + title: PropTypes.string, + source: PropTypes.array, +}; diff --git a/packages/ui_framework/doc_site/src/components/guide_components.scss b/packages/ui_framework/doc_site/src/components/guide_components.scss new file mode 100644 index 0000000000000..450e357978fca --- /dev/null +++ b/packages/ui_framework/doc_site/src/components/guide_components.scss @@ -0,0 +1,62 @@ +$guideVerticalRhythm: 20px; +$guideLineHeight: 24px; +$guideNavHeight: 60px; +$guideSideNavWidth: 400px; +$guideSideNavSmallWidth: 220px; +$guideCodeViewerWidth: 660px; +$guideCodeViewerSmallWidth: 520px; +$guideCodeViewerTransition: 0.2s ease; +$guideChromeTransition: 0.3s ease; + +// Colors +$guideBaseBackgroundColor: #f7f7f7; +$guidePanelBackgroundColor: #ffffff; +$guideTextColor: #444; +$guideLinkColor: #00a9e5; +$guideLinkHoverColor: #00a9e5; + +// Breakpoints +$guideMinWidth: 840px; +$guideNormalBreakpoint: 1900px; + +@mixin whenNarrowerThan($browserWidth) { + @media only screen and (max-width: #{$browserWidth}) { + @content; + } +} + +@mixin whenWiderThan($browserWidth) { + @media only screen and (min-width: #{$browserWidth}) { + @content; + } +} + +@mixin scrollbar($color: rgba(#454D58, 0.4)) { + &::-webkit-scrollbar { + width: 16px; + height: 16px; + } + + &::-webkit-scrollbar-thumb { + background-color: $color; + border: 6px solid transparent; + background-clip: content-box; + } + + &::-webkit-scrollbar-track { + background-color: transparent; + } +} + + +@import "guide/guide"; +@import "guide_code/guide_code"; +@import "guide_code_viewer/guide_code_viewer"; +@import "guide_demo/guide_demo"; +@import "guide_link/guide_link"; +@import "guide_nav/guide_nav"; +@import "guide_page/guide_page"; +@import "guide_page_side_nav/guide_page_side_nav"; +@import "guide_sandbox/guide_sandbox"; +@import "guide_section/guide_section"; +@import "guide_text/guide_text"; diff --git a/packages/ui_framework/doc_site/src/components/guide_demo/_guide_demo.scss b/packages/ui_framework/doc_site/src/components/guide_demo/_guide_demo.scss new file mode 100644 index 0000000000000..778494893d928 --- /dev/null +++ b/packages/ui_framework/doc_site/src/components/guide_demo/_guide_demo.scss @@ -0,0 +1,14 @@ +.guideDemo { + margin-top: $guideVerticalRhythm; +} + +.guideDemo--fullScreen { + width: 100%; + height: 100%; + margin-top: 0; +} + +.guideDemo--darkTheme { + background-color: #272727; + padding: 10px; +} diff --git a/packages/ui_framework/doc_site/src/components/guide_demo/guide_demo.js b/packages/ui_framework/doc_site/src/components/guide_demo/guide_demo.js new file mode 100644 index 0000000000000..114a0142c3e3b --- /dev/null +++ b/packages/ui_framework/doc_site/src/components/guide_demo/guide_demo.js @@ -0,0 +1,66 @@ +import PropTypes from 'prop-types'; +import React, { Component } from 'react'; + +import classNames from 'classnames'; + +export class GuideDemo extends Component { + componentDidMount() { + this.update(); + } + + componentDidUpdate() { + this.update(); + } + + update() { + // We'll just render the children if we have them. + if (this.props.children) { + return; + } + + // Inject HTML. + this.content.innerHTML = this.props.html; + + // Inject JS. + const js = document.createElement('script'); + js.type = 'text/javascript'; + js.innerHTML = this.props.js; + this.content.appendChild(js); + + // Inject CSS. + const css = document.createElement('style'); + css.innerHTML = this.props.css; + this.content.appendChild(css); + } + + render() { + const classes = classNames('guideDemo', { + 'guideDemo--fullScreen': this.props.isFullScreen, + 'guideDemo--darkTheme': this.props.isDarkTheme, + 'theme-dark': this.props.isDarkTheme, + }); + + return ( +
(this.content = c)}> + {this.props.children} +
+ ); + } +} + +GuideDemo.propTypes = { + children: PropTypes.node, + js: PropTypes.string.isRequired, + html: PropTypes.string.isRequired, + css: PropTypes.string.isRequired, + isFullScreen: PropTypes.bool.isRequired, + isDarkTheme: PropTypes.bool.isRequired, +}; + +GuideDemo.defaultProps = { + js: '', + html: '', + css: '', + isFullScreen: false, + isDarkTheme: false, +}; diff --git a/packages/ui_framework/doc_site/src/components/guide_link/_guide_link.scss b/packages/ui_framework/doc_site/src/components/guide_link/_guide_link.scss new file mode 100644 index 0000000000000..921ecac96b9b8 --- /dev/null +++ b/packages/ui_framework/doc_site/src/components/guide_link/_guide_link.scss @@ -0,0 +1,9 @@ +.guideLink { + color: $guideLinkColor; + text-decoration: none; + + &:hover { + color: $guideLinkHoverColor; + text-decoration: underline; + } +} diff --git a/packages/ui_framework/doc_site/src/components/guide_link/guide_link.js b/packages/ui_framework/doc_site/src/components/guide_link/guide_link.js new file mode 100644 index 0000000000000..d925456a68413 --- /dev/null +++ b/packages/ui_framework/doc_site/src/components/guide_link/guide_link.js @@ -0,0 +1,11 @@ +import React from 'react'; + +export const GuideLink = props => ( + + {props.children} + +); diff --git a/packages/ui_framework/doc_site/src/components/guide_nav/_guide_nav.scss b/packages/ui_framework/doc_site/src/components/guide_nav/_guide_nav.scss new file mode 100644 index 0000000000000..205961c15f43d --- /dev/null +++ b/packages/ui_framework/doc_site/src/components/guide_nav/_guide_nav.scss @@ -0,0 +1,204 @@ +.guideNav { + display: flex; + flex-direction: column; + position: fixed; + z-index: 10000; + top: 0; + left: 0; + right: 0; + min-width: $guideMinWidth; + height: $guideNavHeight; + border-bottom: 1px solid #CCCCCC; + color: $guideTextColor; + background-color: $guidePanelBackgroundColor; + transition: + top $guideChromeTransition, + height 0.3s ease, + box-shadow 0.3s linear; + overflow: hidden; + box-shadow: 0 0 0 rgba(black, 0.3); + + &.is-guide-nav-open { + height: 100%; + box-shadow: 0 40px 200px rgba(black, 0.05); + } + + &.is-chrome-hidden { + top: -$guideNavHeight; + } +} + + .guideNav__showButton { + position: fixed; + z-index: 9999; + top: 5px; + right: 5px; + font-size: 10px; + opacity: 0; + transition: opacity $guideChromeTransition; + + .is-chrome-hidden & { + opacity: 1; + } + } + + .guideNav__header { + position: relative; + flex: 0 0 auto; + display: flex; + align-items: center; + height: 60px; + padding: 0 20px; + } + + .guideNav__menu { + cursor: pointer; + margin-right: 10px; + padding: 10px; + border-radius: 3px; + + &.is-menu-button-pinned, + &:hover { + background-color: rgba(black, 0.05); + } + + &:active { + background-color: rgba(black, 0.2); + box-shadow: inset 0 2px 8px rgba(black, 0.1); + } + } + + .guideNav__title { + color: $guideTextColor; + text-decoration: none; + font-size: 18px; + } + + .guideNav__version { + margin-left: 10px; + font-weight: 300; + font-size: 14px; + } + + .guideNav__elasticLogo { + position: absolute; + background-image: url("images/elastic-logo.svg"); + width: 106px; + height: 36px; + background-repeat: no-repeat; + background-size: contain; + left: 50%; + transform: translateX(-50%); + } + +.guideNavSearch { + margin: 0 20px; + width: 100%; + max-width: 400px; + font-size: 16px; + padding: 8px; + border: 1px solid rgba($guideTextColor, 0.2); + + &:focus { + border-color: $guideLinkHoverColor; + outline: none; + } +} + +/** + * 1. Height of the searchbox. + */ +.guideNavItemsContainer { + @include scrollbar; + display: flex; + overflow: auto; + min-height: calc(100vh - #{$guideNavHeight + 40px}); /* 1 */ +} + +.guideNavItems { + display: flex; + flex-direction: column; + align-items: flex-start; + flex-wrap: wrap; + align-content: flex-start; +} + +.guideNavSectionTitle { + min-width: 200px; + padding: 8px 20px; + margin-left: 5px; + font-size: 14px; + line-height: 20px; + font-weight: 700; +} + +.guideNavItem, +.guideNavNoItems { + min-width: 200px; + font-size: 20px; + line-height: 20px; + padding: 8px 20px; + margin-left: 5px; +} + +.guideNavItem { + display: flex; + align-items: center; +} + + .guideNavItem__link { + color: $guideTextColor; + text-decoration: none; + + &:hover { + color: $guideLinkHoverColor; + } + } + + .guideNavItem__reactLogo { + margin-left: 10px; + background-image: url("images/react-logo.svg"); + width: 24px; + height: 22px; + background-repeat: no-repeat; + background-size: contain; + } + +.guideNavNoItems { + color: rgba($guideTextColor, 0.5); + margin-top: 0; + margin-bottom: 0; +} + +.guideNavPaginationButtons { + position: absolute; + top: 20px; + right: 10px; +} + +.guideNavPaginationButton { + appearance: none; + border: none; + line-height: 10px; + padding: 4px 20px; + color: $guideLinkHoverColor; + background-color: #fff; + border: 1px solid $guideLinkHoverColor; + border-radius: 3px; + cursor: pointer; + + &:hover, + &:active { + background-color: #e6f7fc; + } + + &.guideNavPaginationButton-isDisabled { + pointer-events: none; + color: rgba($guideTextColor, 0.25); + border-color: rgba($guideTextColor, 0.25); + } + + & + & { + margin-left: 10px; + } +} diff --git a/packages/ui_framework/doc_site/src/components/guide_nav/guide_nav.js b/packages/ui_framework/doc_site/src/components/guide_nav/guide_nav.js new file mode 100644 index 0000000000000..27e38278cf8db --- /dev/null +++ b/packages/ui_framework/doc_site/src/components/guide_nav/guide_nav.js @@ -0,0 +1,228 @@ +import PropTypes from 'prop-types'; +import React, { Component } from 'react'; + +import { + Link, +} from 'react-router'; + +import classNames from 'classnames'; + +export class GuideNav extends Component { + constructor(props) { + super(props); + + const currentRoute = props.routes[1]; + const nextRoute = this.props.getNextRoute(currentRoute.name); + const previousRoute = this.props.getPreviousRoute(currentRoute.name); + + this.state = { + search: '', + nextRoute, + previousRoute, + }; + + this.onSearchChange = this.onSearchChange.bind(this); + } + + onSearchChange(event) { + this.setState({ + search: event.target.value, + }); + } + + componentWillReceiveProps(nextProps) { + const currentRoute = nextProps.routes[1]; + const nextRoute = this.props.getNextRoute(currentRoute.name); + const previousRoute = this.props.getPreviousRoute(currentRoute.name); + + this.setState({ + nextRoute, + previousRoute, + }); + } + + renderNoItems(name) { + return ( +

+ { `No ${name} match your search` } +

+ ); + } + + renderPagination() { + const previousClasses = classNames('guideNavPaginationButton', { + 'guideNavPaginationButton-isDisabled': !this.state.previousRoute, + }); + + const previousButton = ( + + + + ); + + const nextClasses = classNames('guideNavPaginationButton', { + 'guideNavPaginationButton-isDisabled': !this.state.nextRoute, + }); + + const nextButton = ( + + + + ); + + let hideChromeButton; + + if (this.props.isSandbox) { + hideChromeButton = ( + + ); + } + + return ( +
+ {hideChromeButton} + {previousButton} + {nextButton} +
+ ); + } + + render() { + const classes = classNames('guideNav', { + 'is-guide-nav-open': this.props.isNavOpen, + 'is-chrome-hidden': !this.props.isChromeVisible, + }); + + const buttonClasses = classNames('guideNav__menu fa fa-bars', { + 'is-menu-button-pinned': this.props.isNavOpen, + }); + + const componentNavItems = + this.props.components.filter(item => ( + item.name.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1 + )).map((item, index) => { + const icon = + item.hasReact + ?
+ : undefined; + return ( +
+ + {item.name} + + + {icon} +
+ ); + }); + + const sandboxNavItems = + this.props.sandboxes.filter(item => ( + item.name.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1 + )).map((item, index) => { + const icon = + item.hasReact + ?
+ : undefined; + return ( +
+ + {item.name} + + + {icon} +
+ ); + }); + + return ( +
+ + ); + } +} + +GuideNav.propTypes = { + isChromeVisible: PropTypes.bool, + isNavOpen: PropTypes.bool, + isSandbox: PropTypes.bool, + onToggleNav: PropTypes.func, + onHideChrome: PropTypes.func, + onShowChrome: PropTypes.func, + onClickNavItem: PropTypes.func, + version: PropTypes.string, + routes: PropTypes.array, + getNextRoute: PropTypes.func, + getPreviousRoute: PropTypes.func, + components: PropTypes.array, + sandboxes: PropTypes.array, +}; diff --git a/packages/ui_framework/doc_site/src/components/guide_page/_guide_page.scss b/packages/ui_framework/doc_site/src/components/guide_page/_guide_page.scss new file mode 100644 index 0000000000000..3c3249a940109 --- /dev/null +++ b/packages/ui_framework/doc_site/src/components/guide_page/_guide_page.scss @@ -0,0 +1,36 @@ +.guidePage { + display: flex; + flex: 1 0 auto; + padding-bottom: 20px; +} + +.guidePageBody { + $topMargin: 40px; + $leftMargin: 120px + $guideSideNavWidth; + $rightMargin: 80px; + $scrollBarWidth: 20px; + + background-color: $guidePanelBackgroundColor; + border: 1px solid #CCCCCC; + border-radius: 4px; + flex: 1 1 auto; + padding: 40px 60px; + margin: $topMargin $rightMargin 0 $leftMargin; + width: calc(100vw - #{$leftMargin + $rightMargin + $scrollBarWidth}); + + .is-code-viewer-open & { + width: calc(100vw - #{$leftMargin + $rightMargin + $scrollBarWidth + $guideCodeViewerWidth}); + } + + @include whenNarrowerThan($guideNormalBreakpoint) { + $leftMargin: 20px + $guideSideNavSmallWidth; + $rightMargin: 20px; + + margin: $topMargin $rightMargin 0 $leftMargin; + width: calc(100vw - #{$leftMargin + $rightMargin + $scrollBarWidth}); + + .is-code-viewer-open & { + width: calc(100vw - #{$leftMargin + $rightMargin + $scrollBarWidth + $guideCodeViewerSmallWidth}); + } + } +} diff --git a/packages/ui_framework/doc_site/src/components/guide_page/guide_page.js b/packages/ui_framework/doc_site/src/components/guide_page/guide_page.js new file mode 100644 index 0000000000000..0f4c582bab1dc --- /dev/null +++ b/packages/ui_framework/doc_site/src/components/guide_page/guide_page.js @@ -0,0 +1,57 @@ +import PropTypes from 'prop-types'; +import React, { Component } from 'react'; + +import { + GuidePageSideNav, + GuidePageSideNavItem, +} from '../'; + +export class GuidePage extends Component { + constructor(props) { + super(props); + + this.onClickLink = this.onClickLink.bind(this); + } + + onClickLink(id) { + // Scroll to element. + $('html, body').animate({ // eslint-disable-line no-undef + scrollTop: $(`#${id}`).offset().top - 100 // eslint-disable-line no-undef + }, 250); + } + + renderSideNavMenu() { + // Traverse sections and build side nav from it. + return this.props.sections.map((section, index) => { + return ( + + {section.name} + + ); + }); + } + + render() { + return ( +
+ + {this.renderSideNavMenu()} + + +
+ {this.props.children} +
+
+ ); + } +} + +GuidePage.propTypes = { + children: PropTypes.any, + title: PropTypes.string, + sections: PropTypes.array, +}; diff --git a/packages/ui_framework/doc_site/src/components/guide_page/guide_page_container.js b/packages/ui_framework/doc_site/src/components/guide_page/guide_page_container.js new file mode 100644 index 0000000000000..70c9b68e55cc1 --- /dev/null +++ b/packages/ui_framework/doc_site/src/components/guide_page/guide_page_container.js @@ -0,0 +1,9 @@ +import { connect } from 'react-redux'; +import { getSections } from '../../store'; +import { GuidePage } from './guide_page'; + +const mapStateToProps = state => ({ + sections: getSections(state), +}); + +export const GuidePageContainer = connect(mapStateToProps)(GuidePage); diff --git a/packages/ui_framework/doc_site/src/components/guide_page_side_nav/_guide_page_side_nav.scss b/packages/ui_framework/doc_site/src/components/guide_page_side_nav/_guide_page_side_nav.scss new file mode 100644 index 0000000000000..747464719e845 --- /dev/null +++ b/packages/ui_framework/doc_site/src/components/guide_page_side_nav/_guide_page_side_nav.scss @@ -0,0 +1,44 @@ +.guidePageSideNav { + position: fixed; + top: 70px; + left: 10px; + bottom: 10px; + width: $guideSideNavWidth; + overflow: auto; + z-index: 100; + padding: 12px 20px; + + @include scrollbar; + + @include whenNarrowerThan($guideNormalBreakpoint) { + width: $guideSideNavSmallWidth; + } +} + + .guidePageSideNav__title { + padding-bottom: 10px; + margin-bottom: 7px; + font-size: 22px; + line-height: $guideLineHeight; + opacity: 0.8; + } + + .guidePageSideNavMenu { + line-height: $guideLineHeight; + } + + .guidePageSideNavMenu__item { + & + & { + margin-top: 6px; + } + } + + .guidePageSideNavMenu__itemLink { + cursor: pointer; + color: $guideTextColor; + text-decoration: none; + + &:hover { + color: $guideLinkHoverColor; + } + } diff --git a/packages/ui_framework/doc_site/src/components/guide_page_side_nav/guide_page_side_nav.js b/packages/ui_framework/doc_site/src/components/guide_page_side_nav/guide_page_side_nav.js new file mode 100644 index 0000000000000..22430cb8fa6f4 --- /dev/null +++ b/packages/ui_framework/doc_site/src/components/guide_page_side_nav/guide_page_side_nav.js @@ -0,0 +1,21 @@ +import PropTypes from 'prop-types'; +import React from 'react'; + +export const GuidePageSideNav = props => { + return ( +
+
+ {props.title} +
+ +
+ {props.children} +
+
+ ); +}; + +GuidePageSideNav.propTypes = { + title: PropTypes.string, + children: PropTypes.any, +}; diff --git a/packages/ui_framework/doc_site/src/components/guide_page_side_nav/guide_page_side_nav_item.js b/packages/ui_framework/doc_site/src/components/guide_page_side_nav/guide_page_side_nav_item.js new file mode 100644 index 0000000000000..4bf95d1593b01 --- /dev/null +++ b/packages/ui_framework/doc_site/src/components/guide_page_side_nav/guide_page_side_nav_item.js @@ -0,0 +1,35 @@ +import PropTypes from 'prop-types'; +import React, { Component } from 'react'; + +export class GuidePageSideNavItem extends Component { + + constructor(props) { + super(props); + + this.onClick = this.onClick.bind(this); + } + + onClick() { + this.props.onClick(this.props.id); + } + + render() { + return ( +
+
+ {this.props.children} +
+
+ ); + } + +} + +GuidePageSideNavItem.propTypes = { + id: PropTypes.string, + children: PropTypes.any, + onClick: PropTypes.func, +}; diff --git a/packages/ui_framework/doc_site/src/components/guide_sandbox/_guide_sandbox.scss b/packages/ui_framework/doc_site/src/components/guide_sandbox/_guide_sandbox.scss new file mode 100644 index 0000000000000..9a13abd7e8e6e --- /dev/null +++ b/packages/ui_framework/doc_site/src/components/guide_sandbox/_guide_sandbox.scss @@ -0,0 +1,10 @@ +.guideSandbox { + width: 100%; + height: 100%; +} + +.guideSandboxCodeToggle { + position: fixed; + top: 70px; + right: 10px; +} diff --git a/packages/ui_framework/doc_site/src/components/guide_sandbox/guide_sandbox.js b/packages/ui_framework/doc_site/src/components/guide_sandbox/guide_sandbox.js new file mode 100644 index 0000000000000..ec9501f6c5563 --- /dev/null +++ b/packages/ui_framework/doc_site/src/components/guide_sandbox/guide_sandbox.js @@ -0,0 +1,55 @@ +import React, { + Component, +} from 'react'; +import PropTypes from 'prop-types'; +import { bindActionCreators } from 'redux'; +import { connect } from 'react-redux'; + +import { + getIsSandbox, +} from '../../store'; + +import { + openSandbox, + closeSandbox, +} from '../../actions'; + +function mapStateToProps(state) { + return { + isSandbox: getIsSandbox(state), + }; +} + +function mapDispatchToProps(dispatch) { + const actions = { + openSandbox, + closeSandbox, + }; + + return bindActionCreators(actions, dispatch); +} + +class GuideSandboxComponent extends Component { + componentWillMount() { + this.props.openSandbox(); + } + + componentWillUnmount() { + this.props.closeSandbox(); + } + + render() { + return ( +
+ {this.props.children} +
+ ); + } +} + +GuideSandboxComponent.propTypes = { + openSandbox: PropTypes.func, + closeSandbox: PropTypes.func, +}; + +export const GuideSandbox = connect(mapStateToProps, mapDispatchToProps)(GuideSandboxComponent); diff --git a/packages/ui_framework/doc_site/src/components/guide_sandbox/guide_sandbox_code_toggle.js b/packages/ui_framework/doc_site/src/components/guide_sandbox/guide_sandbox_code_toggle.js new file mode 100644 index 0000000000000..81ed902c2373a --- /dev/null +++ b/packages/ui_framework/doc_site/src/components/guide_sandbox/guide_sandbox_code_toggle.js @@ -0,0 +1,30 @@ +import PropTypes from 'prop-types'; +import React, { Component } from 'react'; + +export class GuideSandboxCodeToggle extends Component { + constructor(props) { + super(props); + this.onClickSource = this.onClickSource.bind(this); + } + + onClickSource() { + this.props.openCodeViewer(this.props.source, this.props.title); + } + + render() { + return ( + + ); + } +} + +GuideSandboxCodeToggle.propTypes = { + source: PropTypes.array, + title: PropTypes.string, + openCodeViewer: PropTypes.func, +}; diff --git a/packages/ui_framework/doc_site/src/components/guide_sandbox/guide_sandbox_code_toggle_container.js b/packages/ui_framework/doc_site/src/components/guide_sandbox/guide_sandbox_code_toggle_container.js new file mode 100644 index 0000000000000..ec0f2ee378152 --- /dev/null +++ b/packages/ui_framework/doc_site/src/components/guide_sandbox/guide_sandbox_code_toggle_container.js @@ -0,0 +1,13 @@ +import { connect } from 'react-redux'; + +import { GuideSandboxCodeToggle } from './guide_sandbox_code_toggle'; +import { + openCodeViewer, +} from '../../actions'; + +export const GuideSandboxCodeToggleContainer = connect( + null, + { + openCodeViewer, + }, +)(GuideSandboxCodeToggle); diff --git a/packages/ui_framework/doc_site/src/components/guide_section/_guide_section.scss b/packages/ui_framework/doc_site/src/components/guide_section/_guide_section.scss new file mode 100644 index 0000000000000..280b0026172e4 --- /dev/null +++ b/packages/ui_framework/doc_site/src/components/guide_section/_guide_section.scss @@ -0,0 +1,39 @@ +.guideSection { + margin-bottom: 40px; +} + + .guideSection__header { + display: flex; + justify-content: space-between; + align-items: center; + padding-bottom: 2px; + line-height: $guideLineHeight; + } + + .guideSection__title { + font-size: 18px; + font-weight: 700; + } + + .guideSection__sourceButton { + appearance: none; + border: none; + line-height: 10px; + padding: 4px 10px; + color: $guideLinkHoverColor; + background-color: #fff; + border: 1px solid $guideLinkHoverColor; + border-radius: 3px; + cursor: pointer; + transform: translateX(0); + transition: transform $guideChromeTransition; + + &:hover, + &:active { + background-color: #e6f7fc; + } + + .is-chrome-hidden & { + transform: translateX(60px); + } + } diff --git a/packages/ui_framework/doc_site/src/components/guide_section/guide_section.js b/packages/ui_framework/doc_site/src/components/guide_section/guide_section.js new file mode 100644 index 0000000000000..2680cbfc4e7d4 --- /dev/null +++ b/packages/ui_framework/doc_site/src/components/guide_section/guide_section.js @@ -0,0 +1,59 @@ +import PropTypes from 'prop-types'; +import React, { Component } from 'react'; + +import Slugify from '../../services/string/slugify'; + +export class GuideSection extends Component { + constructor(props) { + super(props); + this.onClickSource = this.onClickSource.bind(this); + } + + getId() { + return Slugify.one(this.props.title); + } + + onClickSource() { + this.props.openCodeViewer(this.props.source, this.props.title); + } + + componentWillMount() { + this.props.registerSection(this.getId(), this.props.title); + } + + componentWillUnmount() { + this.props.unregisterSection(this.getId()); + } + + render() { + return ( +
+
+
+ {this.props.title} +
+ +
+ + {this.props.children} +
+ ); + } +} + +GuideSection.propTypes = { + title: PropTypes.string, + source: PropTypes.array, + children: PropTypes.any, + openCodeViewer: PropTypes.func, + registerSection: PropTypes.func, + unregisterSection: PropTypes.func, +}; diff --git a/packages/ui_framework/doc_site/src/components/guide_section/guide_section_container.js b/packages/ui_framework/doc_site/src/components/guide_section/guide_section_container.js new file mode 100644 index 0000000000000..08abaef4dbe6f --- /dev/null +++ b/packages/ui_framework/doc_site/src/components/guide_section/guide_section_container.js @@ -0,0 +1,17 @@ +import { connect } from 'react-redux'; + +import { GuideSection } from './guide_section'; +import { + openCodeViewer, + registerSection, + unregisterSection, +} from '../../actions'; + +export const GuideSectionContainer = connect( + null, + { + openCodeViewer, + registerSection, + unregisterSection, + }, +)(GuideSection); diff --git a/packages/ui_framework/doc_site/src/components/guide_section/guide_section_types.js b/packages/ui_framework/doc_site/src/components/guide_section/guide_section_types.js new file mode 100644 index 0000000000000..efb35d5654705 --- /dev/null +++ b/packages/ui_framework/doc_site/src/components/guide_section/guide_section_types.js @@ -0,0 +1,4 @@ +export const GuideSectionTypes = { + JS: 'JavaScript', + HTML: 'HTML', +}; diff --git a/packages/ui_framework/doc_site/src/components/guide_text/_guide_text.scss b/packages/ui_framework/doc_site/src/components/guide_text/_guide_text.scss new file mode 100644 index 0000000000000..11c6be092180b --- /dev/null +++ b/packages/ui_framework/doc_site/src/components/guide_text/_guide_text.scss @@ -0,0 +1,16 @@ +.guideTitle { + font-weight: 700; + font-size: 22px; + line-height: 1.5; + margin: 0; +} + +.guideText { + font-size: 14px; + line-height: 1.5; + margin: $guideVerticalRhythm 0 0; +} + +.guideText--noMargin { + margin-top: 0; +} diff --git a/packages/ui_framework/doc_site/src/components/guide_text/guide_text.js b/packages/ui_framework/doc_site/src/components/guide_text/guide_text.js new file mode 100644 index 0000000000000..0a87e624621b6 --- /dev/null +++ b/packages/ui_framework/doc_site/src/components/guide_text/guide_text.js @@ -0,0 +1,5 @@ +import React from 'react'; + +export const GuideText = props => ( +
{props.children}
+); diff --git a/packages/ui_framework/doc_site/src/components/index.js b/packages/ui_framework/doc_site/src/components/index.js new file mode 100644 index 0000000000000..71f3cd1bdc3e3 --- /dev/null +++ b/packages/ui_framework/doc_site/src/components/index.js @@ -0,0 +1,15 @@ +export { GuideCode } from './guide_code/guide_code'; +export { GuideCodeViewer } from './guide_code_viewer/guide_code_viewer'; +export { GuideDemo } from './guide_demo/guide_demo'; +export { GuideLink } from './guide_link/guide_link'; +export { GuideNav } from './guide_nav/guide_nav'; +export { GuidePageContainer as GuidePage } from './guide_page/guide_page_container'; +export { GuidePageSideNav } from './guide_page_side_nav/guide_page_side_nav'; +export { GuidePageSideNavItem } from './guide_page_side_nav/guide_page_side_nav_item'; +export { GuideSandbox } from './guide_sandbox/guide_sandbox'; +export { + GuideSandboxCodeToggleContainer as GuideSandboxCodeToggle +} from './guide_sandbox/guide_sandbox_code_toggle_container'; +export { GuideSectionContainer as GuideSection } from './guide_section/guide_section_container'; +export { GuideSectionTypes } from './guide_section/guide_section_types'; +export { GuideText } from './guide_text/guide_text'; diff --git a/packages/ui_framework/doc_site/src/images/elastic-logo.svg b/packages/ui_framework/doc_site/src/images/elastic-logo.svg new file mode 100644 index 0000000000000..1fd17b1293b82 --- /dev/null +++ b/packages/ui_framework/doc_site/src/images/elastic-logo.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/packages/ui_framework/doc_site/src/images/hint-arrow.svg b/packages/ui_framework/doc_site/src/images/hint-arrow.svg new file mode 100644 index 0000000000000..b78f16f4bef4b --- /dev/null +++ b/packages/ui_framework/doc_site/src/images/hint-arrow.svg @@ -0,0 +1,25 @@ + + + + arrow + Created with Sketch. + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/ui_framework/doc_site/src/images/react-logo.svg b/packages/ui_framework/doc_site/src/images/react-logo.svg new file mode 100644 index 0000000000000..360cb427c9e6d --- /dev/null +++ b/packages/ui_framework/doc_site/src/images/react-logo.svg @@ -0,0 +1,15 @@ + + + + react-logo + Created with Sketch. + + + + + \ No newline at end of file diff --git a/packages/ui_framework/doc_site/src/index.js b/packages/ui_framework/doc_site/src/index.js new file mode 100644 index 0000000000000..40131dbcc5205 --- /dev/null +++ b/packages/ui_framework/doc_site/src/index.js @@ -0,0 +1,80 @@ +require('./main.scss'); + +import 'babel-polyfill'; +import React from 'react'; +import ReactDOM from 'react-dom'; +import { Provider } from 'react-redux'; +import { + Router, + useRouterHistory, +} from 'react-router'; +import { syncHistoryWithStore } from 'react-router-redux'; +import createHashHistory from 'history/lib/createHashHistory'; + +// Store. +import configureStore from './store/configure_store'; + +// Guide views. +import AppContainer from './views/app_container'; +import { HomeView } from './views/home/home_view'; +import { NotFoundView } from './views/not_found/not_found_view'; + +import { + Routes, +} from './services'; + +const store = configureStore(); +const browserHistory = useRouterHistory(createHashHistory)({ + queryKey: false, +}); +const history = syncHistoryWithStore(browserHistory, store); + +const childRoutes = [].concat(Routes.getAppRoutes()); +childRoutes.push({ + path: '*', + component: NotFoundView, + name: 'Page Not Found', +}); + +const routes = [{ + path: '/', + component: AppContainer, + indexRoute: { + component: HomeView, + source: 'views/home/HomeView', + }, + childRoutes, +}]; + +// Update document title with route name. +const onRouteEnter = route => { + const leafRoute = route.routes[route.routes.length - 1]; + document.title = leafRoute.name ? + `Kibana UI Framework - ${leafRoute.name}` : + 'Kibana UI Framework'; +}; + +const syncTitleWithRoutes = routesList => { + if (!routesList) return; + routesList.forEach(route => { + route.onEnter = onRouteEnter; // eslint-disable-line no-param-reassign + if (route.indexRoute) { + // Index routes have a weird relationship with their "parent" routes, + // so it seems we need to give their own onEnter hooks. + route.indexRoute.onEnter = onRouteEnter; // eslint-disable-line no-param-reassign + } + syncTitleWithRoutes(route.childRoutes); + }); +}; + +syncTitleWithRoutes(routes); + +ReactDOM.render( + + + , + document.getElementById('guide') +); diff --git a/packages/ui_framework/doc_site/src/main.scss b/packages/ui_framework/doc_site/src/main.scss new file mode 100644 index 0000000000000..f1707487acfbf --- /dev/null +++ b/packages/ui_framework/doc_site/src/main.scss @@ -0,0 +1,2 @@ +@import "../../dist/ui_framework.css"; +@import "./components/guide_components"; diff --git a/packages/ui_framework/doc_site/src/services/example/create_example.js b/packages/ui_framework/doc_site/src/services/example/create_example.js new file mode 100644 index 0000000000000..4a900dbf36393 --- /dev/null +++ b/packages/ui_framework/doc_site/src/services/example/create_example.js @@ -0,0 +1,16 @@ +/* eslint import/named: 0 */ +import { + GuideExample, +} from '../../components'; + +export default function creatExample(examples) { + class Example extends GuideExample { + constructor(props) { + super(props, examples); + } + } + + Example.propTypes = Object.assign({}, GuideExample.propTypes); + + return Example; +} diff --git a/packages/ui_framework/doc_site/src/services/index.js b/packages/ui_framework/doc_site/src/services/index.js new file mode 100644 index 0000000000000..eaf038ac29727 --- /dev/null +++ b/packages/ui_framework/doc_site/src/services/index.js @@ -0,0 +1,9 @@ +export { renderToHtml } from './string/render_to_html'; + +export { default as createExample } from './example/create_example'; + +export { default as JsInjector } from './js_injector/js_injector'; + +export { default as Routes } from './routes/routes'; + +export { default as Slugify } from './string/slugify'; diff --git a/packages/ui_framework/doc_site/src/services/js_injector/js_injector.js b/packages/ui_framework/doc_site/src/services/js_injector/js_injector.js new file mode 100644 index 0000000000000..f77986272390c --- /dev/null +++ b/packages/ui_framework/doc_site/src/services/js_injector/js_injector.js @@ -0,0 +1,21 @@ + +import $ from 'jquery'; + +const ID_ATTRIBUTE = 'injected-js-tag-id'; + +export default { + + inject(js, id) { + if (id) { + $(`[${ID_ATTRIBUTE}=${id}]`).remove(); + } + + const script = $(``); + $('body').append(script); + }, + + remove(id) { + $(`[${ID_ATTRIBUTE}=${id}]`).remove(); + }, + +}; diff --git a/packages/ui_framework/doc_site/src/services/routes/routes.js b/packages/ui_framework/doc_site/src/services/routes/routes.js new file mode 100644 index 0000000000000..11be3d404d135 --- /dev/null +++ b/packages/ui_framework/doc_site/src/services/routes/routes.js @@ -0,0 +1,285 @@ +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 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 EventExample + from '../../views/event/event_example'; + +import EventsSandbox + from '../../views/event/events_sandbox'; + +import ExpressionExample + from '../../views/expression/expression_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'; + +import LinkExample + from '../../views/link/link_example'; + +import LocalNavExample + from '../../views/local_nav/local_nav_example'; + +import MenuExample + from '../../views/menu/menu_example'; + +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'; + +import PanelExample + from '../../views/panel/panel_example'; + +import PopoverExample + from '../../views/popover/popover_example'; + +import EmptyTablePromptExample + from '../../views/empty_table_prompt/empty_table_prompt_example'; + +import StatusTextExample + from '../../views/status_text/status_text_example'; + +import TableExample + from '../../views/table/table_example'; + +import TabsExample + from '../../views/tabs/tabs_example'; + +import ToggleButtonExample + from '../../views/toggle_button/toggle_button_example'; + +import ToolBarExample + from '../../views/tool_bar/tool_bar_example'; + +import TypographyExample + from '../../views/typography/typography_example'; + +import VerticalRhythmExample + from '../../views/vertical_rhythm/vertical_rhythm_example'; + +import ViewSandbox + from '../../views/view/view_sandbox'; + +// Component route names should match the component name exactly. +const components = [{ + name: 'Accessibility', + component: AccessibilityExample, + hasReact: true, +}, { + name: 'ActionItem', + component: ActionItemExample, + hasReact: true, +}, { + name: 'Badge', + component: BadgeExample, +}, { + name: 'Bar', + component: BarExample, + hasReact: true, +}, { + name: 'Button', + component: ButtonExample, + hasReact: true, +}, { + name: 'Card', + component: CardExample, + hasReact: true, +}, { + name: 'ColorPicker', + component: ColorPickerExample, + hasReact: true, +}, { + name: 'Column', + component: ColumnExample, +}, { + name: 'CollapseButton', + component: CollapseButtonExample, + hasReact: true, +}, { + name: 'EmptyTablePrompt', + component: EmptyTablePromptExample, + hasReact: true, +}, { + name: 'Event', + component: EventExample, + hasReact: true, +}, { + name: 'Expression', + component: ExpressionExample, +}, { + name: 'Form', + component: FormExample, +}, { + 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, +}, { + name: 'Link', + component: LinkExample, +}, { + name: 'LocalNav', + component: LocalNavExample, + hasReact: true, +}, { + name: 'Menu', + component: MenuExample, + hasReact: true, +}, { + name: 'MenuButton', + component: MenuButtonExample, +}, { + name: 'MicroButton', + component: MicroButtonExample, +}, { + name: 'Modal', + component: ModalExample, + hasReact: true, +}, { + name: 'Pager', + component: PagerExample, + hasReact: true, +}, { + name: 'Panel', + component: PanelExample, +}, { + name: 'Popover', + component: PopoverExample, + hasReact: true, +}, { + name: 'StatusText', + component: StatusTextExample, +}, { + name: 'Table', + component: TableExample, + hasReact: true, +}, { + name: 'Tabs', + component: TabsExample, + hasReact: true, +}, { + name: 'ToggleButton', + component: ToggleButtonExample, +}, { + name: 'ToolBar', + component: ToolBarExample, + hasReact: true, +}, { + name: 'Typography', + component: TypographyExample, +}, { + name: 'VerticalRhythm', + component: VerticalRhythmExample, +}]; + +const sandboxes = [{ + name: 'Events', + component: EventsSandbox, +}, { + name: 'HeaderBar with Table', + component: HeaderBarSandbox, +}, { + name: 'Notice', + component: NoticeSandbox, +}, { + name: 'View', + component: ViewSandbox, +}]; + +const allRoutes = components.concat(sandboxes); + +export default { + components: Slugify.each(components, 'name', 'path'), + sandboxes: Slugify.each(sandboxes, 'name', 'path'), + getAppRoutes: function getAppRoutes() { + return allRoutes; + }, + getPreviousRoute: function getPreviousRoute(routeName) { + const index = allRoutes.findIndex(item => { + return item.name === routeName; + }); + + return index >= 0 ? allRoutes[index - 1] : undefined; + }, + getNextRoute: function getNextRoute(routeName) { + const index = allRoutes.findIndex(item => { + return item.name === routeName; + }); + + return index < allRoutes.length - 1 ? allRoutes[index + 1] : undefined; + }, +}; diff --git a/packages/ui_framework/doc_site/src/services/string/render_to_html.js b/packages/ui_framework/doc_site/src/services/string/render_to_html.js new file mode 100644 index 0000000000000..95c1bc140f5b5 --- /dev/null +++ b/packages/ui_framework/doc_site/src/services/string/render_to_html.js @@ -0,0 +1,17 @@ +import React from 'react'; + +import { + render, +} from 'enzyme'; + +import html from 'html'; + +export function renderToHtml(componentReference, props = {}) { + // Create the React element, render it and get its HTML, then format it prettily. + const element = React.createElement(componentReference, props); + const htmlString = render(element).html(); + return html.prettyPrint(htmlString, { + indent_size: 2, + unformatted: [], // Expand all tags, including spans + }); +} diff --git a/packages/ui_framework/doc_site/src/services/string/slugify.js b/packages/ui_framework/doc_site/src/services/string/slugify.js new file mode 100644 index 0000000000000..829b37640f16b --- /dev/null +++ b/packages/ui_framework/doc_site/src/services/string/slugify.js @@ -0,0 +1,27 @@ + + +/** + * Lowercases input and replaces spaces with hyphens: + * e.g. 'GridView Example' -> 'gridview-example' + */ +function one(str) { + const parts = str + .toLowerCase() + .replace(/[-]+/g, ' ') + .replace(/[^\w^\s]+/g, '') + .replace(/ +/g, ' ').split(' '); + return parts.join('-'); +} + +function each(items, src, dest) { + return items.map(item => { + const _item = item; + _item[dest] = one(_item[src]); + return _item; + }); +} + +export default { + one, + each, +}; diff --git a/packages/ui_framework/doc_site/src/store/configure_store.js b/packages/ui_framework/doc_site/src/store/configure_store.js new file mode 100644 index 0000000000000..b7160220345bf --- /dev/null +++ b/packages/ui_framework/doc_site/src/store/configure_store.js @@ -0,0 +1,39 @@ +import { + applyMiddleware, + createStore, + compose, +} from 'redux'; +import thunk from 'redux-thunk'; +import { browserHistory } from 'react-router'; +import { + routerMiddleware, + routerReducer, +} from 'react-router-redux'; + +import codeViewerReducer from './reducers/code_viewer_reducer'; +import sandboxReducer from './reducers/sandbox_reducer'; +import sectionsReducer from './reducers/sections_reducer'; + +/** + * @param {Object} initialState An object defining the application's initial + * state. + */ +export default function configureStore(initialState) { + function rootReducer(state = {}, action) { + return { + routing: routerReducer(state.routing, action), + codeViewer: codeViewerReducer(state.codeViewer, action), + sandbox: sandboxReducer(state.sandbox, action), + sections: sectionsReducer(state.sections, action), + }; + } + + const finalStore = compose( + applyMiddleware( + thunk, + routerMiddleware(browserHistory) + ) + )(createStore)(rootReducer, initialState); + + return finalStore; +} diff --git a/packages/ui_framework/doc_site/src/store/index.js b/packages/ui_framework/doc_site/src/store/index.js new file mode 100644 index 0000000000000..12be83f4b2374 --- /dev/null +++ b/packages/ui_framework/doc_site/src/store/index.js @@ -0,0 +1,19 @@ +export function getIsCodeViewerOpen(state) { + return state.codeViewer.isOpen; +} + +export function getIsSandbox(state) { + return state.sandbox.isSandbox; +} + +export function getSections(state) { + return state.sections.sections; +} + +export function getSource(state) { + return state.codeViewer.source; +} + +export function getTitle(state) { + return state.codeViewer.title; +} diff --git a/packages/ui_framework/doc_site/src/store/reducers/code_viewer_reducer.js b/packages/ui_framework/doc_site/src/store/reducers/code_viewer_reducer.js new file mode 100644 index 0000000000000..e9c9aa14fca67 --- /dev/null +++ b/packages/ui_framework/doc_site/src/store/reducers/code_viewer_reducer.js @@ -0,0 +1,46 @@ +import { LOCATION_CHANGE } from 'react-router-redux'; + +import ActionTypes from '../../actions/action_types'; + +const defaultState = { + isOpen: false, + codesBySlug: {}, + source: undefined, + title: undefined, +}; + +export default function codeViewerReducer(state = defaultState, action) { + switch (action.type) { + case ActionTypes.OPEN_CODE_VIEWER: { + const { source, title } = action; + + if (state.code === source) { + // If we are opening the existing code, then close the viewer. + return Object.assign({}, state, { + isOpen: false, + source: undefined, + title: undefined, + }); + } + + return Object.assign({}, state, { + isOpen: true, + source, + title, + }); + } + + case LOCATION_CHANGE: // Close Code Viewer when we navigate somewhere. + case ActionTypes.CLOSE_CODE_VIEWER: { + return Object.assign({}, state, { + isOpen: false, + source: undefined, + }); + } + + default: + break; + } + + return state; +} diff --git a/packages/ui_framework/doc_site/src/store/reducers/sandbox_reducer.js b/packages/ui_framework/doc_site/src/store/reducers/sandbox_reducer.js new file mode 100644 index 0000000000000..6dd83497dc471 --- /dev/null +++ b/packages/ui_framework/doc_site/src/store/reducers/sandbox_reducer.js @@ -0,0 +1,26 @@ +import ActionTypes from '../../actions/action_types'; + +const defaultState = { + isSandbox: false, +}; + +export default function sandboxReducer(state = defaultState, action) { + switch (action.type) { + case ActionTypes.OPEN_SANDBOX: { + return Object.assign({}, state, { + isSandbox: true, + }); + } + + case ActionTypes.CLOSE_SANDBOX: { + return Object.assign({}, state, { + isSandbox: false, + }); + } + + default: + break; + } + + return state; +} diff --git a/packages/ui_framework/doc_site/src/store/reducers/sections_reducer.js b/packages/ui_framework/doc_site/src/store/reducers/sections_reducer.js new file mode 100644 index 0000000000000..a7e50b8a25a55 --- /dev/null +++ b/packages/ui_framework/doc_site/src/store/reducers/sections_reducer.js @@ -0,0 +1,36 @@ +import ActionTypes from '../../actions/action_types'; + +const defaultState = { + sections: [], +}; + +export default function sectionsReducer(state = defaultState, action) { + switch (action.type) { + case ActionTypes.REGISTER_SECTION: { + const sections = state.sections.slice(); + sections.push({ + id: action.id, + name: action.name, + }); + + return Object.assign({}, state, { + sections, + }); + } + + case ActionTypes.UNREGISTER_SECTION: { + const sections = state.sections.slice(); + const index = sections.findIndex(section => section.id === action.id); + sections.splice(index, 1); + + return Object.assign({}, state, { + sections, + }); + } + + default: + break; + } + + return state; +} diff --git a/packages/ui_framework/doc_site/src/views/accessibility/accessibility_example.js b/packages/ui_framework/doc_site/src/views/accessibility/accessibility_example.js new file mode 100644 index 0000000000000..b173c0e593d33 --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/accessibility/accessibility_example.js @@ -0,0 +1,77 @@ +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!./keyboard_accessible'); +const keyboardAccessibleHtml = renderToHtml(KeyboardAccessible); + +const screenReaderOnlyHtml = renderToHtml(ScreenReaderOnly); +const screenReaderOnlySource = require('!!raw!./screen_reader'); + +export default props => ( + + + + You can make interactive elements keyboard-accessible with this component. This is necessary + for non-button elements and a tags without + href attributes. + + + + + + + + + + This class can be useful to add accessibility to older designs that are + still in use, but it shouldn’t be a permanent solution. See {( + + http://webaim.org/techniques/css/invisiblecontent/ + + )} for more information. + + + + Use a screenreader to verify that there is a second paragraph in this example: + + + + + + + +); diff --git a/packages/ui_framework/doc_site/src/views/accessibility/keyboard_accessible.js b/packages/ui_framework/doc_site/src/views/accessibility/keyboard_accessible.js new file mode 100644 index 0000000000000..3df8d8f6a934a --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/accessibility/keyboard_accessible.js @@ -0,0 +1,56 @@ +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, +}) => ( +
+ {children} +
+); + +export default () => ( +
+ +
window.alert('Div clicked')}> + Click this div +
+ + + + window.alert('Anchor tag clicked')} + > + Click this anchor tag + + + + + window.alert('Custom component clicked')}> + Click this custom component + + + + +
window.alert('Outer KuiKeyboardAccessible clicked')}> + This KuiKeyboardAccessible contains another KuiKeyboardAccessible  + + + window.alert('Inner KuiKeyboardAccessible clicked')} + > + Clicking this inner one should call both onClick handlers + + +
+ +
+); diff --git a/packages/ui_framework/doc_site/src/views/accessibility/screen_reader.js b/packages/ui_framework/doc_site/src/views/accessibility/screen_reader.js new file mode 100644 index 0000000000000..49ac86d04cb09 --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/accessibility/screen_reader.js @@ -0,0 +1,23 @@ +import React from 'react'; + +import { + KuiScreenReaderOnly, +} from '../../../../components'; + + +export default () => ( +
+

+ This is the first paragraph. It is visible to all. +

+ +

+ This is the second paragraph. It is hidden for sighted users but visible to screen readers. +

+ +

+ This is the third paragraph. It is visible to all. +

+
+); + diff --git a/packages/ui_framework/doc_site/src/views/action_item/action_item.js b/packages/ui_framework/doc_site/src/views/action_item/action_item.js new file mode 100644 index 0000000000000..0d61a1b176037 --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/action_item/action_item.js @@ -0,0 +1,22 @@ +import React from 'react'; + +import { + KuiActionItem +} from '../../../../components'; + +export default () => ( + +

Item

+
+ + + +
+ +); diff --git a/packages/ui_framework/doc_site/src/views/action_item/action_item_example.js b/packages/ui_framework/doc_site/src/views/action_item/action_item_example.js new file mode 100644 index 0000000000000..5c208fe37ac32 --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/action_item/action_item_example.js @@ -0,0 +1,61 @@ +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!./action_item'); +const actionItemHtml = renderToHtml(ActionItem); + +import ActionItemInMenu from './action_items_in_menu'; +const actionItemInMenuSource = require('!!raw!./action_items_in_menu'); +const actionItemInMenuHtml = renderToHtml(ActionItemInMenu); + +export default props => ( + + + + Events can represent updates, logs, notifications, and status changes. + + + + + + + + + + You’ll typically want to present them within a Menu. + + + + + + + +); diff --git a/packages/ui_framework/doc_site/src/views/action_item/action_items_in_menu.js b/packages/ui_framework/doc_site/src/views/action_item/action_items_in_menu.js new file mode 100644 index 0000000000000..9391e1198736a --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/action_item/action_items_in_menu.js @@ -0,0 +1,62 @@ +import React from 'react'; + +import { + KuiActionItem, + KuiMenu, + KuiMenuItem +} from '../../../../components'; + +export default () => ( + + + +

Item A

+
+ + + +
+ + + + + +

Item B

+
+ + + +
+ + + + + +

Item C

+
+ + + +
+ + + +); diff --git a/packages/ui_framework/doc_site/src/views/app_container.js b/packages/ui_framework/doc_site/src/views/app_container.js new file mode 100644 index 0000000000000..e54a3412302b1 --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/app_container.js @@ -0,0 +1,43 @@ +import { bindActionCreators } from 'redux'; +import { connect } from 'react-redux'; + +import { + getIsCodeViewerOpen, + getIsSandbox, + getSections, + getSource, + getTitle, +} from '../store'; + +import { AppView } from './app_view'; + +import { + openCodeViewer, + closeCodeViewer, + registerSection, + unregisterSection, +} from '../actions'; + +function mapStateToProps(state, ownProps) { + return { + routes: ownProps.routes, + isCodeViewerOpen: getIsCodeViewerOpen(state), + isSandbox: getIsSandbox(state), + source: getSource(state), + title: getTitle(state), + sections: getSections(state), + }; +} + +function mapDispatchToProps(dispatch) { + const actions = { + openCodeViewer, + closeCodeViewer, + registerSection, + unregisterSection, + }; + + return bindActionCreators(actions, dispatch); +} + +export default connect(mapStateToProps, mapDispatchToProps)(AppView); diff --git a/packages/ui_framework/doc_site/src/views/app_view.js b/packages/ui_framework/doc_site/src/views/app_view.js new file mode 100644 index 0000000000000..9b8370dd679ef --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/app_view.js @@ -0,0 +1,129 @@ +import PropTypes from 'prop-types'; +import React, { Component } from 'react'; + +import classNames from 'classnames'; + +import { + Routes, +} from '../services'; + +import { + GuideCodeViewer, + GuideNav, +} from '../components'; + +// Inject version into header. +const pkg = require('../../../package.json'); + +export class AppView extends Component { + constructor(props) { + super(props); + + this.state = { + isNavOpen: false, + isChromeVisible: !props.isSandbox, + }; + + this.onClickNavItem = this.onClickNavItem.bind(this); + this.onToggleNav = this.onToggleNav.bind(this); + this.onCloseCodeViewer = this.onCloseCodeViewer.bind(this); + this.onHideChrome = this.onHideChrome.bind(this); + this.onShowChrome = this.onShowChrome.bind(this); + } + + onClickNavItem() { + this.setState({ + isNavOpen: false, + }); + } + + onCloseCodeViewer() { + this.props.closeCodeViewer(); + } + + onToggleNav() { + this.setState({ + isNavOpen: !this.state.isNavOpen, + }); + } + + onHideChrome() { + this.setState({ + isChromeVisible: false, + isNavOpen: false, + }); + + this.props.closeCodeViewer(); + } + + onShowChrome() { + this.setState({ + isChromeVisible: true, + }); + } + + componentWillReceiveProps(nextProps) { + // Only force the chrome to be hidden if we're navigating from a non-sandbox to a sandbox. + if (!this.props.isSandbox && nextProps.isSandbox) { + this.setState({ + isChromeVisible: false, + }); + } + } + + render() { + const contentClasses = classNames('guideContent', { + 'is-code-viewer-open': this.props.isCodeViewerOpen, + 'is-chrome-hidden': !this.state.isChromeVisible, + }); + + return ( +
+ + +
+ {this.props.children} +
+ + +
+ ); + } +} + +AppView.propTypes = { + children: PropTypes.any, + routes: PropTypes.array.isRequired, + isSandbox: PropTypes.bool, + openCodeViewer: PropTypes.func, + closeCodeViewer: PropTypes.func, + isCodeViewerOpen: PropTypes.bool, + registerSection: PropTypes.func, + unregisterSection: PropTypes.func, + sections: PropTypes.array, + source: PropTypes.array, + title: PropTypes.string, +}; + +AppView.defaultProps = { + source: [], +}; diff --git a/packages/ui_framework/doc_site/src/views/badge/badge_example.js b/packages/ui_framework/doc_site/src/views/badge/badge_example.js new file mode 100644 index 0000000000000..6b1ebe689233d --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/badge/badge_example.js @@ -0,0 +1,31 @@ +import React from 'react'; + +import { + GuideDemo, + GuidePage, + GuideSection, + GuideSectionTypes, + GuideText, +} from '../../components'; + +const defaultHtml = require('./default_badge.html'); + +export default props => ( + + + + Use the Default Badge to signify a neutral status of a document or object. + + + + + +); diff --git a/packages/ui_framework/doc_site/src/views/badge/default_badge.html b/packages/ui_framework/doc_site/src/views/badge/default_badge.html new file mode 100644 index 0000000000000..f813cc1e39ce9 --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/badge/default_badge.html @@ -0,0 +1,9 @@ +
+ + Reserved +
+ +
+ + Disabled +
diff --git a/packages/ui_framework/doc_site/src/views/bar/bar.js b/packages/ui_framework/doc_site/src/views/bar/bar.js new file mode 100644 index 0000000000000..18831c2dbb0db --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/bar/bar.js @@ -0,0 +1,22 @@ +import React from 'react'; + +import { + KuiBar, + KuiBarSection +} from '../../../../components'; + +export default () => ( + + +
+ The Great American Novel +
+ + + +
Limit to
+ +
pages
+ + +); diff --git a/packages/ui_framework/doc_site/src/views/bar/bar_example.js b/packages/ui_framework/doc_site/src/views/bar/bar_example.js new file mode 100644 index 0000000000000..381fe747d579b --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/bar/bar_example.js @@ -0,0 +1,91 @@ +import React from 'react'; +import { renderToHtml } from '../../services'; + +import { + GuideDemo, + GuidePage, + GuideSection, + GuideSectionTypes, + GuideText, +} from '../../components'; + +import Bar from './bar'; +const barSource = require('!!raw!./bar'); +const barHtml = renderToHtml(Bar); + +import BarOneSection from './bar_one_section'; +const barOneSectionSource = require('!!raw!./bar_one_section'); +const barOneSectionHtml = renderToHtml(BarOneSection); + +import BarThreeSections from './bar_three_sections'; +const barThreeSectionsSource = require('!!raw!./bar_three_sections'); +const barThreeSectionsHtml = renderToHtml(BarThreeSections); + +export default props => ( + + + + Use the Bar to organize controls in a horizontal layout. This is especially useful for + surfacing controls in the corners of a view. + + + + Note: Instead of using this component with a Table, try using the + ControlledTable, ToolBar, and ToolBarFooter components. + + + + + + + + + + A Bar with one section will align it to the right, by default. To align it to the left, + just add another section and leave it empty, or don’t use a Bar at all. + + + + + + + + + + Technically the Bar can contain three or more sections, but there’s no established use-case + for this. + + + + + + + +); diff --git a/packages/ui_framework/doc_site/src/views/bar/bar_one_section.js b/packages/ui_framework/doc_site/src/views/bar/bar_one_section.js new file mode 100644 index 0000000000000..da4ad4bc94d4d --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/bar/bar_one_section.js @@ -0,0 +1,22 @@ +import React from 'react'; + +import { + KuiBar, + KuiBarSection, + KuiButton +} from '../../../../components'; + +export default () => ( + + +
+ + See previous 10 pages + + + See next 10 pages + +
+ + +); diff --git a/packages/ui_framework/doc_site/src/views/bar/bar_three_sections.js b/packages/ui_framework/doc_site/src/views/bar/bar_three_sections.js new file mode 100644 index 0000000000000..f085d5027c848 --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/bar/bar_three_sections.js @@ -0,0 +1,44 @@ +import React from 'react'; + +import { + KuiBar, + KuiBarSection, + KuiButton, + KuiButtonGroup +} from '../../../../components'; + +export default () => ( + + +
+ The Great American Novel +
+ + + + + + Create new page + + + Clear all pages + + + + + +
Limit to
+ +
pages
+ + + + Undo + + + Redo + + + + +); diff --git a/packages/ui_framework/doc_site/src/views/button/button_basic.js b/packages/ui_framework/doc_site/src/views/button/button_basic.js new file mode 100644 index 0000000000000..73e8885556abc --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/button/button_basic.js @@ -0,0 +1,27 @@ +import React from 'react'; + +import { + KuiButton, +} from '../../../../components'; + +export default () => ( +
+ window.alert('Button clicked')} + > + Basic button + + +
+
+ + window.alert('Button clicked')} + disabled + > + Basic button, disabled + +
+); diff --git a/packages/ui_framework/doc_site/src/views/button/button_danger.js b/packages/ui_framework/doc_site/src/views/button/button_danger.js new file mode 100644 index 0000000000000..c8cc212f9579a --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/button/button_danger.js @@ -0,0 +1,24 @@ +import React from 'react'; + +import { + KuiButton, +} from '../../../../components'; + +export default () => ( +
+ + Danger button + + +
+
+ + + Danger button, disabled + +
+ +); diff --git a/packages/ui_framework/doc_site/src/views/button/button_elements.js b/packages/ui_framework/doc_site/src/views/button/button_elements.js new file mode 100644 index 0000000000000..5a9494ed9aa35 --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/button/button_elements.js @@ -0,0 +1,62 @@ +import React from 'react'; + +import { + KuiButton, + KuiLinkButton, + KuiSubmitButton, +} from '../../../../components'; + +export default () => ( +
+ + Button element + + +
+
+ +
{ + e.preventDefault(); + window.alert('Submit'); + }} + > + + Submit input element + +
+ +
+ +
{ + e.preventDefault(); + window.alert('Submit'); + }} + > + + Submit input element, disabled + +
+ +
+ + + Anchor element + + +
+
+ + + Anchor element, disabled + +
+); diff --git a/packages/ui_framework/doc_site/src/views/button/button_example.js b/packages/ui_framework/doc_site/src/views/button/button_example.js new file mode 100644 index 0000000000000..8e6da0a5d52a0 --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/button/button_example.js @@ -0,0 +1,286 @@ +import React from 'react'; + +import { renderToHtml } from '../../services'; + +import { + GuideDemo, + GuidePage, + GuideSection, + GuideSectionTypes, + GuideText, +} from '../../components'; + +import Basic from './button_basic'; +const basicSource = require('!!raw!./button_basic'); +const basicHtml = renderToHtml(Basic); + +import Hollow from './button_hollow'; +const hollowSource = require('!!raw!./button_hollow'); +const hollowHtml = renderToHtml(Hollow); + +import Primary from './button_primary'; +const primarySource = require('!!raw!./button_primary'); +const primaryHtml = renderToHtml(Primary); + +import Secondary from './button_secondary'; +const secondarySource = require('!!raw!./button_secondary'); +const secondaryHtml = renderToHtml(Secondary); + +import Danger from './button_danger'; +const dangerSource = require('!!raw!./button_danger'); +const dangerHtml = renderToHtml(Danger); + +import Warning from './button_warning'; +const warningSource = require('!!raw!./button_danger'); +const warningHtml = renderToHtml(Warning); + +import Loading from './button_loading'; +const loadingSource = require('!!raw!./button_loading'); +const loadingHtml = renderToHtml(Loading, { isLoading: true }); + +import WithIcon from './button_with_icon'; +const withIconSource = require('!!raw!./button_with_icon'); +const withIconHtml = renderToHtml(WithIcon); + +import ButtonGroup from './button_group'; +const buttonGroupSource = require('!!raw!./button_group'); +const buttonGroupHtml = renderToHtml(ButtonGroup); + +import ButtonGroupUnited from './button_group_united'; +const buttonGroupUnitedSource = require('!!raw!./button_group_united'); +const buttonGroupUnitedHtml = renderToHtml(ButtonGroupUnited); + +import Elements from './button_elements'; +const elementsSource = require('!!raw!./button_elements'); +const elementsHtml = renderToHtml(Elements); + +const sizesHtml = require('./button_sizes.html'); + +export default props => ( + + + + Use the basic button for navigation elements or controls that are not the primary focus of the page (ex: pagination, toggles...etc). + + + + + + + + + + + + + + Use the hollow Button when presenting a neutral action, e.g. a “Cancel” button. + + + + + + + + + + Use the primary Button to represent the most common action. Generally, there won’t be a + need to present more than one of these at a time. + + + + + + + + + + Secondary buttons are usually used for actions (“do this”) that are optional actions on a page. + + + + + + + + + + Danger Buttons represent irreversible, potentially regrettable actions. + + + + + + + + + + Warning Buttons represent potentially notable actions. + + + + + + + + + + + + + + + + You can toss an icon into a Button, with or without text. You can also use a predefined icon + or specify custom icon classes. + + + + + + + + + + + + + + + + Use the united version of the ButtonGroup to emphasize the close relationship within a set + of Buttons, and differentiate them from Buttons outside of the set. + + + + They support containing a single Button, so that Buttons can be dynamically added and + removed. + + + + + + + + + + You can create a Button using a button element, link, or input[type=“submit”]. + + + + + + + + + + + +); diff --git a/packages/ui_framework/doc_site/src/views/button/button_group.js b/packages/ui_framework/doc_site/src/views/button/button_group.js new file mode 100644 index 0000000000000..2d93f95e34069 --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/button/button_group.js @@ -0,0 +1,32 @@ +import React from 'react'; + +import { + KuiButton, + KuiButtonGroup, +} from '../../../../components'; + +export default () => ( +
+ + + Cancel + + + + Duplicate + + + + Save + + + +
+ + + + Button group with one button + + +
+); diff --git a/packages/ui_framework/doc_site/src/views/button/button_group_united.js b/packages/ui_framework/doc_site/src/views/button/button_group_united.js new file mode 100644 index 0000000000000..3f6a1a54e101f --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/button/button_group_united.js @@ -0,0 +1,39 @@ +import React from 'react'; + +import { + KuiButton, + KuiButtonGroup, + KuiButtonIcon, +} from '../../../../components'; + +export default () => ( +
+ + + Option A + + + + Option B + + + + Option C + + + +
+ + + } + /> + + } + /> + +
+); diff --git a/packages/ui_framework/doc_site/src/views/button/button_hollow.js b/packages/ui_framework/doc_site/src/views/button/button_hollow.js new file mode 100644 index 0000000000000..2ca5b3ad8a144 --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/button/button_hollow.js @@ -0,0 +1,23 @@ +import React from 'react'; + +import { + KuiButton, +} from '../../../../components'; + +export default () => ( +
+ + Hollow button + + +
+
+ + + Hollow button, disabled + +
+); diff --git a/packages/ui_framework/doc_site/src/views/button/button_loading.js b/packages/ui_framework/doc_site/src/views/button/button_loading.js new file mode 100644 index 0000000000000..8404fe5dc5106 --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/button/button_loading.js @@ -0,0 +1,60 @@ +import React, { + Component, +} from 'react'; + +import { + KuiButtonIcon, + KuiButton, +} from '../../../../components'; + +export default class LoadingButton extends Component { + constructor(props) { + super(); + + this.state = { + isLoading: props.isLoading || false, + }; + + this.onClick = this.onClick.bind(this); + } + + onClick() { + this.setState({ + isLoading: true, + }); + + setTimeout(() => { + this.setState({ + isLoading: false, + }); + }, 3000); + } + + render() { + return ( +
+ + {this.state.isLoading ? 'Loading...' : 'Load more'} + + +
+
+ + } + isLoading={this.state.isLoading} + disabled={this.state.isLoading} + > + {this.state.isLoading ? 'Creating...' : 'Create'} + +
+ ); + } +} diff --git a/packages/ui_framework/doc_site/src/views/button/button_primary.js b/packages/ui_framework/doc_site/src/views/button/button_primary.js new file mode 100644 index 0000000000000..ce40797d3542d --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/button/button_primary.js @@ -0,0 +1,23 @@ +import React from 'react'; + +import { + KuiButton, +} from '../../../../components'; + +export default () => ( +
+ + Primary button + + +
+
+ + + Primary button, disabled + +
+); diff --git a/packages/ui_framework/doc_site/src/views/button/button_secondary.js b/packages/ui_framework/doc_site/src/views/button/button_secondary.js new file mode 100644 index 0000000000000..7ec603cc6fff2 --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/button/button_secondary.js @@ -0,0 +1,24 @@ +import React from 'react'; + +import { + KuiButton, +} from '../../../../components'; + +export default () => ( +
+ + Secondary button + + +
+
+ + + Secondary button, disabled + +
+); + diff --git a/packages/ui_framework/doc_site/src/views/button/button_sizes.html b/packages/ui_framework/doc_site/src/views/button/button_sizes.html new file mode 100644 index 0000000000000..36a27c78a48ce --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/button/button_sizes.html @@ -0,0 +1,55 @@ +
+ Small button +
+ +
+ +
+ Small button with icon +
+ +
+ +
+ Full-width button +
+ +
+ +
+ Full-width button with icon +
+ +
+ +
+
+ Button A +
+ +
+ Button B +
+ +
+ Button C +
+
+ +
+ +
+
+ Button A +
+ +
+ Button B +
+ +
+ Button C +
+
diff --git a/packages/ui_framework/doc_site/src/views/button/button_warning.js b/packages/ui_framework/doc_site/src/views/button/button_warning.js new file mode 100644 index 0000000000000..6fcb718422ace --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/button/button_warning.js @@ -0,0 +1,24 @@ +import React from 'react'; + +import { + KuiButton, +} from '../../../../components'; + +export default () => ( +
+ + Warning button + + +
+
+ + + Warning button, disabled + +
+ +); diff --git a/packages/ui_framework/doc_site/src/views/button/button_with_icon.js b/packages/ui_framework/doc_site/src/views/button/button_with_icon.js new file mode 100644 index 0000000000000..8596f1467d3ca --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/button/button_with_icon.js @@ -0,0 +1,66 @@ +import React from 'react'; + +import { + KuiButton, + KuiButtonIcon, +} from '../../../../components'; + +export default () => ( +
+ } + > + Create + + +
+
+ + } + > + Delete + + +
+
+ + } + > + Previous + + +
+
+ + } + iconPosition="right" + > + Next + + +
+
+ + } + > + Loading + + +
+
+ + } + /> +
+); diff --git a/packages/ui_framework/doc_site/src/views/card/card.js b/packages/ui_framework/doc_site/src/views/card/card.js new file mode 100644 index 0000000000000..054452ae006ae --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/card/card.js @@ -0,0 +1,35 @@ +import React from 'react'; + +import { + KuiCard, + KuiCardDescription, + KuiCardDescriptionTitle, + KuiCardDescriptionText, + KuiCardFooter, + KuiLinkButton +} from '../../../../components'; + +export default () => { + return ( + + + + Get a banana + + + + Bananas are yellow, fit easily in the hand, and have a lot of potassium or something. + + + + + + Banana! + + + + ); +}; diff --git a/packages/ui_framework/doc_site/src/views/card/card_example.js b/packages/ui_framework/doc_site/src/views/card/card_example.js new file mode 100644 index 0000000000000..67797bcd837eb --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/card/card_example.js @@ -0,0 +1,58 @@ +import React from 'react'; + +import { renderToHtml } from '../../services'; + +import { + GuideDemo, + GuidePage, + GuideSection, + GuideSectionTypes, + GuideText, +} from '../../components'; + +import Card from './card'; +const cardSource = require('!!raw!./card'); +const cardHtml = renderToHtml(Card); + +import CardGroup from './card_group'; +const cardGroupSource = require('!!raw!./card_group'); +const cardGroupHtml = renderToHtml(CardGroup); + +export default props => ( + + + + Cards expand to fill their container. To restrict a card’s width, define the width of its + container. + + + + + + + + + + + + + +); diff --git a/packages/ui_framework/doc_site/src/views/card/card_group.js b/packages/ui_framework/doc_site/src/views/card/card_group.js new file mode 100644 index 0000000000000..0b480d2f83398 --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/card/card_group.js @@ -0,0 +1,161 @@ +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 ( +
+ + + + + Get a banana + + + + Bananas are yellow, fit easily in the hand, and have a lot of potassium or something. + + + + + + Banana! + + + + + + + + Get a pteradactyl + + + + Pteradactyls can fly, like to squawk all the time, and are difficult to spell correctly. + + + + + + Pteradactyl! + + + + + + + + Get a magnolia tree + + + + Magnolia trees have broad, waxy leaves which they shed year-round. + + + + + + Magnolia! + + + + + +
+ + + + + + Get a banana + + + + Bananas are yellow, fit easily in the hand, and have a lot of potassium or something. + + + + + + Banana! + + + + + + + + Get a pteradactyl + + + + Pteradactyls can fly, like to squawk all the time, and are difficult to spell correctly. + + + + + + Pteradactyl! + + + + + + + + Get a magnolia tree + + + + Magnolia trees have broad, waxy leaves which they shed year-round. + + + + + + Magnolia! + + + + +
+ ); +}; diff --git a/packages/ui_framework/doc_site/src/views/collapse_button/collapse_button.js b/packages/ui_framework/doc_site/src/views/collapse_button/collapse_button.js new file mode 100644 index 0000000000000..59f30f324c1da --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/collapse_button/collapse_button.js @@ -0,0 +1,14 @@ +import React from 'react'; + +import { + KuiCollapseButton +} from '../../../../components'; + +export default () => ( +
+ + + + +
+); diff --git a/packages/ui_framework/doc_site/src/views/collapse_button/collapse_button_example.js b/packages/ui_framework/doc_site/src/views/collapse_button/collapse_button_example.js new file mode 100644 index 0000000000000..bb5c0d8913767 --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/collapse_button/collapse_button_example.js @@ -0,0 +1,38 @@ +import React from 'react'; +import { renderToHtml } from '../../services'; + +import { + GuideDemo, + GuidePage, + GuideSection, + GuideSectionTypes, + GuideText, +} from '../../components'; + +import CollapseButton from './collapse_button'; +const collapseButtonSource = require('!!raw!./collapse_button'); +const collapseButtonHtml = renderToHtml(CollapseButton); + +export default props => ( + + + + Use this button to collapse and expand panels, drawers, sidebars, legends, and other + containers. + + + + + + + +); diff --git a/packages/ui_framework/doc_site/src/views/color_picker/color_picker.js b/packages/ui_framework/doc_site/src/views/color_picker/color_picker.js new file mode 100644 index 0000000000000..c1582a8d6a44a --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/color_picker/color_picker.js @@ -0,0 +1,20 @@ +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 ; + } +} diff --git a/packages/ui_framework/doc_site/src/views/color_picker/color_picker_clear.js b/packages/ui_framework/doc_site/src/views/color_picker/color_picker_clear.js new file mode 100644 index 0000000000000..3d9414f67339e --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/color_picker/color_picker_clear.js @@ -0,0 +1,54 @@ +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 ( + + + + + + + + + + +

+ + + Reset + + +

+ + + ); + } +} diff --git a/packages/ui_framework/doc_site/src/views/color_picker/color_picker_example.js b/packages/ui_framework/doc_site/src/views/color_picker/color_picker_example.js new file mode 100644 index 0000000000000..794af4856b9fe --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/color_picker/color_picker_example.js @@ -0,0 +1,69 @@ +import React from 'react'; + +import { + GuideDemo, + GuidePage, + GuideSection, + GuideSectionTypes, +} from '../../components'; + +import { renderToHtml } from '../../services'; + +import { ColorPicker } from './color_picker'; +const colorPickerSource = require('!!raw!./color_picker'); +const colorPickerHtml = renderToHtml(ColorPicker); + +import { ColorPickerLabelAndClear } from './color_picker_clear'; +const colorPickerClearSource = require('!!raw!./color_picker_clear'); +const colorPickerClearHtml = renderToHtml(ColorPickerLabelAndClear); + +import { ColorPickerNoColorLabel } from './color_picker_no_color_label'; +const colorPickerNoColorLabelSource = require('!!raw!./color_picker_no_color_label'); +const colorPickerNoColorLabelHtml = renderToHtml(ColorPickerNoColorLabel); + +export default props => ( + + + + + + + + + + + + + + + + + +); diff --git a/packages/ui_framework/doc_site/src/views/color_picker/color_picker_no_color_label.js b/packages/ui_framework/doc_site/src/views/color_picker/color_picker_no_color_label.js new file mode 100644 index 0000000000000..71cc5803e0173 --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/color_picker/color_picker_no_color_label.js @@ -0,0 +1,40 @@ +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 ( + + + + + + + + + + ); + } +} diff --git a/packages/ui_framework/doc_site/src/views/column/column_example.js b/packages/ui_framework/doc_site/src/views/column/column_example.js new file mode 100644 index 0000000000000..3910d26cfb2ac --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/column/column_example.js @@ -0,0 +1,37 @@ +import React from 'react'; + +import { + GuideCode, + GuideDemo, + GuidePage, + GuideSection, + GuideSectionTypes, + GuideText, +} from '../../components'; + +const columnsHtml = require('./columns.html'); + +export default props => ( + + + + Note: Don’t use this. It’s subject to change as we evolve our grid system. + + + + This is a substitute grid system. It uses display: inline-block, so + you need to structure your markup to leave no whitespace between each column. + + + + + +); diff --git a/packages/ui_framework/doc_site/src/views/column/columns.html b/packages/ui_framework/doc_site/src/views/column/columns.html new file mode 100644 index 0000000000000..854ca91fbb278 --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/column/columns.html @@ -0,0 +1,47 @@ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
diff --git a/packages/ui_framework/doc_site/src/views/empty_table_prompt/empty_table_prompt.js b/packages/ui_framework/doc_site/src/views/empty_table_prompt/empty_table_prompt.js new file mode 100644 index 0000000000000..c851fa7f4ccf1 --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/empty_table_prompt/empty_table_prompt.js @@ -0,0 +1,22 @@ +import React from 'react'; + +import { KuiEmptyTablePrompt, KuiLinkButton, KuiButtonIcon } from '../../../../components'; + +export function EmptyTablePrompt() { + return ( + } + aria-label="Add a new item" + data-test-subj="addNewPromptButton" + buttonType="primary" + href="#" + > + Add a new item + + } + message="Uh oh, You have no items!" + /> + ); +} diff --git a/packages/ui_framework/doc_site/src/views/empty_table_prompt/empty_table_prompt_example.js b/packages/ui_framework/doc_site/src/views/empty_table_prompt/empty_table_prompt_example.js new file mode 100644 index 0000000000000..6f76f4a641539 --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/empty_table_prompt/empty_table_prompt_example.js @@ -0,0 +1,61 @@ +import React from 'react'; +import { renderToHtml } from '../../services'; + +import { + GuideDemo, + GuidePage, + GuideSection, + GuideSectionTypes, + GuideText, +} from '../../components'; + +import { EmptyTablePrompt } from './empty_table_prompt'; +const emptyTablePromptSource = require('!!raw!./empty_table_prompt'); +const emptyTablePromptHtml = renderToHtml(EmptyTablePrompt); + +import { ControlledTableWithEmptyPrompt } from './table_with_empty_prompt'; +const tableWithEmptyPromptSource = require('!!raw!./table_with_empty_prompt'); +const tableWithEmptyPromptHtml = renderToHtml(ControlledTableWithEmptyPrompt); + +export default props => ( + + + + Use this prompt when a table has no results. It helps create space and provides a place to prompt the user + to follow some next actions, such as creating an item. + + + + + + + + + + Wrap in an EmptyTablePromptPanel when using with a controlled table. + + + + + + + +); diff --git a/packages/ui_framework/doc_site/src/views/empty_table_prompt/table_with_empty_prompt.js b/packages/ui_framework/doc_site/src/views/empty_table_prompt/table_with_empty_prompt.js new file mode 100644 index 0000000000000..fcb2a1776e7fd --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/empty_table_prompt/table_with_empty_prompt.js @@ -0,0 +1,61 @@ +import React from 'react'; + +import { + KuiEmptyTablePrompt, + KuiEmptyTablePromptPanel, + KuiToolBar, + KuiToolBarSearchBox, + KuiPager, + KuiLinkButton, + KuiButtonIcon, + KuiButtonGroup, +} from '../../../../components'; + +export function ControlledTableWithEmptyPrompt() { + return ( +
+ + {}} /> +
+ {}} + onPreviousPage={() => {}} + /> +
+ + + + } + aria-label="Add a new dashboard" + data-test-subj="addNewDashPromptButton" + buttonType="primary" + href="#" + > + Add a new dashboard + + + } + aria-label="Add a new visualization" + data-test-subj="addNewVizPromptButton" + buttonType="primary" + href="#" + > + Add a new visualization + + + } + message="You have no items. Would you like to add one?" + /> + +
+ ); +} diff --git a/packages/ui_framework/doc_site/src/views/event/event.js b/packages/ui_framework/doc_site/src/views/event/event.js new file mode 100644 index 0000000000000..57963128e778d --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/event/event.js @@ -0,0 +1,27 @@ +import React from 'react'; + +import { + KuiEvent, + KuiEventSymbol, + KuiEventBody, + KuiEventBodyMessage, + KuiEventBodyMetadata, +} from '../../../../components'; + +export default () => ( + + + + + + + + minimum_master_nodes setting of 1 is less than quorum of 2 + + + + August 4, 2021 + + + +); diff --git a/packages/ui_framework/doc_site/src/views/event/event_example.js b/packages/ui_framework/doc_site/src/views/event/event_example.js new file mode 100644 index 0000000000000..40f288f5cd2b7 --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/event/event_example.js @@ -0,0 +1,60 @@ +import React from 'react'; +import { renderToHtml } from '../../services'; + +import { + GuideDemo, + GuidePage, + GuideSection, + GuideSectionTypes, + GuideText, +} from '../../components'; + +import Event from './event'; +const eventSource = require('!!raw!./event'); +const eventHtml = renderToHtml(Event); + +import EventMenu from './event_menu'; +const eventMenuSource = require('!!raw!./event_menu'); +const eventMenuHtml = renderToHtml(EventMenu); + +export default props => ( + + + + Events can represent updates, logs, notifications, and status changes. + + + + + + + + + + You’ll typically want to present them within a Menu. + + + + + + + +); diff --git a/packages/ui_framework/doc_site/src/views/event/event_menu.js b/packages/ui_framework/doc_site/src/views/event/event_menu.js new file mode 100644 index 0000000000000..7fdd6c6c3b243 --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/event/event_menu.js @@ -0,0 +1,69 @@ +import React from 'react'; + +import { + KuiEvent, + KuiEventSymbol, + KuiEventBody, + KuiEventBodyMessage, + KuiEventBodyMetadata, + KuiMenu, + KuiMenuItem, +} from '../../../../components'; + +export default () => ( + + + + + + + + + + minimum_master_nodes setting of 1 is less than quorum of 2 + + + + August 4, 2021 02:23:28 + + + + + + + + + + + + + + Cluster state is red because 17 primary shards are unassigned + + + + August 3, 2021 12:00:54 + + + + + + + + + + + + + + Elasticsearch node version mismatches detected: 5.1.0 + + + + July 27, 2021 11:20:09 + + + + + +); diff --git a/packages/ui_framework/doc_site/src/views/event/events_sandbox.js b/packages/ui_framework/doc_site/src/views/event/events_sandbox.js new file mode 100644 index 0000000000000..367e60a48c065 --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/event/events_sandbox.js @@ -0,0 +1,33 @@ +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!./events_sandbox_content'); +const eventsSandboxContentHtml = renderToHtml(EventsSandboxContent); + +export default props => ( + + + + + +); diff --git a/packages/ui_framework/doc_site/src/views/event/events_sandbox_content.js b/packages/ui_framework/doc_site/src/views/event/events_sandbox_content.js new file mode 100644 index 0000000000000..887e106e1d5a5 --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/event/events_sandbox_content.js @@ -0,0 +1,93 @@ +import React from 'react'; + +import { + KuiEvent, + KuiEventSymbol, + KuiEventBody, + KuiEventBodyMessage, + KuiEventBodyMetadata, + KuiMenu, + KuiMenuItem, + KuiHeaderBar, + KuiHeaderBarSection +} from '../../../../components'; + +export default () => ( +
+ {/* Constrained width, centered content */} +
+
+ + + +

+ Cluster of Almonds +

+ + + + + + + + + + + + + + + + + margarine_masher_toad sitting of 1 is less than opossum of 2 + + + + August 4, 2021 02:23:28 + + + + + + + + + + + + + + Cluster stork is red because 17 pillory stars are unenamored + + + + August 3, 2021 12:00:54 + + + + + + + + + + + + + + Elastic band nematode vision marshmallow directed: 50,100 + + + + July 27, 2021 11:20:09 + + + + + +
+
+
+); diff --git a/packages/ui_framework/doc_site/src/views/expression/expression.html b/packages/ui_framework/doc_site/src/views/expression/expression.html new file mode 100644 index 0000000000000..32325d687c638 --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/expression/expression.html @@ -0,0 +1,59 @@ +
+ +
+
+ When +
+
+ +
+
+
+
+ +
+
+ Is above +
+
+ + + + + +
+
+
diff --git a/packages/ui_framework/doc_site/src/views/expression/expression.js b/packages/ui_framework/doc_site/src/views/expression/expression.js new file mode 100644 index 0000000000000..9b63eb4c6bdcd --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/expression/expression.js @@ -0,0 +1,26 @@ +/* eslint-disable */ + +let isPopoverCollapsed = true; +const $toggleExpressionButton = $('[data-id="toggleExpressionButton"]'); +const $toggleExpressionPopover = $('[data-id="toggleExpressionPopover"]'); + +$('[data-id="toggleExpressionButton"]').click(function() { + + if (isPopoverCollapsed) { + $(this).addClass('kuiExpressionItem__button--isActive') + $(this).parent( "div" ).find('[data-id="toggleExpressionPopover"]').removeClass('kuiExpressionItem__popover--isHidden'); + } else { + $(this).removeClass('kuiExpressionItem__button--isActive') + $(this).parent( "div" ).find('[data-id="toggleExpressionPopover"]').addClass('kuiExpression__popover--isHidden'); + } + + isPopoverCollapsed = !isPopoverCollapsed; +}); + +$(document).mouseup(function(e) { + if (!isPopoverCollapsed && !$toggleExpressionPopover.is(e.target) && $toggleExpressionPopover.has(e.target).length === 0) { + $toggleExpressionPopover.addClass('kuiExpressionItem__popover--isHidden'); + $toggleExpressionButton.removeClass('kuiExpressionItem__button--isActive'); + isPopoverCollapsed = !isPopoverCollapsed; + } +}); diff --git a/packages/ui_framework/doc_site/src/views/expression/expression_example.js b/packages/ui_framework/doc_site/src/views/expression/expression_example.js new file mode 100644 index 0000000000000..9db7dae0a3966 --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/expression/expression_example.js @@ -0,0 +1,38 @@ +import React from 'react'; + +import { + GuideDemo, + GuidePage, + GuideSection, + GuideSectionTypes, + GuideText, +} from '../../components'; + +const expressionHtml = require('./expression.html'); +const expressionJs = require('raw!./expression.js'); + +export default props => ( + + + + ExpressionItems allow you to compress a complicated form into a small space. + Left aligned to the button by default. Can be optionally right aligned (as in the last example). + + + + + + +); diff --git a/packages/ui_framework/doc_site/src/views/form/assisted_input.html b/packages/ui_framework/doc_site/src/views/form/assisted_input.html new file mode 100644 index 0000000000000..d950f0e501190 --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/form/assisted_input.html @@ -0,0 +1,14 @@ +
+ + +
+

+ API docs +

+
+
diff --git a/packages/ui_framework/doc_site/src/views/form/check_box.html b/packages/ui_framework/doc_site/src/views/form/check_box.html new file mode 100644 index 0000000000000..c6d74949b3be3 --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/form/check_box.html @@ -0,0 +1,21 @@ + + +
+ + + +
+ + + +
+ + diff --git a/packages/ui_framework/doc_site/src/views/form/form_example.js b/packages/ui_framework/doc_site/src/views/form/form_example.js new file mode 100644 index 0000000000000..71ba5fd95ead5 --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/form/form_example.js @@ -0,0 +1,168 @@ +import React from 'react'; + +import { + GuideCode, + GuideDemo, + GuidePage, + GuideSection, + GuideSectionTypes, + GuideText, +} from '../../components'; + +const textInputHtml = require('./text_input.html'); +const labelHtml = require('./label.html'); +const assistedInputHtml = require('./assisted_input.html'); +const searchInputHtml = require('./search_input.html'); +const staticInputHtml = require('./static_input.html'); +const textAreaHtml = require('./text_area.html'); +const textAreaNonResizableHtml = require('./text_area_non_resizable.html'); +const checkBoxHtml = require('./check_box.html'); +const selectHtml = require('./select.html'); + +export default props => ( + + + + + + + + + + + + + + Note: You have to specify right-side padding using a custom class or + inline style to keep the input text from overlapping with the assistance content. + Use em units for this padding so that it scales appropriately if the + user changes their root font-size. + + + + + + + + + + + + + + + + Use StaticInput to display dynamic content in a form which the user isn’t allowed to edit. + + + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/packages/ui_framework/doc_site/src/views/form/label.html b/packages/ui_framework/doc_site/src/views/form/label.html new file mode 100644 index 0000000000000..5145893fc5388 --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/form/label.html @@ -0,0 +1,3 @@ + diff --git a/packages/ui_framework/doc_site/src/views/form/search_input.html b/packages/ui_framework/doc_site/src/views/form/search_input.html new file mode 100644 index 0000000000000..fa1a012b583b6 --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/form/search_input.html @@ -0,0 +1,41 @@ +
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+
+ +
diff --git a/packages/ui_framework/doc_site/src/views/form/select.html b/packages/ui_framework/doc_site/src/views/form/select.html new file mode 100644 index 0000000000000..9d5803745939b --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/form/select.html @@ -0,0 +1,29 @@ + + +
+ + + +
+ + + +
+ + + +
+ + diff --git a/packages/ui_framework/doc_site/src/views/form/static_input.html b/packages/ui_framework/doc_site/src/views/form/static_input.html new file mode 100644 index 0000000000000..85d5785145ea2 --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/form/static_input.html @@ -0,0 +1,6 @@ + diff --git a/packages/ui_framework/doc_site/src/views/form/text_area.html b/packages/ui_framework/doc_site/src/views/form/text_area.html new file mode 100644 index 0000000000000..3fd809c7d3857 --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/form/text_area.html @@ -0,0 +1,47 @@ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + diff --git a/packages/ui_framework/doc_site/src/views/form/text_area_non_resizable.html b/packages/ui_framework/doc_site/src/views/form/text_area_non_resizable.html new file mode 100644 index 0000000000000..6be87c7af6e15 --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/form/text_area_non_resizable.html @@ -0,0 +1,3 @@ + diff --git a/packages/ui_framework/doc_site/src/views/form/text_input.html b/packages/ui_framework/doc_site/src/views/form/text_input.html new file mode 100644 index 0000000000000..ed249730da913 --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/form/text_input.html @@ -0,0 +1,21 @@ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + diff --git a/packages/ui_framework/doc_site/src/views/form_layout/field_group.js b/packages/ui_framework/doc_site/src/views/form_layout/field_group.js new file mode 100644 index 0000000000000..0159408e0e05e --- /dev/null +++ b/packages/ui_framework/doc_site/src/views/form_layout/field_group.js @@ -0,0 +1,103 @@ +import React from 'react'; + +import { + KuiFieldGroup, + KuiFieldGroupSection, + KuiButton, + KuiButtonIcon, + KuiButtonGroup, +} from '../../../../components'; + +export default () => ( +
+ + +
+
+ +
+ + + + + + + +
+ + + + + + + + + Ping + + + + +
+ + + + - -
- - - -
- - - -
- - - -
- - - -
- - diff --git a/ui_framework/doc_site/src/views/form/text_area_non_resizable.html b/ui_framework/doc_site/src/views/form/text_area_non_resizable.html deleted file mode 100644 index 6be87c7af6e15..0000000000000 --- a/ui_framework/doc_site/src/views/form/text_area_non_resizable.html +++ /dev/null @@ -1,3 +0,0 @@ - diff --git a/ui_framework/doc_site/src/views/form/text_input.html b/ui_framework/doc_site/src/views/form/text_input.html deleted file mode 100644 index ed249730da913..0000000000000 --- a/ui_framework/doc_site/src/views/form/text_input.html +++ /dev/null @@ -1,21 +0,0 @@ - - -
- - - -
- - - -
- - - -
- - - -
- - diff --git a/ui_framework/doc_site/src/views/form_layout/field_group.js b/ui_framework/doc_site/src/views/form_layout/field_group.js deleted file mode 100644 index 0159408e0e05e..0000000000000 --- a/ui_framework/doc_site/src/views/form_layout/field_group.js +++ /dev/null @@ -1,103 +0,0 @@ -import React from 'react'; - -import { - KuiFieldGroup, - KuiFieldGroupSection, - KuiButton, - KuiButtonIcon, - KuiButtonGroup, -} from '../../../../components'; - -export default () => ( -
- - -
-
- -
- - - - - - - -
- - - - - - - - - Ping - - - - -
- - - -